/* =========================================================================
   Vintage Trouwvervoer, "De Dagkaart, Lijn Reeuwijk-Brug"
   Palet uit de bus: zeegroen, warm crème, diep teal-inkt, chroom, amber.
   Signatuur: het rolgordijn-bestemmingsbord + de pagina als één gescheurd
   verhuurkaartje (stubs), gedragen door de geperforeerde route-rail links.
   ========================================================================= */

/* ---------- Fonts (self-hosted, geen externe CDN) ---------- */
@font-face { font-family:'Hanken Grotesk'; src:url('fonts/hanken-grotesk-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-italic-var.woff2') format('woff2'); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:'Saira Condensed'; src:url('fonts/saira-condensed-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Saira Condensed'; src:url('fonts/saira-condensed-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Saira Condensed'; src:url('fonts/saira-condensed-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  /* kleuren, hergesampeld uit VW-T2.jpg */
  --cream:        #F2EAD8;
  --cream-band:   #EADFC9;
  --seafoam:      #7FA6A8;
  --seafoam-lit:  #A6C7CC;
  --seafoam-deep: #3C6562;
  --seafoam-guide:#CFDED9;
  --housing:      #15302E;  /* warm donker teal, alleen bord-interieur + footer */
  --teal-ink:     #173A38;
  --teal-rail:    #2E5A57;
  --teal-caption: #2E5A57;
  --chrome:       #BFC5C5;
  --chrome-hi:    #E6E9E9;
  --chrome-lo:    #8E9897;
  --amber:        #E0992E;  /* alleen decoratief / gloed / vlak, nooit tekst op crème */
  --amber-deep:   #B5701A;  /* groot / UI op crème (3.31:1) */
  --amber-glow:   rgba(224,153,46,0.30);
  --perf-dot:     rgba(23,58,56,0.16);
  --focus-ring:   #173A38;

  /* radii */
  --r-stub: 14px;
  --r-bezel: 10px;
  --r-button: 12px;
  --r-img: 12px;

  /* type */
  --f-body:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-disp:  'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sign:  'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;

  /* layout */
  --stage: 1240px;
  --page-pad-r: clamp(20px, 5vw, 72px);
  --rail-x: clamp(26px, 6vw, 84px);
  --bleed-r: calc(var(--page-pad-r) + max(0px, (100vw - var(--stage)) / 2));
  --sec-pad: clamp(56px, 8vw, 116px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--f-body);
  font-weight:400;
  color: var(--teal-ink);
  background: var(--cream);
  line-height:1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg { display:block; max-width:100%; }
a { color: var(--teal-ink); text-decoration-color: var(--amber-deep); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--amber); }
p { margin: 0 0 1rem; }
h1,h2,h3 { margin:0; font-weight:400; line-height:1.1; }

/* signage helper */
.route, .eyebrow, .blind__line, .blind__route, .halte__label, .board__head, .fare__name,
.fare__price, .field label, .footer__meta, .footer__plate, .footer__eind, .plate,
.lightbox__count, .wordmark, .band__caption, .btn {
  font-family: var(--f-sign);
  text-transform: uppercase;
}

.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200;
  background: var(--housing); color: var(--cream);
  font-family: var(--f-sign); text-transform:uppercase; letter-spacing:.12em;
  padding:.6rem 1rem; border-radius: 0 0 var(--r-button) var(--r-button);
  transition: top .15s ease;
}
.skip-link:focus { top:0; }

/* ====================================================================
   LAYOUT, het kaartje en de stubs
   ==================================================================== */
.ticket{
  max-width: var(--stage);
  margin-inline: auto;
  position: relative;
  padding-inline: var(--rail-x) var(--page-pad-r);
}

.stub{ position: relative; padding-block: var(--sec-pad); }
.stub--hero{ padding-top: clamp(28px, 5vw, 56px); }

/* perforatie tear-line tussen de stubs + geponste eyelet bij de rail */
.ticket > .stub + .stub::before,
.ticket > .band + .stub::before,
.ticket > .stub + .band::before{
  content:""; position:absolute; top:0;
  left: calc(-1 * var(--rail-x) + 6px); right: calc(-1 * var(--page-pad-r) + 6px);
  height:2px;
  background:
    radial-gradient(circle at center, var(--chrome) 0 1px, transparent 1.4px) repeat-x,
    radial-gradient(circle at center, var(--perf-dot) 0 1px, transparent 1.4px) repeat-x;
  background-size: 12px 2px;
  opacity:.9;
}
.ticket > .stub + .stub::after,
.ticket > .band + .stub::after{
  content:""; position:absolute; top:-7px; left: calc(-1 * var(--rail-x) - 1px);
  width:14px; height:14px; border-radius:999px; background: var(--cream);
  box-shadow: 0 0 0 1px var(--chrome-lo), inset 0 1px 0 var(--chrome-hi);
}

/* route-label (bestemmingsregel) */
.route{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin:0 0 clamp(20px,3vw,36px);
  letter-spacing:.16em; font-weight:600; font-size:.875rem;
  color: var(--teal-ink);
}
.route__dot{ width:11px; height:11px; border-radius:999px; background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-deep); flex:0 0 auto; }
.route__no{ color: var(--teal-rail); }
.route__no::after{ content:"·"; margin-left:.7rem; color: var(--chrome-lo); }
.route__name{ color: var(--teal-ink); }
.route--eind .route__no{ color: var(--teal-ink); }

.stub__intro{
  max-width: 56ch; color: var(--teal-ink);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  margin-bottom: clamp(24px, 4vw, 44px);
}

/* ====================================================================
   ROUTE-RAIL (desktop) + TOPLINE (mobiel)
   ==================================================================== */
.topline{ position: fixed; inset: 0 0 auto 0; height:3px; z-index:60;
  background: var(--chrome); display:none; }
.topline__fill{ display:block; height:100%; width: calc(var(--progress, 0) * 100%);
  background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }

.routerail{
  position: fixed; z-index:40;
  left: calc((100vw - min(100vw, var(--stage))) / 2 + 14px);
  top: 17vh; height: 66vh; width: 30px;
  margin:0; padding:0;
}
.routerail__line, .routerail__fill{
  position:absolute; left:14px; top:0; bottom:0; width:1px;
}
.routerail__line{ background: var(--chrome);
  box-shadow: 1px 0 0 var(--chrome-lo), -1px 0 0 var(--chrome-hi); }
.routerail__fill{ bottom:auto; height: calc(var(--progress, 0) * 100%);
  background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
.routerail__stops{ position:absolute; inset:0; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; justify-content:space-between; }
.routerail__dot{
  position:relative; display:block; width:14px; height:14px; margin-left:8px;
  border-radius:999px; background: var(--cream);
  box-shadow: 0 0 0 1px var(--chrome-lo), inset 0 1px 0 var(--chrome-hi);
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.routerail__dot::after{ content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform: translate(-50%, -50%); } /* WCAG-trefvlak, disc blijft 14px */
.routerail__dot:hover{ transform: scale(1.12); }
.routerail__dot.is-active{
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-deep), 0 0 10px var(--amber-glow);
}
.routerail__tip{
  position:absolute; left:26px; top:50%; transform: translateY(-50%);
  white-space:nowrap; font-family: var(--f-sign); text-transform:uppercase;
  font-size:.74rem; letter-spacing:.12em; font-weight:600; color: var(--teal-ink);
  background: var(--cream); padding:.2rem .5rem; border-radius:6px;
  box-shadow: 0 0 0 1px var(--chrome);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
}
.routerail__dot:hover .routerail__tip,
.routerail__dot:focus-visible .routerail__tip,
.routerail__dot.is-active .routerail__tip{ opacity:1; }

/* ====================================================================
   HERO + BESTEMMINGSBORD
   ==================================================================== */
.hero{ display:grid; gap: clamp(28px, 4vw, 52px); align-items:center;
  grid-template-columns: 1fr; }
.wordmark{ font-size:.8125rem; letter-spacing:.22em; font-weight:600;
  color: var(--teal-rail); margin:0 0 1.4rem; }
.eyebrow{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.8125rem; letter-spacing:.14em; font-weight:600; color: var(--teal-rail);
  margin:0 0 1.1rem; }
.eyebrow__tab{ background: var(--seafoam); color: var(--teal-ink);
  padding:.28rem .6rem; border-radius:6px; box-shadow: 0 0 0 1px var(--seafoam-deep) inset; }

/* het bord */
.blind{ max-width: 640px; }
.blind__bezel{
  padding:9px; border-radius: calc(var(--r-bezel) + 6px);
  background: linear-gradient(150deg, var(--chrome-hi), var(--chrome) 45%, var(--chrome-lo));
  box-shadow: 0 0 0 1px var(--chrome-lo), inset 0 1px 0 var(--chrome-hi);
}
.blind__window{
  --blind-fs: clamp(1.9rem, 6vw, 4rem);
  --slot: calc(var(--blind-fs) * 2.4);
  position:relative; height: var(--slot); overflow:hidden;
  border-radius: var(--r-bezel); background: var(--housing);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.18);
}
.blind__strip{
  display:flex; flex-direction:column;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    var(--seafoam-deep);
  transform: translateY(calc(var(--slot) * -3));  /* basis = ingerold op de eindregel */
}
.blind__line{
  height: var(--slot); margin:0; display:flex; align-items:center;
  padding: 0 clamp(.7rem, 2vw, 1.3rem);
  font-family: var(--f-sign); font-weight:700; text-transform:uppercase;
  font-size: var(--blind-fs); line-height:.98; letter-spacing:.05em;
  color: var(--cream);
}
.blind__line--final{ font-weight:700; }
.blind__glow{ position:absolute; inset:0; border-radius: var(--r-bezel); pointer-events:none;
  box-shadow: inset 0 0 24px var(--amber-glow); }
.blind__sweep{ position:absolute; top:0; bottom:0; left:-45%; width:45%; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(224,153,46,.16), transparent); opacity:0; }
.blind__route{ margin:.9rem 0 0; font-size:.84rem; letter-spacing:.16em; font-weight:600;
  color: var(--teal-rail); }

/* roll-animatie (additief bovenop de ingerolde basistoestand) */
.blind.is-rolling .blind__strip{ transform: translateY(0); transition:none; }
.blind.is-rolling .blind__glow{ opacity:0; }
.blind.is-rolling.is-go .blind__strip{
  transform: translateY(calc(var(--slot) * -3));
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
}
.blind.is-rolling.is-go .blind__glow{ opacity:1; transition: opacity .3s ease .66s; }
.blind.is-rolling.is-go .blind__sweep{ animation: blind-sweep .5s ease .52s 1; }
@keyframes blind-sweep{ from{ left:-45%; opacity:1; } to{ left:110%; opacity:0; } }

.hero__lead{
  font-family: var(--f-disp); font-style: normal; font-weight:400;
  font-variation-settings: 'opsz' 110;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height:1.35; color: var(--teal-ink);
  max-width: 30ch; margin: clamp(20px,3vw,30px) 0 clamp(22px,3vw,32px);
}
.hero__actions{ display:flex; align-items:center; gap:.9rem 1rem; flex-wrap:wrap; }

.hero__photo{ position:relative; border-radius: var(--r-img) 0 0 var(--r-img);
  overflow:hidden; box-shadow: 0 0 0 1px var(--chrome);
  margin-right: calc(-1 * var(--bleed-r)); }
.hero__photo img{ width:100%; height:100%; object-fit:cover;
  filter: saturate(1.02) contrast(1.02); }
.hero__photo-tick, .shot__tick{ position:absolute; inset:8px; pointer-events:none;
  border-radius: 8px;
  background:
    linear-gradient(var(--chrome-hi),var(--chrome-hi)) left 0 top 0 / 14px 1px no-repeat,
    linear-gradient(var(--chrome-hi),var(--chrome-hi)) left 0 top 0 / 1px 14px no-repeat,
    linear-gradient(var(--chrome-hi),var(--chrome-hi)) right 0 bottom 0 / 14px 1px no-repeat,
    linear-gradient(var(--chrome-hi),var(--chrome-hi)) right 0 bottom 0 / 1px 14px no-repeat;
  opacity:.0; transition: opacity .2s ease; }
.hero__photo-tick{ opacity:.5; }

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.92rem;
  padding:.85rem 1.5rem; min-height:44px; border-radius: var(--r-button); border:0; cursor:pointer;
  text-decoration:none; line-height:1; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn--primary{ background: var(--amber); color: var(--teal-ink);
  box-shadow: 0 0 0 1px var(--amber-deep); }
.btn--primary:hover{ background: #ECA73E; transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--teal-ink);
  box-shadow: inset 0 0 0 1px var(--chrome-lo); }
.btn--ghost:hover{ box-shadow: inset 0 0 0 1px var(--teal-ink); transform: translateY(-1px); }
.plate{
  font-weight:600; letter-spacing:.18em; font-size:.9rem; color: var(--cream);
  background: var(--housing); padding:.5rem .75rem; border-radius:6px;
  box-shadow: 0 0 0 2px var(--chrome), 0 0 0 3px var(--chrome-lo);
}

/* ====================================================================
   ROUTE 02 · HET IDEE
   ==================================================================== */
.stub--idee{ }
.idee{ display:grid; grid-template-columns: 1fr; gap: clamp(20px,3vw,30px); }
.lead{
  font-family: var(--f-disp); font-weight:400; font-variation-settings:'opsz' 120;
  font-size: clamp(1.5rem, 3vw, 2.2rem); line-height:1.28; color: var(--teal-ink);
  max-width: 22ch; margin:0;
}
.idee__body{ max-width: 60ch; justify-self:end; }
.idee__body p{ margin:0 0 1rem; }
.pullquote{
  font-family: var(--f-disp); font-style: italic; font-weight:400;
  font-variation-settings:'opsz' 90;
  font-size: clamp(1.7rem, 4vw, 2.9rem); line-height:1.18; letter-spacing:-.01em;
  color: var(--seafoam-deep); margin: clamp(10px,2vw,20px) 0 0; max-width: 18ch;
  position:relative; padding-left: 1.1em;
}
.pullquote::before{ content:"\201C"; position:absolute; left:-.05em; top:-.08em;
  color: var(--amber-deep); font-size:1.5em; line-height:1; }

.t2-divider{ display:flex; justify-content:center; color: var(--chrome-lo);
  margin-top: clamp(36px,5vw,64px); }
.t2-divider svg{ width: clamp(160px, 24vw, 240px); height:auto; }

/* ====================================================================
   ROUTE 03 · DE BUS, mozaïek (kolom-masonry)
   ==================================================================== */
.mosaic{ list-style:none; margin:0; padding:0; columns: 4; column-gap: 12px; }
.shot{ break-inside: avoid; margin:0 0 12px; }
.shot__btn{
  display:block; width:100%; padding:0; border:0; cursor:pointer; position:relative;
  background: var(--seafoam-guide); border-radius: var(--r-img); overflow:hidden;
  box-shadow: 0 0 0 1px var(--chrome);
}
.shot__btn img{ width:100%; height:auto; transition: transform .4s ease, filter .3s ease;
  filter: saturate(1.02); }
.shot__btn:hover img{ transform: scale(1.035); }
.shot__btn:hover .shot__tick{ opacity:.7; }

/* ====================================================================
   ROUTE 04 · ZO WERKT HET, haltes (trap langs de rail)
   ==================================================================== */
.haltes{ list-style:none; margin:0; padding:0; display:grid; gap: clamp(14px,2vw,22px);
  counter-reset: halte; max-width: 880px; }
.halte{ display:grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; align-items:start;
  background: var(--cream-band); border-radius: var(--r-stub); padding: clamp(16px,2.5vw,24px);
  box-shadow: 0 0 0 1px var(--chrome); }
.halte:nth-child(even){ margin-left: clamp(0px, 6vw, 64px); }
.halte__no{
  width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family: var(--f-sign); font-weight:700; font-size:1.25rem; color: var(--teal-ink);
  background: var(--cream);
  box-shadow: 0 0 0 1px var(--chrome-lo), inset 0 1px 0 var(--chrome-hi);
}
.halte__label{ font-family: var(--f-sign); text-transform:uppercase; font-weight:600;
  letter-spacing:.1em; font-size:.95rem; color: var(--teal-ink); margin:.1rem 0 .4rem; }
.halte__body p:last-child{ margin:0; }

/* ====================================================================
   FOTOBAND (rustmoment, full-bleed)
   ==================================================================== */
.band{ position:relative; margin-inline: calc(-1 * var(--rail-x)) calc(-1 * var(--bleed-r));
  height: clamp(240px, 38vw, 460px); overflow:hidden; }
.band picture, .band img{ width:100%; height:100%; }
.band img{ object-fit:cover; object-position:center 62%; filter: saturate(1.02) brightness(.96); }
.band__caption{ position:absolute; left: var(--rail-x); bottom: clamp(16px,3vw,28px);
  margin:0; color: var(--cream); font-family: var(--f-sign); text-transform:uppercase;
  letter-spacing:.16em; font-weight:600; font-size: clamp(.9rem,2vw,1.15rem);
  text-shadow: 0 1px 12px rgba(0,0,0,.5); }

/* ====================================================================
   ROUTE 05 · WAT KRIJG JE MEE, twee kolommen
   ==================================================================== */
.board{ display:grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(20px,4vw,48px);
  align-items:start; }
.board__divider, .board > .board__col + .board__col{ }
.board::before{ content:""; grid-column:2; grid-row:1; align-self:stretch; width:1px;
  background: var(--chrome); box-shadow: 1px 0 0 var(--chrome-lo), -1px 0 0 var(--chrome-hi); }
.board__col:first-child{ grid-column:1; }
.board__col:last-child{ grid-column:3; }
.board__head{ font-family: var(--f-sign); text-transform:uppercase; font-weight:600;
  letter-spacing:.14em; font-size:1.05rem; color: var(--teal-ink); margin:0 0 1rem;
  padding-bottom:.6rem; }
.board__sub{ color: var(--teal-rail); font-weight:500; }
.board__list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.board__list li{ position:relative; padding-left:1.7rem; }
.board__list--in li::before{ content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:999px; background: var(--seafoam);
  box-shadow: 0 0 0 1px var(--seafoam-deep); }
.board__list--cond li::before{ content:""; position:absolute; left:.1rem; top:.46em;
  width:10px; height:2px; background: var(--amber-deep); }
.board__note{ display:block; color: var(--teal-caption); font-size:.875rem; line-height:1.5;
  margin-top:.15rem; }

/* ====================================================================
   ROUTE 06 · WAT HET KOST, fare-card
   ==================================================================== */
.tarieven__claim{ font-family: var(--f-disp); font-style:italic; font-weight:400;
  font-variation-settings:'opsz' 90; font-size: clamp(1.4rem,3vw,2rem); color: var(--seafoam-deep);
  margin:0 0 .5rem; }
.fares{ display:grid; gap:0; border-radius: var(--r-stub); overflow:hidden;
  box-shadow: 0 0 0 1px var(--chrome); background: var(--cream-band); max-width: 880px; }
.fare{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:.6rem 1.2rem;
  padding: clamp(16px,2.4vw,22px) clamp(16px,2.4vw,26px); }
.fare + .fare{ border-top:1px dashed var(--chrome); }
.fare--lead{ background: var(--seafoam-guide); }
.fare__name{ font-family: var(--f-sign); text-transform:uppercase; font-weight:600;
  letter-spacing:.08em; font-size:1.05rem; color: var(--teal-ink); margin:0; grid-column:1; }
.fare__desc{ grid-column:1; margin:.15rem 0 0; font-family: var(--f-body); text-transform:none;
  font-size:.95rem; color: var(--teal-caption); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.fare__pill{ font-family: var(--f-sign); text-transform:uppercase; font-weight:600;
  letter-spacing:.08em; font-size:.72rem; color: var(--teal-ink); background: var(--amber);
  padding:.22rem .55rem; border-radius:999px; box-shadow: 0 0 0 1px var(--amber-deep); }
.fare__price{ grid-column:2; grid-row: 1 / span 2; align-self:center;
  font-family: var(--f-sign); font-weight:600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--teal-ink); margin:0; white-space:nowrap; }
.fare__cur{ color: var(--teal-rail); font-size:.7em; margin-right:.12em; }
.fares__note{ margin:1rem 0 1.6rem; color: var(--teal-caption); font-size:.9rem; max-width: 60ch; }

/* ====================================================================
   EINDHALTE · CONTACT
   ==================================================================== */
.contact__claim{ font-family: var(--f-disp); font-style:normal; font-weight:400;
  font-variation-settings:'opsz' 120; font-size: clamp(1.6rem,3.2vw,2.4rem); color: var(--teal-ink);
  margin:0 0 .4rem; }
.contact__grid{ display:grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,48px);
  align-items:start; max-width: 980px; }
.aanvraag{ display:grid; gap: clamp(14px,2vw,18px); }
.field{ display:grid; gap:.35rem; }
.field label{ font-family: var(--f-sign); text-transform:uppercase; font-weight:500;
  letter-spacing:.12em; font-size:.8125rem; color: var(--teal-rail); }
.field input, .field textarea{
  font-family: var(--f-body); font-size:1rem; color: var(--teal-ink);
  background: var(--cream); border:0; border-radius:10px; padding:.8rem .9rem;
  box-shadow: inset 0 0 0 1px var(--chrome-lo); width:100%;
}
.field textarea{ resize: vertical; min-height: 7rem; }
.field input:hover, .field textarea:hover{ box-shadow: inset 0 0 0 1px var(--teal-rail); }
.field--invalid input, .field--invalid textarea{ box-shadow: inset 0 0 0 2px var(--amber-deep); }
.field__err{ font-size:.85rem; color: var(--teal-ink); font-weight:500; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* het submit-bord */
.btn--blind{
  justify-self:start; background: var(--amber); color: var(--teal-ink);
  box-shadow: 0 0 0 1px var(--amber-deep), 0 0 0 4px var(--cream-band), 0 0 0 5px var(--chrome);
  padding:.95rem 1.6rem; font-size:1rem;
}
.btn--blind:hover{ background:#ECA73E; transform: translateY(-1px); }
.btn--blind.is-sent{ background: var(--amber); box-shadow: 0 0 0 1px var(--amber-deep), 0 0 14px var(--amber-glow); }
.aanvraag__status{ margin:.3rem 0 0; min-height:1.2em; font-size:.95rem; color: var(--teal-rail); }
.aanvraag__status.is-error{ color: var(--teal-ink); font-weight:500; }

.contact__direct{ background: var(--cream-band); border-radius: var(--r-stub);
  padding: clamp(20px,3vw,28px); box-shadow: 0 0 0 1px var(--chrome); }
.contact__direct-head{ font-family: var(--f-sign); text-transform:uppercase; font-weight:600;
  letter-spacing:.12em; font-size:.85rem; color: var(--teal-rail); margin:0 0 .8rem; }
.contact__mail{ font-family: var(--f-body); font-size:1.1rem; font-weight:500; word-break:break-word; }
.contact__phone{ margin:.6rem 0 0; }
.contact__where{ margin:.9rem 0 0; font-family: var(--f-sign); text-transform:uppercase;
  letter-spacing:.1em; font-size:.8rem; color: var(--teal-rail); }
.contact__soon{ font-family: var(--f-sign); text-transform:uppercase; letter-spacing:.08em;
  font-size:.9em; color: var(--teal-rail); }
.contact__note{ margin:1rem 0 0; font-size:.85rem; color: var(--teal-caption); line-height:1.5; }
.placeholder{ font-family: var(--f-sign); text-transform:uppercase; letter-spacing:.08em;
  font-size:.92em; color: var(--teal-ink); background: var(--cream);
  padding:.05em .4em; border-radius:5px; border:1px dashed var(--amber-deep); }

/* ====================================================================
   FOOTER · achterplaat
   ==================================================================== */
.footer{ background: var(--housing); color: var(--cream); margin-top: clamp(40px,6vw,80px); }
.footer__inner{ max-width: var(--stage); margin-inline:auto;
  padding: clamp(36px,5vw,56px) var(--page-pad-r) clamp(36px,5vw,56px) var(--rail-x);
  position:relative; display:grid; gap:1rem; }
.footer__eind{ font-family: var(--f-sign); text-transform:uppercase; letter-spacing:.14em;
  font-weight:600; font-size:.95rem; margin:0; }
.footer__eind a{ color: var(--seafoam-lit); text-decoration-color: var(--amber); }
.footer__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0;
  font-family: var(--f-sign); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem;
  color: var(--seafoam-guide); }
.footer__name{ color: var(--cream); }
.footer__note{ margin:0; font-family: var(--f-body); text-transform:none; font-size:.85rem;
  color: var(--seafoam-guide); max-width: 60ch; }
.footer__links{ margin:0; }
.footer__links a{ color: var(--seafoam-lit); font-size:.85rem; }
.footer__plate{ position:absolute; right: var(--page-pad-r); top: clamp(36px,5vw,56px);
  font-family: var(--f-sign); font-weight:600; letter-spacing:.2em; font-size:1rem; color: var(--housing);
  background: var(--cream); padding:.45rem .7rem; border-radius:6px;
  box-shadow: 0 0 0 2px var(--chrome-lo); }

/* ====================================================================
   LIGHTBOX
   ==================================================================== */
.lightbox{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding: clamp(16px,4vw,56px); }
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{ position:absolute; inset:0; background: rgba(21,48,46,0.92);
  backdrop-filter: blur(2px); }
.lightbox__figure{ position:relative; margin:0; max-width: min(1100px, 92vw); max-height: 86vh;
  display:flex; flex-direction:column; gap:.6rem; z-index:1; }
.lightbox__img{ max-width:100%; max-height: 78vh; width:auto; height:auto; margin:0 auto;
  border-radius: var(--r-img); box-shadow: 0 0 0 1px var(--chrome), 0 0 0 8px rgba(242,234,216,.06); background: var(--housing); }
.lightbox__bar{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; color: var(--cream); }
.lightbox__count{ font-family: var(--f-sign); text-transform:uppercase; letter-spacing:.16em;
  font-weight:600; font-size:.85rem; color: var(--amber); }
.lightbox__alt{ font-family: var(--f-body); font-size:.9rem; color: var(--seafoam-guide); }
.lightbox__btn{ position:absolute; z-index:2; width:48px; height:48px; border-radius:999px;
  border:0; cursor:pointer; color: var(--cream); background: rgba(21,48,46,.7);
  box-shadow: 0 0 0 1px var(--chrome-lo); display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .12s ease; }
.lightbox__btn:hover{ background: var(--seafoam-deep); transform: scale(1.05); }
.lightbox__btn svg{ width:24px; height:24px; }
.lightbox__btn--prev{ left: clamp(8px,2vw,24px); top:50%; transform: translateY(-50%); }
.lightbox__btn--next{ right: clamp(8px,2vw,24px); top:50%; transform: translateY(-50%); }
.lightbox__btn--prev:hover, .lightbox__btn--next:hover{ transform: translateY(-50%) scale(1.05); }
.lightbox__btn--close{ top: clamp(8px,2vw,24px); right: clamp(8px,2vw,24px); }
body.lb-open{ overflow:hidden; }

/* ====================================================================
   FOCUS-VISIBLE (chroom-bezel motief)
   ==================================================================== */
:where(a, button, input, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(191,197,197,0.6);
}
.btn--primary:focus-visible, .btn--blind:focus-visible{ outline-color: var(--teal-ink); }
.lightbox__btn:focus-visible, .footer a:focus-visible{ outline-color: var(--seafoam-lit);
  box-shadow: 0 0 0 4px rgba(166,199,204,.4); }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (min-width: 860px){
  .hero{ grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .hero__deck{ padding-right: clamp(0px, 2vw, 24px); }
  .hero__photo{ align-self:stretch; min-height: 460px; }
  .contact__grid{ grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 980px){
  .routerail{ display:none; }
  .topline{ display:block; }
  .ticket > .stub + .stub::after,
  .ticket > .band + .stub::after{ display:none; }
}
@media (max-width: 720px){
  .mosaic{ columns: 2; column-gap: 10px; }
  .shot{ margin-bottom:10px; }
  .idee__body{ justify-self:auto; }
  .halte:nth-child(even){ margin-left:0; }
  .board{ grid-template-columns: 1fr; }
  .board::before{ display:none; }
  .board__col:last-child{ grid-column:1; border-top:1px dashed var(--chrome); padding-top: clamp(16px,4vw,24px); }
  .fare{ grid-template-columns: 1fr auto; }
}
@media (max-width: 460px){
  .mosaic{ columns: 1; }
  .hero__actions{ gap:.7rem; }
  .hero__actions .plate{ order:3; }
  .btn{ width:100%; }
  .hero__actions .plate{ width:auto; }
}

/* ====================================================================
   PREFERS-REDUCED-MOTION, basis is al de eindtoestand; alleen extra's uit
   ==================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .blind.is-rolling .blind__strip{ transform: translateY(calc(var(--slot) * -3)); }
  .blind.is-rolling .blind__glow{ opacity:1; }
  .blind__sweep{ display:none; }
}

/* ====================================================================
   LEGAL (privacy.html)
   ==================================================================== */
.legal{ max-width: 70ch; padding-block: clamp(40px,6vw,80px); }
.legal .back{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-sign);
  text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:600;
  color: var(--teal-rail); text-decoration:none; margin-bottom: clamp(20px,3vw,32px); }
.legal .back:hover{ color: var(--teal-ink); }
.legal h1{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.04em;
  font-weight:700; font-size: clamp(2rem,5vw,3rem); color: var(--teal-ink); margin:0 0 1.2rem; }
.legal h2{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; font-size:1.05rem; color: var(--teal-rail); margin: 2rem 0 .5rem; }
.legal p{ margin:0 0 1rem; }
.legal ul{ margin:0 0 1rem; padding-left:1.3rem; }
.legal li{ margin:.3rem 0; }
.legal .updated{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem; color: var(--teal-caption); margin-top: 2rem; }