/* Nazam LLC — main stylesheet
   Editorial dark theme: hero, wire ticker, about, capabilities, labs,
   method, work, testimonial, faq, cta, footer, reveal + responsive. */

:root {
  --paper: #faf9f6;
  --paper-warm: #ffffff;
  --paper-dark: #f1efe9;
  --ink: #15161a;
  --ink-soft: #3a3f47;
  --ink-mute: #5f6570;
  --ink-faint: #6b727c;
  --coral: #bf3a1e;
  --coral-soft: #d9542f;
  --mustard: #a8760c;
  --olive: #5b6135;
  --bone: #efece4;
  --line: rgba(21,22,26,0.13);
  --line-soft: rgba(21,22,26,0.07);
  --line-faint: rgba(21,22,26,0.04);
  --shadow: 0 24px 48px -28px rgba(21,22,26,0.22);
  /* The one inverted band (Selected Work) plus anything sitting on a dark
     image: these need the light ink and the brighter coral. */
  --band: #0d0c09;
  --band-ink: #e8e0ca;
  --coral-on-band: #f07a68;
  --serif: 'Playfair Display','Times New Roman',serif;
  --sans: 'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body: 'Inter',-apple-system,system-ui,sans-serif;
  --mono: 'JetBrains Mono','SF Mono',Menlo,monospace;

  /* Type scale. Every font-size on the site maps onto one of these steps.
     Nothing below 12px: the uppercase micro-labels carry 0.16em tracking,
     which needs the extra size to stay readable on a phone. */
  --fs-micro: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-d3: clamp(26px,2.4vw,38px);
  --fs-d2: clamp(36px,4.4vw,62px);
  --fs-d1: clamp(40px,5vw,70px);
  --fs-num: 78px;
  --fs-foot-mega: clamp(70px,13vw,200px);

  /* Radius scale: four steps plus two shape primitives (50%, 999px). */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 32px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--body);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(circle at 12% 18%,rgba(240,122,104,0.04) 0,transparent 32%),radial-gradient(circle at 88% 72%,rgba(180,160,110,0.05) 0,transparent 36%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.57  0 0 0 0 0.48  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:auto,auto,240px 240px;mix-blend-mode:screen;opacity:0.7}

.shell{position:relative;z-index:2}
.container{max-width:1360px;padding:0 64px;margin:0 auto;position:relative}

.side-rail{position:fixed;top:0;bottom:0;width:36px;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center}
.side-rail.right{right:0;border-left:1px solid var(--line-faint)}
.side-rail.left{left:0;border-right:1px solid var(--line-faint)}
.side-rail .rail-text{font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:0.42em;text-transform:uppercase;color:var(--ink-faint);writing-mode:vertical-rl;white-space:nowrap}
.side-rail.right .rail-text{transform:rotate(180deg)}

.topbar{border-bottom:1px solid var(--line);padding:10px 0;background:var(--paper);position:relative;z-index:4}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint)}
.topbar-inner b{color:var(--ink);font-weight:600}
.topbar-inner .coral{color:var(--coral)}
.topbar-inner>span{white-space:nowrap}
.topbar-inner .mid{display:inline-flex;gap:26px}
.topbar-inner .mid>span{white-space:nowrap}
.topbar-inner .right{display:inline-flex;gap:18px;align-items:center}
.topbar-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color 160ms ease,border-color 160ms ease}
.topbar-link:hover{color:var(--coral);border-bottom-color:var(--coral)}
.topbar .pulse{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;margin-right:6px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}

.nav{padding:22px 0;position:sticky;top:0;z-index:50;background:var(--paper);transform:translateY(0);transition:transform 360ms cubic-bezier(0.22,0.61,0.36,1),box-shadow 220ms ease,border-color 220ms ease;border-bottom:1px solid transparent;will-change:transform}
.nav.is-hidden{transform:translateY(-100%);pointer-events:none;box-shadow:none}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:700;letter-spacing:-0.01em;color:var(--ink);text-decoration:none;font-size:var(--fs-md);flex-shrink:0}
.brand-mark{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:50%;font-family:var(--serif);font-style:italic;font-size:var(--fs-md);color:var(--ink);background:transparent}
.brand-meta{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);line-height:1.3;margin-left:4px;border-left:1px solid var(--line);padding-left:14px}
.brand-meta b{display:block;color:var(--ink);font-weight:600}
.nav-links{display:flex;gap:38px;list-style:none}
.nav-links a{color:var(--ink);text-decoration:none;font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;transition:color 0.18s ease}
.nav-links a:hover{color:var(--coral)}
.nav-side{display:inline-flex;align-items:center;gap:18px}
.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;text-decoration:none;white-space:nowrap;flex-shrink:0}

.label{font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:12px}
.label::before{content:'';width:18px;height:1px;background:var(--coral);display:inline-block}
.display{font-family:var(--sans);font-weight:800;letter-spacing:-0.028em;color:var(--ink);line-height:1.0}
.display em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--coral)}
.display .dot{color:var(--coral)}
.lead{font-family:var(--body);font-size:var(--fs-base);line-height:1.55;color:var(--ink-soft);max-width:36ch}
.meta{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint)}
.coord{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.04em;color:var(--ink-faint)}
.roman{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--coral)}

.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;letter-spacing:-0.005em;text-decoration:none;border:1px solid transparent;transition:transform 0.18s ease,background 0.18s ease,color 0.18s ease;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--coral);color:#ffffff;box-shadow:0 14px 26px -16px rgba(237,111,92,1)}
.btn-primary:hover{transform:translateY(-1px);background:#e25e4a}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(21,22,26,0.24)}
.btn-ghost:hover{background:rgba(21,22,26,0.05)}

/* HERO */
.hero .sec-rule{margin-bottom:14px}
.hero{position:relative;padding:0;min-height:calc(100vh - 140px);display:flex;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
.hero>.container.hero-grid{flex:1 1 auto}
.hero>.container{width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch;width:100%;position:relative}
.hero-copy{padding:2vh 0 4vh;display:flex;flex-direction:column;position:relative}
.hero-copy .label{margin-bottom:28px}
.hero-copy .lead{margin-bottom:30px;max-width:38ch;font-size:var(--fs-base)}
.hero h1{font-size:var(--fs-d1);line-height:1.0;margin-bottom:28px}
.hero-actions{display:inline-flex;align-items:center;gap:14px;margin-bottom:38px}
.hero-stats{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;margin-bottom:28px}
.hero-stats .stat{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.hero-stats .stat .ring{width:34px;height:34px;border-radius:50%;border:1px dashed var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:var(--fs-micro);font-weight:700;flex-shrink:0}
.hero-stats .stat .ring.solid{border-style:solid}
.hero-stats .stat .ring.coral{border-color:var(--coral);color:var(--coral)}
.hero-stats .stat-label{font-family:var(--sans);font-size:var(--fs-micro);line-height:1.25;color:var(--ink-soft);letter-spacing:0.04em;text-transform:uppercase}
.hero-stats .stat-label b{display:block;font-weight:700;color:var(--ink);font-size:var(--fs-micro)}
.hero-foot{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.hero-art{position:relative;height:calc(100vh - 160px);max-height:860px;margin-left:auto;margin-right:-12px;width:100%;overflow:visible;display:flex;align-items:center;justify-content:center}
.hero-art svg{width:80%;max-width:480px;height:auto}
.annot{position:absolute;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);line-height:1.4;white-space:nowrap}
.annot-tl{top:14px;left:14px}
.annot-tr{top:14px;right:14px;text-align:right}
.annot-bl{bottom:14px;left:14px}
.annot-br{bottom:14px;right:14px;text-align:right}
.hero-art .index{position:absolute;right:12px;top:36%;font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:0.16em;color:rgba(232,224,202,0.78);text-transform:uppercase;background:rgba(15,14,11,0.88);padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-sm);backdrop-filter:blur(4px)}
.hero-art .index span{display:block;line-height:1.6}
.hero-art .index span .n{color:var(--coral-on-band);margin-right:6px;font-weight:700}
.hero-art .index span.on{color:var(--band-ink);font-weight:700}
.hero-art .corner{position:absolute;width:22px;height:22px;border-color:var(--ink-faint);border-style:solid;border-width:0}
.hero-art .corner.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.hero-art .corner.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hero-art .corner.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.hero-art .corner.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

section{position:relative;padding:130px 0}
section.tight{padding:90px 0}
.sec-rule{border-top:1px solid var(--line);padding-top:18px;margin-bottom:48px;display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint)}
.sec-rule .roman{font-family:var(--serif);font-style:italic;color:var(--coral);font-size:var(--fs-sm);letter-spacing:0.05em;text-transform:none}
.sec-rule .meta-grp{display:inline-flex;gap:26px}
.sec-rule .dot-mark{color:var(--coral)}
.section-header{margin-bottom:70px}
.section-header .label{margin-bottom:32px}
.section-header h2{font-size:var(--fs-d1);max-width:22ch}
.section-header .lead{margin-top:22px}

/* WIRE */
.wire{border-bottom:1px solid var(--line);padding:26px 0 28px;background:var(--paper);position:relative;overflow:hidden}
.wire-inner{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:32px;align-items:center}
.wire-left{display:inline-flex;align-items:center;gap:14px;border-right:1px solid var(--line);padding-right:24px;min-height:56px}
.wire-mark{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wire-pulse{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;animation:pulse 2.4s ease-in-out infinite}
.wire-title{font-family:var(--sans);font-size:var(--fs-micro);line-height:1.4;display:flex;flex-direction:column;gap:3px}
.wire-title b{color:var(--ink);font-weight:700;letter-spacing:0.18em;text-transform:uppercase}
.wire-title span{color:var(--ink-faint);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase}
.wire-rows{display:grid;gap:8px;min-width:0}
.wire-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)}
.marquee-track{display:inline-flex;align-items:center;gap:36px;width:max-content;white-space:nowrap;animation:marquee-x 52s linear infinite;will-change:transform}
.wire-row.reverse .marquee-track{animation-direction:reverse;animation-duration:64s}
.wire-row:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wire-item{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.04em;color:var(--ink-mute);text-decoration:none;flex-shrink:0}
.wire-item .wire-dot{color:var(--coral);font-size:var(--fs-base);line-height:0;position:relative;top:-1px;margin-right:2px}
.wire-item .wire-coord{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:0}
.wire-item .wire-name{text-transform:uppercase;letter-spacing:0.18em;color:var(--ink);font-weight:500}
.wire-item .wire-handle{font-family:var(--mono);color:var(--ink);font-size:var(--fs-micro);font-weight:500}
.wire-item .wire-role{text-transform:uppercase;letter-spacing:0.16em;color:var(--coral);font-size:var(--fs-micro)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.about h2{font-size:var(--fs-d1);margin:30px 0 36px}
.about .label{margin-bottom:28px}
.about .lead{margin-bottom:36px;max-width:42ch;font-size:var(--fs-md)}
.about .footer-row{display:flex;align-items:center;gap:20px;margin-top:56px;color:var(--ink-faint);font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase}
.about .footer-row .mark{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:var(--fs-sm);color:var(--ink)}
.about .stamp{margin-left:auto;display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.4}
.about .stamp span:first-child{color:var(--coral)}
.about-art{position:relative;aspect-ratio:1/1;max-width:620px;margin-left:auto}
.about-art .art-placeholder{width:100%;height:100%;background:var(--bone);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.about-caption{position:absolute;right:18px;bottom:4px;font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-faint);text-align:right;letter-spacing:0.06em;line-height:1.45}
.about-caption b{color:var(--ink);display:block}

/* CAPABILITIES */
.capabilities-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.capabilities-art{position:relative;aspect-ratio:1/1;max-width:600px}
.capabilities-art .art-placeholder{width:100%;height:100%;background:var(--bone);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.capabilities-art .ribbon{position:absolute;right:-42px;top:50%;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.42em;text-transform:uppercase;color:var(--ink-faint);writing-mode:vertical-rl;transform:rotate(180deg)}
.capabilities-art .ribbon b{color:var(--coral)}
.capabilities-art .corner{position:absolute;width:22px;height:22px;border-color:var(--ink-faint);border-style:solid;border-width:0}
.capabilities-art .corner.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.capabilities-art .corner.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.capabilities-copy h2{font-size:var(--fs-d1);margin:22px 0 30px}
.cards{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:18px;margin-top:22px}
.card{padding:28px 26px 32px;background:var(--bone);border-radius:var(--r-lg);box-shadow:var(--shadow),inset 0 0 0 1px rgba(21,22,26,0.08);position:relative;overflow:hidden;transition:transform 0.2s ease}
.card:hover{transform:translateY(-3px)}
.card .num{font-family:var(--serif);font-style:italic;font-size:var(--fs-lg);font-weight:500;color:var(--coral);letter-spacing:0.04em;margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline}
.card .num .tag{font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-mute);letter-spacing:0.18em;text-transform:uppercase;font-style:normal;font-weight:500}
.card h3{font-family:var(--sans);font-size:var(--fs-lg);font-weight:700;line-height:1.05;letter-spacing:-0.014em;margin-bottom:14px;min-height:2.1em}
.card p{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.55}
.card .arrow-mark{position:absolute;right:22px;bottom:22px;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:all 0.18s ease}
.card:hover .arrow-mark{background:var(--coral);border-color:var(--coral);color:#ffffff}
.card .arrow-mark svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6}

/* LABS */
.labs-head{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;margin-bottom:48px}
.labs-head h2{font-size:var(--fs-d1)}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.pill{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink-soft);background:transparent;cursor:pointer;transition:all 0.18s ease;display:inline-flex;align-items:center;gap:8px}
.pill:hover{background:rgba(21,22,26,0.05)}
.pill.active{background:var(--coral);border-color:var(--coral);color:#ffffff}
.pill .count{font-size:var(--fs-micro);color:var(--ink-faint);border-left:1px solid var(--line);padding-left:8px}
.pill.active .count{color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.3)}
.labs-meta{display:flex;align-items:flex-start;justify-content:flex-end;gap:22px;margin-bottom:30px}
.labs-meta .ring{width:38px;height:38px;border-radius:50%;border:1px dashed var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:var(--fs-micro);font-weight:700}
.labs-meta .meta-text{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;line-height:1.55;color:var(--ink-faint);max-width:28ch}
.labs-meta .meta-text b{display:block;color:var(--ink)}
.labs-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:22px}
.lab{display:flex;flex-direction:column}
.lab-img{aspect-ratio:4/5;background:var(--bone);border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow);position:relative;display:flex;align-items:center;justify-content:center}
.lab-img svg{width:60%;height:60%;opacity:0.18}
.lab-img .badge{position:absolute;top:12px;left:12px;background:rgba(15,14,11,0.88);color:var(--band-ink);padding:4px 9px;border-radius:var(--r-sm);font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase}
.lab .num-row{font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:0.14em;margin-bottom:8px;display:flex;justify-content:space-between;text-transform:uppercase}
.lab h3{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;line-height:1.25;letter-spacing:-0.014em;margin-bottom:8px;min-height:2.5em}
.lab p{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.55;margin-bottom:14px}
.lab .arrow-mark{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);margin-top:auto;align-self:flex-start}
.lab .arrow-mark svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6}
.labs-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:50px;border-top:1px dashed var(--line);padding-top:26px}
.progress{display:flex;align-items:center;gap:8px}
.progress span{width:26px;height:2px;background:var(--line);border-radius:var(--r-sm)}
.progress span.on{background:var(--coral)}

/* METHOD */
.method-head{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start;margin-bottom:80px}
.method-head h2{font-size:var(--fs-d1)}
.method-head .right{display:flex;align-items:flex-start;gap:14px;padding-top:14px}
.method-head .plus{color:var(--coral);font-size:var(--fs-xl);line-height:1;font-family:var(--sans)}
.method-head .right p{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink-soft);max-width:22ch;line-height:1.55}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:50px;position:relative}
.method-grid::before{content:'';position:absolute;top:60px;left:50px;right:50px;height:1px;background:var(--line-soft)}
.method-step{position:relative}
.method-step .num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--fs-num);color:var(--coral);line-height:0.85;margin-bottom:24px;letter-spacing:-0.02em;background:var(--paper);display:inline-block;padding-right:12px;position:relative;z-index:1}
.method-step h3{font-family:var(--sans);font-size:var(--fs-xl);font-weight:800;letter-spacing:-0.022em;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;padding-right:18px}
.method-step h3 .arrow-r{color:var(--ink-faint);font-size:var(--fs-lg);line-height:1}
.method-step:last-child h3 .arrow-r{display:none}
.method-step p{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.55;margin-bottom:24px;max-width:24ch}
.method-step .img{aspect-ratio:1/1;background:var(--bone);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.method-step .img svg{width:50%;height:50%;opacity:0.15}
.method-foot{margin-top:80px;display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:24px}
.method-foot .left,.method-foot .right{font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:0.18em;text-transform:uppercase}
.method-foot .left{display:inline-flex;align-items:center;gap:12px}
.method-foot .left .ring{width:20px;height:20px;border:1px dashed var(--ink-faint);border-radius:50%}
.method-foot .right b{color:var(--ink)}

/* WORK */
.work{background:var(--band);color:var(--band-ink);border-radius:var(--r-xl);margin:0 64px;overflow:hidden;position:relative;padding:110px 64px}
.work::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.18  0 0 0 0 0.14  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n2)'/></svg>");background-size:240px 240px;opacity:0.7;mix-blend-mode:multiply}
.work-rule{position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(232,224,202,0.18);padding-top:16px;margin-bottom:60px;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:rgba(232,224,202,0.72)}
.work-rule .roman{color:var(--coral);font-family:var(--serif);font-style:italic;font-size:var(--fs-sm);letter-spacing:0.04em;text-transform:none}
.work-grid{display:grid;grid-template-columns:1fr 1.05fr 0.85fr;gap:48px;align-items:center;position:relative}
.work .label{color:var(--coral)}
.work .label::before{background:var(--coral)}
.work-copy h2{color:var(--band-ink);font-family:var(--sans);font-weight:800;font-size:var(--fs-d1);line-height:1.0;letter-spacing:-0.024em;margin:28px 0 36px;}
.work-copy h2 em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--coral-on-light)}
.work-copy h2 .dot{color:var(--coral)}
.work-link{display:inline-flex;align-items:center;gap:18px;color:var(--band-ink);font-family:var(--sans);font-size:var(--fs-md);font-weight:600;text-decoration:none;border-bottom:2px solid var(--coral);padding-bottom:12px;width:fit-content}
.work-link::after{content:'↗';color:var(--coral)}
.work-card{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:32px 30px;position:relative;transform:rotate(-1.2deg);text-decoration:none;display:block;transition:transform 280ms ease,box-shadow 280ms ease}
.work-card:hover{transform:rotate(-1.2deg) translateY(-4px);box-shadow:var(--shadow)}
.work-card.alt{transform:rotate(2.4deg) translateY(20px);padding:28px 26px}
.work-card.alt:hover{transform:rotate(2.4deg) translateY(16px);box-shadow:var(--shadow)}
.work-card .label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.work-card .small-label{font-family:var(--sans);font-size:var(--fs-micro);color:var(--coral);letter-spacing:0.18em;text-transform:uppercase;font-weight:600}
.work-card .index{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:0.04em}
.work-card h3{font-family:var(--sans);font-size:var(--fs-d3);font-weight:800;letter-spacing:-0.022em;line-height:1.05;margin-bottom:14px}
.work-card p{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.55;margin-bottom:22px;max-width:28ch}
.work-card .img{aspect-ratio:4/3;background:var(--bone);border-radius:var(--r-md);overflow:hidden;margin-bottom:22px;display:flex;align-items:center;justify-content:center}
.work-card .img svg{width:40%;height:40%;opacity:0.12}
.work-card .meta-row{display:flex;justify-content:space-between;color:var(--ink-faint);font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.16em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:14px}
.work-card .year{color:var(--coral);font-weight:600}

/* TESTIMONIAL */
.testimonial-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.testimonial-copy h2{font-family:var(--sans);font-size:var(--fs-d2);font-weight:700;letter-spacing:-0.022em;line-height:1.12;margin-bottom:36px}
.testimonial-copy h2 em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--coral)}
.author{display:flex;align-items:center;gap:18px;margin-top:22px}
.author .avatar{width:50px;height:50px;border-radius:50%;background:var(--ink);overflow:hidden;display:inline-flex;align-items:center;justify-content:center;color:var(--paper);font-family:var(--serif);font-style:italic;font-size:var(--fs-xl)}
.author p{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.author p span{display:block;color:var(--ink-mute);font-weight:400}
.divider{border-top:1px solid var(--line);margin:60px 0 32px}
.partners-text{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);margin-bottom:26px;max-width:38ch}
.partners{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:end}
.partner{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;cursor:pointer;transition:transform 220ms ease}
.partner:hover{transform:translateY(-2px)}
.partner:hover .glyph{color:var(--coral)}
.partner:hover span{color:var(--coral)}
.partner .glyph{height:32px;display:flex;align-items:center;color:var(--ink);transition:color 220ms ease}
.partner .glyph svg{height:100%;width:auto;max-width:90px}
.partner span{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);letter-spacing:-0.005em;font-weight:600;transition:color 220ms ease}
.partner small{font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:0.1em;text-transform:uppercase}
.read-more{margin-top:56px;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);text-decoration:none;letter-spacing:0.04em;border-bottom:1px solid var(--coral);padding-bottom:6px}
.read-more::after{content:'→';color:var(--coral)}
.testimonial-art{position:relative;aspect-ratio:1/1;max-width:560px}
.testimonial-art .art-placeholder{width:100%;height:100%;background:var(--bone);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}

/* FAQ */
#faq{padding:130px 0}
.faq-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:72px}
.faq-col-lead h2.display{font-size:var(--fs-d1);margin-bottom:0}
.faq-col-sub p{font-family:var(--body);font-size:var(--fs-base);color:var(--ink-mute);line-height:1.65;max-width:40ch}
.faq-items{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{font-family:var(--sans);font-weight:700;font-size:var(--fs-base);letter-spacing:-0.01em;padding:22px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink);gap:24px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:var(--fs-xl);color:var(--coral);font-weight:400;line-height:1;flex-shrink:0;transition:transform 0.2s}
.faq-item[open] summary::after{content:'−'}
.faq-item .faq-body{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.7;padding-bottom:26px;max-width:68ch}
.faq-item .faq-body b{color:var(--ink);font-weight:600}
@media(max-width:880px){.faq-head{grid-template-columns:1fr;gap:24px}}

/* CTA */
.cta-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.cta-grid h2{font-size:var(--fs-d1);margin:32px 0 32px}
.cta-grid .lead{margin-bottom:36px;max-width:36ch;font-size:var(--fs-base)}
.cta-actions{display:inline-flex;align-items:center;gap:14px;margin-bottom:32px}
.email-pill{display:inline-flex;align-items:center;gap:12px;padding:14px 18px 14px 22px;border-radius:999px;border:1px solid var(--line);font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);text-decoration:none}
.email-pill .arrow-circle{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-micro)}
.cta-foot{display:flex;gap:28px;align-items:center;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint)}
.cta-foot .stamp{color:var(--coral);font-weight:600}
.cta-art{position:relative;aspect-ratio:1/1;max-width:620px;margin-left:auto}
.cta-art .art-placeholder{width:100%;height:100%;background:var(--bone);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.cta-art .ribbon{position:absolute;left:-32px;top:50%;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.42em;text-transform:uppercase;color:var(--ink-faint);writing-mode:vertical-rl;transform:rotate(180deg)}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:60px 0 30px;margin-top:60px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.55}
.inline-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:color 160ms ease,border-color 160ms ease}
.inline-link:hover{color:var(--coral);border-bottom-color:var(--coral)}
.foot-col h3{font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:10px}
.foot-col a{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-soft);text-decoration:none}
.foot-col a:hover{color:var(--coral)}
.foot-pending{font-family:var(--body);font-size:var(--fs-sm);color:var(--ink-faint);font-weight:400}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint)}
.foot-bottom .right{display:inline-flex;gap:24px;align-items:center}
.foot-bottom .pulse{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;margin-right:6px;vertical-align:middle}

/* Long-form text must not inherit the micro-label treatment.
   Uppercase + 0.18em tracking is right for a 2-3 word tag; on a full
   sentence it stops being readable, which is what the usability audit
   flagged. Short labels keep the editorial caps; sentences drop to
   sentence case with normal tracking. */
.hero-foot .meta,
.labs-meta .meta-text,
.method-foot .left,
.foot-bottom>span:first-child{text-transform:none;letter-spacing:0.01em;font-size:var(--fs-sm)}
.labs-meta .meta-text b{letter-spacing:0.16em;text-transform:uppercase;font-size:var(--fs-micro)}
.foot-mega{margin-top:60px;padding-bottom:12px;border-top:1px solid var(--line);overflow-x:hidden;overflow-y:visible}
.foot-mega .word{font-family:var(--sans);font-weight:800;font-size:var(--fs-foot-mega);letter-spacing:-0.04em;line-height:1.05;color:var(--ink);white-space:nowrap;margin-top:30px;padding-bottom:0.18em}
.foot-mega .word em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--coral)}

/* REVEAL */
[data-reveal]{opacity:0;translate:0 28px;transition:opacity 900ms cubic-bezier(0.22,1,0.36,1) var(--reveal-delay,0ms),translate 900ms cubic-bezier(0.22,1,0.36,1) var(--reveal-delay,0ms),scale 900ms cubic-bezier(0.22,1,0.36,1) var(--reveal-delay,0ms);will-change:opacity,translate,scale}
[data-reveal='left']{translate:-36px 0}
[data-reveal='right']{translate:36px 0}
[data-reveal='scale']{translate:0 0;scale:0.96}
[data-reveal='rise-lg']{translate:0 64px;scale:0.985}
/* The horizontal reveal offsets push content past the right edge of a phone
   viewport, and anything not yet revealed keeps the page scrollable sideways
   (32px on a 390px screen). There is no room for a lateral slide at this size,
   so keep the rise and drop the horizontal component. */
@media(max-width:880px){[data-reveal='left'],[data-reveal='right']{translate:0 28px}}
[data-reveal][data-revealed='true']{opacity:1;translate:0 0;scale:1}
.cards>.card[data-reveal]:nth-child(1){--reveal-delay:0ms}
.cards>.card[data-reveal]:nth-child(2){--reveal-delay:90ms}
.cards>.card[data-reveal]:nth-child(3){--reveal-delay:180ms}
.cards>.card[data-reveal]:nth-child(4){--reveal-delay:270ms}
.labs-grid>.lab[data-reveal]:nth-child(1){--reveal-delay:0ms}
.labs-grid>.lab[data-reveal]:nth-child(2){--reveal-delay:90ms}
.labs-grid>.lab[data-reveal]:nth-child(3){--reveal-delay:180ms}
.labs-grid>.lab[data-reveal]:nth-child(4){--reveal-delay:270ms}
.labs-grid>.lab[data-reveal]:nth-child(5){--reveal-delay:360ms}
.method-grid>.method-step[data-reveal]:nth-child(1){--reveal-delay:0ms}
.method-grid>.method-step[data-reveal]:nth-child(2){--reveal-delay:110ms}
.method-grid>.method-step[data-reveal]:nth-child(3){--reveal-delay:220ms}
.method-grid>.method-step[data-reveal]:nth-child(4){--reveal-delay:330ms}
.partners>.partner[data-reveal]:nth-child(1){--reveal-delay:0ms}
.partners>.partner[data-reveal]:nth-child(2){--reveal-delay:70ms}
.partners>.partner[data-reveal]:nth-child(3){--reveal-delay:140ms}
.partners>.partner[data-reveal]:nth-child(4){--reveal-delay:210ms}
.partners>.partner[data-reveal]:nth-child(5){--reveal-delay:280ms}
.hero-copy>[data-reveal]:nth-of-type(1){--reveal-delay:0ms}
.hero-copy>[data-reveal]:nth-of-type(2){--reveal-delay:80ms}
.hero-copy>[data-reveal]:nth-of-type(3){--reveal-delay:160ms}
.hero-copy>[data-reveal]:nth-of-type(4){--reveal-delay:240ms}
.hero-copy>[data-reveal]:nth-of-type(5){--reveal-delay:320ms}
.hero-copy>[data-reveal]:nth-of-type(6){--reveal-delay:400ms}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;translate:0 0!important;scale:1!important;transition:none!important}.nav{transition:none!important}.marquee-track{animation:none}}

/* LEGAL (Privacy / Terms) */
.legal-hero{padding:60px 0 40px;border-bottom:1px solid var(--line)}
.legal-hero .label{margin-bottom:24px}
.legal-hero h1{font-size:var(--fs-d2);margin-bottom:18px}
.legal-hero .meta{margin-top:10px}
.legal{padding:80px 0 130px}
.legal-body{max-width:74ch;margin:0 auto}
.legal-body .intro{font-family:var(--body);font-size:var(--fs-md);color:var(--ink-soft);line-height:1.65;margin-bottom:50px;max-width:60ch}
.legal-toc{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:56px;padding:22px 26px;background:var(--bone);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(21,22,26,0.08)}
.legal-toc a{font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink-soft);text-decoration:none;letter-spacing:0.02em}
.legal-toc a:hover{color:var(--coral)}
.legal-section{padding:34px 0;border-top:1px solid var(--line)}
.legal-section:first-of-type{border-top:none;padding-top:0}
.legal-section h2{font-family:var(--sans);font-weight:800;font-size:var(--fs-xl);letter-spacing:-0.016em;color:var(--ink);margin-bottom:16px;display:flex;align-items:baseline;gap:14px}
.legal-section h2 .num{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--coral);font-size:0.8em}
.legal-section p{font-family:var(--body);font-size:var(--fs-base);line-height:1.75;color:var(--ink-mute);margin-bottom:16px}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul{list-style:none;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.legal-section ul:last-child{margin-bottom:0}
.legal-section li{font-family:var(--body);font-size:var(--fs-base);line-height:1.65;color:var(--ink-mute);padding-left:22px;position:relative}
.legal-section li::before{content:'—';position:absolute;left:0;color:var(--coral)}
.legal-section strong{color:var(--ink);font-weight:600}
.legal-section a{color:var(--ink);border-bottom:1px solid var(--coral);text-decoration:none}
.legal-section a:hover{color:var(--coral)}
.legal-back{margin-top:60px;padding-top:28px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.legal-back a{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:4px}
@media(max-width:640px){.legal-toc{flex-direction:column;gap:10px}}

/* RESPONSIVE */
@media(max-width:1280px){.container{padding:0 44px}.work{margin:0 44px;padding:90px 44px}.side-rail{display:none}.nav-inner{gap:18px}.brand-meta{display:none}.nav-links{gap:28px}}
@media(max-width:1200px){.topbar-inner .mid{display:none}}
@media(max-width:1080px){.container{padding:0 32px}.hero h1{font-size:var(--fs-d2)}.section-header h2{font-size:var(--fs-d2)}.labs-grid{grid-template-columns:repeat(3,1fr)}.partners{grid-template-columns:repeat(3,1fr);gap:18px;row-gap:28px}.foot-grid{grid-template-columns:2fr 1fr 1fr}}
@media(max-width:880px){.container{padding:0 24px}.hero-grid,.about-grid,.capabilities-grid,.testimonial-grid,.cta-grid{grid-template-columns:1fr;gap:50px}.labs-head,.method-head{grid-template-columns:1fr}.labs-grid{grid-template-columns:repeat(2,1fr)}.method-grid{grid-template-columns:repeat(2,1fr);gap:36px}.method-grid::before{display:none}.work{margin:0 12px;padding:60px 24px}.work-grid{grid-template-columns:1fr}.partners{grid-template-columns:repeat(3,1fr)}.nav-links,.brand-meta{display:none}.wire-inner{grid-template-columns:1fr;gap:14px}.wire-left{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:12px;min-height:0}}
@media(max-width:560px){.container{padding:0 16px}.hero h1{font-size:var(--fs-d2)}.labs-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.pills{justify-content:flex-start}section{padding:80px 0}.topbar-inner{font-size:var(--fs-micro)}}

/* --- mobile navigation --- */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:transparent;cursor:pointer}
.nav-toggle-bar{display:block;width:18px;height:1.5px;background:var(--ink);margin:0 auto;transition:transform .22s ease,opacity .22s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:90;background:var(--paper);padding:28px 24px 40px;max-height:calc(100vh - 100%);overflow-y:auto;border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.mobile-menu[hidden]{display:none}
.mobile-menu-links{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-menu-links a{display:block;padding:14px 0;font-family:var(--sans);font-size:var(--fs-md);font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu-links a:hover,.mobile-menu-links a:focus-visible{color:var(--coral)}
.mobile-menu-cta{display:flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:var(--fs-base);font-weight:500;text-decoration:none}
.mobile-menu-meta{margin-top:22px;display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);opacity:.7}
.mobile-menu-meta a{color:inherit}
body.menu-open{overflow:hidden}
@media(max-width:880px){
  .nav-toggle{display:flex}
  .mobile-menu:not([hidden]){display:block}
  .nav-cta{padding:8px 14px;font-size:var(--fs-micro)}
}
@media(min-width:881px){
  .mobile-menu{display:none!important}
}

/* --- footer reflows instead of hiding contact details (audit H-04) --- */
@media(max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr;gap:32px}}

/* --- accessibility (audit M-02) --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:var(--fs-sm);text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:var(--r-sm)}

/* 24ch suits the homepage, where cards sit in a half-width column. On the
   full-width card grids of the service pages it leaves most of the card empty,
   so the cap is scoped to the homepage context rather than applied globally. */
.capabilities-copy .card p{max-width:24ch}

/* Card-shaped links must not inherit default anchor colour/underline.
   Applies to the product cards on work.html and the capability cards
   on the homepage once they become links. */
a.lab,a.card{text-decoration:none;color:inherit}
a.card{display:block}
a.lab:hover .arrow-mark,a.card:hover .arrow-mark{transform:translateX(4px)}
.arrow-mark{transition:transform .2s ease}
a.lab:focus-visible,a.card:focus-visible{outline:2px solid var(--coral);outline-offset:4px}

/* --- topbar must never overflow the viewport ---
   .topbar-inner>span is white-space:nowrap, so on narrow screens the brand
   span plus the right-hand group exceeded the viewport and made every page
   scroll sideways on a phone. Shed the lowest-value items first, and clip as
   a structural guarantee. LinkedIn and the availability note both still
   appear in the footer at every width. */
.topbar{overflow:hidden}
@media(max-width:700px){.topbar-inner .topbar-link{display:none}}
@media(max-width:480px){.topbar-inner .right{display:none}}

/* --- case study: product art + screenshot grid + spec list ---
   These replace per-element inline overrides so the layout can actually
   respond at narrow widths (inline styles beat media queries). */
.product-art{position:relative;aspect-ratio:1045/1400;width:100%;max-width:440px;margin-left:auto}
.product-art img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-lg);display:block}

.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:780px;margin-top:26px}
.shot-frame{position:relative;aspect-ratio:648/1400;border-radius:var(--r-lg);overflow:hidden;background:var(--bone)}
.shot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.spec-list{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:16px 32px;max-width:70ch;font-family:var(--body);font-size:var(--fs-sm);line-height:1.6;margin:0}
.spec-list dt{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);padding-top:4px}
.spec-list dd{margin:0}

@media(max-width:880px){
  .product-art{margin-left:0;max-width:100%}
  /* Three phone screenshots side by side become unreadable on a phone.
     Two up keeps them legible; the third wraps. */
  .shot-grid{grid-template-columns:repeat(2,1fr);max-width:100%}
}
@media(max-width:560px){
  .spec-list{grid-template-columns:1fr;gap:4px 0}
  .spec-list dt{padding-top:14px}
}

/* --- case study: full-width landscape capture ---
   The salon product is a web app, so its screenshots are wide landscape
   captures rather than tall phone frames. .shot-grid and .product-art both
   crop them badly, so this runs one capture across the text column instead. */
.wide-shot{margin:34px 0 0;max-width:900px}
.wide-shot img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.wide-shot figcaption{margin-top:12px;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:560px){
  .wide-shot{margin-top:24px}
  .wide-shot img{border-radius:var(--r-md)}
}

/* Thumbnail fill for lab cards, replacing the repeated inline styles the
   older cards still carry. object-position centres the crop, which matters
   for the landscape salon capture sitting in a 4/5 portrait frame. */
.lab-img-fit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* .work-link is near-black by design for the light Work section; on the dark
   Labs band it is invisible. This is the dark-ground equivalent. */
.labs-link{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:var(--fs-md);font-weight:600;letter-spacing:-0.01em;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--coral);padding-bottom:10px}
.labs-link .arrow{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.labs-link .arrow svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6}
.labs-link:hover .arrow,.labs-link:focus-visible .arrow{transform:translateX(4px);background:var(--coral);border-color:var(--coral);color:#fff}

/* --- horizontal overflow on narrow screens ---
   .label is display:inline-flex and never wrapped, so its min-content width
   (~454px) propagated up through grid items, whose default min-width:auto
   refuses to shrink below content. That pushed the document wider than the
   viewport on phones. Let the label wrap and let grid/flex children shrink. */
.label{flex-wrap:wrap}
.hero-copy,.about-copy,.capabilities-copy,.labs-head>*,.method-head>*,.work-copy{min-width:0}
.hero-grid>*,.about-grid>*,.capabilities-grid>*,.cta-grid>*,.testimonial-grid>*{min-width:0}

/* These flex rows were nowrap with nowrap children, so on a phone the third
   stat and the second CTA pushed past the viewport edge. Wrapping only
   engages when they no longer fit, so desktop layout is unchanged. */
.hero-stats,.hero-actions{flex-wrap:wrap}

/* Two .ribbon rules are in play: the later sets left:-32px but never unsets
   right:-42px from the earlier one, so the element stretched between both and
   past the container's right edge. Reset right, and drop the decorative side
   ribbon on phones where there is no gutter to hang it in. */
.ribbon{right:auto}
@media(max-width:880px){.ribbon{display:none}}

/* The coral accent is tuned for the near-black ground. On the light Work
   section (#e6dece) it lands at 2.04:1, so that one band uses a darkened
   coral instead — same hue, 4.98:1. */
:root{--coral-on-light:var(--coral-on-band)}
.work .label{color:var(--coral-on-light)}
.work .label::before{background:var(--coral-on-light)}
.work-rule .roman{color:var(--coral-on-light)}

/* Work-card thumbnails. The Chromyne capture is portrait in a 4:3 frame, so
   anchor the crop to the top where the result panel sits. */
.work-card .img img.work-shot{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* .arrow-mark is absolutely positioned 22px from the bottom and is 28px tall,
   so it needs ~62px of clearance. The cards only reserved 32px, letting long
   copy run underneath it. */
.card{padding-bottom:64px}

/* Consultancy redesign · September 2026. Shared tokens and existing primitives. */
:root{--paper:#fff;--paper-warm:#f4f6fa;--paper-dark:#edf0f6;--ink:#15233b;--ink-soft:#40516a;--ink-mute:#546178;--ink-faint:#657086;--coral:#3457d5;--coral-soft:#2846b4;--line:rgba(21,35,59,.15);--band:#14233b;--band-ink:#fff;--coral-on-band:#a9c2ff}
body::before{display:none}.topbar{display:none}.nav{padding:22px 0;border-bottom:1px solid var(--line);background:#fff}.nav.is-hidden{transform:none;pointer-events:auto}.brand-mark{border:0;border-radius:9px;background:var(--ink);color:white;font-family:var(--sans);font-style:normal}.brand-meta{display:none}.nav-links{gap:28px}.nav-cta{border-radius:6px;padding:12px 19px;background:var(--coral);color:white}.nav-links a{min-height:44px;display:inline-flex;align-items:center}.container{max-width:1344px;padding-inline:48px}.nav-toggle{min-width:44px;min-height:44px}html{scroll-padding-top:110px}.consultancy-page h1,.consultancy-page h2,.consultancy-page h3{font-family:var(--sans);letter-spacing:-.04em}.consultancy-page h2{font-size:clamp(32px,3.5vw,48px);line-height:1.12;font-weight:600}.eyebrow{display:block;font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:20px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#287552;margin-right:8px}.consult-hero{padding:72px 0 66px}.consult-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:64px}.consult-hero h1{font-size:clamp(40px,4.5vw,64px);line-height:1.07;font-weight:600;letter-spacing:-.055em;margin-bottom:24px}.consult-hero h1>span{color:var(--coral)}.consult-hero-copy>p{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:47ch}.consult-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:30px}.action{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:52px;padding:15px 21px;border:1px solid transparent;border-radius:6px;background:var(--coral);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background .15s}.action:hover{background:#2342b4}.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--coral);font-size:15px;font-weight:600;text-decoration:none}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.hero-assurance{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;font-size:13px;color:var(--ink-mute)}.hero-assurance span::before{content:'✓';margin-right:6px;color:#287552}.hero-project{display:block;text-decoration:none;background:#f0f3f9;border:1px solid #dce3ef;border-radius:12px;overflow:hidden;box-shadow:0 20px 45px -30px #14233b55;transform:rotate(-2deg);transition:transform .2s}.hero-project:hover{transform:rotate(0)}.hero-project-top{display:flex;justify-content:space-between;padding:18px 22px;color:var(--ink-mute);font-size:13px}.hero-project>img{width:100%;height:auto;display:block}.hero-project-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;gap:15px}.hero-project-bottom strong{display:block;font-size:23px;letter-spacing:-.04em;color:var(--ink)}.hero-project-bottom div>span{display:block;font-size:13px;color:var(--ink-mute);margin-top:3px}.trust-strip{border-block:1px solid var(--line);padding:23px 0}.trust-strip .container{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--ink-mute);font-size:14px}.trust-strip span:first-child{font-weight:600;color:var(--ink)}.consult-section{padding:90px 0}.section-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:100px;margin-bottom:48px}.section-intro p{color:var(--ink-soft);font-size:17px;line-height:1.7;max-width:46ch}.section-intro .text-link{margin-top:14px}.service-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:40px 1.1fr 1fr 30px;gap:25px;align-items:center;padding:28px 12px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .15s}.service-row:hover{background:#f4f6fc}.service-number{align-self:start;color:var(--coral);font-size:14px;padding-top:5px}.service-row h3{font-size:25px;font-weight:600;margin-bottom:5px}.service-row p{color:var(--ink-mute);font-size:15px;line-height:1.65}.service-row .service-detail{font-size:16px}.link-arrow{font-size:25px;color:var(--coral)}.work-section{background:#f3f5f9}.project-list{display:grid;gap:32px}.project-feature{display:block;text-decoration:none;color:var(--ink)}.project-image{background:#e2e7ef;overflow:hidden;border-radius:8px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.project-image img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .25s}.project-feature:hover img{transform:scale(1.015)}.project-caption{display:flex;justify-content:space-between;gap:24px;padding-top:22px}.project-caption .eyebrow{margin-bottom:7px;font-size:12px}.project-caption h3{font-size:29px;font-weight:600;margin-bottom:5px}.project-caption p{font-size:16px;color:var(--ink-mute)}.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.app-preview{background:#eae4df}.app-preview img{width:auto;height:92%;border-radius:12px;box-shadow:0 5px 20px #14233b20}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.process-grid article{border-top:2px solid var(--line);padding-top:22px}.process-grid article>span{font-size:14px;color:var(--coral);font-weight:600}.process-grid h3{font-size:23px;font-weight:600;line-height:1.25;margin:25px 0 12px}.process-grid p{font-size:16px;color:var(--ink-mute);line-height:1.7}.founder-section{padding:70px 0;background:#eef2fc}.founder-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px}.founder-layout p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin-bottom:18px}.consult-faq#faq{padding:90px 0}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.faq-layout h2{margin-bottom:24px}.faq-layout>div>p{color:var(--ink-mute)}.faq-item summary{font-size:17px;min-height:64px}.faq-item .faq-body{font-size:16px}.consult-contact{padding:75px 0;background:var(--band);color:white}.contact-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:center}.consult-contact .eyebrow{color:#b6c8f6}.consult-contact h2{color:white;margin-bottom:23px}.consult-contact p{color:#c7d1e2;font-size:16px;line-height:1.7}.contact-next{max-width:410px}.action-light{background:white;color:var(--ink);margin-bottom:22px}.action-light:hover{background:#e7edff}.email-address{display:block;color:#fff;font-size:20px;text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere;margin-bottom:16px}footer{padding-top:55px;background:#fff}.foot-grid{gap:32px}.foot-brand p{font-size:14px}.foot-col a{display:inline-block;min-height:32px}.foot-pending{display:none}.page-intro{padding:68px 0 45px}.page-intro h1{font-size:clamp(40px,5vw,68px);font-weight:600;line-height:1.1;max-width:18ch;margin-bottom:24px}.page-intro>p,.page-intro .intro-text{font-size:19px;color:var(--ink-soft);max-width:62ch;line-height:1.7}.breadcrumb{font-size:14px;color:var(--ink-mute);margin-bottom:30px}.breadcrumb a{color:inherit}.deliverables{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.deliverables article{padding:25px 0;border-top:2px solid var(--coral)}.deliverables h3{font-size:25px;margin-bottom:16px}.deliverables p{color:var(--ink-mute);font-size:17px;line-height:1.7}.case-image{display:block;width:100%;height:auto;border-radius:10px;margin:35px 0}.case-copy{max-width:75ch;margin-bottom:40px}.case-copy h2{margin-bottom:22px}.case-copy p{font-size:18px;line-height:1.8;color:var(--ink-soft);margin-bottom:18px}
@media(max-width:1100px){.nav-links{gap:19px}.consult-hero-grid{gap:36px}.consult-hero h1{font-size:48px}.consult-actions{gap:12px}.container{padding-inline:32px}.section-intro,.founder-layout,.faq-layout,.contact-layout{gap:50px}.service-row{grid-template-columns:28px 1fr 1fr 24px;gap:18px}}
@media(max-width:880px){.consult-hero-grid{grid-template-columns:1fr}.consult-hero{padding:45px 0}.consult-hero-copy{max-width:650px}.consult-hero h1{font-size:clamp(40px,7vw,60px)}.hero-project{transform:none;max-width:640px;margin-top:15px}.hero-project:hover{transform:none}.section-intro,.founder-layout,.faq-layout,.contact-layout{grid-template-columns:1fr;gap:28px}.consult-section,.consult-faq#faq{padding:60px 0}.process-grid{grid-template-columns:1fr 1fr}.service-row{grid-template-columns:25px 1fr 25px}.service-detail{grid-column:2;grid-row:2}.service-row .link-arrow{grid-column:3;grid-row:1}.deliverables{grid-template-columns:1fr}.nav{padding:15px 0}.contact-next{max-width:none}.trust-strip .container{justify-content:flex-start;gap:14px 24px}.trust-strip span:first-child{flex-basis:100%}.foot-grid{grid-template-columns:2fr 1fr 1fr}.foot-grid .foot-brand{grid-column:1/-1}}
@media(max-width:560px){.container{padding-inline:22px}.nav-inner{gap:10px}.brand{gap:8px;font-size:17px}.brand-mark{width:31px;height:34px}.nav-side{gap:8px}.nav-cta{padding:10px 12px;font-size:13px}.consult-hero h1{font-size:clamp(36px,9.4vw,50px)}.consult-hero-copy>p{font-size:17px}.consult-actions{align-items:stretch;flex-direction:column}.consult-actions .action{justify-content:center}.hero-assurance{font-size:12px;gap:8px 14px}.hero-project-bottom{padding:15px}.hero-project-bottom .text-link{font-size:13px}.project-pair,.process-grid{grid-template-columns:1fr}.section-intro{margin-bottom:32px}.service-row{padding:22px 0;gap:10px 14px}.service-row h3{font-size:22px}.project-caption p{font-size:15px}.project-image{border-radius:5px}.foot-grid{grid-template-columns:1fr 1fr}.consult-contact{padding:52px 0}.eyebrow{font-size:12px}.contact-next .action{width:100%}.mobile-menu-links a{min-height:44px}.page-intro{padding-top:42px}.hero-project-top{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.hero-project,.project-image img{transition:none}}
/* Allow portfolio grid tracks to shrink below the source image width. */
.project-list,.project-pair,.project-feature,.project-image,.project-caption>div{min-width:0}.project-list,.project-pair{grid-template-columns:minmax(0,1fr)}.project-image img{max-width:100%}.project-caption p{overflow-wrap:anywhere}
@media(min-width:561px){.project-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.nav-inner .brand{font-size:15px}.nav-cta{font-size:12px;padding:10px}.container{padding-inline:16px}}
.page-intro{padding-inline:48px}
@media(max-width:1100px){.page-intro{padding-inline:32px}}
@media(max-width:560px){.page-intro{padding-inline:22px}}
@media(max-width:360px){.page-intro{padding-inline:16px}}