:root{
    color-scheme: light;
    --width-content: min(clamp(1040px, 80vw, 1420px), calc(100% - 2.5rem));

    --neutral-100:#f3f3f6;
    --neutral-200:#e7e8f0;
    --neutral-300:#a1a6c2;
    --neutral-400:#6b7094;
    --neutral-500:#464b6e;
    --neutral-600:#121533;

    --navy:#272f6d;
    --accent-400:#ff5c02;
    --accent-600:#d94c00;

    --font-primary:"Albert Sans", system-ui, "Segoe UI", sans-serif;
    --font-secondary:"Bricolage Grotesque", "Albert Sans", system-ui, sans-serif;

    --border-style:1px dashed var(--neutral-300);
    --border-radius:2px;
    --header-height:3.125rem;

    font-family:var(--font-primary);
    font-size:15px;
    font-weight:400;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  *{scroll-margin-top:100px}
  html,body{margin:0;padding:0}
  body{background:var(--neutral-100);color:var(--neutral-600);line-height:134%;overflow-x:hidden}
  p{margin:0}
  h1,h2,h3{margin:0}
  a{color:inherit}
  button{appearance:none;-webkit-appearance:none;border:0;font:inherit;cursor:pointer}
  .inner{width:var(--width-content);margin-inline:auto}
  h2{font-family:var(--font-secondary);font-size:1.8rem;font-weight:400;line-height:1.2;letter-spacing:0;text-transform:uppercase}
  .block{margin-block:100px}
  @media (max-width:1024px){.block{margin-block:50px}}
  .logo-svg{display:block;fill:currentColor}

  /* ---------- BUTTON (title + sliding double arrow) ---------- */
  .cb-button{display:inline-flex;align-items:stretch;gap:.25rem;width:100%;text-decoration:none;color:var(--neutral-100);border:none;cursor:pointer;font-family:var(--font-primary);transition:color .3s ease;background:none;padding:0}
  .cb-button:hover{color:var(--neutral-300)}
  .cb-button__title{flex:1;display:flex;align-items:center;padding:1.5rem 2rem;font-size:.8rem;font-weight:400;text-transform:uppercase;line-height:1.34;background-color:var(--neutral-600)}
  .cb-button__arrow{position:relative;width:3.9375rem;overflow:hidden;align-self:stretch;flex-shrink:0;background-color:var(--neutral-600)}
  .cb-button__arrow::before,.cb-button__arrow::after{content:"→";position:absolute;top:50%;transform:translateY(-50%) translateX(0);transition:transform .3s ease}
  .cb-button__arrow::before{left:25.5px}
  .cb-button__arrow::after{left:-16px;color:var(--accent-400)}
  .cb-button:hover .cb-button__arrow::before,.cb-button:focus-visible .cb-button__arrow::before,
  .cb-button:hover .cb-button__arrow::after,.cb-button:focus-visible .cb-button__arrow::after{transform:translateY(-50%) translateX(41.5px)}

  /* ---------- HEADER ---------- */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:100;background-color:transparent;border-bottom:.5px dashed var(--neutral-400);transition:background-color .3s ease,border-bottom-color .3s ease}
  .site-header__nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem;min-height:var(--header-height)}
  .site-header__logo,.site-header.is-scrolled .site-header__logo,.site-header .site-header__logo{color:var(--accent-400);text-decoration:none;line-height:0;transition:color .3s ease}
  .site-header__logo .logo-svg{height:1.15rem;width:auto}
  .site-header__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
  .site-header__menu a{display:flex;align-items:center;justify-content:center;padding:.1875rem .625rem .25rem;border-radius:1.3125rem;font-family:var(--font-primary);font-size:.8rem;line-height:1.34;text-transform:uppercase;color:var(--neutral-100);text-decoration:none;white-space:nowrap;border:.5px dashed transparent;transition:color .15s ease,border-color .15s ease,background-color .15s ease}
  .site-header__menu a:hover{color:var(--neutral-100);border-color:var(--neutral-400)}
  .site-header__menu .current a{background-color:var(--neutral-200);color:var(--neutral-600)}
  .site-header.is-scrolled{background-color:var(--neutral-100);border-bottom-color:var(--neutral-300)}
  .site-header.is-scrolled .site-header__menu a{color:var(--neutral-600)}
  .site-header.is-scrolled .site-header__menu a:hover{color:var(--accent-600);border-color:var(--accent-400)}
  .site-header__burger{display:none;flex-direction:column;justify-content:center;gap:.3125rem;width:2rem;height:2rem;background:none;padding:0}
  .site-header__burger span{display:block;width:1.25rem;height:1px;background-color:var(--neutral-100);transition:transform .2s ease,opacity .2s ease,background-color .3s ease;transform-origin:center}
  .site-header.is-scrolled .site-header__burger span{background-color:var(--neutral-600)}
  .site-header.is-open .site-header__burger span:nth-child(1){transform:translateY(.375rem) rotate(45deg)}
  .site-header.is-open .site-header__burger span:nth-child(2){opacity:0;transform:scaleX(0)}
  .site-header.is-open .site-header__burger span:nth-child(3){transform:translateY(-.375rem) rotate(-45deg)}
  @media (max-width:1024px){
    .site-header__nav{flex-wrap:wrap}
    .site-header__burger{display:flex}
    .site-header__menu-wrap{order:3;width:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
    .site-header__menu-wrap > div{overflow:hidden}
    .site-header.is-open .site-header__menu-wrap{grid-template-rows:1fr}
    .site-header__menu{flex-direction:column;align-items:stretch;gap:1.875rem;padding-block:2.5rem 1.5rem}
    .site-header__menu a{justify-content:flex-start;border-radius:.75rem;padding:.5rem .625rem;font-size:1.3125rem}
  }
  @media (max-width:767px){
    .site-header{background-color:var(--neutral-100)}
    .site-header .site-header__burger span{background-color:var(--neutral-600)}
    .site-header .site-header__menu a{color:var(--neutral-600)}
    .site-header .site-header__menu .current a{background:transparent}
  }

  /* ---------- HERO ---------- */
  /* Intro: the flat mark is drawn as a vector ("visual concepts"), then turns into the lit tile in the hand ("tangible.").
     The stage keeps the photo's aspect ratio, so the vector layers sit exactly on the printed logo. */
  @property --reveal{syntax:'<percentage>';inherits:false;initial-value:0%}
  @property --mark{syntax:'<color>';inherits:true;initial-value:#ff5c02}
  /* Colours are sampled from the hand photo (edge #000417, printed logo #fe6c01, tile #fee8c4),
     so the flat state and the photo meet without a colour jump. The intro loops: draw → tangible → back to vector → erase. */
  .hero{--hero-flat:#0a1a3c;--hero-dark:#000417;position:relative;overflow:hidden;height:100vh;height:100dvh;display:flex;align-items:center;background:var(--hero-flat);transition:background-color 1.2s cubic-bezier(.3,.6,.2,1) .05s}
  .hero.is-tangible{background:var(--hero-dark)}
  .hero.is-tangible.is-returning{background:var(--hero-flat);transition:background-color 1.35s cubic-bezier(.6,0,.3,1) .3s}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,4,23,.7) 0%, rgba(0,4,23,.35) 40%, rgba(0,4,23,0) 65%);z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
  .hero.is-tangible::after{opacity:1}
  .hero.is-tangible.is-returning::after{opacity:0}
  .hero__scene{position:absolute;inset:0;z-index:0}
  .hero__stage{position:absolute;top:50%;right:0;height:104%;aspect-ratio:1700/2079;
      transform:translate3d(calc(var(--px,0) * -14px), calc(-50% + var(--py,0) * -10px), 0);
      -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%);mask-image:linear-gradient(90deg, transparent 0%, #000 24%)}
  /* the photo's own blue halo, present in the flat state too, so the reveal grows out of it */
  .hero__ambient{position:absolute;inset:0;background:radial-gradient(circle at 37.9% 43.2%, rgba(0,65,142,.5) 0%, rgba(0,34,98,.3) 22%, rgba(0,20,60,0) 48%)}
  /* the hand lights up together with the tile: fade + brighten from the logo outward */
  .hero__photo{position:absolute;inset:0;background:url(/assets/deck/hero-hand.jpg) center/100% 100% no-repeat;opacity:0;transform-origin:37.9% 43.2%;
      -webkit-mask-image:radial-gradient(circle at 37.9% 43.2%, #000 var(--reveal), transparent calc(var(--reveal) + 30%));
      mask-image:radial-gradient(circle at 37.9% 43.2%, #000 var(--reveal), transparent calc(var(--reveal) + 30%))}
  .hero.is-tangible .hero__photo{animation:hero-photo-in 1.5s cubic-bezier(.3,.6,.2,1) .08s both, hero-pulse 3s ease-in-out 2.4s infinite}
  .hero.is-tangible.is-returning .hero__photo{animation:hero-photo-out 1.1s cubic-bezier(.6,0,.3,1) .25s both}
  @keyframes hero-photo-in{0%{opacity:0;--reveal:22%;transform:scale(1.04);filter:brightness(.35) saturate(1)}35%{opacity:1;filter:brightness(1.3) saturate(1.12)}100%{opacity:1;--reveal:150%;transform:scale(1);filter:brightness(1) saturate(1)}}
  @keyframes hero-photo-out{from{opacity:1;--reveal:150%}to{opacity:1;--reveal:-30%}}
  @keyframes hero-pulse{0%,100%{filter:brightness(1) saturate(1);transform:scale(1)}50%{filter:brightness(1.12) saturate(1.12);transform:scale(1.022)}}

  /* lit tile: the vector dissolves while it is fully lit, and the printed logo emerges as it fades (no double image) */
  .hero__tile{position:absolute;left:19.06%;top:27.03%;width:35.76%;height:31.5%;border-radius:15%;opacity:0;transform:scale(.6);
      background:radial-gradient(circle at 50% 45%, #fdf1d9 0%, #fee8c4 60%, #fedcb2 100%);
      box-shadow:0 0 40px 12px rgba(254,214,160,.8), 0 0 140px 50px rgba(254,108,1,.3), 0 0 260px 120px rgba(0,65,142,.35)}
  .hero.is-tangible .hero__tile{animation:hero-tile 1.5s cubic-bezier(.2,.8,.2,1) forwards}
  .hero.is-tangible.is-returning .hero__tile{animation:hero-tile-back 1.9s cubic-bezier(.4,0,.2,1) both}
  @keyframes hero-tile{0%{opacity:0;transform:scale(.6)}22%{opacity:1;transform:scale(1.03)}50%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
  @keyframes hero-tile-back{0%{opacity:0;transform:scale(1)}18%,74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
  .hero__flash{position:absolute;left:37.9%;top:43.2%;width:90%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.1);opacity:0;mix-blend-mode:screen;pointer-events:none;
      background:radial-gradient(circle, rgba(254,241,217,.95) 0%, rgba(254,140,60,.42) 30%, rgba(0,65,142,.22) 52%, transparent 70%)}
  .hero.is-tangible .hero__flash{animation:hero-flash 1.1s cubic-bezier(.15,.7,.2,1) forwards}
  @keyframes hero-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}

  /* the vector mark with its design-tool frame */
  .hero__vector{position:absolute;left:37.94%;top:43.17%;width:26.94%;height:22.08%;transform:translate(-50%,-50%) scale(1.16);pointer-events:none}
  .hero.is-tangible .hero__vector{animation:hero-settle .8s cubic-bezier(.3,.75,.15,1) forwards}
  .hero.is-tangible.is-returning .hero__vector{animation:hero-unsettle .95s cubic-bezier(.5,0,.2,1) 1.05s both}
  @keyframes hero-settle{0%{transform:translate(-50%,-50%) scale(1.16)}35%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1)}}
  @keyframes hero-unsettle{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.16)}}
  .hero__vector-inner{position:absolute;inset:0;transform:scaleY(.94)}
  .hero.is-tangible .hero__vector-inner{transition:transform .6s cubic-bezier(.3,.75,.15,1) .1s;transform:scaleY(1)}
  .hero.is-tangible.is-returning .hero__vector-inner{transition:transform .95s cubic-bezier(.5,0,.2,1) 1.05s;transform:scaleY(.94)}
  .hero__mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .hero__mark polygon{fill:var(--mark);fill-opacity:0;stroke:#ff8a3d;stroke-width:.55;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:round}
  .hero.is-playing .hero__mark polygon{animation:mark-draw 1.25s cubic-bezier(.65,0,.35,1) .35s forwards, mark-fill .55s ease 1.45s forwards}
  .hero.is-playing .hero__mark polygon + polygon{animation-delay:.95s, 1.6s;animation-duration:.6s, .55s}
  .hero.is-playing.is-returning .hero__mark polygon,.hero.is-playing.is-returning .hero__mark polygon + polygon{animation:mark-erase .8s cubic-bezier(.65,0,.35,1) 1.7s both}
  @keyframes mark-draw{to{stroke-dashoffset:0}}
  @keyframes mark-fill{to{fill-opacity:1;stroke-opacity:0}}
  @keyframes mark-erase{0%{fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}35%{fill-opacity:0;stroke-opacity:1;stroke-dashoffset:0}100%{fill-opacity:0;stroke-opacity:1;stroke-dashoffset:-1}}
  .hero.is-tangible .hero__mark{animation:mark-become 1.9s ease forwards}
  .hero.is-tangible.is-returning .hero__mark{animation:mark-return 2.5s ease forwards}
  @keyframes mark-become{0%{--mark:#ff5c02;filter:drop-shadow(0 0 0 rgba(254,108,1,0));opacity:1}14%{filter:drop-shadow(0 0 22px rgba(254,108,1,.9));opacity:1}20%{opacity:1;--mark:#fe6c01}32%,100%{opacity:0;--mark:#fe6c01;filter:drop-shadow(0 0 22px rgba(254,108,1,.9))}}
  @keyframes mark-return{0%,10%{opacity:0;--mark:#fe6c01;filter:drop-shadow(0 0 18px rgba(254,108,1,.8))}22%{opacity:1;--mark:#fe6c01}60%{--mark:#ff5c02;filter:drop-shadow(0 0 0 rgba(254,108,1,0))}100%{opacity:1;--mark:#ff5c02;filter:none}}
  .hero__frame{position:absolute;inset:-7%;border:1px solid rgba(161,166,194,.6);opacity:0}
  .hero__frame i{position:absolute;width:7px;height:7px;background:#0a1a3c;border:1px solid #ff8a3d;transform:translate(-50%,-50%)}
  .hero__frame i:nth-child(1){left:0;top:0}.hero__frame i:nth-child(2){left:50%;top:0}.hero__frame i:nth-child(3){left:100%;top:0}
  .hero__frame i:nth-child(4){left:100%;top:50%}.hero__frame i:nth-child(5){left:100%;top:100%}.hero__frame i:nth-child(6){left:50%;top:100%}
  .hero__frame i:nth-child(7){left:0;top:100%}.hero__frame i:nth-child(8){left:0;top:50%}
  .hero__frame span{position:absolute;left:-1px;bottom:calc(100% + 10px);font-family:var(--font-primary);font-size:.68rem;letter-spacing:.04em;color:var(--neutral-300);white-space:nowrap}
  .hero__frame span b{color:#ff8a3d;font-weight:400}
  .hero__guide{position:absolute;background:rgba(255,138,61,.35)}
  .hero__guide--h{left:-40%;right:-40%;top:50%;height:1px;transform:scaleX(0)}
  .hero__guide--v{top:-30%;bottom:-30%;left:50%;width:1px;transform:scaleY(0)}
  .hero.is-playing .hero__frame{animation:frame-in .6s cubic-bezier(.2,.8,.2,1) .15s forwards}
  .hero.is-playing .hero__guide{animation:guide-in 1.1s cubic-bezier(.65,0,.35,1) .2s forwards}
  .hero.is-tangible .hero__frame{animation:frame-out .35s ease forwards}
  .hero.is-tangible .hero__guide{animation:frame-out .3s ease forwards}
  @keyframes frame-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
  @keyframes guide-in{0%{opacity:1;transform:none}60%{opacity:1}100%{opacity:0;transform:none}}
  @keyframes frame-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}

  /* headline, set like the deck (bold, sentence case): white words rise, orange words arrive letter by letter;
     "tangible." arrives with the object and leaves when it returns to vector */
  .hero__content{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.75rem;padding-block:6rem;padding-inline:10rem;color:var(--neutral-100);font-family:var(--font-secondary);width:100%}
  .hero__eyebrow{font-family:var(--font-primary);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-400);opacity:0;transform:translateY(1rem)}
  .hero.is-playing .hero__eyebrow{animation:hero-reveal .7s ease .1s forwards}
  .hero__heading{color:var(--neutral-100);font-family:var(--font-secondary);font-size:clamp(2.75rem, 4.6vw, 4.6rem);font-weight:700;font-stretch:90%;line-height:1.02;letter-spacing:-.025em;text-transform:none}
  .hero__heading .hl{color:var(--accent-400)}
  .hw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .2em;margin:0 -.05em -.2em}
  .hw > span{display:inline-block;transform:translateY(115%)}
  .hw.hl > span{transform:none}
  .hw .ch{display:inline-block;transform:translateY(115%) rotate(6deg);transform-origin:0 100%}
  .hero.is-playing .hw:not(.hl) > span{animation:word-up .9s cubic-bezier(.2,.75,.1,1) forwards;animation-delay:var(--d,0s)}
  .hero.is-playing .hw.hl:not(.hw--t) .ch{animation:word-up .8s cubic-bezier(.2,.75,.1,1) forwards;animation-delay:calc(var(--d,0s) + var(--i) * 40ms)}
  .hero.is-tangible .hw--t .ch{animation:word-up .8s cubic-bezier(.2,.75,.1,1) forwards, char-flare 1.4s ease;animation-delay:calc(.05s + var(--i) * 45ms)}
  .hero.is-returning .hw--t .ch{animation:word-out .5s cubic-bezier(.6,0,.4,1) both;animation-delay:calc(.1s + var(--i) * 25ms)}
  .hero.is-done .hw{overflow:visible}
  @keyframes word-up{to{transform:none}}
  @keyframes word-out{from{transform:none}to{transform:translateY(-115%) rotate(-4deg)}}
  @keyframes char-flare{0%,20%{text-shadow:0 0 26px rgba(254,108,1,1), 0 0 8px rgba(255,214,170,.9)}100%{text-shadow:0 0 0 rgba(254,108,1,0)}}
  .hero__content .cb-button{opacity:0;transform:translateY(1.5rem);margin-block-start:.5rem;width:fit-content;color:var(--neutral-600)}
  .hero.is-tangible .hero__content .cb-button{animation:hero-reveal .7s ease .9s forwards}
  /* from the second cycle on, only the mark and "tangible." replay */
  .hero.is-looped .hw:not(.hl) > span,.hero.is-looped .hw.hl:not(.hw--t) .ch,.hero.is-looped .hero__eyebrow,.hero.is-looped .hero__content .cb-button{animation:none;opacity:1;transform:none}
  .hero__content .cb-button__title,.hero__content .cb-button__arrow{background-color:var(--neutral-100)}
  .hero__content .cb-button:hover .cb-button__title,.hero__content .cb-button:hover .cb-button__arrow{color:var(--neutral-400)}
  @keyframes hero-reveal{to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion:reduce){
    .hero,.hero::after{transition:none}
    .hero *{animation:none !important;transition:none !important}
    .hero__photo{opacity:1;--reveal:150%}
    .hero__tile,.hero__flash,.hero__vector{display:none}
    .hw > span,.hw .ch,.hero__eyebrow,.hero__content .cb-button{opacity:1;transform:none}
    .hero__stage{transform:translateY(-50%)}
  }
  .hero__ticker{position:absolute;bottom:0;left:0;right:0;z-index:2;overflow:hidden;border-top:1px dashed rgba(161,166,194,.6);padding-block:1rem}
  .hero__ticker-track{display:flex;gap:1.5rem;align-items:center;width:max-content;animation:hero-ticker var(--ticker-duration,120s) linear infinite}
  .hero__ticker span{font-family:var(--font-primary);font-size:1rem;text-transform:uppercase;color:var(--neutral-100);white-space:nowrap;flex-shrink:0}
  .hero__ticker span.sep{color:var(--accent-400)}
  @keyframes hero-ticker{to{transform:translateX(-50%)}}
  @media (max-width:1280px){.hero__content{padding-inline:6rem}}
  @media (max-width:1024px){
    .hero{align-items:flex-end}
    .hero::after{background:linear-gradient(180deg, rgba(0,4,23,0) 35%, rgba(0,4,23,.7) 70%)}
    .hero__stage{top:-1%;right:auto;left:50%;height:56%;transform:translateX(-37.9%);
        -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 44%, #000 58%, transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 44%, #000 58%, transparent 100%)}
    .hero__content{padding-inline:1.25rem;padding-block:0 5.5rem;gap:1.25rem}
    .hero__heading{font-size:clamp(2.4rem, 10.5vw, 3.6rem)}
    .hero__frame span{display:none}
  }
  @media (max-width:1024px) and (prefers-reduced-motion:reduce){.hero__stage{transform:translateX(-37.9%)}}

  /* ---------- STATEMENT + KPI ---------- */
  .statement{display:flex;flex-flow:column;gap:6.12rem}
  .separator{display:flex;align-items:center;width:100%}
  .separator > hr{flex-basis:100%;border:none;border-top:var(--border-style);margin:0}
  .separator svg{flex-shrink:0}
  .statement header{--mi:7rem;font-size:1.315rem;line-height:calc(124% + 1.5rem);text-transform:uppercase;width:calc(100% - var(--mi) * 2);margin-inline-start:var(--mi)}
  .statement header strong{font-weight:400;padding:.5rem 1rem;white-space:nowrap;border-radius:3.75rem;border:.8px solid var(--neutral-600);background-color:var(--neutral-100);cursor:default;transition:color .3s ease,background-color .3s ease,border-color .3s ease}
  .statement header strong:hover{background-color:var(--navy);border-color:var(--navy);color:var(--neutral-100)}
  .statement header strong.hot{border-color:var(--accent-400);color:var(--accent-600)}
  .statement header strong.hot:hover{background-color:var(--accent-400);color:#fff}
  .statement__quote{--mi:7rem;margin-inline-start:var(--mi);font-size:.8rem;text-transform:uppercase;color:var(--neutral-400);margin-top:-3.5rem}
  @media (max-width:767px){.statement header,.statement__quote{--mi:0;width:100%}}
  .kpi{position:relative;padding:.75rem}
  .kpi__grid{display:grid;grid-template-columns:repeat(4,25%)}
  .kpi__card{position:relative;display:flex;flex-flow:column;justify-content:center;align-items:center;padding-block:3.38rem;border:var(--border-style);border-left:unset;background-color:transparent;transition:background-color .3s ease}
  .kpi__card:first-child{border-left:var(--border-style)}
  .kpi__card > svg{position:absolute}
  .kpi__card > svg.t{top:-12px}.kpi__card > svg.b{bottom:-12px}.kpi__card > svg.l{left:-12px}.kpi__card > svg.r{right:-12px}
  .kpi__card:not(:first-child) > svg.l{display:none}
  .kpi__card:hover{background-color:var(--neutral-200)}
  .kpi__content{width:56%}
  .kpi__name{font-family:var(--font-secondary);font-size:2.467rem;font-weight:400;line-height:136%;letter-spacing:0;text-transform:uppercase;display:inline-block;transform-origin:left center;transition:transform .3s ease,color .3s ease;color:var(--navy)}
  .kpi__label{font-size:.8rem;line-height:120%;text-transform:uppercase;transition:transform .3s ease}
  .kpi__card:hover .kpi__name{transform:scale(1.2);color:var(--accent-400)}
  .kpi__card:hover .kpi__label{transform:translateY(6px)}
  @media (max-width:767px){
    .kpi__grid{grid-template-columns:1fr}
    .kpi__card{border-left:var(--border-style);border-top:unset}
    .kpi__card:first-child{border-top:var(--border-style)}
    .kpi__card > svg.l{display:block!important}
    .kpi__card:not(:first-child) > svg.t{display:none}
  }

  /* ---------- TEXT ANIMATION (sticky fill + orbit) ---------- */
  .ta{display:grid;grid-template-columns:1fr 1fr;gap:7.2rem}
  .ta__content{min-height:150vh}
  .ta__sticky{position:sticky;top:8rem;overflow:hidden}
  .ta__subline{font-size:.8rem;line-height:1.34;text-transform:uppercase;margin-bottom:.5rem;color:var(--accent-600)}
  .ta__heading{--fill:0%;letter-spacing:.3px;text-transform:uppercase;font-size:2.467rem;width:20ch;
      background-image:linear-gradient(to right, var(--navy) var(--fill), var(--neutral-300) var(--fill));
      -webkit-background-clip:text;background-clip:text;color:transparent}
  .ta__reveal{margin-block-start:6.5rem}
  .ta__item + .ta__item{margin-block-start:1.5rem}
  .ta__item{will-change:transform}
  .ta__text{line-height:1.34;color:var(--neutral-500)}
  .ta__hl{font-weight:600;color:var(--navy)}
  .ta .ta__btn{margin-top:3.5rem;width:fit-content;display:inline-flex;text-decoration:none;will-change:transform}
  .ta__btn span{background-color:transparent;color:var(--neutral-600);border:var(--border-style);border-radius:21px;padding:.5rem 3.5rem .5rem 1rem;text-transform:capitalize;font-weight:600;transition:background-color .2s ease;font-size:1rem;position:relative}
  .ta__btn span:hover{background-color:var(--neutral-200);border-style:solid}
  .ta__btn span::after{content:"";position:absolute;top:50%;right:0;margin-right:1.5rem;width:14px;height:8px;transform:translateY(-50%);
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M9.65275 0C9.65275 2.16005 11.5985 3.91111 13.9988 3.91111M9.65275 8C9.65275 5.83995 11.5985 4.08889 13.9988 4.08889M14 4H0' stroke='%23121533'/%3E%3C/svg%3E") no-repeat center}
  .ta__visual{position:sticky;top:10rem;width:100%;height:500px;overflow:hidden}
  .ta__visual svg{position:absolute;inset:0;width:100%;height:100%}
  .ta__stages{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:1.5rem;font-size:.8rem;text-transform:uppercase;color:var(--neutral-400)}
  .ta__stages b{font-weight:400;color:var(--accent-600)}
  @media (max-width:1024px){
    .ta{display:block}
    .ta__content{min-height:0}
    .ta__sticky{position:static;overflow:visible}
    .ta__heading{width:15ch}
    .ta__reveal{margin-block-start:3.5rem}
    .ta__visual{position:relative;top:0;margin-top:2.5rem;height:280px}
    .ta__stages{gap:.9rem;font-size:.7rem;bottom:.25rem}
    .ta__stages span{white-space:nowrap}
  }

  /* ---------- BUSINESS AREAS (stacking cards) ---------- */
  .ba__sticky{position:sticky;top:var(--header-height);height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));overflow:hidden}
  .ba__grid{position:relative;height:100%}
  .ba__card{position:absolute;inset:0;transform:translateY(100%);will-change:transform;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:3rem 1.5rem 5rem;border-top:var(--border-style);background-color:var(--card-bg,transparent)}
  .ba__card:first-child{transform:translateY(0)}
  .ba__left{display:flex;gap:1.75rem;align-items:stretch}
  .ba__number,.ba__title{font-size:1.3125rem;line-height:1.24;text-transform:uppercase;color:var(--card-color)}
  .ba__number{min-width:7.125rem;flex-shrink:0}
  .ba__title{font-weight:400;margin:0}
  .ba__kicker{display:block;font-size:.8rem;color:var(--card-accent,var(--accent-600));margin-top:.5rem}
  .ba__info{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
  .ba__header{display:flex;flex-direction:column;gap:2rem}
  .ba__labels{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;padding:0;margin:0}
  .ba__label{font-size:.8rem;line-height:1.34;text-transform:uppercase;color:var(--card-color);border:1px solid var(--card-color);border-radius:1.3125rem;padding:.1875rem .625rem;transition:background-color .15s ease,color .15s ease;cursor:default}
  .ba__label:hover{background-color:var(--card-color);color:var(--card-color-inverse)}
  .ba__body{display:flex;flex-direction:column;gap:3.5rem}
  .ba__excerpt{font-size:1rem;line-height:1.34;color:var(--card-color);margin:0;max-width:46ch}
  .ba__body .cb-button{align-self:flex-start;width:auto}
  .ba__body .cb-button__title{flex:none}
  .ba__card.on-dark .cb-button__title,.ba__card.on-dark .cb-button__arrow{background-color:var(--neutral-100)}
  .ba__card.on-dark .cb-button{color:var(--neutral-600)}
  .ba__card.on-dark .cb-button:hover{color:var(--neutral-400)}
  .ba__right{display:flex;align-items:center;justify-content:center;min-height:0;container-type:size}
  .ba__image{width:min(100%, calc(100cqh * var(--ar, 1.33)));aspect-ratio:var(--ar, 1.33);border:var(--border-style);padding:.5rem;position:relative;isolation:isolate;overflow:hidden;background:var(--card-bg,transparent)}
  .ba__image::after{content:"";position:absolute;inset:.5rem;z-index:1;border-radius:.125rem;background:var(--img, var(--art)) center/cover no-repeat}
  .post__thumb::after{content:"";position:absolute;inset:0;z-index:1;background:var(--img, var(--art)) var(--pos, center)/contain no-repeat}
  @media (max-width:1024px){.ba__left{flex-direction:column;gap:1rem}.ba__number{min-width:unset}.ba__excerpt{margin-block-start:2rem}}
  @media (max-width:767px){
    :root{--header-height:3.5rem}
    .ba__card{display:flex;flex-direction:column;gap:1.25rem;overflow:hidden;padding:2rem 1.25rem 2.5rem}
    .ba__left{flex-shrink:0}
    .ba__header{gap:.75rem}
    .ba__body{gap:.75rem}
    .ba__excerpt{margin-block-start:.75rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
    .ba__right{flex:1;min-height:0}
  }
  .ba__note{width:var(--width-content);margin:1.5rem auto 0;font-size:.8rem;color:var(--neutral-400);text-transform:uppercase}

  /* ---------- LOGO GALLERY ---------- */
  .logos{display:flex;flex-flow:column;align-items:center;max-width:65rem;margin-inline:auto;padding-inline:1.25rem}
  .logos__header{display:flex;flex-flow:column;align-items:center;gap:3rem;width:100%}
  .logos__heading{font-size:1.73rem;text-align:center}
  .logos__grid{display:flex;flex-wrap:wrap;justify-content:center}
  .logos__item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:9rem;height:8rem;padding:1rem;text-decoration:none;gap:.35rem}
  .logos__mark{display:grid;place-items:center;min-height:2.6rem;filter:grayscale(100%);transition:transform .3s ease,color .3s ease;font-family:var(--font-secondary);font-size:1.15rem;font-weight:500;letter-spacing:-.01em;color:var(--neutral-500);text-align:center;line-height:1.05}
  .logos__sector{font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-300);transition:color .3s ease}
  .logos__mark.has-logo{width:var(--lw,6.5rem);height:var(--lh,2.4rem);min-height:0;background-color:var(--neutral-500);font-size:0;color:transparent;
      -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:transform .3s ease,background-color .3s ease}
  .logos__item:hover .logos__mark{transform:scale(1.2);color:var(--navy)}
  .logos__item:hover .logos__mark.has-logo{background-color:var(--navy)}
  .logos__item:hover .logos__sector{color:var(--accent-600)}

  /* ---------- ESG AUDIT (newsletter block) ---------- */
  .esg{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;background-color:var(--neutral-200);padding-block:7rem;padding-inline:15rem}
  .esg__content{display:flex;flex-flow:column;gap:1rem}
  .esg__subline{font-size:1rem;line-height:1.34;text-transform:uppercase;color:var(--accent-600);margin-block-end:.75rem}
  .esg__text{font-size:1rem;line-height:1.34;color:var(--neutral-500)}
  .esg__steps{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.75rem;font-size:.8rem;text-transform:uppercase;color:var(--neutral-400)}
  .esg__steps b{font-weight:400;color:var(--navy)}
  .nl-form{display:flex;flex-direction:column;gap:1rem}
  .nl-form input[type=text],.nl-form input[type=email]{width:100%;padding:1.5rem 2rem;border:.5px dashed var(--neutral-400);text-transform:uppercase;outline:none;background:transparent;font:inherit;color:var(--neutral-600);transition:border-color .15s ease}
  .nl-form input[type=text]:focus,.nl-form input[type=email]:focus{border-style:solid;border-color:var(--navy)}
  .nl-form input::placeholder{text-transform:uppercase;color:var(--neutral-400)}
  .nl-form__row{display:flex;gap:.5rem;align-items:stretch}
  .nl-form__row input{flex:1 1 auto;min-width:0}
  .nl-form__submit{flex:0 0 auto;width:4rem;background:var(--navy);color:var(--neutral-100);font-size:1rem;transition:background-color .2s ease}
  .nl-form__submit:hover{background:var(--accent-400)}
  .nl-form label{display:flex;gap:.5rem;align-items:flex-start;color:var(--neutral-400);font-size:1rem;line-height:1.34}
  .nl-form input[type=checkbox]{margin-top:3px;width:1rem;height:1rem;accent-color:var(--navy)}
  .nl-form__done{font-size:.875rem;color:var(--accent-600);min-height:1.2em}
  @media (max-width:1280px){.esg{padding-inline:6rem}}
  @media (max-width:1024px){.esg{grid-template-columns:1fr;padding-inline:1.25rem;padding-block:4rem}}

  /* ---------- WORK GALLERY (pinned: vertical scroll swipes through every card, then the page moves on) ---------- */
  .posts{position:relative}
  .posts__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding-top:4.5rem;overflow:hidden}
  .posts__heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
  .posts__heading small{display:flex;align-items:center;gap:1rem;font-family:var(--font-primary);font-size:.8rem;color:var(--neutral-400);letter-spacing:0}
  .posts__count{font-variant-numeric:tabular-nums;color:var(--navy)}
  .posts__progress{width:8rem;height:1px;background:var(--neutral-300);position:relative;overflow:hidden}
  .posts__progress i{position:absolute;inset:0;background:var(--accent-400);transform:scaleX(0);transform-origin:left}
  .posts__viewport{overflow:hidden}
  .posts__track{display:flex;width:max-content;padding-inline:calc((100% - var(--width-content)) / 2);will-change:transform}
  /* card width is derived from the picture's own ratio: thumb = card height − header (2.25rem) − bottom margin (.5rem) */
  .post{--h:min(34rem, calc(100svh - 14rem));flex:0 0 auto;height:var(--h);width:calc((var(--h) - 2.75rem) * var(--ar, 1.5) + 1rem);border:dashed .5px var(--neutral-400);border-right:none}
  .post:last-child{border-right:dashed .5px var(--neutral-400)}
  .post .link{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit}
  .post header{flex:0 0 auto;height:2.25rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:0 .5rem}
  .post__title,.post__date{font-size:.8rem;text-transform:uppercase;font-weight:400}
  .post__title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .post__date{white-space:nowrap;flex-shrink:0;color:var(--accent-600)}
  .post__thumb{flex:1 1 auto;min-height:0;margin:0 .5rem .5rem;border-radius:var(--border-radius);overflow:hidden;position:relative;isolation:isolate;background:var(--bg,#0a1a3c)}
  .post__excerpt{position:absolute;left:.5rem;right:.5rem;bottom:.5rem;z-index:2;display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;background:rgba(255,255,255,.94);border-radius:var(--border-radius);transform:translateY(calc(100% + 1rem));transition:transform .5s ease}
  .post__excerpt p{margin:0}
  .post__client{font-family:var(--font-secondary);font-size:1.15rem;font-weight:500;color:var(--navy);text-transform:uppercase}
  .post__more{display:flex;align-items:center;gap:.5rem;align-self:flex-end}
  .post__more > span{position:relative}
  .post__more > span::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:.5px;background-color:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .post__more:hover > span::after{transform:scaleX(1)}
  @media (min-width:768px){
    .post .link:hover .post__excerpt,.post .link:focus-visible .post__excerpt{transform:none}
  }
  @media (max-width:767px){
    .posts__track{align-items:flex-start}
    .post{height:auto;width:min(86vw, calc(var(--ar, 1.5) * (100svh - 28rem) + 1rem))}
    .post__thumb{flex:none;aspect-ratio:var(--ar, 1.5)}
    .post__excerpt{position:static;transform:none;padding:.5rem 1rem 1rem;background:none}
    .post__excerpt p:not(.post__client){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  }

  /* ---------- CONTACT ---------- */
  .contact{padding-block:5rem}
  .contact__inner{display:grid;grid-template-columns:1fr 1.5fr;gap:10rem}
  .contact__left{display:flex;flex-direction:column;gap:1rem}
  .contact__text{font-size:1rem;line-height:1.34;margin-block-end:2rem}
  .contact__details{list-style:none;margin:0;padding:1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;background-color:var(--neutral-200);border:1px solid var(--neutral-300);border-radius:2px}
  .contact__find{text-transform:uppercase;color:var(--neutral-400)}
  .contact__chips{display:flex;gap:.5rem;flex-wrap:wrap}
  .contact__detail{display:flex;align-items:center;gap:.5rem;border:var(--border-style);border-radius:var(--border-radius);padding:.5rem .75rem;text-decoration:none;color:var(--neutral-600);transition:background-color .15s ease,color .15s ease}
  .contact__detail svg{fill:var(--neutral-600);transition:fill .15s ease;width:16px;height:16px}
  .contact__detail:hover{background-color:var(--neutral-100);border-style:solid;color:var(--navy)}
  .contact__detail:hover svg{fill:var(--accent-400)}
  .contact__form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4rem}
  .contact__field{grid-column:1;display:flex;flex-direction:row-reverse;align-items:flex-start;margin-inline-end:1rem;margin-block-end:1rem;border-top:.5px dashed var(--neutral-600);padding-block-start:.5rem;transition:border-top-color .15s ease}
  .contact__field:hover{border-top-style:solid}
  .contact__field:focus-within{border-top-color:var(--accent-400);border-top-style:solid}
  .contact__field label{font-size:1rem;text-transform:capitalize;letter-spacing:.04em;flex-shrink:0;padding-block-start:.35rem}
  .contact__field input,.contact__field textarea{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font-primary);font-size:1rem;line-height:1.34;color:var(--neutral-600);outline:none;resize:none;padding-right:1rem;padding-top:.25rem}
  .contact__field input::placeholder,.contact__field textarea::placeholder{color:var(--neutral-300);font-family:var(--font-primary);transition:transform .15s ease}
  .contact__field:hover input::placeholder,.contact__field:hover textarea::placeholder{transform:translateY(.2rem)}
  .contact__form > .cb-button{grid-column:2;grid-row:1 / span 3;align-self:stretch;background:var(--navy);color:var(--neutral-100);display:flex;width:auto;transition:background .2s ease,color .2s ease}
  .contact__form > .cb-button .cb-button__title{padding-right:0;background-color:inherit;margin-inline-start:1.1rem}
  .contact__form > .cb-button .cb-button__arrow{background-color:inherit}
  .contact__form > .cb-button .cb-button__arrow::before{left:5px}
  .contact__form > .cb-button:hover{background:var(--accent-400);color:#fff}
  .contact__form > .cb-button:hover .cb-button__arrow::after{color:#fff}
  .contact__status{grid-column:1;font-size:.875rem;color:var(--accent-600);min-height:1.2em}
  @media (max-width:1024px){
    .contact__inner{grid-template-columns:1fr;gap:3rem}
    .contact__form{display:flex;flex-direction:column;gap:1.5rem}
    .contact__field{width:100%;margin-inline-end:0}
    .contact__form > .cb-button{order:999;width:100%;min-height:4.5rem}
  }

  /* ---------- FOOTER (glyph field + mouse spotlight) ---------- */
  .site-footer{min-height:100vh;position:relative;display:flex;flex-direction:column;gap:4rem;padding:4rem 1.5rem 2rem;background-color:#0b0d24;color:var(--neutral-100)}
  .site-footer::before{content:"";position:absolute;inset:0;background-image:var(--glyphs);background-repeat:no-repeat;background-position:center;background-size:contain;
      -webkit-mask-image:radial-gradient(circle 25rem at var(--mouse-x,0%) var(--mouse-y,0%), white 0%, rgba(255,255,255,.3) 100%);
      mask-image:radial-gradient(circle 25rem at var(--mouse-x,0%) var(--mouse-y,0%), white 0%, rgba(255,255,255,.3) 100%);pointer-events:none}
  .site-footer::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 25rem at var(--mouse-x,0%) var(--mouse-y,0%), var(--accent-400), transparent 80%);mix-blend-mode:color;
      -webkit-mask-image:var(--glyphs);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
      mask-image:var(--glyphs);mask-repeat:no-repeat;mask-position:center;mask-size:contain;opacity:0;transition:opacity .3s ease;pointer-events:none}
  .site-footer:hover::after{opacity:1}
  @media (hover:none){.site-footer::before{-webkit-mask-image:none;mask-image:none}}
  .site-footer__top,.site-footer__bar{position:relative;z-index:1}
  .site-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:3rem;flex-wrap:wrap;flex:1}
  .site-footer__nl{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:25.625rem}
  .site-footer__nl h3{font-size:1rem;font-weight:400;line-height:1.2;letter-spacing:.15px;text-transform:uppercase}
  .site-footer__nl p{color:var(--neutral-300);line-height:1.34}
  .site-footer .nl-form input[type=text],.site-footer .nl-form input[type=email]{border-color:var(--neutral-300);color:var(--neutral-100)}
  .site-footer .nl-form input::placeholder{color:var(--neutral-300)}
  .site-footer .nl-form__submit{background:var(--neutral-100);color:var(--neutral-600)}
  .site-footer .nl-form__submit:hover{background:var(--accent-400);color:#fff}
  .site-footer .nl-form label{color:var(--neutral-400)}
  .site-footer__contact{display:flex;flex-direction:column;align-items:flex-end;align-self:flex-end;gap:1rem;text-align:right}
  .site-footer__mark{width:2.6rem;color:var(--accent-400)}
  .site-footer__address{font-style:normal;font-size:.8rem;line-height:1.2;text-transform:uppercase}
  .site-footer__divider{width:19.5rem;max-width:100%;border-top:.5px dashed var(--neutral-300)}
  .site-footer__links{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
  .u-link{color:var(--neutral-100);text-decoration:none;position:relative}
  .u-link::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:.5px;background-color:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .u-link:hover::after{transform:scaleX(1)}
  .site-footer__bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;border-top:.5px dashed var(--neutral-300);border-bottom:.5px dashed var(--neutral-300);padding:1rem .5rem;margin-top:auto;font-size:.8rem;text-transform:uppercase}
  .site-footer__bar nav{display:flex;gap:1.5rem;flex-wrap:wrap}
  .site-footer__bar nav.legal{gap:2rem}
  @media (max-width:1024px){
    .site-footer__top{flex-direction:column}
    .site-footer__contact{align-items:flex-start;text-align:left;align-self:flex-start}
    .site-footer__links{align-items:flex-start}
  }
  @media (max-width:767px){.site-footer__bar{flex-direction:column;align-items:flex-start}}

  /* ---------- CLIENT WALL (navy, from deck) ---------- */
  .logos-band{background:#0f1839;color:var(--neutral-100);padding-block:6rem;margin-block:100px}
  .logos-band .logos{max-width:76rem}
  .logos__eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-400)}
  .logos-band .separator > hr{border-top-color:rgba(161,166,194,.45)}
  .logos-band .logos__grid{display:grid;grid-template-columns:repeat(6,1fr);width:100%;margin-top:2.5rem}
  .logos-band .logos__item{width:auto;height:6.5rem}
  .logos-band .logos__mark.has-logo{background-color:rgba(255,255,255,.9)}
  .logos-band .logos__item:hover .logos__mark.has-logo{background-color:var(--accent-400)}
  .logos__cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;width:100%;margin-top:3.5rem;padding-top:2.5rem;border-top:1px dashed rgba(161,166,194,.45)}
  .logos__cta h2{color:var(--neutral-100);font-size:2.2rem}
  .logos__cta .cb-button{width:auto;color:var(--neutral-600)}
  .logos__cta .cb-button__title,.logos__cta .cb-button__arrow{background-color:var(--neutral-100)}
  .logos__cta .cb-button:hover{color:var(--neutral-400)}
  @media (max-width:1024px){.logos-band .logos__grid{grid-template-columns:repeat(4,1fr)}.logos-band{padding-block:4rem;margin-block:50px}}
  @media (max-width:767px){.logos-band .logos__grid{grid-template-columns:repeat(3,1fr)}.logos-band .logos__item{height:5rem;padding:.5rem}.logos-band .logos__mark.has-logo{transform:scale(.8)}.logos__cta h2{font-size:1.6rem}}

  /* ---------- ESG on forest background ---------- */
  .esg{background:linear-gradient(90deg, rgba(10,14,40,.94) 0%, rgba(10,14,40,.8) 48%, rgba(10,14,40,.35) 100%), url(/assets/deck/bg-esg.jpg) center/cover no-repeat;color:var(--neutral-100)}
  .esg h2{color:var(--neutral-100)}
  .esg .esg__subline{color:#7ee2a8;margin:0}
  .esg .esg__text{color:rgba(243,243,246,.82)}
  .esg__sdgs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
  .esg__sdgs span{font-size:.8rem;font-weight:600;letter-spacing:.04em;padding:.55rem .9rem;background:#05070f;color:#7ee2a8;border:1px solid rgba(126,226,168,.25);border-radius:2px;transition:background-color .2s ease,color .2s ease}
  .esg__sdgs span:hover{background:#7ee2a8;color:#05070f}
  .esg .nl-form input[type=text],.esg .nl-form input[type=email]{border-color:rgba(243,243,246,.55);color:var(--neutral-100)}
  .esg .nl-form input::placeholder{color:rgba(243,243,246,.6)}
  .esg .nl-form__submit{background:var(--neutral-100);color:var(--neutral-600)}
  .esg .nl-form__submit:hover{background:var(--accent-400);color:#fff}
  .esg .nl-form label{color:rgba(243,243,246,.7)}
  .esg .nl-form__done{color:#7ee2a8}



  /* ---------- CASE STUDY CARDS ---------- */
  .post--case .post__date{background:var(--accent-400);color:#fff;padding:.1rem .45rem;border-radius:2px}


  /* ---------- HEADER: language switch + inner-page (solid) mode ---------- */
  .site-header__right{display:flex;align-items:center;gap:1rem}
  .site-header__lang{display:flex;gap:.1rem;list-style:none;margin:0;padding:.15rem;border:.5px dashed var(--neutral-400);border-radius:1.3125rem}
  .site-header__lang a{display:block;padding:.15rem .55rem;border-radius:1rem;font-size:.72rem;letter-spacing:.06em;text-decoration:none;color:var(--neutral-100);transition:background-color .15s ease,color .15s ease}
  .site-header__lang a[aria-current]{background:var(--accent-400);color:#fff}
  .site-header__lang a:not([aria-current]):hover{background:rgba(243,243,246,.15)}
  .site-header.is-scrolled .site-header__lang a{color:var(--neutral-600)}
  .site-header.is-scrolled .site-header__lang a[aria-current]{color:#fff}
  .site-header.is-scrolled .site-header__lang a:not([aria-current]):hover{background:var(--neutral-200)}
  @media (max-width:1024px){
    .site-header__nav{position:relative}
    .site-header__right{order:2}
  }
  @media (max-width:767px){.site-header .site-header__lang a{color:var(--neutral-600)}.site-header .site-header__lang a[aria-current]{color:#fff}}
  body[data-header="solid"] .site-header{background-color:var(--neutral-100);border-bottom-color:var(--neutral-300)}
  body[data-header="solid"] .site-header__menu a,body[data-header="solid"] .site-header__lang a{color:var(--neutral-600)}
  body[data-header="solid"] .site-header__lang a[aria-current]{color:#fff}
  body[data-header="solid"] .site-header__burger span{background-color:var(--neutral-600)}

  /* ---------- INNER PAGES ---------- */
  .page main{padding-top:var(--header-height)}
  .page-hero{position:relative;background:#0a1a3c;color:var(--neutral-100);overflow:hidden}
  .page-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:end;padding-block:7rem 5rem}
  .page-hero__crumbs{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-300);margin-bottom:2rem}
  .page-hero__crumbs a{color:var(--neutral-300);text-decoration:none}
  .page-hero__crumbs a:hover{color:var(--accent-400)}
  .page-hero__crumbs span[aria-current]{color:var(--neutral-100)}
  .page-hero__eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-400);margin-bottom:1rem}
  .page-hero h1{font-family:var(--font-secondary);font-size:clamp(2.4rem,4.2vw,4rem);font-weight:700;font-stretch:90%;line-height:1.02;letter-spacing:-.025em}
  .page-hero h1 .hl{color:var(--accent-400)}
  .page-hero__lead{font-size:1.05rem;line-height:1.5;color:rgba(243,243,246,.82);max-width:46ch;margin-top:1.5rem}
  .page-hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.25rem}
  .page-hero__actions .cb-button{width:auto;color:var(--neutral-600)}
  .page-hero__actions .cb-button__title,.page-hero__actions .cb-button__arrow{background:var(--neutral-100)}
  .page-hero__actions .cb-button:hover{color:var(--neutral-400)}
  .page-hero__actions .cb-button--ghost .cb-button__title,.page-hero__actions .cb-button--ghost .cb-button__arrow{background:transparent;color:var(--neutral-100);border:.5px dashed var(--neutral-300)}
  .page-hero__actions .cb-button--ghost .cb-button__arrow{border-left:none}
  .page-hero__media{position:relative;aspect-ratio:4/3;border:1px dashed rgba(161,166,194,.5);padding:.5rem}
  .page-hero__media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
  .page-hero__media figcaption{position:absolute;left:1rem;bottom:1rem;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(10,26,60,.85);padding:.35rem .6rem;color:var(--neutral-300)}
  .page-hero--photo{background:#000417}
  .page-hero--photo .page-hero__bg{position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
  .page-hero--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,4,23,0) 40%,#000417 100%)}
  .page-hero--photo .page-hero__inner{grid-template-columns:1fr;max-width:60rem;min-height:62vh}
  @media (max-width:1024px){
    .page-hero__inner{grid-template-columns:1fr;gap:2.5rem;padding-block:4rem 3rem}
    .page-hero__media{order:-1;aspect-ratio:16/10}
  }

  .section{padding-block:5rem}
  .section--tight{padding-block:3rem}
  .section--alt{background:var(--neutral-200)}
  .section--navy{background:#0f1839;color:var(--neutral-100)}
  .section--navy h2,.section--navy h3{color:var(--neutral-100)}
  .section__head{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:start;margin-bottom:3rem}
  .section__head h2{font-size:2.2rem}
  .section__head p{font-size:1.05rem;line-height:1.5;color:var(--neutral-500);max-width:60ch}
  .section--navy .section__head p{color:var(--neutral-300)}
  .eyebrow{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-600);margin-bottom:.75rem}
  .section--navy .eyebrow{color:var(--accent-400)}
  @media (max-width:1024px){.section__head{grid-template-columns:1fr;gap:1.25rem}.section{padding-block:3.5rem}}

  .prose{max-width:68ch;font-size:1.05rem;line-height:1.55;color:var(--neutral-500)}
  .prose p+p{margin-top:1.1em}
  .prose h2{font-size:1.6rem;margin:2.2em 0 .7em;color:var(--neutral-600)}
  .prose h3{font-family:var(--font-secondary);font-size:1.2rem;font-weight:500;margin:1.8em 0 .5em;color:var(--neutral-600)}
  .prose ul{padding-left:1.2em}
  .prose li+li{margin-top:.4em}
  .prose strong{color:var(--neutral-600);font-weight:600}
  .prose a{color:var(--navy)}

  /* capability grid (service pages) */
  .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border:var(--border-style);border-right:none;border-bottom:none}
  .cap{padding:2rem 1.5rem;border:var(--border-style);border-top:none;border-left:none;transition:background-color .3s ease}
  .cap:hover{background:var(--neutral-200)}
  .cap__num{font-size:.8rem;color:var(--accent-600);margin-bottom:1.25rem}
  .cap h3{font-family:var(--font-secondary);font-size:1.25rem;font-weight:500;margin-bottom:.6rem}
  .cap p{font-size:.95rem;line-height:1.5;color:var(--neutral-500)}
  .cap ul{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
  .cap li{font-size:.72rem;text-transform:uppercase;border:1px solid var(--neutral-300);border-radius:1rem;padding:.15rem .55rem;color:var(--neutral-500)}
  @media (max-width:1024px){.cap-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.cap-grid{grid-template-columns:1fr}}

  /* process steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step}
  .step{position:relative;padding-top:1.25rem;border-top:var(--border-style)}
  .step::before{counter-increment:step;content:"0" counter(step);display:block;font-size:.8rem;color:var(--accent-600);margin-bottom:1rem}
  .step h3{font-family:var(--font-secondary);font-size:1.15rem;font-weight:500;margin-bottom:.5rem}
  .step p{font-size:.95rem;line-height:1.5;color:var(--neutral-500)}
  @media (max-width:1024px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.steps{grid-template-columns:1fr}}

  /* photo grids */
  /* masonry: every photo keeps its own proportions, portrait and landscape side by side, nothing cropped or boxed */
  .gallery{columns:3;column-gap:.75rem}
  .gallery figure{margin:0 0 .75rem;border:var(--border-style);padding:.5rem;background:var(--neutral-100);break-inside:avoid}
  .gallery img{display:block;width:100%;height:auto;border-radius:2px}
  .gallery figcaption{padding:.75rem .25rem .25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--neutral-400)}
  .gallery--2{columns:2}
  .gallery .span-2{column-span:all}
  @media (max-width:1024px){.gallery{columns:2}}
  @media (max-width:640px){.gallery,.gallery--2{columns:1}}

  /* work / case cards (index) */
  .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .case-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:var(--border-style);padding:.5rem;transition:background-color .3s ease}
  .case-card:hover{background:var(--neutral-200)}
  .case-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px}
  .case-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem .75rem 1rem}
  .case-card__meta{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-600)}
  .case-card h3{font-family:var(--font-secondary);font-size:1.35rem;font-weight:500}
  .case-card p{font-size:.95rem;line-height:1.5;color:var(--neutral-500)}
  .case-card--small img{aspect-ratio:4/3}
  .cases--3{grid-template-columns:repeat(3,1fr)}
  @media (max-width:1024px){.cases,.cases--3{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.cases,.cases--3{grid-template-columns:1fr}}

  /* case study page */
  .case-facts{display:grid;grid-template-columns:repeat(4,1fr);border:var(--border-style);border-right:none}
  .case-facts > div{padding:1.25rem 1.5rem;border-right:var(--border-style)}
  .case-facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--neutral-400);margin-bottom:.4rem}
  .case-facts dd{margin:0;font-family:var(--font-secondary);font-size:1.1rem;font-weight:500;color:var(--navy)}
  @media (max-width:1024px){.case-facts{grid-template-columns:repeat(2,1fr)}.case-facts > div:nth-child(2n){border-right:none}.case-facts > div:nth-child(n+3){border-top:var(--border-style)}}
  .case-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
  .case-layout aside{position:sticky;top:calc(var(--header-height) + 2rem)}
  @media (max-width:1024px){.case-layout{grid-template-columns:1fr;gap:2rem}.case-layout aside{position:static}}
  .case-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:var(--border-style);padding-top:1.5rem;font-size:.85rem}
  .case-nav a{text-decoration:none;color:var(--navy)}
  .case-nav a:hover{color:var(--accent-600)}

  /* FAQ (native details) */
  .faq{border-top:var(--border-style)}
  .faq details{border-bottom:var(--border-style)}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:2rem;padding:1.35rem 0;font-family:var(--font-secondary);font-size:1.15rem;font-weight:500;color:var(--neutral-600)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";flex-shrink:0;width:1.5rem;height:1.5rem;display:grid;place-items:center;border:1px solid var(--neutral-300);border-radius:50%;font-family:var(--font-primary);font-size:1rem;color:var(--accent-600);transition:transform .25s ease}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq summary:hover{color:var(--navy)}
  .faq .faq__a{padding:0 0 1.5rem;max-width:68ch;font-size:1rem;line-height:1.55;color:var(--neutral-500)}
  .faq .faq__a p+p{margin-top:.8em}
  .section--navy .faq,.section--navy .faq details{border-color:rgba(161,166,194,.4)}
  .section--navy .faq summary{color:var(--neutral-100)}
  .section--navy .faq summary::after{color:var(--accent-400);border-color:rgba(161,166,194,.5)}
  .section--navy .faq summary:hover{color:var(--accent-400)}
  .section--navy .faq .faq__a{color:var(--neutral-300)}
  .section--navy .faq .faq__a a{color:var(--neutral-100)}
  .faq-layout{display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:start}
  @media (max-width:1024px){.faq-layout{grid-template-columns:1fr;gap:1.5rem}}

  /* client strip (small, light) */
  .client-strip{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center;justify-content:center;padding-block:1.5rem;border-top:var(--border-style);border-bottom:var(--border-style)}
  .client-strip .logos__mark.has-logo{background-color:var(--neutral-400)}

  /* CTA band */
  .cta-band{background:#0f1839;color:var(--neutral-100)}
  .cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:4.5rem}
  .cta-band h2{color:var(--neutral-100);font-size:2.2rem;max-width:22ch}
  .cta-band p{color:var(--neutral-300);max-width:48ch;margin-top:.75rem}
  .cta-band .cb-button{width:auto;color:var(--neutral-600)}
  .cta-band .cb-button__title,.cta-band .cb-button__arrow{background-color:var(--neutral-100)}
  .cta-band .cb-button:hover{color:var(--neutral-400)}

  /* related services */
  .related{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:var(--border-style);border-right:none}
  .related a{display:flex;flex-direction:column;gap:.75rem;padding:1.75rem 1.5rem;text-decoration:none;color:inherit;border-right:var(--border-style);transition:background-color .3s ease}
  .related a:hover{background:var(--neutral-200)}
  .related a[aria-current]{background:var(--navy);color:var(--neutral-100)}
  .related a[aria-current] .related__num{color:var(--accent-400)}
  .related__num{font-size:.8rem;color:var(--accent-600)}
  .related h3{font-family:var(--font-secondary);font-size:1.15rem;font-weight:500}
  .related p{font-size:.85rem;color:var(--neutral-400);line-height:1.45}
  .related a[aria-current] p{color:var(--neutral-300)}
  @media (max-width:1024px){.related{grid-template-columns:repeat(2,1fr)}.related a:nth-child(n+3){border-top:var(--border-style)}}
  @media (max-width:640px){.related{grid-template-columns:1fr}.related a{border-top:var(--border-style)}.related a:first-child{border-top:none}}

  /* contact page */
  .contact-page .contact{padding-block:2rem 5rem}
  .map-note{font-size:.85rem;color:var(--neutral-400)}

  /* photos and deck visuals come in every orientation: show each one whole inside its frame,
     on a navy field instead of cropping (the build wraps every asset image in .fit) */
  .fit{display:block;position:relative;isolation:isolate;overflow:hidden;border-radius:2px;background:var(--bg,#0a1a3c)}
  /* galleries keep uniform tiles; heroes and case cards follow the picture's own ratio (clamped so rows stay tidy) */
  .gallery .fit{aspect-ratio:var(--ar, 4/3)}
  .case-card .fit,.case-card--small .fit{aspect-ratio:clamp(1, var(--ar, 1.5), 1.78)}
  .page-hero__media .fit{aspect-ratio:clamp(.75, var(--ar, 1.33), 1.78)}
  .page-hero__media{aspect-ratio:auto;align-self:center}
  @media (max-width:1024px){.page-hero__media{aspect-ratio:auto}}
  .gallery .fit img,.gallery .span-2 .fit img,.case-card .fit img,.case-card--small .fit img,.page-hero__media .fit img,.fit img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}

  /* reveal */
  [data-reveal]{opacity:0;transform:translateY(1.25rem);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.1,1)}
  [data-reveal].is-in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

  /* home tweaks for the multi-page site */
  .hero--intro .hero__content .cb-button + .cb-button{margin-left:.5rem}