/* ==========================================================================
   Engelsk med Grace
   Palette sampled from img/grace.webp: terracotta wall, amber glass lamp,
   sage jumper, stained-glass crimson and gold, dark window frame.
   ========================================================================== */

/* ---------- Fonts ----------
   Self-hosted from Google Fonts (SIL OFL, licences in fonts/). The latin
   files are preloaded in <head>; latin-ext only loads for characters outside
   it. The "Fallback" faces resize Georgia and Arial to the web fonts' widths
   and metrics, so the text barely moves when the real font swaps in. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Values measured against the page's own text: width ratio for size-adjust,
   the web font's ascent/descent divided by it for the overrides. */
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.5%;
  ascent-override: 94.3%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Young Serif Fallback";
  src: local("Georgia");
  size-adjust: 112.5%;
  ascent-override: 93%;
  descent-override: 32.5%;
  line-gap-override: 0%;
}

:root {
  /* Colour */
  --terracotta: oklch(0.55 0.125 44);
  --terracotta-deep: oklch(0.476 0.111 45);
  --terracotta-lit: oklch(0.603 0.131 44);
  --amber: oklch(0.762 0.163 67);
  --amber-glow: oklch(0.882 0.154 90);
  --sage: oklch(0.727 0.038 174);
  --sage-soft: oklch(0.905 0.022 174);
  --sage-deep: oklch(0.458 0.039 179);
  --mist: oklch(0.969 0.006 170);
  --surface: oklch(0.993 0.003 170);
  --espresso: oklch(0.242 0.035 42);
  --ink-soft: oklch(0.4 0.03 42);
  --frame: oklch(0.296 0.009 295);
  --frame-raised: oklch(0.345 0.011 295);
  --crimson: oklch(0.474 0.161 23);
  --gold: oklch(0.767 0.138 81);
  --denim: oklch(0.47 0.045 250);
  --on-dark: oklch(0.985 0.008 60);
  --line-soft: oklch(0.6 0.03 174);

  --focus: var(--terracotta-deep);

  /* Type */
  --font-display: "Young Serif", "Young Serif Fallback", Georgia, serif;
  --font-body: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.28rem, 1.18rem + 0.5vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.15rem);
  --step-3: clamp(2rem, 1.6rem + 1.9vw, 2.9rem);
  --step-4: clamp(2.35rem, 1.75rem + 3vw, 4.1rem);
  --step-5: clamp(2.75rem, 1.9rem + 4.4vw, 5.5rem);

  /* Space & shape */
  --space-section: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 1.25rem;
  --shadow-float: 0 1.5rem 3rem -1rem oklch(0.24 0.035 42 / 0.4);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers */
  --z-raised: 1;
  --z-sticky: 100;
  --z-menu: 200;

  /* Stained-glass tile, drawn from the window beside Grace */
  --glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='96' viewBox='0 0 48 96'%3E%3Crect width='48' height='96' fill='%23e2ebe7'/%3E%3Cpath d='M18 0h12l-6 12zM18 96h12l-6-12z' fill='%238fafa5'/%3E%3Cpath d='M0 40l7 8-7 8zM48 40l-7 8 7 8z' fill='%23e0a93a'/%3E%3Cpath d='M0 0l48 96M48 0L0 96' stroke='%232d2c31' stroke-width='2'/%3E%3Cpath d='M24 32l9 16-9 16-9-16z' fill='%23a3262e' stroke='%232d2c31' stroke-width='2'/%3E%3Cpath d='M24 41l4 7-4 7-4-7z' fill='%23e0a93a'/%3E%3Cpath d='M0 0v96M18 0h12M18 96h12' stroke='%232d2c31' stroke-width='3'/%3E%3C/svg%3E");

  interpolate-size: allow-keywords;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--espresso);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--amber-glow);
  color: var(--espresso);
}

.wrap {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section);
}

.h2 {
  font-size: var(--step-4);
}

.lede {
  margin-top: 1.25rem;
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.45;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: var(--z-menu);
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--espresso);
  font-weight: 700;
  text-decoration: none;
  translate: 0 -200%;
  transition: translate 0.3s var(--ease-out);
}

.skip-link:focus {
  translate: 0 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    translate 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    background-color 0.3s ease,
    color 0.3s ease;
}

.btn:hover {
  translate: 0 -2px;
}

.btn:active {
  translate: 0 0;
  scale: 0.98;
}

.btn--primary {
  background: var(--amber);
  color: var(--espresso);
}

.btn--primary:hover {
  box-shadow: 0 0.9rem 2.2rem -0.6rem oklch(0.82 0.16 75 / 0.75);
}

.btn--ghost {
  border-color: oklch(0.985 0.008 60 / 0.7);
  color: var(--on-dark);
}

.btn--ghost:hover {
  background: oklch(1 0 0 / 0.12);
  border-color: var(--on-dark);
}

.btn--dark {
  background: var(--espresso);
  color: var(--mist);
}

.btn--dark:hover {
  box-shadow: 0 0.8rem 1.8rem -0.8rem oklch(0.24 0.035 42 / 0.8);
}

.btn--ghost-dark {
  border-color: var(--espresso);
  color: var(--espresso);
  background: transparent;
}

.btn--ghost-dark:hover {
  background: var(--espresso);
  color: var(--mist);
}

.btn--small {
  min-height: 2.75rem;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
}

.btn--wide {
  width: 100%;
}

.btn[disabled] {
  cursor: progress;
  opacity: 0.8;
}

.btn.is-sending .btn__label::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.6em;
  vertical-align: -0.15em;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---------- Header ---------- */

.site-header {
  --focus: var(--amber-glow);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--terracotta);
  color: var(--on-dark);
  transition: box-shadow 0.35s ease;
}

.site-header.is-stuck {
  box-shadow: 0 0.75rem 2rem -1rem oklch(0.24 0.035 42 / 0.65);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__lamp {
  width: 0.85rem;
  height: 1.4rem;
  flex: none;
  color: currentColor;
  filter: drop-shadow(0 0 6px oklch(0.88 0.154 90 / 0.7));
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.site-nav a:hover {
  background: oklch(1 0 0 / 0.14);
}

.menu-button {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid oklch(0.985 0.008 60 / 0.6);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.menu-button__bars {
  position: relative;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-button__bars::before,
.menu-button__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-button__bars::before {
  top: -6px;
}

.menu-button__bars::after {
  top: 6px;
}

@media (max-width: 62rem) {
  .site-nav {
    display: none;
  }

  .site-header__cta {
    margin-left: auto;
  }

  .menu-button {
    display: inline-flex;
  }
}

@media (max-width: 30rem) {
  .site-header__cta {
    display: none;
  }

  .menu-button {
    margin-left: auto;
  }
}

/* "Engelsk med Grace" plus the Meny button is ~387px wide, so on smaller
   phones the wordmark scales down and the button keeps only its icon
   (the button's aria-label still names it). */
@media (max-width: 24rem) {
  .site-header .wordmark,
  .mobile-menu .wordmark {
    font-size: clamp(1.2rem, 6.4vw, 1.5rem);
  }

  .menu-button {
    padding-inline: 0.8rem;
  }

  .menu-button__label {
    display: none;
  }
}

/* Mobile menu (popover) */

.mobile-menu {
  --focus: var(--amber-glow);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 1rem 2rem;
  border: 0;
  background: var(--terracotta);
  color: var(--on-dark);
  overflow-y: auto;
  opacity: 0;
  translate: 0 -1rem;
  transition:
    opacity 0.35s var(--ease-out),
    translate 0.45s var(--ease-out),
    overlay 0.45s allow-discrete,
    display 0.45s allow-discrete;
}

.mobile-menu:popover-open {
  display: flex;
  flex-direction: column;
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .mobile-menu:popover-open {
    opacity: 0;
    translate: 0 -1rem;
  }
}

.mobile-menu::backdrop {
  background: transparent;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
}

.mobile-menu__close {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid oklch(0.985 0.008 60 / 0.6);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.mobile-menu nav ul {
  display: grid;
  gap: 0.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mobile-menu nav a {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.15;
  text-decoration: none;
}

.mobile-menu:popover-open nav li {
  animation: rise 0.6s var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 45ms + 80ms);
}

.mobile-menu nav li:nth-child(2) { --n: 1; }
.mobile-menu nav li:nth-child(3) { --n: 2; }
.mobile-menu nav li:nth-child(4) { --n: 3; }
.mobile-menu nav li:nth-child(5) { --n: 4; }
.mobile-menu nav li:nth-child(6) { --n: 5; }

.mobile-menu__contact {
  display: grid;
  gap: 1rem;
  margin-top: auto;
  padding-top: 2.5rem;
}

.mobile-menu__phone {
  justify-self: start;
  font-weight: 700;
}

/* ---------- Stained glass ---------- */

.glass {
  position: relative;
  overflow: hidden;
  background-color: oklch(0.92 0.015 170);
  background-image: var(--glass);
  background-size: 40px 80px;
}

.glass::after {
  /* Daylight falling through the glass */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, oklch(1 0 0 / 0.45), oklch(1 0 0 / 0) 45%, oklch(0.24 0.035 42 / 0.12));
}

/* ---------- Hero ---------- */

.hero {
  --focus: var(--amber-glow);
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7.5rem);
  background: var(--terracotta);
  color: var(--on-dark);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.hero__title {
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__title .w {
  display: inline-block;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.hero__kicker::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: var(--amber-glow);
  rotate: 45deg;
  flex: none;
}

.hero__mark {
  position: relative;
  color: var(--amber-glow);
  white-space: nowrap;
}

.hero__squiggle {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.26em;
  overflow: visible;
}

.hero__squiggle path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.hero__lead {
  max-width: 36ch;
  margin-top: 1.75rem;
  font-size: var(--step-1);
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.hero__facts li::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: var(--amber-glow);
  rotate: 45deg;
  flex: none;
}

/* The photo in its window */

.hero__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 31rem);
  padding: 1rem 1.75rem 1rem 0;
}

.hero__visual::before {
  /* Lamp light spilling onto the wall */
  content: "";
  position: absolute;
  left: 46%;
  top: 22%;
  width: 115%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.68 0.15 55 / 0.7), oklch(0.62 0.14 48 / 0.3) 55%, oklch(0.6 0.13 45 / 0));
  pointer-events: none;
}

.hero__glass {
  position: absolute;
  right: 0;
  top: 16%;
  width: 46%;
  height: 72%;
  border: 8px solid var(--frame);
  border-radius: 50% 50% 0.75rem 0.75rem / 24% 24% 0.75rem 0.75rem;
  rotate: 4deg;
  box-shadow: var(--shadow-float);
}

.window {
  position: relative;
  z-index: var(--z-raised);
  width: 88%;
  margin: 0;
}

.window::before {
  /* The lamp cord continues out of the photo */
  content: "";
  position: absolute;
  left: 52.2%;
  bottom: calc(100% - 4px);
  width: 2px;
  height: 100vh;
  background: white;
  opacity: 0.85;
  translate: -50% 0;
  transform-origin: top;
}

.window__pane {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: clamp(7px, 1.1vw, 10px) solid var(--frame);
  border-radius: 50% 50% 1rem 1rem / 30% 30% 1rem 1rem;
  background: var(--terracotta-deep);
  box-shadow: var(--shadow-float);
}

.window__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.window__glow {
  position: absolute;
  left: 51.5%;
  top: 23%;
  width: 62%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.97 0.1 95 / 0.75), oklch(0.86 0.16 75 / 0.32) 38%, oklch(0.78 0.16 62 / 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.window__badge {
  position: absolute;
  left: -0.75rem;
  bottom: 1.75rem;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border-radius: 999px;
  background: var(--mist);
  color: var(--espresso);
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: var(--shadow-float);
}

.window__badge svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: var(--terracotta-deep);
}

.bubble {
  position: absolute;
  right: -0.25rem;
  top: 34%;
  z-index: var(--z-raised);
  padding: 0.65rem 1.1rem 0.75rem;
  border-radius: 1.25rem 1.25rem 1.25rem 0.3rem;
  background: var(--mist);
  color: var(--espresso);
  box-shadow: var(--shadow-float);
  rotate: 6deg;
}

.bubble::after {
  content: "";
  position: absolute;
  left: -1.1rem;
  bottom: 0;
  width: 1.6rem;
  height: 1.5rem;
  background: var(--mist);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.bubble__word {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
}

.bubble__note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

@media (max-width: 55.99rem) {
  .window::before {
    display: none;
  }
}

/* Page-load choreography. html.motion is only set when the page loads in a
   visible tab without reduced motion (see <head>), so a page that loads in the
   background or in a paused renderer shows everything at rest, never blank. */

.motion .hero__kicker {
  animation: rise 0.9s var(--ease-out) 0.05s both;
}

.motion .hero__title .w {
  animation: word-in 1.05s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--i) * 65ms);
}

.motion .hero__squiggle path {
  animation: draw 1.1s var(--ease-out) 1.05s both;
}

.motion .hero__lead {
  animation: rise 0.9s var(--ease-out) 0.75s both;
}

.motion .hero__actions {
  animation: rise 0.9s var(--ease-out) 0.9s both;
}

.motion .hero__facts {
  animation: rise 0.9s var(--ease-out) 1.05s both;
}

.motion .hero__visual::before {
  animation: fade-in 2s var(--ease-out) 0.6s both;
}

.motion .hero__glass {
  animation: rise 1.2s var(--ease-out) 0.35s both;
}

.motion .window::before {
  animation: cord-drop 0.9s var(--ease-out) 0.1s both;
}

.motion .window__photo {
  animation: photo-on 1.9s var(--ease-out) 0.55s both;
}

.motion .window__glow {
  animation:
    flicker-on 1.5s linear 0.55s both,
    breathe 4.5s ease-in-out 2.4s infinite alternate;
}

.motion .window__badge {
  animation: rise 0.9s var(--ease-out) 1.6s both;
}

.motion .bubble {
  animation: pop 0.9s var(--ease-out) 2s both;
}

/* ---------- Goals (tabs) ---------- */

.goals {
  background: var(--mist);
}

.goals__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .goals__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2.25rem;
}

.tab {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--sage-soft);
  color: var(--espresso);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    translate 0.45s var(--ease-out);
}

.tab::after {
  content: "→";
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.25rem;
  opacity: 0;
  translate: -0.5rem 0;
  transition:
    opacity 0.3s ease,
    translate 0.45s var(--ease-out);
}

.tab:hover:not([aria-selected="true"]) {
  background: oklch(0.86 0.03 174);
}

.tab[aria-selected="true"] {
  background: var(--espresso);
  color: var(--mist);
}

.tab[aria-selected="true"]::after {
  opacity: 1;
  translate: 0 0;
  color: var(--amber);
}

.tab__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.tab__hint {
  grid-column: 1;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.tab[aria-selected="true"] .tab__hint {
  color: oklch(0.86 0.02 174);
}

@media (max-width: 55.99rem) {
  .tabs {
    flex-direction: row;
    gap: 0.5rem;
    margin-inline: -1rem;
    padding: 0 1rem 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: none;
    padding: 0.75rem 1.2rem;
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .tab::after,
  .tab__hint {
    display: none;
  }
}

.goals__panels {
  display: grid;
  gap: 1.25rem;
}

.panel {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 1.75rem;
  background: var(--surface);
  box-shadow:
    0 1px 0 oklch(0.24 0.035 42 / 0.06),
    0 1.75rem 3rem -2.25rem oklch(0.24 0.035 42 / 0.35);
}

.tabs-used .panel:not([hidden]) {
  animation: panel-in 0.6s var(--ease-out);
}

.panel__title {
  font-size: var(--step-3);
}

.panel__list {
  display: grid;
  gap: 0.8rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.panel__list li,
.ticket__list li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.panel__list li::before,
.ticket__list li::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--terracotta);
  rotate: 45deg;
  translate: 0 -0.12em;
}

.panel__fit {
  margin-top: 1.75rem;
  color: var(--ink-soft);
}

.panel__fit strong {
  color: var(--espresso);
}

.phrase {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 2px dashed var(--line-soft);
  border-radius: var(--radius);
  background: var(--mist);
}

.phrase blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--terracotta-deep);
}

.phrase figcaption {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.panel__more {
  margin-top: 1.5rem;
  font-weight: 700;
}

.panel__more a,
.review__more a {
  color: var(--terracotta-deep);
  text-decoration-thickness: 2px;
}

.panel__more a::after {
  content: " →";
}

/* ---------- About / route ---------- */

.about {
  background: var(--sage);
  color: var(--espresso);
}

.about__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

@media (min-width: 56rem) {
  .about__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
  }
}

.about__text {
  max-width: 60ch;
}

.about__text p + p {
  margin-top: 1rem;
}

.about__keepsakes {
  position: relative;
  isolation: isolate;
  width: min(100%, 19rem);
  margin-top: 2.25rem;
}

.postcard {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.65rem;
  background: var(--surface);
  border-radius: 0.4rem;
  box-shadow: var(--shadow-float);
  rotate: -2.5deg;
}

.postcard img {
  width: 100%;
  height: auto;
  border-radius: 0.2rem;
}

@media (max-width: 55.99rem) {
  .about__keepsakes {
    width: min(70%, 16rem);
    margin-inline: auto;
  }
}

.signature {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: oklch(0.4 0.1 42);
  rotate: -3deg;
  transform-origin: left;
}

.route {
  --dot: 2.25rem;
  --gap: 1.5rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  margin: clamp(3.5rem, 8vw, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
  view-timeline-name: --route;
}

.stop {
  position: relative;
  padding-top: calc(var(--dot) + 1.25rem);
}

.stop::before {
  /* Track segment to the next station */
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2);
  left: calc(var(--dot) / 2);
  width: calc(100% + var(--gap));
  height: 24px;
  translate: 0 -50%;
  background: var(--terracotta);
  /* Winding pirate-map trail: a fixed-size wave tile repeated, never stretched */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12C20 0 20 0 40 12S60 24 80 12' pathLength='90' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='9 6'/%3E%3C/svg%3E") left center / 80px 24px round no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12C20 0 20 0 40 12S60 24 80 12' pathLength='90' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='9 6'/%3E%3C/svg%3E") left center / 80px 24px round no-repeat;
  -webkit-mask-repeat: round no-repeat;
  mask-repeat: round no-repeat;
}

.stop:last-child::before,
.route.has-trail .stop::before {
  display: none;
}

/* Hand-drawn trail built by main.js; the CSS track above is the no-JS fallback */
.route__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.route__path {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 9;
}

.route__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 40;
  stroke-linecap: round;
}

.route.has-trail .stop__dot {
  z-index: 1;
}

.stop__dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised);
  width: var(--dot);
  height: var(--dot);
  border: 6px solid var(--espresso);
  border-radius: 999px;
  background: var(--surface);
}

.stop--interchange .stop__dot {
  width: calc(var(--dot) * 1.7);
}

.stop--here .stop__dot {
  background: var(--amber);
  animation: pulse 2.4s ease-out infinite;
}

.stop--next .stop__dot {
  /* Hollow dashed ring; the sage fill hides the track that ends at its centre */
  border: 0;
  background:
    radial-gradient(closest-side, var(--sage) calc(100% - 6px), transparent calc(100% - 6px)),
    repeating-conic-gradient(var(--espresso) 0 30deg, transparent 30deg 45deg);
}

.stop__name {
  font-size: var(--step-1);
  line-height: 1.15;
}

.stop__name a {
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
}

.stop__name a:hover {
  text-decoration-color: var(--terracotta-deep);
}

.stop__text {
  margin-top: 0.45rem;
  font-size: 1rem;
  line-height: 1.5;
  color: oklch(0.28 0.03 42);
}

.stop__lines {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.stop__lines span {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--on-dark);
  background: var(--crimson);
}

.stop__lines span + span {
  background: var(--denim);
}

@media (max-width: 55.99rem) {
  .route {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stop {
    padding: 0.1rem 0 2.25rem calc(var(--dot) + 1.25rem);
  }

  .stop::before {
    top: calc(var(--dot) / 2);
    left: calc(var(--dot) / 2);
    width: 24px;
    height: 100%;
    translate: -50% 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 80'%3E%3Cpath d='M12 0C0 20 0 20 12 40S24 60 12 80' pathLength='90' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='9 6'/%3E%3C/svg%3E") center top / 24px 80px no-repeat round;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 80'%3E%3Cpath d='M12 0C0 20 0 20 12 40S24 60 12 80' pathLength='90' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='9 6'/%3E%3C/svg%3E") center top / 24px 80px no-repeat round;
    -webkit-mask-repeat: no-repeat round;
    mask-repeat: no-repeat round;
  }

  .stop--interchange .stop__dot {
    width: var(--dot);
    height: calc(var(--dot) * 1.7);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stop::before {
      animation: grow-x linear both;
      animation-timeline: --route;
    }

    .stop:nth-child(1)::before { animation-range: entry 40% cover 30%; }
    .stop:nth-child(2)::before { animation-range: cover 24% cover 36%; }
    .stop:nth-child(3)::before { animation-range: cover 30% cover 42%; }
    .stop:nth-child(4)::before { animation-range: cover 36% cover 48%; }

    .stop__dot {
      animation: dot-in linear both;
      animation-timeline: view();
      animation-range: entry 80% cover 30%;
    }

    .stop--here .stop__dot {
      animation:
        dot-in linear both,
        pulse 2.4s ease-out infinite;
      animation-timeline: view(), auto;
      animation-range: entry 80% cover 30%, normal;
    }

    @media (max-width: 55.99rem) {
      .stop::before {
        animation-name: grow-y;
        animation-timeline: view();
        animation-range: cover 20% cover 45% !important;
      }
    }
  }
}

/* ---------- British / American / Australian ---------- */

.variants {
  --focus: var(--amber-glow);
  position: relative;
  background: var(--frame);
  color: var(--on-dark);
}

.variants::before {
  /* A strip of the window across the top */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22px;
  background-color: oklch(0.92 0.015 170);
  background-image: var(--glass);
  background-size: 22px 44px;
  background-position: center;
  border-bottom: 5px solid var(--frame);
}

.variants__head {
  max-width: 50rem;
}

.koala-sign {
  /* Tucked behind the postcard, peeking out on the right. The foot of the
     pole (the pivot) stays hidden behind the card; hover only swings it out. */
  position: absolute;
  right: 0;
  bottom: 1.75rem;
  z-index: 0;
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: auto;
  translate: 30% 0;
  rotate: 6deg;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0.6rem 0.8rem oklch(0 0 0 / 0.35));
}

.about__keepsakes:hover .koala-sign {
  rotate: 28deg;
}

@media (prefers-reduced-motion: no-preference) {
  .koala-sign {
    transition: rotate 0.5s var(--ease-out);
  }
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.flag {
  flex: none;
  width: 1.7rem;
  height: 0.9rem;
  border-radius: 0.3rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.25);
}

.variants .accent {
  color: var(--amber-glow);
}

.variants .lede {
  color: oklch(0.9 0.01 295);
}

.switcher {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 2.5rem 0 0;
  padding: 0.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--frame-raised);
}

.switcher__option {
  position: relative;
}

.switcher__option input {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switcher__option > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  font-weight: 700;
  color: oklch(0.92 0.01 295);
  transition:
    background-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out);
}

.switcher__option:hover > span {
  background: oklch(1 0 0 / 0.08);
}

.switcher__option input:checked + span {
  background: var(--amber);
  color: var(--espresso);
}

.switcher__option input:focus-visible + span {
  outline: 3px solid var(--amber-glow);
  outline-offset: 2px;
}

.switcher small {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--crimson);
  color: var(--on-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 34rem) {
  .switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-radius: 1.4rem;
  }

  .switcher__option > span {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.3rem;
    border-radius: 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.15;
  }
}

.words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 2.25rem 0 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 2px solid var(--frame-raised);
  border-radius: var(--radius);
  background: var(--frame-raised);
}

.word {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 1.2rem 1.3rem 1.35rem;
  background: var(--frame);
}

.word:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 40rem) {
  .words {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .word:last-child {
    grid-column: auto;
  }
}

.word__no {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sage);
}

.word__en {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--on-dark);
}

.word__en > span {
  display: none;
}

.word__en > .uk,
.variants:has(#v-us:checked) .word__en > .us,
.variants:has(#v-au:checked) .word__en > .au {
  display: inline-block;
}

/* With JS, one live span shows the word and scrambles between variants
   (main.js); the real variant spans stay for screen readers only. */
.variants.is-scrambling .word__en > span:not(.word__live, .word__sizer) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The sizer holds the box at the tallest variant; the live word floats over
   it, so changing lengths and scrambled letters never resize the box. */
.variants.is-scrambling .word__en {
  position: relative;
}

.word__en > .word__sizer {
  display: grid;
  visibility: hidden;
}

.word__sizer > span {
  grid-area: 1 / 1;
}

.word__en > .word__live {
  display: block;
  position: absolute;
  inset: 0;
}

.word__live span {
  display: inline-block;
  white-space: pre;
}

.word__live .scramble {
  color: var(--amber-glow);
}

/* Each changed letter hops as it lands on the new spelling */
@media (prefers-reduced-motion: no-preference) {
  .word__live .scramble {
    translate: 0 -0.12em;
  }

  .word__live .hop {
    animation: letter-hop 0.45s var(--ease-out);
  }
}

@keyframes letter-hop {
  0% { translate: 0 -0.12em; }
  35% { translate: 0 -0.35em; }
  70% { translate: 0 0.04em; }
  100% { translate: 0 0; }
}

.variants:has(#v-us:checked) .word__en > .uk,
.variants:has(#v-au:checked) .word__en > .uk {
  display: none;
}

.variants__note {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: oklch(0.88 0.01 295);
}

/* ---------- Prices (tickets) ---------- */

.prices {
  --focus: var(--amber-glow);
  background: var(--terracotta-deep);
  color: var(--on-dark);
}

.prices__head {
  max-width: 46rem;
}

.tickets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: clamp(2.75rem, 6vw, 4rem);
}

@media (min-width: 56rem) {
  .tickets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}

.ticket {
  --stub: 4.25rem;
  --notch: 0.8rem;
  filter: drop-shadow(0 1.5rem 1.6rem oklch(0.2 0.05 40 / 0.4));
  rotate: -1.2deg;
  transition:
    rotate 0.6s var(--ease-out),
    translate 0.6s var(--ease-out);
}

.ticket--adult {
  rotate: 1deg;
}

.ticket:hover,
.ticket:focus-within {
  rotate: 0deg;
  translate: 0 -4px;
}

.ticket__paper {
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  height: 100%;
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--espresso);
  /* Punched notches where the stub tears off */
  -webkit-mask:
    radial-gradient(circle at var(--stub) 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--stub) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--stub) 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--stub) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
}

.ticket__stub {
  display: grid;
  place-items: center;
  border-right: 3px dashed oklch(0.24 0.035 42 / 0.35);
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--amber);
}

.ticket--adult .ticket__stub {
  background: var(--sage);
}

.ticket__age {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: 1.0625rem;
  font-weight: 800;
  white-space: nowrap;
}

.ticket__body {
  padding: 2rem clamp(1.4rem, 3vw, 2.4rem) 2.25rem;
}

.ticket__title {
  font-size: var(--step-2);
}

.ticket__price {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 3.5vw, 4.6rem);
  line-height: 1;
  color: var(--terracotta-deep);
}

.ticket__from {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.ticket__unit {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.ticket__list {
  display: grid;
  gap: 0.55rem;
  margin: 1.6rem 0 1.9rem;
  padding: 0;
  list-style: none;
}

.ticket .btn {
  --focus: var(--terracotta-deep);
}

@media (max-width: 30rem) {
  .ticket {
    --stub: 3.25rem;
  }

  .ticket .btn {
    width: 100%;
    padding-inline: 1rem;
  }
}

.prices__where {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 46rem;
  margin-top: clamp(2.75rem, 6vw, 4rem);
}

.prices__where svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  fill: var(--amber-glow);
}

/* ---------- Review ---------- */

.review {
  background: var(--mist);
}

.review__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .review__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 5rem;
  }
}

.review__card {
  margin: 0;
}

.stars {
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--gold);
  -webkit-text-stroke: 1.5px var(--terracotta-deep);
  paint-order: stroke fill;
}

.review__quote {
  margin: 1.4rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.12;
}

.review__quote .q {
  color: var(--terracotta);
}

.review__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.review__name {
  font-size: var(--step-1);
  font-weight: 800;
}

.review__tag {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--on-dark);
  font-size: 0.9375rem;
  font-weight: 700;
}

.review__more {
  margin-top: 2rem;
  font-weight: 700;
}

.review__glass {
  aspect-ratio: 3 / 4;
  border: 10px solid var(--frame);
  border-radius: 50% 50% 1rem 1rem / 34% 34% 1rem 1rem;
  background-size: 56px 112px;
  box-shadow: var(--shadow-float);
}

@media (max-width: 55.99rem) {
  .review__glass {
    order: -1;
    aspect-ratio: auto;
    height: 5.5rem;
    border-width: 7px;
    border-radius: var(--radius);
    background-size: 36px 72px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .review__glass {
      animation: glass-light linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }

    .ticket {
      animation: ticket-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

/* ---------- Steps ---------- */

.steps {
  background: var(--surface);
}

.steps__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.step {
  position: relative;
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 3.5vw, 6rem);
  line-height: 0.9;
  color: var(--terracotta);
}

@media (min-width: 48rem) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.4rem;
    left: 5.5rem;
    right: -1.5rem;
    border-top: 3px dashed var(--line-soft);
  }
}

.step__title {
  margin-top: 1rem;
  font-size: var(--step-2);
}

.step p {
  max-width: 34ch;
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq {
  background: var(--mist);
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .faq__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 5rem;
    align-items: start;
  }

  .faq__head {
    position: sticky;
    top: 7.5rem;
  }
}

.faq .lede a {
  font-weight: 700;
  color: var(--terracotta-deep);
}

.faq__list details {
  border-bottom: 2px solid var(--sage-soft);
}

.faq__list details:first-child {
  border-top: 2px solid var(--sage-soft);
}

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

.faq__list summary::after {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background:
    linear-gradient(var(--terracotta-deep), var(--terracotta-deep)) center / 100% 3px no-repeat,
    linear-gradient(var(--terracotta-deep), var(--terracotta-deep)) center / 3px 100% no-repeat;
  transition: rotate 0.45s var(--ease-out);
}

.faq__list details[open] summary::after {
  rotate: 135deg;
}

.faq__list summary:hover {
  color: var(--terracotta-deep);
}

.faq__list details p {
  max-width: 60ch;
  padding-bottom: 1.5rem;
  color: var(--ink-soft);
}

.faq__list details a {
  font-weight: 700;
  color: var(--terracotta-deep);
}

.faq__list details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.45s var(--ease-out),
    content-visibility 0.45s allow-discrete;
}

.faq__list details[open]::details-content {
  block-size: auto;
}

/* ---------- Contact ---------- */

.contact {
  --focus: var(--amber-glow);
  background: var(--sage-deep);
  color: var(--on-dark);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

@media (min-width: 56rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.direct {
  display: grid;
  gap: 0.75rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.direct__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 1rem;
  background: oklch(1 0 0 / 0.08);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    background-color 0.3s ease,
    translate 0.45s var(--ease-out);
}

.direct__link:hover {
  background: oklch(1 0 0 / 0.15);
  translate: 0.25rem 0;
}

.direct__link svg {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--amber);
  fill: var(--espresso);
}

.direct__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: oklch(0.95 0.025 174);
}

/* The hover fill is lighter, so the label goes full white to keep 4.5:1. */
.direct__link:hover .direct__label {
  color: var(--on-dark);
}

.contact__where {
  margin-top: 2rem;
  line-height: 1.6;
}

.form-card {
  --focus: var(--terracotta-deep);
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.75rem;
  background: var(--surface);
  color: var(--espresso);
  box-shadow: 0 2rem 4rem -2rem oklch(0.2 0.03 180 / 0.65);
}

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
}

@media (min-width: 36rem) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.field label {
  font-size: 1rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.75rem 0.95rem;
  border: 2px solid var(--line-soft);
  border-radius: 0.9rem;
  background: var(--mist);
  color: var(--espresso);
  font: inherit;
  font-size: 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    background-color 0.2s ease;
}

.field select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232e1a12' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
  cursor: pointer;
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--sage-deep);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--terracotta-deep);
  background: var(--surface);
  box-shadow: 0 0 0 4px oklch(0.762 0.163 67 / 0.5);
}

.field [aria-invalid="true"] {
  border-color: var(--crimson);
}

.field__hint {
  margin-top: -0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.field__error {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--crimson);
}

.field__error:empty {
  display: none;
}

.field__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.field__counter {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.field__counter.is-near-limit {
  color: var(--crimson);
  font-weight: 700;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__banner {
  padding: 0.95rem 1.1rem;
  border: 2px solid oklch(0.78 0.09 23);
  border-radius: 0.9rem;
  background: oklch(0.96 0.02 23);
  color: var(--crimson);
  font-weight: 600;
}

.form__banner a {
  color: inherit;
  font-weight: 800;
}

.form__privacy {
  font-size: 0.9375rem;
  text-align: center;
  color: var(--ink-soft);
}

.form-success {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2.5rem 0.5rem;
  text-align: center;
  animation: panel-in 0.7s var(--ease-out);
}

.form-success__lamp {
  width: 2.5rem;
  color: var(--espresso);
  filter: drop-shadow(0 0 14px oklch(0.88 0.154 90 / 0.9));
}

.form-success__title {
  font-size: var(--step-3);
}

.form-success__title:focus {
  outline: none;
}

.form-success p {
  max-width: 36ch;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  --focus: var(--amber-glow);
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
  background: var(--espresso);
  color: oklch(0.9 0.015 60);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }
}

.site-footer .wordmark {
  font-size: 2rem;
  color: var(--amber);
}

.site-footer__brand p + p {
  margin-top: 0.75rem;
}

.site-footer ul {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__grid a {
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer__grid a:hover {
  color: var(--amber);
  text-decoration: underline;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 0.14);
  font-size: 0.9375rem;
  color: oklch(0.82 0.015 60);
}

.site-footer__base a {
  color: var(--amber);
  font-weight: 700;
}

/* ---------- Subpages (IELTS, leksehjelp, voksne, English) ---------- */

.hero--page {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 8vw, 6.5rem);
}

/* Capped so a long word like «IELTS-forberedelse» fits on one line on desktop */
.hero--page .hero__title {
  font-size: clamp(2.35rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  overflow-wrap: break-word;
}

.section--surface {
  background: var(--surface);
}

.review__translation {
  margin-top: 0.9rem;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  font-weight: 600;
}

.crumbs li + li::before {
  content: "›";
  margin-right: 0.6rem;
  opacity: 0.75;
}

.crumbs a {
  text-decoration-color: oklch(0.985 0.008 60 / 0.55);
}

.crumbs a:hover {
  text-decoration-color: currentColor;
}

/* Heading on the left, text on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}

.prose {
  max-width: 62ch;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h3 {
  margin-top: 2.25rem;
  font-size: var(--step-2);
}

.prose a {
  font-weight: 700;
  color: var(--terracotta-deep);
}

/* A ruled list of topics, two columns on wider screens */
.topics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 3rem;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--sage-soft);
}

@media (min-width: 48rem) {
  .topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.topics > li {
  padding: 1.6rem 0 1.75rem;
  border-bottom: 2px solid var(--sage-soft);
}

.topics h3 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: var(--step-2);
}

.topics h3::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--terracotta);
  rotate: 45deg;
  translate: 0 -0.15em;
}

.topics p {
  max-width: 44ch;
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

.topics a {
  font-weight: 700;
  color: var(--terracotta-deep);
}

/* The four parts of IELTS: two by two, then one row on wide screens */
@media (min-width: 48rem) {
  .steps__list--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }
}

@media (min-width: 48rem) and (max-width: 71.99rem) {
  .steps__list--four .step::after {
    display: none;
  }
}

@media (min-width: 72rem) {
  .steps__list--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step .step__meta {
  margin-top: 0.35rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--terracotta-deep);
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 2rem 1rem;
  background: var(--terracotta);
  color: var(--on-dark);
  text-align: center;
}

.lost h1 {
  font-size: var(--step-5);
}

.lost p {
  max-width: 36ch;
  margin: 1.25rem auto 2rem;
  font-size: var(--step-1);
}

/* ---------- Keyframes ---------- */

/* No opacity step: the headline is the page's largest element, and starting
   it transparent would hold back Largest Contentful Paint until it fades in. */
@keyframes word-in {
  from {
    transform: translateY(0.4em);
    filter: blur(8px);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes photo-on {
  from {
    filter: brightness(0.58) saturate(0.75);
  }
}

@keyframes flicker-on {
  0% { opacity: 0; }
  8% { opacity: 0.75; }
  12% { opacity: 0.1; }
  20% { opacity: 0.95; }
  25% { opacity: 0.4; }
  36% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes breathe {
  to {
    opacity: 0.7;
  }
}

@keyframes cord-drop {
  from {
    transform: scaleY(0);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    scale: 0.55;
    rotate: -10deg;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 oklch(0.762 0.163 67 / 0.6);
  }
  100% {
    box-shadow: 0 0 0 16px oklch(0.762 0.163 67 / 0);
  }
}

/* Reveal by unmasking rather than scaling, so dashed tracks keep their spacing */
@keyframes grow-x {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes grow-y {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes dot-in {
  from {
    scale: 0.3;
  }
}

@keyframes glass-light {
  from {
    filter: brightness(0.75) saturate(0.7);
  }
}

@keyframes ticket-in {
  from {
    translate: 0 2.5rem;
    scale: 0.96;
  }
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn.is-sending .btn__label::after {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}