@import url('fonts.css');

/* ============================================================
   PreeWorks service site — Priscila Silva Design System v1.1
   Preeworks context: Lapis primary · gold structural-only · teal support
   Tokens copied verbatim from .rules/design-system/design-system.md
   ============================================================ */

:root {
  /* base neutrals */
  --paper:#F6F7FA; --surface:#EFF0F4; --divider:#E4E6EA; --hairline:#D8DAE0;
  --divider-functional:#B0B2B8;
  /* text ladder */
  --ink:#191A1E; --text-2:#43454A; --text-3:#686A70; --muted:#A6A8AE;
  /* teal / sea */
  --sea-light:#8FB4B7; --sea-deep:#5A8B8F; --sea-darkest:#3A5B5E;
  --sea-tint:#E9EEEF; --sea-tint-2:#DDE9EC;
  /* lapis */
  --lapis:#2A3A52; --lapis-hover:#1F2D42; --lapis-tint:#DEE4ED;
  /* gold (Preeworks only) */
  --gold:#C4A24A; --gold-deep:#A8893A; --gold-darkest:#806829;
  --gold-tint:#F5EFD9; --gold-tint-2:#EDE3C0;

  /* spacing */
  --container-max:1200px; --content-max:760px; --measure:620px;

  /* shadows */
  --shadow-1:0 1px 3px rgba(0,0,0,0.04);
  --shadow-2:0 2px 8px rgba(42,58,82,0.08);
}

/* ---------- reset / base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.4;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,p { margin:0; }

/* ---------- layout ---------- */
.shell { max-width:var(--container-max); margin:0 auto; padding-left:64px; padding-right:64px; }
.section { padding-top:96px; padding-bottom:96px; }
.section--tight { padding-top:64px; padding-bottom:64px; }
.band-sea  { background:var(--sea-tint); }
.band-sea2 { background:var(--sea-tint-2); }
.band-surface { background:var(--surface); }
.band-lapis { background:var(--lapis); color:var(--paper); }
.divider-b { border-bottom:1px solid var(--divider); }

/* ---------- typography helpers ---------- */
.eyebrow {
  font:600 11px 'Inter'; text-transform:uppercase; letter-spacing:2px;
  color:var(--sea-darkest); margin:0;
}
.eyebrow--gold { color:var(--sea-darkest); }
/* small functional label (not an uppercase eyebrow) */
.list-label { font:600 14px 'Inter'; color:var(--sea-darkest); margin-bottom:12px; }
.lead { font-family:'Lora',Georgia,serif; font-weight:400; font-size:18px; line-height:1.55; color:var(--text-2); }
.serif { font-family:'Lora',Georgia,serif; }
.accent-italic { font-style:italic; color:var(--sea-darkest); font-family:'Lora',Georgia,serif; }

h1.display { font-family:'Lora',Georgia,serif; font-weight:500; font-size:clamp(40px,5.2vw,56px); line-height:1.05; letter-spacing:-0.5px; color:var(--ink); }
.h-section { font-family:'Inter'; font-weight:700; font-size:clamp(26px,3vw,32px); line-height:1.15; letter-spacing:-0.4px; color:var(--ink); }
.h-editorial { font-family:'Lora',Georgia,serif; font-weight:500; font-size:clamp(30px,4vw,44px); line-height:1.12; letter-spacing:-0.4px; }

/* accent rule (teal — gold is reserved for How-it-works numbers + services hover only) */
.gold-rule { width:56px; height:3px; background:var(--sea-deep); border:0; margin:0 0 22px; }
.gold-rule--center { margin-left:auto; margin-right:auto; }
/* small masthead rule under section headings */
.masthead-rule { width:56px; height:3px; background:var(--sea-deep); border:0; margin:18px 0 0; }

/* ---------- buttons ---------- */
.btn { display:inline-block; border-radius:999px; font:500 14px 'Inter'; letter-spacing:0.2px; cursor:pointer; transition:all .2s ease; border:1px solid transparent; }
.btn-primary { background:var(--lapis); color:var(--paper); padding:15px 30px; }
.btn-primary:hover { background:var(--lapis-hover); }
.btn-ghost { background:transparent; color:var(--lapis); border:1px solid var(--lapis); padding:14px 29px; }
.btn-ghost:hover { background:var(--lapis-tint); }
.btn-lg { padding:17px 34px; font-size:15px; }
.btn:active { transform:translateY(1px); }
/* on lapis bands */
.band-lapis .btn-primary { background:var(--paper); color:var(--ink); }
.band-lapis .btn-primary:hover { background:#E4E7EE; }
.band-lapis .btn-ghost { color:var(--paper); border-color:rgba(246,247,250,.45); }
.band-lapis .btn-ghost:hover { background:rgba(246,247,250,.10); }

.btn-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.btn-row--center { justify-content:center; }

/* ---------- header / nav ---------- */
.site-header { position:sticky; top:0; z-index:40; background:rgba(246,247,250,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--divider); }
.nav { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:inline-flex; flex-direction:column; gap:4px; }
.brand .wordmark { font-family:'Oswald',sans-serif; font-weight:600; font-size:20px; letter-spacing:1.5px; color:var(--ink); text-transform:uppercase; line-height:1; }
.brand .wordmark-rule { width:34px; height:2px; background:var(--sea-deep); }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a { font:500 14px 'Inter'; color:var(--text-2); letter-spacing:.2px; transition:color .2s ease; }
.nav-links a:hover { color:var(--sea-darkest); }
.nav-cta { display:inline-block; }
.nav-toggle { display:none; }

/* ---------- hero ---------- */
.hero { padding-top:112px; padding-bottom:88px; position:relative; }
.hero--center { text-align:center; }
.hero--center .gold-rule { margin-left:auto; margin-right:auto; }
.hero p.lead { max-width:58ch; margin:26px auto 0; }
.hero--center .btn-row { justify-content:center; }
.hero h1.display { max-width:18ch; margin:18px auto 0; }
.micro-proof { margin-top:32px; font:500 13px 'Inter'; color:var(--text-3); letter-spacing:.2px; }

/* split hero (about) */
.hero-split { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero-split .lead { margin-left:0; }
.hero-split h1.display { margin-left:0; max-width:18ch; }
/* D5 — headshot is a diagonally-cropped block (clip on the container, no rounded box) */
.headshot { aspect-ratio:4/5; overflow:hidden; background:var(--sea-tint-2);
  clip-path:polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
  animation:headshotReveal 1.1s cubic-bezier(.16,1,.3,1) .35s both; }
.headshot img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

/* ---------- logo strip ---------- */
.logostrip { padding:40px 0; }
.logostrip .label { text-align:center; font:400 13px 'Inter'; color:var(--text-3); max-width:60ch; margin:0 auto; letter-spacing:.2px; }

/* ---------- offset editorial (who it's for) ---------- */
.offset { display:grid; grid-template-columns:3fr 9fr; gap:32px; }
.offset .eyebrow { padding-top:6px; }
.offset .body-col { max-width:62ch; }
.offset h2 { margin-bottom:0; max-width:22ch; }
.offset p { margin-top:24px; }

.measure { max-width:64ch; }
.section-head { max-width:42ch; margin-bottom:48px; }
.section-head .eyebrow { margin-bottom:16px; }

/* ---------- proof chip ---------- */
.proof-chip { display:inline-flex; align-items:center; gap:10px; margin-top:36px; padding:9px 18px; background:var(--sea-tint-2); border-radius:999px; font:600 12px 'Inter'; color:var(--sea-darkest); letter-spacing:.2px; }
.proof-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--sea-deep); }

/* ---------- cards grid (what changes) ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { background:#ffffff; border:1px solid var(--divider); border-radius:12px; padding:28px 28px; box-shadow:var(--shadow-1); transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.card h3 { font:600 17px 'Inter'; color:var(--ink); }
.card p { margin-top:10px; color:var(--text-2); line-height:1.55; }

/* ---------- service tiles (set1) ---------- */
.tile { position:relative; overflow:hidden; background:var(--lapis-tint); border-radius:12px; padding:30px 28px; transition:transform .18s ease, box-shadow .18s ease; }
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.tile .corner { position:absolute; top:0; right:0; width:0; height:0; border-top:46px solid var(--lapis); border-left:46px solid transparent; }
.tile .svc-num { font-family:'Lora',Georgia,serif; font-weight:500; font-size:15px; color:var(--sea-darkest); margin-bottom:8px; letter-spacing:.3px; }
.tile h3 { font:600 19px 'Inter'; color:var(--ink); }
.tile p { margin-top:10px; color:var(--text-2); line-height:1.55; }
.tile .go { display:inline-block; margin-top:20px; font:500 14px 'Inter'; color:var(--lapis); transition:color .2s ease; }
.tile .go .arr { display:inline-block; transition:margin-left .2s ease; }
.tile:hover .go .arr { margin-left:4px; }
/* gold appears on services-card hover (per brand direction) */
.tile .corner { transition:border-top-color .2s ease; }
.tile:hover .corner { border-top-color:var(--gold); }
.tile:hover .go { color:var(--gold-deep); }

.tile-wide { margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  border:1px dashed var(--hairline); background:var(--paper); border-radius:12px; padding:26px 28px; }
.tile-wide h3 { font:600 18px 'Inter'; color:var(--ink); }
.tile-wide p { margin-top:6px; color:var(--text-2); }
.tile-wide .go { font:500 14px 'Inter'; color:var(--lapis); white-space:nowrap; }

/* ---------- how it works (set2 hairline trio) ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--divider); border:1px solid var(--divider); border-radius:16px; overflow:hidden; }
.step { background:var(--paper); padding:34px 30px; }
/* How-it-works numbers — the one place gold is used structurally */
.step .num { font-family:'Lora',Georgia,serif; font-weight:500; font-size:38px; line-height:1; color:var(--gold-deep); }
.step h3 { margin-top:18px; font:600 17px 'Inter'; color:var(--ink); }
.step p { margin-top:10px; color:var(--text-2); line-height:1.55; }
.step ul { margin:12px 0 0; padding-left:18px; color:var(--text-2); line-height:1.55; }
.step ul li { margin-top:6px; }

/* ---------- results (stat grid) ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--divider); border:1px solid var(--divider); }
.stat { background:var(--paper); padding:30px 26px; }
.stat .num { font-family:'Lora',Georgia,serif; font-weight:500; font-size:40px; line-height:1; color:var(--lapis); letter-spacing:-1px; }
.stat .num .u { color:inherit; }
.stat p { margin-top:14px; color:var(--text-2); line-height:1.4; }

/* results as cards variant (3-up mariner) */
.result-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.result-card { background:#fff; border:1px solid var(--divider); border-top:3px solid var(--sea-deep); border-radius:12px; padding:28px; box-shadow:var(--shadow-1); }
.result-card .num { font-family:'Lora',Georgia,serif; font-weight:500; font-size:30px; color:var(--lapis); line-height:1.05; }
.result-card .num .u { color:inherit; }
.result-card h3 { font:600 16px 'Inter'; color:var(--ink); line-height:1.3; }
.result-card p { margin-top:10px; color:var(--text-2); line-height:1.55; }

/* ---------- lapis editorial band ---------- */
.editorial { text-align:center; padding-top:128px; padding-bottom:128px; }
.editorial h2 { font-family:'Lora',Georgia,serif; font-weight:500; font-size:clamp(30px,4.4vw,48px); line-height:1.12; letter-spacing:-0.4px; max-width:20ch; margin:0 auto; }
.editorial h2 em { font-style:italic; color:var(--sea-light); }
.editorial p { max-width:62ch; margin:28px auto 0; font-size:18px; line-height:1.6; color:rgba(246,247,250,.82); }
.editorial p + p { margin-top:18px; }

/* ---------- plain-english line ---------- */
.plain { text-align:center; padding:64px 0; border-top:1px solid var(--divider); }
.plain p { max-width:60ch; margin:0 auto; font-family:'Lora',Georgia,serif; font-style:italic; font-weight:400; font-size:21px; line-height:1.5; color:var(--text-2); }

/* ---------- closing CTA ---------- */
.closing { text-align:center; }
.closing h2 { font-family:'Lora',Georgia,serif; font-weight:500; font-size:clamp(30px,3.6vw,40px); line-height:1.12; letter-spacing:-0.4px; max-width:20ch; margin:0 auto; color:var(--ink); }
.closing p { max-width:56ch; margin:22px auto 0; font-size:18px; line-height:1.55; color:var(--text-2); }

/* ---------- problem / prose blocks ---------- */
.prose { max-width:64ch; }
.prose p { color:var(--text-2); font-size:18px; line-height:1.6; }
.prose p + p { margin-top:18px; }
.list-checks { margin:24px 0 0; padding:0; list-style:none; max-width:64ch; }
.list-checks li { position:relative; padding-left:26px; margin-top:14px; color:var(--text-2); font-size:17px; line-height:1.5; }
.list-checks li::before { content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--sea-deep); }
.quote-list { margin:18px 0 0; padding:0; list-style:none; max-width:64ch; }
.quote-list li { margin-top:14px; padding:14px 20px; background:var(--sea-tint); border-left:3px solid var(--sea-deep); border-radius:6px; color:var(--text-2); font-style:italic; font-family:'Lora',Georgia,serif; }

/* router (services hub) */
.router { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:none; }
.router-item { background:#fff; border:1px solid var(--divider); border-radius:12px; padding:24px 26px; box-shadow:var(--shadow-1); }
.router-item .cond { font:600 15px 'Inter'; color:var(--ink); }
.router-item .then { margin-top:8px; color:var(--sea-darkest); font:500 14px 'Inter'; }
.router-note { margin-top:24px; color:var(--text-3); font-style:italic; font-family:'Lora',Georgia,serif; }

/* experience list (about) */
.exp-list { margin:0; padding:0; list-style:none; max-width:64ch; }
.exp-list li { padding:16px 0; border-bottom:1px solid var(--divider); color:var(--text-2); font-size:17px; line-height:1.45; }
.exp-list li:first-child { padding-top:0; }

/* think list (about) */
.think-list { margin:0; padding:0; list-style:none; max-width:66ch; }
.think-list li { position:relative; padding-left:30px; margin-top:16px; color:var(--ink); font-family:'Lora',Georgia,serif; font-size:19px; line-height:1.45; }
.think-list li::before { content:""; position:absolute; left:0; top:12px; width:14px; height:2px; background:var(--gold); }

/* ---------- form (growth review) ---------- */
.form-card { background:#fff; border:1px solid var(--divider); border-radius:16px; padding:40px 40px; box-shadow:var(--shadow-1); max-width:680px; }
.field { margin-bottom:22px; }
.field label { display:block; font:600 12px 'Inter'; text-transform:uppercase; letter-spacing:1px; color:var(--text-3); margin-bottom:8px; }
.input, select, textarea {
  width:100%; background:#fff; border:1px solid var(--divider); border-radius:8px;
  padding:12px 16px; font:400 15px 'Inter'; color:var(--ink);
}
textarea { min-height:120px; resize:vertical; }
.input:focus, select:focus, textarea:focus { outline:2px solid var(--lapis); outline-offset:2px; border-color:var(--lapis); }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.check { display:flex; align-items:center; gap:9px; font:400 14px 'Inter'; color:var(--text-2); }
.check input { width:auto; }
.form-note { margin-top:6px; font:400 13px 'Inter'; color:var(--text-3); }
.form-success { text-align:center; padding:20px 8px; }
.form-success h3 { font:600 20px 'Inter'; color:var(--ink); }
.form-success p { margin-top:10px; color:var(--text-2); line-height:1.55; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.info-cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.info-cols h3 { font:600 13px 'Inter'; text-transform:uppercase; letter-spacing:1.4px; color:var(--sea-darkest); margin-bottom:16px; }

/* ---------- footer ---------- */
.site-footer { background:var(--lapis); color:var(--paper); }
.site-footer .shell { padding-top:64px; padding-bottom:48px; }
.foot-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:40px; }
.foot-brand .wordmark { font-family:'Oswald',sans-serif; font-weight:600; font-size:22px; letter-spacing:1.5px; text-transform:uppercase; display:inline-block; }
.foot-brand .wordmark-rule { width:34px; height:2px; background:var(--sea-deep); margin-top:8px; }
.foot-brand p { margin-top:16px; max-width:40ch; color:rgba(246,247,250,.72); line-height:1.55; }
.foot-col h4 { font:600 11px 'Inter'; text-transform:uppercase; letter-spacing:1.6px; color:var(--sea-light); margin-bottom:16px; }
.foot-col ul { list-style:none; margin:0; padding:0; }
.foot-col li { margin-top:10px; }
.foot-col a, .foot-col li { color:rgba(246,247,250,.78); font-size:14px; }
.foot-col a:hover { color:var(--paper); }
.foot-bottom { margin-top:56px; padding-top:24px; border-top:1px solid rgba(143,180,183,.28); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:rgba(246,247,250,.6); }
.foot-bottom .tag { font-family:'Lora',Georgia,serif; font-style:italic; color:var(--sea-light); }

/* ---------- text link (arrow, not a pill) ---------- */
.text-link { display:inline-flex; align-items:center; gap:8px; font:500 15px 'Inter'; color:var(--lapis); letter-spacing:.2px; }
.text-link .arr { transition:margin-left .2s ease; }
.text-link:hover { color:var(--sea-darkest); }
.text-link:hover .arr { margin-left:4px; }

/* ---------- logo marquee (placeholder plates; centered label above) ---------- */
.logostrip .label { margin-bottom:22px; }
.marquee { overflow:hidden; }
.marquee-track { display:flex; align-items:center; gap:64px; width:max-content; padding:0 32px; animation:marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo { flex:0 0 auto; height:30px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .25s ease, opacity .25s ease; }
.logo:hover { filter:grayscale(0); opacity:1; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---------- card checkmark ---------- */
.check-mark { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--sea-tint-2); color:var(--sea-darkest); font-size:14px; line-height:1; margin-bottom:14px; flex:0 0 auto; }
/* checkmark beside the title (not above) */
.card-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.card-head .check-mark { margin-bottom:0; }
.card-head h3 { margin:0; }

/* ---------- bigger structural heading (How it works) ---------- */
.h-section--lg { font-size:clamp(30px,3.4vw,40px); letter-spacing:-0.5px; }

/* ---------- prominent closing band ---------- */
.closing.band-sea2 { padding-top:104px; padding-bottom:104px; }
.closing h2.closing--lg { font-size:clamp(32px,3.6vw,42px); }
.closing.band-sea2 p { color:var(--text-2); }

/* ============================================================
   Donor components (ported to vanilla + DESIGN.md tokens)
   D2 hero frame + blur-in · D7 asymmetric grid · D10 aurora · D12 footer
   ============================================================ */

/* D2 — hero: hairline frame + horizontal light rays + per-line blur-in */
.d2-hero { position:relative; border-left:1px solid var(--divider); border-right:1px solid var(--divider); }
.d2-hero .shell { position:relative; z-index:1; }
.d2-hero .btn-row { gap:28px; }
/* light rays span the full width and sit flush at the hero's top + bottom edges (read as borders) */
.hero-rays { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-rays::before, .hero-rays::after { content:""; position:absolute; left:0; right:0; height:2px; background:var(--sea-deep); opacity:.45; }
.hero-rays::before { top:0; }
.hero-rays::after { bottom:0; }
/* the ray is the hero's bottom border, so drop the gray section divider on heroes */
.hero.divider-b { border-bottom:none; }
/* removed: accent rule above the hero headline, and the underline under the nav wordmark */
.hero .gold-rule { display:none; }
.brand .wordmark-rule, .foot-brand .wordmark-rule { display:none; }
/* two-column section (heading/prose left, list right) */
.split-2 { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
/* contact: headshot cutout left, form right (desktop only) */
.contact-split { display:grid; grid-template-columns:.82fr 1fr; gap:48px; align-items:start; }
.contact-photo { position:sticky; top:96px; }

/* Growth Review "How we start" layout (headshot cutout + glow, two cards) */
.hero.gr-hero { padding-top:36px; padding-bottom:40px; }
.gr-row { display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:center; margin-top:34px; }
.gr-photo { position:relative; width:100%; max-width:240px; justify-self:center; margin:0; }
.gr-glow { position:absolute; inset:-14% -10%; z-index:0; border-radius:50%; background:radial-gradient(48% 48% at 38% 34%, rgba(143,180,183,.6), transparent 70%); filter:blur(22px); }
.gr-photo .cutout { position:relative; z-index:1; background:transparent; }
.gr-cards { margin-top:0; }
.arrow-list { list-style:none; margin:16px 0 0; padding:0; }
.arrow-list li { position:relative; padding-left:36px; margin-top:14px; color:var(--text-2); line-height:1.5; }
.arrow-list li::before { content:"\2192"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; border:1px solid var(--sea-deep); color:var(--sea-deep); display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1; }
/* hero copy in Inter (not Lora), per direction; emphasis word kept as a colored accent */
.d2-hero h1.display { font-family:'Inter',system-ui,sans-serif; font-weight:700; letter-spacing:-1.6px; }
.d2-hero h1.display .accent-italic { font-family:'Inter',system-ui,sans-serif; font-style:normal; font-weight:700; color:var(--sea-darkest); }
.d2-hero .lead { font-family:'Inter',system-ui,sans-serif; }
.split-lines .line { display:block; opacity:0; filter:blur(6px); transform:translateY(12px); animation:lineIn .6s cubic-bezier(.16,1,.3,1) forwards; }
.split-lines .line:nth-child(2){ animation-delay:.16s; }
@keyframes lineIn { to { opacity:1; filter:blur(0); transform:none; } }
.d2-fade { opacity:0; animation:d2FadeUp .6s ease forwards; }
@keyframes d2FadeUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* D7 — asymmetric 4-card grid (5-7 / 7-5) + bouncy hover */
.d7-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.d7-card { transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }
.d7-card:nth-child(1){ grid-column:span 5; }
.d7-card:nth-child(2){ grid-column:span 7; }
.d7-card:nth-child(3){ grid-column:span 7; }
.d7-card:nth-child(4){ grid-column:span 5; }
.d7-card:hover { transform:scale(.985) rotate(-0.4deg); box-shadow:var(--shadow-2); border-color:var(--sea-light); }

/* D10 — aurora veil, recolored to sea tones over lapis (no blue/violet) */
.band-lapis.has-aurora { position:relative; overflow:hidden; }
.band-lapis.has-aurora .shell { position:relative; z-index:1; }
.aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora::before { content:""; position:absolute; inset:-30%;
  background:repeating-linear-gradient(105deg,
    var(--sea-light) 0%, var(--sea-deep) 12%, var(--sea-darkest) 24%,
    var(--lapis) 36%, var(--sea-deep) 50%, var(--sea-light) 60%);
  background-size:200% 200%;
  filter:blur(48px); opacity:.42;
  -webkit-mask-image:radial-gradient(120% 95% at 78% 0%, #000 0%, transparent 66%);
  mask-image:radial-gradient(120% 95% at 78% 0%, #000 0%, transparent 66%);
  animation:aurora 60s linear infinite; }
@keyframes aurora { from{background-position:0% 50%;} to{background-position:200% 50%;} }

/* D12 — footer: Sea Light glow backdrop + per-column blur-in (no sticky reveal, per DESIGN.md §8) */
.site-footer { position:relative; overflow:hidden; }
.site-footer::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(55% 120% at 18% -10%, rgba(143,180,183,.20), transparent 70%); }
.site-footer .shell { position:relative; z-index:1; }
.foot-reveal { opacity:0; filter:blur(4px); transform:translateY(12px); transition:opacity .6s ease, filter .6s ease, transform .6s ease; }
.foot-reveal.in { opacity:1; filter:blur(0); transform:none; }
/* D12 footer is a normal block (sticky-reveal removed per preference; glow + blur-in kept) */
.reveal-wrap { position:relative; background:var(--paper); }

/* D11 — hand-drawn encircle (draws in around an emphasis word) */
.encircle { position:relative; display:inline-block; }
.encircle > svg.uloop { position:absolute; left:-0.45em; top:-0.3em; width:calc(100% + 0.9em); height:calc(100% + 0.6em); overflow:visible; pointer-events:none; }
.uloop path { fill:none; stroke:var(--sea-deep); stroke-width:5; stroke-linecap:round; stroke-dasharray:1100; stroke-dashoffset:1100; animation:uloopDraw 2s ease .5s forwards; }
@keyframes uloopDraw { to { stroke-dashoffset:0; } }

/* D5 — diagonal reveal keyframe (exact donor clip-path), applied to .headshot container */
@keyframes headshotReveal { from { clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path:polygon(15% 0, 100% 0, 100% 100%, 0% 100%); } }

/* D16 / D17 — headshot cutout (SVG clip-path shapes) */
.cutout { margin:0; background:var(--sea-tint); display:block; }
.cutout img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; display:block; transition:transform .3s ease; }
.cutout:hover img { transform:scale(1.05); }

/* Lapis editorial band with a side cutout */
.lapis-feature { padding-top:96px; padding-bottom:96px; }
.lapis-split { display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center; }
.lapis-split .lapis-copy h2 { font-family:'Lora',Georgia,serif; font-weight:500; font-size:clamp(28px,3.8vw,44px); line-height:1.14; letter-spacing:-0.4px; color:var(--paper); max-width:20ch; }
.lapis-split .lapis-copy h2 em { font-style:italic; color:var(--sea-light); }
.lapis-split .lapis-copy p { margin-top:22px; font-size:18px; line-height:1.6; color:rgba(246,247,250,.82); max-width:54ch; }
.lapis-split .lapis-copy p + p { margin-top:16px; }
.lapis-split .cutout { width:100%; max-width:360px; justify-self:center; }

@media (prefers-reduced-motion:reduce){
  .split-lines .line, .d2-fade, .foot-reveal { opacity:1 !important; filter:none !important; transform:none !important; animation:none !important; transition:none !important; }
  .aurora::before { animation:none; }
  .uloop path { animation:none; stroke-dashoffset:0; }
  .headshot { animation:none; clip-path:polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }
  .cutout:hover img { transform:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:960px){
  .shell { padding-left:40px; padding-right:40px; }
  .hero-split { grid-template-columns:1fr; gap:32px; }
  .grid-3, .result-cards, .router { grid-template-columns:1fr 1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .shell { padding-left:24px; padding-right:24px; }
  .section { padding-top:58px; padding-bottom:58px; }
  .hero { padding-top:72px; padding-bottom:56px; }
  .editorial { padding-top:80px; padding-bottom:80px; }
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:18px; background:var(--paper); border-bottom:1px solid var(--divider); padding:24px; align-items:flex-start; }
  .nav-toggle { display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
  .nav-toggle span { width:22px; height:2px; background:var(--ink); display:block; }
  .offset, .grid-2, .grid-3, .grid-4, .steps, .result-cards, .router, .checks, .info-cols, .foot-grid, .d7-grid, .split-2, .lapis-split, .contact-split, .gr-row { grid-template-columns:1fr; }
  .d7-card { grid-column:auto !important; }
  .contact-photo { display:none; }
  .stats { grid-template-columns:1fr 1fr; }
  h1.display { font-size:38px; }
  .form-card { padding:28px 22px; }
}