/* ==========================================================================
GoedCijfer.nl — Production Stylesheet
Design family: ink navy + deep blue + warm brass, on warm/cool off-whites.
Editorial serif (Fraunces) for voice, Inter for clarity.
Signature idea: a route from confusion to clarity — expressed through the
before/after split, the four-stage roadmap and the Ferry case story.
Brass is used selectively, not on every label.
========================================================================== */
:root{
--ink: #102338; /* deepest dark section bg */
--deep-blue: #173B55; /* secondary dark, card accents on dark */
--brass: #B28B57; /* warm accent — used selectively */
--brass-light: #D6BD93;
--warm-bg: #F7F4EE; /* pale warm background (alternates with cool) */
--cool-bg: #F3F7F8; /* pale cool background */
--bg: #FFFFFF;
--text: #17242C;
--text-muted: #5B6870;
--border: #DFE5E7;
--border-warm: #E7E1D3;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--container: 1120px;
--radius: 16px;
--radius-sm: 10px;
--radius-btn: 11px;
--shadow-sm: 0 1px 2px rgba(16,35,56,0.06), 0 1px 1px rgba(16,35,56,0.04);
--shadow-md: 0 10px 26px rgba(16,35,56,0.10);
--shadow-lg: 0 26px 60px rgba(16,35,56,0.20);
--ease: cubic-bezier(.4,0,.2,1);
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{ font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,blockquote,figure{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1rem; }
.container{ max-width: var(--container); margin-inline:auto; padding-inline: 24px; position:relative; z-index:2; }
.skip-link{ position:absolute; left:-999px; top:auto; background: var(--ink); color:#fff; padding:12px 20px; border-radius: var(--radius-sm); z-index: 300; }
.skip-link:focus{ left: 16px; top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{ outline: 2.5px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, .display{ font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; line-height: 1.14; }
h2{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3{ font-size: clamp(1.1rem, 2vw, 1.3rem); }
.eyebrow{ font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brass); }
p.lede{ font-size: 1.08rem; color: var(--text-muted); }
.text-muted{ color: var(--text-muted); }
.center{ text-align:center; }
.visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* restrained grain — used only on the two big cinematic dark moments */
.grain{ position:relative; }
.grain::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.04; mix-blend-mode:overlay; background-image: var(--grain); background-size:140px 140px; }
/* ---------- Progressive-enhancement reveal ----------
Content is visible by default. Only once documentElement has the "js"
class (set synchronously in ) do reveal elements hide and animate
in via IntersectionObserver. If JavaScript fails, nothing is ever hidden. */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }
/* ---------- Header ---------- */
.site-header{ position: sticky; top:0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block: 16px; }
.logo{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.logo .dot{ color: var(--brass); }
.nav-links{ display:flex; gap: 30px; align-items:center; }
.nav-links a:not(.btn){ font-size: 0.95rem; font-weight: 500; color: var(--ink); position:relative; padding-block: 4px; }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after{ transform: scaleX(1); }
.nav-toggle{ display:none; background:none; border:none; padding:8px; color:var(--ink); }
.nav-toggle svg{ width:26px; height:26px; }
@media (max-width: 859px){
.nav-links{ position:fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: var(--bg); flex-direction:column; align-items:flex-start; padding: 100px 28px 28px; gap:22px; transform: translateX(100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
.nav-links.open{ transform: translateX(0); }
.nav-toggle{ display:inline-flex; }
.nav-links a{ font-size:1.1rem; }
.nav-links .btn{ width:100%; justify-content:center; margin-top:8px; }
}
.nav-scrim{ display:none; position:fixed; inset:0; background: rgba(16,35,56,0.4); z-index:90; }
.nav-scrim.open{ display:block; }
/* ---------- Buttons: rectangular-rounded, one clear hierarchy ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 26px; border-radius: var(--radius-btn); font-weight: 600; font-size: 0.97rem; border: 1.5px solid transparent; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease); white-space: nowrap; }
.btn-primary{ background: var(--brass); color:#fff; }
.btn-primary:hover{ background:#9c774a; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-secondary{ background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover{ border-color: var(--ink); background: var(--cool-bg); transform: translateY(-2px); }
.btn-ghost-dark{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost-dark:hover{ background: rgba(255,255,255,0.08); border-color:#fff; transform: translateY(-2px); }
.btn-sm{ padding:11px 18px; font-size:0.88rem; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:0.55; cursor:not-allowed; pointer-events:none; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }
section{ padding-block: clamp(56px, 8vw, 100px); }
.section-warm{ background: var(--warm-bg); }
.section-cool{ background: var(--cool-bg); }
.section-white{ background: var(--bg); }
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head.center{ margin-inline:auto; text-align:center; }
/* ================= HERO ================= */
.hero-cinematic{ position:relative; min-height: 88vh; display:flex; align-items:flex-end; overflow:hidden; padding-block:0; }
.hero-media{ position:absolute; inset:-4% -2% -2% -2%; z-index:0; will-change:transform; background: linear-gradient(155deg, var(--deep-blue) 0%, var(--ink) 70%); }
.hero-media svg{ width:100%; height:100%; }
.hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(16,35,56,0.05) 0%, rgba(16,35,56,0.4) 45%, rgba(16,35,56,0.92) 100%); }
.hero-content{ position:relative; z-index:2; color:#fff; padding-block: clamp(60px,13vh,130px) clamp(70px,12vh,110px); max-width:800px; }
.hero-kicker{ color: var(--brass-light); }
.hero-display{ font-size: clamp(2.3rem, 5.6vw, 4rem); font-weight:500; color:#fff; margin-top:14px; margin-bottom:18px; }
.hero-support{ font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,0.86); max-width:56ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-reassure{ margin-top:20px; font-size:0.9rem; color: rgba(255,255,255,0.75); max-width:52ch; }
.hero-trust-line{ margin-top:28px; font-size:0.82rem; color: rgba(255,255,255,0.65); }
.scroll-cue{ position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%); color: rgba(255,255,255,0.75); }
.scroll-cue svg{ width:22px; height:22px; }
.js .scroll-cue{ animation: bob 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .js .scroll-cue{ animation:none; } }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }
/* ================= BREATH ================= */
.breath{ min-height:36vh; display:flex; align-items:center; justify-content:center; text-align:center; background:#fff; }
.breath-inner{ max-width:760px; }
.breath-line{ font-family: var(--font-display); font-size: clamp(1.35rem,2.8vw,1.85rem); font-weight:500; color: var(--ink); line-height:1.4; }
/* ================= AUTHORITY ================= */
.authority{ background: var(--ink); padding-block: clamp(60px,8vw,100px); }
.authority h2{ color:#fff; }
.authority .eyebrow{ color: var(--brass-light); }
.authority-row{ display:flex; gap:16px; overflow-x:auto; padding: 26px 24px 10px; scroll-snap-type:x proximity; scrollbar-width:thin; margin-inline:calc((100vw - var(--container)) / -2 + 24px); max-width:100vw; }
@media(max-width:1160px){ .authority-row{ margin-inline:0; padding-inline:24px; } }
.authority-card{ flex:0 0 250px; scroll-snap-align:start; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding:24px 22px; transition: transform .25s var(--ease), background .25s var(--ease); }
.authority-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.075); }
.authority-num{ font-family: var(--font-display); color: var(--brass-light); font-size:1.4rem; display:block; }
.authority-card h3{ color:#fff; margin-top:10px; font-size:1rem; font-weight:500; line-height:1.35; }
.authority-row .reveal:nth-child(2){transition-delay:.03s}
.authority-row .reveal:nth-child(3){transition-delay:.06s}
.authority-row .reveal:nth-child(4){transition-delay:.09s}
.authority-row .reveal:nth-child(5){transition-delay:.12s}
.authority-row .reveal:nth-child(6){transition-delay:.15s}
.authority-row .reveal:nth-child(7){transition-delay:.18s}
/* ================= FAMILY QUOTE ================= */
.family-quote{ background: var(--warm-bg); }
.family-quote-inner{ max-width:820px; margin-inline:auto; text-align:center; }
.family-quote-mark{ font-family: var(--font-display); font-size:3rem; color: var(--brass-light); line-height:1; display:block; margin-bottom:6px; }
.family-quote p{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.5rem,3.6vw,2.3rem); color: var(--ink); line-height:1.35; }
.family-quote footer{ margin-top:22px; font-size:0.9rem; color: var(--text-muted); font-style:normal; }
/* ================= PROBLEM / GUIDE ================= */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; }
@media(max-width:860px){ .two-col{ grid-template-columns:1fr; gap:32px; } }
.check-list{ display:flex; flex-direction:column; gap:13px; margin-top:18px; }
.check-list li{ display:flex; gap:10px; align-items:flex-start; font-size:1rem; }
.check-list svg{ flex-shrink:0; margin-top:3px; width:19px; height:19px; color: var(--brass); }
.guide-answer{ background:#fff; border:1px solid var(--border-warm); border-radius: var(--radius); padding:24px 26px; margin-top:22px; }
.guide-answer p{ font-family: var(--font-display); font-size:1.15rem; color: var(--ink); line-height:1.45; }
/* ================= BEFORE / AFTER — accessible full-bleed split ================= */
.compare-split{ display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:760px){ .compare-split{ grid-template-columns:1fr; } }
.compare-chaos, .compare-calm{ padding: clamp(40px,6vw,64px) clamp(28px,5vw,56px); }
.compare-chaos{ background: var(--ink); }
.compare-calm{ background: var(--warm-bg); }
.compare-heading{ text-transform:uppercase; letter-spacing:0.09em; font-size:0.78rem; font-weight:700; display:block; margin-bottom:22px; }
.compare-chaos .compare-heading{ color: var(--brass-light); }
.compare-calm .compare-heading{ color: var(--brass); }
.compare-chaos ul, .compare-calm ul{ display:flex; flex-direction:column; gap:16px; }
.compare-chaos li{ font-size:1rem; color: rgba(255,255,255,0.72); font-weight:500; }
.compare-calm li{ font-family: var(--font-display); font-size: clamp(1.1rem,2vw,1.4rem); color: var(--ink); position:relative; padding-left:28px; }
.compare-calm li::before{ content:""; position:absolute; left:0; top:12px; width:16px; height:2px; background: var(--brass); }
/* ================= METHOD / JOURNEY ================= */
.journey-track{ position:relative; max-width:800px; margin-inline:auto; margin-top:16px; }
.journey-track::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background: var(--brass-light); transform:translateX(-50%); }
@media(max-width:760px){ .journey-track::before{ left:23px; } }
.journey-beat{ position:relative; display:grid; grid-template-columns:64px 1fr; gap:26px; align-items:start; padding-block:36px; }
.journey-beat[data-align="right"]{ direction:rtl; }
.journey-beat[data-align="right"] > *{ direction:ltr; }
@media(max-width:760px){ .journey-beat, .journey-beat[data-align="right"]{ direction:ltr; grid-template-columns:46px 1fr; } }
.journey-beat-num{ position:relative; z-index:2; width:64px; height:64px; border-radius:50%; background:#fff; border:2px solid var(--brass); color: var(--brass); font-family: var(--font-display); font-size:1.25rem; display:flex; align-items:center; justify-content:center; }
@media(max-width:760px){ .journey-beat-num{ width:46px; height:46px; font-size:0.95rem; } }
.journey-beat-copy h3{ margin-bottom:6px; }
.journey-beat-copy .beat-lead{ font-family: var(--font-display); font-style:italic; color: var(--brass); font-size:1.05rem; margin-bottom:6px; display:block; }
.journey-beat-copy p{ color: var(--text-muted); }
.journey-track .reveal:nth-child(2){transition-delay:.06s}
.journey-track .reveal:nth-child(3){transition-delay:.12s}
.journey-track .reveal:nth-child(4){transition-delay:.18s}
/* ================= GUIDANCE ROUTES ================= */
.routes-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-top:20px; }
@media(max-width:760px){ .routes-grid{ grid-template-columns:1fr; } }
.route-card{ border:1px solid var(--border-warm); border-radius: var(--radius); background:#fff; padding: 32px 28px; display:flex; flex-direction:column; gap:14px; }
.route-card.featured{ border-color: var(--brass); box-shadow: var(--shadow-md); }
.route-tag{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color: var(--brass); }
.route-card h3{ font-size:1.4rem; }
.route-card ul{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.route-card li{ display:flex; gap:9px; align-items:flex-start; font-size:0.92rem; color: var(--text-muted); }
.route-card li svg{ flex-shrink:0; width:16px; height:16px; margin-top:3px; color: var(--brass); }
.route-price-note{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border); font-size:0.86rem; color: var(--text-muted); font-style:italic; }
/* ================= FERRY CINEMATIC ================= */
.ferry-cinematic{ background: var(--ink); padding-block: clamp(64px,9vw,110px); }
.ferry-cinematic h2{ color:#fff; }
.ferry-cinematic .eyebrow{ color: var(--brass-light); }
.ferry-reel{ max-width:880px; margin-inline:auto; padding: 26px 24px 6px; }
.ferry-scene{ padding-block:44px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
.ferry-scene:last-child{ border-bottom:none; }
.ferry-scene[data-align="right"]{ text-align:right; }
.ferry-scene .ferry-year{ display:block; font-size:0.76rem; letter-spacing:0.09em; color: var(--brass); font-weight:700; margin-bottom:10px; text-transform:uppercase; }
.ferry-scene p{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.5rem,3.8vw,2.5rem); color:#fff; line-height:1.2; }
.ferry-scene.highlight p{ color: var(--brass-light); }
.ferry-reel .reveal:nth-child(2){transition-delay:.04s}
.ferry-reel .reveal:nth-child(3){transition-delay:.08s}
.ferry-reel .reveal:nth-child(4){transition-delay:.12s}
.ferry-reel .reveal:nth-child(5){transition-delay:.16s}
.ferry-reel .reveal:nth-child(6){transition-delay:.2s}
.ferry-note{ max-width:880px; margin:0 auto; padding:0 24px; font-size:0.8rem; color: rgba(255,255,255,0.5); }
/* ================= VIDEO ================= */
.video-frame{ position:relative; max-width:900px; margin-inline:auto; aspect-ratio:16/9; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); background: var(--ink); }
.video-frame svg.video-still{ position:absolute; inset:0; width:100%; height:100%; }
.video-play{ position:absolute; inset:0; margin:auto; width:80px; height:80px; border-radius:50%; background: rgba(255,255,255,0.95); border:none; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg); }
.video-play svg{ width:24px; height:24px; color: var(--ink); margin-left:3px; }
.video-caption{ text-align:center; margin-top:16px; font-size:0.85rem; color: var(--text-muted); }
/* ================= ABOUT JUAN ================= */
.about-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:48px; align-items:center; }
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.identity-stack{ display:flex; flex-direction:column; gap:4px; margin-top:18px; }
.identity-stack span{ font-family: var(--font-display); font-size: clamp(1.15rem,2.2vw,1.5rem); color: var(--ink); font-weight:500; }
.about-note{ margin-top:18px; font-size:0.95rem; color: var(--text-muted); max-width:52ch; }
.about-photo{ position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio:4/5; box-shadow: var(--shadow-md); background: linear-gradient(160deg, var(--deep-blue) 0%, var(--ink) 100%); }
.about-photo svg{ position:absolute; inset:0; width:100%; height:100%; }
/* ================= PRACTICAL INFO ================= */
.practical-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media(max-width:860px){ .practical-grid{ grid-template-columns:1fr; } }
.practical-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-sm); padding:24px 22px; }
.practical-card h3{ font-size:1rem; margin-bottom:10px; }
.practical-card ul{ display:flex; flex-direction:column; gap:6px; font-size:0.9rem; color: var(--text-muted); }
.intake-steps{ counter-reset:step; margin-top:30px; display:flex; flex-direction:column; gap:16px; max-width:640px; }
.intake-steps li{ counter-increment:step; display:flex; gap:16px; align-items:flex-start; font-size:0.96rem; color: var(--text); }
.intake-steps li::before{ content:counter(step); flex:0 0 auto; width:30px; height:30px; border-radius:50%; background: var(--ink); color:#fff; font-family: var(--font-display); font-size:0.85rem; display:flex; align-items:center; justify-content:center; }
.reassure-box{ margin-top:26px; background: var(--warm-bg); border-radius: var(--radius-sm); padding:20px 22px; font-size:0.92rem; color: var(--ink); font-style:italic; max-width:640px; }
/* ================= FAQ ================= */
.faq-list{ max-width:760px; margin-inline:auto; }
details.faq{ border-bottom: 1px solid var(--border); padding-block: 4px; }
details.faq summary{ list-style:none; cursor:pointer; padding: 18px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; color: var(--ink); }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary .chev{ transition: transform .2s var(--ease); flex-shrink:0; color: var(--brass); }
details.faq[open] summary .chev{ transform: rotate(180deg); }
details.faq p{ padding: 0 4px 20px; color: var(--text-muted); max-width:65ch; }
/* ================= PROOF (hidden until real assets exist) ================= */
.proof-scatter{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px; align-items:start; }
@media(max-width:860px){ .proof-scatter{ grid-template-columns:1fr; } }
.chat-card{ border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-md); background:#fff; }
.chat-card .chat-head{ padding:12px 16px; font-size:0.8rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.chat-card.whatsapp .chat-head{ background:#25D366; color:#fff; }
.chat-card.whatsapp .chat-head .chat-dot{ width:8px; height:8px; border-radius:50%; background:#fff; }
.chat-card.whatsapp .chat-bubble{ background:#DCF8C6; margin:16px; padding:12px 14px; border-radius:10px 10px 10px 2px; font-size:0.88rem; color:#223; }
.chat-card.email .chat-head{ background: var(--cool-bg); color: var(--text-muted); border-bottom:1px solid var(--border); }
.chat-card.email .chat-body{ padding:16px; font-size:0.88rem; color: var(--text); }
.chat-card.linkedin .chat-head{ background:#0A66C2; color:#fff; }
.chat-card.linkedin .chat-body{ padding:16px; font-size:0.88rem; color: var(--text); }
/* ================= CONTACT + FINAL CTA ================= */
.contact-split{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:44px; align-items:start; }
@media(max-width:900px){ .contact-split{ grid-template-columns:1fr; } }
.contact-card{ border:1px solid var(--border-warm); border-radius: var(--radius); padding: 28px; background: var(--warm-bg); }
.contact-card ul{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.contact-card li{ font-size:0.94rem; display:flex; gap:10px; }
.contact-card li svg{ width:18px; height:18px; color: var(--brass); flex-shrink:0; margin-top:2px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:0.87rem; font-weight:600; color: var(--ink); }
.field input, .field select, .field textarea{ padding: 12px 14px; border:1.5px solid var(--border); border-radius: var(--radius-sm); background:#fff; color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brass); }
.field textarea{ resize: vertical; min-height:90px; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color: var(--text-muted); }
.consent input{ margin-top:3px; }
.form-status{ font-size:0.9rem; margin-top:12px; }
.form-status[data-state="success"]{ color:#2f6b3a; }
.form-status[data-state="error"]{ color:#a3342f; }
.form-errors{ background:#FBEAE8; border:1px solid #E6B4AE; border-radius: var(--radius-sm); padding:14px 16px; margin-bottom:16px; font-size:0.88rem; color:#7A2620; display:none; }
.form-errors.show{ display:block; }
.form-note{ font-size:0.8rem; color: var(--text-muted); margin-top:10px; }
.final-cta{ position:relative; overflow:hidden; background: var(--ink); padding-block: clamp(64px,9vw,110px); }
.final-cta::after{ content:""; position:absolute; top:-30%; right:-10%; width:60%; aspect-ratio:1; background: radial-gradient(circle, rgba(178,139,87,0.28) 0%, rgba(178,139,87,0) 70%); pointer-events:none; z-index:1; }
.final-cta h2{ color:#fff; font-size: clamp(1.9rem,4vw,2.8rem); }
/* ================= FOOTER ================= */
.site-footer{ background: var(--ink); color: rgba(255,255,255,0.82); padding-block: 52px 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-logo{ font-family: var(--font-display); font-size:1.25rem; color:#fff; }
.footer-col h4{ color:#fff; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:8px; }
.footer-col a{ font-size:0.9rem; color: rgba(255,255,255,0.72); }
.footer-col a:hover{ color: var(--brass-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:40px; padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:0.8rem; color: rgba(255,255,255,0.5); }
/* ================= STICKY MOBILE CTA — revealed after ~1 viewport ================= */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:120; display:flex; gap:10px; background: rgba(255,255,255,0.97); border-top:1px solid var(--border); backdrop-filter: blur(8px); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); transform: translateY(120%); transition: transform .3s var(--ease); }
.sticky-cta.visible{ transform: translateY(0); }
@media(min-width:860px){ .sticky-cta{ display:none; } }
.js .sticky-cta{ display:flex; }
@media(min-width:860px){ .js .sticky-cta{ display:none; } }
.sticky-cta a{ flex:1; text-align:center; padding:13px 10px; }
/* ================= Simple utility pages (privacy/voorwaarden/404/bedankt) ================= */
.legal-page{ max-width:720px; margin-inline:auto; padding-block:60px; }
.legal-page h1{ margin-bottom:20px; }
.legal-page h2{ font-size:1.3rem; margin-top:34px; margin-bottom:10px; }
.legal-page p, .legal-page li{ color: var(--text-muted); font-size:0.98rem; line-height:1.7; }
.legal-page ul{ display:flex; flex-direction:column; gap:8px; padding-left:0; margin-top:10px; }
.legal-page ul li{ padding-left:20px; position:relative; }
.legal-page ul li::before{ content:"—"; position:absolute; left:0; color: var(--brass); }
.error-page{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding-block:60px; }
.error-page .error-code{ font-family: var(--font-display); font-size:5rem; color: var(--brass-light); }
/* ---------- Self-hosted fonts (optional future optimisation) ----------
TODO-GC: Download Fraunces + Inter .woff2 files (e.g. via
google-webfonts-helper) into assets/fonts/, then replace the Google
Fonts in with the @font-face rules below, and delete
the tags. Example:
@font-face{
font-family:"Inter";
src:url("../fonts/inter-latin-400.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap;
}
*/