:root{
    --navy:#0B1F3A;
    --navy-2:#122A4E;
    --teal:#12888F;
    --teal-light:#63C7C0;
    --green:#3FA34D;
    --red:#D6261E;
    --gold:#E4A70A;
    --paper:#F5F7FA;
    --surface:#FFFFFF;
    --ink:#101722;
    --ink-soft:#4E5A6B;
    --line:#E1E6EE;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; font-weight:600; letter-spacing:-0.01em;}
  p{margin:0 0 1em; color:var(--ink-soft); max-width:62ch;}
  a{color:inherit;}
  button{font-family:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .mono{font-family:var(--font-mono);}

  /* ---------- Prototype chrome (not part of the real site — labels the demo) ---------- */
  .proto-bar{position:sticky; top:0; z-index:200; background:var(--navy); color:#cfe0e8; font-family:var(--font-mono); font-size:12.5px; padding:8px 18px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.12);}
  .proto-bar b{color:#fff; font-weight:500;}
  .proto-bar .proto-pages{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap;}
  .proto-bar button{background:transparent; border:1px solid rgba(255,255,255,.25); color:#cfe0e8; padding:5px 12px; border-radius:5px; cursor:pointer; font-family:var(--font-mono); font-size:12.5px;}
  .proto-bar button.is-active{background:var(--teal); border-color:var(--teal); color:#04211f;}
  .proto-bar button:hover{border-color:#fff;}
  .viewport-toggle{display:flex; gap:6px;}

  /* ---------- Site header ---------- */
  .site-header{position:sticky; top:0px; z-index:190; background:rgba(11,31,58,.97); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08);}
  .site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; gap:24px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; cursor:pointer; background:none; border:none;}
  .brand img{height:44px; width:auto;}
  .brand__word{font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:#fff; line-height:1.1;}
  .brand__word small{display:block; font-family:var(--font-mono); font-weight:400; font-size:.68rem; color:var(--teal-light); letter-spacing:.02em;}

  nav.mainnav{display:flex; align-items:center; gap:6px;}
  nav.mainnav > .navlink{position:relative;}
  nav.mainnav button.navlink__btn{background:none; border:none; color:#e7edf3; font-size:.95rem; padding:10px 14px; cursor:pointer; border-radius:6px; font-family:var(--font-body); font-weight:500;}
  nav.mainnav button.navlink__btn:hover, nav.mainnav button.navlink__btn.is-active{background:rgba(255,255,255,.08); color:#fff;}
  .cta-button{background:var(--red); color:#fff; border:none; padding:11px 20px; border-radius:6px; font-weight:600; font-size:.92rem; cursor:pointer; font-family:var(--font-body);}
  .cta-button:hover{background:#b81f18;}
  .cta-button.ghost{background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff;}
  .cta-button.ghost:hover{border-color:#fff;}

  .mega{position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--surface); color:var(--ink); width:640px; border-radius:12px; box-shadow:0 24px 48px rgba(4,15,30,.28); padding:22px; display:none; grid-template-columns:1fr 1fr; gap:6px 22px; border:1px solid var(--line);}
  .mega.is-open{display:grid;}
  .mega a{display:block; padding:9px 10px; border-radius:7px; text-decoration:none; color:var(--ink); font-size:.88rem; border-left:2px solid transparent;}
  .mega a:hover{background:var(--paper); border-left-color:var(--teal); color:var(--navy);}
  .mega a small{display:block; color:var(--ink-soft); font-size:.75rem; font-weight:400; margin-top:1px;}

  .hamburger{display:none; background:none; border:1px solid rgba(255,255,255,.3); border-radius:6px; width:42px; height:38px; color:#fff; cursor:pointer; font-size:1.1rem;}
  .mobile-menu{display:none; background:var(--navy-2); border-top:1px solid rgba(255,255,255,.1);}
  .mobile-menu.is-open{display:block;}
  .mobile-menu .wrap{padding:14px 28px 22px; display:flex; flex-direction:column; gap:2px;}
  .mobile-menu button{background:none; border:none; text-align:left; color:#e7edf3; padding:11px 4px; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; font-family:var(--font-body);}
  .mobile-menu details summary{color:#e7edf3; padding:11px 4px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.08);}
  .mobile-menu details a{display:block; padding:8px 4px 8px 16px; color:#b9c6d4; text-decoration:none; font-size:.92rem;}

  /* ---------- Page sections ---------- */
  .page{display:none;}
  .page.is-active{display:block;}
  section{padding:88px 0;}
  .section-tight{padding:64px 0;}
  .kicker{font-family:var(--font-mono); font-size:.8rem; color:var(--teal); margin:0 0 14px; display:inline-flex; align-items:center; gap:8px;}
  .kicker::before{content:''; width:22px; height:1px; background:var(--teal); display:inline-block;}

  /* ---- HOME hero ---- */
  .hero{background:var(--navy); color:#fff; position:relative; overflow:hidden; padding:100px 0 90px;}
  .hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; position:relative; z-index:2;}
  .hero h1{font-size:3.1rem; color:#fff; max-width:12ch;}
  .hero p.lead{color:#c3d0dd; font-size:1.15rem; max-width:46ch;}
  .hero .actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
  .hero-figure{position:relative; display:flex; align-items:center; justify-content:center;}
  .hero-figure img{width:100%; max-width:380px; filter:drop-shadow(0 20px 45px rgba(0,0,0,.45));}
  .circuit-bg{position:absolute; inset:0; opacity:.35; z-index:1; pointer-events:none;}
  .trust-strip{background:var(--navy-2); border-top:1px solid rgba(255,255,255,.08); padding:22px 0;}
  .trust-strip .wrap{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; color:#a9bacb; font-family:var(--font-mono); font-size:.82rem;}
  .trust-strip b{color:#fff; font-family:var(--font-display); font-size:1.3rem; display:block; font-weight:600;}

  /* branches overview on home */
  .branch-overview{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;}
  .branch-tile{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px; border-top:3px solid var(--teal); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
  .branch-tile:nth-child(2){border-top-color:var(--green);}
  .branch-tile:nth-child(3){border-top-color:var(--gold);}
  .branch-tile:nth-child(4){border-top-color:var(--red);}
  .branch-tile:nth-child(5){border-top-color:var(--navy);}
  .branch-tile:nth-child(6){border-top-color:var(--teal-light);}
  .branch-tile:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,31,58,.1);}
  .branch-tile .mono{color:var(--ink-soft); font-size:.75rem;}
  .branch-tile h4{margin:6px 0 8px; font-size:1.15rem;}
  .branch-tile p{font-size:.92rem; margin-bottom:0;}

  /* approach / process (real sequence -> numbered) */
  .process{background:var(--surface);}
  .process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; border-top:1px solid var(--line);}
  .process-step{padding:26px 22px 0; border-right:1px solid var(--line);}
  .process-step:last-child{border-right:none;}
  .process-step .num{font-family:var(--font-mono); color:var(--teal); font-size:.85rem;}
  .process-step h4{font-size:1.02rem; margin:10px 0 6px;}
  .process-step p{font-size:.88rem;}

  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .stat-band{background:var(--navy); color:#fff;}
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:left;}
  .stat{border-left:2px solid var(--teal); padding-left:16px;}
  .stat .n{font-family:var(--font-display); font-size:2.4rem; font-weight:600; color:#fff;}
  .stat .l{color:#a9bacb; font-size:.88rem;}

  .cta-band{background:linear-gradient(120deg, var(--navy), #0d2645); color:#fff; text-align:left;}
  .cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
  .cta-band h2{color:#fff; margin:0;}
  .cta-band p{color:#c3d0dd; margin:8px 0 0;}

  footer{background:var(--navy); color:#a9bacb; padding:60px 0 30px; font-size:.9rem;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
  footer h5{color:#fff; font-family:var(--font-display); font-size:.95rem; margin-bottom:14px;}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  footer a{color:#a9bacb; text-decoration:none; font-size:.87rem;}
  footer a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:#7e91a5; font-family:var(--font-mono);}

  /* ---- ABOUT ---- */
  .page-header{background:var(--navy-2); color:#fff; padding:56px 0;}
  .page-header h1{color:#fff; font-size:2.3rem; margin-bottom:8px;}
  .breadcrumb{font-family:var(--font-mono); font-size:.8rem; color:var(--teal-light);}
  .principle-list{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:30px;}
  .principle{padding:20px 0; border-top:1px solid var(--line);}
  .principle h4{font-size:1.02rem; margin-bottom:6px;}
  .principle p{font-size:.92rem; margin:0;}

  /* ---- SERVICES ---- */
  .filter-row{display:flex; gap:10px; flex-wrap:wrap; margin:36px 0 8px; position:sticky; top:calc(33px + 68px); background:var(--paper); padding:10px 0; z-index:50;}
  .chip{border:1px solid var(--line); background:var(--surface); padding:9px 16px; border-radius:20px; font-size:.85rem; cursor:pointer; color:var(--ink-soft); font-family:var(--font-body);}
  .chip.is-active, .chip:hover{border-color:var(--teal); color:var(--navy); background:#eaf6f6;}
  .branch{padding:42px 0 6px; border-top:1px solid var(--line); margin-top:26px;}
  .branch__head{max-width:640px;}
  .branch__tag{font-family:var(--font-mono); font-size:.78rem; color:var(--teal);}
  .branch__head h3{font-size:1.5rem; margin:8px 0 4px;}
  .branch__head p{font-size:.94rem;}
  .branch__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px;}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 18px; cursor:pointer; text-align:left;}
  .card:hover{border-color:var(--teal); box-shadow:0 10px 24px rgba(11,31,58,.08);}
  .card__icon{width:44px; height:44px; margin-bottom:12px; border-radius:50%;}
  .card__title{font-size:.98rem; margin:0 0 6px;}
  .card__teaser{font-size:.83rem; margin:0; color:var(--ink-soft);}

  /* modal */
  .modal-overlay{position:fixed; inset:0; background:rgba(9,18,32,.55); display:none; align-items:center; justify-content:center; z-index:500; padding:20px;}
  .modal-overlay.is-open{display:flex;}
  .modal{background:#fff; border-radius:14px; max-width:520px; width:100%; padding:34px; position:relative;}
  .modal img{width:56px; height:56px; border-radius:50%; margin-bottom:16px;}
  .modal-close{position:absolute; top:18px; right:18px; background:var(--paper); border:1px solid var(--line); border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:1rem;}
  .modal h3{margin-bottom:12px;}
  .modal .modal-cta{margin-top:20px; display:flex; gap:12px;}

  /* ---- CONTACT ---- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-start;}
  .contact-pane{gap:60px; margin-left: 25%; margin-right: 25%;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:.85rem; margin-bottom:6px; color:var(--ink); font-weight:500;}
  .field input, .field select, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:7px; font-family:var(--font-body); font-size:.95rem; background:#fff;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .form-note{font-size:.8rem; color:var(--ink-soft); margin-top:-6px;}
  .success-msg{display:none; background:#eaf7ed; border:1px solid var(--green); color:#1f5e2b; padding:14px 16px; border-radius:8px; font-size:.9rem; margin-bottom:18px;}
  .success-msg.is-open{display:block;}
  .info-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px; margin-bottom:16px;}
  .info-card h4{font-size:.95rem; margin-bottom:6px;}
  .info-card p{font-size:.9rem; margin:0;}
  .map-block{background:var(--navy-2); border-radius:10px; height:220px; display:flex; align-items:center; justify-content:center; color:#a9bacb; font-family:var(--font-mono); font-size:.82rem; margin-bottom:16px;}
  .faq{border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item summary{padding:18px 4px; cursor:pointer; font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; font-family:var(--font-mono); color:var(--teal); font-size:1.2rem;}
  .faq-item[open] summary::after{content:'\2212';}
  .faq-item p{padding-bottom:18px; font-size:.92rem;}

  .back-to-top{position:fixed; bottom:26px; right:26px; background:var(--navy); color:#fff; border:none; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.1rem; box-shadow:0 10px 24px rgba(0,0,0,.25); display:none; z-index:150;}
  .back-to-top.is-visible{display:block;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important; animation:none !important;}
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    nav.mainnav{display:none;}
    .hamburger{display:inline-block;}
    .hero .wrap{grid-template-columns:1fr;}
    .hero-figure{order:-1; max-width:220px; margin:0 auto 20px;}
    .hero h1{font-size:2.3rem; max-width:none;}
    .branch-overview{grid-template-columns:repeat(2,1fr);}
    .process-row{grid-template-columns:repeat(2,1fr);}
    .process-step{border-right:none; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:22px;}
    .two-col{grid-template-columns:1fr; gap:30px;}
    .stat-grid{grid-template-columns:repeat(2,1fr); gap:26px;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
    .branch__grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;}
    .principle-list{grid-template-columns:1fr;}
    .contact-pane{gap:60px;margin-left: 0;margin-right: 0;}
  }
  @media (max-width: 560px){
    .wrap{padding:0 18px;}
    section{padding:56px 0;}
    .hero{padding:56px 0 40px;}
    .hero h1{font-size:1.9rem;}
    .branch-overview{grid-template-columns:1fr;}
    .process-row{grid-template-columns:1fr;}
    .stat-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .branch__grid{grid-template-columns:1fr;}
    .field-row{grid-template-columns:1fr;}
    .cta-band .wrap{flex-direction:column; align-items:flex-start;}
    .filter-row{position:static;}
    .contact-pane{gap:60px;margin-left: 0;margin-right: 0;}
  }