/* =========================================================
   Sales KOMPAS — warm / human / advisor landing
   Type: Newsreader (display serif) + Hanken Grotesk (body)
   ========================================================= */

:root{
  /* warm paper neutrals */
  --paper:      oklch(0.976 0.012 78);
  --paper-2:    oklch(0.958 0.016 74);
  --paper-3:    oklch(0.938 0.018 72);
  --card:       oklch(0.992 0.006 86);
  --ink:        oklch(0.255 0.016 58);
  --ink-soft:   oklch(0.435 0.018 56);
  --ink-faint:  oklch(0.585 0.016 56);
  --line:       oklch(0.886 0.014 70);
  --line-soft:  oklch(0.918 0.012 72);

  /* accents */
  --clay:       oklch(0.612 0.118 44);   /* terracotta */
  --clay-deep:  oklch(0.512 0.108 42);
  --clay-tint:  oklch(0.93 0.035 56);
  --pine:       oklch(0.322 0.040 158);  /* deep statement green */
  --pine-soft:  oklch(0.46 0.045 158);

  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 64px);

  --shadow-sm: 0 1px 2px oklch(0.3 0.02 60 / .05), 0 2px 8px oklch(0.3 0.02 60 / .04);
  --shadow-md: 0 4px 14px oklch(0.3 0.02 60 / .07), 0 14px 40px oklch(0.3 0.02 60 / .07);
  --shadow-lg: 0 10px 30px oklch(0.3 0.02 60 / .10), 0 30px 70px oklch(0.3 0.02 60 / .10);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:clamp(16px, 1.05vw + 12px, 19px);
  line-height:1.62;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--clay-tint); color:var(--ink); }

h1,h2,h3,h4{
  font-family:"Newsreader", Georgia, serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.012em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0 0 1.05em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
em{ font-style:italic; }
a{ color:inherit; }

.serif{ font-family:"Newsreader", Georgia, serif; }
.italic{ font-style:italic; }
.clay{ color:var(--clay); }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:760px; }
section{ position:relative; }
.section-pad{ padding-block:clamp(64px, 9vw, 132px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Hanken Grotesk", sans-serif;
  font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.6;
}
.eyebrow.center::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.eyebrow.center{ justify-content:center; }

.lead{ font-size:1.12em; color:var(--ink-soft); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--clay); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Hanken Grotesk", sans-serif;
  font-weight:600; font-size:.98rem; letter-spacing:.005em;
  padding:.92em 1.5em; border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s;
  box-shadow:0 1px 2px oklch(0.4 0.1 44 / .25), 0 8px 20px oklch(0.5 0.1 44 / .22);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 2px 4px oklch(0.4 0.1 44 / .28), 0 14px 30px oklch(0.5 0.1 44 / .3); background:var(--clay-deep); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform .2s; }
.btn:hover .arr{ transform:translateX(3px); }
.btn.ghost{
  --bg:transparent; --fg:var(--ink);
  border-color:var(--line); box-shadow:none;
}
.btn.ghost:hover{ background:var(--paper-2); border-color:var(--ink-faint); }
.btn.on-dark{ --bg:var(--paper); --fg:var(--pine); box-shadow:0 10px 30px oklch(0 0 0 / .25); }
.btn.on-dark:hover{ --bg:var(--card); background:var(--card); }

.microcopy{
  font-size:.86rem; color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:.5em; margin-top:.95em;
}
.microcopy .dot{ width:5px;height:5px;border-radius:50%;background:var(--clay); display:inline-block; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-color:var(--line); background:color-mix(in oklab, var(--paper) 92%, transparent); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand img{ width:34px; height:34px; object-fit:contain; }
.brand .wm{ display:flex; flex-direction:column; line-height:1; }
.brand .wm{ white-space:nowrap; }
.brand .wm b{ font-family:"Newsreader",serif; font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.brand .wm small{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:.92rem; color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
@media (max-width:880px){ .nav-links{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,120px); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(2.6rem, 6vw, 4.7rem); letter-spacing:-.022em; }
.hero h1 .ln2{ color:var(--clay); font-style:italic; }
.hero .lead{ margin-top:1.4em; max-width:34ch; }
.hero .cta-row{ margin-top:2em; display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }
.hero-aside{ display:flex; justify-content:center; }

/* compass device */
.compass{ --sz:min(360px, 74vw); position:relative; width:var(--sz); height:var(--sz); }
.compass .ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%, var(--card), var(--paper-2) 70%, var(--paper-3));
  box-shadow:var(--shadow-lg), inset 0 1px 0 oklch(1 0 0 / .6);
  border:1px solid var(--line);
}
.compass .ticks{ position:absolute; inset:0; border-radius:50%; }
.compass .tick{ position:absolute; top:6%; left:calc(50% - 0.5px); width:1px; height:7%; background:var(--ink-faint); opacity:.45; transform-origin:50% 643%; }
.compass .tick.major{ height:11%; width:2px; opacity:.7; background:var(--ink-soft); transform-origin:50% 410%; }
.compass .face{ position:absolute; inset:13%; border-radius:50%; border:1px dashed var(--line); }
.compass .cardinal{ position:absolute; font-family:"Newsreader",serif; font-size:1.1rem; color:var(--ink-faint); font-weight:600; }
.compass .cN{ top:8%; left:50%; transform:translateX(-50%); color:var(--clay); }
.compass .cS{ bottom:8%; left:50%; transform:translateX(-50%); }
.compass .cE{ right:9%; top:50%; transform:translateY(-50%); }
.compass .cW{ left:9%; top:50%; transform:translateY(-50%); }
.compass .needle{ position:absolute; inset:0; display:grid; place-items:center; transform:rotate(-34deg); transform-origin:50% 50%; }
.needle-body{ position:relative; width:14px; height:62%; }
.needle-body::before,.needle-body::after{ content:""; position:absolute; left:0; width:100%; height:50%; clip-path:polygon(50% 0,100% 100%,0 100%); }
.needle-body::before{ top:0; background:linear-gradient(var(--clay), var(--clay-deep)); }
.needle-body::after{ bottom:0; transform:rotate(180deg); background:linear-gradient(var(--ink-soft), var(--ink)); }
.compass .hub{ position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 40% 35%, var(--card), var(--paper-3)); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.compass .label{ position:absolute; bottom:-2px; left:50%; transform:translate(-50%,140%); white-space:nowrap; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

@media (prefers-reduced-motion: no-preference){
  .needle{ animation:settle 2.6s cubic-bezier(.3,1.3,.4,1) .3s 1 both; }
}
@keyframes settle{
  0%{ transform:rotate(18deg); }
  55%{ transform:rotate(-46deg); }
  78%{ transform:rotate(-27deg); }
  100%{ transform:rotate(-34deg); }
}

/* trust strip under hero */
.trust{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:2.4em; padding-top:1.5em; border-top:1px solid var(--line); }
.trust span{ font-size:.86rem; color:var(--ink-faint); display:inline-flex; align-items:center; gap:.55em; }
.trust span::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--clay); transform:rotate(45deg); }

/* =========================================================
   GENERIC SECTION HEADERS
   ========================================================= */
.sec-head{ max-width:720px; }
.sec-head h2{ font-size:clamp(2rem, 3.6vw, 3rem); margin-top:.5em; }
.sec-head p{ margin-top:1em; }
.center-head{ margin-inline:auto; text-align:center; }

/* =========================================================
   "HERKENBAAR" — relatable problem + cycle
   ========================================================= */
.stack-claims{ display:grid; gap:14px; margin:1.6em 0; max-width:520px; }
.claim{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:16px 18px; box-shadow:var(--shadow-sm);
  font-weight:500;
}
.claim .check{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--clay-tint); color:var(--clay-deep); display:grid; place-items:center; font-size:.8rem; }
.turn{ font-family:"Newsreader",serif; font-style:italic; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); margin-top:.4em; }

/* cycle loop */
.cycle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:2.2em; counter-reset:step; }
.cycle .step{
  position:relative; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:22px 18px 20px;
}
.cycle .step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:"Newsreader",serif; font-size:.9rem; color:var(--clay);
  display:block; margin-bottom:.4em; letter-spacing:.05em;
}
.cycle .step p{ font-size:.96rem; color:var(--ink-soft); }
.cycle-foot{ margin-top:1.6em; font-style:italic; color:var(--ink-soft); }

/* =========================================================
   CONTRAST sentences (jouw dienst vs hun werkelijkheid)
   ========================================================= */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:2em; }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
.q{ border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); position:relative; }
.q .tag{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.q blockquote{ margin:.9em 0 0; font-family:"Newsreader",serif; font-size:clamp(1.3rem,2.3vw,1.75rem); line-height:1.22; }
.q.cold{ background:var(--paper-2); border:1px solid var(--line); }
.q.cold .tag{ color:var(--ink-faint); }
.q.cold blockquote{ color:var(--ink-soft); }
.q.warm{ background:var(--pine); color:var(--paper); box-shadow:var(--shadow-lg); }
.q.warm .tag{ color:color-mix(in oklab, var(--paper) 75%, var(--pine)); }
.q.warm blockquote{ color:var(--paper); }
.compare-note{ margin-top:1.4em; color:var(--ink-soft); }

/* =========================================================
   DEFINITION block (Herkenningsgedreven acquisitie)
   ========================================================= */
.definition{
  background:linear-gradient(180deg, var(--card), var(--paper-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(30px,5vw,60px); text-align:center; box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.definition .term{ font-family:"Newsreader",serif; font-style:italic; font-size:clamp(2rem,4.4vw,3.4rem); color:var(--clay); }
.definition .pron{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1em; }
.definition .def-body{ max-width:46ch; margin:1.1em auto 0; color:var(--ink-soft); font-size:1.08em; }

/* =========================================================
   SELF-CHECK ("Voor wie is dit?")
   ========================================================= */
.selfcheck{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:860px){ .selfcheck{ grid-template-columns:1fr; } }
.check-list{ display:grid; gap:12px; }
.check-item{
  display:flex; gap:14px; align-items:flex-start; cursor:pointer;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:15px 17px; transition:border-color .2s, background .2s, transform .12s;
  user-select:none;
}
.check-item:hover{ border-color:var(--ink-faint); }
.check-item .box{
  flex:none; width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line);
  display:grid; place-items:center; transition:all .2s; background:var(--paper);
  color:transparent; margin-top:1px;
}
.check-item.on{ background:var(--clay-tint); border-color:var(--clay); }
.check-item.on .box{ background:var(--clay); border-color:var(--clay); color:var(--paper); }
.check-item span.t{ font-size:.99rem; }
.check-aside{ position:sticky; top:96px; }
.score-card{
  background:var(--pine); color:var(--paper); border-radius:var(--r-lg);
  padding:clamp(26px,3.5vw,38px); box-shadow:var(--shadow-lg);
}
.score-num{ font-family:"Newsreader",serif; font-size:clamp(3rem,7vw,4.6rem); line-height:1; }
.score-num small{ font-size:.32em; color:color-mix(in oklab,var(--paper) 70%, var(--pine)); letter-spacing:.04em; }
.score-bar{ height:7px; border-radius:99px; background:color-mix(in oklab,var(--paper) 22%, var(--pine)); margin:18px 0 16px; overflow:hidden; }
.score-bar i{ display:block; height:100%; width:0; background:var(--clay); border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.3,1); }
.score-msg{ font-size:.98rem; color:color-mix(in oklab,var(--paper) 86%, var(--pine)); min-height:3em; }
.score-card .btn{ margin-top:18px; }

/* =========================================================
   DELIVERABLES ("Wat je krijgt")
   ========================================================= */
.deliver{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--card); }
@media (max-width:680px){ .deliver{ grid-template-columns:1fr; } }
.deliver li{
  list-style:none; padding:22px clamp(18px,2.4vw,28px);
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  display:flex; gap:14px; align-items:flex-start;
}
.deliver li:nth-child(2n){ border-right:0; }
.deliver li .n{ font-family:"Newsreader",serif; font-style:italic; color:var(--clay); font-size:1.1rem; flex:none; width:1.6em; }
.deliver li .x{ font-weight:500; }
.deliver-note{ margin-top:1.6em; color:var(--ink-soft); }

/* =========================================================
   OUTCOMES ("Wat levert het op")
   ========================================================= */
.outcomes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:.4em; }
.outcome{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:22px 22px 24px; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .25s;
}
.outcome:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.outcome .ic{ width:36px;height:36px;border-radius:50%; background:var(--clay-tint); display:grid; place-items:center; margin-bottom:14px; }
.outcome .ic span{ width:11px;height:11px;border-radius:3px;background:var(--clay); transform:rotate(45deg); }
.outcome p{ font-weight:500; }

/* =========================================================
   "NIET" section (dark pine)
   ========================================================= */
.dark{ background:var(--pine); color:var(--paper); }
.dark .eyebrow{ color:color-mix(in oklab,var(--paper) 78%, var(--pine)); }
.dark .lead{ color:color-mix(in oklab,var(--paper) 80%, var(--pine)); }
.not-list{ display:grid; gap:14px; margin-top:1.8em; max-width:760px; }
.not-item{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid color-mix(in oklab,var(--paper) 16%, var(--pine)); }
.not-item .mk{ flex:none; width:26px;height:26px;border-radius:50%; border:1px solid color-mix(in oklab,var(--paper) 40%, var(--pine)); display:grid;place-items:center; color:var(--clay); font-size:1rem; }
.not-item p{ color:color-mix(in oklab,var(--paper) 88%, var(--pine)); }
.choose{ margin-top:2.6em; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.choose .c{ border:1px solid color-mix(in oklab,var(--paper) 22%, var(--pine)); border-radius:var(--r-md); padding:18px; }
.choose .c b{ font-family:"Newsreader",serif; font-weight:500; font-style:italic; color:var(--paper); display:block; font-size:1.15rem; }
.choose .c span{ font-size:.9rem; color:color-mix(in oklab,var(--paper) 72%, var(--pine)); }
.dark .turn{ color:var(--paper); }

/* =========================================================
   FIRST STEP
   ========================================================= */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:.4em; counter-reset:s3; }
@media (max-width:760px){ .steps3{ grid-template-columns:1fr; } }
.step3{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:26px 24px; box-shadow:var(--shadow-sm); }
.step3 .num{ width:40px;height:40px;border-radius:50%; background:var(--pine); color:var(--paper); display:grid;place-items:center; font-family:"Newsreader",serif; font-size:1.2rem; margin-bottom:16px; }
.step3 h4{ font-size:1.2rem; }
.step3 p{ margin-top:.5em; color:var(--ink-soft); font-size:.97rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 8px 24px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:"Newsreader",serif; font-size:clamp(1.15rem,1.9vw,1.45rem); color:var(--ink);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--clay); }
.faq .pm{ flex:none; width:30px;height:30px;border-radius:50%; border:1px solid var(--line); position:relative; transition:.25s; }
.faq .pm::before,.faq .pm::after{ content:""; position:absolute; top:50%;left:50%; width:12px;height:1.5px; background:var(--ink-soft); transform:translate(-50%,-50%); transition:.25s; }
.faq .pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] .pm{ background:var(--clay); border-color:var(--clay); }
.faq details[open] .pm::before,.faq details[open] .pm::after{ background:var(--paper); }
.faq details[open] .pm::after{ transform:translate(-50%,-50%) rotate(0); }
.faq .ans{ overflow:hidden; }
.faq .ans-inner{ padding:0 50px 26px 0; color:var(--ink-soft); }
.faq details[open] .ans-inner{ animation:fade .4s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* =========================================================
   CLOSING + CTA band
   ========================================================= */
.closing{ text-align:center; }
.closing .big{ font-size:clamp(2.2rem,5vw,4rem); }
.closing .big em{ color:var(--clay); }
.cta-band{ background:var(--pine); color:var(--paper); border-radius:var(--r-lg); padding:clamp(34px,5vw,68px); text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.cta-band h2{ font-size:clamp(1.9rem,4vw,3rem); }
.cta-band p{ color:color-mix(in oklab,var(--paper) 82%, var(--pine)); max-width:42ch; margin-inline:auto; margin-top:1em; }
.cta-band .cta-row{ margin-top:2em; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.cta-band .microcopy{ color:color-mix(in oklab,var(--paper) 72%, var(--pine)); justify-content:center; }

/* contact form */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
.form{ display:grid; gap:14px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; }
.field input,.field textarea{
  font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; transition:border-color .2s, box-shadow .2s; resize:vertical;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint); }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .form .row2{ grid-template-columns:1fr; } }
.form-ok{ display:none; background:var(--clay-tint); border:1px solid var(--clay); border-radius:var(--r-md); padding:20px; color:var(--clay-deep); font-weight:500; }
.form-ok.show{ display:block; animation:fade .4s ease both; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:color-mix(in oklab,var(--paper) 70%, var(--ink)); padding-block:54px; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.footer .fbrand{ font-family:"Newsreader",serif; font-size:1.3rem; color:var(--paper); }
.footer .fbrand small{ display:block; font-family:"Hanken Grotesk",sans-serif; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:color-mix(in oklab,var(--paper) 50%, var(--ink)); margin-top:5px; }
.footer a{ color:color-mix(in oklab,var(--paper) 72%, var(--ink)); text-decoration:none; font-size:.9rem; }
.footer a:hover{ color:var(--paper); }
.foot-links{ display:flex; gap:24px; flex-wrap:wrap; }

/* =========================================================
   STICKY CTA
   ========================================================= */
.sticky-cta{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 140%);
  z-index:70; display:flex; align-items:center; gap:16px;
  background:var(--ink); color:var(--paper);
  border-radius:999px; padding:9px 9px 9px 22px;
  box-shadow:var(--shadow-lg);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
  max-width:calc(100vw - 28px);
}
.sticky-cta.show{ transform:translate(-50%,0); }
.sticky-cta .txt{ font-size:.92rem; font-weight:500; white-space:nowrap; }
.sticky-cta .txt b{ font-family:"Newsreader",serif; font-weight:500; }
.sticky-cta .btn{ padding:.7em 1.2em; box-shadow:none; }
@media (max-width:560px){ .sticky-cta .txt{ display:none; } .sticky-cta{ padding:9px; } }

/* =========================================================
   SCROLL REVEAL
   Base state is ALWAYS visible (never hide content behind an
   animation/transition — some environments freeze the timeline).
   The entrance only animates the offset, keeping opacity safe.
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:1; }
  .reveal.in{ animation:revealUp .7s cubic-bezier(.2,.7,.3,1) both; }
  .reveal.in.d1{ animation-delay:.08s; }
  .reveal.in.d2{ animation-delay:.16s; }
  .reveal.in.d3{ animation-delay:.24s; }
}
@keyframes revealUp{
  from{ transform:translateY(20px); }
  to{ transform:none; }
}

/* small ornament: dotted compass rose used as section mark */
.rose{ width:42px;height:42px; position:relative; margin-bottom:18px; }
.rose::before,.rose::after{ content:""; position:absolute; inset:0; }
.rose::before{ background:conic-gradient(from 0deg, var(--clay) 0 2deg, transparent 2deg 88deg, var(--ink-faint) 88deg 90deg, transparent 90deg 178deg, var(--ink-faint) 178deg 180deg, transparent 180deg 268deg, var(--ink-faint) 268deg 270deg, transparent 270deg 358deg, var(--clay) 358deg 360deg); -webkit-mask:radial-gradient(circle, transparent 30%, #000 31%, #000 49%, transparent 50%); mask:radial-gradient(circle, transparent 30%, #000 31%, #000 49%, transparent 50%); }
.rose::after{ width:13px;height:13px; margin:auto; border-radius:50%; border:1.5px solid var(--clay); box-sizing:border-box; }
.center-head .rose{ margin-inline:auto; }