/* ============================================================
   BAHA Advisory - SERVICE PAGE SHELL (v4 "Workbench" system)
   Consolidated from home-v4.html: cool Ledger palette, soft
   rounded floating white cards on a tinted canvas, cobalt glow.
   Shared by: startups.html · enterprise.html · us-market-entry.html
   ============================================================ */

:root {
  --canvas:  #EEEDE8;      /* tinted canvas - cards float above it */
  --card:    #FFFFFF;      /* lifted white card */
  --surface: #FFFFFF;
  --tint:    #F1F1EA;      /* grouped panel ground */
  --paper:   #FCFBF7;      /* lightest - text on dark */
  --ink:     #0E1A2B;      /* deep ledger blue-black */
  --dark:    #0E1A2B;
  --accent:  #0052FF;      /* cobalt */
  --accent-rgb: 0,82,255;
  --accent-soft: #DEE9FF;
  --accent-ink: #FCFBF7;
  --hair:    #DCDFE4;
  --shadow:  14,26,43;
  --line-hair: rgba(14,26,43,0.07);
  --serif: 'Newsreader', Georgia, serif;
  --serif-weight: 300;
  --sh-sm: 0 1px 2px rgba(var(--shadow),0.05);
  --sh-lg: 0 2px 5px rgba(var(--shadow),0.05), 0 16px 36px rgba(var(--shadow),0.09);
  --r-card: 22px; --r-btn: 14px; --r-panel: 28px;
  --glow: 0 2px 4px rgba(var(--shadow),0.04), 0 18px 44px rgba(var(--shadow),0.10), 0 2px 30px rgba(var(--accent-rgb),0.05);
  --glow-hover: 0 8px 12px rgba(var(--shadow),0.07), 0 34px 66px rgba(var(--shadow),0.16), 0 6px 44px rgba(var(--accent-rgb),0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding-top clears the fixed nav pill (bottom edge sits at 91px at every
   viewport width) so in-page anchor targets never land underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  font-family: 'Hanken Grotesk', -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.serif { font-family: var(--serif); font-weight: var(--serif-weight); }
.mono {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

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

.swipe {
  background: linear-gradient(transparent 78%, var(--accent) 78%, var(--accent) 92%, transparent 92%);
  padding: 0 0.06em;
}
.accent-line { color: var(--accent); font-style: italic; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.09s}
.stagger.in>*:nth-child(3){transition-delay:.18s}
.stagger.in>*:nth-child(4){transition-delay:.27s}
.stagger.in>*:nth-child(5){transition-delay:.36s}
.stagger.in>*:nth-child(6){transition-delay:.45s}
.stagger.in>*:nth-child(7){transition-delay:.54s}
.stagger.in>*:nth-child(8){transition-delay:.63s}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger>*{opacity:1; transform:none; transition:none}
  *{animation:none!important}
}

/* ============ NAV ============ */
.nav-outer { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; padding: 0 32px; }
.nav {
  max-width: 1336px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  /* Opaque, not translucent. At 80% white the nav's effective background shifted
     with whatever scrolled behind it, so the ink-colored links lost contrast every
     time a dark panel passed through. Solid white also drops the backdrop-filter,
     which was repainting on every scroll frame. Border and shadow keep it floating. */
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 17px 17px 17px 26px;
  box-shadow: var(--sh-sm);
}
.nav-logo { display: inline-flex; align-items: center; line-height: 1; }
.nav-logo .lg-name { font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: 0.015em; }
.nav-logo img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 15px; font-weight: 500; }
.nav-links a { opacity: 0.85; }
.nav-links a:hover { opacity: 1; }
.nav-links a.on { opacity: 1; color: var(--accent); font-weight: 700; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-btn); padding: 12px 24px;
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn .arr { font-family: 'Space Mono', monospace; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.btn-ghost:hover { box-shadow: none; }
.nav .btn { border-radius: 999px; }

/* ============ HERO - graph paper + cobalt wash ============ */
.hero {
  padding: 170px 0 44px;
  position: relative;
  background-color: var(--canvas);
  background-image:
    linear-gradient(var(--line-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-hair) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(760px 460px at 80% 16%, rgba(var(--accent-rgb),0.11), transparent 70%); }
.hero > .wrap{ position:relative; z-index:2; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }

.eyebrow { display: block; margin-bottom: 30px; opacity: 0.75; }
.eyebrow::before { content: "■ "; color: var(--accent); font-size: 9px; vertical-align: 2px; }
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.02; letter-spacing: -0.025em;
}
h1 .l2 { display: block; color: var(--accent); font-style: italic; }
.hero-sub { margin-top: 32px; font-size: 19px; max-width: 580px; opacity: 0.9; }
.hero-ctas { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.powered {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; opacity: 0.75;
  transition: opacity .15s ease, color .15s ease;
}
.powered::before { content: "■"; color: var(--accent); font-size: 9px; }
.powered .arr { color: var(--accent); }
.powered:hover { opacity: 1; color: var(--accent); }

/* hero load sequence */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes printIn{from{opacity:0;transform:translateY(34px) rotate(-3.4deg) scale(.95)}to{opacity:1;transform:rotate(2.2deg) scale(1)}}
body:not(.loaded) .hero .eyebrow,
body:not(.loaded) .hero h1,
body:not(.loaded) .hero .hero-sub,
body:not(.loaded) .hero .hero-ctas,
body:not(.loaded) .hero .powered,
body:not(.loaded) .artifact{opacity:0}
body.loaded .hero .eyebrow{animation:riseIn .6s .05s both ease}
body.loaded .hero h1{animation:riseIn .8s .16s both cubic-bezier(.2,.7,.2,1)}
body.loaded .hero .hero-sub{animation:riseIn .7s .30s both ease}
body.loaded .hero .hero-ctas{animation:riseIn .7s .42s both ease}
body.loaded .hero .powered{animation:riseIn .7s .52s both ease}
body.loaded .artifact{animation:printIn .9s .34s both cubic-bezier(.2,.85,.25,1)}
@media (prefers-reduced-motion: reduce){
  body:not(.loaded) .hero .eyebrow, body:not(.loaded) .hero h1, body:not(.loaded) .hero .hero-sub,
  body:not(.loaded) .hero .hero-ctas, body:not(.loaded) .hero .powered, body:not(.loaded) .artifact{opacity:1}
}

/* ============ HERO ARTIFACT - clinical card family (echoes the home Rx label) ============ */
.artifact {
  background: #FFFFFF; color: #111;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 22px;
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--accent) 15%, transparent), var(--sh-lg);
  transform: rotate(2.2deg);
  font-family: 'Hanken Grotesk', sans-serif;
  max-width: 520px; justify-self: end; width: 100%;
  padding: 24px 26px 22px;
  position: relative;
}
.tape{
  position:absolute; top:-14px; left:50%; width:134px; height:28px;
  transform:translateX(-50%);
  border-radius:4px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(20,40,80,.07) 0 3px, transparent 3px 6px),
    color-mix(in srgb, var(--accent) 16%, #eef2ff);
  box-shadow:0 2px 5px rgba(var(--shadow),.16), inset 0 0 0 1px rgba(255,255,255,.45);
  opacity:.9; z-index:4;
}
.tape::after{content:""; position:absolute; inset:0; border-radius:4px; box-shadow:inset 0 1px 2px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.06)}
.af-head { display: flex; gap: 14px; align-items: flex-start; }
.af-head .mortar {
  width: 44px; height: 44px; border-radius: 10px; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #FFF; font-family: var(--serif); font-size: 24px; font-style: italic; flex: 0 0 auto;
}
.af-head .af-name { font-weight: 800; font-size: 19px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.af-head .af-sub { font-size: 12.5px; line-height: 1.4; display: flex; justify-content: space-between; gap: 16px; }
.af-head .af-sub .tel { font-weight: 600; }
.af-rule { border-bottom: 2px solid #111; margin: 10px 0 12px; }
.af-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.af-row .af-no { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; background: #FFF2A8; padding: 2px 10px; }
.af-row .af-date { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px; }
.af-field { margin-top: 10px; }
.af-field .k { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; display: block; }
.af-field .v { font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing: 0.01em; }
.af-field .v.serif-v { font-family: var(--serif); font-weight: 400; font-style: italic; text-transform: none; font-size: 17px; letter-spacing: 0; }
.af-list { margin-top: 10px; }
.af-list .li { display: flex; gap: 9px; align-items: baseline; font-size: 13.5px; font-weight: 600; padding: 3.5px 0; }
.af-list .li .bx { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--accent); }
.af-meter-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 4px 0; }
.af-meter-row .k2 { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.af-meter { display: flex; gap: 3px; }
.af-meter i { width: 20px; height: 8px; background: #E5E7EB; border-radius: 2px; }
.af-meter i.f { background: var(--accent); }
.af-verdict {
  margin-top: 12px; border: 2px solid #111; border-radius: 10px; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.af-verdict .vk { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.af-verdict .vv { font-weight: 800; font-size: 13.5px; text-transform: uppercase; }
.af-stamp {
  display: inline-block; transform: rotate(-7deg);
  border: 2px solid var(--accent); color: var(--accent);
  border-radius: 4px; padding: 3px 8px;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.92;
  mask-image: radial-gradient(circle at 30% 40%, black 96%, transparent 97%);
}
.af-warn { border-top: 1px solid rgba(0,0,0,0.3); margin-top: 12px; padding-top: 9px; font-size: 11px; line-height: 1.45; font-style: italic; }
.af-foot { font-weight: 700; font-size: 11.5px; margin-top: 5px; }

/* ============ HERO PLAN CARD (Theme B - locked for all 3 service pages) ============ */
/* top nudges the card up without touching transform, which carries the rotation and is
   also the printIn2 animation's final keyframe. .hero-grid centres items, so the taller a
   page's h1 the lower its card drifts; this pulls it back toward the headline. */
.plan-card{position:relative;top:-40px;background:var(--card);border-radius:22px;box-shadow:var(--glow);max-width:440px;justify-self:end;width:100%;padding:26px 28px;transform:rotate(1.6deg)}
.plan-card .ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.plan-card .ph .t{font-weight:800;font-size:16px;letter-spacing:.02em;text-transform:uppercase}
.plan-card .ph .m{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.plan-row{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hair)}
.plan-row:last-of-type{border-bottom:0}
.plan-row .no{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--accent)}
.plan-row .t{font-weight:600;font-size:15px}
.plan-row .st{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.plan-row .st.on{color:var(--accent)}
.plan-row .st.off{opacity:.35}
/* Startups drops the status stamps entirely, so its rows collapse to 2 tracks.
   Enterprise and U.S. Market Entry still use .st and keep the 3-track default. */
.plan-card.no-status .plan-row{grid-template-columns:30px 1fr}
.plan-card .pf{margin-top:14px;padding-top:12px;border-top:1px dashed var(--hair);font-family:var(--serif);font-style:italic;font-size:15px;opacity:.8}
@keyframes printIn2{from{opacity:0;transform:translateY(34px) rotate(-2deg) scale(.95)}to{opacity:1;transform:rotate(1.6deg) scale(1)}}
body:not(.loaded) .plan-card{opacity:0}
body.loaded .plan-card{animation:printIn2 .9s .34s both cubic-bezier(.2,.85,.25,1)}
@media (max-width:1000px){ .plan-card{justify-self:start} }

/* ============ HERO COLLAGE (from startups-v2, adapted to light ground) ============ */
.collage{position:relative;min-height:560px;width:100%}
.cg-card{
  position:absolute;background:var(--card);color:var(--ink);border-radius:16px;
  box-shadow:var(--glow);padding:18px 20px;
}
.cg-card .k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;display:block;margin-bottom:8px}
.cg-1{top:0;left:0;width:238px;transform:rotate(-2deg)}
.cg-1 .row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-top:1px solid var(--hair)}
.cg-1 .row:first-of-type{border-top:0}
.cg-1 .n{font-weight:800;font-size:20px}
.cg-1 .l{font-size:12.5px;opacity:.65}
.cg-2{top:198px;right:0;width:252px;transform:rotate(1.6deg)}
.cg-2 .li{display:flex;gap:9px;align-items:baseline;font-size:13.5px;font-weight:600;padding:4px 0}
.cg-2 .bx{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--accent)}
.cg-3{bottom:0;left:0;max-width:258px;background:var(--accent);color:#FFF;border-radius:16px 16px 16px 4px;transform:rotate(-1deg)}
.cg-3 .q{font-size:16px;font-weight:600;line-height:1.4}
.cg-3 .k{color:rgba(255,255,255,.7);opacity:1}
.cg-4{bottom:0;right:0;width:226px;transform:rotate(1.2deg)}
.cg-4 .oc-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--hair);font-size:13px}
.cg-4 .oc-row:first-of-type{border-top:0}
.cg-4 .oc-co{font-weight:700}
.cg-4 .oc-what{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.cg-stamp{
  position:absolute;top:36px;right:5%;transform:rotate(-8deg);
  border:2px solid var(--accent);color:var(--accent);border-radius:5px;padding:5px 10px;
  font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  mask-image:radial-gradient(circle at 30% 40%, black 96%, transparent 97%);opacity:.9;background:var(--card)}
.cg-card .tape,.collage .tape{left:50%}
@media (max-width:1000px){
  .collage{min-height:520px}
  .cg-1{left:0}.cg-2{right:0}.cg-3{left:0}.cg-4{right:0;bottom:96px}
}

/* ============ SECTION SHELLS ============ */
/* Section spacing, STANDARDIZED to match home-v4: every section pads 44px top and
   bottom so the visual gap between any two adjacent sections is a uniform 88px.
   This replaces the old mix (40/40 sections, 24/24 tight, 26/30 trust strip) that
   produced gaps of 64px, 70px, 80px, 94px and 98px on the same page. */
.sect { padding: 44px 0; }
.sect-tight { padding: 44px 0; }
.panel > .wrap {
  background: var(--card); border-radius: var(--r-panel); box-shadow: var(--glow);
  padding: 48px 52px; max-width: 1336px;
}
.panel-glow > .wrap {
  background: linear-gradient(165deg, var(--accent-soft), var(--card));
  border-radius: var(--r-panel); box-shadow: var(--glow); padding: 48px 52px; max-width: 1336px;
}
.dark-panel > .wrap {
  background-color: var(--dark); color: var(--paper);
  border-radius: var(--r-panel); padding: 52px 48px; max-width: 1336px;
  background-image: radial-gradient(1000px 380px at 12% -10%, rgba(var(--accent-rgb),0.22), transparent 60%),
                    radial-gradient(color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px);
  background-size: auto, 26px 26px;
}
h2.sec-h {
  font-family: var(--serif); font-weight: var(--serif-weight);
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.02em;
  max-width: 920px;
}
.lede { margin-top: 18px; font-size: 18px; opacity: 0.85; max-width: 620px; }
.sec-eyebrow { display: block; margin-bottom: 22px; opacity: 0.7; }
.sec-eyebrow::before { content: "■ "; color: var(--accent); font-size: 9px; vertical-align: 2px; }
.dark-panel .sec-eyebrow::before { color: var(--accent-soft); }

/* ============ TRUST STRIP (under hero) ============ */
.trust-strip { padding: 44px 0; }
.ts-card {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 24px 36px; flex-wrap: wrap;
}
.ts-names { display: flex; align-items: baseline; gap: 30px; flex-wrap: wrap; }
.ts-names .ts-lab { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.ts-names .co { font-family: var(--serif); font-weight: 400; font-size: 23px; opacity: 0.92; }
.ts-stats { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.ts-stat { display: flex; gap: 9px; align-items: baseline; }
.ts-stat .n { font-family: var(--serif); font-weight: 400; font-size: 25px; color: var(--accent); }
.ts-fine { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; margin-top: 2px; }
.ts-stat .l { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.7; }

/* ============ WHO IT'S FOR / NOT FOR ============ */
.fw-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-top: 36px; }
.fw-col { border-radius: var(--r-card); padding: 36px 38px; }
.fw-for { background: var(--card); box-shadow: var(--glow); }
.fw-not { background: var(--card); border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.fw-col .fw-lab { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 20px; }
.fw-for .fw-lab { color: var(--accent); }
.fw-not .fw-lab { opacity: 0.6; }
.fw-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; align-items: baseline; }
.fw-item + .fw-item { border-top: 1px solid var(--hair); }
.fw-not .fw-item + .fw-item { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.fw-item .mk { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--accent); }
.fw-not .fw-item .mk { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.fw-item .t { font-weight: 600; font-size: 16.5px; }
.fw-item .d { font-size: 14.5px; opacity: 0.72; display: block; font-weight: 400; }
.fw-note { margin-top: 18px; font-size: 14.5px; font-style: italic; opacity: 0.8; font-family: var(--serif); font-weight: 400; font-size: 16.5px; }

/* ============ STAKES - editorial pull-quote band ============ */
.stakes-quote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(26px, 2.9vw, 40px); line-height: 1.22; letter-spacing: -0.01em;
  max-width: 980px; margin-top: 26px;
}
.stakes-quote::before { content: "\201C"; color: var(--accent); }
.stakes-quote::after { content: "\201D"; color: var(--accent); }
.stakes-body { margin-top: 26px; font-size: 18px; opacity: 0.87; max-width: 660px; }

/* ============ CORE OFFERING - STARTUPS: open menu grid (intro cell + 7 cards) ============ */
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px; }
.menu-intro {
  background: var(--dark); color: var(--paper); border-radius: var(--r-card); padding: 30px 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  background-image: radial-gradient(400px 220px at 20% 0%, rgba(var(--accent-rgb),0.25), transparent 60%);
  box-shadow: var(--glow);
}
.menu-intro .mi-h { font-family: var(--serif); font-weight: 300; font-size: 27px; line-height: 1.12; }
.menu-intro .mi-d { font-size: 14px; opacity: 0.8; }
.menu-card {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  padding: 28px 26px; min-height: 210px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.menu-card:hover { transform: translateY(-6px); box-shadow: var(--glow-hover); }
.menu-card .no { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--accent); }
.menu-card .t { font-family: var(--serif); font-weight: 400; font-size: 22.5px; line-height: 1.1; letter-spacing: -0.01em; }
.menu-card .d { font-size: 14.5px; opacity: 0.75; margin-top: auto; }

/* ============ CORE OFFERING - ENTERPRISE: grouped sub-track rows ============ */
.tracks { margin-top: 38px; display: flex; flex-direction: column; gap: 16px; }
.track {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  display: grid; grid-template-columns: 64px 1fr 1.15fr; gap: 26px; align-items: baseline;
  padding: 30px 36px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.track:hover { transform: translateY(-4px); box-shadow: var(--glow-hover); }
.track .no { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--accent); }
.track .t { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.2vw, 29px); line-height: 1.08; letter-spacing: -0.01em; }
.track .d { font-size: 15.5px; opacity: 0.8; }

/* ============ CORE OFFERING - USME: phased journey roadmap ============ */
.journey { margin-top: 38px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.journey::before { display: none; }
.phase {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  padding: 26px 24px 24px; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.phase:hover { transform: translateY(-6px); box-shadow: var(--glow-hover); }
.phase .ph-no {
  width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 14px;
}
.phase.ph-late .ph-no { background: var(--dark); }
.phase .t { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.08; letter-spacing: -0.01em; }
.phase .d { font-size: 14.5px; opacity: 0.8; }
.phase .get { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); }
.phase .get .gk { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px; }
.phase .get .gv { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: block; }
.phase .get .gv + .gk { margin-top: 10px; }

/* ============ SIGNATURE TILES (dark band) ============ */
.sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.sig {
  background: var(--dark); border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  border-radius: 18px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.sig .sg-lab { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); }
.sig .sg-h { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.14; letter-spacing: -0.01em; }
.sig .sg-r { margin-top: auto; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); font-size: 14px; opacity: 0.8; }
.sig .sg-r .rk { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; display: block; margin-bottom: 4px; }

/* ============ ARC (grow-with-you / cadence two-state) ============ */
.arc { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; margin-top: 36px; }
.arc-2 { grid-template-columns: 1fr auto 1fr; }
.arc-step {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  padding: 30px 30px; display: flex; flex-direction: column; gap: 10px; color: var(--ink);
}
.dark-panel .arc-step { box-shadow: none; }
.arc-step .no { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--accent); letter-spacing: 0.09em; text-transform: uppercase; }
.arc-step .t { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; }
.arc-step .d { font-size: 14.5px; opacity: 0.78; }
.arc-arrow { align-self: center; font-family: 'Space Mono', monospace; font-size: 22px; color: var(--accent); }
.dark-panel .arc-arrow { color: var(--accent-soft); }

/* ============ KEYSTONE (USME) - one move, three unlocks ============ */
.keystone { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: center; margin-top: 36px; }
.ks-move {
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-card);
  padding: 40px 36px; box-shadow: var(--glow);
}
.ks-move .kk { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; display: block; margin-bottom: 16px; }
.ks-move .kh { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.14; }
.ks-move .kd { margin-top: 16px; font-size: 15px; opacity: 0.9; }
.ks-join { position: relative; height: 100%; min-height: 200px; }
.ks-join::before { display: none; }
.ks-unlocks { display: flex; flex-direction: column; gap: 14px; }
.ks-un {
  background: var(--card); color: var(--ink); border-radius: 18px; box-shadow: var(--glow);
  padding: 22px 26px; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: baseline;
}
.ks-un .ki { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--accent); }
.ks-un .kt { font-weight: 700; font-size: 17px; }
.ks-un .kd2 { font-size: 14.5px; opacity: 0.78; display: block; font-weight: 400; }
.ks-line { margin-top: 30px; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(22px, 2.2vw, 30px); }
.ks-line .hl { color: var(--paper); font-weight: 700; }

/* ============ INTEGRITY / SPLIT CALLOUT ============ */
.split-callout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
/* Both cells are light cards. .sc-paid used to be var(--dark), the exact colour of the
   .dark-panel it sits inside on both Enterprise and U.S. Market Entry, so it vanished into
   its own background. The three arc cards above it are light, so matching them keeps the
   whole panel consistent with the system's floating-white-cards language. The .sc-free /
   .sc-paid class names are legacy (they date from a free-vs-paid contrast) and now render
   identically; they stay only because both pages' markup uses them. */
.sc-cell { border-radius: var(--r-card); padding: 32px 34px;
  background: var(--card); color: var(--ink); box-shadow: var(--glow); }
.sc-cell .sk { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 12px; color: var(--accent); }
.sc-cell .sh { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.12; }
.sc-cell .sd { margin-top: 12px; font-size: 15px; opacity: 0.82; }

/* ============ DIFFERENTIATORS ============ */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; background: var(--card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--glow); }
.diff { padding: 34px 30px; border-right: 1px solid var(--hair); }
.diff:last-child { border-right: 0; }
.diff .no { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--accent); display: block; margin-bottom: 14px; }
.diff .t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.12; }
.diff .d { font-size: 14.5px; opacity: 0.75; margin-top: 10px; }

/* ============ HIP NOTE CARD ============ */
.hip-note {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  /* No margin-top: it stacked on top of the section's own 44px padding and pushed
     the HIP.fund block 34px further down than every other section boundary. */
  padding: 44px 48px;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start;
}
.hip-note .hn-h { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.015em; }
.hip-note .hn-b { font-size: 16.5px; opacity: 0.88; }
.hip-note .hn-b p + p { margin-top: 14px; }
.hip-note .hn-chip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  border: 1px solid var(--hair); border-radius: 999px; padding: 10px 18px;
  box-shadow: var(--sh-sm); font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hip-note .hn-chip .arr { color: var(--accent); }
.hip-note .hn-chip:hover { border-color: var(--accent); }

/* ============ CLIENT STORY - Option C (from home) ============ */
.cs-eyebrow-lab .cs-logo { height: 40px; width: auto; vertical-align: middle; margin-left: 4px; }
.cs-eyebrow-lab { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.7; }
.cs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; margin-right: 8px; }
.cs-d-start { background: var(--accent); } .cs-d-ent { background: #7C93B8; } .cs-d-usme { background: var(--ink); }
.cs-step-lab { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 7px; }
.cs-step-txt { font-size: 14.5px; line-height: 1.5; opacity: 0.9; display: block; }
.cs-mark { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.cs-headline { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; }
.cs-feature { display: grid; grid-template-columns: 1.4fr 1fr; margin-top: 38px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--glow); overflow: hidden; }
.cs-left { padding: 46px 44px; }
.cs-left .cs-mark { font-size: 15px; }
.cs-left .cs-headline { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.16; max-width: 560px; margin: 24px 0 30px; }
.cs-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.cs-right { background: var(--dark); color: var(--paper); padding: 46px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background-image: radial-gradient(700px 300px at 90% 0%, rgba(var(--accent-rgb),0.18), transparent 60%), radial-gradient(color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px); background-size: auto, 24px 24px; }
.cs-right .res-lab { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-soft); }
.cs-right .res-big { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.14; margin-top: 12px; }
.cs-right .qt { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 20px; line-height: 1.32; }
.cs-right .qt::before { content: "\201C"; color: var(--accent-soft); } .cs-right .qt::after { content: "\201D"; color: var(--accent-soft); }
.cs-right .who { margin-top: 16px; font-size: 14px; }
.cs-right .who .nm { font-weight: 600; } .cs-right .who .rl { opacity: 0.7; }
.proof-beat {
  margin-top: 20px; background: var(--card); border-radius: 18px; box-shadow: var(--glow);
  padding: 26px 32px; display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap;
}
.proof-beat .pb-stamp {
  transform: rotate(-6deg);
  border: 2px solid var(--accent); color: var(--accent);
  border-radius: 4px; padding: 4px 9px;
  font-family: 'Space Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; flex: 0 0 auto;
  mask-image: radial-gradient(circle at 30% 40%, black 96%, transparent 97%);
}
.proof-beat .pb-t { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.proof-beat .pb-d { font-size: 14.5px; opacity: 0.78; flex: 1 1 300px; }

/* ============ OUTCOMES ============ */
.out-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.out-grid.three { grid-template-columns: repeat(3, 1fr); }
.out {
  background: var(--card); border-radius: 18px; box-shadow: var(--glow);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 10px;
}
.out .ok { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.out .ot { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.14; }
.out .od { font-size: 14px; opacity: 0.75; }
/* Startups runs 5 outcomes in a single row. Narrower columns need tighter padding and a
   step down in headline size, or the cards run tall and the section loses its rhythm. */
.out-grid.five { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.out-grid.five .out { padding: 24px 21px; gap: 9px; }
.out-grid.five .out .ot { font-size: 18.5px; }
.out-grid.five .out .od { font-size: 13.5px; }
.out-close { margin-top: 34px; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(21px, 2vw, 27px); max-width: 780px; }

/* ============ PARTNER ECOSYSTEM (USME) ============ */
.partners-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 34px; }
.partner {
  background: var(--card); border-radius: 18px; box-shadow: var(--glow);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; min-height: 150px;
}
.partner .pk { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.partner .pn { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.12; }
.partner .pd { font-size: 13px; opacity: 0.72; margin-top: auto; }
/* Partner names link out. Inherit the serif card styling rather than looking like body links. */
.partner .pn a { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; }
.partner .pn a .arr { font-size: 12px; color: var(--accent); transition: transform .2s ease; }
.partner .pn a:hover { color: var(--accent); }
.partner .pn a:hover .arr { transform: translate(2px, -2px); }
.partners-note { margin-top: 22px; font-size: 15px; opacity: 0.8; max-width: 720px; }

/* ============ TEAM / BENCH ============ */
.bench-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 22px; margin-top: 36px; }
.bench-lead {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow); overflow: hidden;
  display: flex; flex-direction: column;
}
.bench-lead .bl-photo { aspect-ratio: 1/1.02; overflow: hidden; background: #FFF; border-bottom: 1px solid var(--hair); }
.bench-lead .bl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.bench-lead .bl-photo.bl-mono { display: flex; align-items: center; justify-content: center; background: var(--paper, #FCFBF7); }
.bench-lead .bl-ini { font-family: var(--serif); font-size: 64px; letter-spacing: 0.04em; color: var(--ink, #0E1A2B); opacity: 0.55; }
.bench-lead .bl-body { padding: 22px 26px 24px; }
.bench-lead .bl-nm { font-family: var(--serif); font-weight: 400; font-size: 25px; }
.bench-lead .bl-rl { font-size: 14.5px; opacity: 0.7; margin-top: 4px; }
.bench-net {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--glow);
  padding: 38px 40px; display: flex; flex-direction: column;
}
.bench-net .bn-h { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.14; }
.bench-net .bn-b { margin-top: 16px; font-size: 16px; opacity: 0.85; max-width: 640px; }
.bench-types { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.bench-types .bt {
  border: 1px solid var(--hair); border-radius: 999px; padding: 9px 16px;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--canvas);
}
.bench-net .bn-line { margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 600; }
/* Startups shows all three advisors as equals (matching the homepage bench) with the
   specialist panel full width beneath, instead of the 1-lead + net split the other
   two service pages use. Enterprise and U.S. Market Entry keep .bench-grid untouched. */
.bench-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-top: 36px; }
.bench-net-full { margin-top: 22px; }
/* Chips are uniform and quiet. Samir asked for color, so they carry a soft cobalt wash
   rather than the neutral canvas the other two service pages use, but every chip gets the
   same treatment. Mixing fill strengths made individual chips read as clickable buttons
   and pulled the eye off the three advisor portraits above. Scoped to .bench-net-full so
   enterprise.html and us-market-entry.html keep the plain .bt. */
.bench-net-full .bench-types .bt {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ============ FAQ (dark) ============ */
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.faq details:first-of-type { border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 26px 0; font-size: 21px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { font-family: 'Space Mono', monospace; color: var(--accent-soft); transition: transform .2s; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .ans { padding: 0 0 28px; font-size: 16.5px; opacity: 0.85; max-width: 620px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; margin-top: 8px; }
.faq-grid h2 {
  font-family: var(--serif); font-weight: var(--serif-weight);
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.02em;
}

/* The old centered .cta-inner band was retired 2026-08-25 (S346) once all three service
   pages moved to the working-session section below. In git history if ever needed. */

/* ============ FOOTER ============ */
footer { padding: 44px 0 54px; }
.foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.foot .logo { display: inline-flex; align-items: center; line-height: 1; }
.foot .logo .lg-name { font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: 0.015em; }
.foot .logo img { height: 23px; width: auto; display: block; }
.foot .mono { opacity: 0.6; }


/* hover life */
.sv-link-arr, .go-arr { transition: transform .2s ease; display: inline-block; }
a:hover .sv-link-arr, a:hover .go-arr { transform: translateX(4px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .nav-links a:not(.btn) { display: none; }
  .hero { padding-top: 140px; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  h1 { font-size: clamp(40px, 10vw, 60px); }
  .artifact { justify-self: start; transform: rotate(2deg); }
  .panel > .wrap, .panel-glow > .wrap, .dark-panel > .wrap { padding: 40px 26px; border-radius: 22px; }
  .ts-card { flex-direction: column; align-items: flex-start; }
  .fw-grid, .split-callout, .faq-grid, .cs-feature, .cs-flow, .bench-grid { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .track { grid-template-columns: 40px 1fr; }
  .track .d { grid-column: 2; }
  .journey { grid-template-columns: 1fr; }
  .journey::before { display: none; }
  .sig-grid, .out-grid, .out-grid.three, .out-grid.five { grid-template-columns: 1fr; }
  .bench-people { grid-template-columns: 1fr; }
  .arc, .arc-2 { grid-template-columns: 1fr; }
  .arc-arrow { transform: rotate(90deg); justify-self: center; }
  .keystone { grid-template-columns: 1fr; }
  .ks-join { min-height: 40px; }
  .ks-join::before { display: none; }
  .diff-grid { grid-template-columns: 1fr; }
  .diff { border-right: 0; border-bottom: 1px solid var(--hair); }
  .diff:last-child { border-bottom: 0; }
  .hip-note { grid-template-columns: 1fr; padding: 32px 28px; }
  .partners-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid { gap: 30px; }
}

/* ============ LEGAL PAGES (terms of use, privacy policy) ============
   Long-form policy text. Narrow measure, generous leading, quiet headings so a
   wall of legal copy stays readable. */
.legal { padding: 24px 0 64px; }
.legal-head { max-width: 780px; margin-bottom: 34px; }
.legal-head h1 { font-family: var(--serif); font-weight: var(--serif-weight);
  font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.02em; }
.legal-head .upd { display: block; margin-top: 14px; font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; margin: 38px 0 12px; }
.legal-body h3 { font-family: var(--serif); font-weight: 400; font-size: 21px;
  margin: 26px 0 8px; }
.legal-body p { font-size: 15.5px; line-height: 1.7; margin-bottom: 15px; opacity: 0.88; }
.legal-body ul { margin: 0 0 15px 20px; }
.legal-body li { font-size: 15.5px; line-height: 1.7; margin-bottom: 8px; opacity: 0.88; }
.legal-body .caps { font-size: 14.5px; }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-contact { margin-top: 34px; padding: 24px 26px; background: var(--card);
  border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.legal-contact p { margin-bottom: 4px; }

/* footer: legal links + copyright line */
.foot-legal { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.foot-legal a { opacity: 0.6; }
.foot-legal a:hover { opacity: 1; color: var(--accent); }
.foot-copy { opacity: 0.5; }
@media (max-width: 700px) { .foot { gap: 14px; } }


/* ============ THE WORKING SESSION (#book offer section) ============
   Built from Samir's FINAL offer specs, then reshaped to Moe's layout call:
   sample questions in a 2/3 column, what-you-get in a 1/3 column, both above a
   full-width Fillout scheduling embed. The embed needs roughly 950px to use its
   two-column calendar layout, which is why it is not in a narrow rail.
   Live on all three service pages: Startups, Enterprise, U.S. Market Entry. */
.ws-head { max-width:780px; }
.ws-promise { margin-top:18px; font-size:21px; line-height:1.45; max-width:700px; }
.ws-not { margin-top:12px; font-size:15.5px; opacity:.7; max-width:640px; }

/* two columns above the booking: questions at 2/3, what you get at 1/3 */
.ws-above { display:grid; grid-template-columns:2fr 1fr; gap:48px; margin-top:40px;
  align-items:start; }

.ws-lab { display:block; font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:8px; }
.ws-sub { font-size:16px; opacity:.75; margin-bottom:16px; }

.ws-qs { list-style:none; display:grid; gap:8px; }
.ws-qs li { position:relative; padding:12px 16px 12px 36px; border-radius:12px;
  background:color-mix(in srgb, var(--paper) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  font-family:var(--serif); font-size:16.5px; line-height:1.4; font-style:italic; }
.ws-qs li::before { content:"\201C"; position:absolute; left:14px; top:11px;
  font-family:var(--serif); font-size:24px; line-height:1; color:var(--accent-soft); opacity:.8; }
.ws-rough { margin-top:14px; font-size:15.5px; opacity:.75; }

/* what you get: stacked label over value, so it reads in a narrow column */
.ws-get { display:grid; gap:0; }
.ws-g { padding:15px 0; border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent); }
.ws-g:first-child { border-top:0; padding-top:0; }
.ws-g .k { display:block; font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:6px; }
.ws-g .v { display:block; font-size:16.5px; line-height:1.55; }

/* booking */
.ws-book { margin-top:44px; background:var(--card); border-radius:var(--r-card);
  box-shadow:var(--sh-lg); padding:8px; }
.ws-booklab { display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; padding:14px 18px 12px; flex-wrap:wrap; }
.ws-booklab .t { font-weight:800; font-size:15px; text-transform:uppercase;
  letter-spacing:.02em; color:var(--ink); }
.ws-booklab .m { font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; opacity:.5; color:var(--ink); }

.ws-scarcity { margin-top:26px; font-size:15.5px; opacity:.8; }

/* U.S. Market Entry only: the one line that separates the free session from the paid
   US Readiness Diagnostic, so a founder does not have to work the difference out. */
.ws-boundary { margin-top:30px; max-width:720px; font-size:16.5px; line-height:1.55;
  padding-left:16px; border-left:2px solid var(--accent); }

/* The .ws-form mockup rules were retired 2026-08-31 (S346) once all three services had
   real Fillout embeds. They existed only so Moe could see and approve the fields before
   building each form by hand. In git history if a fourth service ever needs the pattern. */

@media (max-width:1000px) {
  .ws-above { grid-template-columns:1fr; gap:34px; }
}

/* ============================================================================
   MOBILE AND TABLET, added 2026-10-02 (S401)
   Moe: "I want the site looking great on all 3 devices - desktop, tablet and
   mobile." Everything below is measured, not guessed. This block sits last on
   purpose: several desktop rules further up are unscoped and would otherwise
   win over the 1000px block.
   ============================================================================ */

/* --- 1. NAVIGATION. Below 1000px the three page links were simply set to
   display:none with nothing replacing them, and there is no hamburger anywhere
   in the markup. On a phone or a tablet there was NO WAY to reach Startups,
   Enterprise or U.S. Market Entry from the nav. The pill now wraps to two rows:
   logo and call-to-action on top, the three links sharing the row beneath.
   No JavaScript, no new interaction to learn. --- */
@media (max-width: 1000px) {
  .nav { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px 8px; }
  .nav-links { display: contents; }
  .nav-logo { order: 1; }
  .nav-links .btn {
    order: 2; margin-left: auto;
    padding: 10px 16px; font-size: 14px; white-space: nowrap;
  }
  /* flex-basis 100% makes the page-link row ALWAYS its own row. The earlier
     version let the three links flow as individual flex items, and at tablet
     widths two of them squeezed onto row one beside the button while the third
     stretched across row two on its own. Measured on an 820px iPad. */
  .nav-pages {
    order: 3; flex: 1 0 100%;
    display: flex; justify-content: space-between; align-items: stretch;
    border-top: 1px solid var(--hair); padding-top: 2px;
  }
  /* The original 1000px block still carries `.nav-links a:not(.btn){display:none}`,
     specificity 0-2-1. A bare `.nav-pages a` is 0-1-1 and LOSES to it, which hid
     the links again. Matching the specificity here is what makes them visible. */
  .nav-links .nav-pages a {
    display: inline-flex; flex: 1 1 auto;
    align-items: center; justify-content: center;
    min-height: 40px; font-size: 12.5px; text-align: center; white-space: nowrap;
  }
}

/* --- 2. GRIDS THAT NEVER REACHED ONE COLUMN. These drop from their desktop
   count to two at 1000px and then stay at two all the way down to a 390px
   phone, which leaves body copy running two or three words per line. Measured
   at 390px before the change. --- */
@media (max-width: 640px) {
  .partners-grid { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .plan-row { grid-template-columns: 1fr; }
}

/* --- 3. TAP TARGETS. Apple's guidance is 44px. The footer legal links
   measured 19px tall on every page, and the partner tile links 22px. --- */
@media (max-width: 1000px) {
  .foot-legal { gap: 10px 18px; }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .partner .pn a { min-height: 44px; align-items: center; }
}

/* --- 4. TOUCH DEVICES AT ANY WIDTH. An iPad in landscape is 1024px, so it sits
   above the 1000px breakpoint and gets the desktop nav, where the links measure
   23px tall. Width is the wrong test for this; pointer type is the right one.
   This targets touch input specifically and leaves every mouse-driven desktop
   exactly as it was. --- */
@media (hover: none) and (pointer: coarse) {
  .nav-links a, .foot-legal a, .foot .logo,
  .legal a[href^="mailto:"], .legal a[href^="http"] {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .foot .logo { min-width: 44px; }
}

/* --- 5. iPAD LANDSCAPE, 1001px to 1100px. This band sits just above the nav
   breakpoint, so it keeps the single-row desktop nav, where the links measure
   23px tall. The pointer:coarse rule above is the correct test and will match
   on a real tablet, but it CANNOT be verified in this harness because the
   device emulator does not simulate pointer type. This width rule can be, and
   is. Belt and braces. --- */
@media (min-width: 1001px) and (max-width: 1100px) {
  .nav-links a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
  .foot-legal a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- 6. SMALL PHONES, 430px and under. At full size the nav button is about
   222px wide, which with the 90px logo overflows the pill and pushes the
   button onto a row of its own: a three-row, 105px-tall fixed nav eating 12%
   of an iPhone screen. Shrinking the button and dropping its arrow brings it
   back beside the logo and the nav back to two rows, 67px. --- */
@media (max-width: 430px) {
  .nav-links .btn { font-size: 12.5px; padding: 9px 14px; }
  .nav-links .btn .arr { display: none; }
}

/* --- 7. NARROW PHONES, 380px and under (Galaxy S25 is 360, iPhone SE is 320).
   At 360px the pill's own 32px outer gutter plus 28px inner padding left only
   168px for a button needing 182px, so it dropped to a third row again.
   Reclaiming the gutter is better than shrinking the logo. --- */
@media (max-width: 380px) {
  .nav-outer { padding: 0 16px; }
  .nav { padding: 10px 12px 8px; }
  .nav-links .btn { font-size: 12px; padding: 9px 12px; }
}

/* --- 8. Two regressions caught by measuring after the nav markup change.
   (a) Wrapping the three page links in .nav-pages made them inline children of
   a block, so the 28px gap that .nav-links provided between them collapsed to
   a 4px word space on DESKTOP. Measured 833..892 896..967 971..1091.
   (b) The client-story panels carry 44px of horizontal padding each side. On a
   320px iPhone SE that forced them 315px wide inside a 256px column. --- */
.nav-pages { display: flex; gap: 28px; align-items: center; }

@media (max-width: 480px) {
  .cs-left { padding: 32px 22px; }
  .cs-right { padding: 32px 22px; }
}