:root{
    --paper:#EAE8E2; --ink:#16211E; --teal:#0B5C58; --teal-deep:#07403D;
    /* one page gutter for every page (Marlo, 2026-09-09): the amount the record
       section uses on the home page. No page runs its content into the corners. */
    --gutter:clamp(1rem,3vw,2.5rem);
    /* one dark family: the ground, a raised surface on it, and that surface hovered */
    --ink-2:#1E2C28; --ink-3:#26352F; --muted:#5C655F; --deep:#2A3A35;
    --white:#FFFFFF; --line:#D6D3CA;
    --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
    --mono:"Fragment Mono",ui-monospace,SFMono-Regular,monospace;
    /* titles run on the geometric face: its O is a true circle, the same shape as
       the mark, so the wordmark and the O-to-target morph are one drawing */
    --display:"Bruno Ace SC","Jost",ui-sans-serif,system-ui,sans-serif;
    --e-out:cubic-bezier(.23,1,.32,1); --e-inout:cubic-bezier(.77,0,.175,1);
  }
  *{box-sizing:border-box; margin:0}
  ::selection{background:var(--teal); color:var(--paper)}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--paper); border:1px solid var(--teal); border-radius:10px}
  html{scroll-behavior:smooth}
  html.lenis, html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  html,body{overflow-x:clip}
  body:not(.loaded){overflow:hidden}
  body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased}
  .mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
  /* every title, and the numerals that behave like titles. Body, nav and mono
     stay on Instrument Sans / Fragment Mono. */
  h1,h2,h3,.m-link,.mstat b,.bignums b,.im-figs dd,.impx-fig b,.wtitle,.ch-h,
  .svcfull .num,.fpanel .fn{font-family:var(--display)}
  .ref{color:var(--teal)}
  section{padding:0 var(--gutter)}

  /* Shared entrance timing. The current loader uses a neutral wordmark. */
  #loader{position:fixed; inset:0; z-index:50; pointer-events:none; color:var(--paper);
          background:var(--teal-deep); display:flex; align-items:center; justify-content:center;
          transition:opacity .5s ease}
  #loader.fade{opacity:0}
  #loader.gone{display:none}
  /* the wordmark, same drawing as the hero: the mark stands as the O between B and ND */
  .ld-lock{display:flex; align-items:center; font-family:var(--display); font-weight:500;
           font-size:clamp(3rem,9vw,7.5rem); letter-spacing:0; line-height:1}
  .ld-lock svg{height:1.105em; width:auto; display:block; margin:0 -.07em; overflow:visible}

  /* header — pill · two link columns with hanging lines · WA square · menu button (hidden until scroll, OCI pattern) */
  .site-head{position:fixed; inset:0 0 auto 0; z-index:45; pointer-events:none; display:grid; grid-template-columns:1fr auto; gap:1.6rem; align-items:start; padding:.9rem clamp(1rem,3vw,2.5rem)}
  .site-head :is(a,button,input){pointer-events:auto}
  .chip{position:relative; overflow:hidden; border:none; color:var(--paper); text-decoration:none; width:3.9rem; height:3.9rem; padding:0; display:flex; align-items:center; justify-content:center; z-index:1; font-size:.8rem}
  .chip-bg{position:absolute; inset:0; z-index:-1; background:var(--teal-deep)}
  .chip .mark{width:100%; height:100%; display:block}
  .site-head .chip{opacity:0}
  body.chip-ready .site-head .chip{opacity:1; transition:opacity .3s ease}
  .hcol li:nth-child(1) a{transition-delay:.6s}
  .hcol li:nth-child(2) a{transition-delay:.68s}
  .hcol li:nth-child(3) a{transition-delay:.76s}
  .mbox{grid-column:3}
  #menuBtn{background:var(--white); color:var(--teal); border:none; padding:0 1.7rem; cursor:pointer; height:3.4rem; transform:translateX(101%); transition:transform .6s var(--e-out), background .3s}
  #menuBtn:hover{background:var(--paper)}
  body.nav-compact #menuBtn, body.menu-open #menuBtn{transform:translateX(0)}
  #contactBtn{width:3.4rem; height:3.4rem; background:var(--teal); color:var(--paper); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.3rem; position:relative; overflow:hidden; z-index:1}
  #contactBtn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--teal-deep); transform:translateY(101%) scaleY(.5); transform-origin:50% 100%; transition:transform .45s var(--e-out)}
  #contactBtn:hover::before{transform:translateY(0) scaleY(1)}
  .hcols{display:flex; gap:2.4rem; justify-content:flex-end; grid-column:2}
  .hcol{display:flex; gap:.9rem; align-items:flex-start}
  .hcol .hline{width:1px; height:14rem; background:var(--paper); opacity:.5; transform-origin:top center; transition:transform .6s var(--e-out) .2s; margin-top:-.9rem}
  .hcol ul{list-style:none; padding:.2rem 0 0; margin:0; display:flex; flex-direction:column; gap:.55rem}
  .hcol li{overflow:hidden}
  .hcol a{display:block; color:var(--paper); text-decoration:none; font-size:clamp(1.35rem,2.2vw,2rem); letter-spacing:.02em; line-height:1.25; transition:transform .7s var(--e-out), opacity .25s, letter-spacing .3s var(--e-out)}
  .hcol a:hover{opacity:.55; letter-spacing:.06em}
  body:not(.loaded) .hcol a{transform:translateY(112%)}
  body:not(.loaded) .hcol .hline{transform:scaleY(0)}
  .hcol li:nth-child(1) a{transition-delay:.6s}
  .hcol li:nth-child(2) a{transition-delay:.68s}
  .hcol li:nth-child(3) a{transition-delay:.76s}
  body.loaded .hcol a{transition-delay:0s}
  body.nav-compact .hcol a{transform:translateY(-112%)}
  body.nav-compact .hcol .hline{transform:scaleY(0); transition-delay:0s}
  body.nav-ink .hcol a{color:var(--ink)}
  body.nav-ink .hcol .hline{background:var(--ink); opacity:.35}
  @media (max-width:1023px){ .hcols{display:none} }
  .mbox{grid-column:3; display:flex; align-items:stretch; transition:opacity .4s var(--e-out)}
  .mwrap{overflow:hidden; display:flex}
  @media (max-width:1023px){
    .site-head{display:flex; justify-content:space-between; gap:.7rem}
    .site-head > span:empty{display:none}
    .chip{width:3.2rem; height:3.2rem}
    .hcols{display:none}
    #menuBtn{transform:translateX(0); white-space:nowrap; padding:0 1rem}
    .chip{width:3.2rem; height:3.2rem}
  }
  @media (max-width:479px){ .chip{width:3rem; height:3rem} }

  /* menu — half-screen white panel from the right (OCI), full-screen on mobile */
  #menu{position:fixed; inset:0; z-index:44; visibility:hidden; pointer-events:none; transition:visibility 0s .8s}
  #menu::before{content:""; position:absolute; inset:0; background:#0000004d; opacity:0; transition:opacity .5s ease-in-out}
  body.menu-open #menu{visibility:visible; pointer-events:auto; transition-delay:0s}
  body.menu-open #menu::before{opacity:1}
  .mpanel{position:absolute; top:0; right:0; bottom:0; width:min(58rem,100%); background:var(--white); color:var(--ink); transform:translateX(101%); transition:transform 1s var(--e-inout); padding:6rem clamp(1.5rem,4vw,3.5rem) 2.5rem; display:flex; flex-direction:column; justify-content:center; gap:1.4rem; overflow-y:auto}
  body.menu-open .mpanel{transform:translateX(0)}
  .mpanel .m-ref{align-self:flex-start}
  .m-mask{overflow:hidden}
  .m-link{display:flex; align-items:center; gap:1.2rem; color:var(--ink); text-decoration:none; font-size:clamp(2.8rem,7vw,6rem); font-weight:500; letter-spacing:-.025em; line-height:1.08; transform:translateY(110%); transition:transform .45s var(--e-out) 0s, opacity .3s, letter-spacing .3s}
  body.menu-open .m-link{transform:none; transition-delay:.5s}
  body.menu-open .m-mask:nth-of-type(2) .m-link{transition-delay:.55s}
  body.menu-open .m-mask:nth-of-type(3) .m-link{transition-delay:.6s}
  body.menu-open .m-mask:nth-of-type(4) .m-link{transition-delay:.65s}
  body.menu-open .m-mask:nth-of-type(5) .m-link{transition-delay:.7s}
  body.menu-open .m-mask:nth-of-type(6) .m-link{transition-delay:.75s}
  .m-dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--teal); opacity:0; transform:scale(0); transition:opacity .3s, transform .3s var(--e-out)}
  .m-link:hover .m-dot{opacity:.6; transform:scale(1)}
  .mpanel hr{border:0; border-top:1px solid var(--line); margin:1rem 0; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--e-out)}
  body.menu-open .mpanel hr{transform:scaleX(1)}
  body.menu-open .mpanel hr:nth-of-type(1){transition-delay:.5s}
  body.menu-open .mpanel hr:nth-of-type(2){transition-delay:.7s}
  .m-news,.m-contact,.m-label{opacity:0; transform:translateY(14px); transition:opacity .5s var(--e-out), transform .5s var(--e-out)}
  body.menu-open .m-news, body.menu-open .m-contact, body.menu-open .m-label{opacity:1; transform:none; transition-delay:.6s}
  .m-label{color:#79837D}
  .m-contact{display:flex; flex-direction:column; gap:.4rem}
  .m-contact a{color:var(--ink); font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-decoration:underline; text-underline-offset:3px}
  .m-news{display:flex; border:1px solid var(--ink); margin-top:.6rem}
  .m-news input{flex:1; border:0; background:transparent; padding:.7rem .8rem; font-family:var(--mono); font-size:.75rem; color:var(--ink); outline:none}
  .m-news button{border:0; background:var(--ink); color:var(--paper); padding:0 1rem; cursor:pointer; font-family:var(--mono)}

  /* hero */
  /* Hero — four pieces over one dithered field. The canvas covers the whole hero; two cells are left open so it
     shows through, the other two carry the name and the panels. The hero is sticky so the next section rides
     over it on scroll. */
  .hero{position:sticky; top:0; height:100svh; min-height:600px; background:#0C6B65; color:var(--paper); overflow:hidden; z-index:0}
  .hero-grid{position:absolute; inset:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
  .hcell{position:relative; min-width:0; min-height:0}
  .hcell--open{background:none}
  /* a short scrim under the navigation only, so white nav text stays readable over the dither */
  .hero-grid::before{content:""; position:absolute; inset:0 0 auto 0; height:11rem; background:linear-gradient(to bottom, rgba(12,107,101,.72), rgba(12,107,101,0)); pointer-events:none; z-index:1}
  .hcell{z-index:1}
  .hcell--name, .hcell--panels{z-index:2}
  .hcell--name{background:var(--paper); color:var(--ink); display:flex; align-items:flex-end; padding:clamp(1rem,3vw,2.5rem)}
  .hero-inner{position:relative; z-index:2; width:100%}
  .hero h1{font-size:clamp(3rem,10.4vw,10.5rem); font-weight:400; letter-spacing:0; line-height:.9; text-wrap:nowrap}
  /* the hero lockup: the wordmark on paper, so the gradient runs ink to teal
     left to right, and the O is the same button as the call's — a plain O that
     becomes the mark and opens the brief. The stop colours on each piece are
     slices of one ramp so the gradient reads as continuous across B, O and ND. */
  /* .line-in sets display:block later in the file, so the lockup pins its flex
     with the h1 in the selector — block flow put the mark on the baseline and
     floated it high above the letters */
  .hero h1 .herolock{display:flex; align-items:center; letter-spacing:0}
  /* the O is real text under the mark: the H1 reads Keybridge for crawlers and
     readers, the drawing sits exactly on the glyph it replaces */
  .hl-o-seo{grid-area:1/1; color:transparent}
  .hl-b,.hl-nd{background-clip:text; -webkit-background-clip:text; color:transparent}
  .hl-b{background-image:linear-gradient(90deg,#16211E,#132F2B)}
  .hl-nd{background-image:linear-gradient(90deg,#113E3A,#0B5C58)}
  .hero-o{position:relative; background:none; border:0; padding:0; margin:0;
          font:inherit; letter-spacing:inherit; line-height:inherit; display:inline-grid; place-items:center}
  /* the mark IS the O, always — the wordmark as drawn, the line reaching B and N */
  /* ring = the O's ink height in Jost (0.7275em -> svg 1.149em); the line ends
     at the letter stems, footprint set so gaps read as set type */
  .hl-omark{grid-area:1/1; height:1.105em; width:auto; overflow:visible; margin:0 -.07em;
            transition:transform .45s var(--e-out)}

  .hcell--panels{display:grid; grid-template-columns:1fr 1fr}
  .hpanel{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:1rem;
          padding:clamp(1.1rem,2vw,1.7rem); min-width:0; overflow:hidden}
  .hp-top{position:relative; z-index:1; opacity:.6; line-height:1.65; max-width:30ch}
  .hpanel--cta{background:var(--ink); color:var(--paper); text-decoration:none}
  /* the fill rises from the floor on hover instead of switching colour */
  .hp-fill{position:absolute; inset:auto 0 0 0; height:100%; background:var(--teal); transform:scaleY(0);
           transform-origin:50% 100%; transition:transform .72s var(--e-out)}
  a.hpanel:hover .hp-fill, a.hpanel:focus-visible .hp-fill{transform:scaleY(1)}
  .hpanel--cta:hover .hp-top{opacity:.85}
  .hp-foot{position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem}
  .hpanel--cta .hp-lead{font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.15; font-weight:500; max-width:11ch}
  .hpanel--cta .hp-go{font-size:1.3rem; line-height:1; transition:transform .6s var(--e-out)}
  .hpanel--cta:hover .hp-go{transform:translateX(.45rem)}
  /* second panel: a live preview of the strongest insight, built like the cards further down the page */
  .hpanel--insight{background:var(--teal-deep); color:var(--paper); text-decoration:none}
  .hpanel--insight .hp-fill{background:var(--ink)}
  .hp-meta{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
  .hp-date{font-size:1.15rem; font-weight:500; letter-spacing:-.01em}
  .hp-meta .mono{opacity:.6}
  .hp-body{position:relative; z-index:1; display:flex; flex-direction:column; gap:.75rem}
  .hpanel--insight .hp-lead{font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.2; font-weight:500}
  .hp-hook{opacity:.62; line-height:1.65; max-width:36ch}
  /* one opaque layer holding every section below the hero; it slides over the pinned hero on scroll */
  .after-hero{position:relative; z-index:3; background:transparent}
  #dither,#dither2d{position:absolute; inset:0; width:100%; height:100%; display:block}
  #dither2d{image-rendering:pixelated}
  .guides{position:absolute; inset:0; z-index:1; pointer-events:none}
  .guides i{position:absolute; top:0; bottom:0; width:1px; background:var(--paper); opacity:.14}
  .guides i:nth-child(1){left:25%} .guides i:nth-child(2){left:50%} .guides i:nth-child(3){left:75%}
  .line{display:block; overflow:hidden}
  .line-in{display:block; transform:translateY(112%); transition:transform 1s var(--e-out)}
  body.loaded .line-in{transform:none}
  body.loaded .line:nth-child(2) .line-in{transition-delay:.1s}
  body.gsap .line-in{transition:none; transform:none}
  .hero .promise{opacity:0; transition:opacity .7s var(--e-out) .55s}
  body.loaded .hero .promise{opacity:1}
  body.gsap .hero .promise{opacity:1; transition:none}

  /* marquee */
  .marquee{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; padding:.55rem 0}
  .marquee span{display:inline-block; padding-right:3rem; animation:slide 28s linear infinite}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* intro — indented lead, two mono columns, staircase silhouette */
  .intro{position:relative; background:var(--teal); color:var(--white); min-height:115svh; display:flex; flex-direction:column; justify-content:flex-start; padding-top:8rem; padding-bottom:clamp(16rem,48vh,30rem)}
  .intro p.lead{font-size:clamp(1.6rem,3.2vw,2.875rem); font-weight:400; letter-spacing:-.01em; width:min(84%,60ch); line-height:1.06}
  .intro .lead .indent{display:inline-block; width:3.5em}
  .intro .statements{display:grid; gap:2.5rem; grid-template-columns:1fr 1fr; margin-top:5rem; width:min(46rem,100%); margin-left:auto}
  @media (max-width:700px){ .intro .statements{grid-template-columns:1fr} }
  .intro .statements .mono{font-size:.78rem; line-height:1.7; opacity:.92}
  .stairsdiv{position:absolute; bottom:-1px; left:0; width:min(62%,900px); height:clamp(260px,52vh,560px); pointer-events:none}
  .stairsdiv i{position:absolute; left:0; background:var(--paper); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--e-out)}
  .stairsdiv.in i{transform:scaleX(1)}
  .stairsdiv.scrub i{transition:none; transform:none}
  .stairsdiv i:nth-child(1){bottom:0; height:100%; width:33.4%}
  .stairsdiv i:nth-child(2){bottom:0; height:66.7%; width:66.7%}
  .stairsdiv i:nth-child(3){bottom:0; height:33.4%; width:100%}
  @media (max-width:639px){ .stairsdiv{width:70%; height:160px} }

  /* section heads */
  .shead{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:.6rem; margin:5rem 0 2.5rem}
  .eyebrow{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:.6rem; margin:5rem 0 2.5rem}
  h2{font-size:clamp(2rem,5.5vw,4rem); font-weight:500; letter-spacing:-.03em; line-height:1}

  /* (old split-accordion #services rules retired; the scroll section styles live at the end of this file) */
  .svc-split{display:grid; grid-template-columns:1fr; gap:2.5rem; padding-bottom:0}
  @media (max-width:1023px){
    .svc-split{display:flex; flex-direction:column; gap:0}
    .svc-left, .svc-right{display:contents}
    .svc-left > h2{order:1}
    .svc-right > h2{order:2; margin-top:-1rem}
    .acc{order:3; margin-top:1.5rem}
    .svc-media{order:4; flex:none; width:calc(100% + 2 * clamp(1rem,3vw,2.5rem)); margin:2rem calc(-1 * clamp(1rem,3vw,2.5rem)) 0; aspect-ratio:3/2; min-height:0}
    .ins-faq{display:none}
  }
  @media (min-width:1024px){
    /* two equal halves, divided by one hairline */
    .svc-split{grid-template-columns:1fr 1fr; gap:4rem}
    .svc-left{position:relative; display:flex; flex-direction:column}
    .svc-left::after{content:""; position:absolute; right:-2rem; top:.4rem; bottom:0; width:1px; background:var(--line)}
    /* the plate is small and sits in the middle of its own half */
    .svc-left .svc-media{flex:1; display:grid; place-items:center; min-height:0;
                         margin:2.2rem 0 0; overflow:visible}
    .svc-left .svc-media img{position:static; width:min(62%,320px); height:auto;
                             aspect-ratio:3/2; object-fit:cover}
  }
  .svc-left h2,.svc-right h2{font-size:clamp(3.2rem,10.5vw,10rem); line-height:.95; letter-spacing:-.02em}
  .svc-media{position:relative; flex:1; min-height:300px; margin:2.2rem 0 0 calc(-1 * clamp(1rem,3vw,2.5rem)); overflow:hidden}
  .svc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .26s var(--e-out)}
  .svc-media img.fade{opacity:0}
  .acc{border-bottom:1px solid var(--line)}
  .acc-item{border-top:1px solid var(--line)}
  .acc-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; width:100%; padding:1.5rem 0; cursor:pointer; background:none; border:0; font-family:var(--sans); font-size:clamp(1.5rem,2.8vw,2.4rem); font-weight:500; letter-spacing:-.015em; color:var(--ink); text-align:left}
  .acc-plus{font-family:var(--mono); font-size:1.1rem; transition:transform .4s var(--e-out)}
  .acc-item.open .acc-plus{transform:rotate(135deg)}
  .acc-item:not(.open) .acc-head:hover .acc-plus{transform:rotate(60deg)}
  .acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--e-inout)}
  .acc-item.open .acc-body{grid-template-rows:1fr}
  .acc-body > div{overflow:hidden}
  .acc-body p{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.8; max-width:52ch; padding-bottom:.6rem}
  .acc-body a{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); text-decoration:none; padding-bottom:1.2rem; transition:letter-spacing .3s var(--e-out), color .3s}
  .acc-body a:hover{color:var(--ink); letter-spacing:.16em}
  .wide-btn{display:block; width:100%; background:var(--teal); color:var(--white); text-align:center; padding:1.15rem; text-decoration:none; margin-top:2.4rem; transition:background .3s}
  .wide-btn:hover{background:var(--teal-deep)}

  /* process — cream bg, scattered rotated card deck with spine (OCI pattern) */
  .process{position:relative; background:var(--paper); color:var(--ink); min-height:122svh; padding-top:2rem; padding-bottom:9rem}
  .process .ph2{max-width:12ch; font-size:clamp(2.6rem,6.5vw,5rem)}
  .psplit{display:grid; grid-template-columns:1fr; gap:3rem; margin-top:2.5rem}
  @media (min-width:1024px){ .psplit{grid-template-columns:5fr 7fr} }
  .psticky{position:sticky; top:7rem}
  .psticky p{margin-top:2.2rem; max-width:34ch; line-height:1.8; color:#5c655f; font-size:.78rem}
  .deck{position:relative; display:flex; flex-direction:column; gap:3.5rem; padding:2rem 0 5rem; overflow-x:clip}
  .deck::before{content:""; position:absolute; left:50%; top:-3rem; bottom:0; width:1px; background:color-mix(in srgb, var(--ink) 22%, transparent)}
  .pcard{position:relative; background:var(--white); width:min(88%,560px); padding:1rem 1.4rem 1.4rem; box-shadow:0 16px 40px rgba(22,33,30,.10); display:flex; flex-direction:column; gap:.9rem}
  .pcard:nth-child(1){align-self:flex-end; transform:rotate(-2.2deg)}
  .pcard:nth-child(2){align-self:flex-start; margin-left:6%; transform:rotate(1.9deg)}
  .pcard:nth-child(3){align-self:flex-end; margin-right:3%; transform:rotate(-1.4deg)}
  .pcard:nth-child(4){align-self:center; transform:rotate(2.4deg)}
  .pcard .pc-top{display:flex; justify-content:space-between; align-items:baseline; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500; color:var(--teal)}
  .pcard .pc-num{font-weight:500}
  .pcard hr{border:0; border-top:1px solid var(--teal); opacity:.5; margin:0}
  .pcard p{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.8; color:var(--deep); padding:.4rem 0 .6rem}
  /* machine — teal band, oversized numbers (their project-stat pattern) */
  .machine{background:var(--teal-deep); color:var(--paper); min-height:88svh; display:flex; flex-direction:column; justify-content:center; padding-top:3rem; padding-bottom:5rem}
  .machine .eyebrow{border-top-color:color-mix(in srgb, var(--paper) 55%, transparent)}
  .mstats{display:grid; grid-template-columns:1fr; gap:2.5rem 0; margin-top:2rem}
  @media (min-width:820px){ .mstats{grid-template-columns:repeat(4,1fr)} }
  .mstat{border-left:1px solid color-mix(in srgb, var(--paper) 35%, transparent); padding:0 1.4rem}
  .mstat b{display:block; font-family:var(--sans); font-size:clamp(4rem,8.5vw,8.5rem); font-weight:500; line-height:.95; font-variant-numeric:tabular-nums}
  .mstat span{display:block; margin-top:1.2rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.7; opacity:.85; max-width:22ch}

  /* work — 3 columns, counter-parallax, dither-to-photo hover */
  /* Selected impacts, as a register rather than a catalogue. Equal bordered cards in three columns with a
     display figure over a colour tile read as products; labelled columns under a header row read as a record. */
  .work{background:var(--paper); min-height:0; padding-top:5rem; padding-bottom:4.5rem; overflow:visible}
  .wtitle{text-align:left; font-size:clamp(2.6rem,6.5vw,6rem); line-height:.92; letter-spacing:-.03em; margin:0 0 3.5rem}
  .wreg{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
  .wreg-head,.wrow{display:grid; grid-template-columns:1fr; gap:.4rem; padding:1.5rem 0; border-bottom:1px solid var(--line)}
  .wreg-head{display:none}
  .wrow{position:relative; transition:background-color .45s var(--e-out)}
  .wrow:hover{background:rgba(11,92,88,.06)}
  .wr-hit{position:absolute; inset:0; z-index:1}
  .wr-ref{color:var(--teal); opacity:.65}
  .wr-name{font-size:clamp(1.05rem,1.5vw,1.35rem); font-weight:500; color:var(--teal); line-height:1.2; letter-spacing:-.01em}
  .wr-filed{opacity:.5}
  .wr-find{font-size:.98rem; line-height:1.45; max-width:40ch}
  .wr-metric{color:var(--teal); font-variant-numeric:tabular-nums; line-height:1.4; opacity:.85}
  .wr-metric b{font-weight:400; display:block; font-size:.95rem; letter-spacing:0; opacity:1}
  @media (min-width:1024px){
    .wreg-head{display:grid}
    .wreg-head,.wrow{grid-template-columns:3rem minmax(11rem,.9fr) 14rem minmax(15rem,1.25fr) 11rem; column-gap:2.2rem; gap:0; align-items:baseline; padding:1.25rem 0}
    .wreg-head{padding:.55rem 0; color:var(--teal); opacity:.8; border-bottom-color:var(--ink)}
    .wr-metric{justify-self:end; text-align:right}
  }
  .wreg-more{display:inline-block; margin-top:2.6rem; color:var(--teal); text-decoration:none; transition:letter-spacing .3s var(--e-out)}
  .wreg-more:hover{letter-spacing:.12em}

  /* insights — image left, 2x2 cards right, active block + image swap on hover */
  .insights{background:var(--paper); padding-top:5rem; padding-bottom:7rem}
  .ins-head{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:.6rem; margin-bottom:2.5rem}
  .ins-head a{text-decoration:none}
  .ins-grid{display:grid; grid-template-columns:1fr; gap:1.5rem}
  @media (min-width:1024px){ .ins-grid{grid-template-columns:1fr 1fr; gap:2rem} }
  .ins-img canvas{display:block; width:100%; aspect-ratio:1/1; height:auto; image-rendering:pixelated; transition:opacity .3s ease}
  .ins-img canvas.fade{opacity:0}
  .ins-cards{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-rows:1fr; background:var(--line); gap:1px; border:1px solid var(--line)}
  .ins-card{background:var(--paper); color:var(--teal); padding:1.4rem; display:flex; flex-direction:column; justify-content:space-between; gap:4rem; cursor:pointer; transition:background-color .5s ease, color .5s ease}
  .ins-card > div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
  .ins-card .d{font-size:1.15rem; font-weight:500}
  .ins-card h3{font-size:clamp(1rem,1.5vw,1.3rem); font-weight:500; line-height:1.3}
  .ins-card.active{background:var(--teal); color:var(--paper)}
  /* footer — one flat brand green, the mark holding the left half, columns on the right */
  .bigfoot{position:relative; z-index:1; flex:0 0 auto; margin-top:auto; color:var(--paper); display:flex; flex-direction:column;
           justify-content:space-between; gap:4rem; padding:5.5rem clamp(1rem,3vw,2.5rem) 1.6rem}
  /* on the inner pages the footer sits outside the call block, so it carries its
     own ground. Inside the block it stays transparent and the hands run behind it. */
  body > .bigfoot{background:var(--teal-deep)}
  .foot-main{display:grid; grid-template-columns:1fr; gap:3.5rem; align-items:center}
  @media (min-width:1024px){ .foot-main{grid-template-columns:1fr 1fr; gap:5rem} }
  .foot-markwrap{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem}
  /* the brand film: the mark's place in the footer — the full left half, wide
     format, cutting through the frames while the lockup inside never moves */
  .brandfilm{margin:0; width:100%; aspect-ratio:16/9; overflow:hidden}
  .brandfilm img{width:100%; height:100%; object-fit:cover; display:block}
  .foot-cols{display:grid; grid-template-columns:1fr 1fr; gap:3.2rem 2.5rem; align-items:start}
  .flabel{display:block; margin-bottom:.9rem; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
          color:color-mix(in srgb, var(--paper) 62%, transparent)}
  .fcol ul{list-style:none; padding:.1rem 0 0 1.1rem; margin:0; display:flex; flex-direction:column; gap:.6rem;
           border-left:1px solid color-mix(in srgb, var(--paper) 30%, transparent)}
  /* the hover grows padding instead of translating the box, so the link never
     slides out from under the pointer (the old transform caused a hover flicker) */
  .fcol a, .fplain{color:var(--paper); font-family:var(--sans); font-weight:500;
                   font-size:clamp(.95rem,1.1vw,1.1rem); line-height:1.3; letter-spacing:.005em;
                   text-decoration:none; display:inline-block; position:relative;
                   transition:padding-left .4s var(--e-out), opacity .2s}
  .fplain{font-weight:400; opacity:.8}
  .fcol a::before{content:"→"; position:absolute; left:0; top:0; opacity:0; transform:translateX(-.5rem);
                  transition:opacity .25s, transform .4s var(--e-out)}
  .fcol a:hover{padding-left:1.4rem}
  .fcol a:hover::before{opacity:1; transform:none}
  .foot-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
            font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.72;
            border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding-top:1.1rem}
  .flegal{display:flex; gap:1.6rem}
  .foot-bar a{color:var(--paper); text-decoration:none}
  .foot-bar a:hover{opacity:.6}
  @media (max-width:639px){
    .bigfoot{padding:3.5rem 1rem 1rem; gap:2.4rem}
    .foot-main{gap:2.4rem}
    .brandfilm{width:100%}
    .foot-cols{gap:2rem 1.2rem}
    .fcol a, .fplain{font-size:.95rem}
  }

  /* double-layer button hover */
  .bl{position:relative; overflow:hidden}
  .bl .bl-b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}

  /* reveals — their fadeUp preset */
  .rv{opacity:0; transform:translateY(30px); transition:opacity 1s var(--e-out),transform 1s var(--e-out)}
  .rv.in{opacity:1; transform:none}
  .acc-item.rv:nth-child(2),.stat.rv:nth-child(2),.pcard.rv:nth-child(2){transition-delay:.1s}
  .acc-item.rv:nth-child(3),.stat.rv:nth-child(3),.pcard.rv:nth-child(3){transition-delay:.2s}
  .acc-item.rv:nth-child(4),.stat.rv:nth-child(4),.pcard.rv:nth-child(4){transition-delay:.3s}

  @media (prefers-reduced-motion:reduce){
    .rv,.line-in,.hero .promise,.site-head .chip,.mbox{opacity:1; transform:none; transition:none}
    .marquee span{animation:none}
    #loader{display:none}
    #menuBtn{transform:none; transition:none}
    .mpanel,.m-link{transition:none}
    html{scroll-behavior:auto}
  }
  /* page transitions — exit covers with stairs (~1.15s), entrance uncovers (~1s) */
  html.pt-in body::after{content:""; position:fixed; inset:0; background:var(--teal-deep); z-index:61; pointer-events:none}
  #pt{position:fixed; inset:0; z-index:60; pointer-events:none; display:grid; grid-template-columns:repeat(5,1fr)}
  #pt i{background:var(--teal-deep); width:calc(100% + 1.5px); transform:scaleY(0); transform-origin:bottom; transition:transform .9s var(--e-inout)}
  #pt i:nth-child(2){transition-delay:.06s} #pt i:nth-child(3){transition-delay:.12s}
  #pt i:nth-child(4){transition-delay:.18s} #pt i:nth-child(5){transition-delay:.24s}
  body.pt-active #pt i{transform:scaleY(1)}
  body.pt-in #pt i{transform:scaleY(1); transition:none; transform-origin:top}
  body.pt-in.pt-reveal #pt i{transform:scaleY(0); transition:transform .9s var(--e-inout)}
  body.pt-in.pt-reveal #pt i:nth-child(2){transition-delay:.06s}
  body.pt-in.pt-reveal #pt i:nth-child(3){transition-delay:.12s}
  body.pt-in.pt-reveal #pt i:nth-child(4){transition-delay:.18s}
  body.pt-in.pt-reveal #pt i:nth-child(5){transition-delay:.24s}

  /* testimonials — crossfading quotes + circular controls */
  .testi{background:var(--white); min-height:72svh; display:flex; flex-direction:column; justify-content:center; padding-top:3rem; padding-bottom:4rem}
  .tq-wrap{display:grid; margin-top:2rem}
  .tq{grid-area:1/1; margin:0; opacity:0; transition:opacity .35s ease; pointer-events:none}
  .tq.active{opacity:1; pointer-events:auto; transition-delay:.3s}
  .tq p{font-size:clamp(1.6rem,3.4vw,2.875rem); font-weight:500; color:var(--teal); line-height:1.15; max-width:28ch}
  .tq footer{margin-top:1.6rem; color:#5c655f}
  .tq-ctrl{display:flex; align-items:center; gap:1.2rem; margin-top:3.5rem}
  .tq-btn{width:3.4rem; height:3.4rem; border:1px solid var(--teal); border-radius:50%; background:none; color:var(--teal); cursor:pointer; font-size:1.05rem; position:relative; overflow:hidden; z-index:1; transition:color .3s}
  .tq-btn::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--teal); transform:scale(0); transform-origin:center bottom; transition:transform .45s var(--e-out)}
  .tq-btn:hover{color:var(--white)}
  .tq-btn:hover::before{transform:scale(1)}
  .tq-count{color:#5c655f; font-variant-numeric:tabular-nums}
  /* services full list + project pills (subpages) */
  .svcfull{margin-top:3rem; border-top:1px solid var(--line)}
  .svcfull article{display:grid; grid-template-columns:auto 1fr; gap:2.2rem; padding:2.6rem 0; border-bottom:1px solid var(--line)}
  .svcfull .num{font-size:clamp(1.8rem,3vw,2.4rem); font-weight:500; color:var(--teal); line-height:1}
  .svcfull h3{font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:500; color:var(--teal)}
  .svcfull p{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.8; max-width:60ch; margin:.9rem 0 1.1rem}
  .svcfull a{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); text-decoration:none; transition:letter-spacing .3s var(--e-out)}
  .svcfull a:hover{letter-spacing:.16em}
  .pills{display:flex; gap:.6rem; flex-wrap:wrap; margin:2.5rem 0 1rem}
  .pill{border:1px solid var(--teal); color:var(--teal); padding:.45rem 1.1rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; border-radius:999px; text-decoration:none}
  .pill.active{background:var(--teal); color:var(--white)}

  /* living gradient — brand darks drifting on their own, nudged by the mouse (--gx/--gy from app.js) */
  .living{position:relative; isolation:isolate}
  .living::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(60% 80% at calc(28% + var(--gx,0)*1%) calc(18% + var(--gy,0)*1%), var(--teal) 0%, transparent 62%),
      radial-gradient(55% 70% at calc(82% - var(--gx,0)*.7%) calc(84% - var(--gy,0)*.7%), var(--ink) 0%, transparent 66%),
      radial-gradient(70% 60% at calc(50% + var(--gx,0)*.3%) 112%, #0B5C58 0%, transparent 70%),
      var(--teal-deep);
    animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{0%{filter:hue-rotate(0deg) saturate(1)} 50%{filter:hue-rotate(-5deg) saturate(1.12)} 100%{filter:hue-rotate(4deg) saturate(.94)}}
  @media (prefers-reduced-motion:reduce){ .living::before{animation:none} }

  /* clone-page heroes: text sits over the dither, so dim the plate and veil it (text blocks are siblings, never covered) */
  .hero-plate, .vl-hero-img, .aid-img, .bd-hero-img{position:relative; background:var(--teal-deep); overflow:hidden}
  /* supplied artwork arrives already dithered, so nothing is laid over it */
  .hero-plate img, .sv-hero-img img, .aid-img img, .vl-hero-img img, .bd-hero-img img, .me-hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .hero-plate:has(img)::after, .sv-hero-img::after, .aid-img:has(img)::after,
  .vl-hero-img:has(img)::after, .bd-hero-img:has(img)::after{content:none}
  .aid-img, .vl-hero-img, .bd-hero-img{overflow:hidden}
  .me-hero{position:relative}
  .me-hero-img{position:absolute; inset:0; margin:0; overflow:hidden; z-index:0}
  .me-hero > *:not(.me-hero-img){position:relative; z-index:1}
  .sv-hero-img{position:absolute; inset:0; margin:0; overflow:hidden; z-index:0}
  .sv-hero{position:relative}
  .sv-hero > *:not(.sv-hero-img){position:relative; z-index:1}
  .hero-plate canvas[data-dither], .vl-hero-img canvas[data-dither], .aid-img canvas[data-dither], .bd-hero-img canvas[data-dither]{opacity:.55}
  .hero-plate::after, .vl-hero-img::after, .aid-img::after, .bd-hero-img::after{content:""; position:absolute; inset:0; background:rgba(7,64,61,.5); pointer-events:none}
  canvas[data-dither]{image-rendering:pixelated}

  /* service pages — each a different structure */
  .chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 2.5rem}
  .chip2{border:1px solid var(--teal); color:var(--teal); padding:.4rem .9rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase}
  .file{display:grid; grid-template-columns:1fr; gap:2rem; margin-top:3rem}
  @media (min-width:1024px){ .file{grid-template-columns:14rem 1fr} }
  .file-index{position:sticky; top:7rem; align-self:start; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem}
  .file-index li{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f; padding-left:1rem; border-left:1px solid var(--line)}
  .file-index li b{color:var(--teal); font-weight:400; margin-right:.5rem}
  .fpanel{display:grid; grid-template-columns:4.5rem 1fr; gap:1.5rem; padding:2.2rem 0; border-top:1px solid var(--line)}
  .fpanel:nth-child(even){margin-left:6%}
  .fpanel .fn{font-size:clamp(2.2rem,4vw,3.4rem); font-weight:500; color:var(--teal); line-height:1}
  .fpanel h3{font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:500; color:var(--teal)}
  .fpanel p{max-width:58ch; margin-top:.6rem}
  .fpanel .out{display:block; margin-top:.9rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f}
  .cmp{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:3rem 0 1.5rem}
  @media (min-width:800px){ .cmp{grid-template-columns:1fr 1fr} }
  .cmp > div{background:var(--paper); padding:1.6rem}
  .cmp h3{font-family:var(--mono)!important; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:.8rem; font-weight:400}
  .cmp b{display:block; font-size:1.35rem; font-weight:500; color:var(--teal); margin-bottom:.5rem}
  .rulebox{background:var(--teal-deep); color:var(--paper); padding:2.4rem; margin:2.5rem 0; font-size:clamp(1.2rem,2vw,1.7rem); font-weight:500; line-height:1.3; max-width:44ch}
  .cta-line{display:inline-block; margin-top:2.5rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--white); background:var(--teal); padding:1rem 1.8rem; text-decoration:none; transition:background .3s}
  .cta-line:hover{background:var(--teal-deep)}
  .vmap{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.5rem}
  @media (min-width:800px){ .vmap{grid-template-columns:1fr 1fr} }
  @media (min-width:1200px){ .vmap{grid-template-columns:1fr 1fr 1fr} }
  .vcard{background:var(--paper); padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; min-height:17rem}
  .vcard .gate{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#5c655f}
  .vcard b{font-size:1.3rem; font-weight:500; color:var(--teal); line-height:1.15}
  .vcard p{font-size:.93rem}
  .vcard dl{display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; margin:auto 0 0; font-size:.8rem}
  .vcard dt{font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f; padding-top:.15rem}
  .vcard dd{margin:0}
  .explain{display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2.5rem}
  @media (min-width:900px){ .explain{grid-template-columns:1fr 1fr} }
  .explain p{font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.3}
  .rail{display:flex; gap:1px; overflow-x:auto; scroll-snap-type:x mandatory; background:var(--line); border:1px solid var(--line); margin-top:3rem}
  .station{flex:0 0 min(22rem,80vw); scroll-snap-align:start; background:var(--paper); padding:1.6rem; min-height:15rem; display:flex; flex-direction:column; gap:.8rem}
  .station .sn{font-family:var(--mono); color:var(--teal); font-size:.8rem}
  .station b{font-size:1.5rem; font-weight:500; color:var(--teal)}
  .matrix{margin-top:3rem; border-top:1px solid var(--teal)}
  .matrix > div{display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); font-size:.95rem}
  .matrix span{font-family:var(--mono); color:var(--teal); font-size:.75rem; padding-top:.2rem}
  .screens{display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem}
  @media (min-width:900px){ .screens{grid-template-columns:repeat(3,1fr)} }
  .screen{position:relative; border:1px solid var(--line); background:var(--paper)}
  .screen canvas{display:block; width:100%; aspect-ratio:4/3; height:auto; image-rendering:pixelated}
  .screen .cap{padding:1rem 1.1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); border-top:1px solid var(--line)}
  .screen .ph{position:absolute; top:.8rem; left:.8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); background:var(--teal-deep); padding:.25rem .5rem}
  .bignums{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:3rem}
  .bignums > div{background:var(--paper); padding:1.4rem}
  .bignums b{display:block; font-size:clamp(2.4rem,5vw,4rem); font-weight:500; color:var(--teal); line-height:1}
  .bignums span{display:block; margin-top:.5rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f}
  .list2{list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem 2rem}
  .list2 li{border-top:1px solid var(--line); padding:.8rem 0; font-size:1.05rem}

  /* ---- revision 3: contact button, menu sizing, CTA band, insight links ---- */
  #contactBtn{width:auto; min-width:3.4rem; padding:0 1.1rem; gap:.6rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
  #contactBtn .cb-a{font-size:1.05rem; line-height:1; transition:transform .4s var(--e-out)}
  #contactBtn:hover .cb-a{transform:translate(.15rem,-.15rem)}
  @media (max-width:479px){ #contactBtn{padding:0 .9rem} #contactBtn .cb-t{display:none} }
  .mpanel{overflow-y:auto; overscroll-behavior:contain}
  .m-mask{flex-shrink:0}
  .m-link{font-size:clamp(2.4rem,5.6vw,5rem)}
  .ins-card h3 a{color:inherit; text-decoration:none}
  .ins-card h3 a:hover{text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px}
  .cta-band{min-height:74vh; display:flex; align-items:center; padding:6rem clamp(1rem,3vw,2.5rem); color:var(--paper); background:var(--teal-deep)}
  .cta-band h2{font-size:clamp(2.2rem,5vw,4.6rem); font-weight:500; letter-spacing:-.02em; line-height:1.05; max-width:20ch; margin:1.6rem 0 2.6rem}
  .cta-row{display:flex; gap:.9rem; flex-wrap:wrap}
  .cta-btn{display:inline-flex; align-items:center; height:3.4rem; padding:0 1.6rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; background:var(--paper); color:var(--teal-deep); transition:background .3s, color .3s, transform .4s var(--e-out)}
  .cta-btn:hover{background:var(--white); transform:translateY(-2px)}
  .cta-btn.ghost{background:transparent; color:var(--paper); border:1px solid color-mix(in srgb, var(--paper) 50%, transparent)}
  .cta-btn.ghost:hover{background:color-mix(in srgb, var(--paper) 12%, transparent)}
  @media (max-width:639px){ .cta-band{padding:5rem 1rem 4.5rem} }

  /* ---- testimonials: vertical, top to bottom ---- */
  .testi{min-height:auto; padding-bottom:5rem}
  .tv{display:grid; margin-top:2.2rem; border-top:1px solid var(--line)}
  .tv-item{margin:0; padding:2.4rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:1rem}
  @media (min-width:1024px){ .tv-item{grid-template-columns:minmax(0,1fr) 20rem; gap:3rem; align-items:end} }
  .tv-item p{margin:0; font-size:clamp(1.5rem,2.8vw,2.5rem); font-weight:500; color:var(--teal); line-height:1.15; max-width:30ch}
  .tv-item footer{color:#5c655f; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase}

  .wname a{color:inherit; text-decoration:none}

  /* Hero at phone — same four pieces, restacked: name + open, open across, then the two panels. */
  @media (max-width:720px){
    .hero-grid{grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr 15rem}
    .hcell--name{grid-column:1 / -1; grid-row:1; padding:5.5rem 1.15rem 1.9rem}
    .hcell--open{grid-column:1; grid-row:2}
    .hcell--open2{grid-column:2; grid-row:2}
    .hcell--panels{grid-column:1 / -1; grid-row:3; grid-template-columns:1fr 1fr}
    .hero h1{font-size:clamp(2.6rem,19.5vw,5.6rem); line-height:.9}
    .hpanel{padding:1.05rem .95rem; gap:.7rem}
    .hp-top{font-size:.72rem; line-height:1.5}
    .hpanel--cta .hp-lead{font-size:.98rem; max-width:9ch}
    .hp-meta{flex-direction:column; align-items:flex-start; gap:.3rem}
    .hp-meta .mono{font-size:.5rem}
    .hp-date{font-size:.95rem}
    .hp-body{gap:.5rem}
    .hpanel--insight .hp-lead{font-size:.9rem; line-height:1.25}
    .hp-hook{font-size:.72rem; line-height:1.5}
  }

  /* ---- Impact index: a numbered case list, not a catalogue of tiles ---- */
  .ik-grid{grid-column:1 / -1; display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-top:1px solid var(--ink); border-bottom:1px solid var(--line)}
  @media (min-width:760px){ .ik-grid{grid-template-columns:1fr 1fr} }
  @media (min-width:1180px){ .ik-grid{grid-template-columns:repeat(3,1fr)} }
  .ik-card{position:relative; background:var(--paper); padding:1.8rem 1.6rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; min-height:17rem; transition:background-color .45s var(--e-out)}
  .ik-card:hover{background:#E3E1DA}
  .ik-num{color:var(--teal); opacity:.65}
  .ik-title{font-size:clamp(1.2rem,1.8vw,1.55rem); font-weight:500; letter-spacing:-.015em; line-height:1.15; color:var(--teal); max-width:18ch}
  .ik-meta{opacity:.5; line-height:1.5}
  .ik-figs{display:flex; gap:2.2rem; margin-top:auto; padding-top:1.2rem}
  .ik-figs > div{display:flex; flex-direction:column; gap:.25rem}
  .ik-figs dt{font-size:.6rem; letter-spacing:.07em; opacity:.55}
  .ik-figs dd{margin:0; font-size:1.35rem; font-weight:500; letter-spacing:-.02em; color:var(--teal); font-variant-numeric:tabular-nums}
  .ik-go{margin-top:1.1rem; color:var(--teal); transition:letter-spacing .3s var(--e-out)}
  .ik-card:hover .ik-go{letter-spacing:.1em}
  .ik-hit{position:absolute; inset:0; z-index:1}
  /* the service filter above the grid, and the tile that closes it
     (2026-09-09, Marlo). js/impact.js does the toggling. */
  .ik-filter{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem}
  .ik-f{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.7rem;
    letter-spacing:.09em; text-transform:uppercase; color:var(--ink); background:transparent; cursor:pointer;
    border:1px solid color-mix(in srgb, var(--ink) 15%, transparent); border-radius:999px; padding:.58rem .95rem;
    transition:background-color .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out)}
  .ik-f:hover{border-color:color-mix(in srgb, var(--ink) 38%, transparent)}
  .ik-f.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .ik-fn{opacity:.5; font-size:.66rem}
  [dir="rtl"] .ik-f{letter-spacing:0; font-size:.8rem; font-family:var(--sans-ar)}
  /* on a phone the seven pills stacked six rows deep before the first card; they
     run in one rail that scrolls instead, bleeding to both screen edges */
  @media (max-width:760px){
    .ik-filter{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
      margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); padding-bottom:.2rem;
      scroll-snap-type:x proximity}
    .ik-filter::-webkit-scrollbar{display:none}
    .ik-f{flex:none; scroll-snap-align:start}
  }
  .ik-card[hidden]{display:none}
  .ik-soon{justify-content:center}
  .ik-soon:hover{background:var(--paper)}
  .ik-soon-t{font-size:clamp(1.5rem,2.7vw,2.1rem); line-height:1.1; max-width:12ch;
    color:color-mix(in srgb, var(--teal) 42%, transparent)}
  [dir="rtl"] .ik-soon-t{line-height:1.35}

  /* ---- Impact study: one column, plain rules, three prose sections ---- */
  .im-hero{padding:6.5rem var(--gutter) 2.5rem}
  .im-crumb{display:inline-block; color:var(--teal); text-decoration:none; opacity:.7; margin-bottom:2.2rem}
  .im-crumb:hover{opacity:1}
  .im-h1{font-size:clamp(2.2rem,5.5vw,4.4rem); font-weight:500; letter-spacing:-.03em; line-height:1; margin:0; max-width:15ch}
  .im-lede{margin-top:1.4rem; font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1.35; color:var(--teal); max-width:26ch}
  .im-sec{padding:0 var(--gutter) 3.5rem}
  .im-h2{font-size:.72rem; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:var(--teal); opacity:.75; margin:0 0 1rem; padding-top:2.2rem; border-top:1px solid var(--line)}
  .im-body{font-size:1.02rem; line-height:1.6; max-width:58ch}
  .im-figs{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:0}
  @media (min-width:640px){ .im-figs{grid-template-columns:repeat(auto-fit,minmax(0,1fr))} }
  .im-figs > div{background:var(--paper); padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.5rem}
  .im-figs dt{font-size:.6rem; letter-spacing:.07em; opacity:.55}
  .im-figs dd{margin:0; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:500; letter-spacing:-.025em; line-height:1; color:var(--teal); font-variant-numeric:tabular-nums}
  .im-list{list-style:none; padding:0; margin:0; max-width:58ch}
  .im-list li{padding:.85rem 0 .85rem 1.4rem; border-bottom:1px solid var(--line); position:relative; font-size:1rem; line-height:1.5}
  .im-list li::before{content:"—"; position:absolute; left:0; color:var(--teal); opacity:.6}
  .im-svc{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem}
  .im-svc a,.im-svc span{font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--teal); border:1px solid var(--line); padding:.4rem .75rem; text-decoration:none}
  .im-svc a:hover{border-color:var(--teal)}
  .im-rec{margin:0; max-width:38rem}
  .im-rec > div{display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--line)}
  .im-rec dt{color:var(--teal); opacity:.7}
  .im-rec dd{margin:0}
  .im-anon{display:block; margin-top:1.2rem; opacity:.45; line-height:1.6}
  .im-relgrid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
  @media (min-width:760px){ .im-relgrid{grid-template-columns:repeat(3,1fr)} }
  .im-relcard{background:var(--paper); padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:var(--ink); transition:background-color .45s var(--e-out)}
  .im-relcard:hover{background:#E3E1DA}
  .im-rc-sector{opacity:.5}
  .im-rc-head{font-size:1rem; font-weight:500; line-height:1.3; color:var(--teal)}
  .im-rc-go{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-top:auto; padding-top:.8rem; opacity:.7}
  .im-cta{background:var(--teal-deep); color:var(--paper); padding:6rem var(--gutter)}
  .im-cta-in{max-width:60rem}
  .im-cta-h{font-size:clamp(1.6rem,3.4vw,2.8rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:0 0 2rem; max-width:24ch}
  .im-btn{display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:.95rem 1.9rem; border:1px solid currentColor}
  .im-cta-btn{color:var(--paper)}
  .im-cta-btn:hover{background:var(--paper); color:var(--teal-deep)}

  /* the briefings block: questions on the left where the picture used to be */
  .ins-faq{display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--line); padding-top:1.1rem}
  .ins-faq-h{opacity:.5; margin-bottom:.8rem}
  .ins-faq-list{list-style:none; margin:0; padding:0}
  .ins-faq-list li{border-bottom:1px solid var(--line)}
  .ins-faq-list a{display:block; padding:.95rem 0; color:var(--teal); text-decoration:none; font-size:1rem; line-height:1.35; transition:padding-left .35s var(--e-out)}
  .ins-faq-list a:hover{padding-left:.5rem}
  .ins-faq-go{margin-top:1.3rem; color:var(--teal); text-decoration:none; transition:letter-spacing .3s var(--e-out)}
  .ins-faq-go:hover{letter-spacing:.1em}

  /* Other services — boxes: the picture on top, the name under it, nothing else */
  .osvc{padding:5rem clamp(1rem,3vw,2.5rem) 5.5rem; background:var(--paper); color:var(--ink)}
  .osvc-lab{opacity:.55; margin-bottom:1.6rem}
  .osvc-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
  @media (min-width:1024px){ .osvc-grid{grid-template-columns:repeat(4,1fr); gap:2rem} }
  .osvc-grid a{display:block; color:var(--ink); text-decoration:none}
  .osvc-img{display:block; position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--teal-deep)}
  .osvc-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--e-out)}
  .osvc-grid a:hover .osvc-img img{transform:scale(1.04)}
  .osvc-t{display:block; margin-top:.8rem; font-size:1.02rem; font-weight:500; color:var(--teal)}

  /* The application — the site's one door. Black band, paper text. */
  .cta-band{padding:7.5rem clamp(1rem,3vw,2.5rem) 8rem; color:var(--paper); background:var(--ink)}
  .app{max-width:46rem}
  .app-kicker{opacity:.55}
  .app-h{font-size:clamp(2.4rem,5.5vw,4.8rem); font-weight:500; letter-spacing:-.02em; line-height:1.02; margin:1.4rem 0 1.6rem}
  .app-sub{font-size:1.05rem; line-height:1.55; max-width:44ch; opacity:.85}
  .app-start{display:inline-block; margin-top:2.4rem; background:var(--paper); color:var(--ink); border:0; padding:1.15rem 2rem; cursor:pointer; font-size:.78rem; letter-spacing:.06em; transition:letter-spacing .3s var(--e-out)}
  .app-start:hover{letter-spacing:.14em}
  .app-note{margin-top:1.1rem; opacity:.5}
  .app-prog{opacity:.5}
  .app-q{font-size:clamp(1.5rem,3vw,2.4rem); font-weight:500; letter-spacing:-.015em; line-height:1.15; margin:1.2rem 0 2rem; max-width:26ch}
  .app-opts{display:flex; flex-direction:column; gap:.6rem}
  .app-opt{display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; text-align:left; background:none; border:1px solid rgba(234,232,226,.28); color:var(--paper); padding:1.05rem 1.2rem; cursor:pointer; font-size:1rem; transition:background .3s var(--e-out), border-color .3s}
  .app-opt:hover, .app-opt:focus-visible{background:var(--teal); border-color:var(--teal)}
  .app-opt b{font-weight:500}
  .app-opt .mono{opacity:.6}
  .app-form{display:flex; flex-direction:column; gap:1.3rem; max-width:26rem}
  .app-form label{display:flex; flex-direction:column; gap:.45rem}
  .app-form label .mono{opacity:.6}
  .app-form input{background:none; border:0; border-bottom:1px solid rgba(234,232,226,.4); color:var(--paper); font-size:1.1rem; padding:.45rem 0; outline:none; border-radius:0}
  .app-form input:focus{border-bottom-color:var(--paper)}
  .app-form.app-err input:invalid{border-bottom-color:#C96F4A}
  .app-back{margin-top:2.2rem; background:none; border:0; color:var(--paper); opacity:.55; cursor:pointer; transition:opacity .3s}
  .app-back:hover{opacity:1}
  .app-end{max-width:52ch}

  /* mobile audit fixes */
  @media (max-width:768px){
    .pcard, .pcard:nth-child(1), .pcard:nth-child(2), .pcard:nth-child(3){
      position:static; width:100%; margin:0 0 1rem; transform:none !important; align-self:stretch}
    section{overflow-x:clip}
  }
  @media (max-width:640px){
    .fcol a, .m-contact a, .wreg-more, .ins-faq-go{padding-block:.55rem}
  }

  /* the film — appears only once video/film.mp4 exists */
  .film{padding:5rem clamp(1rem,3vw,2.5rem); background:var(--paper)}
  .film-lab{opacity:.55; margin-bottom:1.2rem}
  .film-v{display:block; width:100%; aspect-ratio:16/9; background:var(--ink)}

  /* the dither halo: the cursor re-inks whatever ground it crosses into brand-green Bayer cells.
     Fixed over the whole page, multiply-blended so ink text always reads through it as if the halo
     were behind the copy, and pointer-events:none so every link and button behaves as if it were
     not there. Sits under the fixed header (41) and the menu. */
  /* everything a reader reads or clicks rides ABOVE the halo, so the smoke can be truly black on any
     ground and the copy never drowns. 40 sits over the halo (39) and under the fixed header (41). */
  main :is(h1,h2,h3,h4,p,li,dt,dd,blockquote,figcaption,legend,summary,td,th),
  main :is(a,button,input,textarea,select,label),
  main .mono,
  footer.bigfoot :is(a,p,li,h2,h3,span){position:relative; z-index:40}

  /* ---- the mission panel: the intake lifted over a blurred page ---- */
  .mv{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
      padding:1rem; background:rgba(6,20,19,.55); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
      opacity:0; pointer-events:none; transition:opacity .35s var(--e-out)}
  .mv.on{opacity:1; pointer-events:auto}
  html.m-lock{overflow:hidden}
  .mission{width:min(680px,100%); max-height:min(86vh,760px); overflow:auto; background:var(--ink); color:var(--paper);
           padding:clamp(1.2rem,3vw,2.2rem); transform:translateY(14px) scale(.985); transition:transform .35s var(--e-out)}
  .mv.on .mission{transform:none}
  .m-head{display:flex; align-items:baseline; gap:1rem}
  .m-title{opacity:.6}
  .m-prog{margin-left:auto; color:var(--paper); opacity:.7; font-variant-numeric:tabular-nums}
  .m-close{background:none; border:0; color:var(--paper); opacity:.55; cursor:pointer; padding:0}
  .m-close:hover{opacity:1}
  .m-bar{height:2px; background:rgba(234,232,226,.14); margin:.9rem 0 1.6rem}
  .m-bar i{display:block; height:100%; width:0; background:var(--paper); transition:width .5s var(--e-out)}
  .m-body{opacity:1}
  .m-body.m-in{animation:mIn .4s var(--e-out)}
  @keyframes mIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  .m-q{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin-bottom:1rem}
  .m-ctx{color:color-mix(in srgb, var(--paper) 62%, transparent); margin-bottom:.5rem}
  .m-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem}
  .m-chip{position:relative; text-align:left; background:none; border:1px solid rgba(234,232,226,.22); color:var(--paper);
          padding:.85rem .9rem .8rem 2.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.25rem;
          transition:border-color .25s, background-color .25s, transform .15s var(--e-out)}
  .m-chip b{font-weight:500; font-size:1rem}
  .m-chip .mono{opacity:.55; font-size:.58rem}
  .m-chip:hover{border-color:rgba(234,232,226,.55)}
  .m-chip:active{transform:scale(.985)}
  .m-tick{position:absolute; left:.7rem; top:.95rem; width:.85rem; height:.85rem; border:1px solid rgba(234,232,226,.4)}
  .m-chip.on{border-color:var(--paper); background:rgba(234,232,226,.06)}
  .m-chip.on .m-tick{border-color:var(--paper)}
  .m-chip.on .m-tick::after{content:""; position:absolute; inset:2px; background:var(--paper)}
  .m-opts{display:flex; flex-direction:column; gap:.55rem}
  .m-opt{position:relative; overflow:hidden; text-align:left; background:none; border:1px solid rgba(234,232,226,.22);
         color:var(--paper); padding:.9rem 1rem; cursor:pointer; font-size:.98rem;
         transition:border-color .25s, transform .12s var(--e-out)}
  .m-opt:hover{border-color:rgba(234,232,226,.6)}
  .m-opt.hit{border-color:var(--paper); color:var(--ink)}
  .m-opt::before{content:""; position:absolute; inset:0; background:var(--paper); transform:scaleX(0);
                 transform-origin:0 50%; transition:transform .22s var(--e-out); z-index:-1}
  .m-opt.hit::before{transform:scaleX(1)}
  .m-go{display:inline-block; margin-top:1.4rem; background:var(--paper); color:var(--ink); border:0;
        padding:1rem 1.6rem; cursor:pointer; transition:letter-spacing .3s var(--e-out), opacity .2s}
  .m-go:hover{letter-spacing:.1em}
  .m-go:disabled{opacity:.35; cursor:default; letter-spacing:0}
  .m-back{display:inline-block; margin-top:1.2rem; background:none; border:0; color:var(--paper); opacity:.5; cursor:pointer; padding:0}
  .m-back:hover{opacity:1}
  .m-form{display:flex; flex-direction:column; gap:1rem}
  .m-form label{display:flex; flex-direction:column; gap:.35rem}
  .m-form .mono{opacity:.55}
  .m-form input{background:none; border:0; border-bottom:1px solid rgba(234,232,226,.35); color:var(--paper);
                font-size:1.05rem; padding:.35rem 0; outline:none}
  .m-form input:focus{border-bottom-color:var(--paper)}
  .m-err input:invalid{border-bottom-color:#c96}
  .m-end{font-size:1.02rem; line-height:1.5; opacity:.85; max-width:40ch}

  /* the on-page band: the first question living on the page */
  .mission-band{width:100%}
  .mb-h{font-size:clamp(2.2rem,5vw,4.2rem); font-weight:500; letter-spacing:-.02em; margin-bottom:.6rem}
  .mb-sub{opacity:.5; margin-bottom:1.6rem}
  .mb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem}
  .mb-chip{min-height:9.5rem; justify-content:space-between; text-align:left; background:var(--ink-2); border:1px solid rgba(234,232,226,.28); border-radius:12px; color:var(--paper);
           padding:1.05rem 1.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.3rem;
           transition:border-color .25s, background-color .25s, transform .15s var(--e-out)}
  .mb-chip b{font-weight:500; font-size:1.05rem}
  .mb-chip .mono{opacity:.65; font-size:.68rem}
  .mb-chip:hover{border-color:rgba(234,232,226,.6); background:var(--ink-3); transform:translateY(-2px)}
  .mb-chip:active{transform:scale(.985)}

  /* explore: the three engines */
  .x-row{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.4rem}
  .x-eng{display:flex; align-items:center; justify-content:center; border:1px solid rgba(234,232,226,.25);
         color:var(--paper); text-decoration:none; padding:1.1rem .5rem; transition:border-color .25s, background-color .25s}
  .x-eng:hover{border-color:var(--paper); background:color-mix(in srgb, var(--paper) 8%, transparent)}
  .x-eng b{font-weight:500}
  .x-box{border:1px solid rgba(234,232,226,.2); padding:1rem}
  .x-prompt{opacity:.7; line-height:1.7; font-size:.66rem; margin-bottom:1rem; user-select:all}
  @media (max-width:639px){ .x-row{grid-template-columns:1fr} .mission{max-height:92vh} }

  /* ---- impact, as cards: a dark band, generous boxes, the figures doing the talking.
     The ground is --teal-deep, the same dark the CTA band and the footer sit on, so the
     proof block belongs to the page instead of introducing a second dark. The card is
     that ground lifted by paper light, which is the same idiom the hairlines already use
     on the impact listing and the study plates. One ground token, no second family. ---- */
  .impx{--impx-ground:var(--teal-deep);
        --impx-raise:color-mix(in srgb, var(--paper) 5%, var(--teal-deep));
        --impx-raise-hi:color-mix(in srgb, var(--paper) 10%, var(--teal-deep));
        --impx-hair:color-mix(in srgb, var(--paper) 10%, transparent);
        --impx-hair-hi:color-mix(in srgb, var(--paper) 22%, transparent);
        background:var(--impx-ground); color:var(--paper); padding-top:5rem; padding-bottom:5rem}
  .impx-h{font-size:clamp(2.6rem,6.5vw,6rem); font-weight:500; letter-spacing:-.03em; margin-bottom:2.6rem}
  .impx-grid{display:grid; grid-template-columns:1fr; gap:1rem}
  @media (min-width:900px){ .impx-grid{grid-template-columns:1fr 1fr} }
  .impx-card{position:relative; display:block; background:var(--impx-raise); border:1px solid var(--impx-hair);
             border-radius:12px; padding:clamp(1.4rem,2.6vw,2.2rem); min-height:250px;
             color:var(--paper); text-decoration:none;
             transition:background-color .3s var(--e-out), border-color .3s var(--e-out), transform .25s var(--e-out)}
  .impx-card:hover{background:var(--impx-raise-hi); border-color:var(--impx-hair-hi); transform:translateY(-2px)}
  .impx-t{font-size:clamp(1.25rem,2vw,1.7rem); font-weight:500; letter-spacing:-.015em; line-height:1.15; max-width:18ch}
  .impx-stats{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem}
  .impx-stat{display:flex; flex-direction:column; gap:.55rem}
  /* teal-deep is a saturated ground, so the small mono labels carry more paper than they
     did on --ink to hold the same read at .6rem */
  .impx-stat .mono{opacity:.62; font-size:.6rem}
  .impx-stat b{font-weight:500; font-size:clamp(1.3rem,2.1vw,1.75rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--paper) 80%, var(--teal-deep))}
  .impx-go{position:absolute; right:1.5rem; bottom:1.2rem; opacity:.55; font-size:1.1rem;
           transition:opacity .25s, transform .35s var(--e-out)}
  .impx-card:hover .impx-go{opacity:.9; transform:translateX(.3rem)}
  .impx-more{display:flex; flex-direction:column; justify-content:space-between}
  .impx-more > .mono{opacity:.62}
  .impx-see{font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:500; letter-spacing:-.015em}
  .impx-see i{font-style:normal; display:inline-block; margin-left:.4rem; transition:transform .35s var(--e-out)}
  .impx-more:hover .impx-see i{transform:translateX(.35rem)}

  /* the brief band, same card language, and it explains itself */
  .mb-sub2{max-width:44ch; line-height:1.5; opacity:.75; margin-bottom:1.8rem}

  /* every printed figure links to where it was written */
  .src-a{color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
  .src-a:hover{text-decoration-style:solid}

  /* questions we actually get: native accordions, hairline, operator */
  .sfaq{padding:5rem 0}
  .sfaq-h,.sfaq-list{margin-inline:clamp(1rem,3vw,2.5rem)}
  .sfaq-h{font-size:clamp(1.9rem,4vw,3.4rem); font-weight:500; letter-spacing:-.025em; margin-bottom:2rem}
  .sfaq-list{border-top:1px solid var(--line); max-width:860px}
  .sfaq-i{border-bottom:1px solid var(--line)}
  .sfaq-i summary{display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; cursor:pointer;
    list-style:none; padding:1.15rem 0; font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:500; letter-spacing:-.01em}
  .sfaq-i summary::-webkit-details-marker{display:none}
  .sfaq-x{font-family:var(--mono); transition:transform .35s var(--e-out); flex:none}
  .sfaq-i[open] .sfaq-x{transform:rotate(45deg)}
  .sfaq-a{padding:0 0 1.4rem; max-width:62ch}
  .sfaq-a p{font-size:.98rem; line-height:1.55}
  .sfaq-src{margin-top:.6rem; opacity:.6}

/* ---- mobile homepage: less copy, one screen per idea (owner directive 2026-08-31) ---- */
@media (max-width:639px){
  /* the lead paragraph carries the intro alone; the three statements are desktop copy */
  .intro .statements{display:none}
  /* the process section is desktop-only; its nav entries go with it */
  .process{display:none}
  #menu .m-mask:has(a[href="#process"]){display:none}
  footer li:has(> a[href="#process"]){display:none}
  /* services: one title and the accordion, no photo, no split headline */
  #services .svc-left{display:none}
  #services .svc-right h2{font-size:clamp(2.6rem,12vw,3.4rem); margin-bottom:1.1rem}
  /* impact: compact rows with one stat each so the section reads in one screen */
  .impx-card{padding:1rem 1.1rem; min-height:0}
  .impx-t{font-size:1.05rem; margin-bottom:.35rem}
  .impx-stats .impx-stat + .impx-stat{display:none}
  .impx-stat b{font-size:1.15rem}
  .impx-more{padding:1rem 1.1rem}
  /* briefings: two cards is enough on a phone */
  .ins-cards .ins-card:nth-child(n+3){display:none}
}

/* ---- the call above the footer: the clip runs in a wide band, the hands reach
       in from both sides, and the target sits in the gap between them ---- */
/* the block owns the green and the clip. isolation gives the blended clip a
   backdrop of its own to composite against, and the clip runs the full height
   so the hands carry on down behind the footer instead of stopping at a seam */
/* nothing is cropped: the block opens a band above the call exactly as tall as
   the slice that used to be cut off, so the whole 16:9 frame is on screen and
   the clip keeps its position relative to the ring and the footer. 31% of a
   16:9 frame is 17.4375% of the width, and min-height keeps the block at least
   as tall as the frame on wide screens. */
.endblock{position:relative; isolation:isolate; overflow:hidden;
          min-height:56.25vw; padding-top:17.4375%;
          display:flex; flex-direction:column; background:var(--teal-deep)}
/* the call band is transparent now; the block behind it carries the green */
/* the call keeps its natural height so the ring stays where the fingers point.
   On the inner pages the footer sits outside the block, and any spare height
   used to stretch this band and drag the ring away from the fingertips. */
/* the section's height and the word's position are both derived from the clip's
   geometry: the fingertip line sits at 50.3% of a 56.25vw-tall frame, minus the
   17.4375vw band the block opens above this section — 10.85vw from its top.
   Tying the word to that line directly keeps it on the fingertips at every
   width, where flow centring drifts as soon as the font-size clamp caps out. */
.cta-hands{position:relative; z-index:1; flex:0 0 auto; height:21.7vw;
           color:var(--paper); padding:0 clamp(1rem,3vw,2.5rem)}
.cta-hands .ch-inner{position:absolute; left:50%; top:11.5vw; transform:translate(-50%,-50%)}
/* the clip is delivered on pure black; screen drops the black and keeps only the
   light of the hands, which is what an alpha channel would have given us. The
   crop is pushed past the lower right so the generator's watermark never shows. */
/* the clip renders at its own 16:9 across the whole block, slid so the pointing
   finger meets the ring. Nothing clips it, so the arms run on into the footer. */
.ch-film{position:absolute; left:0; top:0; width:100%; height:auto;
         pointer-events:none; z-index:0; mix-blend-mode:screen}
/* the call: Let's Keybridge. above one plain business-inquiry card, centred on the
   line the fingers point at. Nothing to discover: the card says what it is. */
.ch-lets{font-family:var(--display); font-size:clamp(2.6rem,6vw,5rem); font-weight:500;
         letter-spacing:.01em; line-height:1; margin-bottom:1.6rem; text-align:center}
.ch-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center}
.bi-card{background:color-mix(in srgb, var(--ink) 55%, transparent); border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
         padding:1.6rem 1.8rem; max-width:26rem; width:100%; display:flex; flex-direction:column; gap:.9rem}
.bic-label{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 65%, transparent)}
.bi-card p{font-size:.95rem; line-height:1.45; margin:0}
.bic-links{display:flex; flex-direction:column; gap:.45rem}
.bic-links a{color:var(--paper); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
             text-transform:uppercase; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--paper) 25%, transparent);
             padding-bottom:.35rem; width:fit-content}
.bic-links a:hover{border-color:var(--paper)}
.bic-open{align-self:flex-start; background:var(--paper); color:var(--ink); border:0; cursor:pointer;
          font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
          padding:.75rem 1.1rem; margin-top:.2rem}
.bic-open:hover{background:var(--white)}
@media (max-width:639px){
  /* on a phone the frame is only 56vw tall, so it needs no band above it: the
     clip drops a touch instead, and the whole frame still fits. The fingertip
     line is then (6.4% + 50.3%) of 56.25vw = 31.9vw from the section top. */
  .cta-hands{padding:0 1rem; height:auto; min-height:56vw}
  .cta-hands .ch-inner{position:relative; left:auto; top:auto; transform:none; padding:16vw 0 3rem}
  .endblock{padding-top:0; min-height:59.9vw}
  .ch-film{width:100%; left:0; transform:translateY(6.4%)}
  .ch-lets{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .ch-fill, .ch-ring{transition:none}
}

/* ---- the plain footer: four columns, no motion ---- */
.foot{background:var(--teal-deep); color:var(--paper); padding:4rem clamp(1rem,3vw,2.5rem) 1.4rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; margin-bottom:3.5rem}
.fmark2{width:56px; height:auto; color:var(--paper); display:block; margin-bottom:1.1rem}
.fcell p{font-size:.92rem; line-height:1.5; margin:0 0 1rem; max-width:34ch;
         color:color-mix(in srgb, var(--paper) 85%, transparent)}
.fcell .faddr{color:color-mix(in srgb, var(--paper) 65%, transparent)}
.flabel{display:block; margin-bottom:1rem; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
        color:color-mix(in srgb, var(--paper) 55%, transparent)}
.fcell ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem}
.fcell ul a{color:var(--paper); text-decoration:none; font-size:.95rem; line-height:1.35}
.fcell ul a:hover{text-decoration:underline; text-underline-offset:3px}
.foot-bar2{display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; font-size:.64rem;
           letter-spacing:.1em; text-transform:uppercase; opacity:.7;
           border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding-top:1.2rem}
.flegal2{display:flex; gap:1.6rem}
.foot-bar2 a{color:var(--paper); text-decoration:none}
.foot-bar2 a:hover{opacity:.7}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .foot-grid{grid-template-columns:1fr; gap:2rem} .foot{padding-top:3rem} }

/* services page: one plain title over the hero image */
.sv-solo{position:relative; z-index:2; color:var(--paper); font-size:clamp(3rem,9vw,8rem);
         font-weight:500; letter-spacing:.01em; line-height:1; align-self:end; padding:0 0 2.5rem;
         grid-column:1 / -1}

/* ---- the services scroll: black ground, sticky index left, sticky image centre,
       entries brightening as they reach the reading line. Where the reference
       goes white, this one goes green: the active index item fills teal, and the
       ground eases from black to the brand green as the last service passes. ---- */
.svcscroll{background:#0B100E; color:var(--paper); padding:6rem clamp(1rem,3vw,2.5rem)}
.ss-grid{display:grid; grid-template-columns:15rem minmax(280px,1fr) 1.4fr; gap:clamp(1.5rem,3vw,3.5rem); align-items:start}
.ss-rail{position:sticky; top:22vh}
.ss-label{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
          color:color-mix(in srgb, var(--paper) 55%, transparent);
          border-bottom:1px solid color-mix(in srgb, var(--paper) 25%, transparent); padding-bottom:.7rem; margin-bottom:.4rem}
.ss-index{list-style:none; margin:0; padding:0}
.ss-index li{padding:.55rem .6rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
             color:color-mix(in srgb, var(--paper) 60%, transparent); cursor:pointer;
             border-bottom:1px solid color-mix(in srgb, var(--paper) 10%, transparent);
             transition:background-color .25s, color .25s}
.ss-index li.on{background:var(--teal); color:var(--paper)}
/* the frame is fixed and 16:9, like the images themselves; the six stack inside
   it and the section divider wipes the next one in as the line passes — the
   image is cut at the line, exactly like the reference */
.ss-media{position:sticky; top:max(16vh, calc(50vh - 11rem)); margin:0; width:100%;
          aspect-ratio:16/9; overflow:hidden}
.ss-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
              filter:saturate(.85); display:block}
.ss-list{display:flex; flex-direction:column}
/* compact entries, the reference's density: about two and a half services per
   desktop screen. The divider line runs left across the image column (--lx is
   set from the measured column width), so the same line that separates the text
   is the line that cuts the image. */
.ss-item{min-height:40vh; padding:2.4rem 0 2.8rem; display:flex; flex-direction:column;
         position:relative; opacity:.28; transition:opacity .45s var(--e-out)}
.ss-item + .ss-item::before{content:""; position:absolute; top:0; height:1px;
         left:calc(-1 * var(--lx, 0px)); right:0; z-index:3;
         background:color-mix(in srgb, var(--paper) 30%, transparent)}
.ss-item:first-child{padding-top:0}
.ss-item.on{opacity:1}
.ss-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem}
.ss-t{font-size:clamp(1.5rem,2.3vw,2.1rem); font-weight:600; letter-spacing:.03em;
      text-transform:uppercase; line-height:1.05; margin:0 0 .45rem}
.ss-line{font-size:clamp(.95rem,1.2vw,1.05rem); font-weight:500; margin:0;
         color:color-mix(in srgb, var(--paper) 80%, transparent)}
.ss-body{font-size:.95rem; line-height:1.55; max-width:52ch; margin:2rem 0 1.2rem;
         color:color-mix(in srgb, var(--paper) 72%, transparent)}
.ss-more{color:var(--paper); text-decoration:none; font-size:.72rem; letter-spacing:.08em;
         text-transform:uppercase; align-self:flex-end}
.ss-more:hover{color:var(--teal)}
/* the pixel pictogram: assembles dot by dot when its service takes the line */
.ss-ico{flex:0 0 auto}
.ss-ico svg{display:block; width:clamp(44px,4.5vw,64px); height:auto; overflow:visible}
.ss-ico rect{fill:var(--paper); opacity:.12; transition:opacity .5s}
.ss-item.on .ss-ico rect{opacity:1}
@media (max-width:900px){
  .ss-grid{display:block}
  .ss-rail,.ss-media{display:none}
  .svcscroll{padding:3.5rem 1rem}
  /* the reference's mobile pattern: icon left, title and line right, a small
     forward arrow at the right edge; tapping opens body, pill CTA and image */
  .ss-item{opacity:1; padding:1.7rem 0; min-height:0; cursor:pointer}
  .ss-item + .ss-item::before{left:0}
  .ss-head{flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:1.1rem;
           position:relative; padding-right:2rem}
  .ss-head::after{content:"\2193"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
                  font-family:var(--mono); font-size:.85rem;
                  color:color-mix(in srgb, var(--paper) 55%, transparent); transition:transform .3s var(--e-out)}
  .ss-item.open .ss-head::after{transform:translateY(-50%) rotate(180deg)}
  .ss-ico{display:block}
  .ss-ico svg{width:38px}
  .ss-ico rect{opacity:1}
  .ss-t{font-size:1.25rem; margin-bottom:.3rem}
  .ss-line{font-size:.9rem}
  .ss-body,.ss-more,.ss-mimg{display:none}
  .ss-item.open .ss-body{display:block; margin:1.3rem 0 1.4rem}
  .ss-item.open .ss-more{display:block; text-align:center; border:1px solid color-mix(in srgb, var(--paper) 45%, transparent);
                         border-radius:999px; padding:.85rem 1rem; align-self:stretch; margin-bottom:1.4rem}
  .ss-item.open .ss-mimg{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
}
/* the per-item image exists only for the mobile accordion */
@media (min-width:901px){ .ss-mimg{display:none} }

/* ---- footer v2: the big call, then the plain corporate block ----
   Let's Keybridge. at poster size on paper; resting the pointer on it opens the
   green circle that follows the cursor and names the action. Below it, the
   minimal footer: three columns, one legal bar, nothing clever. */
.foot2{background:var(--paper); color:var(--ink); padding:0 clamp(1rem,3vw,2.5rem) 1.4rem;
       border-top:1px solid var(--line)}
.lb{position:relative; display:block; width:100%; background:none; border:0; cursor:pointer;
    color:var(--ink); text-align:center; padding:clamp(3rem,7vw,6rem) 0 clamp(1rem,2vw,2rem); overflow:visible}
.lb-t{font-family:var(--display); font-weight:500; font-size:clamp(3.4rem,12vw,11rem);
      letter-spacing:.01em; line-height:1; display:block}
/* three layers over the ink copy: the green disc, the paper letters clipped to
   the disc (so whatever the circle covers turns white and stays readable), and
   the label riding on top of both */
.lb-t{position:relative; z-index:5}
.lb-t2{position:absolute; inset:0; color:var(--paper); pointer-events:none;
       clip-path:circle(0px at 50% 50%)}
.lb-circle{position:absolute; left:0; top:0; width:11rem; height:11rem; border-radius:50%;
           background:var(--teal-deep); pointer-events:none;
           transform:translate(-50%,-50%) scale(0); transition:transform .45s var(--e-out); z-index:3;
           will-change:transform}
.lb-cl{position:absolute; left:0; top:0; width:11rem; height:11rem; display:flex; align-items:center;
       justify-content:center; text-align:center; color:var(--paper); font-family:var(--mono);
       font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.5;
       pointer-events:none; transform:translate(-50%,-50%) scale(0);
       transition:transform .45s var(--e-out); z-index:6; will-change:transform;
       /* difference keeps the label readable on both grounds: dark where it
          crosses an inverted paper letter, light on the green disc */
       mix-blend-mode:difference}
.lb:hover .lb-circle, .lb:focus-visible .lb-circle,
.lb:hover .lb-cl, .lb:focus-visible .lb-cl{transform:translate(-50%,-50%) scale(1)}
.lb-tap{display:none; text-align:center; margin:0 0 2.5rem; font-size:.72rem; letter-spacing:.1em}
.f2-grid{display:grid; grid-template-columns:1.1fr 1fr 1.3fr; gap:3rem;
         padding:3.5rem 0 4rem; border-top:1px solid var(--line)}
.f2-label{display:block; margin-bottom:1rem; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
          color:var(--muted)}
.f2-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem}
.f2-col a{color:var(--ink); text-decoration:none; font-size:1.25rem; font-weight:500}
.f2-col a:hover{text-decoration:underline; text-underline-offset:3px}
.f2-plain{color:var(--muted); font-size:1.05rem}
.f2-bar{display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap;
        border-top:1px solid var(--line); padding-top:1.3rem; font-size:.74rem;
        letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.f2-legal{display:flex; gap:1.6rem}
.f2-bar a{color:var(--muted); text-decoration:none}
.f2-bar a:hover{color:var(--ink)}
@media (max-width:900px){
  .f2-grid{grid-template-columns:1fr 1fr}
}
.f2-mnav{display:none}
@media (max-width:639px){
  .lb-circle,.lb-cl,.lb-t2{display:none}
  .lb{padding:2.2rem 0 .3rem}
  .lb-tap{display:block; margin-bottom:1.6rem}
  .f2-grid{display:none}
  .f2-mnav{display:block; border-top:1px solid var(--line); padding:1.6rem 0 1.8rem}
  .f2-mnav ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr;
              gap:1rem 1.2rem}
  .f2-mnav a{color:var(--ink); text-decoration:none; font-size:1.3rem; font-weight:500}
  .f2-bar{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  .lb-circle{transition:none; left:50%!important; top:38%!important}
}

/* ---- the record: the dawn after the hero. The dark dome fades through the
       greens into paper (their black-to-blue-to-white, in our colours), the
       words light from teal to ink as you scroll, the left column holds while
       the right runs, and the three numbers are the real record. ---- */
.rec{position:relative; padding:0 clamp(1rem,3vw,2.5rem) 5rem;
     background:linear-gradient(180deg, rgba(234,232,226,0) 0, rgba(234,232,226,0) 82vh, var(--paper) 96vh)}
/* the dawn: transparent over the stripped hero, the dark green building and
   breaking into white — one smooth ramp, no bands */
.rec::before{content:""; position:absolute; left:0; right:0; top:0; height:112vh; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,64,61,0) 0%, rgba(7,64,61,.38) 20%, rgba(7,64,61,.85) 34%,
    #07403D 45%, #2E6B64 56%, #9DBAB4 66%, #E9ECE7 75%, var(--paper) 83%)}
.rec-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.1fr;
          gap:clamp(2rem,5vw,6rem); padding-top:92vh}
.rec-left{align-self:start; position:sticky; top:var(--recl-top, 55vh)}
.rec-img{margin:0 0 2.2rem; width:min(15rem,42vw)}
.rec-img img{width:100%; height:auto; display:block; filter:saturate(.85)}
.rec-motto{font-family:var(--display); font-weight:600; text-transform:uppercase;
           font-size:clamp(2.1rem,3.9vw,3.9rem); letter-spacing:.02em; line-height:1.04; margin:0}
.rec-right{max-width:42rem; margin-left:auto; width:100%}
.rec-p{font-size:clamp(1.3rem,1.85vw,1.8rem); line-height:1.45; margin:0 0 1.8rem}
.rec-cta{display:inline-block; color:var(--ink); text-decoration:none; font-size:.72rem;
         letter-spacing:.08em; text-transform:uppercase; margin:0.6rem 0 6rem}
.rec-cta:hover{color:var(--teal)}
.rec-label{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
           color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:.7rem}
.rec-stats{display:flex; flex-direction:column}
.dp{padding:2.4rem 0 2rem; border-bottom:1px solid var(--line)}
.dp b{display:block; font-family:var(--display); font-weight:600; font-size:clamp(4.8rem,10vw,9.6rem);
      line-height:.95; letter-spacing:0; font-variant-numeric:tabular-nums}
.dp span{display:block; margin-top:.6rem; font-size:1rem; color:var(--deep)}
/* words start unlit (teal on the dark, muted on paper) and turn ink on scroll */
.rec .w{color:var(--teal); transition:none}
@media (max-width:900px){
  .rec-grid{display:block; padding-top:66vh}
  .rec-left{position:static; margin-bottom:2.4rem}
  .rec::before{height:60vh}
  .rec-motto{font-size:2.1rem}
  .rec-cta{margin-bottom:3.5rem}
  .dp b{font-size:3.6rem}
}

/* ---- footer v3, the monument: nav columns, the ask block, then Keybridge set
       edge to edge in Bruno Ace SC — ink fitted to the exact content width ---- */
.foot3{background:var(--teal-deep); color:var(--paper); padding:4.5rem clamp(1.2rem,3.5vw,3rem) 1.2rem}
.f3-top{display:grid; grid-template-columns:minmax(16rem,1.1fr) auto; gap:3rem; align-items:stretch;
        justify-content:space-between; margin-bottom:clamp(4rem,9vh,7rem)}
.f3-cols{display:grid; grid-template-columns:repeat(4,max-content); gap:clamp(2rem,4.5vw,5rem); justify-self:end}
/* the brand cell stretches to the columns: the mark's top sits on the label
   line, the sentence's last line sits on the last link */
.f3-brand{max-width:30rem; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem}
.f3-markbig{flex:1 1 0; min-height:0; height:0; display:flex; align-items:flex-start; color:var(--paper)}
.f3-markbig svg{height:100%; width:auto; display:block}
.f3-brand p{margin:0 0 2.5px; font-size:.98rem; line-height:1.55; color:color-mix(in srgb, var(--paper) 75%, transparent)}
@media (max-width:1000px){ .f3-markbig{flex:0 0 auto; height:5.5rem} .f3-markbig svg{height:5.5rem} .f3-brand{gap:1.2rem} }
.f3-lock{display:inline-flex; align-items:center; font-family:var(--display); font-weight:500; font-size:2.6rem;
         letter-spacing:0; line-height:1; color:var(--paper)}
.f3-lock svg{height:1.149em; width:auto; display:block; margin:0 -.166em; overflow:visible}
.f3-soc{display:inline-flex; align-items:center; gap:.5rem}
.f3-soc svg{width:13px; height:13px; opacity:.85}
.f3-h{display:block; font-family:var(--mono); font-weight:400; font-size:.64rem; letter-spacing:.16em;
       text-transform:uppercase; color:color-mix(in srgb, var(--paper) 62%, transparent); margin-bottom:1.2rem}
.f3-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.f3-col a{color:color-mix(in srgb, var(--paper) 72%, transparent); text-decoration:none; font-size:.98rem}
.f3-col a:hover{color:var(--paper)}
.f3-ask{justify-self:end; width:100%; max-width:17rem; display:flex; flex-direction:column; gap:.7rem; align-items:stretch}
.f3-ask .f3-h{text-align:center}
.f3-askbtn{position:relative; display:flex; align-items:center; justify-content:center; color:var(--paper); text-decoration:none; font-size:.92rem;
           border:1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius:999px;
           padding:.72rem 1rem; transition:background .25s, color .25s}
.f3-askbtn:hover{background:var(--paper); color:var(--ink)}
.f3-askbtn .lg{position:absolute; left:1.15rem; top:50%; transform:translateY(-50%); width:15px; height:15px; transition:color .25s}
.f3-askbtn:hover .lg{color:var(--lgc)}
.f3-markwrap{overflow:hidden; margin-bottom:1.6rem}
.f3-mark{display:block; font-family:'Bruno Ace SC', var(--display); font-weight:400;
         line-height:.92; white-space:nowrap; color:var(--paper); font-size:120px}
.f3-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
        border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent); padding-top:1.1rem;
        font-size:.82rem; color:color-mix(in srgb, var(--paper) 62%, transparent)}
.f3-lang{display:inline-flex; align-items:center; gap:.45rem}
.f3-legal{display:flex; gap:1.6rem}
.f3-bar a{color:inherit; text-decoration:none}
.f3-bar a:hover{color:var(--paper)}
@media (max-width:1000px){ .f3-top{grid-template-columns:1fr} .f3-cols{justify-self:start; grid-template-columns:1fr 1fr; gap:2rem 3rem} }
@media (max-width:560px){ .f3-cols{grid-template-columns:1fr 1fr; gap:1.8rem 1.5rem}
  .foot3{padding-top:6.5rem}
  .f3-bar{justify-content:flex-start} }

/* corporate website: the consequence frame, two halves on one hairline */
.cw-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
          padding:2.5rem clamp(1rem,3vw,2.5rem) 4rem; max-width:75rem}
.cw-tag{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
        margin-bottom:1.2rem; opacity:.6}
.cw-half{border-top:1px solid currentColor; padding-top:1.4rem}
.cw-half.rv{opacity:0; transform:translateY(1.4rem); transition:opacity .7s var(--e-out), transform .7s var(--e-out)}
.cw-half.rv-2{transition-delay:.15s}
.cw-half.rv.in{opacity:1; transform:none}
.cw-half p{font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.5; margin:0 0 1.2rem; max-width:32ch}
@media (max-width:760px){ .cw-split{grid-template-columns:1fr; gap:2.2rem} }

/* the vault: how a tender is held, said plainly on a dark plate */
.vault{background:var(--teal-deep); color:var(--paper); padding:.6rem 1.6rem; margin-top:1.4rem}
.v-row{display:grid; grid-template-columns:8.5rem 1fr; gap:1.4rem; padding:1.35rem 0;
       border-bottom:1px solid color-mix(in srgb, var(--paper) 16%, transparent)}
.v-row:last-child{border-bottom:0}
.v-k{font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; padding-top:.25rem;
     color:color-mix(in srgb, var(--paper) 60%, transparent)}
.v-row p{margin:0; font-size:1rem; line-height:1.55}
.v-note{margin:1.3rem 0 0; font-size:.92rem; color:var(--muted); max-width:58ch}
@media (max-width:560px){ .v-row{grid-template-columns:1fr; gap:.4rem} }

/* ---- explore-with pill (header left) ---- */
.xw{display:flex; align-items:center; gap:.5rem; pointer-events:auto; align-self:start; cursor:pointer;
    border:0; background:color-mix(in srgb, var(--ink) 88%, transparent); border-radius:999px;
    padding:.5rem .9rem; width:fit-content; transition:background .25s}
.xw:hover{background:var(--ink)}
.xw-t{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin-right:.2rem}
.xw-chip{display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
         background:color-mix(in srgb, var(--paper) 12%, transparent);
         border:1px solid color-mix(in srgb, var(--paper) 25%, transparent); color:var(--paper)}
.xw-chip svg{width:14px; height:14px; transition:color .25s}
.xw:hover .xw-chip svg, .cq-ask:hover .xw-chip svg{color:var(--lgc)}
.xw:hover .xw-chip, .cq-ask:hover .xw-chip{border-color:var(--lgc)}
@media (max-width:900px){ .xw-t{display:none} .xw{padding:.4rem .5rem} }

/* ---- the burger: three lines, small, right ---- */
.mburger{background:none; border:0; cursor:pointer; width:2.6rem; height:2.6rem; mix-blend-mode:difference;
         display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0}
.mburger i{display:block; width:20px; height:1.5px; background:#fff; transition:transform .3s var(--e-out), opacity .2s}
body.menu-open .mburger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .mburger i:nth-child(2){opacity:0}
body.menu-open .mburger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---- compare + FAQ, above the footer ---- */
.cq{background:var(--teal-deep); color:var(--paper); padding:6rem clamp(1rem,3vw,2.5rem)}
.cq-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(2.5rem,6vw,7rem); align-items:start}
.cq-h{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.02em;
       font-size:clamp(3rem,6.5vw,6rem); line-height:1; margin:0 0 1rem}
.cq-line{font-size:clamp(1rem,1.3vw,1.2rem); color:color-mix(in srgb, var(--paper) 75%, transparent); margin:0 0 2rem}
.cq-ask{display:flex; align-items:center; gap:.55rem; background:color-mix(in srgb, var(--ink) 70%, transparent);
         border:0; cursor:pointer; color:var(--paper); border-radius:999px; padding:.65rem 1.1rem; width:fit-content;
         transition:background .25s}
.cq-ask:hover{background:var(--ink)}
.cq-ask-t{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; margin-right:.3rem}
.cq-copy{background:none; border:0; cursor:pointer; color:color-mix(in srgb, var(--paper) 60%, transparent);
          font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem 0}
.cq-copy:hover{color:var(--paper)}
.cq-list{border:1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius:14px;
          padding:0 1.4rem; background:color-mix(in srgb, var(--ink) 30%, transparent)}
.cq-head{display:grid; grid-template-columns:3rem 1fr auto; gap:1rem; padding:1rem 0;
          font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
          color:color-mix(in srgb, var(--paper) 55%, transparent);
          border-bottom:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.cq-item{border-bottom:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.cq-item:last-child{border-bottom:0}
.cq-q{display:grid; grid-template-columns:3rem 1fr auto; gap:1rem; align-items:center; width:100%;
       background:none; border:0; cursor:pointer; color:var(--paper); text-align:left;
       font-family:var(--sans); font-size:clamp(1rem,1.35vw,1.2rem); font-weight:500; padding:1.15rem 0}
.cq-n{font-size:.72rem; color:color-mix(in srgb, var(--paper) 55%, transparent)}
.cq-x{font-family:var(--mono); font-size:.9rem; opacity:.6; transition:transform .3s var(--e-out)}
.cq-item.open .cq-x{transform:rotate(45deg)}
.cq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--e-inout)}
.cq-item.open .cq-a{grid-template-rows:1fr}
.cq-a > div{overflow:hidden; padding:0 0 0 4rem; max-width:56ch;
             color:color-mix(in srgb, var(--paper) 78%, transparent); font-size:.98rem; line-height:1.55}
.cq-item.open .cq-a > div{padding-bottom:1.3rem}
.cq-a p{margin:0 0 .8rem}
@media (max-width:900px){
  .cq-grid{grid-template-columns:1fr; gap:2.5rem}
  .cq{padding:3.5rem 1rem}
  .cq-a > div{padding-left:0}
}

/* security: the four failures, shut down */
.sec-cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem}
.sec-card{border:1px solid var(--line); padding:1.3rem 1.4rem; background:var(--white)}
.sec-card .mono{display:block; font-size:.66rem; letter-spacing:.12em; color:var(--muted); margin-bottom:.7rem}
.sec-card p{margin:0; font-size:1rem; line-height:1.5}
@media (max-width:640px){ .sec-cards{grid-template-columns:1fr} }


/* ---- the AI panel: explore or compare, engine cards, the prompt to copy ---- */
.aim{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1rem}
.aim[hidden]{display:none}
.aim-veil{position:absolute; inset:0; background:rgba(11,16,14,.72); backdrop-filter:blur(6px)}
.aim-box{position:relative; width:min(60rem,100%); max-height:92vh; overflow:auto; background:#0F1512; color:var(--paper);
         border:1px solid color-mix(in srgb, var(--paper) 14%, transparent); border-radius:22px; padding:2.2rem clamp(1.2rem,3vw,2.6rem) 2.4rem}
.aim-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.8rem}
.aim-h{font-family:'Bruno Ace SC', var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.5rem,3.6vw,2.6rem);
       letter-spacing:.02em; margin:0; line-height:1}
.aim-close{background:none; border:0; color:color-mix(in srgb, var(--paper) 65%, transparent); cursor:pointer;
           font-size:.68rem; letter-spacing:.16em; text-transform:uppercase}
.aim-close:hover{color:var(--paper)}
.aim-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem}
.aim-card{display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding:2rem 1rem 1.6rem; text-decoration:none;
          color:color-mix(in srgb, var(--paper) 80%, transparent); border:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
          border-radius:16px; transition:border-color .25s, background .25s}
.aim-card:hover{border-color:color-mix(in srgb, var(--paper) 45%, transparent); background:color-mix(in srgb, var(--paper) 4%, transparent)}
.aim-card .mono{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}
.aim-tile{display:grid; place-items:center; width:56px; height:56px; border-radius:14px}
.aim-tile svg{width:28px; height:28px}
.aim-tile-gpt{background:#fff; color:#000}
.aim-tile-claude{background:#F1EBE1; color:#D97757}
.aim-tile-pplx{background:#111; color:#22B8CD}
.aim-or{display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 60%, transparent); margin-bottom:.8rem}
.aim-prompt{position:relative; border:1px solid color-mix(in srgb, var(--paper) 14%, transparent); border-radius:16px; padding:1.4rem 1.5rem 4.2rem}
.aim-prompt p{margin:0; font-size:.86rem; line-height:1.7; letter-spacing:.01em; text-transform:none; color:color-mix(in srgb, var(--paper) 85%, transparent)}
.aim-copy{position:absolute; right:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
          background:color-mix(in srgb, var(--paper) 10%, transparent); color:var(--paper); border:0; border-radius:12px;
          padding:.8rem 1.2rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; transition:background .25s}
.aim-copy svg{width:14px; height:14px}
.aim-copy:hover{background:color-mix(in srgb, var(--paper) 18%, transparent)}
@media (max-width:640px){ .aim-cards{grid-template-columns:1fr} .aim-box{padding:1.6rem 1.1rem 1.8rem} .aim-prompt{padding-bottom:4.6rem} }

/* the explore pill steps aside when the footer is on screen on phones, so it never sits on the lockup */
@media (max-width:640px){ body.at-foot .xw{opacity:0; pointer-events:none} .xw{transition:opacity .3s} }


/* ---- the duo: Bruno Ace SC carries navigation and titles; Instrument Sans
       carries everything that has to be read at small size ---- */
.hcols ul.mono li a, .m-link{font-family:var(--display); letter-spacing:.06em}
.hcols ul.mono{font-size:.78rem}
.m-link{font-size:clamp(2rem,5vw,4.2rem); letter-spacing:.04em}
.ss-t, .cq-h, .rec-motto, .aim-h{font-family:var(--display); font-weight:400}
.ss-t{font-size:clamp(1.15rem,1.7vw,1.6rem); letter-spacing:.05em}
.cq-h{font-size:clamp(2.4rem,5vw,4.6rem)}
.rec-motto{font-size:clamp(1.6rem,2.9vw,2.9rem); letter-spacing:.04em; line-height:1.15}
.dp b{font-weight:400}
.lb-t, .f3-lock, .ch-lets{font-weight:400}
.sv-solo{font-size:clamp(2.4rem,7vw,6.2rem); font-weight:400}


/* ---- the ten questions, redesigned: open rows, no card, a real plus that
       turns, the answer easing in ---- */
.cq-list{border:0; border-radius:0; padding:0; background:none; border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent)}
.cq-head{display:none}
.cq-item{border-bottom:1px solid color-mix(in srgb, var(--paper) 22%, transparent); transition:background .3s}
.cq-item.open{background:color-mix(in srgb, var(--ink) 35%, transparent)}
.cq-q{grid-template-columns:3.2rem 1fr 2.2rem; padding:1.35rem .6rem; font-size:clamp(1.05rem,1.5vw,1.35rem); font-weight:500;
      transition:color .25s}
.cq-q:hover{color:var(--white)}
.cq-x{position:relative; width:1.4rem; height:1.4rem; opacity:1; transform:none; transition:transform .45s var(--e-out)}
.cq-x i{position:absolute; left:50%; top:50%; width:14px; height:1.5px; background:currentColor; transform:translate(-50%,-50%)}
.cq-x i:nth-child(2){transform:translate(-50%,-50%) rotate(90deg)}
.cq-item.open .cq-x{transform:rotate(135deg)}
.cq-a{transition:grid-template-rows .55s var(--e-out)}
.cq-a > div{padding-left:3.8rem; padding-right:2.8rem; opacity:0; transform:translateY(-.3rem); transition:opacity .4s ease .1s, transform .45s var(--e-out) .05s}
.cq-item.open .cq-a > div{opacity:1; transform:none; padding-bottom:1.5rem}
.cq-a a{color:var(--paper); text-decoration:underline; text-underline-offset:3px}
@media (max-width:900px){ .cq-a > div{padding-left:0; padding-right:0} .cq-q{grid-template-columns:2.4rem 1fr 2rem} }

/* every title on every page wears the display face; the page stylesheets set
   the sans explicitly, so this rule outranks them on purpose */
h1, h2, h3, .page-title, .bd-title, .me-title, .p-iso h2, .p-iso h3, .pp-h1, .pp-h2,
.im-h1, .vl-head-a, .vl-head-b, .wtitle, .impx-h, .app-h, .sfaq-h, .mb-h, .ins-card h3,
.sv-solo, .sv-row h2{font-family:var(--display)!important; font-weight:400!important; letter-spacing:.01em}

/* Bruno is wide: the long second words on the split heroes are sized to the
   viewport, and every inner hero clears the explore pill at top-left */
html .p-iso .page-title{font-size:clamp(3rem,7.2vw,7.4rem)}
html main.p-vendor-lists .vl-head-a, html main.p-vendor-lists .vl-head-b{font-size:clamp(2.6rem,7vw,7.2rem)}
html .p-mentry .me-title{font-size:clamp(2.8rem,7vw,7.2rem); letter-spacing:.01em}
html main .page-hero{padding-top:5rem!important}
@media (max-width:900px){ html main .page-hero{padding-top:4rem!important} }

/* the burger outranks the old plate rule by id: no plate, no padding, no slide */
#menuBtn.mburger{background:none; color:inherit; padding:0; height:2.6rem; transform:none; transition:none}
#menuBtn.mburger:hover{background:none}
.mbox{mix-blend-mode:difference}
/* contact: the label column keeps the page gutter and clears the explore pill */
html .p-contact .ct-lab{padding-left:clamp(1rem,3vw,2.5rem)}
html .p-contact .ct-hero, html .p-contact .ct-body{padding-top:5rem!important}
/* contact: the px gutter and a top clearance survive the page's section reset */
html main.p-contact section.px{padding:5rem var(--gutter) 0 var(--gutter)!important}
@media (max-width:1023px){ html main.p-contact section.px{padding-top:4rem!important} }
html .p-contact .ct-title{font-size:clamp(2.2rem,5.4vw,5.2rem)!important; letter-spacing:.02em}
/* the contact hero sits left like every inner page, clear of the nav columns */
html .p-contact .ct-hero{text-align:left!important; padding:5.5rem calc(15 * var(--u)) 3rem!important; align-items:flex-start!important}
html .p-contact .ct-lede{margin-left:0!important; text-align:left; max-width:44ch}
html .p-contact .ct-title{max-width:52vw}
html .p-contact .ct-title{margin-left:0!important; margin-right:auto!important; text-align:left!important; max-width:52vw!important}


/* ---- RTL / Arabic edition ----------------------------------------------------------------------
   Foundation for /ar/. Nothing here fires until a document carries dir="rtl", so the English site
   is untouched.

   HOW THE FONTS SWAP. The Latin site reads every face through three custom properties
   (--display, --sans, --mono). Under [dir="rtl"] those three properties are redefined to the Arabic
   stacks, so every existing rule — including the font-family:var(--display)!important title rule
   above — picks up Arabic without being rewritten. Anything that must stay Bruno Ace SC (the Keybridge
   wordmark lockups) carries class="latin", which re-scopes the properties back to Latin and forces
   direction:ltr so the flex lockups do not reverse into "DNO B".

   THE FONT LINK. Each /ar/ page keeps its existing Google Fonts <link> (Bruno Ace SC still draws
   the wordmark) and adds this one immediately after it:

     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500&family=Noto+Kufi+Arabic:wght@500;700&display=swap">

   HOW A PAGE OPTS IN. <html lang="ar" dir="rtl"> — that is the whole switch. Mark the wordmarks:
   class="latin" on .herolock, .ld-lock, .f3-lock, .f3-mark, .lb-t, and on .aim-h only when it still
   reads Keybridge. Wrap Latin runs inside Arabic sentences (emails, URLs, phone numbers) in <span
   class="ltr">.
   ------------------------------------------------------------------------------------------------ */

/* --- 1. the faces ------------------------------------------------------------------------------ */
html[dir="rtl"], [dir="rtl"]{
  /* Noto Kufi Arabic is the display face: geometric, high-contrast, the closest Arabic answer to
     Bruno Ace SC's engineered feel. IBM Plex Sans Arabic carries reading text. */
  --display-ar:"Noto Kufi Arabic","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --sans-ar:"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  /* the Latin stacks, kept whole so .latin can hand them back */
  --display-latin:"Bruno Ace SC","Jost",ui-sans-serif,system-ui,sans-serif;
  --sans-latin:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono-latin:"Fragment Mono",ui-monospace,SFMono-Regular,monospace;
  --display:var(--display-ar);
  --sans:var(--sans-ar);
  /* labels sit on the Arabic sans: Fragment Mono has no Arabic, and when it led the stack its
     wide space glyph survived between Arabic words and made every label look loose */
  --mono:"IBM Plex Sans Arabic","Fragment Mono",ui-monospace,SFMono-Regular,monospace;
}

/* --- 2. the Latin escape hatch ------------------------------------------------------------------ */
/* class="latin" = "this is the Keybridge wordmark". Bruno comes back, and direction:ltr keeps the
   flex lockups (B · mark · ND) in their drawn order. */
[dir="rtl"] .latin,
[dir="rtl"] .herolock,
[dir="rtl"] .ld-lock,
[dir="rtl"] .f3-lock,
[dir="rtl"] .f3-mark,
[dir="rtl"] .lb-t{
  --display:var(--display-latin);
  --sans:var(--sans-latin);
  --mono:var(--mono-latin);
  font-family:var(--display-latin)!important;
  /* Bruno Ace SC ships one weight; without this the Arabic title weight below would inherit in and
     the browser would synthesise a faux-bold wordmark */
  font-weight:400!important;
  direction:ltr;
  unicode-bidi:isolate;
}
/* an Arabic .aim-h reads as a title, not a wordmark, unless it is marked */
[dir="rtl"] .aim-h:not(.latin){font-family:var(--display-ar)}
/* inline Latin inside Arabic prose: emails, URLs, +964 numbers */
[dir="rtl"] .ltr{direction:ltr; unicode-bidi:isolate; font-family:var(--sans-latin)}

/* --- 3. mirroring ------------------------------------------------------------------------------- */
/* Grid and flex follow the inline axis on their own, so the header (pill right, nav mirrored,
   burger left), the hero grid (name cell right), .rec-grid (sticky column right), .ss-grid
   (rail right, list left), .cq-grid, .f3-top (brand right, columns left) and .f3-bar all flip
   with no template changes. Only physical offsets are restated below. */

/* header */
[dir="rtl"] .xw-t{margin-right:0; margin-left:.2rem}
[dir="rtl"] .cq-ask-t{margin-right:0; margin-left:.3rem}
[dir="rtl"] .hcol a{letter-spacing:0}

/* menu panel — enters from the left */
[dir="rtl"] .mpanel{right:auto; left:0; transform:translateX(-101%)}
[dir="rtl"] body.menu-open .mpanel{transform:translateX(0)}
[dir="rtl"] .mpanel hr{transform-origin:right}
[dir="rtl"] .m-link{letter-spacing:0}
[dir="rtl"] #menuBtn{transform:translateX(-101%)}
[dir="rtl"] body.nav-compact #menuBtn,
[dir="rtl"] body.menu-open #menuBtn{transform:translateX(0)}
[dir="rtl"] #menuBtn.mburger{transform:none}

/* hero — the lockup is a block-level flex container, so it fills the h1 and text-align cannot move
   it. It keeps direction:ltr (B · mark · ND must stay in order) and packs to the far edge instead,
   which under RTL is the right. */
[dir="rtl"] .hero h1{text-align:right; letter-spacing:0}
[dir="rtl"] .herolock{justify-content:flex-end}

/* record */
[dir="rtl"] .rec-right{margin-left:0; margin-right:auto}
[dir="rtl"] .rec-motto{letter-spacing:0}

/* services scroll — the divider line reaches RIGHT across the image column */
[dir="rtl"] .ss-item + .ss-item::before{left:0; right:calc(-1 * var(--lx, 0px))}
[dir="rtl"] .ss-t{letter-spacing:0}
@media (max-width:900px){
  [dir="rtl"] .ss-item + .ss-item::before{right:0}
  [dir="rtl"] .ss-head{padding-right:0; padding-left:2rem}
  [dir="rtl"] .ss-head::after{right:auto; left:.2rem}
}

/* compare + FAQ */
[dir="rtl"] .cq-q{text-align:right}
[dir="rtl"] .cq-h{letter-spacing:0}
[dir="rtl"] .cq-a > div{padding-left:2.8rem; padding-right:3.8rem}
@media (max-width:900px){ [dir="rtl"] .cq-a > div{padding-left:0; padding-right:0} }

/* footer v3 — the giant Keybridge is fitted by app.js from canvas ink metrics and a marginLeft, so the
   wordmark and its clip window stay LTR; everything around it mirrors */
[dir="rtl"] .f3-markwrap{direction:ltr}
[dir="rtl"] .f3-mark{text-align:left}
[dir="rtl"] .f3-askbtn .lg{left:auto; right:1.15rem}

/* footer v1/v2 leftovers still used on inner pages */
[dir="rtl"] .fcol ul{padding-left:0; padding-right:1.1rem; border-left:0;
                     border-right:1px solid color-mix(in srgb, var(--paper) 30%, transparent)}
[dir="rtl"] .fcol a, [dir="rtl"] .fplain{transition:padding-right .4s var(--e-out), opacity .2s}
[dir="rtl"] .fcol a::before{content:"\2190"; left:auto; right:0; transform:translateX(.5rem)}
[dir="rtl"] .fcol a:hover{padding-left:0; padding-right:1.4rem}

/* AI panel */
[dir="rtl"] .aim-copy{right:auto; left:1rem}

/* the smaller physical bits, swept */
[dir="rtl"] .acc-head,
[dir="rtl"] .wtitle,
[dir="rtl"] .app-opt,
[dir="rtl"] .m-chip,
[dir="rtl"] .m-opt,
[dir="rtl"] .mb-chip{text-align:right}
[dir="rtl"] .wr-metric{text-align:left}
[dir="rtl"] .mstat{border-left:0; border-right:1px solid color-mix(in srgb, var(--paper) 35%, transparent)}
[dir="rtl"] .file-index li{padding-left:0; padding-right:1rem;
                           border-left:0; border-right:1px solid var(--line)}
[dir="rtl"] .file-index li b{margin-right:0; margin-left:.5rem}
[dir="rtl"] .intro .statements{margin-left:0; margin-right:auto}
[dir="rtl"] .fpanel:nth-child(even){margin-left:0; margin-right:6%}
[dir="rtl"] .pcard:nth-child(2){margin-left:0; margin-right:6%}
[dir="rtl"] .pcard:nth-child(3){margin-right:0; margin-left:3%}
[dir="rtl"] .screen .ph{left:auto; right:.8rem}
[dir="rtl"] .im-list li::before{left:auto; right:0}
[dir="rtl"] .m-tick{left:auto; right:.7rem}
[dir="rtl"] .m-prog{margin-left:0; margin-right:auto}
[dir="rtl"] .impx-go{right:auto; left:1.5rem}
[dir="rtl"] .impx-card:hover .impx-go{transform:translateX(-.3rem)}
[dir="rtl"] .impx-see i{margin-left:0; margin-right:.4rem}
[dir="rtl"] .impx-more:hover .impx-see i{transform:translateX(-.35rem)}
[dir="rtl"] .ins-faq-list a{transition:padding-right .35s var(--e-out)}
[dir="rtl"] .ins-faq-list a:hover{padding-left:0; padding-right:.5rem}
[dir="rtl"] .svc-left::after{right:auto; left:-2rem}
[dir="rtl"] .stairsdiv{left:auto; right:0}
[dir="rtl"] .stairsdiv i{left:auto; right:0; transform-origin:right}

/* inner-page heroes — these live in css/*.css, which loads after this file, so every rule below
   carries one extra class of specificity on purpose */
[dir="rtl"] .bd-title{text-align:left}
@media (min-width:1024px){ [dir="rtl"] .bd-title{text-align:right} }
[dir="rtl"] .p-digital-authority .aid-htitle .page-title{text-align:left}
@media (min-width:1024px){ [dir="rtl"] .p-digital-authority .aid-htitle .page-title{text-align:right} }
html[dir="rtl"] .p-contact .ct-lab{padding-left:0; padding-right:clamp(1rem,3vw,2.5rem)}
html[dir="rtl"] .p-contact .ct-hero{text-align:right!important}
html[dir="rtl"] .p-contact .ct-lede{margin-left:auto!important; margin-right:0!important; text-align:right}
html[dir="rtl"] .p-contact .ct-title{margin-left:auto!important; margin-right:0!important; text-align:right!important}

/* --- 4. Arabic type sizing ---------------------------------------------------------------------- */
/* Kufi runs taller and wider than Bruno at the same em, so every display size drops 8% and the
   titles get air: 1.25 for titles, 1.7 for reading text. Latin letter-spacing is zeroed — it only
   opens gaps between joined Arabic letters. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .page-title, [dir="rtl"] .bd-title, [dir="rtl"] .me-title,
[dir="rtl"] .vl-head-a, [dir="rtl"] .vl-head-b, [dir="rtl"] .wtitle, [dir="rtl"] .sv-solo,
[dir="rtl"] .rec-motto, [dir="rtl"] .cq-h, [dir="rtl"] .ss-t, [dir="rtl"] .m-link,
[dir="rtl"] .aim-h, [dir="rtl"] .impx-h, [dir="rtl"] .app-h, [dir="rtl"] .sfaq-h,
[dir="rtl"] .mb-h, [dir="rtl"] .ins-card h3, [dir="rtl"] .ch-h{
  line-height:1.25; letter-spacing:0;
  /* the Latin edition sets titles to 400; Noto Kufi is loaded at 500/700, and 500 is the weight
     that stands next to Bruno without going bold. Declared rather than left to nearest-match. */
  font-weight:500!important;
}
[dir="rtl"] .latin, [dir="rtl"] .lb-t, [dir="rtl"] .f3-mark, [dir="rtl"] .herolock{line-height:1}

/* The page stylesheets pull Latin titles in with negative tracking (-.025em and friends) because
   Instrument Sans sets wide. Negative tracking closes the gaps Arabic needs between joined letters,
   so it is undone everywhere except the Latin wordmarks. */
[dir="rtl"] :is(h1,h2,h3,h4,h5,
  .page-title,.my-title,.bd-title,.pp-h1,.pp-h2,.pp-cta-h,.pp-lede,.me-title,
  .vl-head-a,.vl-head-b,.ar-title,.ct-title,.ct-lede,.std-h1,.wk-h1,.in-h1,
  .wtitle,.sv-solo,.sv-row h2,.impx-h,.impx-see,.mb-h,.app-h,.sfaq-h,.ins-card h3,
  .acc-head,.cq-qt,.mstat b,.bignums b,.rec-p,.hp-lead):not(.latin){letter-spacing:normal}

/* display sizes, all × .92 */
[dir="rtl"] .hero h1{font-size:clamp(2.76rem,9.57vw,9.66rem)}
@media (max-width:720px){ [dir="rtl"] .hero h1{font-size:clamp(2.39rem,17.94vw,5.15rem); line-height:1.1} }
[dir="rtl"] .m-link{font-size:clamp(1.84rem,4.6vw,3.86rem)}
[dir="rtl"] .ss-t{font-size:clamp(1.06rem,1.56vw,1.47rem)}
@media (max-width:900px){ [dir="rtl"] .ss-t{font-size:1.15rem} }
[dir="rtl"] .cq-h{font-size:clamp(2.21rem,4.6vw,4.23rem)}
[dir="rtl"] .rec-motto{font-size:clamp(1.47rem,2.67vw,2.67rem)}
@media (max-width:900px){ [dir="rtl"] .rec-motto{font-size:1.93rem} }
[dir="rtl"] .aim-h:not(.latin){font-size:clamp(1.38rem,3.31vw,2.39rem)}
[dir="rtl"] .sv-solo{font-size:clamp(2.21rem,6.44vw,5.7rem)}
[dir="rtl"] .wtitle{font-size:clamp(2.39rem,5.98vw,5.52rem)}
[dir="rtl"] .acc-head{font-size:clamp(1.38rem,2.58vw,2.21rem)}

/* inner-page titles — same values as the Latin edition × .92, restated per page scope */
[dir="rtl"] .p-iso .page-title{font-size:clamp(2.76rem,6.62vw,6.81rem); line-height:1.25}
[dir="rtl"] main.p-vendor-lists .vl-head-a,
[dir="rtl"] main.p-vendor-lists .vl-head-b{font-size:clamp(2.39rem,6.44vw,6.62rem); line-height:1.25}
[dir="rtl"] .p-mentry .me-title{font-size:clamp(2.58rem,6.44vw,6.62rem); line-height:1.25}
html[dir="rtl"] .p-contact .ct-title{font-size:clamp(2.02rem,4.97vw,4.78rem)!important; line-height:1.25}
[dir="rtl"] .p-plain .pp-h1{font-size:clamp(1.93rem,5.15vw,4.05rem); line-height:1.25}
[dir="rtl"] .p-digital-authority .page-title,
[dir="rtl"] .p-work .page-title,
[dir="rtl"] .p-insights .page-title,
[dir="rtl"] main.p-vendor-lists .page-title{font-size:calc(47.84 * var(--u)); line-height:1.25}
[dir="rtl"] .p-iso .my-title,
[dir="rtl"] main.p-vendor-lists .my-title{font-size:calc(73.6 * var(--u)); line-height:1.25}
[dir="rtl"] .bd-title{font-size:calc(2.99 * var(--u))}
@media (min-width:1024px){
  [dir="rtl"] .p-digital-authority .page-title,
  [dir="rtl"] .p-work .page-title,
  [dir="rtl"] .p-insights .page-title,
  [dir="rtl"] main.p-vendor-lists .page-title,
  [dir="rtl"] .p-iso .my-title,
  [dir="rtl"] main.p-vendor-lists .my-title{font-size:calc(147.2 * var(--u)); line-height:1.25}
  [dir="rtl"] .bd-title{font-size:calc(9.2 * var(--u))}
}

/* reading text */
[dir="rtl"] body, [dir="rtl"] p,
[dir="rtl"] .rec-p, [dir="rtl"] .ss-body, [dir="rtl"] .ss-line, [dir="rtl"] .cq-line,
[dir="rtl"] .cq-a > div, [dir="rtl"] .f3-brand p, [dir="rtl"] .f3-col a, [dir="rtl"] .dp span,
[dir="rtl"] .page-text, [dir="rtl"] .p-plain .pp-body, [dir="rtl"] .p-plain .pp-lede,
[dir="rtl"] .p-plain .pp-note, [dir="rtl"] .v-row p, [dir="rtl"] .sec-card p{
  line-height:1.7;
}
/* labels: Latin tracking is wrong for Arabic, but a trace keeps the caps rows from closing up */
[dir="rtl"] .mono, [dir="rtl"] .ss-label, [dir="rtl"] .rec-label, [dir="rtl"] .f3-h,
[dir="rtl"] .ss-index li, [dir="rtl"] .cq-head, [dir="rtl"] .f2-label, [dir="rtl"] .flabel{
  letter-spacing:.02em;
}
/* numerals keep the Latin display face — Bruno draws the digits, Kufi catches anything Arabic */
[dir="rtl"] .dp b, [dir="rtl"] .mstat b, [dir="rtl"] .bignums b,
[dir="rtl"] .impx-fig b, [dir="rtl"] .im-figs dd{font-family:"Bruno Ace SC",var(--display-ar)}
/* ---- end RTL / Arabic edition ---- */
/* iso page: the px gutter survives the page's section reset (same fault as contact) */
html main.p-iso section.px{padding-left:var(--gutter)!important; padding-right:var(--gutter)!important}

/* ar/impact-*.html (six impact studies): .im-figs dd carries letter-spacing:-.025em from the Latin
   edition and was missed by the RTL negative-tracking sweep above, so the Arabic state-change words
   ("المجموعة كلها", "مُجتازة") close up at their joins. */
[dir="rtl"] .im-figs dd{letter-spacing:normal}

/* ---- RTL fixes · ar/vendor-registration.html (css/prequalification.css) -------------------------
   The page stylesheet loads after styles.css, so each rule below carries an extra class of
   specificity on purpose. Only physical offsets are restated; the grids mirror on their own. */
[dir="rtl"] main.p-vendor-lists .vl-head-a{text-align:right}
[dir="rtl"] main.p-vendor-lists .vl-title{text-align:right}
[dir="rtl"] main.p-vendor-lists .vl-stairs i{
  margin-left:0; margin-right:calc(-1 * var(--pad)); transform-origin:right center;
}
@media (min-width:1024px){
  [dir="rtl"] main.p-vendor-lists .vl-num-block{
    border-left:0; border-right:1px solid var(--teal);
    padding-left:0; padding-right:calc(118.94 * var(--u));
  }
  [dir="rtl"] main.p-vendor-lists .vl-num-mask{left:auto; right:calc(-144 * var(--u))}
  [dir="rtl"] main.p-vendor-lists .vl-btn-mask{left:auto; right:calc(-13.14 * var(--u))}
}

/* ---- RTL fixes · ar/tender-preparation.html + ar/bookkeeping-filing.html (css/tender-engine.css) */
[dir="rtl"] .p-bid-desk .bd-stairs i{
  margin-left:0; margin-right:calc(-1 * var(--gut)); transform-origin:100% 50%;
}
[dir="rtl"] .p-bid-desk .bd-num{text-align:right}
@media (min-width:1024px){
  [dir="rtl"] .p-bid-desk .bd-outputs{
    border-left:0; border-right:1px solid var(--teal);
    padding-left:0; padding-right:calc(1.875 * var(--u));
  }
  [dir="rtl"] .p-bid-desk .bd-num-panel{
    border-left:0; border-right:1px solid var(--teal);
    padding-left:0; padding-right:8.26vw;
  }
  [dir="rtl"] .p-bid-desk .bd-num-bleed{right:auto; left:100%}
  [dir="rtl"] .p-bid-desk .bd-mkt-tile{
    border-left:0; border-right:1px solid var(--teal);
    padding-left:0; padding-right:calc(1.875 * var(--u));
  }
}

/* ar/iso-9001…iso-39001 (the 14 ISO standard pages): physical offsets that live in
   css/iso-standard.css and have no logical-property equivalent there */
[dir="rtl"] .p-isostd .std-table{text-align:right}

/* ---- RTL fixes · ar/privacy.html, ar/terms.html (page-plain hairline lists) ---- */
[dir="rtl"] .p-plain .pp-list li{padding-left:0; padding-right:1.1rem}
[dir="rtl"] .p-plain .pp-list li::before{left:auto; right:0}

/* ---- RTL fixes · ar/impact.html ---- */
[dir="rtl"] .p-work .wk-count{margin-left:0; margin-right:calc(20 * var(--u))}
/* the hover flare opens gaps between joined Arabic letters, so the Arabic card keeps its tracking */
[dir="rtl"] .ik-card:hover .ik-go{letter-spacing:0}

/* ---- RTL fixes · ar/insights.html ---- */
[dir="rtl"] .p-insights .in-count{margin-left:0; margin-right:calc(18 * var(--u))}
@media (min-width:1024px){
  [dir="rtl"] .p-insights .in-meta{padding-left:0; padding-right:calc(22 * var(--u))}
  [dir="rtl"] .p-insights .in-thumb{margin-right:0; margin-left:calc(20 * var(--u))}
}
/* ar/iso-* : .std-note is a full sentence in .mono; Fragment Mono has no Arabic, so only its
   very wide spaces would survive. Arabic sans, mono size/colour kept. */
[dir="rtl"] .p-isostd .std-note{font-family:var(--sans-ar)}

/* ---- RTL type fit · ar/impact.html, ar/insights.html ----
   these four run tight (line-height 1-1.15 with negative tracking) because Instrument Sans sets
   wide; Arabic needs the air back or the marks on line 2 hit the baseline of line 1 */
[dir="rtl"] .p-insights .in-title{line-height:1.35; letter-spacing:normal}
[dir="rtl"] .p-insights .in-date{letter-spacing:0}
[dir="rtl"] .p-work .wk-cta-line{line-height:1.3; letter-spacing:normal}
[dir="rtl"] .ik-title{line-height:1.35; letter-spacing:normal}
[dir="rtl"] .ik-figs dd{letter-spacing:normal}

/* ---- RTL page fixes (Arabic edition: ar/index.html, ar/contact.html) --------------------------- */
/* ar/index.html — the record counters. The <b> is wrapped in .ltr so "80+" keeps its order, but
   direction:ltr also pins that block's text to the left while the Arabic label under it sits
   right. Re-pin the number to the right so number and label share an edge, as in the English. */
[dir="rtl"] .rec .dp > .ltr{display:block}
[dir="rtl"] .rec .dp b{text-align:right}

/* ar/contact.html — css/contact.css draws the divider between the aside and the form as the form
   column's border-left. Under RTL that edge is the column's OUTER edge, so it is flipped. */
@media (min-width:1024px){
  html[dir="rtl"] .p-contact .ct-form-col{border-left:0; border-right:1px solid var(--teal)}
}
/* ar/contact.html — the required-field alert is absolutely positioned at left:0 */
html[dir="rtl"] .p-contact .ct-alert{left:auto; right:0}
/* ar/contact.html — a +964 number must never break across two lines */
html[dir="rtl"] .p-contact .ct-link .ltr{white-space:nowrap}

/* ---- RTL page fixes · ar/iso-certification, ar/corporate-website, ar/company-registration ------
   The three page stylesheets (css/compliance.css, css/digital-authority.css, css/market-entry.css)
   load after this file and carry physical offsets. Every rule below adds one [dir="rtl"] of
   specificity so it wins on weight, not on order. Nothing here fires on the English edition. */

/* ar/iso-certification.html — the hero word mirrors: mobile left, desktop right */
[dir="rtl"] .p-iso .hero-title{ text-align:left }
@media (min-width:1024px){ [dir="rtl"] .p-iso .hero-title{ text-align:right } }
/* ar/iso-certification.html — the sector ledger: index number, sight, marker bar and the row wash */
[dir="rtl"] .p-iso .sx-n{ padding-left:0; padding-right:calc(32 * var(--u)) }
[dir="rtl"] .p-iso .sx-sight{ left:auto; right:calc(2 * var(--u)) }
[dir="rtl"] .p-iso .sx-in::after{ left:auto; right:calc(-8 * var(--u)) }
[dir="rtl"] .p-iso .sx-in::before{
  background:linear-gradient(270deg, rgba(11,92,88,.44), rgba(11,92,88,.08) 54%, transparent 84%) }
[dir="rtl"] .p-iso .sec-list a{ transition:padding-right .35s var(--e-out) }
[dir="rtl"] .p-iso .sec-list a:hover{ padding-left:0; padding-right:.6rem }

/* ar/corporate-website.html — the search-result rows carry their accent on the reading edge */
[dir="rtl"] .dm-r{ border-left:0; border-right:2px solid var(--teal) }
[dir="rtl"] .p-digital-authority .aid-ptitle{ text-align:right }
@media (min-width:1024px){
  [dir="rtl"] .p-digital-authority .aid-step{ padding:0 calc(15 * var(--u)) 0 calc(50 * var(--u)) }
  [dir="rtl"] .p-digital-authority .aid-meta{ padding-right:0; padding-left:calc(12 * var(--u)) }
  [dir="rtl"] .p-digital-authority .aid-panel-src{
    border-left:0; padding-left:0;
    border-right:1px solid rgba(234,232,226,.16);
    padding-right:calc(40 * var(--u));
  }
}
/* ar/corporate-website.html — the consequence diagram. The fork path is written by the page script
   from measured geometry and always runs x=0 -> x=W, so the drawn svg is flipped whole; every dot,
   stem and connector offset mirrors with it. */
[dir="rtl"] .p-digital-authority .cwd-fork{ transform:scaleX(-1) }
[dir="rtl"] .p-digital-authority .cwd-root{ padding-left:0; padding-right:24px }
[dir="rtl"] .p-digital-authority .cwd-dot-root{ left:auto; right:-2px }
[dir="rtl"] .p-digital-authority .cwd-stem{ transform-origin:right center }
[dir="rtl"] .p-digital-authority .cwd-node{ padding:0 24px 26px 0 }
[dir="rtl"] .p-digital-authority .cwd-node > .cwd-dot{ left:auto; right:0 }
[dir="rtl"] .p-digital-authority .cwd-line{ left:auto; right:5px }
@media (min-width:1024px){
  [dir="rtl"] .p-digital-authority .cwd-root{ padding-right:0 }
  [dir="rtl"] .p-digital-authority .cwd-dot-root{ right:auto }
  [dir="rtl"] .p-digital-authority .cwd-rootline{ left:0; right:19px; transform-origin:right center }
  [dir="rtl"] .p-digital-authority .cwd-node{ padding:0 0 0 calc(26 * var(--u)) }
  [dir="rtl"] .p-digital-authority .cwd-node-end{ padding-right:0; padding-left:calc(30 * var(--u)) }
  [dir="rtl"] .p-digital-authority .cwd-line{ left:0; right:11px; transform-origin:right center }
}

/* ar/company-registration.html — the stat wall rules sit between tiles on the reading side */
[dir="rtl"] .p-mentry .me-iraq{ right:auto; left:clamp(0rem,4vw,4rem) }
[dir="rtl"] .p-mentry .sw-tile{ padding:1.6rem 0 1.6rem 1.4rem }
[dir="rtl"] .p-mentry .sw-tile + .sw-tile{
  border-left:0; border-right:1px solid var(--line); padding-right:1.4rem }
@media (max-width:1023px){
  [dir="rtl"] .p-mentry .sw-tile{ padding:1.4rem 0 1.4rem 1.2rem }
  [dir="rtl"] .p-mentry .sw-tile + .sw-tile{ border-right:0; padding-right:0 }
  [dir="rtl"] .p-mentry .sw-tile:nth-child(even){
    border-left:0; border-right:1px solid var(--line); padding-right:1.2rem }
}
@media (max-width:560px){
  [dir="rtl"] .p-mentry .sw-tile{ padding:1.3rem 0 }
  [dir="rtl"] .p-mentry .sw-tile:nth-child(even){ border-right:0; padding-right:0 }
  [dir="rtl"] .p-mentry .me-iraq{ left:-4rem }
}
/* ar/company-registration.html — the stages table reads from the right */
[dir="rtl"] .p-mentry .me-tbl th{ text-align:right; padding:.6rem 0 .6rem 1.5rem }
[dir="rtl"] .p-mentry .me-tbl td{ padding:1rem 0 1rem 1.5rem }
[dir="rtl"] .p-mentry .me-tbl th:last-child,
[dir="rtl"] .p-mentry .me-tbl td:last-child{ padding-right:0; padding-left:0 }

/* ---- RTL fixes · ar/vendor-lists-iraq.html, ar/reading-a-tender-in-full.html,
   ar/why-bids-fail-on-paperwork.html, ar/what-buyers-find-when-they-search.html (css/article.css) ----
   The article stylesheet loads after this file and sets Latin-tight leading and physical offsets
   under main.p-article, so every rule below carries [dir="rtl"] + main.p-article and wins on weight.
   Nothing here fires on the English edition. */
[dir="rtl"] main.p-article .ar-title{line-height:1.3; font-size:calc(33 * var(--u))}
@media (min-width:1024px){ [dir="rtl"] main.p-article .ar-title{font-size:calc(42 * var(--u))} }
[dir="rtl"] main.p-article .ar-lede-in{line-height:1.4; letter-spacing:normal}
[dir="rtl"] main.p-article .prose h2{line-height:1.4}
[dir="rtl"] main.p-article .prose p{line-height:1.7}
[dir="rtl"] main.p-article .prose ul li,
[dir="rtl"] main.p-article .prose ol li{line-height:1.8}
/* the ↳ list glyph points into the text, so it mirrors */
[dir="rtl"] main.p-article .ar-mk{transform:scaleX(-1); margin-top:.65em}
[dir="rtl"] main.p-article .prose ul li span{margin-left:0; margin-right:calc(10 * var(--u))}
[dir="rtl"] main.p-article .prose ol{padding-left:0; padding-right:calc(26 * var(--u))}
[dir="rtl"] main.p-article .prose ol li{padding-left:0; padding-right:calc(6 * var(--u))}
[dir="rtl"] main.p-article .prose th,
[dir="rtl"] main.p-article .prose td{text-align:right; padding-right:0; padding-left:calc(12 * var(--u))}
[dir="rtl"] main.p-article .ar-faq-h,
[dir="rtl"] main.p-article .ar-related-h{line-height:1.3}
[dir="rtl"] main.p-article .ar-faq .acc-head{line-height:1.5; letter-spacing:normal}
[dir="rtl"] main.p-article .ar-faq .acc-body p{line-height:1.7}
[dir="rtl"] main.p-article .ar-rel-t{line-height:1.5; letter-spacing:normal}
@media (min-width:1024px){ [dir="rtl"] main.p-article .ar-rel-d{text-align:left} }
[dir="rtl"] main.p-article .m{letter-spacing:.02em}
/* ar/vendor-lists-iraq, ar/reading-a-tender-in-full, ar/why-bids-fail-on-paperwork,
   ar/what-buyers-find-when-they-search — three more article-template faults, RTL-scoped:
   1. css/article.css resets every section's padding with a (0,3,2) selector that beats its own
      .ar-head / .px rules (0,2,1), so the title sits under the fixed nav and the page gutter
      collapses (same fault styles.css already patches for contact and iso). Restored on weight.
   2. .prose ul li span{display:block} also catches the inline .ltr spans (ISO, PDF, ChatGPT), which
      dropped onto their own line.
   3. .acc-head is a space-between flex row; a .ltr span inside a question became its own flex item
      and the question tore into three pieces. The head flows as a block and the plus is pinned to
      the far (left) edge on the first line. */
html[dir="rtl"] main.p-article section.px{padding-left:var(--gutter); padding-right:var(--gutter)}
html[dir="rtl"] main.p-article section.ar-head{padding-top:calc(148 * var(--u))}
@media (min-width:1024px){ html[dir="rtl"] main.p-article section.ar-head{padding-top:calc(326 * var(--u))} }
[dir="rtl"] main.p-article .prose ul li .ltr{display:inline; margin:0}
[dir="rtl"] main.p-article .ar-faq .acc-head{display:block; position:relative; padding-left:calc(28 * var(--u))}
[dir="rtl"] main.p-article .ar-faq .acc-head .acc-plus{position:absolute; left:0; top:calc(31 * var(--u)); padding-top:0}

/* ar/vendor-registration, tender-preparation, bookkeeping-filing — bilingual review 2026-09-04:
   page CSS pins these headings to line-height 1, which stacks Arabic marks into the line above */
[dir="rtl"] main.p-vendor-lists .fs-36{line-height:1.25}
[dir="rtl"] main.p-vendor-lists .vl-fig-n{text-align:right}
[dir="rtl"] .p-bid-desk .bd-how-h h2{line-height:1.25}
[dir="rtl"] .p-bid-desk .bd-mkt-v{text-align:right}
[dir="rtl"] .p-bid-desk .bd-sub{line-height:1.55}

/* Arabic nav links: the Latin tracking rule outranked the RTL zero; joined letters must not be spaced */
[dir="rtl"] .hcols ul.mono li a, [dir="rtl"] .hcol a:hover{letter-spacing:0}

/* menu open: the difference-blend burger vanished against the white panel (both editions) */
body.menu-open .mbox{mix-blend-mode:normal}
body.menu-open #menuBtn.mburger i{background:var(--ink)}
/* the fixed burger sat on the first line of the footer paragraph on phones */
@media (max-width:900px){ .f3-brand p{padding-inline-end:3rem} }

/* services opener: the section names itself in the display face before the scroll rail */
.ss-open{margin:0 0 clamp(2.5rem,5vw,4rem); padding-bottom:clamp(1.5rem,3vw,2.5rem);
         border-bottom:1px solid color-mix(in srgb, var(--paper) 25%, transparent);
         display:grid; grid-template-columns:1fr auto; align-items:end; gap:1.5rem}
.ss-open .ss-kicker{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
         color:color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom:1rem}
.ss-open h2{font-size:clamp(2.4rem,5vw,4.6rem); line-height:1; margin:0; text-transform:uppercase; letter-spacing:.02em; color:var(--paper)}
.ss-open p{margin:0; max-width:34ch; font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.5;
         color:color-mix(in srgb, var(--paper) 80%, transparent); padding-bottom:.35em}
@media (max-width:900px){ .ss-open{grid-template-columns:1fr; gap:.9rem; margin-bottom:1.5rem} .ss-open h2{font-size:2.2rem} }
[dir="rtl"] .ss-open h2{letter-spacing:0; line-height:1.2}
[dir="rtl"] .ss-open .ss-kicker{letter-spacing:0}

/* ar/services.html — the intro staircase is start-anchored (margin-left:-15px, LTR origin), so
   under RTL the three paper stairs stopped 15px short of the right edge and left a teal strip
   where the English bleeds off the left; mirrored here, and they now grow from the right */
[dir="rtl"] main.p-services .sv-stair{margin-left:0; margin-right:calc(-15*var(--px)); transform-origin:right center !important}

/* ---- language bar: one calm offer of the other edition, rises after the loader, remembered ---- */
.lbar{position:fixed; left:50%; bottom:1.1rem; transform:translate(-50%,140%); z-index:60; opacity:0;
      display:flex; align-items:center; gap:1rem; padding:.5rem .55rem .5rem 1.1rem;
      background:color-mix(in srgb, var(--ink) 92%, transparent); color:var(--paper);
      border:1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius:999px;
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 12px 40px rgba(0,0,0,.28);
      transition:transform .7s var(--e-out), opacity .5s}
.lbar.in{transform:translate(-50%,0); opacity:1}
.lbar.out, body.menu-open .lbar, html.m-lock .lbar, body.at-foot .lbar{transform:translate(-50%,140%); opacity:0; pointer-events:none}
.lbar-k{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
        color:color-mix(in srgb, var(--paper) 58%, transparent)}
.lbar-t{font-size:.86rem; white-space:nowrap}
.lbar-opts{display:inline-flex; border:1px solid color-mix(in srgb, var(--paper) 30%, transparent); border-radius:999px; overflow:hidden}
.lbar-opts a, .lbar-opts button{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; padding:.5rem .95rem; line-height:1;
        color:var(--paper); background:none; border:0; text-decoration:none; cursor:pointer}
.lbar-opts .on{background:var(--paper); color:var(--ink)}
.lbar-opts a:hover{background:color-mix(in srgb, var(--paper) 14%, transparent)}
.lbar-x{background:none; border:0; color:color-mix(in srgb, var(--paper) 58%, transparent); font-size:1.1rem; line-height:1; padding:.25rem .45rem; cursor:pointer}
.lbar-x:hover{color:var(--paper)}
[dir="rtl"] .lbar{padding:.5rem 1.1rem .5rem .55rem}
[dir="rtl"] .lbar-k, [dir="rtl"] .lbar-opts a, [dir="rtl"] .lbar-opts button{letter-spacing:0}
@media (max-width:640px){
  .lbar{left:.75rem; right:.75rem; bottom:.75rem; transform:translateY(140%); flex-wrap:wrap; gap:.55rem .8rem; border-radius:1.25rem; padding:.85rem .9rem .8rem}
  .lbar.in{transform:none}
  .lbar.out, body.menu-open .lbar, html.m-lock .lbar, body.at-foot .lbar{transform:translateY(140%)}
  .lbar-t{white-space:normal; flex:1 1 100%}
  .lbar-x{margin-inline-start:auto}
}
/* footer switch: a two-cell segment, the current edition filled */
.f3-bar .f3-lang{display:inline-flex; gap:0; border:1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius:999px; overflow:hidden;
        font-family:var(--mono); font-size:.66rem; letter-spacing:.06em}
.f3-bar .f3-lang a, .f3-bar .f3-lang span{padding:.42rem .85rem; line-height:1; color:inherit; text-decoration:none}
.f3-bar .f3-lang .on{background:var(--paper); color:var(--ink)}
.f3-bar .f3-lang a:hover{color:var(--paper); background:color-mix(in srgb, var(--paper) 12%, transparent)}
[dir="rtl"] .f3-bar .f3-lang{letter-spacing:0}
/* the Arabic word on English pages: Fragment Mono has no Arabic, so give the label a real face and no tracking */
.lbar [lang="ar"], .f3-bar .f3-lang [lang="ar"]{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif; letter-spacing:0; font-size:.84rem}
.lbar-k [lang="ar"]{font-size:.8rem}

/* ar/iso-37001, ar/iso-39001, ar/iso-50001, ar/iso-55001: an isolated Latin run (a standard code such as ISO 37001) must not break mid-token in headings, glance tiles, accordion heads and the eyebrow. Scoped to short-run containers so long .ltr lists in body copy still wrap. */
[dir="rtl"] :is(.std-h1,.std-h2,.std-eyebrow,.acc-head,.gcell dd,.rc-code) .ltr{white-space:nowrap}

/* ar/iso-9001, ar/iso-14001, ar/iso-45001, ar/iso-22000, ar/iso-29001 (and the other ar/iso-* twins that share
   css/iso-standard.css) — that sheet loads after this one and its .p-isostd selectors outrank the RTL sweep,
   so Arabic titles kept the Latin leading and tracking. Noto Kufi marks need the air the Latin titles do not,
   and Latin tracking opens the joins in Kufi/Plex Arabic. */
[dir="rtl"] .p-isostd .std-h1{line-height:1.25; letter-spacing:0}
[dir="rtl"] .p-isostd .std-h2{line-height:1.28; letter-spacing:0}
[dir="rtl"] .p-isostd .std-cta-h{line-height:1.25; letter-spacing:0}
[dir="rtl"] .p-isostd .rc-code{line-height:1.25}
[dir="rtl"] .p-isostd .std-h2 .ltr{white-space:nowrap}
[dir="rtl"] .p-isostd .std-btn,
[dir="rtl"] .p-isostd .gcell dt,
[dir="rtl"] .p-isostd .std-table th,
[dir="rtl"] .p-isostd .std-table-3 td:nth-child(2),
[dir="rtl"] .p-isostd .std-table-3 td[data-l]::before,
[dir="rtl"] .p-isostd .rc-go{letter-spacing:.02em}

/* Keep short ISO designations together. Comma-separated Latin company lists
   are marked by the shared shell and must wrap inside Arabic reading columns. */
[dir="rtl"] .p-isostd .ltr:not(.ltr-list){white-space:nowrap}
[dir="rtl"] .ltr-list{white-space:normal;overflow-wrap:anywhere}

/* ar/iso-certification (css/compliance.css loads after this sheet and pins line-height:1 on every .p-iso heading,
   outranking the RTL h2/h3 sweep above). Noto Kufi's ascender/descender box is taller than Instrument Sans at the
   same em, so wrapped Arabic headings overlapped line on line at 1440 and 390. Latin edition untouched. */
[dir="rtl"] .p-iso h2, [dir="rtl"] .p-iso h3,
[dir="rtl"] .p-iso .ap-h h2, [dir="rtl"] .p-iso .st-h h2, [dir="rtl"] .p-iso .rec-h h2,
[dir="rtl"] .p-iso .pj-name{line-height:1.25}

/* ar/found-vs-chosen, ar/empty-seat-ai-answers, ar/ai-engine-citation-patterns — bilingual review 2026-09-04:
   css/article.css sets the mono label role to 12/14.4 (a Latin metric). IBM Plex Sans Arabic descenders and the
   hamza of "الاستراتيجية" spill 2px past that box on the meta line and on the related-list category and date
   (measured scrollHeight 16 vs clientHeight 14). Every other Arabic block on these pages runs 1.3 or more. */
[dir="rtl"] main.p-article .ar-meta span,
[dir="rtl"] main.p-article .ar-rel-c,
[dir="rtl"] main.p-article .ar-rel-d{line-height:1.45}

/* ar/corporate-website: css/digital-authority.css sets the hero titles to line-height .98 and the closing
   "ما الذي يتغيّر" h2 to 150/160 (.94) for Instrument Sans. In Noto Kufi the descenders of يجده and بوجود
   landed on the line below at 1440 and the seven-line wrap at 390 stacked marks into the line above. */
html[dir="rtl"] .p-digital-authority .aid-htitle .page-title,
html[dir="rtl"] .p-digital-authority .aid-hcopy-line{line-height:1.15}
[dir="rtl"] .p-digital-authority .aid-ptitle h2{line-height:1.2}

/* ar/arabic-that-converts, ar/ai-referral-conversion-economics, ar/generative-engine-optimization-guide: SplitText
   (mask:'lines') sizes each line mask from the line box and clips it, so at line-height 1.3 the subscript dots of
   Noto Kufi Arabic (the ي in «مشتري الخليج») fell past the clip at 390. Same selector as the RTL article-title rule
   above so this later declaration wins on source order; the Latin edition keeps its own line-height. */
[dir="rtl"] main.p-article .ar-title{line-height:1.42}

/* ---- language segment: one rounded thumb under the current edition; it leans on hover and slides on click ---- */
.lseg{position:relative; display:inline-flex; align-items:stretch; padding:3px; gap:2px; border-radius:999px;
      border:1px solid color-mix(in srgb, currentColor 38%, transparent); isolation:isolate}
.lseg-thumb{position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:999px; background:var(--paper); z-index:0;
      transition:left .42s cubic-bezier(.2,.75,.2,1), width .42s cubic-bezier(.2,.75,.2,1), transform .35s cubic-bezier(.2,.75,.2,1)}
.lseg.lean-r .lseg-thumb{transform:translateX(5px)}
.lseg.lean-l .lseg-thumb{transform:translateX(-5px)}
.lseg > a, .lseg > span:not(.lseg-thumb), .lseg > button{position:relative; z-index:1; display:inline-flex; align-items:center;
      padding:.42rem .95rem; border-radius:999px; line-height:1; background:none; border:0; cursor:pointer;
      color:color-mix(in srgb, var(--paper) 74%, transparent); text-decoration:none; transition:color .3s}
.lseg > .on{color:var(--ink); cursor:default}
.lseg > a:hover{color:var(--paper)}
.lseg.moving > .on{color:color-mix(in srgb, var(--paper) 74%, transparent)}
.lseg.moving > .going{color:var(--ink)}
.f3-bar .f3-lang.lseg{gap:2px; overflow:visible}
.f3-bar .f3-lang.lseg a, .f3-bar .f3-lang.lseg span:not(.lseg-thumb){padding:.42rem .95rem; color:color-mix(in srgb, var(--paper) 74%, transparent); background:none}
.f3-bar .f3-lang.lseg .on{background:none; color:var(--ink)}
.f3-bar .f3-lang.lseg a:hover{background:none; color:var(--paper)}
.f3-bar .f3-lang.lseg.moving .on{color:color-mix(in srgb, var(--paper) 74%, transparent)}
.f3-bar .f3-lang.lseg.moving .going{color:var(--ink)}
.lbar-opts.lseg{border-color:color-mix(in srgb, var(--paper) 30%, transparent)}
.lbar-opts.lseg a, .lbar-opts.lseg button{padding:.5rem 1rem}
.lbar-opts.lseg .on{background:none; color:var(--ink)}
.lbar-opts.lseg a:hover{background:none}
@media (prefers-reduced-motion:reduce){ .lseg-thumb{transition:none} }
/* the current cell must win over the generic cell colour: element+class selectors, declared last */
.lseg > span.on, .lseg > button.on, .lseg > a.on, .f3-bar .f3-lang.lseg span.on, .lbar-opts.lseg button.on{color:var(--ink)}
.lseg.moving > span.on, .lseg.moving > button.on, .f3-bar .f3-lang.lseg.moving span.on, .lbar-opts.lseg.moving button.on{color:color-mix(in srgb, var(--paper) 74%, transparent)}
.lseg.moving > a.going, .f3-bar .f3-lang.lseg.moving a.going, .lbar-opts.lseg.moving a.going{color:var(--ink)}

/* ---- language segment v2: labels below, thumb above carrying an ink copy that counter-slides ---- */
.lseg > a, .lseg > span:not(.lseg-thumb), .lseg > button, .f3-bar .f3-lang.lseg a, .f3-bar .f3-lang.lseg span:not(.lseg-thumb),
.lseg > span.on, .lseg > button.on, .f3-bar .f3-lang.lseg span.on, .lbar-opts.lseg button.on,
.lseg.moving > span.on, .lseg.moving > button.on, .lseg.moving > a.going, .f3-bar .f3-lang.lseg.moving span.on, .f3-bar .f3-lang.lseg.moving a.going{
  z-index:0; color:color-mix(in srgb, var(--paper) 74%, transparent)}
.lseg > a:hover, .f3-bar .f3-lang.lseg a:hover{color:var(--paper); background:none}
.lseg-thumb{z-index:1; overflow:hidden; pointer-events:none; transform:translateX(var(--tl,0px))}
.lseg.lean-r .lseg-thumb{--tl:5px; transform:translateX(5px)} .lseg.lean-l .lseg-thumb{--tl:-5px; transform:translateX(-5px)}
.lseg-copy{position:absolute; top:0; left:0; height:100%; display:inline-flex; align-items:stretch; gap:2px; white-space:nowrap;
  transform:translateX(calc(var(--cx,0px) + var(--lean,0px)));
  transition:transform .42s cubic-bezier(.2,.75,.2,1)}
.lseg.lean-r .lseg-copy{--lean:-5px; transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.lseg.lean-l .lseg-copy{--lean:5px; transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.lseg-k{display:inline-flex; align-items:center; padding:.42rem .95rem; line-height:1; color:var(--ink); font:inherit; letter-spacing:inherit}
.lbar-opts.lseg .lseg-k{padding:.5rem 1rem}
.lseg-k[lang="ar"]{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif; letter-spacing:0; font-size:.84rem}
[dir="rtl"] .lseg-k{letter-spacing:0}
@media (prefers-reduced-motion:reduce){ .lseg-copy{transition:none} }
/* the footer's generic span padding must not reach the thumb or its copy */
.f3-bar .f3-lang.lseg .lseg-thumb, .f3-bar .f3-lang.lseg .lseg-copy{padding:0}
.f3-bar .f3-lang.lseg .lseg-k{padding:.42rem .95rem}
.f3-bar .f3-lang.lseg span.lseg-copy, .f3-bar .f3-lang.lseg span.lseg-thumb{padding:0}
.f3-bar .f3-lang.lseg span.lseg-k{color:var(--ink)}

/* ---- RTL motion QA fixes — ar/vendor-lists-iraq, ar/reading-a-tender-in-full,
   ar/impact-crude-transport-full-stack, ar/impact-pharma-market-entry,
   ar/arabic-that-converts, ar/generative-engine-optimization-guide ---- */

/* #menu sits at z-index:40, the same layer main's text gets from
   `main :is(h1,h2,h3,h4,p,li,...){position:relative; z-index:40}`, and #menu comes
   first in the DOM — so the article title and lede painted straight over the open
   menu panel and buried the links. 44 lifts the panel clear of the page content
   while staying under .site-head (45), so the burger's X still paints on top. */

/* .lseg-k uses `font:inherit`, which in the floating language bar resolves to the
   bar's own 16px rather than the .72rem its sibling labels are set to by
   `.lbar-opts a,.lbar-opts button`. The ink copy inside the thumb therefore rendered
   ~39% larger than the paper label underneath and broke the colour crossover. */
[dir="rtl"] .lbar .lbar-opts.lseg .lseg-k{font-size:.72rem}

/* ---- RTL motion QA fix 3 — same six pages (ar/vendor-lists-iraq,
   ar/reading-a-tender-in-full, ar/impact-crude-transport-full-stack,
   ar/impact-pharma-market-entry, ar/arabic-that-converts,
   ar/generative-engine-optimization-guide) ----
   __lseg() clones each cell's innerHTML plus its lang/dir attributes into the
   thumb's ink copy, but not its class — so the footer's <a class="ltr" lang="en">
   kept `[dir="rtl"] .ltr{font-family:var(--sans-latin)}` while its ink twin fell
   back to the Arabic stack and came out 1.47px narrow. Re-apply the .ltr treatment
   through the lang attribute that does get copied. */
[dir="rtl"] .lseg-k[lang="en"]{direction:ltr; unicode-bidi:isolate; font-family:var(--sans-latin)}

/* ---- MOTION QA, Arabic editions: ar/contact, ar/security, ar/impact, ar/insights, ar/privacy,
   ar/terms, ar/iso-9001, ar/iso-45001, ar/iso-55001 ----
   The open menu was being painted through. #menu carries z-index:40 and the broad rule
   `main :is(a, button, input, textarea, select, label)` (and the heading/paragraph half of the
   same selector) also carries z-index:40; because #menu precedes <main> in the document, every
   title, lede, crumb and link in main tied on z-index and won on source order, so page copy
   showed on top of the white panel at both 1440 and 390. Lifting #menu one step clears main's 40
   while staying under .site-head (z-index:45), which must keep painting the burger/X above the
   panel. Same defect exists on the Latin editions; fixing it there is the orchestrator's call. */

/* ---- RTL motion QA fix 4 — same six pages ----
   Fix 3 must not reach the floating bar. Only the FOOTER segment's English cell
   carries class="ltr"; the bar's cell is built by app.js without it and computes
   var(--mono) (which RTL re-heads with IBM Plex Sans Arabic). Giving the bar's ink
   copy the Latin stack made it 1.6px wide against its own paper label, so put that
   one back on the same footing as the cell it has to register with. */
[dir="rtl"] .lbar .lbar-opts.lseg .lseg-k[lang="en"]{font-family:var(--mono); direction:rtl; unicode-bidi:normal}

/* ============================================================================
   Arabic motion QA — ar/services, ar/iso-certification, ar/vendor-registration
   (shared language segment also touches the other Arabic pages, same defect).
   Every rule below is [dir="rtl"]-scoped: the Latin edition is untouched.
   ========================================================================= */

/* ---- 1. language segment: the ink copy inside the thumb must be the same
   type as the paper labels underneath it, or the thumb reveals a bigger word
   than the one it is sliding off. SplitText-style copy inherits from .lseg,
   so in the bar it came out at the inherited 16px against 11.52px cells
   (English 84.1px wide vs an 69.5px cell) and in the footer the English copy
   lost the Latin face that class="ltr" gives the cell it mirrors. ---- */
[dir="rtl"] .lbar-opts.lseg .lseg-k{font-family:var(--mono); font-size:.72rem; letter-spacing:0}
[dir="rtl"] .f3-bar .f3-lang.lseg .lseg-k[lang="en"]{direction:ltr; unicode-bidi:isolate; font-family:var(--sans-latin)}

/* ---- 2. ar/services: the row titles run SplitText with mask:'lines', which
   clips each line to its line box. At line-height 1 that box is shorter than
   Noto Kufi Arabic's ink, so the bowls of ع ج ق ي and the ة were sliced flat
   ("الموقع الإلكتروني / للشركة", "التسجيل في / قوائم الموردين"). Latin sits inside 1.0;
   Arabic needs ~1.58, so half comes from leading and half from widening the clip alone, which
   keeps the row rhythm close to the Latin edition instead of adding 36px a row. ---- */
[dir="rtl"] .p-services .sv-col h2{line-height:1.3}
[dir="rtl"] .p-services .sv-col h2 div{overflow-clip-margin:.2em}

/* ---- 3. ar/services: the intro lead ran at line-height 1.1, so the شدّة and
   ضمّة of one line landed on the descenders of the line above. ---- */
[dir="rtl"] .p-services .sv-lead{line-height:1.4}

/* ---- 4. ar/vendor-registration: "أين تُسجّلون" lost the hamza of أ and the
   ضمّة over the ت off the top of its line mask at 1.25. ---- */
[dir="rtl"] main.p-vendor-lists .vl-title.my-title div{overflow-clip-margin:.14em}

/* ---- 5. shallower bowl clipping on the two section headings that sit at
   1.25 with a line mask: the ق of "قطاعكم" / "قائمة" came out flat-bottomed. */
[dir="rtl"] main.p-vendor-lists .vl-appr-h.fs-36 div{overflow-clip-margin:.06em}
[dir="rtl"] .p-iso .st-h div{overflow-clip-margin:.06em}

/* ---- MOTION QA, Arabic editions: ar/contact, ar/impact ----
   SplitText (mask:'lines') gives each line a wrapper with overflow:clip sized from the line box,
   and Noto Kufi Arabic paints outside that box where Instrument Sans never does: the tanween
   fathatan over the final alif of «احجزوا اجتماعاً» was sliced off the top of the .ct-title mask,
   and the descending tail of the ر in «الأثر» off the bottom of the .wk-h1 mask. Leading cannot
   fix these two — the ink runs past the font's own ascent/descent, so the overshoot survives even
   at line-height 1.9. overflow-clip-margin widens the clip region alone, so the reveal still
   masks the line and no box moves by a pixel. Measured: .12em zeroes both at 1440 and 390. */
html[dir="rtl"] main.p-contact .ct-title > div{overflow-clip-margin:.12em}
html[dir="rtl"] main.p-work .wk-h1-t > div{overflow-clip-margin:.12em}

/* ---- Motion QA follow-through, both editions (2026-09-04) ----
   #menu now sits at z-index:44 in the base rule above (was 40, tied with main's text layer
   and lost on source order), so the RTL-only lifts appended earlier were removed.
   With the panel open, the header column nav still painted over it at 1440: reuse the
   scroll-compact retract so the links slide away and the burger X stays on top. */
body.menu-open .hcol a{transform:translateY(-112%)}
body.menu-open .hcol .hline{transform:scaleY(0); transition-delay:0s}
/* The thumb's ink copy inherited the bar's 16px instead of the .72rem the paper cells get. */
.lbar-opts.lseg .lseg-k{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em}
[dir="rtl"] .lbar-opts.lseg .lseg-k{letter-spacing:0}

/* ---- Service hero stairs, RTL mirror for the two pages that had none (2026-09-04) ----
   Both grids place the stair at the inline-start edge (grid line 1 = right under RTL) but the
   start-gutter bleed (margin-left:-15u) and the scale origin stayed on the left, so the panel
   sat at the right and grew out of its own left edge, i.e. from the middle of the hero.
   !important beats the inline origin GSAP writes on the corporate-website stairs. */
[dir="rtl"] .p-iso .stair{margin-left:0; margin-right:calc(-1 * var(--gutter)); transform-origin:100% 50% !important}
[dir="rtl"] .p-digital-authority .aid-stair{margin-left:0; margin-right:calc(-1 * var(--gutter)); transform-origin:100% 50% !important}
/* company-registration: app.js used to write transform-origin:left inline, which beat the RTL rule */
[dir="rtl"] .stairsdiv i{transform-origin:100% 50% !important}
[dir="rtl"] main.p-vendor-lists .vl-stairs i{transform-origin:100% 50% !important}
[dir="rtl"] .p-bid-desk .bd-stairs i{transform-origin:100% 50% !important}
[dir="rtl"] main.p-services .sv-stair{transform-origin:100% 50% !important}

/* ---- Menu button: hidden while the header column nav is on screen, in on every page
   and both editions once the nav has retracted (body.nav-compact, scrollY > 20). The
   .6s delay lets the columns finish leaving before the burger arrives. (2026-09-04) ---- */
#menuBtn.mburger{opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .3s var(--e-out), transform .4s var(--e-out), visibility 0s .3s}
body.nav-compact #menuBtn.mburger, body.menu-open #menuBtn.mburger{opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .45s var(--e-out) .6s, transform .6s var(--e-out) .6s, visibility 0s .6s}
body.menu-open #menuBtn.mburger{transition-delay:0s}
@media (prefers-reduced-motion:reduce){ #menuBtn.mburger, body.nav-compact #menuBtn.mburger, body.menu-open #menuBtn.mburger{transition:none} }

/* ---- Mobile hero handoff: one short dawn that is fully resolved before the record's
   plate, instead of a 60vh ramp over a section that stays transparent to 82vh (which
   let the raw hero show through as a stripe). (2026-09-04) ---- */
@media (max-width:900px){
  .rec{background:linear-gradient(180deg, rgba(234,232,226,0) 0, var(--paper) 38vh)}
  .rec::before{height:40vh; background:linear-gradient(180deg, rgba(7,64,61,0) 0%, rgba(7,64,61,.55) 28%, #2E6B64 48%, #9DBAB4 70%, var(--paper) 100%)}
  .rec-grid{padding-top:48vh}
}

/* ---- Compare + the ten questions: one rounded dark slab on the paper, a shade off the
   footer with a quiet vertical gradient; the questions in a thin-bordered rounded panel
   with a header row, a small mono plus at the far edge. (2026-09-04) ---- */
.cq-wrap{background:var(--teal-deep); padding:clamp(.5rem,1.2vw,1.25rem)}
.cq{
  margin:0; border-radius:clamp(1.4rem,2.6vw,2.6rem);
  background:linear-gradient(180deg, #11534E 0%, #0B4541 55%, #083F3B 100%); color:var(--paper);
  padding:clamp(3.5rem,8vh,6.5rem) clamp(1.4rem,4vw,4rem) clamp(4rem,9vh,7rem);
}
.cq-grid{grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,7vw,8rem); align-items:start}
.cq-left{background:none; border-radius:0; padding:0; display:block}
.cq-h{margin:0 0 1.1rem}
.cq-line{color:color-mix(in srgb, var(--paper) 62%, transparent); margin:0 0 2rem}
.cq-ask{background:color-mix(in srgb, var(--paper) 7%, transparent); border:1px solid color-mix(in srgb, var(--paper) 12%, transparent); padding:.75rem 1.2rem .75rem 1.35rem; margin:0}
.cq-ask:hover{background:color-mix(in srgb, var(--paper) 12%, transparent)}
.cq-list{
  background:color-mix(in srgb, var(--paper) 2.5%, transparent);
  border:1px solid color-mix(in srgb, var(--paper) 13%, transparent); border-radius:clamp(1.2rem,2vw,1.9rem);
  padding:0 1.3rem 0 1rem;
}
.cq-head{display:grid; grid-template-columns:3.2rem 1fr 2rem; gap:1rem; align-items:center; padding:1rem .4rem .95rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 42%, transparent); border-bottom:1px solid color-mix(in srgb, var(--paper) 13%, transparent)}
.cq-head span:last-child{text-align:end}
[dir="rtl"] .cq-head{letter-spacing:0}
.cq-item{border-bottom:1px solid color-mix(in srgb, var(--paper) 9%, transparent); transition:background .3s}
.cq-item:last-child{border-bottom:0}
.cq-item.open{background:color-mix(in srgb, var(--paper) 3%, transparent)}
.cq-q{grid-template-columns:3.2rem 1fr 2rem; padding:1.3rem .4rem; font-size:clamp(1rem,1.3vw,1.2rem); font-weight:500}
.cq-n{font-size:.7rem; color:color-mix(in srgb, var(--paper) 42%, transparent)}
.cq-x{width:1.1rem; height:1.1rem; opacity:.55; justify-self:end}
.cq-x i{width:10px; height:1px}
.cq-q:hover .cq-x{opacity:1}
.cq-a > div{padding-left:4.2rem; padding-right:2.6rem; color:color-mix(in srgb, var(--paper) 70%, transparent)}
[dir="rtl"] .cq-a > div{padding-left:2.6rem; padding-right:4.2rem}
@media (max-width:900px){
  .cq-wrap{padding:.5rem}
  .cq{margin:0; padding:3rem 1.1rem 3.5rem}
  .cq-grid{grid-template-columns:1fr; gap:2.5rem}
  .cq-list{padding:0 .9rem 0 .6rem}
  .cq-head, .cq-q{grid-template-columns:2.2rem 1fr 1.6rem}
  .cq-a > div{padding-left:0; padding-right:0}
  [dir="rtl"] .cq-a > div{padding-left:0; padding-right:0}
}

/* ---- Mobile motion audit fixes (2026-09-04) ---- */
/* services accordion on mobile: body, more-link and photo ease open like the FAQ instead of snapping.
   .ss-body is a <p> with inline spans, so max-height carries it rather than grid rows. */
@media (max-width:900px){
  .ss-body, .ss-more, .ss-mimg{display:block; max-height:0; opacity:0; overflow:hidden; margin-top:0; margin-bottom:0;
    transition:max-height .5s var(--e-out), opacity .35s ease, margin .5s var(--e-out)}
  .ss-item.open .ss-body{max-height:18rem; opacity:1; margin:1.3rem 0 1.4rem}
  .ss-item.open .ss-more{max-height:4rem; opacity:1}
  .ss-item.open .ss-mimg{max-height:60vw; opacity:1}
}
/* touch feedback for controls that only had hover states */
.cta-btn:active{background:var(--white); transform:translateY(-1px)}
.im-cta-btn:active{background:var(--paper); color:var(--teal-deep)}
.rec-cta:active{color:var(--teal)}
a.hpanel:active .hp-fill{transform:scaleY(1)}
.hpanel--cta:active .hp-top{opacity:.85}
.acc-item:not(.open) .acc-head:active .acc-plus{transform:rotate(60deg)}
.ss-more:active{color:var(--teal)}
/* tap targets: 40px boxes on touch widths; the segment cells and their ink twins grow together so the thumb still registers */
.lbar-x{min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0; margin:-.45rem -.2rem -.45rem 0}
[dir="rtl"] .lbar-x{margin:-.45rem 0 -.45rem -.2rem}
@media (max-width:900px){
  .lbar-opts.lseg a, .lbar-opts.lseg button, .lbar-opts.lseg .lseg-k{padding-top:.85rem; padding-bottom:.85rem}
  .f3-bar .f3-lang.lseg a, .f3-bar .f3-lang.lseg span:not(.lseg-thumb):not(.lseg-copy){padding-top:.95rem; padding-bottom:.95rem}
  .xw{min-height:40px}
}
.aim-close{padding:.7rem .6rem; margin:-.7rem -.6rem}
/* the burger has no column nav to wait for below 1024px: no delay there */
@media (max-width:1023px){ body.nav-compact #menuBtn.mburger{transition-delay:0s, 0s, 0s} }

/* ---- ONE DESK: the section between the services and the dark zone. Paper ground, three
   plates, the four-step file flow, one call. (2026-09-04) ---- */
.od{background:var(--paper); color:var(--ink); padding:clamp(4.5rem,10vh,8rem) clamp(1rem,3vw,2.5rem) clamp(4rem,9vh,7rem); position:relative; z-index:1}
.od-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.5rem 4rem; align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem)}
.od-k{grid-column:1 / -1; color:var(--teal); font-size:.68rem; letter-spacing:.12em}
.od-h{font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,5vw,4.6rem); line-height:1; margin:0; text-transform:uppercase; letter-spacing:.02em}
[dir="rtl"] .od-h{letter-spacing:0; line-height:1.25; text-transform:none}
.od-lede{margin:0; max-width:36ch; font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.5; color:var(--deep)}
.od-plates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(1.5rem,3vw,3rem); border-top:1px solid var(--ink)}
.od-plate{padding:1.6rem 0 2rem; border-top:0; position:relative}
.od-plate + .od-plate::before{content:""; position:absolute; top:1.6rem; bottom:2rem; inset-inline-start:calc(-1 * clamp(.75rem,1.5vw,1.5rem)); width:1px; background:var(--line)}
.od-n{display:block; color:var(--teal); font-size:.68rem; letter-spacing:.12em; margin-bottom:1.1rem}
.od-t{font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.8rem); line-height:1.05; margin:0 0 .8rem; text-transform:uppercase; letter-spacing:.02em}
[dir="rtl"] .od-t{letter-spacing:0; line-height:1.4; text-transform:none}
.od-plate p{margin:0; font-size:1rem; line-height:1.55; color:var(--deep); max-width:32ch}
.od-plates .rv:nth-child(2){transition-delay:.08s} .od-plates .rv:nth-child(3){transition-delay:.16s}
.od-flow{margin-top:clamp(2rem,4vw,3.5rem); padding-top:1.4rem; border-top:1px solid var(--ink)}
.od-flow-k{display:block; color:var(--muted); font-size:.68rem; letter-spacing:.12em; margin-bottom:1.6rem}
.od-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(1.2rem,2.5vw,2.5rem); position:relative}
.od-steps::before{content:""; position:absolute; top:.55rem; inset-inline:0; height:1px; background:var(--teal); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.4s var(--e-out) .2s}
[dir="rtl"] .od-steps::before{transform-origin:100% 50%}
.od-flow.in .od-steps::before{transform:scaleX(1)}
.od-steps li{position:relative; padding-top:1.6rem}
.od-steps li::before{content:""; position:absolute; top:.25rem; inset-inline-start:0; width:.65rem; height:.65rem; border-radius:50%; background:var(--paper); border:1px solid var(--teal); transition:background .4s ease, transform .5s var(--e-out)}
.od-flow.in .od-steps li::before{background:var(--teal)}
.od-flow.in .od-steps li:nth-child(1)::before{transition-delay:.3s} .od-flow.in .od-steps li:nth-child(2)::before{transition-delay:.6s}
.od-flow.in .od-steps li:nth-child(3)::before{transition-delay:.9s} .od-flow.in .od-steps li:nth-child(4)::before{transition-delay:1.2s}
.od-sn{display:block; color:var(--teal); font-size:.66rem; letter-spacing:.12em; margin-bottom:.6rem}
.od-steps b{display:block; font-weight:600; font-size:1.05rem; line-height:1.3; margin-bottom:.4rem}
.od-steps li > span:last-child{display:block; font-size:.95rem; line-height:1.5; color:var(--muted); max-width:28ch}
.od-cta{margin-top:clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center}
.od-btn{display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:500; padding:1rem 1.6rem; border-radius:999px; transition:background .3s, transform .4s var(--e-out)}
.od-btn:hover, .od-btn:active{background:var(--teal); transform:translateY(-1px)}
.od-arr{display:inline-block; transition:transform .35s var(--e-out)}
.od-btn:hover .od-arr{transform:translateX(4px)}
[dir="rtl"] .od-arr{transform:scaleX(-1)}
[dir="rtl"] .od-btn:hover .od-arr{transform:scaleX(-1) translateX(4px)}
.od-link{color:var(--ink); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--teal) 55%, transparent); text-underline-offset:4px; transition:text-decoration-color .3s}
.od-link:hover{text-decoration-color:var(--teal)}
@media (max-width:900px){
  .od{padding:3.5rem 1rem 3.5rem}
  .od-head{grid-template-columns:1fr; gap:.9rem}
  .od-plates{grid-template-columns:1fr; gap:0}
  .od-plate{padding:1.3rem 0 1.5rem; border-top:1px solid var(--line)}
  .od-plate:first-child{border-top:0}
  .od-plate + .od-plate::before{display:none}
  .od-plates .rv:nth-child(2), .od-plates .rv:nth-child(3){transition-delay:0s}
  .od-steps{grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem}
  .od-steps::before{display:none}
  .od-steps li{padding-top:0; padding-inline-start:1.3rem}
  .od-steps li::before{top:.35rem}
}
@media (max-width:479px){ .od-steps{grid-template-columns:1fr} }

/* ---- IMPACT on the home: the reference's minimal slab, three studies and a see-more
   card, inside the dark zone above the readiness slab. (2026-09-04) ---- */
.imp{
  margin:0 0 clamp(.5rem,1.2vw,1.25rem); border-radius:clamp(1.4rem,2.6vw,2.6rem);
  background:linear-gradient(180deg, #11534E 0%, #0B4541 55%, #083F3B 100%); color:var(--paper);
  padding:clamp(3.5rem,8vh,6.5rem) clamp(1.4rem,4vw,4rem) clamp(3.5rem,8vh,6rem);
}
.imp-h{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(3rem,6.5vw,6rem); line-height:1; margin:0 0 clamp(2rem,4vw,3.5rem)}
[dir="rtl"] .imp-h{letter-spacing:0; line-height:1.2; text-transform:none}
.imp-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.6rem)}
.imp-card{
  position:relative; display:block; min-height:clamp(16rem,26vw,22rem); padding:clamp(1.6rem,3vw,2.8rem);
  border:1px solid color-mix(in srgb, var(--paper) 13%, transparent); border-radius:clamp(1.1rem,1.8vw,1.6rem);
  background:color-mix(in srgb, var(--paper) 2.5%, transparent); color:var(--paper); text-decoration:none;
  transition:border-color .35s var(--e-out), transform .45s var(--e-out), background .35s;
}
.imp-card:hover, .imp-card:active{border-color:color-mix(in srgb, var(--paper) 30%, transparent); transform:translateY(-3px); background:color-mix(in srgb, var(--paper) 5%, transparent)}
.imp-t{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.35rem,2.2vw,2.1rem); line-height:1.05; margin:0 0 clamp(1.4rem,2.5vw,2.4rem)}
[dir="rtl"] .imp-t{letter-spacing:0; line-height:1.4; text-transform:none}
.imp-figs{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem}
.imp-figs dt{font-size:.62rem; letter-spacing:.16em; color:color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom:.9rem}
[dir="rtl"] .imp-figs dt{letter-spacing:0; font-size:.72rem}
.imp-figs dd{margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.6rem,2.8vw,2.6rem); line-height:1; text-wrap:balance}
[dir="rtl"] .imp-figs dd{letter-spacing:0; line-height:1.35; text-transform:none}
.imp-arr{position:absolute; inset-inline-end:clamp(1.4rem,2.6vw,2.4rem); bottom:clamp(1.2rem,2.2vw,2rem); font-size:.85rem; color:color-mix(in srgb, var(--paper) 60%, transparent); transition:transform .35s var(--e-out), color .3s}
.imp-card:hover .imp-arr{color:var(--paper); transform:translateX(4px)}
[dir="rtl"] .imp-arr{transform:scaleX(-1)}
[dir="rtl"] .imp-card:hover .imp-arr{transform:scaleX(-1) translateX(4px)}
.imp-more{display:flex; flex-direction:column; justify-content:space-between}
.imp-more-k{font-size:.62rem; letter-spacing:.16em; color:color-mix(in srgb, var(--paper) 55%, transparent)}
[dir="rtl"] .imp-more-k{letter-spacing:0; font-size:.72rem}
.imp-see{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.6rem,3vw,2.8rem); line-height:1; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-inline-end:0}
[dir="rtl"] .imp-see{letter-spacing:0; text-transform:none; line-height:1.35}
.imp-see .imp-arr{position:static; font-size:1.4rem; color:var(--paper)}
.imp-grid .rv:nth-child(2){transition-delay:.08s} .imp-grid .rv:nth-child(3){transition-delay:.16s} .imp-grid .rv:nth-child(4){transition-delay:.24s}
@media (max-width:900px){
  .imp{padding:3rem 1.1rem 3rem}
  .imp-grid{grid-template-columns:1fr}
  .imp-card{min-height:0; padding:1.5rem 1.3rem 3.2rem}
  .imp-figs{gap:1rem 1.2rem}
  .imp-figs > div{min-width:0}
  .imp-figs dd{font-size:clamp(1.1rem,4.6vw,1.6rem)}
  .imp-more{padding-bottom:1.5rem; min-height:11rem}
  .imp-grid .rv{transition-delay:0s !important}
}

/* ---- Footer, mobile: Privacy/Terms with the language switch on the same row, tighter
   rhythm now that Insights lives under Company again. (2026-09-04) ---- */
@media (max-width:560px){
  .foot3{padding-top:4rem}
  .f3-top{margin-bottom:2.4rem; gap:2rem}
  .f3-brand{gap:1rem} .f3-markbig{height:4.6rem} .f3-markbig svg{height:4.6rem}
  .f3-cols{gap:1.5rem 1.2rem}
  .f3-col ul{gap:.5rem} .f3-h{margin-bottom:.75rem}
  .f3-markwrap{margin-bottom:1rem}
  .f3-bar{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.9rem 1rem; padding-top:.9rem}
  .f3-bar > span:first-child{grid-column:1 / -1}
  .f3-legal{grid-column:1; grid-row:2; gap:1.1rem}
  .f3-bar .f3-lang{grid-column:2; grid-row:2; justify-self:end}
}

/* ---- Language pill: just the switch and the X, bottom corner, up from below. (2026-09-04) ---- */
.lbar{left:auto; right:1.1rem; bottom:1.1rem; transform:translate(0,140%); padding:.3rem .3rem .3rem .45rem; gap:.35rem; border-radius:999px; flex-wrap:nowrap; width:auto; max-width:none}
.lbar.in{transform:translate(0,0)}
.lbar.out, body.menu-open .lbar, html.m-lock .lbar, body.at-foot .lbar{transform:translate(0,140%)}
[dir="rtl"] .lbar{right:auto; left:1.1rem; padding:.3rem .45rem .3rem .3rem}
.lbar-k, .lbar-t{display:none}
@media (max-width:900px){ .lbar{left:auto; right:.75rem; bottom:.75rem} [dir="rtl"] .lbar{right:auto; left:.75rem} }

/* ---- Ground colours: the record on a beige white, one desk on green, the impact zone on
   black, so the page alternates light / green / black instead of five greens. (2026-09-04) ---- */
:root{--beige:#EFE9DC}
.rec{background:linear-gradient(180deg, rgba(239,233,220,0) 0, rgba(239,233,220,0) 82vh, var(--beige) 96vh)}
.rec::before{background:linear-gradient(180deg, rgba(7,64,61,0) 0%, rgba(7,64,61,.38) 20%, rgba(7,64,61,.85) 34%, #07403D 45%, #2E6B64 56%, #9DBAB4 66%, #ECE9DF 75%, var(--beige) 83%)}
@media (max-width:900px){
  .rec{background:linear-gradient(180deg, rgba(239,233,220,0) 0, var(--beige) 38vh)}
  .rec::before{background:linear-gradient(180deg, rgba(7,64,61,0) 0%, rgba(7,64,61,.55) 28%, #2E6B64 48%, #9DBAB4 70%, var(--beige) 100%)}
}
.od{background:var(--teal); color:var(--paper)}
.od-k, .od-n, .od-sn{color:color-mix(in srgb, var(--paper) 68%, transparent)}
.od-lede, .od-plate p, .od-steps li > span:last-child{color:color-mix(in srgb, var(--paper) 80%, transparent)}
.od-plates, .od-flow{border-top-color:color-mix(in srgb, var(--paper) 35%, transparent)}
.od-plate + .od-plate::before{background:color-mix(in srgb, var(--paper) 22%, transparent)}
.od-flow-k{color:color-mix(in srgb, var(--paper) 60%, transparent)}
.od-steps::before{background:color-mix(in srgb, var(--paper) 55%, transparent)}
.od-steps li::before{background:var(--teal); border-color:color-mix(in srgb, var(--paper) 70%, transparent)}
.od-flow.in .od-steps li::before{background:var(--paper)}
.od-btn{background:var(--paper); color:var(--ink)}
.od-btn:hover, .od-btn:active{background:var(--ink); color:var(--paper)}
.od-link{color:var(--paper); text-decoration-color:color-mix(in srgb, var(--paper) 50%, transparent)}
.od-link:hover{text-decoration-color:var(--paper)}
.cq-wrap{background:#070A09}
.imp{background:linear-gradient(180deg, #1E2A27 0%, #161F1C 60%, #121A17 100%)}
@media (max-width:900px){ .od-plate{border-top-color:color-mix(in srgb, var(--paper) 22%, transparent)} }

/* ---- The file flow on mobile: a vertical rail, dots lighting in order. (2026-09-04) ---- */
@media (max-width:900px){
  .od-steps{grid-template-columns:1fr; gap:1.5rem; padding-inline-start:1.7rem; position:relative}
  .od-steps::before{display:block; top:.3rem; bottom:.3rem; inset-inline-start:.3rem; inset-inline-end:auto; width:1px; height:auto; transform:scaleY(0); transform-origin:50% 0; transition:transform 1.2s var(--e-out) .15s}
  .od-flow.in .od-steps::before{transform:scaleY(1)}
  .od-steps li{padding-top:0; padding-inline-start:0}
  .od-steps li::before{inset-inline-start:-1.7rem; top:.22rem}
  .od-steps li > span:last-child{max-width:none}
}

/* ---- Header rebuilt on the two-island pattern (2026-09-07): a frosted Ask-AI pill on the left,
   the big column nav at the top right in the hero, and on scroll a frosted nav pill (.hpill) with the
   same links small and Contact as its filled segment. The two sets crossfade along the same path
   (app.js setCompact), each rendered at its own size, so nothing pops or blurs. ---- */
.site-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.xw{background:color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding:.45rem .55rem .45rem .95rem; gap:.45rem; transition:background .3s}
.xw:hover{background:color-mix(in srgb, var(--paper) 96%, transparent)}
.xw-t{color:var(--ink); font-size:.66rem; letter-spacing:.14em}
[dir="rtl"] .xw-t{letter-spacing:0; font-size:.78rem}
.xw-chip{background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:color-mix(in srgb, var(--ink) 14%, transparent); color:var(--ink)}
.nav-isl{position:relative; display:flex; align-items:flex-start; gap:.4rem}
/* the hero set: out of the li clip once the entrance is done, so it can fly; hidden once folded */
body.nav-ready .hcol li{overflow:visible}
.hcol{position:relative}
.hcol .hline{position:absolute; inset-inline-start:0; top:0}
.hcol ul{padding-inline-start:calc(1px + .9rem)}
body.nav-compact .hcol .hline{transform:scaleY(0); opacity:0; transition:transform .45s var(--e-out), opacity .3s}
body.nav-compact .hcol a{transform:none}
body.nav-compact:not(.nav-flip) .hcols{visibility:hidden; pointer-events:none}
body.nav-flip .hcol a, body.nav-flip .hcols{transition:none !important}
body.nav-flip .hcol a{pointer-events:none}
/* the pill set */
.hpill{position:absolute; top:0; inset-inline-end:0; display:flex; align-items:center; gap:.1rem; padding:.3rem; border-radius:999px;
  background:color-mix(in srgb, var(--paper) 84%, transparent); border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  visibility:hidden; pointer-events:none; white-space:nowrap}
body.nav-compact .hpill, body.nav-flip .hpill{visibility:visible}
body.nav-compact:not(.nav-flip) .hpill{pointer-events:auto; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
body.nav-compact:not(.nav-flip) .hpill a{pointer-events:auto}
.hp-link{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; line-height:1;
  padding:.62rem .85rem; color:var(--ink); text-decoration:none; border-radius:999px; transition:background .25s, color .25s; will-change:transform}
.hp-link:hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.hp-link.hp-cta{background:var(--ink); color:var(--paper); padding:.62rem 1.05rem; margin-inline-start:.3rem}
.hp-link.hp-cta:hover{background:var(--teal); color:var(--paper)}
[dir="rtl"] .hp-link{letter-spacing:0; font-size:.8rem}
@media (prefers-reduced-motion:reduce){ .hpill, .hcols{transition:opacity .2s} }
@media (min-width:1024px){ .mbox{display:none} }
@media (max-width:1023px){
  .site-head{inset:.6rem .6rem auto .6rem; padding:.4rem .4rem .4rem .55rem; border-radius:1.25rem; pointer-events:auto; align-items:center; gap:.5rem;
    background:color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
  .xw, .xw:hover{background:none; border:0; padding:.2rem .3rem; -webkit-backdrop-filter:none; backdrop-filter:none; min-height:0}
  .xw-t{display:inline; font-size:.62rem; margin-right:.1rem}
  .hpill{display:none}
  .mbox{display:flex; mix-blend-mode:normal}
  #menuBtn.mburger, body.nav-compact #menuBtn.mburger, body.menu-open #menuBtn.mburger{opacity:1; visibility:visible; transform:none; pointer-events:auto;
    width:2.75rem; height:2.75rem; border-radius:.8rem; background:var(--ink); mix-blend-mode:normal; transition:background .3s}
  #menuBtn.mburger i, body.menu-open #menuBtn.mburger i{background:var(--paper); width:18px}
  body.at-foot .xw{opacity:1; pointer-events:auto}
}


.cq{position:relative; z-index:0}
.imp{position:relative; z-index:1}

/* ---- Header pills, one thickness (2026-09-08, Marlo): the Ask-AI pill and the compact nav pill
   are both exactly 42px tall at desktop, contents centred, so the two islands read as one bar. ---- */
@media (min-width:1024px){
  .xw{height:42px; padding-top:0; padding-bottom:0; box-sizing:border-box}
  .hpill{height:42px; padding-top:0; padding-bottom:0; box-sizing:border-box}
}

/* ---- Home Ready slab: the contact page's two paths in the left column (2026-09-08). The general
   inquiry (email, WhatsApp, Telegram) on top, the business inquiry form under it; the ten questions
   keep the right column. Form pieces come from css/contact.css, which the home now loads. ---- */
.cp-embed{--l1:color-mix(in srgb, var(--paper) 22%, transparent); --l2:color-mix(in srgb, var(--paper) 38%, transparent); --t2:color-mix(in srgb, var(--paper) 62%, transparent); --t3:color-mix(in srgb, var(--paper) 45%, transparent); --warn:#E0A16A}
.cp-embed a{color:inherit}
.cq-left .cq-h{margin:0 0 1.8rem}
.cq-k{display:block; color:var(--t2); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem}
[dir="rtl"] .cq-k{letter-spacing:0; font-size:.74rem}
.cq-k2{margin-top:2.6rem}
.cq-reach{padding-bottom:1.6rem; border-bottom:1px solid var(--l2); gap:1rem 1.4rem}
.cq-reach .cp-mail{font-size:clamp(1.3rem, 2vw, 1.9rem)}
.cq-left .cp-form{max-width:none}
.cq-left .cp-opts{grid-template-columns:1fr}
.cq-left .cp-fields{grid-template-columns:1fr 1fr}
.cq-left .cp-step.is-on{animation:none}
@media (max-width:720px){ .cq-left .cp-fields{grid-template-columns:1fr} }


/* ---- Home Ready slab, compact (2026-09-08, Marlo: half the size, the same area as the questions):
   smaller title, one-line service rows in two columns, tighter fields. ---- */
.cq-left .cq-h{font-size:clamp(1.9rem, 3.2vw, 3rem); margin:0 0 1.2rem}
.cq-k{margin-bottom:.7rem}
.cq-k2{margin-top:1.5rem}
.cq-reach{padding-bottom:1.1rem; gap:.7rem 1rem}
.cq-reach .cp-mail{font-size:clamp(1.15rem, 1.5vw, 1.4rem)}
.cq-reach .cp-btn{padding:.5rem .85rem}
.cq-left .cp-q{font-size:1.15rem; margin:0 0 .25rem}
.cq-left .cp-hint{font-size:.85rem; margin:0 0 .7rem}
.cq-left .cp-step > .cp-opts, .cq-left .cp-step > .cp-fields, .cq-left .cp-step > .cp-field{margin-top:.2rem}
.cq-left .cp-opts{grid-template-columns:1fr 1fr; gap:0 1.5rem}
.cq-left .cp-opt{padding:.55rem 0; font-size:.92rem; gap:.6rem}
.cq-left .cp-opt-t small{display:none}
.cq-left .cp-opt i{width:.7rem; height:.7rem}
.cq-left .cp-ctx{margin-bottom:.5rem}
.cq-left .cp-field{padding:.6rem 0 .4rem}
.cq-left .cp-in{font-size:.98rem}
.cq-left .cp-nav{margin-top:1.1rem}
.cq-left .cp-next{font-size:.92rem}
.cq-left .cp-done, .cq-left .cp-fail{margin-top:1rem; font-size:.92rem}
@media (max-width:720px){ .cq-left .cp-opts{grid-template-columns:1fr} }

/* ---- Home services: each entry is a link to its page at desktop (2026-09-08) ---- */
@media (min-width:901px){
  .ss-item{cursor:pointer}
  .ss-item .ss-t{transition:color .3s}
  .ss-item:hover .ss-t{color:color-mix(in srgb, var(--paper) 72%, transparent)}
}
/* the slab's left column sits closer to the question list's height */
.cq-left .cp-opt{padding:.72rem 0}
.cq-left .cq-h{margin-bottom:1.5rem}
.cq-k2{margin-top:1.9rem}


/* ---- Mobile chrome (2026-09-08, Marlo): the Ask-AI pill sits on the burger's centre line at the
   same height; the menu is the five pages alone, large, filling the screen under the header; the
   home slab at phone is the general inquiry and the questions, the form waits on the contact page. ---- */
@media (max-width:1023px){
  .site-head{align-items:center}
  .xw{height:44px; padding-top:0; padding-bottom:0; box-sizing:border-box}
  .mpanel{padding:5.5rem 1.4rem 2.5rem; justify-content:space-evenly; gap:0}
  .m-link{font-size:clamp(2.8rem, 13.5vw, 4.4rem); line-height:1.05; gap:.9rem}
}
#menu .m-ref, #menu .mpanel hr, #menu .m-label, #menu .m-contact{display:none}
@media (max-width:720px){
  .cq-left .cq-k2, .cq-left .cp-form, .cq-left #cpData{display:none}
  .cq-reach{border-bottom:0; padding-bottom:0}
}

/* ---- Phone tap targets and the language bar (mobile audit 2026-09-08) ---- */
@media (max-width:720px){
  body.past-hero .lbar{transform:translate(-50%,140%); opacity:0; pointer-events:none}
  .cp-z{width:2.75rem; height:2.75rem}
  .cp-dot{width:40px; height:40px}
  .cp-next, .cp-back, .cr-send, .cr-open, .ab-btn, .sv-part-cta{min-height:44px}
  .sx-i{min-height:44px; align-items:center}
  .f3-col a{display:inline-block; padding-block:.5rem}
  [dir="rtl"] .hpanel .mono{font-size:.7rem}
}
[dir="rtl"] .ss-open p{line-height:1.7}


/* ---- The Ready slab is square and edge to edge (2026-09-08, Marlo): a rounded green slab on the ink
   ground read as a pill with square things inside it. The impact card keeps its ink frame above; the
   slab bleeds out of the frame with hard corners, and its questions panel loses its rounding to match. ---- */
.cq{border-radius:0; margin:0 calc(-1 * clamp(.5rem,1.2vw,1.25rem))}
.cq-list{border-radius:0}
@media (max-width:900px){ .cq{margin:0 -.5rem} }
/* the hero hairlines are driven by the scrubbed fold; no CSS transition may lag them */
body.nav-flip .hcol .hline{transition:none !important}

/* ---- Home services at desktop (2026-09-09, Marlo): no hover effects. The entry and the image are the link, the
   photo follows the scroll line only, as in the original. ---- */
@media (min-width:901px){
  .ss-more{display:none}
  .ss-media{cursor:pointer}
}

/* ---- Logo carousel (2026-09-08, Marlo's reference): paper ground, one belt of white cards, a ruler under
   each card with the accent tick at its centre. Moving: logos in black on white. Paused under the pointer:
   the card's border and its ruler turn brand green and the logo shows its own colours. ---- */
.lg{background:var(--paper); color:var(--ink); padding:clamp(3rem,7vh,5.5rem) 0 clamp(2.5rem,6vh,4.5rem); overflow:hidden}
.lg-line{margin:0 auto clamp(2rem,4vw,3rem); text-align:center; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
[dir="rtl"] .lg-line{letter-spacing:0; font-size:.82rem}
.lg-viewport{width:100%; overflow:hidden}
.lg-track{display:flex; gap:clamp(1rem,1.4vw,1.4rem); width:max-content; will-change:transform; padding-inline-start:clamp(1rem,3vw,2.5rem)}
.lg-item{flex:0 0 auto; width:clamp(150px,13.1vw,203px)}
.lg-card{position:relative; aspect-ratio:1.4/1; background:#fff; border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:6px;
  display:grid; place-items:center; padding:clamp(1.2rem,2vw,2rem); transition:border-color .35s var(--e-out), box-shadow .35s var(--e-out)}
.lg-card img, .lg-card svg{max-width:70%; max-height:46%; width:auto; height:auto; display:block; filter:grayscale(1) contrast(1.15); transition:filter .4s var(--e-out)}
.lg-ph{display:block; width:56%; height:22%; border-radius:4px; background:color-mix(in srgb, var(--ink) 7%, transparent)}
.lg-rule{position:relative; height:1.4rem; margin-top:.9rem; display:flex; justify-content:space-between; align-items:flex-start; padding:0 2px}
.lg-rule i{display:block; width:1px; height:.55rem; background:color-mix(in srgb, var(--ink) 16%, transparent); transition:background-color .35s var(--e-out)}
.lg-rule i.lg-mid{width:2px; height:1.1rem; background:color-mix(in srgb, var(--ink) 38%, transparent)}
.lg-item:hover .lg-card{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal)}
.lg-item:hover .lg-card img, .lg-item:hover .lg-card svg{filter:none}
.lg-item:hover .lg-rule i{background:color-mix(in srgb, var(--teal) 55%, transparent)}
.lg-item:hover .lg-rule i.lg-mid{background:var(--teal)}
@media (max-width:720px){ .lg-item{width:44vw} .lg-track{gap:.8rem} }
@media (prefers-reduced-motion:reduce){ .lg-track{transform:none !important} }

/* ---- Hero panel (2026-09-08, Marlo): one statement across both cells. The motto in the display face on
   top, the working line under it in mono, Business inquiry at the foot; the whole panel is the link and
   fills teal on hover like the old inquiry panel. ---- */
.hcell--panels{grid-template-columns:1fr}
.hpanel--one{grid-column:1 / -1; background:var(--ink); color:var(--paper); text-decoration:none; justify-content:space-between}
.hpanel--one .hp-head{position:relative; z-index:1; display:flex; flex-direction:column; gap:1rem}
.hpanel--one .hp-motto{font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.5rem); line-height:1.12; text-transform:uppercase; letter-spacing:.02em; max-width:18ch}
[dir="rtl"] .hpanel--one .hp-motto{font-family:var(--font-ar, inherit); letter-spacing:0; text-transform:none; line-height:1.4; font-weight:500; max-width:22ch}
.hpanel--one .hp-line{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:.62}
[dir="rtl"] .hpanel--one .hp-line{letter-spacing:0; font-size:.8rem}
.hpanel--one .hp-foot{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.hpanel--one .hp-lead{font-size:clamp(1.2rem,2.1vw,1.85rem); line-height:1.12; font-weight:500}  /* a bit larger, 2026-09-09 Marlo */
.hpanel--one .hp-go{font-size:1.5rem; line-height:1; transition:transform .6s var(--e-out)}
.hpanel--one:hover .hp-go, .hpanel--one:active .hp-go{transform:translateX(.45rem)}
[dir="rtl"] .hpanel--one:hover .hp-go, [dir="rtl"] .hpanel--one:active .hp-go{transform:translateX(-.45rem)}
@media (max-width:720px){ .hpanel--one .hp-motto{font-size:1.3rem; max-width:none} .hpanel--one .hp-head{gap:.6rem} }

/* ---- Impact figures, readable (2026-09-09, Marlo): the result reads first and large, the short label sits
   under it in a size people can read; nothing long before the point. Home cards, the impact listing and
   the study pages share the rule. ---- */
.imp-figs > div{display:flex; flex-direction:column-reverse; gap:.55rem}
.imp-figs dt{font-size:.8rem; letter-spacing:.02em; text-transform:none; margin:0; color:color-mix(in srgb, var(--paper) 62%, transparent)}
.imp-figs dd{font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.1; text-transform:none; letter-spacing:0}
[dir="rtl"] .imp-figs dd{line-height:1.4}
.ik-figs > div{flex-direction:column-reverse; gap:.4rem}
.ik-figs dt{font-size:.8rem; letter-spacing:.01em; opacity:.62; text-transform:none}
.ik-figs dd{font-size:1.25rem; line-height:1.15}
.impx-stat{flex-direction:column-reverse; gap:.45rem}
.impx-stat .mono{font-size:.8rem; letter-spacing:.01em; text-transform:none; opacity:.7; font-family:var(--sans, inherit)}
.impx-stat b{font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.15}

/* ---- Partners grid on About (2026-09-09): the carousel's cards, one by one, same size, same hover. ---- */
.ab-partners[hidden]{display:none}
.pg-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:clamp(1rem,1.6vw,1.6rem)}
.pg-item{display:flex; flex-direction:column; gap:.6rem}
.pg-item .lg-card{cursor:default}
.pg-item:hover .lg-card{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal)}
.pg-item:hover .lg-card img{filter:none}
.pg-name{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
[dir="rtl"] .pg-name{letter-spacing:0; font-size:.8rem}

/* ---- Partner cards, fixed proportion (2026-09-09): the card is a 1.4:1 box by padding, the logo is centred
   absolutely inside it, so a tall mark (BP) can no longer stretch its card; the About grid spans the page. ---- */
.lg-card{aspect-ratio:auto; height:auto; padding:0 !important; display:block}
.lg-card::before{content:""; display:block; padding-top:71.4%}
.lg-card img, .lg-card svg, .lg-card .lg-ph{position:absolute; inset:0; margin:auto; max-width:66%; max-height:44%; width:auto; height:auto}
.lg-card .lg-ph{width:56%; height:22%}
.ab-partners{display:block}
.ab-partners .ab-k{display:block; margin-bottom:1.2rem}
.ab-partners .pg-grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}

/* ---- The dusk (2026-09-09, Marlo): the record's beige ground goes to the services black as its last
   figures pass, the partners belt rides on that same black, and the services carry it on to the green.
   --rg is set on .after-hero and driven by GSAP in app.js; without JS the record stays beige and the
   belt sits on beige. The belt's kicker and ruler take a mid tone that reads on both grounds. ---- */
.after-hero{--rg:var(--beige)}
.rec{background:linear-gradient(180deg, rgba(239,233,220,0) 0, rgba(239,233,220,0) 82vh, var(--rg) 96vh)}
@media (max-width:900px){ .rec{background:linear-gradient(180deg, rgba(239,233,220,0) 0, var(--rg) 38vh)} }
.lg{background:var(--rg); color:var(--paper); padding-top:clamp(2rem,5vh,3.5rem)}
.lg .lg-line{color:#8A8F8B}
.lg .lg-card{background:var(--paper); border-color:rgba(22,33,30,.12)}
.lg .lg-rule i{background:rgba(138,143,139,.38)}
.lg .lg-rule i.lg-mid{background:rgba(138,143,139,.75)}
.lg .lg-item:hover .lg-card{border-color:#2B7A73; box-shadow:0 0 0 1px #2B7A73}
.lg .lg-item:hover .lg-rule i{background:rgba(43,122,115,.7)}
.lg .lg-item:hover .lg-rule i.lg-mid{background:#2B7A73}

/* ---- The other services (2026-09-09, Marlo): a service page ends on the other five, as five
   wide thin pills. At rest each is a white pill with the service named in ink. Under the pointer
   the photograph opens inside the pill from its centre out and the name turns paper over it. No
   call to action, no questions. All CSS; the pill does the work. ---- */
.osv{background:var(--paper); color:var(--ink)}
.osv-in{border-top:1px solid var(--line); padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(3.5rem,9vh,6rem)}
.osv-h{font-family:var(--mono); font-weight:400; text-transform:uppercase; font-size:.68rem;
       letter-spacing:.12em; color:var(--muted); margin:0 0 clamp(1.4rem,3vw,2rem)}
[dir="rtl"] .osv-h{font-family:var(--sans-ar); letter-spacing:0; text-transform:none; font-size:.82rem}
.osv-pills{display:grid; grid-template-columns:1fr; gap:.7rem}
@media (min-width:760px){ .osv-pills{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .osv-pills{grid-template-columns:repeat(3,1fr)} }
.osv-pill{position:relative; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
          min-height:clamp(6.5rem,9vw,8.5rem); padding:0 clamp(1.5rem,2.4vw,2.2rem);
          border:1px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--white);
          text-decoration:none; color:var(--ink); isolation:isolate;
          transition:color .45s var(--e-out), border-color .45s var(--e-out)}
.osv-shot{position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:999px;
          clip-path:inset(0 50% 0 50% round 999px); transition:clip-path .75s var(--e-out)}
.osv-shot img{width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block;
              filter:saturate(.8); transform:scale(1.07); transition:transform .95s var(--e-out)}
/* the scrim is heaviest where the name sits, so the name is legible whatever the photograph does */
.osv-shot::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,20,18,.74) 0%, rgba(7,20,18,.44) 52%, rgba(7,20,18,.30) 100%)}
[dir="rtl"] .osv-shot::after{background:linear-gradient(270deg, rgba(7,20,18,.74) 0%, rgba(7,20,18,.44) 52%, rgba(7,20,18,.30) 100%)}
.osv-pill:hover{color:var(--paper); border-color:var(--ink)}
.osv-pill:hover .osv-shot{clip-path:inset(0 0 0 0 round 999px)}
.osv-pill:hover .osv-shot img{transform:scale(1)}
.osv-t{font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.2}
.osv-go{opacity:.45; transition:opacity .4s var(--e-out), transform .5s var(--e-out)}
.osv-pill:hover .osv-go{opacity:1; transform:translateX(.35rem)}
[dir="rtl"] .osv-go{transform:scaleX(-1)}
[dir="rtl"] .osv-pill:hover .osv-go{transform:scaleX(-1) translateX(.35rem)}
@media (prefers-reduced-motion:reduce){
  .osv-shot, .osv-shot img, .osv-go{transition:none}
}
@media (max-width:640px){ .osv-pill{min-height:3.8rem; padding:0 1.4rem} .osv-t{font-size:1.02rem} }

/* ---- The compare card and the footer (2026-09-09, Marlo): the card used to run flush into the
   footer and the two dark greens melted together. The frame closes on all four sides now, and the
   card lights to the brand green as the footer arrives, so the hand-off is a step, not a smudge.
   --cqg is driven by GSAP in app.js; without it the card keeps the impact gradient. ---- */
/* the card is black at rest and lights to the brand green as the footer arrives */
.cq{--cqg:0}
.cq{background:
  linear-gradient(180deg, rgba(7,64,61,var(--cqg)) 0%, rgba(7,64,61,var(--cqg)) 100%),
  linear-gradient(180deg, #0D1512 0%, #0B100E 55%, #090D0B 100%)}
/* the frame travels with the card, so no line is left between it and the footer */
.cq-wrap{background:
  linear-gradient(180deg, rgba(7,64,61,var(--cqg,0)) 0%, rgba(7,64,61,var(--cqg,0)) 100%),
  linear-gradient(180deg, #070A09 0%, #070A09 100%)}

/* ---- Let's talk + questions, at the foot of the services page (2026-09-09, Marlo).
   Paper at rest with the copy in ink; as the footer arrives the whole block crosses to the
   footer's own green and the copy to paper, so the two meet with no seam and no line.
   --cqg is driven by GSAP from [data-greens]; without it the block simply stays on paper. ---- */
.tf{--cqg:0; background:var(--paper);
    color:color-mix(in srgb, var(--paper) calc(var(--cqg) * 100%), var(--ink))}
.tf{background:
  linear-gradient(180deg, rgba(7,64,61,var(--cqg)) 0%, rgba(7,64,61,var(--cqg)) 100%),
  linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%)}
.tf-in{display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4.5rem);
       padding:clamp(4rem,10vh,7rem) 0 clamp(4rem,10vh,7rem)}
@media (min-width:900px){ .tf-in{grid-template-columns:1fr 1.15fr; gap:clamp(3rem,7vw,8rem)} }
.tf-h{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.02em;
      font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1; margin:0 0 1.2rem}
[dir="rtl"] .tf-h{letter-spacing:0; line-height:1.2; text-transform:none}
.tf-line{margin:0 0 2rem; max-width:34ch; font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.5;
         color:color-mix(in srgb, currentColor 78%, transparent)}
.tf-cta{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
        text-transform:uppercase; text-decoration:none; padding:1rem 1.7rem;
        border:1px solid color-mix(in srgb, currentColor 45%, transparent); color:inherit;
        transition:background-color .35s var(--e-out), color .35s var(--e-out), border-color .35s var(--e-out)}
.tf-cta:hover{background:var(--teal); border-color:var(--teal); color:var(--paper)}
[dir="rtl"] .tf-cta{letter-spacing:0}
.tf-mail{display:block; margin-top:1.4rem; color:inherit; text-decoration:underline;
         text-underline-offset:4px; opacity:.72; font-size:.95rem}
.tf-mail:hover{opacity:1}
/* the accordion is the compare list, reading on whichever ground the block is showing */
.tf .cq-list{border-color:color-mix(in srgb, currentColor 20%, transparent)}
.tf .cq-head{color:color-mix(in srgb, currentColor 55%, transparent);
             border-bottom-color:color-mix(in srgb, currentColor 16%, transparent)}
.tf .cq-item{border-bottom-color:color-mix(in srgb, currentColor 16%, transparent)}
.tf .cq-n{color:color-mix(in srgb, currentColor 58%, transparent)}
.tf .cq-q{color:inherit}
.tf .cq-a > div{color:color-mix(in srgb, currentColor 82%, transparent)}
.tf .cq-a a{color:inherit}

/* ---- The hero panel carries the three ways to reach us (2026-09-09, Marlo): the motto runs from a
   muted green to white on the ink, the business inquiry stays the primary line, and WhatsApp,
   Telegram and the address sit beside it so a message can go now. ---- */
.hpanel--one .hp-motto{background-image:linear-gradient(104deg,#5E8079 0%,#9DB6B0 42%,#EAE8E2 100%);
  background-clip:text; -webkit-background-clip:text; color:transparent}
.hpanel--one .hp-foot{flex-wrap:wrap; align-items:flex-end; gap:1rem 2rem}
.hpanel--one .hp-lead{display:inline-flex; align-items:center; gap:.6rem; color:var(--paper); text-decoration:none}
.hpanel--one .hp-lead:hover .hp-go{transform:translateX(.45rem)}
[dir="rtl"] .hpanel--one .hp-lead:hover .hp-go{transform:translateX(-.45rem)}
.hp-reach{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .5rem}
.hp-r{display:inline-flex; align-items:center; gap:.4rem; color:var(--paper); text-decoration:none;
      font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
      border:1px solid color-mix(in srgb, var(--paper) 28%, transparent); border-radius:999px;
      padding:.5rem .85rem; opacity:.82;
      transition:opacity .3s, background-color .35s var(--e-out), border-color .35s var(--e-out)}
.hp-r svg{width:13px; height:13px; flex:0 0 auto}
.hp-r:hover{opacity:1; background:var(--teal); border-color:var(--teal)}
[dir="rtl"] .hp-r{letter-spacing:0; font-size:.78rem}
@media (max-width:720px){
  .hpanel--one .hp-foot{gap:.8rem 1rem}
  .hp-r{padding:.42rem .7rem; font-size:.6rem}
  .hp-r-mail{display:none}
}

/* the home impact cards say it plainly: what the company had, what it has now (2026-09-09, Marlo) */
.imp-ba{margin:0; display:grid; gap:1.2rem}
.imp-ba dt{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
           color:color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom:.35rem}
[dir="rtl"] .imp-ba dt{letter-spacing:0; font-size:.76rem}
.imp-ba dd{margin:0; font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.45;
           color:color-mix(in srgb, var(--paper) 88%, transparent)}
.imp-ba div + div dd{color:var(--paper)}

/* ---- The footer mark and the footer wordmark run white to black (2026-09-09, Marlo).
   The mark's stroke takes an SVG gradient painted per page; the wordmark clips a CSS one.
   Both start paper at the inline start and end at the ink, so the footer closes on the
   same movement the hero opens with. ---- */
.f3-mark{background-image:linear-gradient(96deg,#EAE8E2 0%,#9FB2AC 38%,#16211E 100%);
         background-clip:text; -webkit-background-clip:text; color:transparent}
[dir="rtl"] .f3-mark{background-image:linear-gradient(264deg,#EAE8E2 0%,#9FB2AC 38%,#16211E 100%)}
.f3-markbig svg{overflow:visible}
.f3-markbig circle, .f3-markbig path{stroke:url(#f3grad)}
/* the services CTA carries the same three channels as the hero panel */
.tf-reach{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem}
.tf-r{display:inline-flex; align-items:center; gap:.45rem; color:inherit; text-decoration:none;
      font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
      border:1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius:999px;
      padding:.55rem .9rem; opacity:.85;
      transition:opacity .3s, background-color .35s var(--e-out), border-color .35s var(--e-out), color .35s var(--e-out)}
.tf-r svg{width:13px; height:13px; flex:0 0 auto}
.tf-r:hover{opacity:1; background:var(--teal); border-color:var(--teal); color:var(--paper)}
[dir="rtl"] .tf-r{letter-spacing:0; font-size:.78rem}
/* once the travelling mark has landed in the footer slot it takes the footer mark's gradient */
.tm.tm-landed circle, .tm.tm-landed path{stroke:url(#tmgrad)}


/* ---- The page meets the footer (2026-09-09, Marlo: "when going into the bottom change the
   background always into the same background colour as the footer in every page"). A band before
   .foot3 that starts as paper and takes the footer's own green as the footer arrives, driven by
   the [data-greens] scrub in app.js. The home and the services page carry their own greening
   block at the tail and do not get one. ---- */
.pfade{--cqg:0; --pf-base:var(--paper); height:clamp(5.5rem,13vh,10rem);
  background:linear-gradient(180deg, rgba(7,64,61,0) 0%, rgba(7,64,61,var(--cqg)) 100%), var(--pf-base)}
@media (prefers-reduced-motion:reduce){
  .pfade{background:linear-gradient(180deg, rgba(7,64,61,0) 0%, rgba(7,64,61,1) 100%), var(--pf-base)}
}

/* Compact partner presentation, shared by the English and Arabic home/About pages. */
@media(min-width:992px){
 .lg-item{width:clamp(135px,11.79vw,182.7px)}
 .ab-partners .pg-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.65rem 1rem}
 .pg-item .lg-card{height:clamp(44px,calc((100svh - 355px)/5),80px)}
 .pg-item .lg-card::before{padding-top:0}
 .pg-item .lg-card img,.pg-item .lg-card svg{max-width:68%;max-height:58%}
}

/* Mobile reading pace: keep the dawn, statistics and diagrams without spare screens. */
@media(max-height:649px){.hero{position:relative}}
@media(max-width:767px){
 html main .page-hero{padding-top:max(96px,6rem)!important}
 .rec{padding-bottom:3rem;background:linear-gradient(180deg,rgba(239,233,220,0) 0,var(--rg) 26svh)}
 .rec::before{height:28svh}
 .rec-grid{padding-top:32svh}
 .rec-img{width:8.5rem;margin-bottom:1.5rem}
 .rec-p{font-size:1.125rem;line-height:1.55}
 .rec-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
 .rec .dp{min-width:0;padding:1.4rem 0 1.1rem}
 .rec .dp b{font-size:clamp(1.55rem,7.5vw,1.9rem)}
 .rec .dp>span{font-size:.875rem;line-height:1.5}
 .rec .dp>span.ltr{margin-top:0}
}
.ss-toggle{display:block;width:100%;border:0;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;cursor:pointer}
.ss-toggle:focus-visible{outline:2px solid currentColor;outline-offset:6px}
@media(max-width:900px){
 /* Enlarge the hit area into the row's existing space, not its reading height. */
 .ss-toggle{min-height:44px;padding-block:10px;margin-block:-10px}
 .ss-item.open .ss-body{max-height:var(--ss-body-height,18rem)}
}
.lg-viewport:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
@media(max-width:767px),(pointer:coarse),(prefers-reduced-motion:reduce){
 .lg-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter)}
 .lg-track{transform:none!important;will-change:auto;padding-inline-end:var(--gutter)}
 .lg-item{scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){
 .mpanel,.m-link,.m-label,.mpanel hr{transition:none!important}
}

/* Ask AI: compact entry, with the full prompt available on demand. */
.aim-box{max-height:calc(100dvh - 2rem);overscroll-behavior:contain}
.aim-prompt{padding:1rem 1.1rem .65rem}
.aim .aim-h{font-size:clamp(1.7rem,3.8vw,2.85rem)}
.aim-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.aim-actions .aim-copy{position:static;min-height:44px;border-radius:999px;margin:0}
.aim-more{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding:.65rem .4rem;background:none;border:0;color:var(--paper);font-size:.72rem;cursor:pointer;text-align:start}
.aim-more::after{content:'+';font-size:1.15rem;line-height:1}
.aim-more[aria-expanded="true"]::after{content:'−'}
.aim-prompt p{padding:0;margin:0 0 .85rem}
.aim-prompt[data-expanded="false"] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.aim-prompt[data-expanded="true"] p{display:block}
.aim-actions{border-top:1px solid rgba(228,238,231,.14);padding-top:.5rem}
.aim :is(button,a):focus-visible{outline:2px solid #A5D5C4;outline-offset:3px}
@media(max-width:767px),(max-height:500px) and (pointer:coarse){
 .aim{padding:.75rem}
 .aim-box{padding:1rem;max-height:calc(100dvh - 1.5rem);border-radius:20px}
 .aim-top{min-height:44px;gap:.75rem;margin-bottom:.85rem}
 .aim .aim-h{font-size:clamp(1.3rem,5.7vw,1.75rem);line-height:1.2;max-width:80%}
 [dir="rtl"] .aim .aim-h:not(.latin){font-size:clamp(1.4rem,6vw,1.8rem)}
 .aim .aim-close{min-width:44px;min-height:44px;padding:.4rem;margin:0;flex-shrink:0;font-size:.64rem;letter-spacing:.05em}
 .aim-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:1.15rem}
 .aim-card{min-width:0;min-height:70px;padding:.6rem .15rem;gap:.4rem;border-radius:12px}
 .aim-card .mono{font-size:.625rem;letter-spacing:.01em;line-height:1.3;text-transform:none}
 .aim-tile{width:26px;height:26px;border-radius:7px}
 .aim-tile svg{width:17px;height:17px}
 .aim-or{font-size:.625rem;margin-bottom:.5rem;letter-spacing:.08em}
 .aim-prompt{padding:.9rem .85rem .4rem;border-radius:12px}
 .aim-more{font-size:.68rem}
 .aim-actions .aim-copy{padding:.6rem .75rem;font-size:.625rem;letter-spacing:.03em}
 .aim-prompt p{font-size:.83rem;line-height:1.65;margin-bottom:.8rem}
}