/* ============================================================
   ASUKOFFIEDIK — site.css
   Warm tasseography brand. Espresso velvet · cream paper ·
   soft gold spine · rare burgundy. Built on the Haarvisie
   editorial foundation (spacing / radii / shadows / motion),
   warmed into coffee tones with a serif-display blend.
   ============================================================ */

:root {
  /* ---------- COFFEE PALETTE — officieel merkboek ---------- */
  --espresso:        #3B2417;   /* velvet dark surface (merkboek) */
  --espresso-deep:   #1C140F;   /* deepest brown (merkboek)       */
  --espresso-soft:   #4A3022;   /* dark card                 */
  --espresso-panel:  #432B1B;   /* dark panel                */

  --cream:           #F4ECD9;   /* card / block on light (merkboek) */
  --cream-deep:      #EFE5CE;   /* inset fill                */
  --paper:           #F8F2E4;   /* page                      */

  --gold:            #C29B54;   /* primary accent — warm antiekgoud */
  --gold-light:      #E6CE94;   /* champagne hooglicht       */
  --gold-deep:       #97712F;   /* diepe antieke schaduw     */
  --gold-wash:       rgba(194,155,84,0.12);
  /* metallic verloop — geeft "echt goud" glans op tekst/randen */
  --gold-metal:      linear-gradient(135deg, #F0DCA6 0%, #D8B66E 26%, #C29B54 50%, #9A7331 74%, #E2C588 100%);

  --burgundy:        #5E2027;   /* rare deep accent (merkboek <5%) */
  --burgundy-light:  #7A2E35;

  --milk:            #B89B7C;   /* melkkoffie (merkboek)     */

  /* ---------- NEUTRALS / TEXT ---------- */
  --ink:             #2C1D12;   /* primary text on light     */
  --ink-2:           #5A4636;   /* secondary text            */
  --ink-3:           #8A7359;   /* tertiary / meta           */
  --ink-muted:       #A6917A;
  --line-light:      #E4D8C0;   /* hairline on light         */
  --line-dark:       #4F3722;   /* hairline on dark          */

  --on-dark-1:       #F4ECD9;
  --on-dark-2:       #D8C7AD;
  --on-dark-3:       #B49E80;

  /* ---------- TYPE — officieel merkboek ---------- */
  --font-display:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:       'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:     'Pinyon Script', 'Cormorant Garamond', cursive;

  --fs-display:      clamp(3rem, 7vw, 5.6rem);
  --fs-h1:           clamp(2.3rem, 5vw, 3.6rem);
  --fs-h2:           clamp(1.8rem, 3.6vw, 2.7rem);
  --fs-h3:           clamp(1.35rem, 2.4vw, 1.7rem);
  --fs-h4:           1.18rem;
  --fs-body-lg:      1.18rem;
  --fs-body:         1.02rem;
  --fs-body-sm:      0.9rem;
  --fs-caption:      0.78rem;
  --fs-eyebrow:      0.72rem;

  --lh-tight:        1.04;
  --lh-heading:      1.14;
  --lh-body:         1.72;
  --lh-relaxed:      1.85;

  --ls-eyebrow:      0.22em;
  --ls-tight:        -0.01em;

  /* ---------- SPACING ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ---------- RADII ---------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* ---------- SHADOWS (soft, warm) ---------- */
  --sh-1: 0 1px 2px rgba(43,27,16,0.05), 0 1px 1px rgba(43,27,16,0.04);
  --sh-2: 0 6px 20px rgba(43,27,16,0.08), 0 2px 6px rgba(43,27,16,0.05);
  --sh-3: 0 18px 44px rgba(43,27,16,0.14), 0 6px 14px rgba(43,27,16,0.07);
  --sh-gold: 0 14px 36px rgba(138,101,38,0.28);
  --sh-dark-1: 0 4px 18px rgba(0,0,0,0.40);
  --sh-dark-2: 0 20px 50px rgba(0,0,0,0.50);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  460ms;

  /* ---------- LAYOUT ---------- */
  --content-narrow: 760px;
  --content-wide:   1200px;
  --container-x:    24px;
  --header-h:       94px;

  /* ---------- IZNIK-ACCENTEN (globaal — header op alle pagina's) ---------- */
  --izn-blue:  #1B4E8E;
  --izn-iris:  #3D86C6;
  --izn-turq:  #2E9B8A;
  --izn-red:   #B23A2E;
  --nazar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%231B4E8E'/%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23C29B54' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='33' fill='%23F4ECD9'/%3E%3Ccircle cx='50' cy='50' r='20' fill='%233D86C6'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23101C2E'/%3E%3C/svg%3E");
  --iznik-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 18'%3E%3Crect width='48' height='18' fill='%231B4E8E'/%3E%3Crect width='48' height='1.4' fill='%23C29B54'/%3E%3Crect y='16.6' width='48' height='1.4' fill='%23C29B54'/%3E%3Cpath d='M12 14.5 C8 11 8 6.5 12 4 C16 6.5 16 11 12 14.5 Z' fill='%23F4ECD9'/%3E%3Cpath d='M12 13.5 C10 11 10 7.5 12 5.5 C14 7.5 14 11 12 13.5 Z' fill='%232E9B8A'/%3E%3Ccircle cx='12' cy='6.6' r='1' fill='%23B23A2E'/%3E%3Ccircle cx='36' cy='9' r='3.4' fill='%23F4ECD9'/%3E%3Ccircle cx='36' cy='9' r='1.8' fill='%232E9B8A'/%3E%3Ccircle cx='36' cy='9' r='0.8' fill='%23B23A2E'/%3E%3Cpath d='M0 9 l2.2 2.2 -2.2 2.2 -2.2 -2.2 z' fill='%23E6CE94'/%3E%3Cpath d='M24 9 l2.2 2.2 -2.2 2.2 -2.2 -2.2 z' fill='%23E6CE94'/%3E%3Cpath d='M48 9 l2.2 2.2 -2.2 2.2 -2.2 -2.2 z' fill='%23E6CE94'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

h1,h2,h3,h4,h5 { margin: 0; }

.display, .serif {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 600; }
h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); text-wrap: balance; }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4, .h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); letter-spacing: 0.01em; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.lede { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-2); }

a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--gold); border-bottom-color: currentColor; }

strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; }

::selection { background: var(--gold-light); color: var(--espresso-deep); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow.center::before { display: none; }

/* turkish accent text — a soft italic serif aside */
.tr-whisper { font-family: var(--font-display); font-style: italic; color: var(--gold-deep); }

/* handwritten script accent (Pinyon) — signatures / flourishes */
.script { font-family: var(--font-script); color: var(--gold-deep); font-weight: 400; line-height: 1; font-size: clamp(2rem, 4vw, 2.8rem); }
.bg-espresso .script { color: var(--gold-light); }

/* ---------- LANGUAGE TOGGLE VISIBILITY ---------- */
[data-lang="nl"] .lang-tr { display: none !important; }
[data-lang="tr"] .lang-nl { display: none !important; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container { width: 100%; max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--container-x); }
.narrow { max-width: var(--content-narrow); margin-left: auto; margin-right: auto; }
.section { padding: var(--sp-9) 0; position: relative; }
.section-sm { padding: var(--sp-8) 0; position: relative; }
@media (max-width: 720px){
  .section { padding: var(--sp-8) 0; }
  :root { --container-x: 20px; }
}

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.muted { color: var(--ink-3); }

/* surface modifiers */
.bg-cream  { background: var(--cream); }
.bg-paper  { background: var(--paper); }
.bg-deep   { background: var(--cream-deep); }
.bg-espresso { background: var(--espresso); color: var(--on-dark-1); }
.bg-espresso h1, .bg-espresso h2, .bg-espresso h3, .bg-espresso .display { color: var(--on-dark-1); }
.bg-espresso p { color: var(--on-dark-2); }
.bg-espresso .eyebrow { color: var(--gold-light); }
.bg-espresso .eyebrow::before { background: var(--gold-light); }
.bg-espresso a { color: var(--gold-light); }

/* ============================================================
   COFFEE-STAIN / GROUNDS TEXTURE
   ============================================================ */
.stain {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 38%, rgba(120,84,40,0.10) 38% 41%, transparent 41% 47%, rgba(120,84,40,0.07) 47% 49%, transparent 49%);
  mix-blend-mode: multiply;
  z-index: 0;
}
.bg-espresso .stain {
  background:
    radial-gradient(circle, transparent 0 38%, rgba(205,161,90,0.10) 38% 41%, transparent 41% 47%, rgba(205,161,90,0.07) 47% 49%, transparent 49%);
  mix-blend-mode: screen;
}
.stain.s1 { width: 280px; height: 280px; }
.stain.s2 { width: 200px; height: 200px; }
.stain.s3 { width: 420px; height: 420px; }
.section > .container { position: relative; z-index: 1; }

/* a soft full-bleed grounds vignette for dark sections */
.grounds-glow::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(182,136,60,0.14), transparent 60%);
  pointer-events: none;
}

/* ============================================================
   HEADER / NAV  (injected by site.js)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(248,242,228,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header.scrolled { box-shadow: var(--sh-1); }
/* gegolfde Iznik-tegelband als header-rand i.p.v. saaie 1px-lijn */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 9px; background: var(--iznik-band) repeat-x center/auto 9px;
  opacity: 0.92;
}
.site-header.scrolled::after { opacity: 1; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.brand { display: inline-flex; align-items: center; gap: 11px; border: 0; flex: none; }
.brand:hover { border: 0; }
/* kleine kobalt-nazar links van de merknaam */
.brand::before {
  content: ""; width: 9px; height: 9px; margin-right: 2px; flex: none;
  border-radius: 50%; background: var(--nazar) center/contain no-repeat;
}
.brand .cup { width: 34px; height: 34px; flex: none; }
.brand .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.04rem, 4.4vw, 1.34rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.brand .wordmark .moon {
  font-weight: 400; font-style: normal; margin: 0 0.18em; letter-spacing: 0;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.site-footer .brand .wordmark .moon { background: var(--gold-metal); }

.nav { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-2);
  padding: 10px 11px;
  border-radius: var(--r-sm);
  border: 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px;
  background: var(--izn-blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--izn-blue); }
.nav-links a.active::after { transform: scaleX(1); }

/* taal-toggle: groter, duidelijker, kobalt-rand (Turks = TR goed zichtbaar) */
.lang-toggle {
  display: inline-flex; align-items: center; flex: none;
  border: 1.5px solid rgba(27,78,142,0.45); border-radius: var(--r-pill);
  overflow: hidden; margin-left: var(--sp-2); margin-right: 2px; background: var(--cream);
  box-shadow: 0 2px 8px rgba(27,78,142,0.10);
}
.lang-toggle button {
  font-family: var(--font-body); font-weight: 700; font-size: 0.84rem;
  letter-spacing: 0.04em; border: 0; background: transparent; color: var(--izn-blue);
  padding: 8px 15px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.lang-toggle button.on { background: var(--izn-blue); color: var(--cream); }

.nav-cta { padding: 10px 16px; font-size: 0.85rem; margin-left: var(--sp-2); }
.nav-cta-mobile { display: none; }

/* desktop: kop linkt al naar Home → eerste nav-link verbergen, scheelt breedte */
@media (min-width: 1025px) {
  .nav-links li:first-child { display: none; }
}

.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; color: var(--ink); }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .nav .nav-cta { display: none; }
  .nav-cta-mobile { display: block; }
  .nav-cta-mobile a { color: var(--gold-deep) !important; font-weight: 700; }
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line-light);
    padding: var(--sp-3) var(--container-x) var(--sp-5);
    box-shadow: var(--sh-3);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 14px 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line-light); border-radius: 0; }
  .nav-links a::after { display: none; }
  .nav-links li:last-child a { border-bottom: 0; }
}

/* compacte header op telefoon: merknaam + toggle + menuknop passen netjes */
@media (max-width: 560px) {
  :root { --header-h: 84px; }
  .brand { gap: 8px; }
  .brand::before { display: none; }
  .brand .cup { width: 30px; height: 30px; }
  .brand .wordmark { letter-spacing: 0.10em; }
  .lang-toggle { margin-left: 6px; }
  .lang-toggle button { padding: 7px 11px; font-size: 0.8rem; }
  .nav-toggle { padding: 6px; }
}
@media (max-width: 360px) {
  .brand .cup { display: none; }
  .lang-toggle button { padding: 6px 9px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.01em; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--r-pill);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  text-align: center; line-height: 1.1;
}
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  color: var(--cream);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 1px 0 rgba(255,244,224,0.3) inset, var(--sh-gold);
  border: 0;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,244,224,0.35) inset, 0 20px 44px rgba(138,101,38,0.36); color: var(--cream); }
.btn-primary:active { transform: translateY(0); background: var(--gold-deep); }

.btn-secondary {
  color: var(--gold-deep); background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.btn-secondary:hover { background: var(--gold); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--gold), 0 10px 26px rgba(138,101,38,0.22); }

.btn-ghost { color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-light); }
.btn-ghost:hover { color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold); }

.bg-espresso .btn-secondary { color: var(--gold-light); box-shadow: inset 0 0 0 1.5px var(--gold-light); }
.bg-espresso .btn-secondary:hover { background: var(--gold-light); color: var(--espresso-deep); }

.btn-lg { padding: 18px 36px; font-size: 1.05rem; }

/* ============================================================
   FLOATING CTA (injected)
   ============================================================ */
.floating-cta {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 18px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  color: var(--cream); font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  box-shadow: var(--sh-gold); border: 0;
  transform: translateY(0); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.floating-cta.show { opacity: 1; pointer-events: auto; }
.floating-cta:hover { transform: translateY(-3px); color: var(--cream); box-shadow: 0 22px 48px rgba(138,101,38,0.42); border: 0; }
.floating-cta .cup { width: 26px; height: 26px; flex: none; }
@media (max-width: 560px) { .floating-cta .label { display: none; } .floating-cta { padding: 14px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--espresso);
  color: var(--on-dark-1);
  overflow: hidden;
  padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-9);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: center;
}
@media (max-width: 980px){ .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); } .hero-cup-wrap { max-width: 380px; margin: 0 auto; } }

.hero .display { color: var(--on-dark-1); margin: var(--sp-4) 0 var(--sp-5); }
.hero .lede { color: var(--on-dark-2); max-width: 30ch; }
.hero .eyebrow { color: var(--gold-light); }
.hero .eyebrow::before { background: var(--gold-light); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ============================================================
   IMAGE / PHOTO SLOTS  (art-directed placeholders)
   ============================================================ */
.photo {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 25%, #4a3220 0%, #2d1d10 55%, #1d130a 100%);
  display: grid; place-items: center;
  color: var(--on-dark-3); isolation: isolate;
}
.photo .ph-label {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(246,240,230,0.55); font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.photo .ph-label::before { content:""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.photo.framed { box-shadow: var(--sh-2); border: 1px solid var(--line-light); }

/* a stylized coffee cup drawn in CSS+SVG for the hero */
.cup-art { width: 100%; height: 100%; display: block; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--cream); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--sp-6);
  border: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.bg-cream .card, .bg-deep .card { background: var(--paper); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* numbered ritual steps */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; }
.step .num {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--gold-deep); background: var(--gold-wash);
  border: 1px solid var(--gold); 
}
.step h3 { margin-bottom: 6px; }

/* feature row with gold rule */
.rule-top { border-top: 1px solid var(--line-light); padding-top: var(--sp-5); }
.gold-rule { width: 48px; height: 2px; background: var(--gold); border: 0; margin: var(--sp-5) 0; }
.center .gold-rule { margin-left: auto; margin-right: auto; }

/* pull quote */
.pullquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.3;
  color: var(--ink); text-wrap: balance;
}
.bg-espresso .pullquote { color: var(--on-dark-1); }
.prose p { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-2); margin-bottom: var(--sp-5); }
.pullquote .by { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-top: var(--sp-4); font-weight: 700; }
.bg-espresso .pullquote .by { color: var(--gold-light); }

/* ============================================================
   SYMBOLEN A–Z
   ============================================================ */
.sym-toolbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(251,246,238,0.92); backdrop-filter: blur(10px);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-light);
}
.sym-search {
  position: relative; max-width: 460px; margin: 0 auto;
}
.sym-search input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 14px 18px 14px 46px; border-radius: var(--r-pill);
  border: 1px solid var(--line-light); background: var(--cream); color: var(--ink);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.sym-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-wash); }
.sym-search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.alpha-rail { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: var(--sp-4); }
.alpha-rail button {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.alpha-rail button:hover:not(:disabled) { background: var(--gold-wash); color: var(--gold-deep); }
.alpha-rail button:disabled { opacity: 0.28; cursor: default; }

.sym-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px){ .sym-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sym-grid { grid-template-columns: 1fr; } }

.sym-card {
  background: var(--cream); border-radius: var(--r-lg); padding: var(--sp-6);
  box-shadow: var(--sh-1); border: 1px solid transparent;
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.sym-card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.sym-card.fav { border-color: var(--gold); }
.sym-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-deep);
  background: var(--gold-wash);
}
.sym-icon svg { width: 36px; height: 36px; }
.sym-card .sym-name { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--ink); line-height: 1; }
.sym-card .sym-letter { font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 700; color: var(--gold-deep); text-transform: uppercase; }
.sym-card .sym-tr { font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-size: 1rem; }
.sym-card p { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.62; }
.fav-star { margin-left: auto; color: var(--gold); }
.sym-head { display: flex; align-items: center; gap: 6px; }
.sym-empty { text-align: center; color: var(--ink-3); padding: var(--sp-9) 0; grid-column: 1 / -1; }
@keyframes flash-card {
  0%, 100% { box-shadow: var(--sh-1); }
  30%      { box-shadow: 0 0 0 3px var(--gold), var(--sh-3); }
}
.sym-card.flash { animation: flash-card 1.6s var(--ease-out) 1; border-color: var(--gold); }

/* ============================================================
   FORM
   ============================================================ */
.form-card { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--sp-7); }
@media (max-width: 560px){ .form-card { padding: var(--sp-5); } }
.form-head { margin-bottom: var(--sp-6); }
.form-foot { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; margin: var(--sp-5) 0 0; }

/* how-it-works row */
.how-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--sp-4); align-items: start; }
.how { text-align: center; }
.how-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-4);
  color: var(--gold-deep); background: var(--gold-wash); border: 1px solid var(--gold); }
.how-ic svg { width: 26px; height: 26px; }
.how h4 { margin-bottom: var(--sp-2); }
.how p { margin: 0; }
.how-arrow { align-self: center; color: var(--gold); font-size: 1.6rem; padding-top: 18px; }
@media (max-width: 760px){
  .how-row { grid-template-columns: 1fr; gap: var(--sp-6); }
  .how-arrow { display: none; }
}

/* checkbox */
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 400; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-light);
  background: var(--paper); margin-top: 2px; position: relative; transition: all var(--dur-fast) var(--ease-out); }
.check .box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--cream); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.check input:checked + .box { background: var(--gold); border-color: var(--gold); }
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box { box-shadow: 0 0 0 4px var(--gold-wash); }
.check span:last-child { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.check-field.invalid .box { border-color: var(--burgundy); }
.check-field .err-msg[data-for] { display: none; }
.check-field.invalid .err-msg[data-for] { display: flex; margin-top: 8px; }

/* photo thumbnail preview */
.thumb-wrap { position: relative; margin-top: var(--sp-4); width: 180px; }
.thumb-wrap img { width: 180px; height: 180px; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.thumb-x { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--burgundy); color: var(--cream); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: var(--sh-2); }
.thumb-x:hover { background: var(--burgundy-light); }
.dz-text { color: var(--ink-2); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-5); }
.field label { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.field label .req { color: var(--burgundy); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border-radius: var(--r-md); border: 1px solid var(--line-light);
  background: var(--paper); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-wash); }
.field .hint { font-size: 0.82rem; color: var(--ink-3); }
.field .err-msg { font-size: 0.82rem; color: var(--burgundy); display: none; align-items: center; gap: 6px; }
.field.invalid input, .field.invalid textarea { border-color: var(--burgundy); }
.field.invalid .err-msg { display: flex; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } }

/* file drop */
.dropzone {
  border: 1.5px dashed var(--line-light); border-radius: var(--r-md); background: var(--paper);
  padding: var(--sp-6); text-align: center; cursor: pointer; color: var(--ink-3);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.dropzone:hover, .dropzone.drag { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-deep); }
.dropzone svg { margin: 0 auto var(--sp-2); color: var(--gold-deep); }
.dropzone .file-name { color: var(--ink); font-weight: 700; margin-top: 6px; }

.form-success {
  display: none; text-align: center; padding: var(--sp-7) var(--sp-4);
}
.form-success.show { display: block; animation: rise-in var(--dur-slow) var(--ease-out) both; }
.form-success .seal { width: 76px; height: 76px; margin: 0 auto var(--sp-5); color: var(--gold-deep); }

/* ============================================================
   FOOTER (injected)
   ============================================================ */
.site-footer { background: var(--espresso-deep); color: var(--on-dark-2); padding: var(--sp-9) 0 var(--sp-6); position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 760px){ .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.site-footer .brand .wordmark { color: var(--on-dark-1); }
.site-footer .brand .wordmark b { color: var(--gold-light); }
.footer-tag { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--gold-light); margin-top: var(--sp-4); max-width: 26ch; }
.footer-col h5 { font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--on-dark-2); font-size: 0.96rem; border: 0; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
  font-size: 0.82rem; color: var(--on-dark-3); }
.eeat { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: 0.78rem; color: var(--on-dark-3); }
.eeat span { display: inline-flex; align-items: center; gap: 6px; }
.eeat span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* gentle steam animation for the hero cup */
@keyframes steam {
  0%   { opacity: 0; transform: translateY(2px) scaleX(1); }
  35%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-16px) scaleX(1.25); }
}

/* ============================================================
   SPLIT (media + copy two-column)
   ============================================================ */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-8); align-items: center; }
.split-media .photo { width: 100%; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; gap: var(--sp-6); } .split-media { max-width: 420px; } }

/* ============================================================
   TIMELINE (geschiedenis)
   ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(to bottom, var(--gold), var(--gold-wash));
}
.tl { position: relative; padding: 0 0 var(--sp-8) var(--sp-7); }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-wash);
}
.tl-year {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: var(--sp-2);
}
.tl h3 { margin-bottom: var(--sp-3); }
.tl p { color: var(--ink-2); margin: 0; }
@media (max-width: 560px){ .tl { padding-left: var(--sp-6); } }

/* page-intro helper */
.page-head { padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-7); position: relative; }
.page-head .narrow { position: relative; z-index: 1; }

/* ============================================================
   HERO CUP SCENE + STEAM
   ============================================================ */
.hero-cup-wrap { position: relative; }
.cup-scene {
  width: 100%; max-width: 440px; margin: 0 auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.ph-caption {
  margin: var(--sp-4) 0 0; text-align: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.02rem; color: var(--on-dark-3);
}
.steam {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 120px; height: 90px; pointer-events: none; z-index: 2;
}
.steam span {
  position: absolute; bottom: 0; width: 8px; height: 60px; border-radius: 50%;
  background: linear-gradient(to top, rgba(246,240,230,0) 0%, rgba(246,240,230,0.42) 60%, rgba(246,240,230,0) 100%);
  filter: blur(3px);
}
.steam span:nth-child(1) { left: 28px; animation: steam 4.2s ease-in-out infinite; }
.steam span:nth-child(2) { left: 56px; height: 74px; animation: steam 5s ease-in-out infinite 0.8s; }
.steam span:nth-child(3) { left: 84px; animation: steam 4.6s ease-in-out infinite 1.6s; }
@media (prefers-reduced-motion: reduce) { .steam { display: none; } }

/* ============================================================
   STEP BADGES (home "zo werkt het")
   ============================================================ */
.step-badge {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  color: var(--gold-deep); background: var(--gold-wash); border: 1px solid var(--gold);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { margin: 0; }

/* ============================================================
   MINI SYMBOL CARDS (home preview, on espresso)
   ============================================================ */
.sym-mini {
  display: flex; flex-direction: column; gap: var(--sp-3); border: 0;
  background: var(--espresso-soft); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-dark-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sym-mini:hover { transform: translateY(-4px); box-shadow: var(--sh-dark-2); border: 0; }
.bg-espresso .sym-mini .sym-icon { color: var(--gold-light); background: rgba(205,161,90,0.14); }
.sym-mini-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--on-dark-1); line-height: 1; }
.sym-mini-m { font-size: 0.92rem; color: var(--on-dark-3); line-height: 1.55; }

/* ============================================================
   HERO PHOTO + FEELINGS GALLERY + ATMO STRIP (home)
   ============================================================ */
.hero-photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-dark-2); border: 1px solid var(--line-dark);
}
.hero-photo img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }

.feelings { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .feelings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .feelings { grid-template-columns: 1fr; } }

.feeling {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2); border: 1px solid var(--line-light); background: var(--espresso);
}
.feeling img {
  width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.feeling:hover img { transform: scale(1.04); }
.feeling figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  color: #fff; font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2;
  background: linear-gradient(to top, rgba(20,12,6,0.86) 0%, rgba(20,12,6,0.4) 55%, rgba(20,12,6,0) 100%);
}

.atmo { position: relative; height: clamp(220px, 34vw, 420px); overflow: hidden; }
.atmo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atmo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(27,16,8,0.55), rgba(27,16,8,0.15));
}