/* VISITING ICELAND - lakeview.is landing composition (values lifted from
   post-8.css + measured teardown) × vita-travel motion system (app.min.js).
   References: _docs/lakeview-teardown.md · _docs/vita-travel-teardown.md.
   Direction B tokens carry the palette; composition and geometry are lakeview's. */

/* ---------- fonts (Icelandic cmap verified) ---------- */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-v26-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-v26-latin_latin-ext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-v26-latin_latin-ext-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Server Mono"; src: url("../fonts/ServerMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- tokens: direction B palette · lakeview geometry ---------- */
:root {
  --paper: #F4F5F7;
  --surface: #FFFFFF;
  --tint: #ECEEF1;              /* lakeview's #F6F6F6 role, cooled to our palette */
  --ink: #12151A;
  --body: #3A404A;
  --muted: #5A616B;
  --hairline: #D9DCE2;
  --accent: #123FA8;
  --band-ink: #12151A;
  --band-surface: #1C2026;      /* lakeview testimonial-card #1f1f1f role */
  --band-text: #E9EDF3;
  --band-body: #C2C9D2;
  --band-muted: #A9B1BC;
  --band-hairline: rgba(233, 237, 243, 0.14);

  --serif: "Newsreader", Georgia, serif;
  --sans: "Switzer", -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Server Mono", "SF Mono", Menlo, monospace;

  /* lakeview literals */
  --frame-gap: 20px;            /* hero inset: 130px 20px 20px 20px */
  --r-frame: 40px;
  --r-card: 15px;
  --r-pill: 200px;
  --tile-h: 400px;
  --tile-h-sm: 300px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-pad: clamp(5rem, 8vw, 7.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Belt and braces for the same thing: where iOS has already wrapped text in
   its own detector link, take the colour and the tap back. pointer-events
   none lets the tap fall through to the control underneath, which is the
   chip the visitor was actually aiming at. */
a[x-apple-data-detectors],
a[x-apple-data-detectors] span {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  pointer-events: none;
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- opening reveal (ported from birtingaholt) ---------- */
body.is-loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; align-items: center; justify-content: center; }
/* handoff: the ground and the photo window drop away, the wordmark stays alive
   above the expanding hero so it can dissolve on its own curve */
.loader.is-handoff { background: transparent; pointer-events: none; }
.loader.is-handoff .loader_box { visibility: hidden; }
.loader.is-done { display: none; }
.loader_line { display: flex; align-items: center; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 6vw, 4.6rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); line-height: 1; }
.loader_word { display: flex; overflow: clip; }
.loader_word--a { justify-content: flex-end; }
.loader_word--b { justify-content: flex-start; }
/* parked in CSS, not by JS: otherwise the words paint at their natural
   position for a frame, then jump down when GSAP sets them, then rise */
.loader_word i { font-style: normal; display: inline-block; transform: translateY(100%); }
/* the loader's own face must be loaded before it animates, or the wordmark
   swaps from the fallback serif mid-reveal */
.loader_line { font-synthesis: none; }
/* the box is geometrically STATIC from frame one: the photo window opens by
   clip-path, never by layout, so the image inside can be aligned exactly onto
   the hero frame's crop and never drifts */
.loader_box { position: relative; display: inline-block; width: 1em; height: 1em; margin: 0 0.14em; }
.loader_grow { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; clip-path: inset(0% 50% 0% 50% round 8px); }
.loader_frame { position: absolute; left: 0; top: 0; }
.loader_layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } body.is-loading { overflow: auto; } }

.container { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--muted); }
.split-line { display: block; will-change: transform; }

/* ---------- headings: lakeview grammar - grotesk with a muted ITALIC serif accent ---------- */
.h-sec {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.12;
  letter-spacing: -0.01em; color: var(--ink);
  text-align: center;
}
.h-sec i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--muted); }
.h-sec--left { text-align: left; }
.h-sec--onphoto { color: #fff; }
.h-sec--onphoto i { color: rgba(255, 255, 255, 0.75); }
.band-dark .h-sec { color: var(--band-text); }
.head-center { display: flex; flex-direction: column; align-items: center; }
.head-sub { margin-top: 0.9rem; color: var(--muted); font-size: 1rem; text-align: center; max-width: 52ch; }
.head-sub--left { text-align: left; margin-inline: 0; }
.head-sub--dark { color: var(--band-muted); }

/* ---------- buttons: lakeview pill literals (radius 200, padding 15/30, h 55) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.9375rem;
  padding: 15px 30px; border-radius: var(--r-pill); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn .arr { display: inline-block; transition: transform 0.4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent); }
.btn--paper { background: #fff; color: var(--ink); }
.btn--paper:hover { background: var(--paper); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }

.chip {
  display: inline-block; padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem; font-weight: 400; letter-spacing: 0.01em;
}

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

/* ---------- the frame device: lakeview's inset rounded sections ---------- */
.frame { position: relative; margin: var(--frame-gap); border-radius: var(--r-frame); overflow: hidden; }

/* ---------- sticky page nav (slides in after the hero) ---------- */
.nav--page {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%); transition: transform 0.5s var(--ease);
}
@supports (backdrop-filter: blur(8px)) { .nav--page { backdrop-filter: blur(8px); } }
.nav--page.is-visible { transform: translateY(0); }
.nav__inner { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; text-transform: uppercase; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-size: 0.9375rem; font-weight: 500; color: var(--body); text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), background-size 0.45s var(--ease);
}
.nav__links a:hover { color: var(--accent); background-size: 100% 1px; }
.nav__wordmark { transition: letter-spacing 0.45s var(--ease); }
.nav__wordmark:hover { letter-spacing: 0.06em; }
@media (max-width: 767px) { .nav--page { display: none; } }

/* On a phone the front page had no bar at all: the page nav was switched off
   and the burger was left as a 52px disc fixed over whatever happened to be
   beneath it. Measured on an iPhone 17 in the simulator, at the catalogue it
   sat on top of a card's title, and it does that at every scroll position
   because nothing ever moves it. So the bar comes back on the front page too,
   carrying the wordmark, and the burger docks into it once the hero has gone -
   which is exactly the moment it would otherwise start covering content. The
   tour pages have had their own bar all along (.nav--tour in tour.css). */
@media (max-width: 767px) {
  .nav--page:not(.nav--tour) { display: block; }
  .nav--page:not(.nav--tour) .nav__links,
  .nav--page:not(.nav--tour) .nav__inner > .btn { display: none; }
  .nav--page:not(.nav--tour) .nav__inner { height: 60px; }
  /* same duration and curve as the bar, so the two arrive together */
  .burger { transition: top 0.5s var(--ease), right 0.5s var(--ease); }
  body.nav-docked .burger { top: 4px; right: 12px; }
}

/* ---------- burger + full-screen menu (mobile) ---------- */
.burger {
  position: fixed; top: calc(var(--frame-gap) + 14px); right: calc(var(--frame-gap) + 14px);
  z-index: 50; display: none;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
@supports (backdrop-filter: blur(10px)) { .burger { backdrop-filter: blur(10px); } }
.burger:active { transform: scale(0.94); }
.burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 1px;
  transition: transform 0.45s var(--ease), background-color 0.3s var(--ease);
}
body.menu-open .burger { background: rgba(233, 237, 243, 0.12); }
body.menu-open .burger span { background: var(--band-text); }
body.menu-open .burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
body.menu-open .burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
@media (max-width: 767px) { .burger { display: flex; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--band-ink); color: var(--band-text);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--frame-gap) + 90px) calc(var(--gutter) + 0.5rem) 2.5rem;
  transform: translateY(-102%);
  transition: transform 0.65s var(--ease);
  visibility: hidden; transition-property: transform, visibility;
}
body.menu-open .mobile-menu { transform: translateY(0); visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 10vw, 3.4rem);
  line-height: 1.15; color: var(--band-text); text-decoration: none;
  padding-block: 0.55rem; overflow: clip; display: block;
}
.mobile-menu nav a + a { border-top: 1px solid var(--band-hairline); }
.mobile-menu nav a span {
  display: block; transform: translateY(110%);
  transition: transform 0.7s var(--ease);
}
body.menu-open .mobile-menu nav a:nth-child(1) span { transition-delay: 0.22s; }
body.menu-open .mobile-menu nav a:nth-child(2) span { transition-delay: 0.3s; }
body.menu-open .mobile-menu nav a:nth-child(3) span { transition-delay: 0.38s; }
body.menu-open .mobile-menu nav a span { transform: translateY(0); }
.mobile-menu__foot {
  display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease) 0s, transform 0.6s var(--ease) 0s;
}
body.menu-open .mobile-menu__foot { opacity: 1; transform: translateY(0); transition-delay: 0.48s, 0.48s; }
.mobile-menu__foot .mono { color: var(--band-muted); }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu nav a span, .mobile-menu__foot { transition: none; }
}

/* ---------- 1 · hero: lakeview frame, nav inside, chip + centered H1, split foot ---------- */
.hero {
  min-height: calc(100svh - 2 * var(--frame-gap));
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 110px clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.25rem);
}
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Measured, not guessed: sampling 16 frames of the loop behind the headline,
   the old flat 0.34 left white type at 2.50:1 on the brightest surf frames -
   under the 3:1 floor for large text, and the 17px paragraph at 3.15:1 against
   a 4.5:1 requirement. The base carries the headline; the foot band darkens
   only the bottom third, where the small type sits, so the film keeps its light
   through the middle. Worst frame of 16 sampled: 3.74:1 headline (3:1 floor for
   large text), paragraph and CTA well clear of 4.5:1. */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(18, 21, 26, 0.51) 0%, rgba(18, 21, 26, 0.51) 60%, rgba(18, 21, 26, 0.66) 100%);
}
.hero__nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.6rem clamp(2rem, 4vw, 3.5rem);
}
.hero__wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; }
.hero__links { display: flex; gap: 2.25rem; }
.hero__links a {
  color: rgba(255, 255, 255, 0.85); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), background-size 0.45s var(--ease);
}
.hero__links a:hover { color: #fff; background-size: 100% 1px; }
.hero__wordmark { transition: letter-spacing 0.45s var(--ease); }
.hero__wordmark:hover { letter-spacing: 0.06em; }
.hero__center { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; margin-top: clamp(1rem, 6vh, 4rem); }
.hero__title {
  font-family: var(--sans); font-weight: 400;
  /* the 2.6rem floor forced five ragged lines at 390px, splitting
     "Every Tour, Transfer" across two of them; scaling with the viewport
     instead lets the phrase hold one line down to 360px */
  font-size: clamp(1.85rem, 9vw, 6.25rem); /* lakeview display: 100px at 1440 */
  line-height: 1.04; letter-spacing: -0.5px; color: #fff;
}
.hero__title i { font-family: var(--serif); font-style: italic; font-weight: 400; color: rgba(255, 255, 255, 0.78); }

/* ---------- the word freezes ----------
   The hero film is black sand and cold water, and the one word the whole site
   is about sits still in the middle of it. So it ices over, slowly, and thaws,
   and does it again.

   One element, no overlay and no second copy of the word: the glyphs are
   filled with a gradient clipped to the type, and the gradient is more than
   three times taller than the word, so walking it upwards drags a frost front
   through the letters. The band at the front is the brightest part of the
   gradient because that is where ice is actually forming; behind it the colour
   settles to pale blue, ahead of it nothing has changed.

   Fourteen seconds, and most of them are spent holding still at one end or the
   other. Anything quicker reads as a shimmer sweep rather than weather, and
   this is inside the H1, which a visitor is trying to read.

   @supports guards it because the fill needs transparent text: a browser
   without background-clip:text would render the word invisible instead. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title i {
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Read from the bottom up, because that is the direction ice grows in.
       The first stops alternate: fine horizontal rime bands, laid down where
       the freeze has already been, which is what stops this reading as a
       tinted wash. Then the bright front, then the colour the word had. */
    background-image: linear-gradient(
      to top,
      #bcdcf3 0%,
      #d8ecfb 4%,
      #bfdef4 9%,
      #ddf0ff 14%,
      #c4e1f6 18%,
      #e3f2ff 23%,
      #c9e4f7 28%,
      #ffffff 42%,                       /* the front, where ice is forming */
      rgba(255, 255, 255, 0.78) 54%,     /* the colour the word had before */
      rgba(255, 255, 255, 0.78) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 320%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: freeze 14s ease-in-out infinite;
  }
}
/* 0 → top of the gradient is in view, which is the untouched colour.
   100% → the bottom of it is, which is ice. The paired stops are the holds. */
@keyframes freeze {
  0%,   6%   { background-position: 0 0%; }
  38%,  56%  { background-position: 0 100%; }
  88%,  100% { background-position: 0 0%; }
}
/* Scrolled past, it stops. See the observer in js/main.js: this is a paint
   animation and there is nobody looking at it. */
.hero.is-away .hero__title i { animation-play-state: paused; }

/* Reduced motion keeps the idea and drops the movement: the word is held at
   the point in the cycle where the front has just crossed it, so it still
   reads as iced over, it just never travels. */
@media (prefers-reduced-motion: reduce) {
  .hero__title i { animation: none; background-position: 0 72%; }
}
.hero__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.hero__para { color: rgba(255, 255, 255, 0.9); max-width: 40ch; font-size: 1.0625rem; }
@media (max-width: 767px) {
  .hero { padding: 96px 1.25rem 1.5rem; }
  .brk--m { display: block; }   /* empty span forces the line break; see index.html */
  .hero__links { display: none; }
  .nav__burger { display: flex; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}

/* ---------- 2 · destinations: asymmetric tile rows (tiles 15px radius, 400px rows) ---------- */
.tiles { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 3.25rem; }
.tiles__row { display: grid; gap: 1.1rem; }
.tiles__row--a { grid-template-columns: 1.62fr 1fr 1fr; }
.tiles__row--b { grid-template-columns: repeat(var(--cols, 3), 1fr); }
.tile { position: relative; border-radius: var(--r-card); overflow: hidden; height: var(--tile-h); display: block; background: var(--band-ink); }
.tiles__row--b .tile { height: var(--tile-h-sm); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 21, 26, 0.62), rgba(18, 21, 26, 0.08) 55%); }
/* no supplier photograph published for this region - a designed typographic
   tile, never stock or generated filler */
.tile--ink { background: var(--band-ink); }
.tile--ink::after { background: none; }
.tile--ink::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid var(--band-hairline);
  border-radius: 8px; pointer-events: none;
}
.tile--ink .tile__label b { font-family: var(--serif); font-style: italic; font-weight: 400; }
.tile--ink .tile__go { border-color: var(--band-hairline); }
/* The label and the arrow are both absolutely positioned, so with no right
   boundary the long region names ("Reykjanes & Blue Lagoon", "Snæfellsnes & the
   West") ran straight under the arrow button - at every width, desktop included.
   Stop the label short of the arrow's gutter so it wraps instead of colliding. */
.tile__label {
  position: absolute; left: 1.5rem; bottom: 1.35rem; z-index: 1; color: #fff;
  right: calc(1.35rem + 46px + 0.85rem);
  transition: transform 0.45s var(--ease);
}
.tile:hover .tile__label { transform: translateY(-3px); }
.tile__label b { display: block; font-family: var(--sans); font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.tile__label span { font-family: var(--mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.82); }
.tile__go {
  position: absolute; right: 1.35rem; bottom: 1.35rem; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.tile:hover .tile__go { background: #fff; color: var(--ink); transform: scale(1.05); }
@media (max-width: 1023px) { .tiles__row { grid-template-columns: 1fr 1fr !important; } .tile { height: 300px !important; } }
@media (max-width: 599px) { .tiles__row { grid-template-columns: 1fr !important; } .tile { height: 64vw !important; } }

/* ---------- 3 · about: H2+tall image left · pair, para, CTA, counters right ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.about__left .h-sec { margin-bottom: 2.25rem; }
.about__tall { border-radius: var(--r-card); overflow: hidden; height: 500px; }
.about__tall img { width: 100%; height: 100%; object-fit: cover; }
.about__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.about__pair figure { border-radius: var(--r-card); overflow: hidden; height: 245px; }
.about__pair img { width: 100%; height: 100%; object-fit: cover; }
.about__para { margin-top: 1.75rem; max-width: 56ch; }
.about__right .btn { margin-top: 1.75rem; }
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.counters dd { font-family: var(--sans); font-weight: 400; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.counters dd .plus { color: var(--muted); }
.counters dt { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted); max-width: 16ch; }
@media (max-width: 767px) { .about__grid { grid-template-columns: 1fr; } .about__tall { height: 320px; } }

/* ---------- 4 · experience cards: lakeview white 4×2 grid × vita featured internals ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 3.25rem; }
.card {
  background: var(--surface); border-radius: var(--r-card); padding: 12px 12px 18px;
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18, 21, 26, 0.08); }
.card__photo { border-radius: 9px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tint); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__photo img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 0.5rem 0; flex: 1; }
.card__title { font-family: var(--sans); font-weight: 500; font-size: 1.2rem; /* lakeview 28px role, fitted */ line-height: 1.25; color: var(--ink); }
.card__cost { display: flex; align-items: baseline; gap: 0.4rem; }
.card__cost .from { color: var(--muted); font-size: 0.9375rem; }
.card__cost .price { font-family: var(--mono); font-size: 1rem; color: var(--ink); }
.card__props { display: flex; flex-direction: column; gap: 0.55rem; margin-top: auto; }
.card__prop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card__prop .t { font-size: 0.8125rem; letter-spacing: -0.2px; color: var(--body); line-height: 1.2; }
.card__prop svg { width: 14px; height: 14px; opacity: 0.25; flex: none; stroke: var(--ink); }
.card__btn {
  white-space: nowrap;
  margin-top: 1rem; display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--r-pill);
  padding: 13px 17px 13px 20px; font-size: 0.875rem; font-weight: 500;
  transition: background-color 0.3s var(--ease);
}
/* the label is ONE flex item: without the wrapper, space-between spreads
   "Explore" / "experience" / "→" into three evenly-gapped columns */
.card__btn-label, .btn__label { white-space: nowrap; }
.card:hover .card__btn { background: var(--accent); }
.card__btn .arr { transition: transform 0.4s var(--ease); }
.card:hover .card__btn .arr { transform: translateX(4px); }
.card:hover .card__title { color: var(--accent); }
.card__title { transition: color 0.35s var(--ease); }
.card--all { background: var(--tint); justify-content: space-between; padding: 25px 30px; }
.card--all .eyebrow-plain { font-size: 0.9375rem; color: var(--muted); }
.card--all h3 { font-family: var(--sans); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--ink); margin-top: 0.5rem; text-transform: capitalize; }
.card--all p { margin-top: 0.75rem; font-size: 0.9375rem; }
.card--all .btn { margin-top: 1.5rem; align-self: stretch; justify-content: space-between; white-space: nowrap; }
/* between 1024 and the 4-up grid getting roomy, the full-guide cell is only
   ~220px wide and "Open the catalogue" wrapped to two lines: pull the cell and
   the button padding in so the label stays on one line */
@media (min-width: 1024px) and (max-width: 1365px) {
  .card--all { padding: 18px 20px; }
  .card--all .btn { padding: 12px 16px; gap: 0.5rem; font-size: 0.8125rem; }
}
@media (max-width: 1023px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cards { grid-template-columns: 1fr; } }

/* ---------- 5 · why: photos left · stacked icon cards right (lakeview literals 25/30, r15) ---------- */
.why__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.why__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; position: sticky; top: 90px; }
.why__photos figure { border-radius: var(--r-card); overflow: hidden; height: 250px; }
.why__photos img { width: 100%; height: 100%; object-fit: cover; }
.why__cards { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.25rem; }
.why__card {
  display: flex; gap: 1.5rem; align-items: flex-start;
  border-radius: var(--r-card); padding: 25px 30px;
  border: 1px solid var(--hairline); background: var(--surface);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.why__card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(18, 21, 26, 0.07); }
.why__card--fill { background: var(--tint); border-color: transparent; }
.why__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color 0.4s var(--ease), transform 0.4s var(--ease); }
.why__card:hover .why__icon { background: var(--accent); transform: rotate(-8deg); }
.why__icon svg { width: 24px; height: 24px; }
.why__card h3 { font-family: var(--sans); font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.why__card p { margin-top: 0.4rem; font-size: 0.9375rem; }
@media (max-width: 767px) { .why__grid { grid-template-columns: 1fr; } .why__photos { position: static; } }

/* ---------- 6 · CTA band: framed photo, centered ---------- */
.cta { min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__scrim { position: absolute; inset: 0; background: rgba(18, 21, 26, 0.42); }
.cta__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta__sub { color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin-top: 1.1rem; }
.cta__content .btn { margin-top: 2rem; }

/* ---------- 7 · operators dark band, inset frame like lakeview's testimonials ---------- */
.frame.band-dark { border-radius: var(--r-frame); }
.section--in-frame { margin-block: var(--section-pad); }
.operators__inner { padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4.5vw, 4.5rem); }
.band-dark { background: var(--band-ink); color: var(--band-body); }
.operators__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: 3rem; }
.op { display: flex; flex-direction: column; min-width: 0; }
.op__photo { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--band-surface); display: flex; align-items: center; justify-content: center; }
.op__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.op:hover .op__photo img { transform: scale(1.04); }
/* An operator with no photograph we can honestly show becomes a typographic
   card: the plate carries the name, so the label below is dropped rather than
   printing the operator twice. Reads as a choice, not a failed image. */
.op__photo--empty { border: 1px solid rgba(255, 255, 255, 0.09); }
.op__nophoto {
  font-family: var(--serif); font-style: italic; font-size: clamp(0.8125rem, 2.2vw, 1.5rem);
  line-height: 1.3; color: var(--band-body); padding: 0.65rem; text-align: center;
  text-wrap: balance;
  /* "Skemmtigarðurinn" is one unbreakable 16-character word: at 1.5rem it was
     wider than a two-up mobile column and pushed the whole grid open. The clamp
     keeps it inside the column; overflow-wrap is only the last-resort guard. */
  min-width: 0; overflow-wrap: anywhere;
}
.op__body { padding-top: 1rem; }
.op b { display: block; font-family: var(--sans); font-weight: 500; font-size: 1.2rem; color: var(--band-text); }
.op__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; }
.op__meta .mono { color: var(--band-muted); }
@media (max-width: 900px) { .operators__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .operators__list { grid-template-columns: 1fr; } }

/* "or start with what" - real category routes with real counts */
.kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.kind {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92); color: var(--ink); text-decoration: none;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
@supports (backdrop-filter: blur(6px)) { .kind { background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); } }
.kind:hover { background: #fff; transform: translateY(-2px); }
.kind img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.kind__t { font-size: 0.9375rem; font-weight: 500; }
.kind__n { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
@media (max-width: 559px) { .kinds { flex-direction: column; align-items: stretch; } .kind { justify-content: flex-start; } }

/* ---------- 8 · gallery: moving parallax columns (21st.dev 1224 behaviour) ---------- */
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 3.25rem; align-items: start; }
.gallery__col { display: flex; flex-direction: column; gap: 1.1rem; will-change: transform; }
.gallery__col[data-col="1"] { margin-top: 3.5rem; }
.gallery__item { border-radius: var(--r-card); overflow: hidden; }
.gallery__item img { width: 100%; height: auto; display: block; }
.gallery { overflow: clip; }
/* tablet + phone share the flush row grid below; nothing is hidden */
/* mobile gallery: a two-column GRID, not CSS columns. Columns balance by
   height, which always left the last photo standing alone with a hole beside
   it. A grid lays out real rows, so with an even count every photo has a
   partner and the block finishes flush. */
@media (max-width: 1023px) {
  .gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .gallery__col, .gallery__col[data-col="2"] { display: contents; }
  .gallery__item { margin-bottom: 0; aspect-ratio: 4 / 3; }
  .gallery__item img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- 9 · footer: pointer-lit giant wordmark (Cocoon lineage) ---------- */
.footer { padding-top: var(--section-pad); overflow: clip; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
.footer__tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.3; color: var(--band-body); }
.footer__giant {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(4rem, 13.5vw, 12.5rem);
  line-height: 0.92; text-align: center; text-transform: uppercase; letter-spacing: 0.01em;
  margin-top: clamp(3rem, 6vw, 5rem);
  color: #3A424E;
  background-image: radial-gradient(38rem at var(--mx, 50%) var(--my, 40%), #F4F5F7 0%, #6B7686 34%, #3A424E 68%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  user-select: none;
}
/* Three groups, not one column of seven links. The nav grew from three items to
   seven when the legal pages landed and the old single column left a tall thin
   stack beside a one-line tag. */
.footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.footer__note { color: var(--band-muted); }
.footer__col { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.footer__h { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--band-muted); font-weight: 400; margin: 0 0 0.25rem; }
.footer__nav, .footer__col { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.footer__nav a, .footer__col a {
  color: var(--band-body); text-decoration: none;
  background-image: linear-gradient(var(--band-text), var(--band-text));
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), background-size 0.45s var(--ease);
}
.footer__nav a:hover, .footer__col a:hover { color: var(--band-text); background-size: 100% 1px; }
.footer__meta { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__meta .mono { color: var(--band-muted); }
.footer__legal { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem; margin-top: 4rem; }
.footer__legal .legal-rule { position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: var(--band-hairline); transform-origin: left center; }
.footer__legal .mono { color: var(--band-muted); }
.footer__legal a { color: var(--band-body); }
@media (max-width: 767px) {
  /* the two link groups stay side by side so the footer does not become a
     four-screen scroll on a phone */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; gap: 0.5rem; }
}

/* mobile frame gap tightens */
@media (max-width: 767px) { :root { --frame-gap: 10px; --r-frame: 22px; } }

/* iOS: inputs never below 16px */
@media (pointer: coarse) { input, select, textarea { font-size: 1rem; } }

/* ---- touch targets: 44px minimum on coarse pointers (Apple HIG / WCAG) ---- */
@media (pointer: coarse) {
  /* footer links were 29px tall, under the 44px target minimum */
  .footer__col a, .footer__nav a, .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__col, .footer__nav { gap: 0.25rem; }
  .hero__wordmark, .nav__wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-menu nav a { min-height: 48px; display: flex; align-items: center; }
  .footer__nav a, .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .kind { min-height: 48px; }
}

/* ---- mobile: tours sit two side by side, not one per screen ----
   A full-width card per tour turned browsing into an endless scroll. Two up
   halves the column height and lets the eye compare price and place at a
   glance, so the internals scale down to stay readable at ~168px wide. */
@media (max-width: 599px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .card { padding: 8px 8px 12px; }
  .card__body { padding: 0.75rem 0.35rem 0; gap: 0.6rem; }
  .card__title { font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card__cost { flex-wrap: wrap; gap: 0.2rem 0.4rem; }
  .card__cost .from { font-size: 0.8125rem; }
  .card__cost .price { font-size: 0.875rem; }
  .card__props { gap: 0.4rem; }
  .card__prop .t { font-size: 0.75rem; }
  .card__prop svg { width: 12px; height: 12px; }
  /* the third property is the operator name, already on the card meta: drop it
     here so two-up cards keep an even height instead of ragged bottoms */
  .card__prop:nth-child(3) { display: none; }
  .card__btn { padding: 11px 14px; font-size: 0.8125rem; justify-content: space-between; gap: 0.4rem; }
  .card__btn .btn-word { display: none; }   /* "Explore experience" cannot fit 168px without wrapping */
  /* Seven tours plus a full-width closing cell left the seventh card stranded
     alone in its row. The closing cell takes the eighth slot instead, so the
     grid ends on four even rows; the tint background keeps it reading as the
     catalogue door rather than an eighth tour. */
  .card--all { padding: 14px 14px 16px; }
  .card--all .eyebrow-plain { font-size: 0.75rem; }
  .card--all h3 { font-size: 1rem; margin-top: 0.3rem; }
  /* the eyebrow is a <p> too - a bare "p" here silently ate "The full guide" */
  .card--all p:not(.eyebrow-plain) { margin-top: 0.45rem; font-size: 0.8125rem; }
  .card--all .btn {
    margin-top: auto; padding: 11px 14px; font-size: 0.8125rem;
    gap: 0.4rem; white-space: nowrap;
  }
  .card--all .btn .btn-full { display: none; }

  /* operators: same treatment, six full-width cards was the same problem */
  .operators__list { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .op b { font-size: 1rem; line-height: 1.25; }
  .op__meta { gap: 0.2rem 0.6rem; }
  .op__meta .mono { font-size: 0.6875rem; }
  .op__body { padding-top: 0.7rem; }
}

/* ---------- 6b · the full catalogue: every product, by region ----------
   Hairline rows, not cards. The seven featured cards above carry the
   photography; this block carries the links, so it is set as a ledger the eye
   can scan for a price, and it has to read the same to a crawler and a person. */
.all__groups { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: 3rem; }
.all__group { scroll-margin-top: 90px; }
.all__h { font-family: var(--sans); font-weight: 500; font-size: 1.375rem; color: var(--ink); display: flex; align-items: baseline; gap: 0.75rem; }
.all__h .mono { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; }
.all__lede { margin-top: 0.4rem; color: var(--muted); font-size: 0.9375rem; max-width: 62ch; }
.all__list { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.all__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem 1.5rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--hairline); }
.all__link { color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1.35; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.all__link:hover { text-decoration: underline; text-decoration-color: currentColor; }
.all__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.all__meta .mono, .all__price { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.all__price { color: var(--ink); }
@media (max-width: 767px) {
  .all__row { grid-template-columns: minmax(0, 1fr) auto; }
  .all__meta { grid-column: 1 / -1; }
}

/* ---------- 8b · questions: native disclosure, no script ---------- */
.faq__inner { max-width: 760px; }
.faq__list { margin-top: 2rem; border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--ink); position: relative; min-height: 44px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; position: absolute; right: 0.25rem; top: 0.95rem; font-family: var(--mono); color: var(--muted); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 1.1rem; color: var(--body); line-height: 1.6; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq__item summary::after { transition: none; } }

/* ---------- the studio credit ----------
   The wordmark is the real one: SNDR in Projekt Blackbird, the face the studio's
   own site sets it in, outlined from the font so no webfont has to be shipped,
   with the spark taken verbatim from the brand favicon and left in the brand
   orange. It is inlined rather than an <img> so currentColor reaches it and it
   works on a dark band and on paper.

   "Designed by" lives INSIDE the anchor. Outside it, the anchor's own 44px
   min-height centred the mark against a text baseline and the two sat on
   different lines. */
.footer__credit { margin: 0; }
.sndr {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: inherit; text-decoration: none;
}
.sndr__by { color: var(--band-muted); }
.sndr__mark {
  height: 0.95em; width: auto; display: block;
  color: var(--band-body);
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sndr:hover .sndr__mark { color: var(--band-text); }
.sndr:hover .sndr__by { color: var(--band-body); }
@media (pointer: coarse) { .sndr { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .sndr__mark { transition: none; } }

/* ---------- region index on the front page ----------
   Six rows, not a hundred and nine. Each one is a door to a page, so it carries
   a name, what is there and a count, and nothing else. */
.regions__list { margin-top: 3rem; border-top: 1px solid var(--hairline); }
.regions__row {
  display: grid; grid-template-columns: minmax(0, 24ch) minmax(0, 1fr) auto auto;
  gap: 0.4rem 1.75rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
  transition: padding-left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.regions__row:hover { padding-left: 0.5rem; }
.regions__name { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--ink); }
.regions__intro { color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.regions__n { font-size: 0.75rem; color: var(--muted); }
.regions__row .arr { color: var(--muted); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.regions__row:hover .arr { transform: translateX(4px); color: var(--ink); }
.regions__also { margin-top: clamp(2.5rem, 5vw, 4rem); }
.regions__also-h { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 1.25rem; }
.cards--also { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  /* The row has four children and the intro spans the width, so auto placement
     pushed the count and the arrow onto a third line and the arrow's column
     collapsed to 0. Place all four explicitly: name, count and arrow on the
     first line, the intro underneath. */
  .regions__row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.35rem 1rem; }
  .regions__name { grid-area: 1 / 1 / 2 / 2; }
  .regions__n    { grid-area: 1 / 2 / 2 / 3; }
  .regions__row .arr { grid-area: 1 / 3 / 2 / 4; }
  .regions__intro { grid-area: 2 / 1 / 3 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .regions__row, .regions__row .arr { transition: none; }
}