:root{
    --blue:#2E3094;--blue-bright:#4144CB;--blue-soft:#EEEFFB;--blue-tint:#F6F7FC;
    --cyan:#0EA5B7;--cyan-t:#E3F6F8;--amber:#E8890C;--amber-t:#FCF1E1;
    --coral:#EE4D77;--coral-t:#FCE7ED;--green:#16A974;--green-t:#E2F6EE;--violet:#6D54F0;--violet-t:#EDEAFD;
    --ink:#0E1020;--slate:#52546A;--line:#E6E7F2;--white:#FFF;
    --radius:18px;--shadow:0 18px 50px -22px rgba(46,48,148,.32);--shadow-sm:0 8px 24px -14px rgba(14,16,32,.22);--maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
  body{font-family:'Hanken Grotesk',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
  h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;line-height:1.05;letter-spacing:-.02em;font-weight:700}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{font-weight:800;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
  img{display:block;max-width:100%}

  .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.98rem;padding:.85em 1.5em;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s}
  .btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 26px -12px rgba(46,48,148,.7)}
  .btn-primary:hover{transform:translateY(-2px);background:var(--blue-bright);box-shadow:0 18px 32px -12px rgba(65,68,203,.7)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
  .btn:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
  .btn:disabled:hover{transform:none}
  .spinner{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .btn-white{background:#fff;color:var(--blue)}.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(0,0,0,.4)}
  .arrow{transition:transform .25s}.btn:hover .arrow{transform:translateX(3px)}

  /* Skip-to-content link: visually hidden until focused (keyboard accessibility) */
  .skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--blue);color:#fff;
    padding:10px 18px;border-radius:10px;font-weight:600;font-size:.95rem;
    box-shadow:0 10px 28px -12px rgba(46,48,148,.6);transition:top .2s ease}
  .skip-link:focus{top:12px}
  /* Let the sticky header clear the focus target when jumped to via the skip link */
  main[tabindex="-1"]{outline:none;scroll-margin-top:88px}

  /* NAV */
  header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
  header nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{cursor:pointer}.logo img{height:32px;width:auto}
  .navlinks{display:flex;align-items:center;gap:32px}
  .navlinks a.lnk{font-weight:500;font-size:.96rem;color:var(--slate);position:relative;cursor:pointer;transition:color .2s}
  .navlinks a.lnk:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--blue);transition:width .25s}
  .navlinks a.lnk:hover{color:var(--ink)}
  .navlinks a.lnk.active{color:var(--ink)}.navlinks a.lnk.active:after{width:100%}
  .nav-cta{display:flex;align-items:center;gap:14px}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
  .menu-btn span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
  body.nav-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .menu-btn span:nth-child(2){opacity:0}
  body.nav-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* PAGES */
  /* Each page is its own static HTML document, so main content always renders. */
  .page{display:block;animation:fadeIn .45s cubic-bezier(.2,.8,.2,1)}
  @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  section{padding:74px 0}
  .pad-sm{padding:56px 0}
  .sec-head{max-width:640px;margin-bottom:46px}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .sec-head h1,.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:12px}
  .sec-head p{color:var(--slate);font-size:1.06rem;margin-top:14px}

  /* HERO */
  .hero{position:relative;padding:80px 0 70px;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
  .hero h1{font-size:clamp(2.5rem,5.2vw,4.1rem);font-weight:800}
  .hero h1 .hl{color:var(--blue);white-space:nowrap}
  .hero p.lead{font-size:1.16rem;color:var(--slate);margin:22px 0 32px;max-width:33ch}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .pill-row{display:flex;gap:24px;margin-top:34px;flex-wrap:wrap}
  .pill{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--slate);font-weight:500}
  .pill .dot{width:9px;height:9px;border-radius:50%}
  .pill:nth-child(1) .dot{background:var(--green);box-shadow:0 0 0 4px var(--green-t)}
  .pill:nth-child(2) .dot{background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
  .pill:nth-child(3) .dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-t)}
  .hero-visual{position:relative;height:430px;border-radius:26px;background:linear-gradient(150deg,var(--blue) 0%,#23256f 100%);box-shadow:var(--shadow);overflow:hidden}
  .hero-visual .grain{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 42%),radial-gradient(circle at 82% 78%,rgba(110,84,240,.35),transparent 45%)}
  .hero-visual svg.net{position:absolute;inset:0;width:100%;height:100%}
  .hv-stat{position:absolute;left:24px;bottom:22px;color:#fff}
  .hv-stat .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.5rem;line-height:1}
  .hv-stat .sub{font-size:.88rem;color:rgba(255,255,255,.78);margin-top:4px}
  .hv-chip{position:absolute;background:rgba(255,255,255,.97);border-radius:14px;padding:10px 13px;box-shadow:0 14px 30px -12px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px}
  .hv-chip .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center}
  .hv-chip .t{font-size:.8rem;font-weight:700;color:var(--ink)}.hv-chip .s{font-size:.7rem;color:var(--slate)}
  .chip-1{top:24px;right:22px}.chip-1 .ic{background:var(--green-t);color:var(--green)}
  .chip-2{top:142px;left:22px}.chip-2 .ic{background:var(--coral-t);color:var(--coral)}
  .hv-mark{position:absolute;right:22px;bottom:24px;height:50px;width:auto;opacity:.9}
  .bg-mesh{position:absolute;top:-180px;right:-160px;width:540px;height:540px;background:radial-gradient(circle,var(--blue-soft) 0%,transparent 65%);z-index:-1}
  .bg-mesh2{position:absolute;top:120px;left:-200px;width:460px;height:460px;background:radial-gradient(circle,var(--cyan-t) 0%,transparent 68%);z-index:-1}

  /* TRUST */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--blue-tint)}
  .trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 28px;flex-wrap:wrap}
  .trust .label{font-size:.82rem;color:var(--slate);font-weight:600}
  .trust .marks{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
  .mk-txt{font-family:'Bricolage Grotesque';font-weight:700;color:#a4a6ba;font-size:1.05rem;transition:color .25s}.mk-txt:hover{color:var(--blue)}

  /* HIGHLIGHT cards (home) */
  .hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .hl-card{border-radius:var(--radius);padding:30px;border:1px solid var(--line);background:#fff;transition:transform .3s,box-shadow .3s}
  .hl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .hl-card .ic{width:50px;height:50px;border-radius:13px;background:var(--ct);color:var(--c);display:grid;place-items:center;margin-bottom:18px}
  .hl-card .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:2rem;color:var(--c);line-height:1}
  .hl-card h3{font-size:1.12rem;margin:10px 0 6px}.hl-card p{color:var(--slate);font-size:.94rem}

  /* SERVICES */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
  .svc:before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--c);transition:width .35s}
  .svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}.svc:hover:before{width:100%}
  .svc .ic{width:50px;height:50px;border-radius:13px;background:var(--ct);color:var(--c);display:grid;place-items:center;margin-bottom:18px;transition:.3s}
  .svc:hover .ic{background:var(--c);color:#fff}
  .svc h2,.svc h3{font-size:1.18rem;margin-bottom:8px}.svc p{color:var(--slate);font-size:.94rem}

  /* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:6px}
  .steps:before{content:"";position:absolute;top:31px;left:11%;right:11%;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--amber),var(--green));border-radius:3px;opacity:.5}
  .step{text-align:center;padding:0 14px;position:relative}
  .step .num{width:62px;height:62px;border-radius:50%;background:#fff;border:3px solid var(--c);color:var(--c);display:grid;place-items:center;margin:0 auto 18px;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.4rem;box-shadow:0 10px 24px -12px rgba(14,16,32,.25);position:relative;z-index:1;transition:transform .3s}
  .step:hover .num{transform:translateY(-5px) scale(1.05)}
  .step h3,.step h4{font-size:1.05rem;margin-bottom:7px}.step p{font-size:.88rem;color:var(--slate)}

  /* BAND */
  .band{background:var(--blue);color:#fff;position:relative;overflow:hidden}
  .band:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 12% 20%,rgba(255,255,255,.10),transparent 35%),radial-gradient(circle at 88% 80%,rgba(110,84,240,.4),transparent 42%)}
  .band .wrap{position:relative;z-index:1}
  .band-inner{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;align-items:center}
  .band-lead h2{font-size:1.8rem;color:#fff}.band-lead p{color:rgba(255,255,255,.8);margin-top:12px;max-width:30ch}
  .stat .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.8rem;line-height:1}
  .stat .l{color:rgba(255,255,255,.82);font-size:.92rem;margin-top:8px}.stat .n .u{font-size:1.5rem;vertical-align:top}

  /* SLA infographic */
  .resp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
  .donut-wrap{position:relative;display:grid;place-items:center;--donut:clamp(190px,12.5vw,280px)}
  .donut-center{position:absolute;text-align:center}
  .donut-center .pc{font-family:'Bricolage Grotesque';font-weight:800;font-size:calc(var(--donut)*.2);color:var(--blue);line-height:1}
  .donut-center .lb{font-size:calc(var(--donut)*.06);color:var(--slate);max-width:14ch;margin:calc(var(--donut)*.022) auto 0}
  .bars{display:flex;flex-direction:column;gap:18px}
  .bar-row{display:grid;grid-template-columns:130px 1fr 70px;align-items:center;gap:16px}
  .bar-row .pl{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem}
  .bar-row .pl .sw{width:11px;height:11px;border-radius:3px;background:var(--c)}
  .bar-track{height:14px;background:var(--blue-soft);border-radius:8px;overflow:hidden}
  .bar-fill{height:100%;width:0;background:var(--c);border-radius:8px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
  .bar-row .tm{font-weight:700;font-size:.9rem;color:var(--ink);text-align:right;font-family:'Bricolage Grotesque'}

  /* COMPARE */
  .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .cmp{border-radius:20px;padding:32px;position:relative;overflow:hidden}
  .cmp.bad{background:#fff;border:1.5px solid var(--line)}
  .cmp.good{background:linear-gradient(160deg,var(--blue) 0%,#26276f 100%);color:#fff;box-shadow:var(--shadow)}
  .cmp h3{font-size:1.25rem;margin-bottom:6px}.cmp.bad h3{color:var(--ink)}
  .cmp .cap{font-size:.86rem;margin-bottom:20px}.cmp.bad .cap{color:var(--slate)}.cmp.good .cap{color:rgba(255,255,255,.75)}
  .cmp ul{list-style:none;display:flex;flex-direction:column;gap:13px}
  .cmp li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
  .cmp li .i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
  .cmp.bad li .i{background:var(--coral-t);color:var(--coral)}.cmp.good li .i{background:rgba(255,255,255,.18);color:#fff}
  .cmp.good li{color:rgba(255,255,255,.92)}
  .cmp .badge{position:absolute;top:20px;right:20px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
  .cmp.bad .badge{background:var(--coral-t);color:var(--coral)}.cmp.good .badge{background:rgba(255,255,255,.2);color:#fff}

  /* CASES */
  .case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .case{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .3s,box-shadow .3s}
  .case:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .case .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:var(--ct);padding:5px 12px;border-radius:999px;margin-bottom:16px}
  .case h3{font-size:1.26rem;line-height:1.18;margin-bottom:11px}
  .case p{color:var(--slate);font-size:.95rem;margin-bottom:18px}
  .case .res{display:flex;gap:26px;border-top:1px solid var(--line);padding-top:16px}
  .case .res .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.45rem;color:var(--c);line-height:1}
  .case .res .l{font-size:.79rem;color:var(--slate);margin-top:3px}

  /* ABOUT */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .about p{color:var(--slate);font-size:1.04rem;margin-top:16px}
  .about .vals{display:flex;flex-direction:column;gap:16px;margin-top:26px}
  .val{display:flex;gap:14px;align-items:flex-start}
  .val .tick{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-top:2px}
  .val:nth-child(1) .tick{background:var(--green-t);color:var(--green)}
  .val:nth-child(2) .tick{background:var(--cyan-t);color:var(--cyan)}
  .val:nth-child(3) .tick{background:var(--amber-t);color:var(--amber)}
  .val .vt{font-weight:600;color:var(--ink)}.val .vs{font-size:.93rem;color:var(--slate)}
  .about-card{background:linear-gradient(160deg,var(--blue) 0%,#26276f 100%);border-radius:24px;padding:40px;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .about-card .q{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.35rem;line-height:1.35}
  .about-card .meta{margin-top:24px;font-size:.88rem;color:rgba(255,255,255,.78)}
  .about-card .mk{position:absolute;right:-26px;bottom:-26px;height:190px;width:auto;opacity:.14}

  /* CONTACT */
  .contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:54px}
  .contact-info h1,.contact-info h2{font-size:clamp(2.1rem,3.8vw,3rem)}
  .contact-info p{color:var(--slate);font-size:1.04rem;margin-top:14px;max-width:38ch}
  .info-list{margin-top:30px;display:flex;flex-direction:column;gap:20px}
  .info-item{display:flex;gap:15px;align-items:flex-start}
  .info-item .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
  .info-item:nth-child(1) .ic{background:var(--coral-t);color:var(--coral)}
  .info-item:nth-child(2) .ic{background:var(--green-t);color:var(--green)}
  .info-item:nth-child(3) .ic{background:var(--cyan-t);color:var(--cyan)}
  .info-item .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);font-weight:700}
  .info-item .v{font-size:1.01rem;color:var(--ink);font-weight:500}
  .form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-sm)}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{margin-bottom:15px}.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px}
  .field input,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:.96rem;color:var(--ink);background:var(--blue-tint);transition:border-color .2s,background .2s}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
  .field textarea{resize:vertical;min-height:90px}
  .consent{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px;font-size:.84rem;line-height:1.45;color:var(--slate)}.consent input{margin-top:3px;flex:0 0 auto}
  .consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}.consent a:hover{color:var(--blue-bright)}
  .form-card .btn-primary{width:100%;justify-content:center}
  .form-note{font-size:.8rem;color:var(--slate);text-align:center;margin-top:13px}
  .form-error{font-size:.84rem;color:#b3261e;background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.25);border-radius:8px;padding:10px 12px;margin-bottom:13px}
  /* honeypot: kept in the DOM for bots, removed from view/AT for humans */
  .hp-field{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
  /* Turnstile holder: collapses to nothing while dormant (no widget rendered) */
  #turnstile{margin-bottom:13px}
  #turnstile:empty{display:none}
  .sent{display:none;text-align:center;padding:28px 10px}
  .sent .ck{width:62px;height:62px;border-radius:50%;background:var(--green-t);color:var(--green);display:grid;place-items:center;margin:0 auto 16px}
  .sent h2,.sent h3{font-size:1.35rem;margin-bottom:8px}.sent p{color:var(--slate)}

  /* CTA strip */
  .cta{background:linear-gradient(135deg,var(--blue) 0%,#3133a8 60%,var(--blue-bright) 130%);border-radius:24px;padding:48px;text-align:center;position:relative;overflow:hidden}
  .cta:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.12),transparent 40%)}
  .cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);position:relative}
  .cta p{color:rgba(255,255,255,.82);margin:12px auto 26px;max-width:46ch;position:relative}
  .cta .btn{position:relative;z-index:1}

  /* FOOTER */
  footer{background:var(--ink);color:#fff;padding:58px 0 28px}
  .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-brand{display:flex;flex-direction:column}
  .foot-brand img{height:32px;width:auto;margin-bottom:15px}.foot-brand p{color:rgba(255,255,255,.6);font-size:.93rem}
  /* Compact legal links pinned to the bottom of the brand column (margin-top:auto),
     so they sit just above the footer divider, level with the logo/tagline block.
     padding-top keeps a sensible gap when the columns stack on mobile and there is
     no spare height for the auto margin to consume. */
  .foot-legal{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.85rem}
  .foot-legal a{color:rgba(255,255,255,.6);cursor:pointer;transition:color .2s}.foot-legal a:hover{color:#fff}
  .foot-legal .sep{color:rgba(255,255,255,.28)}
  .fcol h2,.fcol h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:15px;font-weight:700}
  .fcol a{display:block;color:rgba(255,255,255,.78);font-size:.94rem;margin-bottom:10px;cursor:pointer;transition:color .2s}.fcol a:hover{color:#fff}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:14px}
  .foot-bot p{color:rgba(255,255,255,.5);font-size:.85rem}
  .socials{display:flex;gap:12px}
  .socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .25s}.socials a:hover{background:var(--blue-bright)}

  .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

  @media(max-width:980px){
    .hero-grid,.about-grid,.contact-grid,.resp-grid{grid-template-columns:1fr;gap:40px}
    .hero-visual{height:360px}
    .svc-grid,.hl-grid{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr);gap:34px 0}.steps:before{display:none}
    .band-inner{grid-template-columns:1fr 1fr;gap:32px}
    .cmp-grid,.case-grid{grid-template-columns:1fr}
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .navlinks{position:fixed;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:6px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);display:none}
    body.nav-open .navlinks{display:flex}
    .navlinks a.lnk{padding:14px 28px;width:100%}.navlinks a.lnk:after{display:none}
    .nav-cta .btn-ghost{display:none}.menu-btn{display:flex}
    .svc-grid,.hl-grid,.frow,.steps{grid-template-columns:1fr}
    /* Footer on mobile: the brand spans the full width on top, then the Company
       and Get in touch lists sit side by side as two columns beneath it, and the
       legal links are reordered to sit BELOW those lists. display:contents unwraps
       the brand block so its logo, tagline and legal links become direct items of
       the footer grid — that lets the legal row be ordered last while the logo and
       tagline still span the full width on top. row-gap drives the vertical rhythm
       (the logo img's own margin is zeroed so spacing doesn't double up). At ≥641px
       none of this applies: the brand keeps its own block and the lists move up next
       to it on the right. */
    .foot-top{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:24px}
    .foot-brand{display:contents}
    .foot-brand>picture,.foot-brand>p{grid-column:1/-1}
    .foot-brand img{margin-bottom:0}
    /* Legal links: full-width, ordered last, on a single line (font shrinks to fit).
       Social icons stay pinned to the right even when they wrap below the copyright. */
    .foot-legal{grid-column:1/-1;order:1;margin-top:0;padding-top:0;flex-wrap:nowrap;white-space:nowrap;gap:8px;font-size:clamp(.6rem,2.9vw,.8rem)}
    .foot-bot .socials{margin-left:auto}
    .band-inner{grid-template-columns:1fr}.bar-row{grid-template-columns:92px 1fr 54px;gap:10px}
    section{padding:56px 0}.hero{padding:48px 0 54px}.cta{padding:36px 24px}
  }

  /* JOURNEY progress bar */
  .journey-bar{position:sticky;top:72px;z-index:55;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
  .jb-track{display:flex;align-items:center;justify-content:space-between;max-width:780px;margin:0 auto;padding:14px 0;position:relative}
  .jb-track:before{content:"";position:absolute;top:28px;left:16px;right:16px;height:2px;background:var(--line);z-index:0}
  .jb-fill{position:absolute;top:28px;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));z-index:1;border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.2,1),left .5s}
  .jstep{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;background:transparent;padding:0 4px}
  .jdot{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--slate);display:grid;place-items:center;font-weight:700;font-size:.85rem;font-family:'Bricolage Grotesque';transition:.3s}
  .jstep.done .jdot{border-color:var(--blue);background:var(--blue);color:#fff}
  .jstep.active .jdot{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 0 0 5px var(--blue-soft);transform:scale(1.08)}
  .jlbl{font-size:.74rem;font-weight:600;color:var(--slate);transition:.3s;white-space:nowrap}
  .jstep.active .jlbl{color:var(--ink)}.jstep:hover .jlbl{color:var(--ink)}

  /* JOURNEY nav (bottom of page) */
  .journey-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--maxw);margin:0 auto;padding:30px 28px 8px;border-top:1px solid var(--line)}
  .journey-nav.nob{justify-content:space-between}
  .jn-back{display:flex;align-items:center;gap:13px;cursor:pointer;color:var(--slate)}
  .jn-back:hover{color:var(--ink)}
  .jn-back .a{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.25s;flex:none}
  .jn-back:hover .a{border-color:var(--blue);color:var(--blue);transform:translateX(-3px)}
  .jn-back small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
  .jn-back strong{font-size:.98rem;font-weight:600;color:var(--ink)}
  .jn-meta{font-size:.8rem;color:var(--slate);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .jn-end{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--blue);font-weight:600}

  /* TESTIMONIALS */
  .tst-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .tst{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative;transition:transform .3s,box-shadow .3s}
  .tst:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .tst .stars{display:flex;gap:3px;margin-bottom:14px}
  .tst .stars svg{color:#F5A524}
  .tst .qt{font-size:1rem;color:var(--ink);line-height:1.62;margin-bottom:22px}
  .tst .who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px}
  .tst .av{width:46px;height:46px;border-radius:50%;background:var(--ct);color:var(--c);display:grid;place-items:center;flex:none}
  .tst .nm{font-weight:700;font-size:.93rem;color:var(--ink)}
  .tst .rl{font-size:.82rem;color:var(--slate)}

  @media(max-width:780px){
    .jlbl{display:none}
    .jb-track{padding:12px 4px;max-width:100%}
    .journey-nav{flex-wrap:wrap;gap:14px}.jn-meta{order:3;width:100%;text-align:center}
  }
  @media(max-width:640px){
    .tst-grid{grid-template-columns:1fr}
    .jn-next{flex:1;justify-content:center}
  }


  /* ===== Merged progress-nav (overrides) ===== */
  header nav{height:80px}
  .navsteps{display:flex;justify-content:space-between;align-items:flex-start;position:relative;flex:1;max-width:560px;margin:0 36px;align-self:center}
  #jbLine{position:absolute;top:6px;height:2px;background:var(--line);z-index:0;border-radius:2px;left:0;width:0}
  .navsteps .jb-fill{position:absolute;top:6px;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));z-index:1;border-radius:2px;left:0;width:0;transition:width .55s cubic-bezier(.2,.8,.2,1),left .55s cubic-bezier(.2,.8,.2,1)}
  .navsteps .jstep{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;flex:1;background:transparent;padding:0}
  .navsteps .jdot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:#fff;display:block;transition:.3s;box-shadow:none}
  .navsteps .jstep.done .jdot{border-color:var(--blue);background:var(--blue)}
  .navsteps .jstep.active .jdot{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);transform:scale(1.06)}
  .navsteps .jlbl{display:block;font-size:.8rem;font-weight:500;color:var(--slate);white-space:nowrap;transition:.3s}
  .navsteps .jstep.active .jlbl{color:var(--ink);font-weight:600}
  .navsteps .jstep:hover .jlbl{color:var(--ink)}

  @media(max-width:900px){
    .menu-btn{display:flex}
    .navsteps{position:fixed;top:80px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;max-width:100%;margin:0;padding:6px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);display:none}
    body.nav-open .navsteps{display:flex}
    .navsteps #jbLine,.navsteps .jb-fill{display:none}
    .navsteps .jstep{flex-direction:row;justify-content:flex-start;gap:13px;padding:14px 28px}
    .navsteps .jlbl{font-size:1rem}
  }
  @media(max-width:480px){
    .nav-cta .btn-primary{padding:.62em 1.05em;font-size:.85rem}
  }


  /* ===== Single responsive codebase: mobile bottom nav + progress ===== */
  .val:nth-child(4) .tick{background:var(--violet-t);color:var(--violet)}
  .mprogress{display:none;position:sticky;top:80px;z-index:54;height:3px;background:var(--blue-soft)}
  .mprogress .mfill{height:100%;width:20%;background:linear-gradient(90deg,var(--blue),var(--blue-bright));border-radius:3px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
  /* No backdrop-filter here: blurred position:fixed elements detach and "stick"
     mid-screen during iOS Safari momentum scroll / toolbar transitions. The bg is
     already 96% opaque so the blur was barely visible. transform:translateZ(0) keeps
     the bar on its own compositing layer pinned to the viewport. */
  .tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);transform:translateZ(0);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;color:var(--slate);cursor:pointer;font-size:.64rem;font-weight:600}
  .tab .tic{width:42px;height:26px;display:grid;place-items:center;border-radius:999px;transition:background .25s}
  .tab svg{width:21px;height:21px}
  .tab.active{color:var(--blue)}
  .tab.active .tic{background:var(--blue-soft)}
  @media(max-width:900px){
    header nav{height:64px}
    .navsteps{display:none!important}
    .menu-btn{display:none!important}
    .mprogress{display:block;top:64px}
    .tabbar{display:flex}
    body{padding-bottom:66px}
  }
  @media(max-width:480px){
    .hero h1{font-size:2rem}
    .nav-cta .btn-primary{padding:.6em 1.05em;font-size:.82rem}
  }


  /* ===== High-resolution scaling (2K / 4K) ===== */
  body{font-size:1rem}
  @media(min-width:1440px){
    :root{--maxw:1340px}
    section{padding:clamp(74px,5vw,150px) 0}
    .hero-visual{height:clamp(450px,30vw,780px)}
  }
  /* Proportional upscaling so higher-res (2K/4K) screens keep the SAME relative
     proportions as 1080p — content grows to fill the wider viewport instead of
     staying at a fixed pixel size (which looks shrunk on a big screen). The
     vertical centering that removes the old bottom-whitespace lives in the
     "landing section" grid rule further down. */
  @media(min-width:1700px){ :root{--maxw:1500px} html{font-size:17px} }
  @media(min-width:2000px){ :root{--maxw:1720px} html{font-size:18px} }
  @media(min-width:2560px){ :root{--maxw:2080px} html{font-size:20px} }
  @media(min-width:3200px){ :root{--maxw:2560px} html{font-size:22px} }
  @media(min-width:3800px){ :root{--maxw:3040px} html{font-size:24px} }


  /* ===== v3: full-height sections, scroll cue, expanding services ===== */
  :root{--fillsub:80px}
  .fillvh{min-height:calc(100vh - var(--fillsub));display:flex;align-items:center;position:relative}
  .fillvh > .wrap{width:100%}
  @media(max-width:900px){:root{--fillsub:133px}}

  .scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--blue);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:6;animation:cuebob 1.8s ease-in-out infinite;transition:opacity .35s ease,visibility .35s}
  .scrollcue svg{width:20px;height:20px}
  .scrollcue.hidden{opacity:0;visibility:hidden;animation:none}
  @keyframes cuebob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

  .svc-grid{align-items:start}
  .svc.open{box-shadow:var(--shadow);border-color:transparent}
  .svc.open:before{width:100%}
  .svc-more{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,margin-top .35s ease}
  .svc.open .svc-more{max-height:360px;opacity:1;margin-top:15px}
  .svc-more p{font-size:.92rem;color:var(--slate);margin-bottom:11px}
  .svc-more ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .svc-more li{display:flex;gap:10px;align-items:flex-start;font-size:.89rem;color:var(--ink)}
  .svc-more li .d{width:7px;height:7px;border-radius:50%;background:var(--c);margin-top:7px;flex:none}


  /* ===== v4: full-page scroll snapping site-wide ===== */
  :root{--snaptop:80px}
  html{scroll-snap-type:y proximity;scroll-padding-top:var(--snaptop)}
  .page > section{
    position:relative;
    min-height:calc(100vh - var(--fillsub));
    min-height:calc(100dvh - var(--fillsub));
    display:flex;flex-direction:column;justify-content:center;
    scroll-snap-align:start;
  }
  .page > section > .wrap{width:100%}
  @media(max-width:900px){
    :root{--snaptop:67px}
    /* Disable full-page scroll-snapping on touch/mobile. With the full-height
       sections, `scroll-snap-type` fought the native momentum scroll: a single
       swipe wouldn't carry far and the page could spring back to the previous
       section. Free, inertial scrolling is what mobile users expect — snapping
       stays a desktop-only behaviour. */
    html{scroll-snap-type:none}
    .page > section{scroll-snap-align:none}
  }


  /* ===== v5: fill section space + fluid scroll animations ===== */
  .page > section > .wrap{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:clamp(22px,3.2vh,52px)}
  .sec-head h1,.sec-head h2{font-size:clamp(2.1rem,3.8vw,3rem)}
  .sec-head p{font-size:1.1rem}
  .hl-grid{gap:24px}
  .hl-card{padding:36px 32px}
  .hl-card .ic{width:58px;height:58px}
  .hl-card .big{font-size:2.5rem}
  .hl-card h3{font-size:1.22rem}
  .hl-card p{font-size:1rem}
  .svc{padding:32px 30px}
  .svc h2,.svc h3{font-size:1.26rem}
  .step .num{width:74px;height:74px;font-size:1.7rem}
  .step h3,.step h4{font-size:1.2rem}
  .step p{font-size:.96rem}
  .cmp{padding:38px}
  .cmp h3{font-size:1.4rem}
  .cmp li{font-size:1rem}
  .case h3{font-size:1.4rem}
  .stat .n{font-size:3.4rem}
  .band-lead h2{font-size:2.2rem}
  .cta{padding:clamp(42px,6vh,76px) 46px}
  .cta h2{font-size:clamp(2rem,3.6vw,2.8rem)}
  .cta p{font-size:1.08rem}
  .cta-assure{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:24px}
  .cta-assure span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.92);font-size:.94rem;font-weight:500}
  .cta-assure svg{width:17px;height:17px;flex:none}

  /* richer, scroll-triggered reveal */
  .reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .75s cubic-bezier(.2,.85,.25,1),transform .75s cubic-bezier(.2,.85,.25,1)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:900px){
    .page > section > .wrap{justify-content:center;gap:24px}
    .stat .n{font-size:2.6rem}
    .band-lead h2{font-size:1.7rem}
  }


  /* ===== v6: vertical stat infographic + dark-band nav + nav-in-last-section ===== */
  .band-ey{display:inline-block;font-weight:800;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px}
  .statlines{display:flex;flex-direction:column}
  .statline{display:flex;align-items:center;gap:22px;padding:clamp(14px,2vh,22px) 0;border-top:1px solid rgba(255,255,255,.14)}
  .statline:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .statline .si{width:48px;height:48px;flex:none;border-radius:13px;background:rgba(255,255,255,.1);color:var(--sc);display:grid;place-items:center}
  .statline .si svg{width:23px;height:23px}
  .statline .sv{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.1rem;color:var(--sc);line-height:1;min-width:150px}
  .statline .sl{font-size:1.06rem;color:rgba(255,255,255,.85)}
  /* line-by-line slide-in */
  .statline.reveal{transform:translateX(-30px)}
  .statline.reveal.in{transform:none}
  .statlines .statline:nth-of-type(1){transition-delay:.08s}
  .statlines .statline:nth-of-type(2){transition-delay:.20s}
  .statlines .statline:nth-of-type(3){transition-delay:.32s}
  .statlines .statline:nth-of-type(4){transition-delay:.44s}
  .statlines .statline:nth-of-type(5){transition-delay:.56s}


  @media(max-width:640px){
    .statline{gap:14px;padding:13px 0}
    .statline .sv{font-size:1.6rem;min-width:88px}
    .statline .sl{font-size:.92rem}
    .statline .si{width:40px;height:40px}
    .statline .si svg{width:20px;height:20px}
  }


  /* ===== v7: restore v5 nav layout, keep Next visible by reserving room for it ===== */
  :root{--navspace:120px}
  @media(min-width:901px){
    .page > section:last-of-type{
      min-height:calc(100vh - var(--fillsub) - var(--navspace));
      min-height:calc(100dvh - var(--fillsub) - var(--navspace));
    }
  }
  .journey-nav{padding:26px 28px 10px}

  /* ===== Landing section (first section of every page): center in viewport =====
     On a tall 2K/4K viewport each page's first section can still leave vertical
     slack, and the default flex layout (.wrap `flex:1`, line ~449) pins the
     content to the top. Here we override the first section to a single-column grid
     and vertically center its content, so the leftover space splits evenly
     above and below. `grid-template-columns:1fr` keeps .wrap full width (its own
     max-width + margin:auto still cap and center it) so inner `fr` grids don't
     collapse. `safe center` falls back to top-alignment if a section's content
     ever exceeds the viewport, so nothing is clipped under the sticky header.
     Covers home/cases/about/services/contact (the legal pages use a different
     layout). Full-screen sections preserved; normal desktop (<1700px) and
     mobile (<=900px) are untouched. */
  @media(min-width:1700px){
    .page > section:first-of-type{display:grid;grid-template-columns:1fr;align-content:safe center}
  }


/* v12: blue-only section bands (3 depths) */
.sec-hero{background:linear-gradient(180deg,#FFFFFF 0%,#F1F2FA 100%)}
.sec-b1{background:linear-gradient(180deg,#FAFBFE 0%,#F2F3FB 100%)}
.sec-b2{background:linear-gradient(180deg,#F5F6FC 0%,#EBECF8 100%)}
.sec-b3{background:linear-gradient(180deg,#EFF0F9 0%,#E3E5F4 100%)}


/* ============ v13 polish layer ============ */
::selection{background:rgba(65,68,203,.18)}

/* -- buttons: sheen sweep + lift + press -- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn:hover::after{left:130%}
.btn-ghost::after,.btn-white::after{background:linear-gradient(105deg,transparent,rgba(65,68,203,.10),transparent)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
.btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-bright) 120%)}
.btn-primary:hover{box-shadow:0 18px 34px -14px rgba(46,48,148,.85)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:rgba(46,48,148,.04)}
.btn:focus-visible{outline:3px solid rgba(65,68,203,.4);outline-offset:2px}

/* -- cards: lift + border glow + cursor spotlight -- */
.case,.tst,.hl-card,.info-item{position:relative;overflow:hidden}
.case,.tst,.hl-card{background-image:radial-gradient(460px circle at var(--mx,50%) var(--my,-20%),rgba(65,68,203,.06),transparent 65%);
  background-color:#fff;background-repeat:no-repeat}
.svc:hover,.case:hover,.tst:hover,.hl-card:hover{transform:translateY(-5px);
  border-color:rgba(65,68,203,.35);box-shadow:0 24px 48px -20px rgba(46,48,148,.28)}
.info-item{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.info-item:hover{transform:translateY(-3px);border-color:rgba(65,68,203,.3);box-shadow:0 14px 30px -16px rgba(46,48,148,.25)}

/* -- tinted sections: faint dot grid + corner glow (blue only) -- */
/* overflow-x clip: the .sec-b2::after corner glow below sits 200px beyond the
   section's right edge. Root-level overflow clipping misses it on some mobile
   browsers (notably iOS Safari), leaving a strip of pannable white space on a
   right-to-left swipe. Clip it at the section box — which spans the full
   viewport width, so the on-screen look is unchanged. */
.sec-b1,.sec-b2{position:relative;overflow-x:hidden;overflow-x:clip}
.sec-b1::before,.sec-b2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(46,48,148,.05) 1px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.sec-b2::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-200px;top:-160px;pointer-events:none;
  background:radial-gradient(circle,rgba(65,68,203,.08),transparent 70%)}
.sec-b1>.wrap,.sec-b2>.wrap{position:relative;z-index:1}

/* -- hero: floating blue orbs + gradient headline -- */
.sec-hero{position:relative;overflow:hidden}
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.5;z-index:0}
.orb-1{width:420px;height:420px;left:-140px;top:-120px;
  background:radial-gradient(circle,rgba(65,68,203,.22),transparent 70%);animation:orbfloat 11s ease-in-out infinite}
.orb-2{width:360px;height:360px;right:-110px;bottom:-140px;
  background:radial-gradient(circle,rgba(46,48,148,.18),transparent 70%);animation:orbfloat 13s ease-in-out infinite reverse}
@keyframes orbfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}}
.hero h1 .hl{background:linear-gradient(110deg,var(--blue) 20%,var(--blue-bright) 50%,var(--blue) 80%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--blue);animation:hlshift 7s ease-in-out infinite}
@keyframes hlshift{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* -- reveal: blur-to-sharp -- */
.reveal{filter:blur(5px);transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1),filter .65s cubic-bezier(.2,.8,.2,1)}
.reveal.in{filter:blur(0)}

/* -- scroll cue: soft pulse ring -- */
.scrollcue{position:absolute}
.scrollcue::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid rgba(65,68,203,.45);animation:cuepulse 2.4s ease-out infinite;pointer-events:none}
@keyframes cuepulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}

/* -- header: shadow when scrolled -- */
header{transition:box-shadow .35s,background .35s}
header.scrolled{box-shadow:0 10px 30px -18px rgba(14,16,32,.25);background:rgba(255,255,255,.93)}

/* -- form fields: focus glow -- */
.field input,.field textarea,.field select{transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-bright);
  box-shadow:0 0 0 4px rgba(65,68,203,.12)}

/* -- footer links: slide + colour -- */
.fcol a{transition:color .25s,transform .25s;display:inline-block}
.fcol a:hover{color:#fff;transform:translateX(3px)}

/* -- journey nav buttons inherit button feel -- */
.jn-next:hover,.jn-back:hover{transform:translateY(-2px)}
.jn-next:active,.jn-back:active{transform:scale(.97)}

/* -- stat digits: steady alignment while counting -- */
.hv-stat,.statline .n,.stat .n,.num{font-variant-numeric:tabular-nums}

/* -- calm it all down for reduced-motion users -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{filter:none;opacity:1;transform:none}
  /* Exempt the SLA data-viz: the donut and bars convey their meaning by drawing/filling,
     so keep their transitions even under reduced motion. These selectors outrank the
     universal rule above, so the !important durations win. */
  #donut.draw{animation-duration:1.4s!important}
  .bar-fill{transition-duration:1.1s!important}
}


/* v14: CTA button affordance fix */
.btn-white{box-shadow:0 12px 26px -12px rgba(10,12,40,.5);cursor:pointer}
.btn-white:hover{box-shadow:0 20px 36px -14px rgba(10,12,40,.55);background:#fff}
.btn .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:translateX(4px)}


/* ============ v15: FAQ accordion ============ */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.faq-item:hover{border-color:rgba(65,68,203,.3)}
.faq-item.open{border-color:rgba(65,68,203,.4);box-shadow:0 14px 30px -18px rgba(46,48,148,.25)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  text-align:left;background:none;border:0;cursor:pointer;padding:18px 22px;
  font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--ink)}
.faq-x{flex:none;width:26px;height:26px;border-radius:50%;position:relative;font-size:0;
  background:var(--blue-soft);color:var(--blue);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.faq-x::before,.faq-x::after{content:"";position:absolute;top:50%;left:50%;
  width:11px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.open .faq-x{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.faq-a p{padding:0 22px 20px;color:var(--slate);font-size:.98rem;line-height:1.65;max-width:62ch}

/* ============ v15: sticky mini-CTA ============ */
.minicta{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(16px) scale(.95);pointer-events:none;
  transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
.minicta.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.minicta .btn{padding:.7em 1.25em;font-size:.92rem;box-shadow:0 16px 34px -12px rgba(46,48,148,.65)}
.minicta-x{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);
  color:var(--slate);cursor:pointer;font-size:1.05rem;line-height:1;display:grid;place-items:center;
  box-shadow:0 8px 20px -10px rgba(14,16,32,.3);transition:color .25s,border-color .25s,transform .25s}
.minicta-x:hover{color:var(--blue);border-color:rgba(65,68,203,.4);transform:scale(1.08)}
@media(max-width:900px){.minicta{right:14px;bottom:76px}}


/* ============ v17: plans ============ */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.plan{position:relative;background:#fff;border:1px solid transparent;border-radius:16px;padding:24px 22px;
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.plan:hover{transform:translateY(-5px);box-shadow:0 24px 48px -20px rgba(46,48,148,.28)}
.plan h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.25rem;color:var(--ink);margin:0 0 4px}
.plan-sub{color:var(--slate);font-size:.9rem;line-height:1.5;margin:0 0 14px;min-height:2.7em}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{position:relative;padding-left:24px;font-size:.92rem;color:var(--slate);line-height:1.45}
.plan li::before{content:"";position:absolute;left:0;top:.32em;width:14px;height:14px;border-radius:50%;
  background:var(--blue-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232E3094" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/8px no-repeat}
.plan-pop{border-color:var(--blue);box-shadow:0 18px 40px -18px rgba(46,48,148,.35)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.plan-custom{background:linear-gradient(180deg,#FFFFFF 0%,#F1F2FA 100%);border-style:dashed}
/* Bottom margin reserves room for the absolutely-positioned .scrollcue
   (down arrow, bottom:20px + 46px tall) so it clears the CTA button. */
.plans-cta{text-align:center;margin-top:26px;margin-bottom:34px}
@media(max-width:1100px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.plans{grid-template-columns:1fr}.plan-sub{min-height:0}}


/* ============ v18 design-note tweaks ============ */
.hl-card,.svc{border-color:transparent;box-shadow:0 12px 32px -20px rgba(46,48,148,.20)}
.hl-card:hover,.svc:hover{border-color:rgba(65,68,203,.28)}
.contact-grid.contact-centered{grid-template-columns:1fr;max-width:680px;margin:0 auto;text-align:center;gap:26px}
.contact-centered .contact-info p{margin-left:auto;margin-right:auto;max-width:52ch}
.contact-centered .form-card{text-align:left}
/* Desktop/tablet only (min-width:641px): brand column flexes (1fr) while the two
   nav lists are content-width (auto) so they group on the right, level with the
   social icons in .foot-bot below. This is gated behind a min-width query so it
   does NOT override the ≤640px single-column rule (.foot-top{1fr}) — a bare
   top-level rule here would win on phones (media queries add no specificity) and
   the auto columns, which can't shrink, would overflow off the right edge. */
@media(min-width:641px){
  .foot-top{grid-template-columns:1fr auto auto;column-gap:64px}
}


/* ============ v19 hero NOC dashboard ============ */
.noc{position:absolute;top:26px;right:26px;bottom:26px;left:26px;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px 18px 16px;
  backdrop-filter:blur(3px);box-shadow:0 24px 50px -24px rgba(0,0,0,.55);overflow:hidden}
.noc-top{display:flex;align-items:center;gap:9px;color:#fff}
.noc-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.noc-badge{margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#86EFAC;border:1px solid rgba(134,239,172,.5);border-radius:999px;padding:2px 9px}
.live{width:9px;height:9px;border-radius:50%;background:#86EFAC;box-shadow:0 0 0 0 rgba(134,239,172,.7);
  animation:livep 2s ease-out infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(134,239,172,.6)}70%{box-shadow:0 0 0 9px rgba(134,239,172,0)}100%{box-shadow:0 0 0 0 rgba(134,239,172,0)}}
.noc-chart{position:relative;flex:1;margin:14px 0 12px;min-height:90px}
.noc-chart svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.nc-line{stroke-dasharray:640;stroke-dashoffset:640;animation:ncdraw 4.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ncdraw{0%{stroke-dashoffset:640}45%{stroke-dashoffset:0}85%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.nc-area{opacity:0;animation:ncfade 4.5s ease infinite}
@keyframes ncfade{0%,30%{opacity:0}55%{opacity:1}100%{opacity:1}}
.noc-scan{position:absolute;top:0;bottom:0;width:2px;left:0;
  background:linear-gradient(180deg,transparent,rgba(124,245,214,.9),transparent);
  box-shadow:0 0 14px 2px rgba(124,245,214,.5);animation:ncscan 4.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ncscan{0%{left:-2%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:101%;opacity:0}}
.noc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.nst{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:11px;padding:9px 10px;text-align:center}
.nstn{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.12rem;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.nstl{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}
.noc-feed{position:relative;height:30px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:9px}
.nev{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;gap:8px;padding:0 12px;color:#fff;font-size:.82rem;font-weight:500;opacity:0;animation:ncfeed 10s linear infinite}
.nev2{animation-delay:2.5s}.nev3{animation-delay:5s}.nev4{animation-delay:7.5s}
@keyframes ncfeed{0%{opacity:0;transform:translateY(7px)}4%{opacity:1;transform:translateY(0)}21%{opacity:1;transform:translateY(0)}25%{opacity:0;transform:translateY(-7px)}100%{opacity:0}}
.nd{width:8px;height:8px;border-radius:50%;flex:none}
.nd.g{background:#86EFAC}.nd.c{background:#7CF5D6}.nd.b{background:#C4B5FD}.nd.a{background:#FFC56B}
@media(max-width:560px){.noc{top:16px;right:16px;bottom:16px;left:16px;padding:14px}.noc-chart{min-height:70px}}
@media (prefers-reduced-motion:reduce){
  .nc-line{stroke-dashoffset:0;animation:none}.nc-area{opacity:1;animation:none}
  .noc-scan{display:none}.nev{animation:none}.nev1{opacity:1}.live{animation:none}}


/* ============ v20: line design + layout fixes ============ */
.net .flow{animation:flowmove 1.1s linear infinite}
.net .flow2{animation-duration:1.4s}
@keyframes flowmove{to{stroke-dashoffset:-32}}
/* centre the Next button on the home page journey bar */
#page-home .journey-nav{justify-content:flex-end}
/* services: equal-height, equal-size boxes */
.svc-grid{grid-auto-rows:1fr}
#page-services .svc{height:100%}
/* footer: stack column links vertically */
.fcol a{display:block}
@media (prefers-reduced-motion:reduce){.net .flow{animation:none}}


/* ============ v21: animation refinement & finalisation ============ */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* 1) Remove the blue hover border on Why-NOCTeam and Services cards
      (keep the lift, shadow and cursor spotlight) */
.hl-card,.hl-card:hover,.svc,.svc:hover{border-color:transparent !important}

/* 2) Reveal: lighter blur for crisper text, unified easing, gentler travel */
.reveal{filter:blur(3px);transform:translateY(18px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out)}
.reveal.in{filter:blur(0)}
/* finer stagger so grouped elements cascade smoothly */
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}

/* 3) Consistent, refined hover motion across all cards */
.hl-card,.svc,.case,.tst,.plan,.info-item,.faq-item{
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s var(--ease-out)}
.hl-card:hover,.case:hover,.tst:hover,.plan:hover{transform:translateY(-6px);
  box-shadow:0 26px 50px -22px rgba(46,48,148,.30)}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(46,48,148,.30)}

/* 4) Buttons: smoother, springier press; softer sheen */
.btn{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975);transition-duration:.1s}
.btn::after{transition:left .7s var(--ease-out)}

/* 5) Headline shimmer: slower and subtler so it reads as premium, not flashy */
.hero h1 .hl{animation:hlshift 11s ease-in-out infinite}
@keyframes hlshift{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* 6) Hero ambience: calmer orbs */
.orb-1{animation:orbfloat 16s ease-in-out infinite}
.orb-2{animation:orbfloat 19s ease-in-out infinite reverse}
.orb{opacity:.42}

/* 7) Scroll cues: slower, gentler pulse */
.scrollcue::after{animation:cuepulse 2.8s ease-out infinite}

/* 8) Network flow: ease the data motion so it glides rather than ticks */
.net .flow{animation:flowmove 2.6s linear infinite}
.net .flow2{animation-duration:3.2s}

/* 9) Service expand/collapse: smoother reveal of detail */
.svc-more{transition:max-height .5s var(--ease-out),opacity .45s ease,margin-top .45s ease}

/* 10) Soft, consistent focus ring for keyboard users (accessibility polish) */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(65,68,203,.45);outline-offset:2px;border-radius:8px}

/* 11) Honour reduced-motion globally for the refined layer */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{filter:none;transform:none;opacity:1}
  .page{animation:none}
  .hero h1 .hl{animation:none}
  .orb,.net .flow,.scrollcue::after{animation:none}
}


/* ============ cookie consent (vanilla-cookieconsent) theming ============ */
/* Map the library's CSS variables onto our brand tokens so the banner and
   preferences modal match the rest of the site. #cc-main wraps every widget. */
#cc-main{
  --cc-font-family:'Hanken Grotesk',sans-serif;
  --cc-modal-border-radius:18px;
  /* NOTE: the library reuses --cc-btn-border-radius for BOTH the buttons and the
     expandable category blocks (.pm__section*). It must stay a small block radius,
     otherwise an *expanded* category becomes a giant oval that bleeds over the
     cookie table. The pill shape for the actual buttons is restored below. */
  --cc-btn-border-radius:14px;
  --cc-z-index:80;
  --cc-bg:#fff;
  --cc-primary-color:var(--ink);
  --cc-secondary-color:var(--slate);
  --cc-link-color:var(--blue);
  --cc-link-hover-color:var(--blue-bright);
  --cc-btn-primary-bg:var(--blue);
  --cc-btn-primary-color:#fff;
  --cc-btn-primary-hover-bg:var(--blue-bright);
  --cc-btn-primary-hover-color:#fff;
  --cc-btn-secondary-bg:var(--blue-tint);
  --cc-btn-secondary-color:var(--ink);
  --cc-btn-secondary-hover-bg:var(--blue-soft);
  --cc-btn-secondary-hover-color:var(--ink);
  --cc-separator-border-color:var(--line);
  --cc-toggle-on-bg:var(--blue);
  --cc-toggle-readonly-bg:var(--line);
  --cc-toggle-on-knob-bg:#fff;
  --cc-cookie-category-block-bg:var(--blue-tint);
  --cc-cookie-category-block-bg-hover:var(--blue-soft);
}
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
/* Restore the site's pill buttons (and circular close button) after dropping the
   shared radius token to a block-friendly value above. !important is required
   because cookieconsent.css loads after styles.css with equal specificity. */
#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main .pm__close-btn{border-radius:999px!important}
/* Keep the consent box clear of the fixed mobile bottom tab bar (~66px) */
@media(max-width:900px){ #cc-main .cm{ margin-bottom:78px; } }


/* ============ legal / prose pages (privacy policy) ============ */
.legal-main{position:relative;padding:clamp(40px,5vw,72px) 0 80px;background:linear-gradient(180deg,#FFFFFF 0%,#F6F7FC 100%)}
.legal{max-width:820px;margin:0 auto;padding:0 28px}
.legal .doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px 28px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.legal .doc-head-text{min-width:0}
.doc-download{flex:none;white-space:nowrap}
.doc-download svg{width:17px;height:17px;flex:none}
/* The download link lives inside .legal, whose `a` rule (blue + underline) has
   higher specificity than .btn-primary and would override the button text.
   Restore the white, underline-free btn-primary look (incl. on hover). */
.legal a.doc-download,.legal a.doc-download:hover{color:#fff;text-decoration:none}
/* Once there is enough room beside the 820px column, lift the button out of the
   document header and float it in the top-right margin (near the heading). */
@media (min-width:1280px){
  .doc-download{position:absolute;z-index:3;margin:0;
    top:calc(clamp(40px,5vw,72px) + 24px);
    right:max(28px, calc((100vw - 820px) / 2 - 280px))}
}
.legal h1{font-size:clamp(2.1rem,4vw,3rem);margin:12px 0 10px}
.legal .updated{font-size:.86rem;color:var(--slate);font-weight:500}
.legal h2{font-size:1.4rem;margin:38px 0 12px;scroll-margin-top:96px}
.legal h3{font-size:1.08rem;margin:22px 0 8px}
.legal p,.legal li{color:var(--slate);font-size:1rem;line-height:1.7}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--blue-bright)}
.legal strong{color:var(--ink)}
.legal .toc{background:var(--blue-tint);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-bottom:30px}
.legal .toc h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin:0 0 12px}
.legal .toc ul{list-style:none;padding:0;gap:8px}
.legal .toc a{text-decoration:none;font-weight:500}
.legal ol{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.legal blockquote{margin:0 0 14px;padding:2px 0 2px 18px;border-left:3px solid var(--blue)}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--ink);background:var(--blue-soft);padding:1px 5px;border-radius:5px}
/* Same fix as .doc-download: keep buttons inside prose white and underline-free. */
.legal a.btn,.legal a.btn:hover{color:#fff;text-decoration:none}

/* ============ blog (generated by build-blog.py; reuses the .legal prose styles) ============ */
/* Listing: wide page, newest post as a full-width featured card, the rest in a
   two-column card grid (one column on phones). Article pages keep the narrow
   820px reading column. */
.legal.blog-index{max-width:calc(var(--maxw) + 56px)}
.legal .post-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.legal .post-list li{display:flex;min-width:0}
.legal .post-list a{display:flex;flex-direction:column;width:100%;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.legal .post-list a:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.legal .post-list .post-body{padding:20px 24px 24px}
.legal .post-list h2{font-size:1.22rem;line-height:1.3;margin:6px 0 8px;color:var(--ink)}
.legal .post-list a:hover h2{color:var(--blue)}
.legal .post-list p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.legal .post-list li:first-child{grid-column:1/-1}
@media(min-width:900px){
  .legal .post-list li:first-child a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
  .legal .post-list li:first-child .blog-cover{height:100%}
  .legal .post-list li:first-child .post-body{padding:30px 36px}
  .legal .post-list li:first-child h2{font-size:clamp(1.5rem,2.2vw,2rem)}
  .legal .post-list li:first-child p{-webkit-line-clamp:5}
}
@media(max-width:720px){.legal .post-list{grid-template-columns:1fr;gap:20px}}
.legal .post-meta{font-size:.84rem;color:var(--slate);font-weight:500}
.legal .blog-back{display:inline-block;font-size:.9rem;font-weight:600;text-decoration:none;margin-bottom:14px}
.legal .blog-origin{font-size:.92rem;font-style:italic}
.legal .blog-cta{margin-top:44px;padding:26px 28px;background:var(--blue-tint);border:1px solid var(--line);border-radius:var(--radius)}
.legal .blog-cta h2{margin:0 0 8px}
.legal .blog-cta .btn{margin-top:6px}
.legal hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.legal .blog-cover{display:block;width:100%;height:auto;border-radius:var(--radius);margin:0 0 30px}
.legal .post-list .blog-cover{aspect-ratio:1200/630;object-fit:cover;border-radius:0;margin:0}
.cookie-table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:.92rem}
.cookie-table caption{text-align:left;font-weight:700;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;margin-bottom:8px}
.cookie-table th,.cookie-table td{text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top;color:var(--slate)}
.cookie-table th{background:var(--blue-soft);color:var(--ink);font-weight:700;font-size:.82rem}
.cookie-table td code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;color:var(--ink)}
@media(max-width:560px){
  .cookie-table,.cookie-table tbody,.cookie-table tr,.cookie-table td{display:block;width:100%}
  .cookie-table thead{display:none}
  .cookie-table tr{margin-bottom:14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .cookie-table td{border:0;border-bottom:1px solid var(--line)}
  .cookie-table td:last-child{border-bottom:0}
  .cookie-table td::before{content:attr(data-label);display:block;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:3px}
}


/* ============ v22: cross-resolution & aspect-ratio scaling ============ */
/* The full-height, scroll-snapped layout and a few fixed-pixel infographics
   were tuned for ~1080p. Keep that baseline intact and add fluid behaviour for
   the resolutions and aspect ratios it didn't account for. */

/* 1) SLA donut: was a hard 240px. Both the ring and the centre text are driven
      by the single --donut size var (set on .donut-wrap, ≈240px around 1920px,
      capped at 280px) so the "90%" and label stay a fixed fraction of the ring
      at every resolution — including 4K, where the ring caps but the rem-based
      root font-size keeps growing, and phones, where the ring hits its floor. */
.donut-wrap svg{width:var(--donut);height:auto}

/* 2) Big infographic numbers scale around their 1080p size instead of snapping
      only at the mobile breakpoint. */
.hv-stat .big{font-size:clamp(2rem,2.1vw,2.9rem)}
.statline .sv{font-size:clamp(1.6rem,1.75vw,2.4rem)}

/* 3) Short & landscape viewports (small laptops, phones turned sideways):
      the viewport-height sections + scroll-snap crop content or force awkward
      half-scrolls when the screen is wide-and-short. Let the content flow. */
@media (min-width:901px) and (max-height:740px){
  html{scroll-snap-type:none}
  .fillvh{min-height:0}
  .page > section,
  .page > section:last-of-type{min-height:0}
  .page > section > .wrap{justify-content:center}
  section{padding:clamp(40px,7vh,74px) 0}
  .hero{padding:clamp(36px,6vh,80px) 0}
  .hero-visual{height:clamp(300px,52vh,430px)}
}
@media (orientation:landscape) and (max-height:600px){
  html{scroll-snap-type:none}
  .fillvh,
  .page > section,
  .page > section:last-of-type{min-height:0}
  section{padding:40px 0}
  .hero{padding:40px 0}
  .hero-visual{height:min(64vh,360px)}
}

/* 4) Ultra-wide (21:9+): the network hero art is the one piece that stretches
      oddly when the column gets very wide — cap it and centre it. width:100% is
      essential: it gives the box a definite width so the auto margins centre a
      real 680px panel. Without it, margin-inline:auto cancels the grid stretch
      and — because the panel's contents are all absolutely positioned — the item
      collapses to zero width and the whole infographic vanishes. */
@media (min-aspect-ratio:2/1) and (min-width:1600px){
  .hero-visual{width:100%;max-width:680px;margin-inline:auto}
}

/* ============ above-the-fold reveal: keep the LCP element paintable ============ */
/* The first section's copy — including the <h1>, the Largest Contentful Paint
   element — carries .reveal, whose base state is opacity:0 + filter:blur. A
   transparent/blurred element is NOT an eligible LCP candidate, so Lighthouse
   recorded NO_LCP (which zeroes the Performance score). Fix: above the fold the
   reveal items stay fully opaque and un-blurred from first paint and animate only
   a composited transform (no layout, no CLS, no repaint), so the heading paints
   immediately and LCP fires at FCP. The IntersectionObserver still adds .in
   afterwards — same visible end-state, no conflict. Scoped to the first section
   of every page because each page's main heading sits there. */
@keyframes heroRise{from{transform:translateY(16px)}to{transform:none}}
.page > section:first-child .reveal{opacity:1;filter:none;animation:heroRise .55s var(--ease-out) both}
.page > section:first-child .reveal.d1{animation-delay:.05s}
.page > section:first-child .reveal.d2{animation-delay:.1s}
.page > section:first-child .reveal.d3{animation-delay:.15s}
.page > section:first-child .reveal.d4{animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.page > section:first-child .reveal{animation:none;transform:none}}


/* ============ page-intro consistency across pages ============ */
/* Uniform intro heading size on every non-home page (home keeps its larger hero).
   services/cases use .sec-head h1; about + contact are matched to it here. */
.about h1{font-size:clamp(2.1rem,3.8vw,3rem)}
/* Anchor each non-home first section's content to the top, so the eyebrow and
   heading begin at the same vertical position on every page — pages line up and
   flow smoothly into each other instead of the intro floating at varying heights. */
.page > section:first-child{justify-content:flex-start}
.page > section:first-child > .wrap{flex:initial;justify-content:flex-start;padding-top:clamp(12px,2.5vh,32px)}

/* Centre the heading/intro content on every inner page (home keeps its left
   hero). All .sec-head blocks centre; contact's intro is centred. The about
   bio is the exception — it stays LEFT-aligned with its testimonial card
   beside it (see below). Card/value text stays as-is. */
.page:not(#page-home) .sec-head{text-align:center;margin-left:auto;margin-right:auto}
/* About intro: left-aligned bio, testimonial card alongside it on wide screens.
   At ≤980px the grid collapses (see breakpoint above) and the card drops below
   the text — there it's centred with a sensible max-width. */
#page-about > section:first-child .about-grid{text-align:left}
#page-about > section:first-child .vals{width:auto;margin-left:0;margin-right:0}
@media(max-width:980px){
  #page-about > section:first-child .about-card{max-width:560px;margin-left:auto;margin-right:auto}
}


/* ============ SLA donut: stroke colours in CSS (not SVG attrs) ============ */
/* WebKit/iOS Safari does NOT resolve var() inside SVG presentation attributes
   (stroke="var(--blue)"), so the donut rendered invisible on iOS. Blink does,
   which is why it only broke on iPhone. Setting the strokes in CSS — where var()
   is resolved everywhere — fixes the colour and lets the fill animation show. */
.donut-track{stroke:var(--blue-soft)}
#donut{stroke:var(--blue)}
/* Draw the donut with a CSS keyframe (added via .draw when it scrolls into view).
   The previous JS inline-style stroke-dashoffset transition silently failed on
   WebKit/iOS — the arc never drew — whereas CSS keyframes animate reliably there. */
/* Resting value 65.3 (= 90% drawn) is set on .draw itself, not just left to the
   animation's `forwards` fill: if the keyframe is ever skipped or throttled by the
   browser/OS (animation-disabling policies, aggressive power saving), the arc still
   shows its final value instead of staying invisible. The animation overrides this
   while it runs, so the draw still animates normally everywhere it can. */
#donut.draw{stroke-dashoffset:65.3px;animation:donutdraw 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes donutdraw{from{stroke-dashoffset:653}to{stroke-dashoffset:65.3}}

/* ============ mobile header CTA ============ */
/* "Request free assessment" is too long for a phone header next to the logo, so
   it wrapped and crowded the wordmark. Use a shorter label and a compact size on
   small screens. */
.nav-cta .cta-sm{display:none}
@media(max-width:640px){
  .nav-cta .btn-primary{padding:.52em .95em;font-size:.85rem;white-space:nowrap}
  .nav-cta .btn-primary .cta-lg{display:none}
  .nav-cta .btn-primary .cta-sm{display:inline}
}


/* ============ mobile scroll & animation smoothness ============ */
/* On phones two things were taxing the compositor on every scroll frame:
   (1) the per-frame backdrop-filter blur on the pinned header / journey-bar,
       which the browser must re-sample and re-blur as the page moves, and
   (2) the animated filter:blur on every .reveal, which fires exactly while you
       scroll. Both are dropped on small screens in favour of cheap, fully
       GPU-composited transform + opacity. The look is preserved; the work isn't.
   (This mirrors the existing decision to keep backdrop-filter off the fixed
   .tabbar — see the note around the .mprogress rules.) */
@media(max-width:900px){
  /* 1) Pinned bars: solid fill instead of a live backdrop blur */
  header{background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  header.scrolled{background:#fff}
  .journey-bar{background:rgba(255,255,255,.98);-webkit-backdrop-filter:none;backdrop-filter:none}

  /* 2) Reveal: keep the fade + gentle rise, drop the expensive blur filter */
  .reveal{filter:none;transform:translateY(16px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
  .reveal.in{filter:none;transform:none}
  .statline.reveal{transform:translateX(-26px)}
  .statline.reveal.in{transform:none}

  /* 3) Hint the compositor to promote revealing elements to their own layer so
        the scroll thread doesn't repaint them, then release it once settled. */
  .reveal{will-change:transform,opacity}
  .reveal.in{will-change:auto}
}


/* ============ no-JS fallback ============
   Reveal content starts hidden and only script.js makes it visible. A one-line
   <head> script adds html.js; without it (JS blocked, failed, or a non-JS crawler)
   show everything instead of leaving the page blank. */
html:not(.js) .reveal{opacity:1;transform:none;filter:none}