/* Canberra Reptile Zoo concept, BASE 38, July 2026.
   Mobile-first: alles hieronder is de telefoonopmaak, breakpoints staan onderaan. */

:root {
  --ink: #101311;
  --ink-2: #1b201c;
  --forest: #163a2d;
  --moss: #2f5c42;
  --lime: #c8f45a;
  --lime-2: #b5e83f;
  --cream: #f2eee1;
  --sand: #e2d7bd;
  --paper: #fffdf7;
  --line: rgba(16, 19, 17, .16);
  --line-w: rgba(255, 255, 255, .22);
  --grey: #545c55;
  --pad: 20px;
  --bar-h: 66px;
  --shadow: 0 18px 44px rgba(6, 14, 9, .18);
  --display: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed",
             "Helvetica Neue Condensed", "Liberation Sans Narrow", Impact, sans-serif;
  --text: "Avenir Next", Avenir, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* height:auto is verplicht: zonder dat wint het height-attribuut van de img
   en negeert de browser elke aspect-ratio die we hieronder zetten. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dd, dl, ul { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: -.02em;
  line-height: .97;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 11.6vw, 4.1rem); text-transform: uppercase; }
h2 { font-size: clamp(1.85rem, 7.6vw, 2.9rem); text-transform: uppercase; }
h3 { font-size: 1.28rem; letter-spacing: -.01em; }

/* Mobiel is een eigen compositie: deze blokken horen alleen op groot scherm. */
.m-hide { display: none; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  z-index: 999;
  top: 8px; left: 8px;
  min-height: 44px;
  padding: 11px 18px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

:focus-visible { outline: 3px solid #f2a61f; outline-offset: 3px; }

.wrap { width: min(1160px, 100% - (var(--pad) * 2)); margin-inline: auto; }

.kick {
  margin-bottom: 12px;
  color: var(--moss);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.note {
  margin-top: 22px;
  color: var(--grey);
  font-size: .86rem;
}

/* ── strip + header ─────────────────────────────────────────────── */

.strip {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  background: var(--lime);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}
.strip span { display: none; }

.head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Het logo is hoog (staande waterdraak), dus op hoogte schalen.
   Op breedte schalen laat de staart onder de header uitsteken. */
.brand { display: flex; align-items: center; }
.brand img { width: auto; height: 52px; }

.nav-d { display: none; }

.nav-m summary {
  display: grid;
  width: 46px; height: 46px;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.nav-m summary::-webkit-details-marker { display: none; }
.nav-m summary span { display: block; width: 17px; height: 2px; background: var(--ink); }

.nav-m nav {
  position: absolute;
  right: var(--pad);
  display: grid;
  width: min(280px, calc(100vw - 40px));
  padding: 10px;
  background: var(--ink);
  box-shadow: var(--shadow);
  color: #fff;
}
.nav-m nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding-inline: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-weight: 700;
}
.nav-m nav a:last-child { border: 0; }

.nav-buy {
  justify-content: center;
  margin-top: 8px;
  background: var(--lime);
  color: var(--ink) !important;
  font-weight: 900 !important;
}

/* ── buttons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 4px;
  font-weight: 900;
  line-height: 1;
}
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }

.link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid currentColor;
  font-weight: 800;
}
.link-light { color: #fff; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

/* ── hero ───────────────────────────────────────────────────────── */

.hero { background: var(--ink); color: #fff; }

.hero-img { position: relative; margin: 0; }
.hero-img img { width: 100%; height: 38vh; min-height: 240px; max-height: 380px; object-fit: cover; object-position: 55% 50%; }
.hero-img figcaption {
  position: absolute;
  left: var(--pad); bottom: 12px;
  padding: 6px 10px;
  background: rgba(16, 19, 17, .82);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hero-copy { padding: 26px var(--pad) 24px; }
.eyebrow {
  margin-bottom: 14px;
  color: var(--lime);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero h1 { margin-bottom: 14px; }
.lead {
  max-width: 46ch;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
}

.creds {
  display: grid;
  border-top: 1px solid var(--line-w);
}
.creds li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--line-w);
  color: rgba(255, 255, 255, .72);
  font-size: .76rem;
  line-height: 1.3;
}
.creds li:last-child { border-bottom: 0; }
.creds strong {
  flex: 0 0 auto;
  min-width: 44px;
  color: var(--lime);
  font-family: var(--display);
  font-size: 1.24rem;
  letter-spacing: -.01em;
}

/* ── sections ───────────────────────────────────────────────────── */

.sect { padding-block: 42px; }

.head-2 { margin-bottom: 20px; }
.head-2 .sub {
  max-width: 48ch;
  margin-top: 12px;
  color: var(--grey);
  font-size: .93rem;
}

.animals { background: var(--cream); }

/* ── rails ──────────────────────────────────────────────────────── */

.rail {
  display: flex;
  gap: 12px;
  padding-inline: var(--pad) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* zonder dit trekt mandatory snapping de eerste kaart tegen de schermrand
     en verdwijnt de linkermarge van de pagina */
  scroll-padding-inline-start: var(--pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail::after { content: ""; flex: 0 0 var(--pad); }

.card {
  display: flex;
  flex: 0 0 min(78vw, 340px);
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  scroll-snap-align: start;
}
.rail-wide .card-wide { flex-basis: min(86vw, 430px); }

.card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-b { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 15px 16px 17px; }
.card-b p { color: var(--grey); font-size: .88rem; }
.card-b .link { margin-top: auto; color: var(--forest); font-size: .84rem; }
.card-b .fine { font-size: .78rem; opacity: .85; }

.tag {
  align-self: flex-start;
  padding: 4px 9px;
  color: var(--ink) !important;
  font-size: .62rem !important;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tag-glass { background: var(--sand); }
.tag-hands { background: var(--lime); }
.tag-price { background: var(--ink); color: var(--lime) !important; }

.rail-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.rail-count {
  color: var(--moss);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.rail-btns { display: flex; gap: 8px; }
.rail-btns button {
  display: grid;
  width: 46px; height: 46px;
  place-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
}
.rail-btns button:disabled { opacity: .3; cursor: default; }
.rail-btns svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── visit ──────────────────────────────────────────────────────── */

.visit-img { margin: 0 0 22px; }
.visit-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 34%; }

.visit-copy .big {
  margin-block: 4px 12px;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.36;
}
.visit-copy > p:not(.big):not(.kick) { color: var(--grey); font-size: .93rem; }

.facts { margin-top: 20px; border-top: 1px solid var(--line); }
.facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-size: .87rem;
}
.facts strong { flex: 0 0 auto; color: var(--ink); }

.prices {
  margin-top: 28px;
  padding: 22px 18px 24px;
  background: var(--forest);
  color: #fff;
}
.prices h3 { color: var(--lime); }
.prices-head p {
  max-width: 52ch;
  margin-top: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: .84rem;
}
.price-list { margin-top: 14px; border-top: 1px solid var(--line-w); }
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-w);
  font-weight: 700;
}
.price-list em {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .62);
  font-size: .76rem;
  font-style: normal;
  font-weight: 400;
}
.price-list strong {
  flex: 0 0 auto;
  color: var(--lime);
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
}
.prices-foot { display: grid; gap: 18px; margin-top: 20px; }
.prices-foot p { color: rgba(255, 255, 255, .68); font-size: .78rem; }
.prices-foot .btn { background: var(--lime); color: var(--ink); }

/* ── access ─────────────────────────────────────────────────────── */

.access { background: var(--ink); color: #fff; }
.access .kick { color: var(--lime); }
.access-list { margin-top: 20px; border-top: 1px solid var(--line-w); }
.access-list li { padding: 13px 0; border-bottom: 1px solid var(--line-w); }
.access-list h3 { margin-bottom: 4px; color: var(--lime); font-size: 1.04rem; }
.access-list p { color: rgba(255, 255, 255, .76); font-size: .88rem; }
.access .note { margin-top: 16px; color: rgba(255, 255, 255, .58); font-size: .82rem; }

/* ── story ──────────────────────────────────────────────────────── */

.story { background: var(--cream); }
.story-copy p:not(.kick) { margin-top: 10px; color: var(--grey); font-size: .93rem; }
.story-img { margin: 22px 0 0; }
.story-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%; }

.proof { margin-top: 18px; border-top: 1px solid var(--line); }
.proof li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-size: .85rem;
}
.proof strong {
  flex: 0 0 auto;
  min-width: 84px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
}

/* ── plan ───────────────────────────────────────────────────────── */

.plan { background: var(--ink); color: #fff; }
.plan .kick { color: var(--lime); }
.plan-list { margin-block: 18px 22px; border-top: 1px solid var(--line-w); }
.plan-list > div { padding: 13px 0; border-bottom: 1px solid var(--line-w); }
.plan-list dt {
  margin-bottom: 5px;
  color: var(--lime);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plan-list dd { color: rgba(255, 255, 255, .82); }
.plan-list a { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.plan-img { display: none; margin: 26px 0 0; }
.plan-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ── layer 3 + footer ───────────────────────────────────────────── */

.notes { background: var(--sand); }
.notes h2 { max-width: 20ch; }
.notes-grid { display: grid; gap: 10px; margin-top: 20px; }
.notes-grid article {
  padding: 17px 18px 19px;
  background: rgba(255, 253, 247, .74);
  border-top: 4px solid var(--forest);
}
.notes-grid h3 { margin-bottom: 6px; font-size: 1.12rem; }
.notes-grid p { color: #4d554d; font-size: .86rem; }
.notes-grid .link { margin-top: 12px; font-size: .84rem; }

.foot { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); background: var(--paper); }
.foot-top { display: grid; gap: 22px; padding-block: 34px; }
.foot-logo { width: 168px; height: auto; }
.foot-top > div { display: grid; gap: 4px; color: var(--grey); font-size: .87rem; }
.foot-top strong { color: var(--ink); }
.foot-links a {
  min-height: 34px;
  color: var(--forest);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.foot-legal {
  display: grid;
  gap: 12px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
  color: #767c76;
  font-size: .67rem;
}
.foot-legal p { max-width: 88ch; }

/* ── layer 1 chip + action bar ──────────────────────────────────── */

.why {
  position: fixed;
  z-index: 40;
  right: 10px;
  bottom: calc(var(--bar-h) + 10px + env(safe-area-inset-bottom));
}
.why summary {
  display: grid;
  width: 44px;
  height: 44px;
  place-content: center;
  background: rgba(16, 19, 17, .92);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(6, 14, 9, .3);
  color: #fff;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
  list-style: none;
}
.why summary::-webkit-details-marker { display: none; }
.why-label { display: none; }
.why[open] summary { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.why > div {
  position: absolute;
  right: 0; bottom: 52px;
  width: min(300px, calc(100vw - 24px));
  padding: 17px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.why > div strong { display: block; margin-bottom: 7px; }
.why > div p { color: var(--grey); font-size: .82rem; }
.why > div .link { margin-top: 6px; font-size: .8rem; }

.bar {
  position: fixed;
  z-index: 35;
  right: 0; bottom: 0; left: 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(6, 14, 9, .12);
}
.bar a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  font-size: .84rem;
  font-weight: 900;
}
.bar-buy { background: var(--lime); border-color: var(--lime); }

/* ══ 480px en op ═══════════════════════════════════════════════════ */

@media (min-width: 480px) {
  .creds { grid-template-columns: 1fr 1fr; }
  .creds li:nth-child(-n+2) { border-bottom: 1px solid var(--line-w); }
  .creds li:first-child { grid-column: 1 / -1; }
  .creds li:nth-child(2) { border-right: 1px solid var(--line-w); }
  .notes-grid { grid-template-columns: 1fr 1fr; }
  .notes-grid article:first-child { grid-column: 1 / -1; }
}

/* ══ 701px en op: tablet en desktop ════════════════════════════════ */

@media (min-width: 701px) {
  :root { --pad: 34px; }

  h3 { font-size: 1.45rem; }

  .m-hide { display: revert; }
  li.m-hide { display: list-item; }

  .why summary {
    width: auto;
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 40px;
    font-family: var(--text);
    font-size: .72rem;
    font-weight: 800;
  }
  .why-mark { display: none; }
  .why-label { display: inline; }

  .plan-img { display: block; }

  .strip { font-size: .68rem; }
  .strip span {
    display: inline;
    padding-left: 12px;
    border-left: 1px solid rgba(16, 19, 17, .3);
    font-weight: 700;
  }

  .head { height: 84px; }
  .brand img { height: 62px; }

  .sect { padding-block: 78px; }

  .head-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
    align-items: end;
    gap: 40px;
    margin-bottom: 34px;
  }
  .head-2 .sub { margin-top: 0; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy img" "creds creds";
    align-items: stretch;
  }
  .hero-copy { grid-area: copy; align-self: center; padding: 64px var(--pad); }
  .hero-img { grid-area: img; }
  .hero-img img { height: 100%; min-height: 420px; }
  .creds { grid-area: creds; grid-template-columns: repeat(3, 1fr); }
  .creds li { border-bottom: 0; border-right: 1px solid var(--line-w); }
  .creds li:first-child { grid-column: auto; }
  .creds li:last-child { border-right: 0; }

  .rail {
    padding-inline: max(var(--pad), calc((100vw - 1160px) / 2)) 0;
    scroll-padding-inline-start: max(var(--pad), calc((100vw - 1160px) / 2));
    gap: 18px;
  }
  .rail::after { flex-basis: var(--pad); }

  .visit-grid, .story-grid, .plan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
  }
  .visit-img { margin: 0; }
  .visit-img img { aspect-ratio: 3 / 4; object-position: 50% 42%; }
  .story-img, .plan-img { margin: 0; }
  .story-img img { aspect-ratio: 4 / 5; object-position: 50% 50%; }

  .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }

  .prices { padding: 34px 38px 38px; }
  .price-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; }
  .price-list li:last-child { grid-column: 1 / -1; }
  .prices-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

  .access-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 46px; }

  .notes-grid { grid-template-columns: repeat(3, 1fr); }
  .notes-grid article:first-child { grid-column: auto; }

  .foot { padding-bottom: 0; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  .foot-legal { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ══ 980px en op ═══════════════════════════════════════════════════ */

@media (min-width: 980px) {
  h1 { font-size: clamp(4rem, 5.4vw, 5.4rem); }
  h2 { font-size: clamp(2.9rem, 3.9vw, 3.9rem); }

  .head { padding-inline: 44px; }

  .nav-d {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 32px);
    font-size: .84rem;
    font-weight: 800;
  }
  .nav-d > a:not(.nav-buy) { display: flex; min-height: 44px; align-items: center; }
  .nav-d .nav-buy {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    margin: 0;
    padding-inline: 18px;
    background: var(--ink);
    color: #fff !important;
  }
  .nav-m { display: none; }

  .hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .hero-copy { padding: 76px clamp(44px, 5vw, 84px); }
  .hero-img img { min-height: 520px; }

  .visit-grid, .story-grid, .plan-grid { gap: 68px; }
  .story-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

  .why { right: 20px; bottom: 20px; }
  .bar { display: none; }
}

/* ══ voorkeuren ════════════════════════════════════════════════════ */

@media (hover: hover) {
  .btn, .nav-buy, .rail-btns button { transition: transform .16s ease, background .16s ease; }
  .btn:hover, .nav-d .nav-buy:hover { transform: translateY(-2px); }
  .rail-btns button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
  .card > img { transition: transform .5s ease; }
  .card:hover > img { transform: scale(1.03); }
  .link span { transition: transform .18s ease; }
  .link:hover span { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}