/* ============================================================
   Innovative Valley — Design System
   Aesthetic: editorial-minimal, warm & human, anti-hype.
   Pure CSS. No frameworks. Fast + crawler-friendly.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --ink:        #111C4A;   /* graphite — primary text, dark sections */
  --ink-soft:   #1A2440;   /* slightly lifted ink for dark surfaces */
  --ember:      #3960EF;   /* warm clay/amber — accent, links, highlights */
  --ember-deep: #2B48C4;   /* hover / pressed accent */
  --ember-tint: #E6EDFF;   /* soft accent wash for bands */
  --paper:      #FDFDFC;   /* white — primary background */
  --paper-2:    #F5F6FA;   /* light grey band for alternate sections */
  --surface:    #FFFFFF;   /* cards / elevated */
  --surface-2:  #ffffff;   /* pure white where extra lift needed */
  --text:       #1E2433;   /* charcoal — body */
  --muted:      #5B6475;   /* grey — captions, secondary */
  --line:       #EDEDF0;   /* hairlines on light */
  --line-dark:  rgba(244,247,255,0.14); /* hairlines on ink */

  /* Foreground on dark */
  --on-dark:        #F4F7FF;
  --on-dark-soft:   rgba(244,247,255,0.78);
  --on-dark-muted:  rgba(244,247,255,0.55);

  /* Type */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-hero:    clamp(2.35rem, 4.4vw + 0.45rem, 3.9rem);
  --text-h2:      clamp(1.75rem, 2.4vw + 0.45rem, 2.6rem);
  --text-h3:      clamp(1.32rem, 1.2vw + 0.55rem, 1.75rem);
  --text-h4:      clamp(1.1rem, 0.7vw + 0.58rem, 1.3rem);
  --text-lead:    clamp(1.04rem, 0.5vw + 0.83rem, 1.22rem);
  --text-body:    clamp(0.96rem, 0.2vw + 0.9rem, 1.04rem);
  --text-sm:      0.92rem;
  --text-cap:     0.8rem;
  --overline:     0.74rem;

  /* Spacing (4px base) */
  --su: 4px;
  --s-1: calc(var(--su) * 2);
  --s-2: calc(var(--su) * 3);
  --s-3: calc(var(--su) * 4);
  --s-4: calc(var(--su) * 6);
  --s-5: calc(var(--su) * 8);
  --s-6: calc(var(--su) * 12);
  --s-7: calc(var(--su) * 13);
  --s-8: calc(var(--su) * 18);

  /* Radius */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadows — warm-tinted, soft */
  --shadow-sm: 0 1px 2px rgba(21,23,26,0.05);
  --shadow-md: 0 4px 14px rgba(21,23,26,0.06);
  --shadow-lg: 0 12px 32px rgba(21,23,26,0.08);
  --shadow-xl: 0 18px 48px rgba(21,23,26,0.10);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* Layout */
  --page-gutter: clamp(1rem, 1.25vw, 2rem);
  --container: 1140px;
  --container-narrow: 760px;
  --nav-h: 66px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--ember); color: var(--paper); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.032em;
  color: var(--ink);
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); letter-spacing: -0.01em; }
p { max-width: 34em; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.overline {
  font-family: var(--font-mono);
  font-size: var(--overline);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.overline::before {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--ember);
  display: inline-block;
}
.on-dark .overline { color: var(--ember); }

.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--text); max-width: 32em; }
.on-dark .lead { color: var(--on-dark-soft); }

/* accent on a word */
.accent { color: var(--ember); }
.serif-em { font-family: var(--font-display); font-weight: 800; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.2rem, 6vw, 5.5rem); position: relative; }
.section-tight { padding-block: clamp(2.4rem, 4.5vw, 4rem); }
.narrow { max-width: var(--container-narrow); margin-inline: auto; }
.center { text-align: center; }
.center p { margin-inline: auto; }

.on-dark { background: var(--ink); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-soft); }
.band { background: var(--paper-2); }

.eyebrow-row { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-head { max-width: 30ch; }
.section-head.center { margin-inline: auto; }

.section > .container { position: relative; z-index: 1; }
.section > .container:not(.center) > .narrow:not(.center) { max-width: var(--container-narrow); margin-inline:0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em;
  padding: 0.95em 1.6em;
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--ease); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary:active { transform: translateY(-1px) scale(0.99); }
.on-dark .btn-primary { background: var(--ember); color: #fff; }
.on-dark .btn-primary:hover { background: var(--ember-deep); }

.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); background: var(--surface); }
.on-dark .btn-ghost { color: var(--on-dark); border-color: var(--line-dark); }
.on-dark .btn-ghost:hover { border-color: var(--on-dark); background: rgba(244,247,255,0.06); }

.btn-text {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; color: var(--ember);
  position: relative;
}
.btn-text svg { width: 1em; height: 1em; transition: transform 0.35s var(--ease); }
.btn-text:hover svg { transform: translateX(4px); }
.btn-text::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 0;
  background: currentColor; transition: width 0.4s var(--ease);
}
.btn-text:hover::after { width: calc(100% - 1.5em); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* link underline-draw */
.link-draw { position: relative; color: var(--ember); font-weight: 600; }
.link-draw::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background: currentColor; transition: width .4s var(--ease); }
.link-draw:hover::after { width: 100%; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(21,23,26,0.02);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }
.brand .dot { color: var(--ember); }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; }
.brand-mark svg { width: 30px; height: 30px; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--text); position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--ember); transition: width .35s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: var(--s-3); }
.nav-mobile-cta { display: none; } /* shown only inside the mobile menu */
.nav .btn { padding: 0.7em 1.25em; font-size: 0.92rem; }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; }
.nav-toggle span { position: relative; width: 22px; height: 2px; background: var(--ink); display: block; transition: 0.3s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:2px; background: var(--ink); transition: 0.3s var(--ease); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 3.4rem));
  padding-bottom: clamp(2.6rem, 5vw, 4.6rem);
  overflow: hidden;
}
.hero::before {
  /* subtle warm glow top-right */
  content:""; position:absolute; top:-25%; right:-12%;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle at center, rgba(57,96,239,0.16), rgba(57,96,239,0) 62%);
  pointer-events:none; z-index:0;
  filter: blur(8px);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { max-width: 36ch; }
.hero h1 { margin-top: var(--s-3); padding-bottom: 0.08em; }
.hero h1 .line { display: block; }
.hero .lead { margin-top: var(--s-4); }
.hero .btn-row { margin-top: var(--s-5); }
.hero-trust {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--text-sm); color: var(--muted);
}
.hero-trust b { color: var(--ink); font-weight: 600; }
.hero-trust .sep { color: var(--ember); }

/* Hero "hours reclaimed" panel — signature moment */
.reclaim {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2.2rem);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.reclaim::before {
  content:""; position:absolute; inset:0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  pointer-events:none;
}
.reclaim-head { display:flex; align-items:baseline; justify-content:space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.reclaim-head .label { font-size: var(--text-cap); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.reclaim-head .live { display:inline-flex; align-items:center; gap: 0.4em; font-size: var(--text-cap); color: var(--ember); font-weight: 600; }
.reclaim-head .live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(57,96,239,0.5); animation: pulse 2.4s var(--ease-soft) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(57,96,239,0.45);} 70%{ box-shadow: 0 0 0 9px rgba(57,96,239,0);} 100%{ box-shadow:0 0 0 0 rgba(57,96,239,0);} }

.reclaim-row { padding-block: var(--s-3); border-top: 1px solid var(--line); }
.reclaim-row:first-of-type { border-top: none; }
.reclaim-row .top { display:flex; align-items:baseline; justify-content:space-between; gap: var(--s-2); margin-bottom: 0.55rem; }
.reclaim-row .task { font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.reclaim-row .delta { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.reclaim-row .delta b { color: var(--ember); font-weight: 700; }
.reclaim-track { height: 10px; border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; position: relative; }
.reclaim-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ember), var(--ember-deep));
  width: 100%;
  transition: width 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.reclaim .in .reclaim-fill, .reclaim-fill.shrink { width: var(--to); }
.reclaim-foot { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--line); font-size: var(--text-sm); color: var(--muted); display:flex; align-items:center; gap: 0.5em; }
.reclaim-foot b { color: var(--ink); }

/* hero portrait + floating proof card */
.hero-visual { position: relative; }
.hero-portrait { width:100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border:1px solid var(--line); display:block; }
.hero-stat { position:absolute; left: clamp(10px, 4%, 22px); bottom: -20px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: var(--s-3) var(--s-4); width: min(78%, 290px); }
.hero-stat::before { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); pointer-events:none; }
.hero-stat .hs-top { display:flex; align-items:center; gap:.5em; font-size:var(--text-cap); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; }
.hero-stat .hs-top .pulse { width:7px;height:7px;border-radius:50%;background:var(--ember); box-shadow:0 0 0 0 rgba(57,96,239,.5); animation:pulse 2.4s var(--ease-soft) infinite; }
.hero-stat .row { display:flex; align-items:baseline; justify-content:space-between; gap: var(--s-2); padding:.3rem 0; border-top:1px solid var(--line); }
.hero-stat .row:first-of-type { border-top:none; }
.hero-stat .row .k { color: var(--muted); font-size:.84rem; }
.hero-stat .row .v { font-family: var(--font-mono); letter-spacing: -0.02em; color: var(--ink); font-weight:700; font-size:.9rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-stat .row .v b { color: var(--ember); }

/* interior page-hero photo */
.hero-photo { width:100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border:1px solid var(--line); display:block; }

/* ---------- POV / quote section ---------- */
.pov h2 { max-width: 18ch; }
.pull-quote {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.35;
  color: var(--on-dark); max-width: 24ch;
}
.pull-quote .accent { color: var(--ember); font-style: normal; }
.pov-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items:center; }

/* ---------- Cards / services ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.3vw, 2.1rem);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card .num { font-family: var(--font-display); font-size: 0.95rem; color: var(--ember); font-weight: 600; letter-spacing: 0.05em; }
.card h3 { font-size: var(--text-h4); margin-top: var(--s-3); margin-bottom: var(--s-3); }
.card p { font-size: var(--text-sm); color: var(--text); }
.card .card-icon {
  width: 50px; height: 50px; border-radius: 13px; display:grid; place-items:center;
  background: var(--ember-tint); color: var(--ember-deep); margin-bottom: var(--s-3);
}
.card .card-icon svg { width: 24px; height: 24px; }
.card ul.ticks { margin-top: var(--s-3); display: grid; gap: 0.5rem; }
.card ul.ticks li { font-size: var(--text-sm); color: var(--muted); display:flex; gap:0.55em; align-items:flex-start; }
.card ul.ticks li::before { content:""; flex:none; width: 16px; height:16px; margin-top: 3px; border-radius: 50%; background: var(--ember-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232B48C4' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }

/* ---------- Stats / results ---------- */
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
.stat {
  background: var(--ink); color: var(--on-dark); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.3vw, 2.2rem);
  position: relative; overflow: hidden;
}
.stat::after { content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background: radial-gradient(circle, rgba(57,96,239,0.25), transparent 70%); }
.stat .big { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: clamp(2.2rem, 4vw, 3.1rem); line-height:1; color: var(--ember); font-weight: 500; position: relative; }
.stat .big .arrow { color: var(--on-dark-muted); font-size: 0.55em; vertical-align: middle; margin: 0 0.15em; }
.stat .stat-label { margin-top: var(--s-3); font-weight: 600; color: var(--on-dark); }
.stat p { font-size: var(--text-sm); color: var(--on-dark-soft); margin-top: 0.4rem; }

/* ---------- Audience tiles ---------- */
.tiles { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
.tile {
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem,2vw,1.9rem);
  background: var(--surface); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tile .kicker { font-size: var(--text-cap); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
.tile h4 { margin: var(--s-2) 0; }
.tile p { font-size: var(--text-sm); color: var(--muted); }

/* ---------- About teaser / split ---------- */
.split { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split.rev { grid-template-columns: 1.15fr 0.85fr; }
.portrait {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, #2c2922, var(--ink) 70%);
  box-shadow: var(--shadow-xl);
  display:grid; place-items:center;
}
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.portrait .ph { text-align:center; color: var(--on-dark-muted); padding: var(--s-4); }
.portrait .ph .mono { font-family: var(--font-display); font-size: clamp(3rem,7vw,5rem); color: var(--ember); line-height:1; }
.portrait .ph .cap { font-size: var(--text-cap); letter-spacing: 0.14em; text-transform: uppercase; margin-top: var(--s-3); }
.portrait .frame { position:absolute; inset:10px; border:1px solid rgba(244,247,255,0.16); border-radius: calc(var(--radius-lg) - 8px); pointer-events:none; }
.portrait .badge {
  position:absolute; left: 14px; bottom: 14px; z-index:2;
  background: rgba(27,26,23,0.72); backdrop-filter: blur(8px);
  color: var(--on-dark); border:1px solid var(--line-dark);
  border-radius: var(--radius-pill); padding: 0.5em 0.95em; font-size: var(--text-cap); font-weight:600;
  display:flex; align-items:center; gap:0.5em;
}
.portrait .badge .dot { width:7px;height:7px;border-radius:50%;background:var(--ember); }

/* ---------- Marquee divider ---------- */
.marquee {
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(1rem, 2vw, 1.4rem);
  overflow: hidden; white-space: nowrap; position: relative;
  border-block: 1px solid var(--line-dark);
}
.marquee-track { display: inline-flex; align-items:center; gap: 2.5rem; animation: marquee 32s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem,2vw,1.6rem); color: var(--on-dark); }
.marquee-track .sep { color: var(--ember); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Steps (how I work) ---------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); counter-reset: step; }
.step { position: relative; padding-top: var(--s-4); border-top: 2px solid var(--line); }
.step .n { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 0.95rem; color: var(--ember); font-weight: 600; }
.step h4 { font-size: 1.15rem; margin: var(--s-2) 0; }
.step p { font-size: var(--text-sm); color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { margin-inline:0; display:grid; gap:var(--s-2); }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: box-shadow .35s var(--ease), border-color .35s var(--ease); }
.faq-item[open] { box-shadow: var(--shadow-md); border-color: transparent; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: clamp(1.1rem,1.8vw,1.5rem);
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-3);
  font-family: var(--font-display); font-size: clamp(1.05rem,1.4vw,1.25rem); font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .icon { flex:none; width: 30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition: transform .4s var(--ease), background-color .3s, border-color .3s; position: relative; }
.faq-item summary .icon::before, .faq-item summary .icon::after { content:""; position:absolute; background: var(--ink); border-radius:2px; transition: .3s var(--ease); }
.faq-item summary .icon::before { width: 12px; height: 2px; }
.faq-item summary .icon::after { width: 2px; height: 12px; }
.faq-item[open] summary .icon { background: var(--ember); border-color: var(--ember); transform: rotate(180deg); }
.faq-item[open] summary .icon::before, .faq-item[open] summary .icon::after { background: #fff; }
.faq-item[open] summary .icon::after { height: 0; }
.faq-answer { padding: 0 clamp(1.1rem,1.8vw,1.5rem) clamp(1.1rem,1.8vw,1.5rem); }
.faq-answer p { color: var(--text); font-size: var(--text-body); max-width: 33em; }
.faq-answer p + p { margin-top: 0.8rem; }

/* ---------- CTA / Contact ---------- */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before { content:""; position:absolute; bottom:-30%; left:-10%; width:50vw; height:50vw; max-width:600px; max-height:600px; background: radial-gradient(circle, rgba(57,96,239,0.18), transparent 65%); pointer-events:none; }
.contact-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.contact-methods { display:grid; gap: var(--s-2); }
.contact-method {
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border:1px solid var(--line-dark); border-radius: var(--radius);
  background: rgba(244,247,255,0.04); transition: border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.contact-method:hover { border-color: var(--ember); transform: translateX(4px); background: rgba(244,247,255,0.07); }
.contact-method .ic { flex:none; width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background: rgba(57,96,239,0.16); color: var(--ember); }
.contact-method .ic svg { width: 20px; height:20px; }
.contact-method .label { font-size: var(--text-cap); color: var(--on-dark-muted); }
.contact-method .val { font-weight: 600; color: var(--on-dark); }

/* form */
.form { display:grid; gap: var(--s-3); }
.field { display:grid; gap: 0.4rem; }
.field label { font-size: var(--text-cap); font-weight:600; color: var(--on-dark-soft); letter-spacing: 0.02em; }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 1rem; color: var(--on-dark);
  background: rgba(244,247,255,0.06); border:1.5px solid var(--line-dark); border-radius: var(--radius-sm);
  padding: 0.85em 1em; transition: border-color .3s var(--ease), background-color .3s var(--ease);
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-muted); }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--ember); background: rgba(244,247,255,0.1); }
.field textarea { resize: vertical; min-height: 120px; }
.form .btn { width: 100%; margin-top: var(--s-2); }
.form-note { font-size: var(--text-cap); color: var(--on-dark-muted); text-align:center; }
.form-success { display:none; padding: var(--s-4); border:1px solid var(--ember); border-radius: var(--radius); background: rgba(57,96,239,0.1); color: var(--on-dark); }
.form-success.show { display:block; }

/* newsletter inline */
.subscribe { display:flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.subscribe input { flex:1; min-width: 200px; font-family:inherit; font-size:1rem; padding:0.85em 1.1em; border-radius: var(--radius-pill); border:1.5px solid var(--line); background: var(--surface); color: var(--text); }
.subscribe input:focus { outline:none; border-color: var(--ember); }
.subscribe .btn { flex:none; }
.subscribe-msg { font-size: var(--text-cap); color: var(--muted); margin-top: 0.6rem; min-height: 1.1em; }

/* ---------- Footer ---------- */
.footer { background: #111C4A; color: var(--on-dark-soft); padding-top: clamp(3.5rem,6vw,5rem); }
.footer .container { position: relative; z-index: 1; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); padding-bottom: var(--s-6); }
.footer .brand { color: var(--on-dark); }
.footer-blurb { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--on-dark-muted); max-width: 34ch; }
.footer-col h4 { font-size: var(--text-cap); text-transform: uppercase; letter-spacing: 0.12em; color: var(--on-dark-muted); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--s-3); }
.footer-col a { display:flex; align-items:center; min-height:44px; padding: 0.35rem 0; font-size: var(--text-sm); color: var(--on-dark-soft); transition: color .25s, transform .25s var(--ease); }
.footer-col a:hover { color: var(--ember); transform: translateX(3px); }
.footer-bottom { display:flex; flex-wrap:wrap; gap: var(--s-3); justify-content:space-between; align-items:center; padding-block: var(--s-4); border-top: 1px solid var(--line-dark); font-size: var(--text-cap); color: var(--on-dark-muted); }
.socials { display:flex; gap: var(--s-2); }
.socials a { width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-dark); color: var(--on-dark-soft); transition: .3s var(--ease); }
.socials a:hover { color: var(--ember); border-color: var(--ember); transform: translateY(-3px); }
.socials svg { width:18px;height:18px; }

/* ---------- Reveal animations ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.r-left { transform: translateX(-16px); }
.js .reveal.r-right { transform: translateX(16px); }
.js .reveal.r-scale { transform: scale(0.98); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }

/* scroll progress */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--ember), var(--ember-deep)); z-index: 200; transition: width 0.1s linear; }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: var(--text-cap); color: var(--muted); margin-bottom: var(--s-3); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ember); }
.crumb .sep { margin-inline: 0.5em; }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding-top: calc(var(--nav-h) + clamp(1.8rem,3.5vw,2.8rem)); padding-bottom: clamp(1.6rem,3vw,2.6rem); }

/* prose blocks */
.prose p { margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); }

/* belief list */
.beliefs { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4); }
.belief { padding: var(--s-4); border-radius: var(--radius); background: var(--surface); border:1px solid var(--line); }
.belief .q { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 0.5rem; }
.belief p { font-size: var(--text-sm); color: var(--muted); }

/* experience timeline */
.timeline { display:grid; gap: var(--s-2); max-width: 760px; }
.tl-item { display:grid; grid-template-columns: 130px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top:1px solid var(--line); }
.tl-item:first-child { border-top: none; }
.tl-when { font-size: var(--text-cap); color: var(--ember); font-weight: 700; letter-spacing: 0.04em; padding-top: 0.2rem; }
.tl-what h4 { font-size: 1.15rem; }
.tl-what .role { color: var(--muted); font-size: var(--text-sm); margin-bottom: 0.4rem; }
.tl-what p { font-size: var(--text-sm); color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-copy { max-width: 100%; }
  .reclaim { max-width: 480px; }
  .pov-grid, .split, .split.rev, .contact-grid { grid-template-columns: 1fr; }
  .cards, .stats, .tiles { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .beliefs { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  :root { --nav-h: 64px; }
  .nav .nav-cta .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
    background: var(--paper); border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-3) clamp(1.25rem,4vw,2.5rem) var(--s-5);
    transform: translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
    transition: transform .35s var(--ease), opacity .35s var(--ease), visibility 0s linear .35s;
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  body.menu-open .nav-menu { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: transform .35s var(--ease), opacity .35s var(--ease), visibility 0s; }
  .nav-menu .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-menu a { padding: 0.9rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav-menu .nav-links a { display: block; }
  .nav-menu a::after { display:none; }
  .nav-menu .btn { display: inline-flex; margin-top: var(--s-3); width: 100%; }
}
@media (max-width: 620px) {
  .cards, .stats, .tiles, .steps, .footer-top { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: var(--s-1); }
  .hero-trust { flex-direction: column; gap: 0.4rem; }
  .hero-trust .sep { display: none; }
  .btn-row .btn { width: 100%; }
}

/* ---------- Article / blog ---------- */
.article { max-width: 740px; margin-inline: auto; }
.article h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.article-hero-img { display:block; width:100%; aspect-ratio: 1200/420; object-fit:cover; border:1px solid var(--line); border-radius: var(--radius-lg); margin: var(--s-5) 0 var(--s-2); box-shadow: var(--shadow-sm); }
.article-meta { display:flex; flex-wrap:wrap; gap: var(--s-2) var(--s-3); align-items:center; color: var(--muted); font-size: var(--text-sm); margin-top: var(--s-3); }
.article-meta .tag { color: var(--ember); font-weight:600; text-transform:none; letter-spacing:0; font-size: var(--text-cap); }
.article-body { margin-top: var(--s-5); }
.article-body p, .article-body li { font-size: 1.12rem; line-height: 1.75; color: var(--text); max-width: 34em; }
.article-body p { margin-bottom: 1.15rem; }
.article-body h2 { font-size: var(--text-h3); margin: var(--s-6) 0 var(--s-3); }
.article-body h3 { font-size: var(--text-h4); margin: var(--s-5) 0 var(--s-2); }
.article-body ul { margin: var(--s-2) 0 var(--s-4) 1.2em; list-style: disc; }
.article-body li { margin-bottom: 0.5rem; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body a { color: var(--ember-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article-body p.lede, .lede { font-family: var(--font-display); font-size: clamp(1.25rem,2vw,1.55rem) !important; line-height:1.4 !important; color: var(--ink) !important; font-weight: 400; margin-bottom: var(--s-4); }
.callout { border-left: 3px solid var(--ember); background: var(--ember-tint); padding: var(--s-4); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--s-5) 0; }
.callout p { margin: 0 !important; color: var(--ink) !important; font-size: 1.08rem !important; }
.takeaways { background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2rem); margin: var(--s-6) 0; }
.takeaways h3 { color: var(--on-dark); margin: 0 0 var(--s-3); }
.takeaways ul { list-style:none; margin: 0; display:grid; gap: var(--s-2); }
.takeaways li { color: var(--on-dark-soft) !important; padding-left: 1.6em; position:relative; font-size: 1.02rem !important; }
.takeaways li::before { content:"→"; position:absolute; left:0; color: var(--ember); font-weight:700; }
.author-box { display:flex; gap: var(--s-4); align-items:center; border:1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); background: var(--surface); margin-top: var(--s-6); }
.author-box .ab-photo { flex:none; width:64px; height:64px; border-radius:50%; background: radial-gradient(120% 120% at 30% 20%, #2c2922, var(--ink)); display:grid; place-items:center; color: var(--ember); font-family: var(--font-display); font-size:1.4rem; overflow:hidden; position:relative; }
.author-box .ab-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.author-box .ab-name { font-weight:700; color: var(--ink); }
.author-box .ab-bio { font-size: var(--text-sm); color: var(--muted); margin-top: 0.2rem; }
.post-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4); }
.post-card { display:block; border:1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); background: var(--surface); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); height:100%; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.post-card .tag { color: var(--ember); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; font-size: var(--text-cap); }
.post-card h3 { font-size: var(--text-h4); margin: var(--s-2) 0; }
.post-card p { font-size: var(--text-sm); color: var(--muted); }
.post-card .read { margin-top: var(--s-3); font-size: var(--text-cap); color: var(--ember); font-weight:600; }
@media (max-width:620px){ .post-grid { grid-template-columns:1fr; } .author-box{ flex-direction:column; text-align:center; } }

/* article comparison tables */
.article-body .cmp { overflow-x:auto; margin: var(--s-5) 0; border:1px solid var(--line); border-radius: var(--radius); }
.article-body table { width:100%; border-collapse:collapse; font-size:var(--text-body); }
.article-body th, .article-body td { text-align:left; padding:0.72rem 0.9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.article-body thead th { background:var(--paper-2); font-family:var(--font-body); font-weight:700; color:var(--ink); font-size:0.86rem; text-transform:uppercase; letter-spacing:0.04em; }
.article-body tbody tr:last-child td { border-bottom:none; }
.article-body tbody td strong { color:var(--ink); }

/* time-back calculator */
.calc-wrap { max-width: 760px; margin-inline:auto; }
.calc { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow-md); }
.calc-field { margin-bottom: var(--s-4); }
.calc-field > label { display:block; font-weight:600; color:var(--ink); margin-bottom:0.55rem; font-size:1rem; }
.calc-field .hint { color:var(--muted); font-weight:400; font-size:0.85rem; }
.calc-row { display:flex; align-items:center; gap:var(--s-3); }
.calc input[type=range] { flex:1; accent-color: var(--ember); height:6px; }
.calc-val { min-width:90px; text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); font-size:1.05rem; }
.calc input[type=number] { width:120px; font-family:inherit; font-size:1rem; padding:0.6em 0.8em; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color:var(--text); }
.calc input:focus { outline:none; border-color:var(--ember); }
.calc-result { margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.calc-stat { background:var(--ink); color:var(--on-dark); border-radius:var(--radius); padding:var(--s-4); position:relative; overflow:hidden; }
.calc-stat::after { content:""; position:absolute; right:-24px; top:-24px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,rgba(57,96,239,0.25),transparent 70%); }
.calc-stat .big { font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.7rem); line-height:1; color:var(--ember); font-weight:500; }
.calc-stat .lbl { margin-top:0.55rem; font-size:0.86rem; color:var(--on-dark-soft); }
.calc-note { grid-column:1/-1; font-size:0.85rem; color:var(--muted); margin-top:0.3rem; }
@media (max-width:560px){ .calc-result { grid-template-columns:1fr; } }

/* ---------- Keyboard focus ---------- */
/* Zero specificity: text fields keep their own ember-border focus style. Ember passes 3:1 on paper and on ink. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- Page-to-page crossfade (browsers without support just navigate) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
}

/* ---------- Results: before → after time bar ---------- */
/* The fill is the hours the task takes; it shrinks from before (full) to after (--after). No-JS shows the after state. */
.tbar { position: relative; height: 8px; margin: .55rem 0 .5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.tbar-fill { position: absolute; inset: 0 auto 0 0; width: var(--after); border-radius: inherit; background: var(--ember); }
.js .tbar-fill { width: 100%; transition: width 1.6s var(--ease) 0.2s; }
.js .tbar.in .tbar-fill { width: var(--after); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}

/* ---------- Clearer client journeys ---------- */
:root { --ember-text: #2B48C4; --ember-light: #8FB8FF; }
.overline, .btn-text, .link-draw, .step .n, .tl-when, .post-card .tag, .post-card .read { color: var(--ember-text); }
.on-dark .overline, .on-dark .btn-text, .on-dark .link-draw, .on-dark .accent, .footer .link-draw { color: var(--ember-light); }
.on-dark .btn-primary { background: var(--ember-deep); }
.accent { color: var(--ember-text); }
.btn { max-width:100%; white-space:normal; text-align:center; min-height:44px; }
.btn:disabled { opacity:.65; cursor:wait; transform:none; }
.btn-text { min-height:44px; }
.nav-links a[aria-current="page"] { font-weight:700; }
.nav-links a[aria-current="page"]::after { width:100%; }
.card:hover { transform:none; box-shadow:none; border-color:var(--line); }
.home-hero { padding-top:calc(var(--nav-h) + 48px); padding-bottom:48px; min-height:0; }
.home-hero .hero-grid { grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(24px,3vw,64px); }
.home-hero .hero-copy { max-width:none; }
.home-hero h1 { font-size:clamp(2.35rem,4.5vw,7rem); }
.home-hero .lead { font-size:clamp(1.04rem,.6vw + .83rem,1.5rem); }
.page-hero .narrow { max-width: var(--container-narrow); margin-inline:0; }
.home-hero h1 { margin:20px 0; }
.home-hero .btn-row { margin-top:24px; gap:12px; }
.hero-caption { margin-top:20px; font-size:.88rem; color:var(--muted); }
.founder-panel { padding:32px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); }
.founder-panel h2 { margin:20px 0 16px; font-size:clamp(1.6rem,2.4vw,2.2rem); }
.founder-panel > p { font-size:var(--text-sm); }
.founder-detail { display:grid; gap:8px; padding-block:20px; margin-top:20px; border-top:1px solid var(--line); font-size:var(--text-sm); }
.fine-print { font-size:.86rem !important; line-height:1.65; color:var(--muted) !important; margin-top:16px; }
.fine-print a, .pricing-note a, .resource-links a { text-decoration:underline; text-underline-offset:3px; color:var(--ember-text); }
.offer-grid, .package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.offer-card { display:flex; flex-direction:column; }
.offer-card h3 { font-size:1.6rem; }
.offer-price { margin-top:auto; padding:24px 0 20px; font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--ink); }
.offer-price span { display:block; margin-top:8px; font-family:var(--font-body); font-size:.88rem; font-weight:400; color:var(--muted); }
.offer-card > .btn { align-self:flex-start; margin-top:auto; }
.offer-card > .btn-text { margin-top:16px; }
.enquiry-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.enquiry-choice-grid .offer-card { gap:16px; min-width:0; }
.enquiry-choice-grid .offer-card .btn { white-space:normal; text-align:center; }
.enquiry-heading h3 { color:var(--on-dark); font-size:1.4rem; line-height:1.25; }
.enquiry-heading p { color:var(--on-dark-soft); font-size:var(--text-sm); margin-top:10px; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { min-width:0; }
.field[hidden] { display:none; }
.field select option { background:var(--ink); color:var(--on-dark); }
.field select:disabled { opacity:.7; }
.field-hint { color:var(--on-dark-muted); font-size:var(--text-cap); }
.enquiry-form textarea { min-height:105px; }
.enquiry-context { border:1px solid var(--line-dark); border-radius:var(--radius-sm); }
.enquiry-context summary { cursor:pointer; padding:14px 16px; color:var(--on-dark-soft); font-size:var(--text-sm); }
.context-fields { display:grid; gap:16px; padding:4px 16px 16px; }
.form-note a { text-decoration:underline; text-underline-offset:3px; }
#enquire, #options { scroll-margin-top:110px; }
@media (max-width:1000px) { .enquiry-choice-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .form-row { grid-template-columns:1fr; } .btn { white-space:normal; text-align:center; } }
.pricing-note { margin-top:24px; font-size:var(--text-sm); color:var(--muted); max-width:40em; }
.start-note { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
.start-note p { font-size:var(--text-sm); max-width:36em; }
.start-note a { flex-shrink:0; }
.section-link { margin-top:24px; }
.tile { display:flex; flex-direction:column; gap:16px; }
.tile h3 { font-size:var(--text-h4); line-height:1.2; }
.tile .btn-text { margin-top:auto; }
.steps h3 { font-size:1.15rem; line-height:1.2; margin:12px 0; }
.sample-exercise { margin-top:40px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.sample-exercise h3 { margin:16px 0 12px; font-size:1.4rem; line-height:1.15; }
.sample-exercise p { font-size:var(--text-sm); }
.sample-exercise .faq-answer p + p { margin-top:16px; }
.resource-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:32px; }
.resource-links a { display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-sm); }
.services-hero .split { grid-template-columns:1.1fr .9fr; align-items:start; }
.split > *, .hero-grid > * { min-width:0; }
.btn { max-width:100%; }
.contact-page .nav { background:rgba(255,255,255,.94); border-bottom-color:var(--line); }
.services-hero h1 { font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1.05; }
.training-layout { grid-template-columns:1fr 1fr; grid-template-areas:"features intro"; }
.training-intro { grid-area:intro; }
.training-features { grid-area:features; }
.package-context { margin-top:24px; font-size:.88rem; color:var(--muted); }
.service-action { margin-top:20px; }
.package-card { display:flex; flex-direction:column; gap:14px; }
.package-card h3 { margin:0; font-size:1.4rem; }
.package-card .package-price { font-family:var(--font-display); font-size:1.8rem; color:var(--ink); font-weight:700; }
.package-card .package-duration { color:var(--muted); font-size:.9rem; }
.package-card > .btn-text { margin-top:auto; }
.workshop-agenda { margin-left:20px; display:grid; gap:16px; font-size:var(--text-sm); list-style:decimal; }
.form-error, .noscript-error { padding:20px; border:1px solid var(--ember-light); border-radius:var(--radius); color:var(--on-dark); background:rgba(57,96,239,.1); }
.form-error p { color:var(--on-dark); font-size:var(--text-sm); }
.form-error a { display:block; margin-top:12px; color:var(--ember-light); text-decoration:underline; text-underline-offset:3px; }
.field-error { color:var(--ember-light); font-size:.9rem; }
.field [aria-invalid="true"] { border-color:var(--ember-light); }
.noscript-error { display:none; margin-bottom:20px; }
.noscript-error:target { display:block; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:8px; left:8px; z-index:300; padding:12px 20px; border-radius:6px; background:var(--ink); color:white; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
@media(max-width:940px) {
  .home-hero .hero-grid, .services-hero .split { grid-template-columns:1fr; gap:28px; }
  .training-layout { grid-template-columns:1fr; grid-template-areas:"intro" "features"; }
  .start-note { flex-direction:column; align-items:flex-start; gap:12px; }
  .sample-exercise { grid-template-columns:1fr; gap:20px; }
}
@media(max-width:620px) {
  .home-hero { padding-top:calc(var(--nav-h) + 28px); padding-bottom:28px; }
  .home-hero .hero-grid { gap:24px; }
  .home-hero .founder-panel { padding:20px; }
  .home-hero .founder-panel > p, .home-hero .founder-detail, .home-hero .founder-panel .fine-print { display:none; }
  .home-hero .founder-panel h2 { font-size:1.5rem; margin:12px 0 4px; }
  .home-offers { padding-block:32px; }
  .offer-grid, .package-grid { grid-template-columns:1fr; }
  .offer-card > .btn { width:100%; }
  .sample-exercise { padding:20px; }
  .nav .brand { font-size:1.05rem; }
  .calc-row { gap:12px; }
  .calc-val { min-width:70px; }
}

@media(max-width:620px) {
  .home-hero .founder-panel > p:first-of-type { display:block; margin-top:12px; font-size:.86rem; }
  .home-hero .founder-panel .fine-print { display:block; font-size:.8rem !important; }
}

.article-meta .tag, .tile .kicker, .hero-stat .row .v b { color:var(--ember-text); }
.card p[style*="color:var(--ember)"] { color:var(--ember-text) !important; }
main:focus { outline:none; }

/* Teaching preview: written examples, practice and explicit review. */
.sample-preview { padding-block:64px; }
.sample-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.sample-preview h2 { margin:20px 0; font-size:var(--text-h2); }
.sample-preview .ticks { margin:24px 0; }
.preview-example { padding:28px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); }
.preview-example h3 { margin:20px 0; font-size:1.5rem; }
.preview-example blockquote { padding:20px; margin:20px 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:1.15rem; line-height:1.6; }
.preview-example mark { background:var(--ember-tint); color:var(--ink); padding:0 3px; }
.preview-check { border-left:3px solid var(--ember); padding-left:16px; font-size:var(--text-sm); }
.example-caption { font-size:.85rem; color:var(--muted); line-height:1.65; margin-top:18px; }
.audience-strip { margin-top:36px; border-top:1px solid var(--line); padding-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; font-size:.86rem; }
.audience-strip span { color:var(--muted); }
.audience-strip a { color:var(--ember-text); min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:4px; }
.session-preview { margin-top:36px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.session-preview h3 { margin:16px 0; font-size:1.4rem; }
.session-preview p { font-size:var(--text-sm); }
.session-preview .btn-text { margin-top:16px; }
.session-agenda { list-style:none; display:grid; gap:20px; }
.session-agenda li { display:grid; grid-template-columns:90px 1fr; gap:16px; }
.session-agenda li > span { font-family:var(--font-mono); font-size:.78rem; color:var(--ember-text); padding-top:3px; }
.session-agenda p { margin-top:8px; }
.delivery-note { margin-top:32px; max-width:40em; }
.delivery-note h3 { font-size:1.3rem; margin-bottom:12px; }
.delivery-note p { font-size:var(--text-sm); }
.sample-hero { padding-bottom:32px; }
.sample-hero h1 { font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.1; max-width:22ch; margin:20px 0; }
.sample-hero .lead { max-width:34em; }
.sample-disclosure { max-width:36em; color:var(--muted); font-size:.86rem; margin-top:20px; }
.sample-workspace { padding-top:24px; }
.sample-tabs, .sample-jumps { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
.sample-tabs button, .sample-jumps a { padding:12px 20px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); font-family:inherit; font-size:.94rem; color:var(--ink); cursor:pointer; min-height:44px; }
.sample-tabs button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.sample-panel { scroll-margin-top:100px; }
.sample-panel + .sample-panel { margin-top:48px; }
.sample-tabs:not([hidden]) ~ .sample-panel { margin-top:0; }
.sample-panel > h2 { font-size:clamp(1.4rem,2.3vw,2rem); margin-bottom:24px; }
.exercise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.exercise-card { padding:24px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); min-width:0; }
.exercise-card h3 { font-size:1.15rem; line-height:1.35; margin:20px 0 16px; }
.exercise-card p, .exercise-card blockquote { font-size:var(--text-sm); }
.exercise-card blockquote { padding-left:14px; border-left:2px solid var(--ember); line-height:1.7; }
.draft-card { background:var(--paper-2); }
.draft-card .example-caption { margin:0 0 16px; }
.review-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:32px; margin-top:32px; }
.review-question fieldset { border:0; padding:0; min-width:0; }
.review-question legend { font-family:var(--font-display); font-size:1.2rem; font-weight:650; margin-bottom:16px; }
.review-option { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-top:10px; background:var(--surface); font-size:var(--text-sm); cursor:pointer; }
.review-option input { flex:none; margin-top:5px; width:18px; height:18px; accent-color:var(--ember); }
.review-question button { margin-top:20px; will-change:auto; }
.sample-feedback { border-left:3px solid var(--ember); padding:14px 18px; margin-top:20px; background:var(--paper-2); font-size:var(--text-sm); }
.sample-feedback.answer-correct { border-color:var(--ink); }
.sample-answer { margin-top:24px; border-top:1px solid var(--line); }
.sample-answer summary { cursor:pointer; padding:16px 0; font-size:var(--text-sm); font-weight:600; color:var(--ember-text); }
.sample-answer > div { padding:0 0 20px; }
.sample-answer p { font-size:var(--text-sm); }
.sample-answer blockquote { margin-top:20px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:20px; font-size:var(--text-sm); line-height:1.7; }
.sample-takeaway { border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2); padding:24px; align-self:start; }
.sample-takeaway h3 { font-size:1.3rem; margin:16px 0; }
.sample-takeaway p { font-size:var(--text-sm); }
.sample-takeaway p + p { margin-top:16px; }
.sample-takeaway .btn-text { margin-top:20px; }
.sample-download { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sample-download h3 { font-size:1.2rem; margin-bottom:10px; }
.sample-download p { font-size:var(--text-sm); max-width:36em; }
.sample-download a { flex-shrink:0; }
@media(max-width:1000px) { .exercise-grid { grid-template-columns:1fr; } }
@media(max-width:940px) {
  .sample-preview-grid, .session-preview, .review-grid { grid-template-columns:1fr; gap:24px; }
  .sample-download { flex-direction:column; align-items:flex-start; }
}
@media(max-width:620px) {
  .sample-preview { padding-block:32px; }
  .preview-example, .session-preview, .exercise-card, .sample-takeaway { padding:20px; }
  .sample-preview .btn { width:100%; }
  .sample-tabs { gap:8px; }
  .sample-tabs button { padding:12px 14px; font-size:.85rem; }
  .session-agenda li { grid-template-columns:1fr; gap:6px; }
  .sample-download a { width:100%; white-space:normal; }
}

/* Everyday work: light illustrations and readable, static process diagrams. */
.hero-work { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#F5F7FD; }
.portal-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.portal-grid > * { min-width:0; }
.portal-form { display:grid; gap:20px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.portal-form .field { display:grid; gap:8px; }
.portal-form .form-row { align-items:start; }
.portal-form .portal-grid > div > .field + .field, .portal-form .portal-grid > div > .form-row + .field { margin-top:20px; }
.portal-form .field label { color:var(--ink); }
.portal-form .field input, .portal-form .field select, .portal-form .field textarea { color:var(--ink); background:var(--paper-2); border:1px solid #b8b9b3; width:100%; min-height:48px; font:inherit; padding:12px; border-radius:6px; }
.portal-form .field textarea { min-height:130px; }
.portal-form .field input::placeholder, .portal-form .field textarea::placeholder { color:var(--muted); }
.portal-form .field input:focus, .portal-form .field textarea:focus, .portal-form .field select:focus { outline:2px solid var(--ember); outline-offset:2px; }
.portal-form .btn { justify-self:start; }
.portal-status { margin:20px 0; padding:16px 20px; background:var(--paper-2); border-radius:var(--radius-sm); overflow-wrap:anywhere; }
.portal-status:empty { display:none; }
.portal-status[data-kind="error"] { background:#FFF1F0; border-left:3px solid #D93F3F; }
.form-trap { position:absolute; left:-9999px; width:1px; height:1px; }
.booking-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
#slot-picker { border:0; margin-top:24px; }
#slot-picker legend { font-weight:700; margin-bottom:12px; }
.slot-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.slot-option { display:flex; gap:10px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.slot-option:has(input:checked) { border-color:var(--ember); background:#F5F7FD; }
.slot-option input { accent-color:var(--ember); width:18px; height:18px; flex-shrink:0; }
.slot-option span { font-size:.9rem; }
.selected-time { font-weight:600; margin:20px 0; }
.booking-confirmation { padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:#F5F7FD; }
.booking-confirmation p, .booking-confirmation h2, .booking-confirmation .btn { margin-top:20px; }
.admin-login { max-width:480px; }
.admin-jumps { display:flex; gap:24px; flex-wrap:wrap; }
.admin-jumps a { text-decoration:underline; min-height:44px; display:flex; align-items:center; }
.admin-section { padding-top:36px; scroll-margin-top:100px; }
.availability-form { grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0; }
.availability-form .btn { grid-column:1/-1; }
.admin-list { display:grid; gap:14px; margin-top:24px; }
.admin-row { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:18px; border:1px solid var(--line); border-radius:8px; }
.admin-row .btn { margin-left:auto; }
.admin-badge { font-size:.84rem; color:var(--muted); overflow-wrap:anywhere; }
.admin-record { padding:24px; background:var(--paper-2); border-radius:var(--radius); overflow-wrap:anywhere; }
.admin-record p { margin-top:10px; font-size:.92rem; }
.admin-record .btn { margin-top:16px; }
.admin-notice { color:var(--ember-text); font-weight:600; }
.preserve-lines { white-space:pre-wrap; }
@media(max-width:940px) { .portal-grid { grid-template-columns:1fr; gap:28px; } }
@media(max-width:620px) { .portal-form { padding:20px; } .availability-form { grid-template-columns:1fr; } .slot-options { grid-template-columns:1fr; } .booking-confirmation { padding:20px; } .admin-row .btn { margin-left:0; } }
.work-illustration img { display:block; width:100%; height:auto; aspect-ratio:4/3; }
.work-illustration figcaption { padding:8px 20px; font-size:.72rem; color:#62645c; border-top:1px solid #E3E7F0; }
/* A shared alignment for the About introduction, story, experience and next step. */
.about-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,3vw,64px); align-items:start; }
.about-grid > * { min-width:0; }
.about-hero { padding-bottom:clamp(36px,4vw,64px); }
.about-hero .crumb { margin-bottom:28px; }
.about-intro h1 { font-size:clamp(2.2rem,3.8vw,4.75rem); line-height:1.04; margin:20px 0 24px; max-width:23ch; }
.about-intro .lead { max-width:32em; }
.about-intro-detail { margin-top:16px; color:var(--muted); }
.about-credentials { display:flex; flex-wrap:wrap; gap:10px 24px; padding-top:20px; margin-top:24px; border-top:1px solid var(--line); font-size:.9rem; }
.about-intro .btn-row { margin-top:24px; }
.about-teaching { margin:0; padding:clamp(24px,2.5vw,40px); background:#F5F7FD; border:1px solid #E3E7F0; border-radius:var(--radius-lg); }
.about-teaching h2 { font-size:clamp(1.6rem,2vw,2.35rem); line-height:1.1; margin:16px 0 24px; max-width:22ch; }
.teaching-label { display:block; font-size:.76rem; font-weight:600; color:var(--muted); margin-bottom:8px; }
.teaching-source { padding-bottom:20px; border-bottom:1px solid #d9cdbd; }
.teaching-source p { font-size:.95rem; }
.teaching-draft { margin:20px 0; font-size:clamp(1.08rem,1.25vw,1.4rem); line-height:1.55; }
.teaching-draft mark { background:#f0caa6; color:var(--ink); padding:2px 4px; box-decoration-break:clone; }
.teaching-check { display:flex; align-items:flex-start; gap:14px; padding:18px; background:var(--surface); border-left:3px solid var(--ember); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.teaching-check-icon { flex:0 0 24px; height:24px; display:grid; place-items:center; border:1.5px solid var(--ember-text); border-radius:50%; color:var(--ember-text); font-weight:700; }
.teaching-check p { margin-top:6px; font-size:.9rem; }
.about-teaching figcaption { margin-top:16px; color:var(--muted); font-size:.8rem; }
.about-teaching .btn-text { margin-top:16px; }
.about-story { border-top:1px solid var(--line); }
.about-story h2, .about-section-heading h2, .about-background h2, .about-next-step h2 { margin:16px 0 24px; line-height:1.06; }
.about-quote { max-width:38ch; margin-top:28px; padding-left:20px; border-left:2px solid var(--ember); font-family:var(--font-display); font-size:clamp(1.2rem,1.5vw,1.6rem); line-height:1.45; color:var(--muted); }
.about-quote cite { display:block; margin-top:12px; font:400 .82rem var(--font-body); }
.about-prose { font-size:clamp(1rem,.45vw + .75rem,1.15rem); }
.about-prose p { max-width:34em; }
.about-method { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:0; margin:28px 0 0; list-style:none; }
.about-method li { min-width:0; padding-top:20px; border-top:1px solid #c9c9c2; }
.about-step-number { font-family:var(--font-mono); font-size:.9rem; color:var(--ember-text); }
.about-method h3 { font-size:1.4rem; line-height:1.15; margin:16px 0 12px; }
.about-method p { max-width:58ch; }
.about-section-heading .lead { margin-top:24px; }
.about-background .timeline { max-width:none; }
.about-background .tl-item:first-child { padding-top:0; }
.about-background .tl-what h3 { font-size:1.2rem; line-height:1.2; margin-bottom:6px; }
.about-background-note { color:var(--muted); max-width:52ch; }
.about-next-step .lead { margin-top:24px; }
.about-next-step .btn-row { margin-top:24px; }
.about-call-option { margin-top:20px; font-size:.9rem; }
.about-call-option a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:940px) {
  .about-grid { grid-template-columns:1fr; }
  .about-intro h1 { max-width:25ch; }
  .about-section-heading .lead, .about-next-step .lead { margin-top:0; }
  .about-background .tl-item { grid-template-columns:110px 1fr; }
}
@media(max-width:620px) {
  .about-hero .crumb { margin-bottom:20px; }
  .about-teaching { padding:22px; }
  .about-method { grid-template-columns:1fr; gap:24px; }
  .about-credentials { display:grid; gap:8px; }
  .about-background .tl-item { grid-template-columns:1fr; gap:8px; }
  .about-intro .btn-row .btn { width:100%; }
}
.feedback-steps { padding-left:24px; margin:28px 0; }
.feedback-steps li { padding-left:8px; margin:18px 0; }
.feedback-steps strong, .feedback-steps span { display:block; }
.feedback-steps span { color:var(--muted); margin-top:4px; }
.feedback-permission { border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px; margin:24px 0; }
.feedback-check { display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:.88rem; line-height:1.6; }
.feedback-check input { flex:0 0 20px; width:20px; height:20px; margin-top:4px; accent-color:var(--ember-text); }
#feedback-public-fields > .field { margin-top:20px; }
.feedback-preview { padding:20px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); margin:20px 0; }
.feedback-preview blockquote { margin:12px 0; }
.public-feedback-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0; }
.public-feedback-card { margin:0; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow-wrap:anywhere; }
.public-feedback-card blockquote { margin:20px 0; font-size:1.05rem; line-height:1.75; }
.public-feedback-card figcaption { font-weight:600; font-size:.88rem; }
@media(max-width:620px) { .public-feedback-grid { grid-template-columns:1fr; } .feedback-permission { padding:16px; } }
.home-hero .hero-work .founder-panel { padding:20px; border:0; border-top:1px solid var(--line); border-radius:0; background:var(--surface); }
.coach-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.home-hero .coach-heading h2 { font-size:1.22rem; margin:0; }
.hero-work .founder-panel > p { font-size:.84rem; line-height:1.6; }
.hero-work .founder-panel .btn-text { margin-top:6px; font-size:.84rem; }
.offer-visual { display:block; width:100%; height:140px; object-fit:contain; background:#F5F7FD; border-radius:var(--radius-sm); margin-bottom:4px; }
.service-visual { margin-bottom:24px; }
.service-visual img { display:block; width:100%; height:auto; max-height:180px; background:#F5F7FD; border-radius:var(--radius-sm); }
.service-visual figcaption { margin-top:10px; font-size:.8rem; color:var(--muted); }
.practice-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:16px; margin:24px 0; }
.practice-route li { position:relative; min-width:0; padding:18px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.practice-route li + li::before { content:'→'; position:absolute; left:-16px; top:22px; width:16px; font-size:1rem; color:var(--ember-text); text-align:center; }
.route-icon { display:block; width:30px; height:30px; margin-bottom:12px; color:var(--ember-text); }
.practice-route strong { display:block; font-family:var(--font-display); font-size:.98rem; color:var(--ink); }
.practice-route span { display:block; margin-top:6px; font-size:.8rem; line-height:1.5; color:var(--muted); }
.sample-hero .practice-route { max-width:850px; margin-top:28px; }
.time-comparison { margin-top:24px; display:grid; gap:10px; }
.time-row { display:grid; grid-template-columns:52px 1fr; align-items:center; gap:12px; }
.time-row span { font-size:.72rem; color:var(--on-dark-soft); }
.time-track { height:7px; border-radius:4px; background:rgba(244,247,255,.1); overflow:hidden; }
.time-track i { display:block; height:100%; width:var(--time-width,100%); background:var(--on-dark-soft); border-radius:inherit; }
.time-row:last-child .time-track i { background:var(--ember-light); }
@media(max-width:940px) {
  .hero-work { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
  .home-hero .hero-work .founder-panel { border-top:0; border-left:1px solid var(--line); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
}
@media(max-width:620px) {
  .hero-work { display:block; }
  .home-hero .hero-work .founder-panel { padding:16px 20px; border-left:0; border-top:1px solid var(--line); }
  .home-hero .hero-work .founder-panel > p:first-of-type { margin-top:0; font-size:.84rem; }
  .work-illustration img { max-height:240px; object-fit:cover; object-position:center 62%; }
  .offer-visual { height:125px; }
  .practice-route { gap:12px; grid-template-columns:1fr; }
  .practice-route li { display:grid; grid-template-columns:30px 1fr; column-gap:14px; padding:14px 16px; }
  .route-icon { grid-row:1/3; margin:3px 0 0; }
  .practice-route span { grid-column:2; }
  .practice-route li + li::before { content:'↓'; left:25px; top:-16px; width:16px; line-height:16px; }
}

/* Publishing follows the same full-width page grid as the public site. */
.blog-subscribe-layout,.publishing-layout {display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:start}
.blog-subscribe-layout .lead {margin-top:1rem}
.blog-subscribe-layout form {width:100%;max-width:none}
.consent-choice {display:flex;align-items:flex-start;gap:12px;font-size:.9rem;line-height:1.6}
.consent-choice input {flex:0 0 20px;width:20px;height:20px;margin-top:3px}
.honeypot {position:absolute;left:-9999px;width:0;height:0;overflow:hidden}
.blog-card-cover {width:100%;height:180px;object-fit:cover;border-radius:8px;margin-bottom:20px;background:#f4efe6}
.managed-post-title {max-width:24ch}
.managed-post-layout {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:clamp(28px,5vw,90px)}
.managed-post-layout .article-body {max-width:78ch;margin:0}
.managed-post-cover {display:block;width:100%;height:auto;max-height:420px;object-fit:cover;margin-bottom:32px;border-radius:12px;background:#f4efe6}
.managed-post-aside {border:1px solid var(--line,#deddd7);border-radius:14px;padding:28px;background:#f7f6f2}
.managed-post-aside h2 {font-size:1.8rem}
.managed-post-aside p {margin:20px 0}
.managed-post-aside .btn-text {display:block;margin-top:24px}
.publishing-layout>* {min-width:0}
.publishing-layout textarea {width:100%;resize:vertical}
.publishing-preview {width:100%;height:700px;border:1px solid #deddd7;border-radius:12px;background:#fff;margin-top:24px}
.email-preview {height:500px}
.newsletter-editor {max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.newsletter-editor .field:nth-child(3) {grid-column:1/-1}
.admin-jumps {flex-wrap:wrap}
.admin-record {overflow-wrap:anywhere}
@media(max-width:900px){.blog-subscribe-layout,.publishing-layout,.managed-post-layout,.newsletter-editor{grid-template-columns:1fr}.newsletter-editor .field:nth-child(3){grid-column:auto}.publishing-preview{height:560px}.managed-post-aside{padding:24px}}
.subscriber-search-form {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;align-items:end;margin:24px 0}
@media(max-width:900px){.subscriber-search-form{grid-template-columns:1fr}.subscriber-search-form .btn{width:100%}}

/* Private email-quality controls share the public site's wide, responsive grid. */
.mail-health-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0;align-items:stretch}
.mail-health-grid>*{min-width:0}
.mail-health-summary{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}
.mail-health-stat{flex:1 1 140px;padding:18px;background:var(--paper-2);border-radius:var(--radius)}
.mail-health-stat strong,.mail-health-stat span{display:block}.mail-health-stat strong{font-size:1.7rem}.mail-health-stat span{font-size:.88rem}
.mail-health-summary>p{flex-basis:100%;margin:0}.mail-check{padding:14px 0;border-bottom:1px solid var(--line,#deddd7);overflow-wrap:anywhere}.mail-check p{margin:6px 0 0}
.mail-health-details{margin:24px 0}.mail-health-details summary{cursor:pointer;font-weight:600;padding:12px 0}.mail-health-details form{margin-top:20px}
.mail-placement-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.mail-placement-form .checkbox-label{grid-column:1/-1}
#newsletter-preflight{margin:24px 0}#newsletter-preflight .checkbox-label{margin-top:24px}
@media(max-width:900px){.mail-health-grid{grid-template-columns:1fr}.mail-placement-form{grid-template-columns:1fr}.mail-health-stat{flex-basis:120px}}

/* Related guides at the end of each article */
/* Same 740px column as .article, plus the .container side padding */
.related-guides { box-sizing:content-box; max-width: 740px; margin: var(--s-6) auto 0; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.related-guides h2 { font-size: var(--text-h4, 1.25rem); margin: 0 0 var(--s-3); }
.related-guides ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.related-guides li { border-bottom:1px solid var(--line); }
.related-guides a { display:flex; align-items:center; min-height:48px; padding: var(--s-2) 0; color: var(--ink); text-decoration:none; font-weight:600; }
.related-guides a::after { content:"→"; margin-left:auto; padding-left: var(--s-3); color: var(--ember-text, var(--ember)); }
.related-guides a:hover, .related-guides a:focus-visible { color: var(--ember-text, var(--ember)); }


/* ==========================================================================
   Theme J (2026-10-25): navy gradient heroes, pill buttons, soft rounded cards
   ========================================================================== */
:root { --font-mono: var(--font-body); --radius: 12px; --radius-lg: 16px; }
body { background: var(--paper); }
.overline, .tile .kicker, .reclaim-head .label, .hero-stat .hs-top, .footer-col h4, .portrait .ph .cap { text-transform: none; letter-spacing: 0; }
.overline { font-weight: 600; }
.overline::before { display: inline-block; content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: middle; }
.nav, .nav.scrolled { background: rgba(255,255,255,0.97); border-bottom: 1px solid #E9ECF3; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.btn { border-radius: 10px; }
.btn-primary, .on-dark .btn-primary { background: #3960EF; color: #fff; box-shadow: none; }
.btn-primary:hover, .on-dark .btn-primary:hover { background: #2B48C4; box-shadow: none; }
.on-dark .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.32); }

/* Navy opening section on every page: valley contour lines, straight edge, glowing horizon line */
.hero, .page-hero { background: url("/assets/img/valley-contours.svg?v=k") right bottom / cover no-repeat, radial-gradient(1100px 620px at 78% 12%, rgba(86,140,255,0.42), transparent 62%), linear-gradient(180deg, #1A2B6E 0%, #15225A 100%); border-radius: 0; }
.hero::before, .page-hero::before { display: none; }
.hero::after, .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,184,255,0.95), transparent); pointer-events: none; }
.hero h1 .accent, .page-hero h1 .accent { color: #A9C8FF; }
.on-dark .overline { color: var(--ember-light); }
.on-dark .crumb, .on-dark .crumb a, .on-dark .article-meta, .on-dark .hero-caption { color: var(--on-dark-muted); }
.on-dark .hero-caption a, .on-dark .lead a, .on-dark p a { color: #fff; }
.on-dark .article-meta .tag { color: var(--ember-light); }
.page-hero + .section[style*="padding-top:0"] { padding-top: var(--s-6) !important; }

/* Homepage hero card: frosted glass on navy */
.on-dark .hero-work { background: rgba(14,22,62,0.55); border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.on-dark .work-illustration figcaption { color: var(--on-dark-muted); border-top-color: rgba(255,255,255,0.10); }
.on-dark .founder-panel { background: transparent; border: 0; }
.on-dark .founder-panel h2 { color: #fff; }
.on-dark .founder-panel > p { color: var(--on-dark-soft); }
.on-dark .founder-panel .btn-text { color: var(--ember-light); }

/* Soft rounded cards */
.card, .offer-card, .author-box, .faq details { border: 1px solid #E3E7F0; border-radius: 16px; box-shadow: none; transition: transform .25s var(--ease), border-color .25s; }
.card:hover, .offer-card:hover { transform: translateY(-3px); border-color: rgba(57,96,239,0.45); }
h1, h2, .section-head { letter-spacing: -0.025em; }

/* Closing call-to-action sections share the hero gradient */
.section.on-dark.cta-final { background: url("/assets/img/valley-contours.svg?v=k") center bottom / cover no-repeat, radial-gradient(1100px 620px at 78% 12%, rgba(86,140,255,0.42), transparent 62%), linear-gradient(180deg, #1A2B6E 0%, #15225A 100%); border-radius: 0; }

/* Theme J: readability fixes inside navy sections */
.on-dark .hero-work .founder-panel, .home-hero.on-dark .hero-work .founder-panel { background: transparent; border-color: rgba(255,255,255,0.10); }
.on-dark [style*="color:var(--muted)"] { color: var(--on-dark-muted) !important; }
.on-dark strong, .on-dark b { color: inherit; }
.on-dark .step .n { color: var(--ember-light); }
.on-dark .step p { color: var(--on-dark-soft); }
/* Light cards placed inside a navy section keep dark text */
.on-dark .about-teaching, .on-dark .portal-form, .on-dark .portal-status, .on-dark .practice-route li { color: var(--text); }
.on-dark .practice-route li :is(strong, b) { color: var(--ink); }
.on-dark .practice-route li span, .on-dark .practice-route li p { color: var(--muted); }
.on-dark .about-teaching :is(h2, h3, h4, strong, b), .on-dark .portal-form :is(h2, h3, h4, label, strong) { color: var(--ink); }
.on-dark .about-teaching p, .on-dark .portal-form p, .on-dark p.portal-status { color: var(--text); }
.on-dark .about-teaching .overline, .on-dark .about-teaching .btn-text, .on-dark .portal-form .overline { color: var(--ember-text); }


/* Lucide icons (lucide-static 0.454.0, ISC licence: /assets/icons/LICENSE-lucide.txt).
   Strokes render at exactly 1.5px at any icon size. */
.icon :is(path, line, circle, rect, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }
.icon-inline { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.btn .icon-inline { width: 1.05em; height: 1.05em; }

/* ==========================================================================
   Refinement pass (2026-10-25): lighter display type, calmer surfaces, real photography
   ========================================================================== */
h1, h2 { font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
h3 { font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.section { padding-block: clamp(4rem, 7vw, 6rem); }

/* Solid surface for the homepage hero card (no frosted glass) */
.on-dark .hero-work { background: #1C2C6C; border: 1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Photography: one radius, one quiet shadow */
.photo { display: block; width: 100%; height: auto; border-radius: 16px; object-fit: cover; background: #E9ECF3; }
.work-illustration img { aspect-ratio: 4 / 3; object-fit: cover; }
.offer-card .offer-visual { width: calc(100% + 2px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: var(--s-4); background: #E9ECF3; }

/* Full-width photo band that sits just under a page's opening section */
.page-photo { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: calc(-1 * clamp(40px, 6vw, 88px)) auto 0; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.page-photo img { aspect-ratio: 21 / 9; box-shadow: 0 24px 60px rgba(17, 28, 74, 0.18); }
.page-hero.has-photo { padding-bottom: calc(clamp(1.6rem, 3vw, 2.6rem) + clamp(40px, 6vw, 88px)); }
@media (max-width: 620px) { .page-photo img { aspect-ratio: 16 / 10; } }

/* Panels inside the navy opening section: a lighter navy surface, never a white box */
.on-dark .hero-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); box-shadow: none; color: var(--on-dark-soft); }
.on-dark .hero-stat::before { display: none; }
.on-dark .hero-stat .hs-top { color: var(--ember-light); }
.on-dark .hero-stat p, .on-dark .hero-stat [style*="color:var(--muted)"] { color: var(--on-dark-soft) !important; }
.on-dark .hero-stat .link-draw { color: #fff; }
.on-dark .hero-stat .row { border-top-color: rgba(255,255,255,0.12); }
.on-dark .hero-stat .row .k { color: var(--on-dark-muted); }
.on-dark .hero-stat .row .v { color: #fff; }
.on-dark .hero-stat .row .v b { color: #A9C8FF; }
.on-dark .path a { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.on-dark .path a:hover { background: rgba(255,255,255,0.09); border-color: rgba(143,184,255,0.7); box-shadow: none; }
.on-dark .path .pi { background: rgba(143,184,255,0.16); color: #A9C8FF; }
.on-dark .path b { color: #fff; }
.on-dark .path .sub { color: var(--on-dark-soft); }
.on-dark .path .arr { color: #A9C8FF; }

/* Valley contour lines that drift like slow waves (main.js adds them; the static image stays as the fallback) */
.hero, .page-hero, .section.cta-final { position: relative; overflow: hidden; }
.valley-waves { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.valley-waves svg { display: block; width: 100%; height: 100%; }
.has-waves > .container { position: relative; z-index: 1; }
.hero.has-waves, .page-hero.has-waves, .section.on-dark.cta-final.has-waves { background: radial-gradient(1100px 620px at 78% 12%, rgba(86,140,255,0.42), transparent 62%), linear-gradient(180deg, #1A2B6E 0%, #15225A 100%); }

/* ==========================================================================
   Hero animation: "AI drafts, you review" (homepage). main.js drives the steps
   by adding .s1 … .s6; without JS or with reduced motion it shows .is-final.
   ========================================================================== */
.ai-demo { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 7% 6%;
  background: radial-gradient(120% 90% at 85% 0%, #DCE6FF 0%, transparent 60%), #EEF2FB; overflow: hidden; }
.ad-window { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(17,28,74,0.04), 0 18px 40px rgba(17,28,74,0.16); font-family: var(--font-body); font-size: 3.05cqw; color: #1E2433; transition: opacity .5s var(--ease); }
.ad-bar { flex: none; display: flex; align-items: center; gap: .45em; padding: .7em .9em; border-bottom: 1px solid #EDEFF5; }
.ad-bar > span { width: .62em; height: .62em; border-radius: 50%; background: #DADFEA; }
.ad-bar b { margin-left: .5em; font-weight: 600; font-size: 1em; color: #111C4A; }
.ad-status { margin-left: auto; font-style: normal; font-size: .82em; font-weight: 600; padding: .25em .7em; border-radius: 999px; background: #EEF2FB; color: #5B6475; transition: background .4s, color .4s; }
.ad-body { flex: 1; display: flex; flex-direction: column; gap: .75em; padding: .95em 1em 1em; min-height: 0; }
.ad-files { display: flex; gap: .5em; }
.ad-file { display: inline-flex; align-items: center; gap: .35em; padding: .3em .6em; border: 1px solid #E3E7F0; border-radius: 8px; font-size: .86em; font-weight: 500; color: #3A4256; background: #FAFBFE; }
.ad-file .icon { width: 1.15em; height: 1.15em; color: #3960EF; }
.ad-prompt { display: flex; align-items: center; gap: .2em; padding: .55em .55em .55em .8em; border: 1px solid #E3E7F0; border-radius: 10px; min-height: 2.6em; }
.ad-typed { font-size: .92em; color: #1E2433; white-space: nowrap; overflow: hidden; }
.ad-caret { width: 1.5px; height: 1.1em; background: #3960EF; opacity: 0; }
.ad-send { margin-left: auto; flex: none; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #3960EF; color: #fff; transition: transform .3s var(--ease), background .3s; }
.ad-send .icon { width: 1em; height: 1em; }
.ad-draft { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .45em; padding: .2em .1em 0; }
.ad-line { max-width: none; margin: 0; font-size: .9em; line-height: 1.35; color: #3A4256; }
.ad-h { font-size: 1em; font-weight: 600; color: #111C4A; }
.ad-flag { display: grid; justify-items: start; padding: .2em .45em; margin-left: -.45em; border-radius: 6px; transition: background .4s; }
.ad-flag > span { grid-area: 1 / 1; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ad-old { text-decoration-thickness: 1.5px; }
.ad-chart { display: flex; align-items: flex-end; gap: .45em; height: 2.6em; margin-top: auto; }
.ad-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #8FB8FF, #3960EF); transform-origin: bottom; }
.ad-thinking { position: absolute; left: .1em; top: .3em; display: flex; gap: .3em; opacity: 0; }
.ad-thinking i { width: .45em; height: .45em; border-radius: 50%; background: #8FB8FF; animation: ad-dot 1s infinite ease-in-out; }
.ad-thinking i:nth-child(2) { animation-delay: .15s; } .ad-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes ad-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-.3em); opacity: 1; } }
.ad-review { display: grid; min-height: 1.9em; }
.ad-review > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .4em; font-size: .86em; font-weight: 600; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ad-review .icon { width: 1.25em; height: 1.25em; }
.ad-check { color: #9A6700; }
.ad-ok { color: #1A7F4B; }

/* Step states (hidden until reached) */
.ai-demo:not(.is-final) .ad-file,
.ai-demo:not(.is-final) .ad-line,
.ai-demo:not(.is-final) .ad-review > span { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ai-demo:not(.is-final) .ad-chart i { transform: scaleY(0); transition: transform .7s var(--ease); }
.ai-demo:not(.is-final) .ad-new { opacity: 0; transform: translateY(4px); }
.ai-demo.s1 .ad-file { opacity: 1; transform: none; }
.ai-demo.s1 .ad-file + .ad-file { transition-delay: .15s; }
.ai-demo.s2 .ad-caret { opacity: 1; animation: ad-blink 1s steps(1) infinite; }
@keyframes ad-blink { 50% { opacity: 0; } }
.ai-demo.s3 .ad-caret { opacity: 0; animation: none; }
.ai-demo.s3 .ad-send { transform: scale(.88); background: #2B48C4; }
.ai-demo.s3:not(.s4) .ad-thinking { opacity: 1; }
.ai-demo.s4 .ad-send { transform: none; background: #3960EF; }
.ai-demo.s4 .ad-line { opacity: 1; transform: none; }
.ai-demo.s4 .ad-line:nth-of-type(2) { transition-delay: .25s; }
.ai-demo.s4 .ad-line:nth-of-type(3) { transition-delay: .5s; }
.ai-demo.s4 .ad-chart i { transform: scaleY(1); }
.ai-demo.s4 .ad-chart i:nth-child(2) { transition-delay: .08s; } .ai-demo.s4 .ad-chart i:nth-child(3) { transition-delay: .16s; }
.ai-demo.s4 .ad-chart i:nth-child(4) { transition-delay: .24s; } .ai-demo.s4 .ad-chart i:nth-child(5) { transition-delay: .32s; }
.ai-demo.s5 .ad-flag { background: #FFF3D6; box-shadow: inset 0 0 0 1px #F2C66D; }
.ai-demo.s5 .ad-check { opacity: 1; transform: none; }
.ai-demo.s6 .ad-flag, .ai-demo.is-final .ad-flag { background: #E6F5EC; box-shadow: none; }
.ai-demo.s6 .ad-old, .ai-demo.is-final .ad-old { opacity: 0; transform: translateY(-4px); }
.ai-demo.s6 .ad-new { opacity: 1; transform: none; }
.ai-demo.s6 .ad-check { opacity: 0; transform: translateY(-4px); }
.ai-demo.s6 .ad-ok, .ai-demo.is-final .ad-ok { opacity: 1; transform: none; }
.ai-demo.is-final .ad-check { opacity: 0; }
.ai-demo.s6 .ad-status, .ai-demo.is-final .ad-status { background: #E6F5EC; color: #1A7F4B; }
.ai-demo.ad-out .ad-window { opacity: 0; }
/* The demo window is a light surface inside a navy section: keep its own dark text */
.on-dark .ai-demo .ad-line { color: #3A4256; }
.on-dark .ai-demo .ad-h { color: #111C4A; }
.on-dark .ai-demo .ad-typed { color: #1E2433; }
.ad-chart { height: 2.2em; opacity: .9; }
/* Review messages: these must outrank the hidden-until-reached rule above */
.ai-demo.s5 .ad-review > .ad-check { opacity: 1; transform: none; }
.ai-demo.s6 .ad-review > .ad-check { opacity: 0; transform: translateY(-4px); }
.ai-demo.s6 .ad-review > .ad-ok { opacity: 1; transform: none; }

/* Blog cards and About story: photography balances the text */
.post-card { overflow: hidden; }
.post-card .post-thumb { display: block; width: calc(100% + 2 * var(--s-5)); max-width: none; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4); aspect-ratio: 16 / 9; object-fit: cover; background: #E9ECF3; }
.story-photo { margin-top: var(--s-5); }
.story-photo img { aspect-ratio: 4 / 3; box-shadow: 0 18px 44px rgba(17, 28, 74, 0.14); }
.post-thumb-tool { display: grid; place-items: center; background: radial-gradient(120% 90% at 85% 0%, #DCE6FF 0%, transparent 60%), #EEF2FB; color: #3960EF; }
.post-thumb-tool .icon { width: 56px; height: 56px; }
.post-card .post-thumb { height: auto; }
.post-card .post-thumb-tool { display: grid; }

/* Services: the "AI drafts, you review" demo as a standalone feature */
.demo-split { align-items: center; }
.demo-standalone { border-radius: 16px; overflow: hidden; border: 1px solid #E3E7F0; box-shadow: 0 24px 60px rgba(17, 28, 74, 0.12); background: #fff; }
.demo-standalone figcaption { padding: 10px 20px; font-size: .78rem; color: var(--muted); border-top: 1px solid #EDEFF5; }
.demo-points { margin-top: var(--s-4); display: grid; gap: 10px; }
.demo-points li { position: relative; padding-left: 28px; color: var(--text); }
.demo-points li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--ember-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232B48C4' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }

/* Homepage hero: 3D network head (assets/js/head3d.js) */
.head3d-wrap { position: relative; }
.head3d-stage { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; cursor: default;
  background: radial-gradient(60% 70% at 55% 45%, rgba(86, 140, 255, 0.28), transparent 70%), linear-gradient(180deg, #13205A, #0E1A4A); }
.head3d-stage canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--ease); }
.head3d-stage.ready canvas { opacity: 1; }
.head3d-wrap figcaption { font-size: .68rem; }