/* ---------- Design tokens ---------- */
:root{
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  /* Quicksand is loaded from Google Fonts and carries the wordmarks. */
  --font-display: Quicksand, var(--font-sans);
  --maxw: 1080px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px -12px rgba(0,0,0,.5);
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

/* ========== BRAND: Cyan + Gold (logo-true) ========== */
:root{
  --brand:#22B8D6;         /* cyan, for fills and dark-theme text */
  --brand-2:#0FA3C2;
  --brand-strong:#0B7A93;  /* cyan darkened for text on light surfaces */
  --accent:#F5A623;        /* gold, for fills and dark-theme text */
  --accent-strong:#9C6713; /* gold darkened for text on light surfaces */
  --brand-rgb:34,184,214;
  --accent-rgb:245,166,35;
  --ink:#0A1622;           /* text sitting on a brand-colored fill */
}

/* ========== THEMES (surfaces / text) ==========
   Light is the base. The system preference brings in dark unless the visitor
   has explicitly chosen light; data-theme always wins over the system. */
:root{
  --bg:#F7F9FB;
  --bg-2:#EDF2F6;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --border:rgba(10,30,40,.10);
  --text:#12242E;
  --text-dim:#4E6072;
  --brand-ink:var(--brand-strong);   /* brand color as readable text/iconography */
  --accent-ink:var(--accent-strong);
  --hero-glow: radial-gradient(60% 60% at 70% 20%, rgba(var(--brand-rgb),.14), transparent 70%),
               radial-gradient(50% 50% at 15% 90%, rgba(var(--accent-rgb),.10), transparent 70%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1622;
    --bg-2:#0E1D2C;
    --surface:#122536;
    --surface-2:#16304a;
    --border:rgba(255,255,255,.09);
    --text:#EAF2F8;
    --text-dim:#9DB2C4;
    --brand-ink:var(--brand);
    --accent-ink:var(--accent);
    --hero-glow: radial-gradient(60% 60% at 70% 20%, rgba(var(--brand-rgb),.22), transparent 70%),
                 radial-gradient(50% 50% at 15% 90%, rgba(var(--accent-rgb),.12), transparent 70%);
  }
}
:root[data-theme="dark"]{
  --bg:#0A1622;
  --bg-2:#0E1D2C;
  --surface:#122536;
  --surface-2:#16304a;
  --border:rgba(255,255,255,.09);
  --text:#EAF2F8;
  --text-dim:#9DB2C4;
  --brand-ink:var(--brand);
  --accent-ink:var(--accent);
  --hero-glow: radial-gradient(60% 60% at 70% 20%, rgba(var(--brand-rgb),.22), transparent 70%),
               radial-gradient(50% 50% at 15% 90%, rgba(var(--accent-rgb),.12), transparent 70%);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition), color var(--transition);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand);color:var(--ink)}
::-moz-selection{background:var(--brand);color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;
  color:var(--brand-ink);
}

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--brand);color:var(--ink);font-weight:700;
  padding:10px 16px;border-radius:8px;z-index:100;
}
.skip-link:focus{left:16px;top:16px;outline:2px solid var(--text);outline-offset:2px}

/* ---------- Focus visibility (WCAG 2.4.7) ---------- */
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.icon-btn:focus-visible{outline-offset:3px}

/* ---------- Controls bar ---------- */
.controls{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 24px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
/* Quicksand ships 300-700, so the wordmark asks for the real 700 rather than
   an 800 the browser would have to synthesize. */
.brandmark{display:flex;align-items:center;gap:.4167em;font-family:var(--font-display);
  font-weight:700;letter-spacing:-.02em;font-size:1.5rem}
.pi{
  display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:.3333em;
  background:rgba(var(--brand-rgb),.12);
  border:1px solid rgba(var(--brand-rgb),.35);
}
/* mark-dark.png is the navy mark, mark.png the cyan one. Light is the base theme,
   so navy is the default and the cyan mark follows dark in exactly the same way
   the surface tokens above do. */
.pi .mark{
  display:block;width:.9167em;height:.9167em;
  background:url(mark-dark.png) center/contain no-repeat;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pi .mark{background-image:url(mark.png)}
}
:root[data-theme="dark"] .pi .mark{background-image:url(mark.png)}
.ctrl-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.icon-btn{
  font:inherit;cursor:pointer;color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:600;
  display:flex;align-items:center;gap:7px;transition:.2s;
}
.icon-btn:hover{border-color:var(--brand-ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:999px;border:1px solid transparent;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.btn-primary{background:var(--brand);color:var(--ink);box-shadow:0 8px 24px -8px rgba(var(--brand-rgb),.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(var(--brand-rgb),.85)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--brand-ink);color:var(--brand-ink)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-glow);pointer-events:none}
.hero .wrap{position:relative}
.hero h1{
  font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:800;
  margin:18px 0 20px;max-width:15ch;
}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--brand-ink),var(--accent-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--text-dim);max-width:52ch;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.tag{
  font-size:.8rem;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;background:var(--surface);
}
.tag b{color:var(--brand-ink)}

/* ---------- Section ---------- */
section{padding:78px 0}
.section-head{max-width:60ch;margin-bottom:44px}
.section-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:12px 0 12px}
.section-head p{color:var(--text-dim);font-size:1.08rem}

/* Who-we-are strip */
.who{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.who-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.who-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);
}
.who-card .define{font-size:.82rem;color:var(--text-dim);letter-spacing:.02em}
.who-card .word{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.who-card .word span{color:var(--accent-ink)}
.who-card hr{border:0;border-top:1px solid var(--border);margin:18px 0}
.who-card p{color:var(--text-dim);font-size:.98rem}

/* ---------- Services ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* A column flexbox so a trailing .card-link can push itself to the bottom; the
   grid already stretches the cards to a common height, so the links line up. */
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;transition:transform .2s, border-color .2s, box-shadow .2s;position:relative;overflow:hidden;
}
.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--brand),var(--accent));opacity:0;transition:.25s}
.card:hover{transform:translateY(-5px);border-color:rgba(var(--brand-rgb),.5);box-shadow:var(--shadow)}
.card:hover::after{opacity:1}
.card .ico{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(var(--brand-rgb),.12);border:1px solid rgba(var(--brand-rgb),.3);
}
.card .ico svg{width:24px;height:24px;stroke:var(--brand-ink)}
.card h3{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--text-dim);font-size:.96rem;margin-bottom:16px}
.card ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.card li{font-size:.88rem;color:var(--text-dim);display:flex;gap:9px;align-items:flex-start}
.card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-ink);margin-top:8px;flex:none}

/* ---------- Belief / philosophy ---------- */
.belief{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center}
.belief .wrap{max-width:760px}
.belief blockquote{
  font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.3;
}
.belief blockquote span{
  background:linear-gradient(100deg,var(--brand-ink),var(--accent-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.belief .sub{color:var(--text-dim);margin-top:22px;font-size:1.05rem}

/* ---------- CTA ---------- */
.cta-band{text-align:center}
.cta-inner{
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.14), rgba(var(--accent-rgb),.10));
  border:1px solid rgba(var(--brand-rgb),.3);border-radius:24px;padding:56px 32px;
}
.cta-inner h2{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.02em;font-weight:800;margin-bottom:14px}
.cta-inner p{color:var(--text-dim);font-size:1.1rem;max-width:48ch;margin:0 auto 30px}

/* ---------- Footer ---------- */
footer{padding:40px 0;border-top:1px solid var(--border)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot .muted{color:var(--text-dim);font-size:.85rem}

/* ---------- Reveal anim ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s, transform .6s}
.js .reveal.in{opacity:1;transform:none}

/* Underline inline links so color isn't the only distinguisher (WCAG 1.4.1) */
.foot .muted a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- Reduced motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .card:hover,.btn-primary:hover{transform:none}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}

/* ---------- Screen-reader-only text ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .cards{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr;gap:28px}
  .controls{flex-direction:column;align-items:stretch;gap:10px}
  .ctrl-group{justify-content:space-between}
  /* The stacked header is ~164px tall, so the 88px default would drop an
     anchor target (#services, #contact) underneath it. */
  html{scroll-padding-top:180px}
  /* Brandmark, nav, and theme toggle each become their own row here. */
  .hero{padding:250px 0 70px}
}
@media(max-width:520px){
  .icon-btn{padding:7px 11px;font-size:.76rem}
}

/* ============================================================
   Primary nav (shared header)
   ============================================================ */
.site-nav{display:flex;align-items:center;gap:24px;font-size:.9rem;font-weight:600}
.site-nav a{
  color:var(--text-dim);padding:4px 0;
  border-bottom:2px solid transparent;transition:color .2s, border-color .2s;
}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current="page"]{color:var(--brand-ink);border-bottom-color:var(--brand-ink)}

@media(max-width:860px){
  /* The header stacks at this width, so the nav becomes its own centered row. */
  .site-nav{
    width:100%;justify-content:center;flex-wrap:wrap;gap:18px;
    border-top:1px solid var(--border);padding-top:10px;
  }
}

/* ============================================================
   Experience page
   ============================================================ */

/* Alternating section surface, matching the .who and .belief strips */
.alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- Stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:26px 20px;text-align:center;
}
.stat .fig{
  font-size:clamp(2rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(100deg,var(--brand-ink),var(--accent-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .lbl{margin-top:10px;font-size:.84rem;color:var(--text-dim);font-weight:600;line-height:1.45}

/* ---------- Domain / sector grid ---------- */
.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.domain{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:22px;transition:border-color .2s, transform .2s;
}
.domain:hover{border-color:rgba(var(--brand-rgb),.5);transform:translateY(-3px)}
.domain h3{
  font-size:1.02rem;font-weight:800;letter-spacing:-.01em;margin-bottom:11px;
  display:flex;align-items:center;gap:10px;
}
.domain h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--brand-ink);flex:none}
.domain ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.domain li{font-size:.87rem;color:var(--text-dim);padding-left:16px;position:relative}
.domain li::before{content:"\2014";position:absolute;left:0;color:var(--accent-ink)}

/* ---------- Selected outcomes ---------- */
.outcomes{display:flex;flex-direction:column;gap:14px}
.outcome{
  display:grid;grid-template-columns:184px 1fr;gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brand-ink);
  border-radius:var(--radius-sm);padding:22px 26px;
}
/* Sized so the longest metric ("2 wks -> 15 min") still fits its track. */
.outcome .metric{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;color:var(--brand-ink);line-height:1.2}
.outcome .metric small{
  display:block;margin-top:6px;font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-dim);
}
.outcome p{color:var(--text-dim);font-size:.95rem}
.outcome p strong{color:var(--text);font-weight:700}

/* ---------- Range / capability columns ---------- */
.range{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.range h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  color:var(--accent-ink);margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.range ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.range li{font-size:.88rem;color:var(--text-dim);line-height:1.5}

/* ---------- Credentials ----------
   Single column: this list sits in the narrow half of a .who-grid, where two
   columns would leave each card about 215px wide. */
.creds{display:grid;grid-template-columns:1fr;gap:14px}
.cred{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;
}
.cred .yr{
  font-size:.74rem;font-weight:700;letter-spacing:.07em;color:var(--brand-ink);
  flex:none;min-width:54px;padding-top:3px;
}
.cred .what{font-size:.93rem;font-weight:700;line-height:1.4}
.cred .where{font-size:.85rem;color:var(--text-dim);margin-top:3px}

/* ---------- Experience page responsive ---------- */
@media(max-width:980px){
  .range{grid-template-columns:repeat(2,1fr);gap:24px}
  .domains{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .domains{grid-template-columns:1fr}
  .outcome{grid-template-columns:1fr;gap:12px;padding:20px 22px}
}
@media(max-width:520px){
  .range{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}



/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:var(--text-dim);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--brand-ink)}
.crumbs .sep{opacity:.5}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{position:relative;padding:150px 0 56px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:var(--hero-glow);pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero .crumbs{margin-bottom:26px}
.page-hero .ico-lg{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:rgba(var(--brand-rgb),.12);border:1px solid rgba(var(--brand-rgb),.3);
}
.page-hero .ico-lg svg{
  width:28px;height:28px;stroke:var(--brand-ink);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.page-hero h1{
  font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;
  margin:14px 0 18px;max-width:22ch;
}
.page-hero h1 .grad{
  background:linear-gradient(100deg,var(--brand-ink),var(--accent-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero .lead{font-size:clamp(1.02rem,2vw,1.25rem);color:var(--text-dim);max-width:60ch;margin-bottom:30px}
.page-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Offering detail grid ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.detail{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  transition:border-color .2s, box-shadow .2s;
}
.detail:hover{border-color:rgba(var(--brand-rgb),.4);box-shadow:var(--shadow)}
.detail .num{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--accent-ink);
  text-transform:uppercase;margin-bottom:10px;
}
.detail h3{font-size:1.14rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.detail p{color:var(--text-dim);font-size:.95rem;margin-bottom:14px}
.detail ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.detail li{font-size:.88rem;color:var(--text-dim);display:flex;gap:9px;align-items:flex-start}
.detail li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-ink);
  margin-top:8px;flex:none;
}

/* ---------- Process steps ---------- */
.process{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:24px;
  position:relative;
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--brand-ink);margin-bottom:12px;
}
.step h3{font-size:1rem;font-weight:800;margin-bottom:7px}
.step p{color:var(--text-dim);font-size:.9rem}

/* ---------- Plain prose list (symptoms / takeaways) ---------- */
.prose-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.prose-list li{color:var(--text-dim);font-size:.98rem;display:flex;gap:12px;align-items:flex-start}
/* A filled mark, deliberately not a hollow box — an empty square reads as an
   unticked checkbox, which is the wrong signal in front of a plain statement. */
.prose-list li::before{
  content:"";width:10px;height:10px;flex:none;margin-top:8px;border-radius:3px;
  background:linear-gradient(135deg,var(--brand-ink),var(--accent-ink));
}
.prose-list strong{color:var(--text);font-weight:700}

/* ---------- Proof band: our own products ---------- */
.proof{
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.09), rgba(var(--accent-rgb),.07));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.proof .section-head{max-width:64ch}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}
.product{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:12px;
  transition:transform .2s, border-color .2s, box-shadow .2s;position:relative;overflow:hidden;
}
.product::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.55;transition:.25s;
}
.product:hover{transform:translateY(-4px);border-color:rgba(var(--brand-rgb),.5);box-shadow:var(--shadow)}
.product:hover::after{opacity:1}
.product h3{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.product .what{font-size:.86rem;font-weight:700;color:var(--brand-ink);letter-spacing:.01em}
.product p{color:var(--text-dim);font-size:.94rem}
.badge{
  align-self:flex-start;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  padding:5px 11px;border-radius:999px;margin-top:auto;
  color:var(--accent-ink);background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.4);
}
.proof-note{
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent-ink);
  border-radius:var(--radius-sm);padding:22px 26px;color:var(--text-dim);font-size:1rem;max-width:72ch;
}
.proof-note strong{color:var(--text)}

/* ---------- Cross-links to sibling pages ---------- */
.next-pages{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.next-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:transform .2s, border-color .2s, box-shadow .2s;
}
.next-card:hover{transform:translateY(-4px);border-color:rgba(var(--brand-rgb),.5);box-shadow:var(--shadow)}
.next-card .eyebrow{margin-bottom:8px}
.next-card h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.next-card p{color:var(--text-dim);font-size:.93rem}
.next-card .go{color:var(--brand-ink);font-weight:700;font-size:.9rem;margin-top:12px;display:inline-block}

/* ---------- Homepage service cards link through to their page ---------- */
.card-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;padding-top:16px;align-self:flex-start;
  color:var(--brand-ink);font-weight:700;font-size:.9rem;
}
.card:hover .card-link{text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsive: interior pages ---------- */
@media(max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:1fr}
}
@media(max-width:860px){
  .detail-grid{grid-template-columns:1fr}
  .prose-list{grid-template-columns:1fr}
  .next-pages{grid-template-columns:1fr}
  .page-hero{padding:238px 0 48px}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
}

/* ---------- Footer nav ----------
   The three service links live down here: the header already carries the
   site's primary nav, and a second row of links up there competed with it. */
.foot-nav{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--border);
}
.foot-nav .label{
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;
  color:var(--text-dim);
}
.foot-nav a{font-size:.92rem;font-weight:600;color:var(--text-dim);transition:color .2s}
.foot-nav a:hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.foot-nav a[aria-current="page"]{color:var(--brand-ink)}
@media(max-width:560px){
  .foot-nav{gap:12px}
}

/* ============================================================
   Scroll-linked header wordmark
   ============================================================
   At the very top of a page the wordmark is large and the nav links are out of
   the way; as you scroll, the wordmark shrinks back into its place in the bar
   and the nav fades in. It is the same element throughout — only transformed —
   so it genuinely floats into position rather than being swapped out.

   --p is the handoff progress: 0 at the top of the page, 1 once scrolled past
   it, set by site.js on every frame. Every rule below is a calc() on --p, and
   --p defaults to 1, so without JS (or under reduced motion, where site.js
   leaves it alone) the header renders in its normal, final state. */
:root{
  --p:1;
  /* How much type the wordmark gains at the top of the page: 1.5rem in the bar,
     4.9rem over the hero. --brand-x, --brand-w and --brand-h are measured by
     site.js: the first carries the wordmark right until "rotopium" lines up with
     the hero's eyebrow, the other two give back the width and height the larger
     type takes up, so that growing it moves nothing else in the bar. */
  --brand-up:3.4rem;
  --brand-x:0px;
  --brand-w:0px;
  --brand-h:0px;
  /* Because the height is given back, the enlarged wordmark centers on a bar that
     never grows, and half of it hangs above the bar's own box. Clearing the
     viewport edge therefore means dropping it by half of what it gained. */
  --brand-drop:calc(6px + var(--brand-h) / 2);
}

/* The bar's own chrome belongs to the scrolled state: at the top the enlarged
   wordmark should read as part of the hero, with no glass panel behind it. */
.controls{
  background:color-mix(in srgb, var(--bg) calc(78% * var(--p)), transparent);
  backdrop-filter:blur(calc(14px * var(--p)));
  border-bottom-color:color-mix(in srgb, var(--border) calc(100% * var(--p)), transparent);
}

/* Scoped to the header: the footer uses .brandmark too and stays put. */
.controls .brandmark{
  transform-origin:left top;
  font-size:calc(1.5rem + var(--brand-up) * (1 - var(--p)));
  margin-right:calc(-1 * var(--brand-w) * (1 - var(--p)));
  margin-top:calc(-.5 * var(--brand-h) * (1 - var(--p)));
  margin-bottom:calc(-.5 * var(--brand-h) * (1 - var(--p)));
  transform:translate(calc(var(--brand-x) * (1 - var(--p))),
                      calc(var(--brand-drop) * (1 - var(--p))));
  white-space:nowrap;
  will-change:font-size, transform;
}

/* The links hold off until the wordmark has travelled most of the way back, so
   the two never share the same patch of the bar on the way past. Opacity clamps
   its own range, so the negative first half of the ramp just reads as 0. */
.controls .site-nav{
  opacity:calc((var(--p) - .45) / .55);
  transform:translateY(calc(-8px * (1 - var(--p))));
}
/* Only while fully hidden, so a stray click at the top of the page cannot land
   on an invisible link. Keyboard access is preserved in site.js: the brandmark
   takes focus before the nav does, and focusing it reveals the bar. */
.brand-top .controls .site-nav{pointer-events:none}

@media(max-width:860px){
  :root{--brand-up:1rem}
  /* The nav is its own row at this width, so it collapses rather than just
     fading — otherwise it would leave a gap under the big wordmark. */
  .controls .site-nav{
    overflow:hidden;
    max-height:calc(var(--p) * 120px);
    padding-top:calc(10px * var(--p));
    border-top-color:color-mix(in srgb, var(--border) calc(100% * var(--p)), transparent);
  }
}
@media(prefers-reduced-motion:reduce){
  :root{--p:1}
}