/* WOFF2 made from the .ttf next to them (fontTools); the two Texte fonts are preloaded in every page's head */
  @font-face { font-family: "Cossette Texte"; src: url("fonts/CossetteTexte-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Cossette Texte"; src: url("fonts/CossetteTexte-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
  @font-face { font-family: "Cossette Titre"; src: url("fonts/CossetteTitre-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

  /* Tokens from the Figma venue rider (k1 copy, node 3442:17622) */
  :root {
    --dark: #2e2e2e;
    --light: #d7d7d7;
    --panel: #e6e6e6;
    --dark-800: #585858;
    --blue: #7dbeff;
    --pink: #ff7daf;
    --green: #75ea90;
    --yellow: #eac775;
    --line: 2px solid var(--dark);
    --radius: 20px;          /* rider radius/large 16.19, scaled for web */
    --gap: clamp(16px, 2vw, 24px);
    --gutter: clamp(16px, 4vw, 48px);
    --texte: "Cossette Texte", system-ui, sans-serif;
    --titre: "Cossette Titre", "Cossette Texte", system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  /* Dark canvas: any blank frame between pages matches the dark bar and header instead of flashing light */
  html { background: var(--dark); }
  /* main carries its own light background, so it keeps its colour while it slides during a page transition */
  main { background: var(--light); }
  body { margin: 0; background: var(--light); color: var(--dark); font-family: var(--texte); font-size: 18px; line-height: 1.35; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }
  section { padding-block: clamp(56px, 8vw, 112px); }

  /* Section title: the rider's "gietijzer | page" header */
  .title { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
  .title h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
  .title p { margin: 0; max-width: 42ch; }

  /* nav_button */
  .btn { display: inline-flex; align-items: center; height: 54px; padding: 0 23px; border-radius: 8px; border: 0; background: var(--blue); color: var(--dark); font: 700 20px/1 var(--texte); letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
  .btn.pink { background: var(--pink); }
  .btn.grey { background: var(--panel); }
  .btn.small { height: 42px; padding: 0 16px; font-size: 17px; }
  .btn:hover { filter: brightness(1.07); }

  /* header_wrap + Table */
  /* Box title: h2 for a box right under the page title, h3 for one under a section title */
  .block > :is(h2, h3) { margin: 0; color: var(--dark); padding: 10px 12px; border: var(--line); border-radius: var(--radius) var(--radius) 0 0; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
  :is(.block > h2, .block > h3, .page-hero h1)::first-letter { text-transform: uppercase; }
  .blue > :is(h2, h3) { background: var(--blue); }
  .pink > :is(h2, h3) { background: var(--pink); }
  .green > :is(h2, h3) { background: var(--green); }
  .yellow > :is(h2, h3) { background: var(--yellow); }
  .block dl { margin: 0; display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); border-left: var(--line); }
  .block dt, .block dd { margin: 0; padding: 12px 14px; border-right: var(--line); border-bottom: var(--line); font-size: 15px; line-height: 1.3; }
  .block dt { font-family: var(--titre); font-weight: 700; font-size: 13px; text-transform: uppercase; }
  .block dd b { font-weight: 700; }

  .ico { width: 18px; aspect-ratio: 1; background: currentColor; flex: none; }
  .ico.loc { -webkit-mask: url("assets/location.svg") center / contain no-repeat; mask: url("assets/location.svg") center / contain no-repeat; }
  .ico.mail { -webkit-mask: url("assets/email.svg") center / contain no-repeat; mask: url("assets/email.svg") center / contain no-repeat; }
  /* Brand marks (Simple Icons), drawn a little smaller to match the Material icons optically */
  .ico.ig { -webkit-mask: url("assets/instagram.svg") center / 80% no-repeat; mask: url("assets/instagram.svg") center / 80% no-repeat; }
  .ico.li { -webkit-mask: url("assets/linkedin.svg") center / 80% no-repeat; mask: url("assets/linkedin.svg") center / 80% no-repeat; }


  /* Top bar */
  /* Menu: a floating dark pill in the rider-table style, aligned with the page content */
  .bar { position: fixed; inset: 0 0 auto; z-index: 10; padding-top: 16px; color: var(--light); pointer-events: none; }
  .pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px; background: var(--dark); border: 2px solid var(--dark-800); border-radius: 12px; }
  .bar .mark { max-width: 160px; overflow: hidden; white-space: nowrap; padding: 0 12px 0 8px; font-weight: 700; font-size: 26px; letter-spacing: -0.04em; text-decoration: none; transition: max-width .4s cubic-bezier(0.22, 1, 0.36, 1), padding .4s cubic-bezier(0.22, 1, 0.36, 1), margin .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease; }
  /* Homepage: no small logo while the big wordmark is in view (site.js toggles .over-hero) */
  .bar.over-hero .mark { max-width: 0; padding: 0; margin-right: -6px; opacity: 0; } /* negative margin cancels its gap */
  .bar nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 18px; }
  .bar nav a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; transition: background-color .2s ease; }
  .bar nav a:hover, .bar nav a[aria-current] { background: var(--dark-800); }
  .bar details { display: none; }

  /* Hero: rider cover, widened */
  /* Header at 80% of the screen: wordmark, rotating line and buttons grouped at the bottom */
  .hero { position: relative; isolation: isolate; min-height: 80svh; display: flex; flex-direction: column; background: var(--dark); color: var(--light); padding: calc(88px + clamp(16px, 3vw, 40px)) 0 0; }
  .hero-stage { flex: 1; display: flex; flex-direction: column; }
  .hero-stage > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; }
  .wordmark { margin: 0 0 0.3em -0.03em; font-weight: 700; font-size: clamp(56px, min(11.25vw, 16svh), 165px); line-height: 0.82; letter-spacing: -0.04em; }
  .mark, .wordmark { font-feature-settings: "locl" 0; } /* the font's Dutch ij form spreads the logo; keep the English shape on both sites */
  .hero-row { padding: 16px 0 clamp(32px, 4vw, 56px); }
  .hero h1 { margin: 0 0 16px; font-size: clamp(44px, min(7vw, 10svh), 112px); line-height: 0.9; letter-spacing: -0.035em; }
  .hero .lede { margin: 0 0 28px; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.03em; max-width: 40ch; }
  .actions { display: flex; gap: 12px; flex-wrap: wrap; }
  :is(.hero, .page-hero) .block dl, :is(.hero, .page-hero) .block dt, :is(.hero, .page-hero) .block dd { border-color: var(--dark-800); }
  :is(.hero, .page-hero, .events) .block dl { background: var(--dark); }
  .block dl { background: var(--light); }
  :is(.hero, .page-hero) .block dd { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
  /* Header video (video-hero.js): the incoming clip fades in sharp while the outgoing one blurs away */
  .hero-stage > .wrap { position: relative; z-index: 1; }
  .video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--dark); }
  /* Still image for visitors who get no video (reduced motion, data saver) */
  .video-bg::before { content: ""; position: absolute; inset: 0; background: var(--still, none) center / cover no-repeat; }
  .video-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; opacity: 0; filter: blur(20px); transform: scale(1.06); transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .video-bg video.on { visibility: visible; opacity: 1; filter: none; transform: none; }
  .video-bg video.off { visibility: visible; opacity: 1; } /* hidden until revealed: Safari can paint a buffering video despite opacity 0 */
  /* Keep the wordmark and copy readable over the video */
  .video-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(46 46 46 / .6) 0, transparent 160px), linear-gradient(0deg, rgb(46 46 46 / .92) 0%, rgb(46 46 46 / .5) 50%, transparent 85%) rgb(46 46 46 / .35); }
  .hero-photo { width: 100%; height: clamp(280px, 48vw, 640px); object-fit: cover; }

  /* Intro */
  .intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
  .panel { background: var(--panel); padding: clamp(20px, 2.4vw, 32px); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
  .panel p { margin: 0 0 1em; max-width: 52ch; }
  /* A text panel inside a block continues the block's outline, so header, text and facts read as one card */
  .block > .panel { border-left: var(--line); border-right: var(--line); }
  .block > .panel:last-child { border-bottom: var(--line); }
  /* Key facts: grey blocks like the setup tiles, each one readable statement */
  .facts { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .facts li { background: var(--panel); min-height: 120px; padding: 20px 24px; display: flex; align-items: flex-end; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
  .panel p:last-child { margin: 0; }
  .intro img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

  /* Room cards */
  .rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
  .room { display: flex; flex-direction: column; align-items: flex-start; }
  .room > .block { align-self: stretch; }
  .room > p { flex: 1; }
  .room img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
  /* Small cards ("Andere ruimtes"): the name tab sits directly on the photo */
  .room .block > img { margin: 0; }
  /* Map on the contact page, between the "bereikbaarheid" tab and its table */
  .map-embed { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-inline: var(--line); border-bottom: var(--line); background: var(--panel); }  .room p { margin: 14px 0 16px; font-size: 17px; }

  /* Events: dark band from rider page 11 */
  .events { background: var(--dark); color: var(--light); padding-block: 0; }
  .events .inner { padding-block: clamp(56px, 7vw, 96px); }
  /* Event tiles (generated by tools/build.py): the event's photo with the text on a solid band below it; each links to its page */
  /* Each tile spans two grid rows (photo, text band); subgrid makes the bands in one row equally tall */
  .ev-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px auto; gap: 12px; }
  .ev-tile { --c: var(--light); position: relative; overflow: hidden; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; background: #383838; color: var(--light); text-decoration: none; }
  .ev-tile.blue { --c: var(--blue); } .ev-tile.pink { --c: var(--pink); } .ev-tile.green { --c: var(--green); } .ev-tile.yellow { --c: var(--yellow); }
  .ev-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .ev-tile > span { position: relative; display: block; padding: 16px 24px 20px; background: #383838; } /* above the zooming photo */
  /* The event's colour as a bar along the bottom, shown on hover and keyboard focus */
  .ev-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
  .ev-tile b { display: block; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.03em; }
  .ev-tile small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.3; color: #cfcfcf; }
  .ev-tile:is(:hover, :focus-visible) img { transform: scale(1.04); }
  .ev-tile:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .ev-tile img, .ev-tile::after { transition: none; } }

  /* Tiles: rider page 12 */
  .tile { background: var(--panel); min-height: 170px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
  .tile small { font-size: 15px; margin-bottom: 4px; }
  .tile b { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; letter-spacing: -0.03em; }

  /* Photo strip */
  /* Photo strip: scrolls by itself in an endless loop (the photos are in it twice), pauses on hover */
  .strip { overflow: hidden; padding-bottom: 8px; }
  .strip-track { display: flex; gap: 12px; width: max-content; animation: strip-scroll 60s linear infinite; }
  .strip:hover .strip-track { animation-play-state: paused; }
  .strip img { height: clamp(220px, 28vw, 380px); width: auto; aspect-ratio: 3 / 2; object-fit: cover; flex: none; }
  /* Half the track plus one gap is exactly one set of photos */
  /* Language switch (site.js): the content blurs out while the NL/EN highlight slides, the new language
     blurs in. Whole blocks blur (text and borders together) so it stays a few GPU layers, not a repaint per
     letter; section backgrounds, the header video and the NL/EN switches stay put */
  .lang-out :is(#kop .wrap, main > section > *, main > .strip, footer .wrap > :not(.foot-bottom), .foot-bottom small, .pill nav, .pill > .btn) { opacity: 0; filter: blur(6px); transform: translateY(-6px); transition: opacity .25s ease, filter .25s ease, transform .25s ease; }
  .lang-in :is(#kop .wrap, main > section > *, main > .strip, footer .wrap > :not(.foot-bottom), .foot-bottom small, .pill nav, .pill > .btn) { animation: lang-in .5s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes lang-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) { .lang-out :is(#kop .wrap, main > section > *, main > .strip, footer .wrap > :not(.foot-bottom), .foot-bottom small, .pill nav, .pill > .btn), .lang-in :is(#kop .wrap, main > section > *, main > .strip, footer .wrap > :not(.foot-bottom), .foot-bottom small, .pill nav, .pill > .btn) { opacity: 1; filter: none; transform: none; transition: none; animation: none; } }
  @keyframes strip-scroll { to { transform: translateX(calc(-50% - 6px)); } }

  /* Contact */
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
  .contact .panel { display: flex; flex-direction: column; gap: 20px; }
  .contact .big { margin: 0; font-size: clamp(48px, 7vw, 104px); font-weight: 700; line-height: 0.9; letter-spacing: -0.045em; }
  .contact address { font-style: normal; display: grid; gap: 8px; }
  .contact address a, .contact address span { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }

  /* Footer: wordmark, then three columns in the rider-table style */
  footer { background: var(--dark); color: var(--light); }
  footer .wrap { padding-block: clamp(48px, 6vw, 80px) 24px; }
  footer .mark { margin: 0 0 0.5em -0.03em; font-weight: 700; font-size: clamp(64px, 12vw, 180px); line-height: 0.82; letter-spacing: -0.04em; }
  /* Wordmark with the contact block beside it (stacked on phones) */
  .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
  /* Same as the "Direct contact" panel on the contact page, in the footer's dark tone */
  .foot-contact { flex: 0 1 420px; margin-bottom: 28px; background: rgb(255 255 255 / .07); }
  .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--dark-800); }
  .foot-cols > div { padding: 20px 20px 28px; border-left: 2px solid var(--dark-800); }
  .foot-cols > div:first-child { border-left: 0; padding-left: 0; }
  .foot-cols h2 { margin: 0 0 14px; font-family: var(--titre); font-weight: 700; font-size: 13px; text-transform: uppercase; color: #a9a9a9; }
  .foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 20px; }
  .foot-cols address { font-style: normal; font-size: 20px; line-height: 1.35; }
  .foot-cols p { margin: 0 0 16px; font-size: 20px; }
  footer a { text-decoration: none; }
  footer a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 2px solid var(--dark-800); }
  .foot-bottom small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; color: #a9a9a9; font-size: 14px; }
  .foot-bottom .foot-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .foot-bottom .credit { display: block; margin-left: auto; } /* sits on the right, next to the language switch */
  .foot-bottom .foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* Language switch (footer and menu) */
  .lang-switch { position: relative; margin: 0; display: flex; gap: 2px; padding: 2px; border: 2px solid var(--dark-800); border-radius: 10px; }
  /* Highlight that slides to the active language */
  .lang-switch::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 3px); border-radius: 7px; background: var(--dark-800); transition: transform .3s cubic-bezier(0.34, 1.4, 0.64, 1); }
  .lang-switch:has(a[lang="en"][aria-current])::before { transform: translateX(calc(100% + 2px)); }
  .lang-switch a { position: relative; flex: 1; min-width: 2.6em; text-align: center; padding: 7px 10px; border-radius: 7px; font-weight: 700; font-size: 15px; text-decoration: none; }

  .room h3 a { text-decoration: none; }
  .room h3 a::after { content: ""; position: absolute; inset: 0; }
  .room { position: relative; }
  .room .btn { position: relative; z-index: 1; }
  /* The room's button takes the colour of its tab (blue is the button default) */
  .room:has(.block.pink) > .btn { background: var(--pink); }
  .room:has(.block.green) > .btn { background: var(--green); }
  .room:has(.block.yellow) > .btn { background: var(--yellow); }

  /* Room page */
  .page-hero { background: var(--dark); color: var(--light); padding-top: calc(88px + clamp(24px, 4vw, 48px)); }
  .page-hero h1 { margin: 0 0 0 -0.03em; font-size: clamp(72px, 15vw, 220px); line-height: 0.85; letter-spacing: -0.045em; }
  /* Room pages: the name sits in the left column, above the description. Sized to the column
     ("studio 2" is about 3.4em wide), so "studio 1" and "studio 2" just fit on one line. */
  .page-hero .hero-row > div:first-child { container-type: inline-size; }
  .page-hero .hero-row h1 { font-size: 28cqi; margin-bottom: 0.12em; }
  .page-hero .hero-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap); align-items: end; padding-top: clamp(24px, 3vw, 40px); }
  .page-hero.short { padding-bottom: clamp(40px, 5vw, 72px); }
  .page-hero.short h1 { margin-bottom: 0.18em; } /* room for the descenders (p, y) above the intro */

  .setups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .setups .tile b { font-size: clamp(40px, 5vw, 72px); line-height: 0.9; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
  .stack { display: flex; flex-direction: column; gap: var(--gap); }
  .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ticks li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dark); margin-right: 10px; }
  .panel :is(h2, h3) { margin: 0 0 12px; font-size: 24px; letter-spacing: -0.03em; }

  /* door_item: floor plan with MAP tag */
  .map { position: relative; background: var(--panel); padding: clamp(18px, 2vw, 28px); }
  .map img { margin: 0 auto; max-height: 720px; width: auto; }
  .tag { position: absolute; top: 18px; left: 18px; background: var(--dark); color: var(--light); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: -0.03em; }

  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .gallery img:first-child { grid-column: span 2; grid-row: span 2; height: 100%; aspect-ratio: auto; }

  .cta { background: var(--blue); }
  .cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .cta p { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; max-width: 14ch; }
  .cta .btn { background: var(--dark); color: var(--light); }

  /* Contact form, built from the Table cell styles */
  .form { display: grid; grid-template-columns: 1fr 1fr; border-left: var(--line); }
  .field { display: flex; flex-direction: column; border-right: var(--line); border-bottom: var(--line); background: var(--panel); }
  .field.full { grid-column: 1 / -1; }
  .field > label, .field > .label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px 0; font-family: var(--titre); font-weight: 700; font-size: 13px; text-transform: uppercase; }
  /* Optional fields say so next to the label, instead of in a placeholder that disappears */
  .field .opt { font-family: var(--texte); font-weight: 400; font-size: 13px; text-transform: none; color: var(--dark-800); }
  .field ::placeholder { color: var(--dark-800); opacity: 0.7; }
  .field input[type=date]:not([data-filled])::-webkit-datetime-edit { color: var(--dark-800); opacity: 0.7; } /* empty date looks like a hint */
  /* Choice chips (radio buttons); room chips take their room's colour, as everywhere on the site */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; }
  .chip { position: relative; cursor: pointer; }
  .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .chip span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 2px solid var(--dark); border-radius: 999px; font-size: 16px; letter-spacing: -0.02em; transition: background-color .15s ease, color .15s ease; }
  .chip:hover span { background: #fff; }
  .chip input:checked + span { background: var(--dark); color: var(--light); }
  .chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
  .chip:is(.blue, .pink, .green, .yellow) span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--dark); }
  .chip.blue span::before { background: var(--blue); }
  .chip.pink span::before { background: var(--pink); }
  .chip.green span::before { background: var(--green); }
  .chip.blue input:checked + span { background: var(--blue); color: var(--dark); }
  .chip.pink input:checked + span { background: var(--pink); color: var(--dark); }
  .chip.green input:checked + span { background: var(--green); color: var(--dark); }
  .field input, .field select, .field textarea { font: 18px/1.3 var(--texte); letter-spacing: -0.02em; color: var(--dark); background: transparent; border: 0; padding: 6px 14px 12px; width: 100%; }
  .field textarea { min-height: 160px; resize: vertical; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
  .form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px; background: var(--panel); border-right: var(--line); border-bottom: var(--line); }
  .form-foot p { margin: 0; flex: 1 1 260px; font-size: 15px; color: var(--dark-800); }
  .form-foot p a { color: inherit; text-underline-offset: 3px; }
  .form-foot output { flex-basis: 100%; font-size: 16px; }
  .form-foot output:empty { display: none; }
  .form .hp { position: absolute; left: -9999px; } /* honeypot for bots, see worker/index.js */
  .form .cf-turnstile { grid-column: 1 / -1; padding: 14px 14px 0; background: var(--panel); border-right: var(--line); }
  .form-foot output a { color: inherit; }

  /* Privacy page: one readable text column */
  .legal > * { max-width: 760px; } /* the wrap stays centred like the header; only the line length is capped */
  .legal h2 { margin: 40px 0 12px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
  .legal p, .legal li { font-size: 18px; line-height: 1.45; }
  .legal ul { padding-left: 1.2em; }
  .legal .updated { color: var(--dark-800); font-size: 15px; }

  /* Cookie consent (site.js): same container and spacing as the menu bar, mirrored at the bottom.
     Accept and "necessary only" are equal filled buttons; settings and privacy are quiet links. */
  .consent { position: fixed; inset: auto 0 0; z-index: 20; padding-bottom: 16px; pointer-events: none; }
  .consent-box { pointer-events: auto; max-width: 600px; background: var(--dark); color: var(--light); border: 2px solid var(--dark-800); border-radius: 12px; overflow: hidden; }
  .consent-box > p { margin: 0; padding: 16px 18px 6px; font-size: 16px; line-height: 1.4; max-width: 52ch; }
  .consent-actions { display: flex; align-items: center; gap: 6px; padding: 10px; }
  .consent-links { display: flex; gap: 18px; margin-right: auto; padding-left: 8px; font-size: 16px; }
  .consent-links a, .consent-links .link-btn { color: inherit; text-underline-offset: 3px; }
  /* Settings: rows like the rider tables, with a switch per category */
  .consent-rows { margin-top: 12px; border-top: 2px solid var(--dark-800); }
  .consent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 2px solid var(--dark-800); cursor: pointer; }
  .consent-row > span:first-child { display: grid; gap: 2px; }
  .consent-row b { font-size: 16px; }
  .consent-row small { font-size: 14px; color: #a9a9a9; }
  .consent-row .always { flex: none; white-space: nowrap; font-size: 14px; color: #a9a9a9; }
  .switch { appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: var(--dark-800); cursor: pointer; transition: background-color .2s ease; }
  .switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--light); transition: transform .2s cubic-bezier(0.34, 1.4, 0.64, 1); }
  .switch:checked { background: var(--blue); }
  .switch:checked::before { transform: translateX(18px); background: var(--dark); }
  .link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  /* Rotating word (animations.js) */
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rotator { font-weight: 400; display: block; position: relative; height: 1.1em; } /* no clipping: words fade and blur in and out instead of being masked */
  .rotator > span { position: absolute; left: 0; top: 0; white-space: nowrap; padding-bottom: .25em; } /* room for descenders: Safari crops blurred text to its box */

  /* Button ripple (animations.js) */
  .btn { position: relative; overflow: hidden; }
  .ripple { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; }

  /* Page transition "stack" (Animate UI): the new page lands on top, the old page sinks back.
     Cross-document view transitions; browsers without support just navigate normally. */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    /* Only transforms, so the GPU runs it without repainting. The old page never shrinks or fades,
       so no backdrop colour shows through; a shadow on the new page gives the depth instead. */
    ::view-transition-old(root) { animation: 0.6s cubic-bezier(0.22, 1, 0.36, 1) both page-sink; }
    ::view-transition-new(root) { animation: 0.6s cubic-bezier(0.22, 1, 0.36, 1) both page-land; box-shadow: 0 -24px 60px rgb(0 0 0 / 0.35); }
    @keyframes page-sink { to { transform: translateY(-8%); } }
    @keyframes page-land { from { transform: translateY(100%); } }
    /* The menu is its own layer: it stays put (and only morphs its width) while the page moves */
    .pill { view-transition-name: menu; }
    /* No snapshot morph for the pill (that scaled it from the top left); the live pill shows instead,
       and its logo slides in or out with its own transition (site.js carries the state over) */
    ::view-transition-group(menu), ::view-transition-new(menu) { animation: none; }
    ::view-transition-old(menu) { display: none; }
    /* Arc's hand-made version: only the content lands, over the dark canvas, so the fixed menu stays.
       Backwards fill leaves no transform behind; site.js drops .stack-land afterwards. */
    .stack-land body { background: transparent; }
    .stack-land :is(main, footer) { animation: 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards content-land; }
    @keyframes content-land { from { transform: translateY(100vh); } }
  }

  @media (max-width: 980px) {
    .rooms { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px) {
    .bar nav, .pill > .btn { display: none; }
    /* The dropdown hangs from the whole pill, so it never runs off screen */
    .pill { position: relative; }
    .bar details { display: block; }
    .bar summary { list-style: none; cursor: pointer; }
    /* Wordmark across the full width on phones ("gietijzer" is about 3.5em wide) */
    .wordmark { font-size: 26vw; }
    .bar summary::-webkit-details-marker { display: none; }
    .bar details ul { position: absolute; left: -2px; right: -2px; top: calc(100% + 8px); background: var(--panel); color: var(--dark); border: var(--line); border-radius: 8px; padding: 16px; list-style: none; margin: 0; display: grid; gap: 14px; font-size: 20px; }
    .bar details a { text-decoration: none; }
    .facts { grid-template-columns: 1fr; }
    .facts li { min-height: 0; }
    /* Header buttons side by side on phones from 375px wide (iPhone X and up) */
    .hero .actions { flex-wrap: nowrap; gap: 8px; }
    .hero .actions .btn { height: 46px; padding: 0 14px; font-size: 16px; }
    .consent-box { max-width: none; }
    .consent-actions { flex-wrap: wrap; }
    .consent-links { flex-basis: 100%; padding: 2px 8px 8px; }
    .consent-actions .btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
    .page-hero .hero-row, .intro, .rooms, .ev-tiles, .contact, .two-col, .form { grid-template-columns: 1fr; }
    .ev-tiles { grid-auto-rows: 180px auto; }
    .setups { grid-template-columns: 1fr 1fr; }
    .gallery { grid-template-columns: 1fr 1fr; }
    .field { border-right: var(--line); }
    .tile { min-height: 130px; padding: 14px; }
    .foot-top { flex-direction: column; gap: 0; }
    .foot-contact { flex: none; align-self: stretch; margin-bottom: 32px; }
    .foot-cols { grid-template-columns: 1fr; }
    .foot-cols > div { border-left: 0; padding-left: 0; border-bottom: 2px solid var(--dark-800); }
    .foot-cols > div:last-child { border-bottom: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chip span { transition: none; }
    .switch, .switch::before { transition: none; }
    .lang-switch::before { transition: none; }
    .strip { overflow-x: auto; }
    .strip-track { animation: none; }
    .strip img[aria-hidden] { display: none; } html { scroll-behavior: auto; } }

  .contact-list { font-style: normal; display: grid; gap: 10px; }
  .contact-list a, .contact-list span { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
  .contact-list .social-row { gap: 24px; } /* Instagram and LinkedIn on one line */
  .contact-list a:hover { text-decoration: underline; }