/* =====================================================================
   site.css — the v5 design system: tokens, nav, footer, homepage.
   Load order: styles.css -> assets/css/site.css -> assets/css/legacy.css
   index.html loads THIS FILE ONLY, so every shared token lives here.
   ===================================================================== */
:root{
  /* ---- SC-095 spacing scale (was 46 ad-hoc values) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ---- colour (monochrome; the MeetPass gradient is the only exception) ---- */
  --canvas:#EAE9E6;
  --card:#FAF9F6;
  --ink:#171614;
  --muted:#5C5851;
  --tint:#E3E1DC;
  --dark:#171614;
  --dark-card:#211F1B;
  --dark-line:rgba(250,249,246,.14);
  --line:rgba(23,22,20,.13);

  /* ---- SC-095 radius scale (was 16 numeric values + 4 notations for "pill") ---- */
  --r-1:4px;    /* focus ring, hairline chips        */
  --r-2:10px;   /* form controls, small tiles        */
  --r-3:14px;   /* icon plates, inline panels        */
  --r-4:18px;   /* content cards, code window        */
  --r-5:26px;   /* section cards, footer             */
  --r-full:999px;
  --r:var(--r-5);          /* alias kept for .card / footer */

  /* ---- SC-095 type scale (was 48 sizes; 17 of them inside a 9.5px band) ---- */
  --fs-1:11.5px;  /* Role B micro label            */
  --fs-2:12.5px;  /* mono meta, captions           */
  --fs-3:13.5px;  /* Role A eyebrow, small mono    */
  --fs-4:15px;    /* small body / UI               */
  --fs-5:17px;    /* base body, buttons            */
  --fs-6:19px;    /* lead, h3 (legacy)             */
  --fs-7:24px;    /* h3 (v5)                       */
  --fs-8:32px;
  --fs-9:40px;
  --fs-10:56px;

  /* ---- SC-095 spacing scale, 4px base (was 46 values) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;
  --gap:10px;   /* the canvas gutter between stacked section cards */
  --tap:44px;   /* comfortable touch target (WCAG 2.5.5)           */

  /* ---- SC-095 elevation scale (was 27 shadows for 3 real uses) ---- */
  --sh-0:none;
  --sh-1:0 10px 34px rgba(23,22,20,.12);   /* nav capsule, lifted card */
  --sh-2:0 18px 44px rgba(23,22,20,.16);   /* dropdown, mobile panel   */
  --sh-focus:0 0 0 3px rgba(23,22,20,.08); /* focus halo (not elevation) */

  --sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:var(--fs-5);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:#FAF9F6}

/* ---------- nav ---------- */
.topbar{position:fixed;top:clamp(22px,3.4svh,34px);left:0;right:0;margin-inline:auto;z-index:50;width:fit-content;max-width:calc(100vw - 24px);border-radius:var(--r-full);background:rgba(250,249,246,.92);display:flex;align-items:center;gap:var(--gap);padding:9px var(--s-3) 9px var(--s-5);border:1px solid rgba(250,249,246,.45);box-shadow:var(--sh-1)}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .topbar{background:rgba(250,249,246,.93);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
}
.topbar .logo{flex:0 0 auto}
.topbar .logo img{height:29px;width:auto}
.navlinks{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:var(--s-2)}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{font-size:var(--fs-4);font-weight:500;padding:7px var(--s-3);border-radius:var(--r-full);white-space:nowrap;transition:background .18s}
.navlinks a:hover{background:rgba(23,22,20,.07)}
.tagline{font-family:var(--mono);font-size:var(--fs-3);color:var(--muted);white-space:nowrap}
.tagline b{color:var(--ink);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:var(--gap);font-family:var(--sans);font-weight:500;font-size:var(--fs-5);padding:14px var(--s-6);border-radius:var(--r-full);background:var(--ink);color:#FAF9F6;transition:background .18s,transform .18s}
.btn:hover{background:#44413B}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#FAF9F6}
.btn.light{background:#FAF9F6;color:var(--ink)}
.btn.light:hover{background:#D8D4CC;color:var(--ink)}
.topbar .btn{padding:9px var(--s-5);font-size:var(--fs-4);flex:0 0 auto;margin-left:6px}

/* ---------- cards ---------- */
main{display:flex;flex-direction:column;gap:var(--gap);padding:var(--gap) clamp(10px,3vw,56px) 0;margin:0 auto;width:100%}
.card{background:var(--card);border-radius:var(--r);overflow:hidden}
.card .in{max-width:1220px;margin:0 auto;padding:clamp(52px,7vw,100px) clamp(22px,4.5vw,64px)}
.card--tint{background:var(--tint)}
.card--dark{background:var(--dark);color:#F3F1EC}

/* ---------- SC-096 label roles ----------
   Role A — section eyebrow: IBM Plex Mono, 13.5px, weight 400, '// ' prefix.
   Role B — micro caption/tag: IBM Plex Mono, 11.5px, weight 500, uppercase, .08em.
   Every other micro-label class is mapped onto one of these two.          */
.eyebrow{font-family:var(--mono);font-size:var(--fs-3);font-weight:400;color:var(--muted);margin-bottom:var(--s-6);display:block}
/* SC-086 the '// ' device stays visible but is not announced. The plain
   declaration is repeated first so browsers without alt-text support keep it. */
.eyebrow::before{content:"// ";color:var(--ink)}
.eyebrow::before{content:"// " / "";color:var(--ink)}
.card--dark .eyebrow{color:#B7B2A8}
.card--dark .eyebrow::before{color:#F3F1EC}
.lockup-label,.caption,.count,.wtag,.fcol .k,.pcard-head .tag,.wcard span{
  font-family:var(--mono);font-size:var(--fs-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase}

h1{font-size:clamp(46px,7.4vw,98px);line-height:1.02;font-weight:500;letter-spacing:-.035em}
h2{font-size:clamp(34px,4.6vw,62px);line-height:1.05;font-weight:500;letter-spacing:-.03em}
h3{font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.01em}
.acc{color:var(--muted)}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  h1,h2,.subhead h3{background-image:linear-gradient(180deg,var(--ink) 30%,#655F58 135%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .card--dark h2{background-image:linear-gradient(180deg,#FAF9F6 30%,#948F86 135%)}
  h1 .acc,h2 .acc,.subhead h3 .acc{background:none;-webkit-text-fill-color:inherit;color:inherit}
}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:66ch}
.card--dark .lead{color:#B7B2A8}
.mt1{margin-top:var(--s-5)}.mt2{margin-top:var(--s-7)}.mt3{margin-top:var(--s-9)}
.row{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.arrlink{font-weight:500;display:inline-flex;align-items:center;gap:var(--s-2);border-bottom:1.5px solid var(--ink);padding-bottom:3px;transition:color .18s,border-color .18s}
.arrlink:hover{color:var(--muted);border-color:var(--muted)}
/* SC-040 the new "Request a trial" arrlink sits in the dark closing band, where
   the default ink underline is invisible against the ink background. */
.card--dark .arrlink,.dark .arrlink{border-color:#F3F1EC}
.card--dark .arrlink:hover,.dark .arrlink:hover{color:#B7B2A8;border-color:#B7B2A8}

/* ---------- hero ---------- */
header.hero{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - 2*var(--gap));min-height:calc(100svh - 2*var(--gap))}
/* padding-top must clear the FIXED .topbar on its own. It used to be short of
   that and got away with it only because margin:auto had ~29px of leftover flex
   space to push .in down with; once the canvas grew and took that space back,
   the eyebrow slid under the nav pill. Auto margins can only ever add clearance,
   so sizing the padding for the zero-slack case is what makes this safe. */
header.hero .in{padding-top:clamp(84px,11svh,112px);padding-bottom:0;text-align:center;max-width:1260px;margin:auto}
/* The new headline is short enough to sit on one very wide line, which left the
   hero looking sparse and stranded 85px of dead flex space above it. Capping the
   measure forces a balanced two-line lockup that fills the panel and reads as a
   statement rather than a caption. ch scales with the font, so this holds across
   viewports. */
header.hero h1{font-size:clamp(30px,min(5.3vw,9.5svh),78px);text-wrap:balance;max-width:20ch;margin-inline:auto}
/* The promise line, sized to land clearly between h1 and .lead so the three
   steps read as one ladder. On svh like the rest of the hero, so on a short
   screen it gives ground instead of pushing the skyline past the fold. */
header.hero .deck{font-size:clamp(19px,min(2.9vw,3.1svh),30px);line-height:1.25;letter-spacing:-.015em;margin:clamp(10px,1.9svh,20px) auto 0;text-wrap:balance}
header.hero .eyebrow{margin-bottom:clamp(16px,2.6svh,34px)}
header.hero .lead{margin:clamp(14px,2.4svh,30px) auto 0;font-size:clamp(14.5px,2.3svh,19px)}
header.hero .row{justify-content:center;margin-top:clamp(18px,3.4svh,38px)}
/* SC-092 this is the centred hero chip row, not the site-wide .chips container.
   The neutral default for the 24 legacy 'Key features' rows lives in legacy.css. */
header.hero .chips{font-family:var(--mono);font-size:var(--fs-3);color:var(--muted);margin-top:clamp(16px,3svh,32px);display:flex;gap:var(--s-2) var(--s-6);flex-wrap:wrap;justify-content:center}
header.hero .chips span b{font-weight:500;color:var(--ink)}

/* Phone: the hero still has to fit one screen. .in's padding-top grew to clear
   the fixed nav (it previously ran under it here), so recover those pixels from
   the inter-block rhythm — otherwise the hero outgrows 100svh and the skyline,
   which is anchored to the bottom, drops below the fold. */
@media (max-width:600px){
  header.hero .eyebrow{margin-bottom:16px}
  header.hero .deck{font-size:19px;margin-top:10px}
  header.hero .lead{margin-top:14px}
  header.hero .row{margin-top:18px}
  header.hero .chips{margin-top:16px}
}
/* Hero graphic. Now a <canvas> particle morph (assets/js/hero-anim.js) rather
   than inline <rect>s. The base rule still serves the CTA <svg> skyline. */
.skyline{display:block;width:min(1240px,96%);max-height:34svh;margin:clamp(2px,0.6svh,8px) auto 0;color:var(--ink)}

/* Hero canvas only. hero-anim.js reads these two caps and picks the largest box
   satisfying both, then writes width/height inline — so max-height can never
   squash the drawing the way a fixed width + auto height did. The caps are
   deliberately generous: header.hero is a flex column whose .in carries
   margin:auto, so every pixel the canvas declines becomes dead space that the
   auto margins push above it. */
/* The hero skyline is the original inline <svg> again (pixel-build animation).
   Sized to the wider footprint the canvas version used, so reverting the
   animation does not also undo "make the skyline bigger". */
header.hero .skyline{width:min(1320px,97%);max-width:min(1320px,97%);height:auto;max-height:30svh;margin-top:0}

/* The closing-CTA section still uses the SVG skyline (svg.skyline .px rect).
   Its build animation lived in the block the hero canvas replaced, so restore
   it here — scoped to the SVG so it can never touch the canvas hero. */
@media (prefers-reduced-motion: no-preference){
  svg.skyline .px rect{animation:skypx .4s ease-out both;animation-delay:calc(var(--d) + .2s)}
  /* hero: Design. -> <Code/>. -> Transform. build in pixels (--pd staggers each
     word left-to-right), and only once they are done does the skyline rise. */
  header.hero .skyline .pixtag rect{animation:skypx .3s ease-out both;animation-delay:var(--pd)}
  header.hero .skyline .px rect{animation:skypx .4s ease-out both;animation-delay:calc(var(--d) + 2.8s)}
}

@keyframes skypx{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- stats strip ---------- */
.strip .in{padding:clamp(30px,3.5vw,46px) clamp(22px,4.5vw,64px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{display:flex;flex-direction:column-reverse;text-align:left;padding:var(--s-1) clamp(18px,2.5vw,34px)}
.stats div:first-child{padding-left:6px}
.stats div+div{border-left:1px solid var(--line)}
.stats b{font-family:var(--sans);font-size:clamp(34px,4vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.stats span{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted);text-transform:lowercase;margin-bottom:var(--gap)}
.stats span::before{content:"// ";color:var(--ink)}
.stats span::before{content:"// " / "";color:var(--ink)}
/* SC-116 the 2x2 grid and the separators that divide it must live in ONE
   breakpoint or the borders detach from the cells. 820px also catches
   iPad portrait (768px), which the old 760px query missed by 8px. */
@media (max-width:820px){
  .stats{grid-template-columns:1fr 1fr;gap:0}
  .stats div{padding:14px 18px}
  .stats div:first-child{padding-left:18px}
  .stats div+div{border-left:none}
  .stats div:nth-child(even){border-left:1px solid var(--line)}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- two ways in ---------- */
/* ---------- get started (terminal layout) ---------- */
.gs-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(36px,4vw,52px)}
.gsterm .tlines{padding:var(--s-6) var(--s-6) var(--s-7);font-family:var(--mono);font-size:clamp(13.5px,1.3vw,15.5px);line-height:2.1;color:#B7B2A8}
.gsterm .tlines b{color:#F3F1EC;font-weight:500}
.gsterm .tp{color:#9A948B;margin-right:var(--s-2)}
.caret{display:inline-block;width:.55em;height:1.05em;background:#F3F1EC;margin-left:7px;vertical-align:-.15em;animation:caretb 1.1s steps(1) infinite}
@keyframes caretb{50%{opacity:0}}

/* ---------- AI section neural background ---------- */
.aisec{position:relative}
.ai-bg{position:absolute;inset:0;pointer-events:none;opacity:.75;will-change:transform;transform:translateZ(0)}
.ai-bg svg{width:100%;height:100%;display:block}
.ai-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,22,20,.88) 0%,rgba(23,22,20,.62) 22%,rgba(23,22,20,.22) 46%,rgba(23,22,20,.28) 78%,rgba(23,22,20,.66) 100%)}
.aisec .in{position:relative;z-index:1}

/* ---------- ai section ---------- */
.ai-head{max-width:820px}
.chipgrid{display:flex;flex-wrap:wrap;gap:var(--gap);margin-top:var(--tap)}
.card--dark .chip,.aisec .chip{font-family:var(--mono);font-size:var(--fs-3);padding:var(--s-2) var(--s-4);border-radius:var(--r-full);border:1px solid rgba(250,249,246,.18);color:#E6E3DC;background:rgba(33,31,27,.55)}
.flagship{margin-top:var(--s-10);background:var(--dark-card);border:1px solid var(--dark-line);border-radius:var(--r-4);padding:clamp(30px,3.5vw,52px);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-8);align-items:center}
.flagship h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.1}
.flagship p{color:#B7B2A8;margin-top:var(--s-4)}
.flagship .side{font-family:var(--mono);font-size:var(--fs-3);color:#B7B2A8;display:flex;flex-direction:column;gap:var(--gap)}
.flagship .side span{padding-left:1.4em;text-indent:-1.4em}
.flagship .side span b{color:#F3F1EC;font-weight:500}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-10)}
.duo-col{background:var(--dark-card);border:1px solid var(--dark-line);border-radius:var(--r-4);padding:clamp(26px,3vw,40px)}
.duo-col .colhead{font-family:var(--mono);font-size:var(--fs-3);color:#B7B2A8;margin-bottom:var(--s-6)}
.duo-col .colhead::before{content:"// ";color:#F3F1EC}
.duo-col .colhead::before{content:"// " / "";color:#F3F1EC}
/* scoped: the legacy pages use .plist as a bulleted <ul> (styles.css) */
.duo-col .plist{display:flex;flex-direction:column}
.duo-col .plist a{display:flex;gap:var(--s-4);align-items:baseline;padding:13px 2px;border-top:1px solid var(--dark-line);transition:padding-left .18s}
.duo-col .plist a:first-child{border-top:0}
.duo-col .plist a:hover{padding-left:var(--gap)}
.duo-col .plist a:hover .pn{color:#fff}
.pn{font-weight:500;white-space:nowrap;transition:color .18s}
.pd{color:#96917F;font-family:var(--mono);font-size:var(--fs-2)}
/* SC-074 a 13.5px inline link was a 20.9px target; 24px is the WCAG 2.5.8 floor */
.seemore{margin-top:var(--s-6);font-family:var(--mono);font-size:var(--fs-3);color:#D8D4CC;display:inline-block;padding:var(--s-1) 0}
.seemore:hover{color:#fff}

/* ---------- featured band (ported from v3) ---------- */
/* The legacy pages wrap their bands in .wrap and legacy.css restores the
   authored flex ratios there (SC-036). This grid is the index.html band. */
.band{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.band-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
.band-visual{display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}
.band-art{width:100%;max-width:380px;color:var(--ink);filter:drop-shadow(0 22px 46px rgba(23,22,20,.15))}
.lockups{display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;margin-top:var(--gap);color:var(--ink)}
.lockup{display:flex;flex-direction:column;gap:var(--gap)}
.lockup-logo{height:42px;width:auto;mix-blend-mode:multiply}
.lockup-logo.klogo{height:46px}
/* kahramaa-alpha.png is a real transparent PNG, so it needs no blend trick — and
   multiply would tint its dark artwork against the panel. The opaque kahramaa.png
   relied on multiply to hide its white backdrop, which showed as a white slab on
   anything that is not pure white. This lives in site.css, not legacy.css,
   because index.html loads site.css ONLY. */
.lockup-logo.klogo{mix-blend-mode:normal}
.lockup-label{color:var(--muted)}
.lockup-sep{width:1px;height:40px;background:var(--line)}
.caption{display:flex;align-items:center;gap:var(--s-2);color:var(--muted);justify-content:center;text-align:center}
.live{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;color:var(--ink);animation:blink 1.8s ease-in-out infinite}
.float{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ---------- meetpass brand section ---------- */
.mpsec{background:linear-gradient(150deg,#fbfcfd,#eef1f5);color:#2f3137}
.mpsec .mp-in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,4vw,64px);align-items:center}
.mp-eyebrow{font-family:'Questrial',sans-serif;font-size:var(--fs-3);letter-spacing:.14em;text-transform:uppercase;color:#565d66;display:inline-flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6)}
.mp-eyebrow::before{content:"";width:28px;height:9px;border-radius:var(--r-full);background:linear-gradient(100deg,#70c056,#4798d3)}
.mpsec h2{font-family:'Questrial','Century Gothic',sans-serif;font-weight:400;letter-spacing:-.01em;background-image:none;-webkit-text-fill-color:currentColor;color:#2f3137}
.macc{background-image:linear-gradient(100deg,#48922f,#2f77b0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mp-lead{color:#565d66;font-size:clamp(16px,1.5vw,19px);max-width:60ch;margin-top:var(--s-6)}
.mbtn{display:inline-flex;align-items:center;gap:var(--gap);font-weight:500;font-size:var(--fs-5);padding:14px var(--s-7);border-radius:var(--r-full);background:linear-gradient(100deg,#38801f,#1f6ea8);color:#fff;box-shadow:0 12px 28px rgba(71,152,211,.28);transition:transform .18s,box-shadow .18s}
.mbtn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(71,152,211,.36)}
.mp-panel{background:#fff;border:1px solid #e4e8ee;border-radius:var(--r-5);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;align-items:center;gap:var(--s-6);box-shadow:0 24px 60px rgba(29,36,48,.08)}
.mp-logo{width:min(310px,82%);height:auto}
.mp-feats{display:flex;flex-direction:column;gap:var(--s-3);align-self:stretch;border-top:1px solid #e4e8ee;padding-top:var(--s-6)}
.mp-feats span{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-4);color:#565d66}
.mp-feats i{width:9px;height:9px;border-radius:50%;background:linear-gradient(100deg,#70c056,#4798d3);flex:0 0 auto}
/* #9AA0A8 on the panel gradient measured 2.37:1; #565D66 (already the
   MeetPass body colour) measures 6.00:1 */
.mp-note{font-size:var(--fs-2);color:#565d66}

/* ---------- catalogue (ported from v3) ---------- */
.subhead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--line);padding-top:clamp(32px,3.5vw,48px)}
.subhead h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.015em}
.count{color:var(--muted);white-space:nowrap}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.pcard{background:var(--canvas);border-radius:var(--r-4);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);transition:transform .2s}
.pcard:hover{transform:translateY(-4px)}
.pcard-head{display:flex;justify-content:space-between;align-items:center;gap:var(--gap)}
.pcard-head .icon{width:42px;height:42px;border-radius:var(--r-3);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.pcard-head .icon svg{width:20px;height:20px}
.pcard-head .tag{color:var(--muted);text-align:right}
.pcard h3{font-size:var(--fs-6)}
.pcard p{font-size:var(--fs-4);color:var(--muted);flex:1}
.upg{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--mono);font-size:var(--fs-2);color:var(--ink);border-top:1px solid var(--line);padding-top:var(--s-3)}
.upg svg{width:14px;height:14px;flex:0 0 auto}

/* ---------- services ---------- */
.svc{display:flex;flex-direction:column;margin-top:var(--s-9);border-top:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:56px 46px 1fr 2fr auto;gap:var(--s-6);align-items:center;padding:var(--s-6) var(--s-1);border-bottom:1px solid var(--line);transition:padding-left .2s}
.svc .sic{width:46px;height:46px;border-radius:var(--r-3);background:var(--canvas);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.svc .sic svg{width:21px;height:21px}
.svc a:hover{padding-left:var(--s-4)}
.svc a:hover .sn{color:var(--muted)}
.svc .idx{font-family:var(--mono);font-size:var(--fs-3);color:var(--muted)}
.svc .sn{font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;transition:color .18s}
.svc .sd{color:var(--muted);font-size:var(--fs-4)}
.svc .go{font-size:var(--fs-7)}

/* ---------- process (signature) ---------- */
.proc .in{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(32px,4vw,72px);align-items:start}
/* SC-116 overflow:hidden silently clipped the code column at 375px */
.codewin{background:var(--dark-card);border:1px solid var(--dark-line);border-radius:var(--r-4);overflow-x:auto;overflow-y:hidden;font-family:var(--mono);font-size:clamp(12.5px,1.15vw,14.5px);line-height:1.5}
.codewin .bar{display:flex;align-items:center;gap:var(--s-2);background:rgba(250,249,246,.05);border-bottom:1px solid var(--dark-line);padding:var(--s-3) var(--s-5);font-size:var(--fs-2);color:#96917F}
.codewin .bar i{width:10px;height:10px;border-radius:50%;background:#96917F;opacity:.5;font-style:normal}
.codewin .bar i:first-child{background:#F3F1EC;opacity:1}
.codewin .bar span{margin-left:var(--s-2)}
.codewin ol{list-style:none;padding:var(--s-6) 0;counter-reset:ln}
.codewin li{counter-increment:ln;display:grid;grid-template-columns:54px 1fr;padding:7px var(--s-6) 7px 0}
.codewin li::before{content:counter(ln,decimal-leading-zero);text-align:right;padding-right:var(--s-5);color:#9A948B}
.codewin li::before{content:counter(ln,decimal-leading-zero) / "";text-align:right;padding-right:var(--s-5);color:#9A948B}
.codewin .fn{color:#F3F1EC}
.codewin .kw{color:#F3F1EC;font-style:italic}
.codewin .cm{color:#96917F;display:block;padding-left:0;white-space:normal}
.proc-copy .lead{margin-top:var(--s-6)}

/* ---------- story & insights ---------- */
.posts{display:flex;flex-direction:column;margin-top:var(--tap);border-top:1px solid var(--line)}
.posts a{display:grid;grid-template-columns:200px 1fr auto;gap:var(--s-6);align-items:baseline;padding:var(--s-6) var(--s-1);border-bottom:1px solid var(--line);transition:padding-left .2s}
.posts a:hover{padding-left:var(--s-4)}
.posts a:hover .pt{color:var(--muted)}
.posts .cat{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted)}
.posts .pt{font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:-.015em;transition:color .18s}
.posts .go{font-size:var(--fs-6)}

/* ---------- proof / work marquee (ported from v2) ---------- */
.card--dark .btn.ghost{color:#F3F1EC;box-shadow:inset 0 0 0 1.5px #F3F1EC}
.card--dark .btn.ghost:hover{background:#F3F1EC;color:var(--ink)}
.workband{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.worktrack{display:flex;gap:var(--s-4);width:max-content;animation:wmarq 72s linear infinite}
.wcard .whead{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:var(--gap)}
.wtag{color:#E6E3DC;background:rgba(33,31,27,.55);border:1px solid rgba(250,249,246,.16);padding:var(--s-1) var(--s-3);border-radius:var(--r-full);white-space:nowrap}
.wgo{opacity:0;transition:opacity .2s,transform .2s;transform:translate(-5px,5px);color:#F3F1EC;font-size:var(--fs-6)}
.wcard:hover .wgo{opacity:1;transform:none}
.workband:hover .worktrack{animation-play-state:paused}
.wcard{width:318px;min-height:295px;background:var(--dark-card);border:1px solid var(--dark-line);border-radius:var(--r-4);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4);transition:border-color .2s;position:relative;overflow:hidden}
.wcard::before{content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;opacity:.42;transition:opacity .35s,transform .6s ease}
.wcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,22,20,.18) 0%,rgba(23,22,20,.62) 55%,rgba(23,22,20,.92) 100%)}
.wcard:hover{border-color:rgba(250,249,246,.4)}
.wcard:hover::before{opacity:.6;transform:scale(1.05)}
/* SC-084 the 16 work-card titles are <p> today and <h3> after the markup pass */
.wcard p,.wcard h3{font-size:var(--fs-5);line-height:1.4;font-weight:500;letter-spacing:-.01em;flex:1;position:relative;z-index:1;display:flex;align-items:flex-end;text-shadow:0 1px 16px rgba(0,0,0,.6);color:#F3F1EC}
/* #C9C9C9 was the last neutral-cool grey in a warm palette; #CBC6BC = 10.6:1 on --ink */
.wcard span{color:#CBC6BC;position:relative;z-index:1}

/* ---------- work cards: layout without photography ----------
   site.css builds .wcard for a background photo: h3 gets flex:1 + align-items:flex-end
   so the headline sits at the BOTTOM and the top of the card is left clear for the
   image behind it. No card sets --img yet, so .wcard::before resolves to
   background-image:none and that reserved area is simply empty — the gap.

   Below: let the content flow from the top and pin only the client name to the
   bottom. The photo layout returns automatically the moment a card gets --img,
   via the attribute selector at the end. */
.wcard h3,.wcard p{
  flex:0 0 auto;
  display:block;
  align-items:initial;
}
.wcard > span:last-child{ margin-top:auto; }
.wcard{ min-height:238px; }

/* Restores the original photo composition per-card once an image is supplied,
   e.g. <a class="wcard" style="--img:url(assets/img/work/kahramaa.jpg)"> */
.wcard[style*="--img"] h3,.wcard[style*="--img"] p{
  flex:1 1 0%;
  display:flex;
  align-items:flex-end;
}
.wcard[style*="--img"]{ min-height:295px; }

@keyframes wmarq{to{transform:translateX(-50%)}}
.clientstrip{overflow:hidden;margin-top:clamp(22px,3vw,36px);border-top:1px solid var(--dark-line);padding-top:clamp(20px,2.5vw,30px)}
.clienttrack{display:inline-flex;white-space:nowrap;animation:wmarq 80s linear infinite;font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;color:#96917F}
.clienttrack span{padding-right:2.6em}
.clienttrack span::after{content:"\00B7";padding-left:2.6em;color:#57534C}
.clienttrack span::after{content:"\00B7" / "";padding-left:2.6em;color:#57534C}

/* ---------- CTA v2 ---------- */
.cta2{position:relative;overflow:hidden}
.cta2 .in{padding-bottom:0}
.cta2-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.cta2 h2{font-size:clamp(38px,4.9vw,66px);line-height:1.04}
.cta2-side{display:flex;flex-direction:column;gap:var(--s-6)}
.cta2-side .lead{color:var(--muted)}
.cta2-side .actions{display:flex;flex-direction:column;gap:var(--gap);align-items:stretch}
.cta2-side .actions .btn{justify-content:center}
.cta2 .note{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted)}
/* .cta2 .skyline removed — the closing CTA no longer carries a skyline */
@media (max-width:900px){.cta2-grid{grid-template-columns:1fr}}

/* ---------- glass cards ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .flagship,.duo-col{background:rgba(33,31,27,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(250,249,246,.18);transform:translateZ(0)}
  .codewin:not(.gsterm){background:rgba(28,26,23,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateZ(0)}
  .gsterm{background:var(--dark-card);-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
  .card--dark .chip,.aisec .chip{background:rgba(33,31,27,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateZ(0)}
  .pcard{background:rgba(250,249,246,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(23,22,20,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);transform:translateZ(0)}
  .pcard-head .icon{background:rgba(255,255,255,.65)}

  /* ---- the same glass material, extended to the rest of the site ----
     Note on what this actually does: backdrop-filter only produces a visible
     BLUR where something textured sits behind the card. That is true on the
     homepage .aisec (.ai-bg) and on the client wall (.glow + .pattern). On the
     flat sections the blur is a no-op and the visible change is the
     translucency, the lighter border and the inset top highlight — which is
     what makes these read as the same material as the homepage cards. */

  /* light surfaces — cards INSIDE a section (not the <section class="card"> itself) */
  main>section:not(.dark) .card,
  .cloudcard{
    background:rgba(250,249,246,.55);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(23,22,20,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    transform:translateZ(0);
  }
  /* dark surfaces */
  main>section.dark .card,
  .indslide{
    background:rgba(33,31,27,.42);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-color:rgba(250,249,246,.18);
    transform:translateZ(0);
  }
  /* the client wall genuinely has texture behind it (.glow + .pattern) */
  .logo-tile{
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transform:translateZ(0);
  }
}

/* ---------- footer ---------- */
footer{margin:var(--gap) auto;width:calc(100% - 2*clamp(10px,3vw,56px));border-radius:var(--r);background:var(--dark);color:#F3F1EC}
footer .in{max-width:1220px;margin:0 auto;padding:clamp(52px,6vw,84px) clamp(22px,4.5vw,64px) var(--s-8)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--tap)}
.fbrand img{height:40px;width:auto}
.fbrand .tagline{margin-top:var(--s-5);color:#B7B2A8}
.fbrand .tagline b{color:#F3F1EC}
.fbrand p{font-family:var(--mono);font-size:var(--fs-2);color:#96917F;margin-top:var(--s-6);line-height:1.7}
.fcol .k{color:#96917F;margin-bottom:var(--s-5)}
/* SC-074 15.5px x 1.55 + 10px padding = 34px tall with zero vertical gap.
   10px padding + min-height:44px + a 2px rule between adjacent links. */
.fcol a{display:flex;align-items:center;min-height:var(--tap);padding:var(--s-2) 0;font-size:var(--fs-4);color:#D8D4CC;transition:color .15s}
.fcol a+a{margin-top:2px}
.fcol a::before{content:"\21B3\00A0\00A0";font-family:var(--mono);color:#96917F}
.fcol a::before{content:"\21B3\00A0\00A0" / "";font-family:var(--mono);color:#96917F}
.fcol a:hover{color:#F3F1EC}
.fbot{border-top:1px solid var(--dark-line);margin-top:var(--s-10);padding-top:var(--s-6);font-family:var(--mono);font-size:var(--fs-2);color:#96917F;display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}

/* ---------- reveal ---------- */
/* Reveal-on-scroll is opt-in per element (JS adds .rv-armed only to content below the fold).
   Anything not armed is visible. A failsafe can cancel the whole system at any time. */
.rv{opacity:1;transform:none}
html.js .rv.rv-armed{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js .rv.rv-armed.vis{opacity:1;transform:none}
html.no-reveal .rv,html.no-reveal .rv.rv-armed,html.no-reveal .reveal{opacity:1 !important;transform:none !important;transition:none !important}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  /* the CTA skyline must stay visible under reduced motion, just unanimated.
     (the hero pixel wordmark IS the tagline, so it stays visible — just unanimated) */
  .pixtag,.pixtag rect,.px rect{animation:none;opacity:1;transform:none}
  .float,.live,.worktrack,.clienttrack,.caret{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* SC-116 .flagship collapses here, not at 640 — its .side column was
     ~232px of 13px monospace between 641px and 900px. */
  .gs-grid,.duo,.band,.mpsec .mp-in,.proc .in,.flagship{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .svc a{grid-template-columns:46px 1fr auto;grid-template-rows:auto auto}
  .svc .idx{display:none}
  .svc .sd{grid-column:2/3}
  .posts a{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .posts .cat{grid-column:1/2}
}
@media (max-width:640px){
  body{font-size:16px}
  /* SC-001 nav links are now the mobile menu panel, not hidden */
  .topbar{gap:var(--s-4);justify-content:space-between}
  .pgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  /* SC-116 32px line numbers leave the code column ~40 characters at 375px */
  .codewin li{grid-template-columns:32px 1fr}
  .codewin li::before{padding-right:var(--s-3)}
}
/* ---------- nav dropdowns ---------- */
.navlinks{overflow:visible}
.nvi{position:relative}
/* SC-074 6px padding gave a 33.7px control; 8px/12px clears the 24px
   WCAG 2.5.8 floor and coarse pointers get the full 44px from legacy.css */
.nvi .ntop{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-3);font-weight:500;padding:var(--s-2) var(--s-3);border-radius:var(--r-full);white-space:nowrap;transition:background .18s;color:var(--ink)}
.navlinks a{color:var(--ink)}
.nvi .ntop:hover{background:rgba(23,22,20,.07)}
.carr{width:9px;height:6px;opacity:.55}
.drop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);min-width:225px;background:#FAF9F6;border:1px solid rgba(23,22,20,.14);border-radius:var(--r-3);padding:var(--s-2);box-shadow:0 24px 64px rgba(23,22,20,.28),0 2px 6px rgba(23,22,20,.12);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:70}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .drop{background:#FAF9F6;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
}
.nvi:hover .drop,.nvi:focus-within .drop,.nvi[data-open="true"] .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nvi::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--s-4)}
.drop a{display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-2);font-size:var(--fs-3);font-weight:500;white-space:nowrap;transition:background .15s}
.drop a:hover{background:rgba(23,22,20,.07)}

/* nav responsive compaction */
@media (max-width:1460px){
  .topbar{gap:6px;padding:9px var(--gap) 9px var(--s-4)}
  /* SC-074 the compaction no longer shrinks the hit box, only the gutter */
  .nvi .ntop{font-size:var(--fs-3);padding:var(--s-2) var(--s-2)}
  .topbar .btn{padding:var(--s-2) var(--s-4);font-size:var(--fs-3);margin-left:2px}
  .topbar .logo img{height:26px}
}
@media (max-width:1150px){
  .topbar .navtoggle{display:inline-flex}
  .topbar .navlinks{position:fixed;left:10px;right:10px;top:calc(clamp(22px,3.4svh,34px) + 62px);max-height:calc(100svh - clamp(22px,3.4svh,34px) - 84px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:var(--gap);border-radius:var(--r-5);background:rgba(250,249,246,.97);border:1px solid rgba(23,22,20,.08);box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .topbar[data-open="true"] .navlinks{opacity:1;visibility:visible;transform:none}
  .navlinks .nvi{position:static}
  .navlinks .nvi .ntop{display:flex;justify-content:space-between;width:100%;font-size:var(--fs-4);padding:var(--s-3) var(--s-4)}
  .navlinks .nvi .carr{display:none}
  .navlinks .drop{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 var(--s-2) var(--s-4);-webkit-backdrop-filter:none;backdrop-filter:none}
  .navlinks .drop a{padding:var(--s-2) var(--s-3);font-size:var(--fs-4);color:var(--muted)}
  .navlinks .nvi::after{display:none}
}

/* ---------- SC-006 focus visibility (site had none) ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-1)}
.card--dark :where(a,button,input,select,textarea,[tabindex]):focus-visible,
main>section.dark :where(a,button,input,select,textarea,[tabindex]):focus-visible,
footer :where(a,button,[tabindex]):focus-visible{outline-color:#FAF9F6}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skiplink{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#FAF9F6;padding:var(--s-3) var(--s-5);border-radius:var(--r-full);font-weight:500;transition:top .18s}
.skiplink:focus{top:12px}

/* ---------- SC-001 mobile menu control ---------- */
.navtoggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border:0;background:transparent;color:var(--ink);border-radius:var(--r-full);cursor:pointer;margin-left:auto;transition:background .18s}
.navtoggle:hover{background:rgba(23,22,20,.07)}
.navtoggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.navtoggle svg path{transition:transform .22s ease,opacity .18s ease;transform-origin:center}
.topbar[data-open="true"] .navtoggle svg .l1{transform:translateY(5px) rotate(45deg)}
.topbar[data-open="true"] .navtoggle svg .l2{opacity:0}
.topbar[data-open="true"] .navtoggle svg .l3{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1150px){
  .topbar{width:calc(100% - 20px);max-width:none;justify-content:space-between;gap:var(--s-2);padding:9px var(--gap) 9px var(--s-4)}
  /* Visual order matches DOM order matches focus order: logo | CTA | menu.
     The auto margin groups the CTA and the menu button together on the right. */
  .topbar .logo{order:1}
  .topbar .btn{order:2;margin-left:auto}
  .topbar .navtoggle{order:3;margin-left:0}
}
@media (max-width:520px){
  .topbar .btn{padding:var(--s-2) 14px;font-size:var(--fs-3)}
  .topbar .logo img{height:24px}
}
@media (prefers-reduced-motion: reduce){
  .navlinks,.navtoggle svg path{transition:none}
}

/* SC-038 belt-and-braces: kill decorative motion when the user asks for less */
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}

/* =====================================================================
   SC-112 print / save-as-PDF
   Procurement and government buyers circulate PDFs of vendor pages.
   Everything must be black on white, un-revealed, and un-chromed.
   ===================================================================== */
@media print{
  @page{margin:14mm}
  html,body{background:#fff !important;color:#000 !important;font-size:11pt}
  /* content must never print blank, whatever the reveal system was doing */
  .rv,.rv.rv-armed,html.js .rv.rv-armed,.reveal,.heroanim>*{
    opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
  /* chrome + decoration */
  .topbar,#prog,.orb,.gridbg,.skiplink,.navtoggle,.ai-bg,.skyline,
  .qatar-wall .glow,.qatar-wall .pattern,.wcard::before,.wcard::after,.drop{display:none !important}
  /* surfaces */
  main,footer,main>section,main>section.dark,main>section.pagehero,
  header.hero,.card,.card--dark,.card--tint,.mpsec,.proof,.qatar-wall,
  .flagship,.duo-col,.codewin,.wcard,.pcard,.wizard,.mp-panel{
    background:#fff !important;color:#000 !important;box-shadow:none !important;
    border-radius:0 !important;border-color:#999 !important}
  main{display:block;padding:0;gap:0}
  main>section,header.hero,footer{padding:0 0 18pt;margin:0;width:auto;min-height:0}
  .card>.in,footer>.in,.wrap{padding-left:0;padding-right:0;max-width:none}
  /* gradient-clipped headings print as transparent without this */
  h1,h2,h3,.acc,.macc{background:none !important;-webkit-text-fill-color:#000 !important;color:#000 !important}
  .lead,p,li,.muted,.eyebrow,.sidelabel,.tag,.pill,.chip,.count,.caption,
  .fcol a,.fbot,.card--dark .lead,.dark p,.dark .lead,.pd,.wcard span{color:#000 !important}
  .eyebrow::before,.stats span::before,.duo-col .colhead::before,.fcol a::before{color:#000 !important}
  /* marquees are horizontal tracks; stop them so nothing is cut off */
  .worktrack,.clienttrack{animation:none !important;transform:none !important;
    white-space:normal !important;width:auto !important;flex-wrap:wrap !important;display:flex !important}
  .workband,.clientstrip,.codewin{overflow:visible !important;
    -webkit-mask-image:none !important;mask-image:none !important}
  .wcard{width:auto;min-height:0;break-inside:avoid}
  /* show where links go */
  a[href^="http"]::after{content:" (" attr(href) ")"}
  a[href^="http"]::after{content:" (" attr(href) ")" / "";font-size:9pt;font-family:var(--mono);word-break:break-all}
  .card,.step,.tile,.pcard,.roicard,.score-item,figure,tr{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}

/* ---------- SC-076 grouped nav panels ----------
   Must stay at the very end of this file: .drop--mega and .drop have equal
   specificity (0,1,0), so source order is what makes the panel rules win.
   (The .btn-demo specificity note that lived here is gone with the button:
   the "Book a free demo" topbar CTA was removed.) */
.drop--mega{left:0;transform:translateX(0) translateY(6px);display:grid;
  gap:var(--s-2) var(--s-5);width:max-content;
  max-width:min(760px,calc(100vw - 32px));padding:var(--s-3)}
.drop--2{grid-template-columns:repeat(2,minmax(170px,1fr))}
.drop--3{grid-template-columns:repeat(3,minmax(170px,1fr))}
.nvi:hover .drop--mega,.nvi:focus-within .drop--mega,
.nvi[data-open="true"] .drop--mega{transform:translateX(0) translateY(0)}
.drop--right{left:auto;right:0}
.dropk{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0;
  padding:var(--s-2) var(--s-3) var(--s-1)}
@media (max-width:1150px){
  .navlinks .drop--mega{display:block;max-width:none;padding:0 0 var(--s-2) var(--s-4)}
  .navlinks .dropk{padding:var(--s-3) var(--s-3) var(--s-1)}
}

/* the nav carries two CTAs since SC-040; the secondary one yields before the primary */
@media (max-width:1360px){ .topbar .btn.ghost{display:none} }

/* ---------- language switch (EN <-> AR) ----------
   Shown only on pages that actually have a counterpart in the other
   language, so it can never point at a page that does not exist. */
.langswitch{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:var(--mono);font-size:var(--fs-3);font-weight:500;
  padding:7px 11px;border-radius:var(--r-full);
  border:1px solid var(--line);color:var(--ink);
  transition:background .18s,border-color .18s;white-space:nowrap;
}
.langswitch:hover{background:rgba(23,22,20,.07);border-color:var(--ink)}
.langswitch svg{width:14px;height:14px;opacity:.7}
@media (max-width:1150px){ .langswitch span{display:none} }

/* ===========================================================================
   Legal documents (privacy, terms)
   Long-form numbered prose. Kept in site.css rather than legacy.css so the
   rules exist on every page in both languages, not just the 42 that load the
   legacy sheet.
   =========================================================================== */
.legal{max-width:76ch;margin-inline:auto}
.legal .stamp{font:500 var(--fs-2)/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.legal .stamp b{color:var(--ink);font-weight:500}

/* table of contents */
.legal-toc{margin:var(--s-7) 0 var(--s-9);padding:var(--s-6) var(--s-7);
  background:var(--card);border-radius:var(--r-4)}
.legal-toc h2{font:500 var(--fs-3)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s-4)}
.legal-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
  columns:2;column-gap:var(--s-7)}
.legal-toc li{counter-increment:toc;break-inside:avoid;margin:0 0 var(--s-2)}
.legal-toc a{display:flex;gap:var(--s-3);font-size:var(--fs-4);color:var(--ink);
  text-decoration:none;padding:3px 0;line-height:1.45}
.legal-toc a::before{content:counter(toc);flex:none;min-width:1.6em;
  font:500 var(--fs-2)/1.7 var(--mono);color:var(--muted)}
.legal-toc a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){ .legal-toc ol{columns:1} .legal-toc{padding:var(--s-5)} }

/* numbered sections */
.legal section{counter-increment:lsec;padding-top:var(--s-9);scroll-margin-top:96px}
.legal{counter-reset:lsec}
.legal section > h2{font-size:var(--fs-7);font-weight:500;letter-spacing:-.015em;
  line-height:1.25;margin:0 0 var(--s-4);display:flex;gap:var(--s-4);align-items:baseline}
.legal section > h2::before{content:counter(lsec);flex:none;
  font:500 var(--fs-3)/1.4 var(--mono);color:var(--muted)}
.legal h3{font-size:var(--fs-5);font-weight:500;margin:var(--s-7) 0 var(--s-3)}
.legal p{font-size:var(--fs-5);line-height:1.7;color:var(--ink);margin:0 0 var(--s-4)}
.legal p.note{font-size:var(--fs-4);color:var(--muted)}
.legal a{color:var(--ink);text-underline-offset:3px}
.legal ul,.legal ol{margin:0 0 var(--s-4);padding-inline-start:var(--s-6)}
.legal li{font-size:var(--fs-5);line-height:1.7;margin-bottom:var(--s-3)}
.legal li::marker{color:var(--muted)}
.legal strong,.legal b{font-weight:500}

/* the callout used for "what we do NOT do" and the regulator address */
.legal .lbox{background:var(--card);border-radius:var(--r-4);
  padding:var(--s-6) var(--s-7);margin:var(--s-6) 0}
.legal .lbox :last-child{margin-bottom:0}
.legal .lbox--ink{background:var(--dark);color:#FAF9F6}
.legal .lbox--ink p,.legal .lbox--ink li{color:rgba(250,249,246,.82)}
.legal .lbox--ink strong,.legal .lbox--ink a{color:#FAF9F6}
.legal .lbox--ink h3{color:#FAF9F6;margin-top:0}

/* the data table */
.legal .ltable{width:100%;border-collapse:collapse;margin:var(--s-5) 0 var(--s-6);
  font-size:var(--fs-4)}
/* logical padding, so the column gutter falls on the correct side under RTL */
.legal .ltable th{text-align:start;font:500 var(--fs-2)/1.4 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
  padding-block:0 var(--s-3);padding-inline:0 var(--s-5);
  border-bottom:1px solid var(--line);vertical-align:bottom}
.legal .ltable td{padding-block:var(--s-4);padding-inline:0 var(--s-5);
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.legal .ltable th:last-child,.legal .ltable td:last-child{padding-inline-end:0}
@media (max-width:620px){
  .legal .ltable,.legal .ltable tbody,.legal .ltable tr,.legal .ltable td{display:block;width:100%}
  .legal .ltable thead{display:none}
  .legal .ltable tr{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
  .legal .ltable td{border:0;padding:0 0 var(--s-2)}
  .legal .ltable td::before{content:attr(data-l) " · ";font:500 var(--fs-2) var(--mono);
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* legal links in the footer bottom row — their own full-width line under the
   contact details, so the existing three columns keep their spacing */
.fbot .flegal{flex-basis:100%;order:1;display:flex;gap:var(--s-3);flex-wrap:wrap;
  align-items:center;margin-top:var(--s-2);opacity:.9}
.fbot .flegal a{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(250,249,246,.25);padding-bottom:1px}
.fbot .flegal a:hover,.fbot .flegal a:focus-visible{color:#FAF9F6;border-bottom-color:#FAF9F6}
.fbot .flegal .sep{opacity:.45}


/* ===========================================================================
   FREE AI AUDIT — PAUSED (Aug 2026)
   The offering is on hold, not retired. Rather than stripping 244 links out of
   90 pages and having to put them back, every entry point is hidden from this
   single rule: the AI dropdown item, the footer link, and all in-page CTAs.

   TO BRING THE AUDIT BACK: delete this whole block, remove the banner from
   audit.html + ar/audit.html, set their robots meta back to "index, follow",
   and re-run the sitemap generator. See AUDIT-PAUSED.md.
   =========================================================================== */
a[href$="audit.html"],
a[href*="audit.html?"]{display:none !important}
/* the notice shown on audit.html itself while the offering is paused */
.auditpaused{max-width:820px;padding:var(--s-5) var(--s-6);
  /* sits above the page hero, so it must clear the fixed topbar itself —
     same allowance the hero uses in header.hero .in */
  margin:clamp(84px,11svh,112px) auto var(--s-4);
  background:var(--card);border-radius:var(--r-4);border:1px solid var(--line)}
.auditpaused p{font-size:var(--fs-4);line-height:1.65;color:var(--ink);margin:0}
.auditpaused a{text-decoration:underline;text-underline-offset:3px}


/* ---------------------------------------------------------------------------
   Genesis → Source Code heritage lockup (about page).
   Two plates of equal height with the arrow centred between them, so neither
   mark floats against the other. Scoped to .heritage: the bare .scbadge is
   also used by the case-study pages and must keep its own sizing.
   --------------------------------------------------------------------------- */
.heritage{align-items:stretch}
.heritage .hplate,
.heritage .scbadge{display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(200px,28vw,292px);min-height:104px;padding:var(--s-4) var(--s-6);
  border-radius:var(--r-4)}
.heritage .hplate img,
.heritage .scbadge img{height:auto;width:auto;max-height:60px;max-width:100%;
  object-fit:contain;border-radius:0;margin:0}
/* Each mark needs its own ground: the Genesis wordmark is white-on-dark, the
   Source Code lockup is dark-on-white. #272425 is sampled from the Genesis
   artwork itself, so plate and image blend into one panel rather than showing
   a rectangle inside a rectangle. */
.heritage .hplate{background:#272425}
.heritage .scbadge{background:#fff}
.heritage .scbadge img{max-height:46px}   /* the lockup is 4.36:1, so cap by height */
.heritage .arrow{display:inline-flex;align-items:center}
@media (max-width:620px){
  .heritage .hplate,.heritage .scbadge{min-width:0;width:100%;min-height:88px}
  .heritage .arrow{transform:rotate(90deg)}
}