/* Lodge Visuals
   Photographs lead; type stays quiet. Caslon for headlines, Hanken for reading,
   Plex Mono for credit lines and camera data (the contact-sheet voice). */

:root {
  --paper: #f3f2ee;
  --paper-2: #e8e7e1;
  --ink: #151813;
  --ink-2: #353a31;
  --muted: #5f655a;
  --line: #d4d3ca;
  --night: #121511;
  --on-dark: #f1f0ea;
  --on-dark-muted: #b4b8aa;
  --accent: #df8f20;      /* brand orange */
  --white: #fff;
  --error: #a3402c;
  /* Channels for tints and shadows, so every translucent colour comes from the palette. */
  --night-rgb: 18 21 17;
  --ink-rgb: 21 24 19;
  --light-rgb: 241 240 234;
  --accent-rgb: 223 143 32;
  /* Corners: photos, small controls, cards and blocks, pills. */
  --r-img: 6px;
  --r-sm: 10px;
  --r-pill: 999px;
  /* Elevation. */
  --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / .06), 0 14px 30px -22px rgb(var(--ink-rgb) / .5);
  --shadow-md: 0 2px 4px rgb(var(--ink-rgb) / .06), 0 26px 52px -30px rgb(var(--ink-rgb) / .55);
  --shadow-lg: 0 34px 72px -32px rgb(var(--night-rgb) / .8);
  --accent-ink: #151813;  /* text on orange fills */
  --sand: #df8f20;

  --display: "Libre Caslon Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  --gutter: clamp(16px, 4.5vw, 64px);
  --max: 1360px;
  --section: clamp(48px, 6vw, 80px);
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; }
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 52ch; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.eyebrow-light { color: var(--on-dark-muted); }

/* Credit line: same corner, same voice, on every large image. */
.credit { position: absolute; right: 16px; bottom: 14px; z-index: 2; margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--on-dark); text-shadow: 0 1px 3px rgb(var(--night-rgb) / .55); text-align: right; pointer-events: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--on-dark); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-outline-light { border-color: rgb(var(--light-rgb) / .7); color: var(--on-dark); }
.btn-outline-light:hover { background: rgb(var(--light-rgb) / .14); border-color: var(--on-dark); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- P1 Floating navigation ---------- */
.nav { position: fixed; z-index: 50; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 2 * var(--gutter))); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: width .4s var(--nav-ease), top .4s var(--nav-ease), background-color .3s var(--nav-ease), box-shadow .3s var(--nav-ease), -webkit-backdrop-filter .3s var(--nav-ease), backdrop-filter .3s var(--nav-ease); }
.nav-bar { display: flex; align-items: center; gap: 28px; padding: 8px 8px 8px 18px; transition: padding .4s var(--nav-ease), gap .4s var(--nav-ease); }
.nav-logo img { width: 132px; height: auto; transition: width .4s var(--nav-ease), filter .3s var(--nav-ease); }
.nav-links a, .nav-cta { transition: color .3s var(--nav-ease), background-color .3s var(--nav-ease), border-color .3s var(--nav-ease); }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; white-space: nowrap; transition: gap .4s var(--nav-ease); }
.nav-links a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav-links a:hover { border-color: currentColor; }
.nav-cta { min-height: 42px; padding: 0 18px; }
.nav-menu { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; place-items: center; }
.nav-menu-icon, .nav-menu-icon::before, .nav-menu-icon::after { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform .2s var(--ease), background-color .2s; }
.nav-menu-icon::before, .nav-menu-icon::after { content: ""; position: absolute; left: 0; }
.nav-menu-icon::before { top: -6px; }
.nav-menu-icon::after { top: 6px; }
.nav-menu[aria-expanded="true"] .nav-menu-icon { background: transparent; }
.nav-menu[aria-expanded="true"] .nav-menu-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-menu[aria-expanded="true"] .nav-menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
/* Desktop: at the top of the page the nav is a transparent bar across the content width.
   Once the page scrolls (site.js adds .is-scrolled) it shrinks to a centred frosted pill. */
@media (min-width: 901px) {
  .nav:not(.is-scrolled) { top: calc(22px + env(safe-area-inset-top, 0px)); width: min(calc(var(--max) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter))); background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav:not(.is-scrolled) .nav-bar { padding: 0; gap: 40px; }
  /* Compact pill hugs its contents: site.js measures them into --nav-compact. */
  .nav.is-scrolled { width: min(var(--nav-compact, 40rem), calc(100% - 2 * var(--gutter))); }
  .nav.is-scrolled .nav-bar { gap: 24px; }
  .nav.is-scrolled .nav-links { gap: 22px; }
  .nav.is-scrolled .nav-logo img { width: 104px; }
  /* Over the homepage hero photo the open bar reads light. */
  .home .nav:not(.is-scrolled) { color: var(--on-dark); }
  .home .nav:not(.is-scrolled) .nav-logo img { filter: invert(1); }
  .home .nav:not(.is-scrolled) .nav-cta { background: var(--on-dark); color: var(--ink); }
}
.menu { display: grid; padding: 4px 18px 16px; border-top: 1px solid var(--line); }
.menu[hidden] { display: none; }
.menu a { padding: 13px 0; font-size: 18px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu a:last-child { border-bottom: 0; }

/* ---------- P2 Hero ---------- */
.hero { position: relative; min-height: max(540px, 100svh); padding-top: calc(112px + env(safe-area-inset-top, 0px)); color: var(--on-dark); background: var(--night); overflow: hidden; display: grid; grid-template-rows: 1fr auto; isolation: isolate; }
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img, .hero-slide video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Slow push-in: each slide starts at full frame and zooms in while it is on screen.
   The leaving slide keeps its zoom running through the fade (site.js adds .is-leaving). */
.hero-slide.is-active img, .hero-slide.is-leaving img { animation: hero-push 9s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes hero-push { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero.is-paused .hero-slide img { animation-play-state: paused; }
.hero-slide .credit { right: var(--gutter); bottom: 128px; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--night-rgb) / .5) 0%, rgb(var(--night-rgb) / .18) 45%, rgb(var(--night-rgb) / 0) 70%), linear-gradient(180deg, rgb(var(--night-rgb) / .45) 0%, rgb(var(--night-rgb) / 0) 26%, rgb(var(--night-rgb) / 0) 42%, rgb(var(--night-rgb) / .72) 100%); }
.hero-copy { align-self: end; display: grid; gap: 18px; padding-bottom: 40px; }
.hero-tag { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: 1.12; letter-spacing: -.02em; max-width: 15ch; }
.hero-sub { font-size: clamp(1rem, 1.35vw, 1.15rem); max-width: 42ch; color: rgb(var(--light-rgb) / .9); }
.hero-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: end; padding-bottom: 32px; }
.hero-pause { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgb(var(--light-rgb) / .7); background: transparent; color: var(--on-dark); cursor: pointer; display: grid; place-items: center; }
.hero-pause:hover { border-color: var(--on-dark); background: rgb(var(--light-rgb) / .12); }
.hero-pause-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hero-pause[aria-pressed="true"] .hero-pause-icon { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-block: 7px solid transparent; margin-left: 3px; }
.hero-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.hero-steps button { width: 100%; display: grid; gap: 7px; padding: 6px 0 0; border: 0; background: none; color: var(--on-dark); text-align: left; cursor: pointer; opacity: .7; transition: opacity .2s; }
.hero-steps button:hover, .hero-steps button[aria-current="true"] { opacity: 1; }
.hero-steps .bar { height: 2px; background: rgb(var(--light-rgb) / .3); position: relative; overflow: hidden; }
.hero-steps .bar i { position: absolute; inset: 0; background: var(--on-dark); transform-origin: left; transform: scaleX(0); }
.hero-steps b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.hero-steps small { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--on-dark-muted); }
.hero-count { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; padding-bottom: 2px; }
.is-done i { transform: scaleX(1) !important; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-alt { background: var(--paper-2); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head .lede { justify-self: end; }

/* ---------- P4 Lodges as links ---------- */
.lodges-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lodges h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.lodges ol { border-top: 1px solid var(--line); }
.lodges li { border-bottom: 1px solid var(--line); }
.lodges li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name arrow" "meta arrow"; gap: 4px 20px; align-items: center; padding: 22px 0; text-decoration: none; }
.lodges-thumb { display: none; }
.lodges-name { grid-area: name; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; transition: transform .35s var(--ease); }
.lodges-meta { grid-area: meta; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lodges-arrow { grid-area: arrow; font-size: 24px; transition: transform .35s var(--ease); }
.lodges li a { position: relative; }
.lodges li a:hover .lodges-name, .lodges li a:focus-visible .lodges-name, .lodges li a.is-active .lodges-name { transform: translateX(10px); }
.lodges li a:hover .lodges-arrow, .lodges li a:focus-visible .lodges-arrow, .lodges li a.is-active .lodges-arrow { transform: translateX(6px); }
.lodges-name, .lodges-meta { transition: transform .35s var(--ease), opacity .35s var(--ease); }
/* Auto-cycle: rows not in focus step back; a bar along the active row's rule shows the timing. */
.is-cycling a:not(.is-active) .lodges-name, .is-cycling a:not(.is-active) .lodges-meta { opacity: .38; }
.lodges-fill { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.is-cycling a.is-active .lodges-fill { animation: lodges-fill 4.5s linear forwards; }
.is-cycling.is-paused .lodges-fill { animation-play-state: paused; }
@keyframes lodges-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lodges-you .lodges-name { color: var(--muted); }
.lodges-preview { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); background: var(--paper-2); }
.lodges-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.lodges-preview img.is-swapping { opacity: 0; }

/* ---------- P6 Featured lodge ---------- */
.feature { position: relative; min-height: min(86svh, 820px); display: grid; align-items: end; color: var(--on-dark); background: var(--night); overflow: hidden; isolation: isolate; }
.feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.feature-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--night-rgb) / 0) 30%, rgb(var(--night-rgb) / .78) 100%); }
.feature-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 64px; align-items: end; padding-block: 120px 72px; }
.feature-copy { display: grid; gap: 18px; justify-items: start; max-width: 560px; }
.feature-copy p:not(.eyebrow) { color: rgb(var(--light-rgb) / .88); }
.figures { display: grid; grid-auto-flow: column; gap: 0 clamp(24px, 4vw, 52px); }
.figures div { display: flex; flex-direction: column-reverse; gap: 6px; }
.figures dt { font-size: 14px; }
.figures dd { font-family: var(--display); font-size: clamp(3rem, 6vw, 5.2rem); line-height: .9; font-variant-numeric: tabular-nums; }
.figures-light dt { color: rgb(var(--light-rgb) / .85); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service { position: relative; aspect-ratio: 3 / 5; overflow: hidden; border-radius: var(--r-img); color: var(--on-dark); background: var(--night); isolation: isolate; }
.service img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; transition: transform .8s var(--ease); }
.service::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--night-rgb) / 0) 40%, rgb(var(--night-rgb) / .82) 100%); }
.service:hover img { transform: scale(1.04); }
.service-copy { position: absolute; left: 20px; right: 20px; bottom: 24px; display: grid; gap: 8px; }
.service-copy h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.05; }
.service-copy p { font-size: 14px; line-height: 1.5; color: rgb(var(--light-rgb) / .88); }
.service .credit { right: 20px; bottom: 16px; font-size: 11px; }

/* ---------- Library sample ---------- */
.library { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
.library li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: baseline; }
.library img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--r-img); background: var(--line); }
.library span { font-size: 15px; font-weight: 500; }
.library b { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Heading and description share one line; the logos run full width beneath, five to a row. */
.platforms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; margin-top: clamp(56px, 7vw, 96px); padding-top: 40px; border-top: 1px solid var(--line); }
.platforms h3 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.platforms p { color: var(--muted); grid-column: 2; grid-row: 1; justify-self: end; max-width: 46ch; }
.platforms ul { grid-column: 1 / -1; grid-row: 2; }
.platform-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.platform-logos li { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 76px; text-align: left; line-height: 1.25; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; font-weight: 500; }
.platform-logos li img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.platform-logos li img.wordmark { width: auto; height: 26px; max-width: 120px; }
.platform-logos li img.wordmark.tall { height: 40px; }

/* ---------- Why it matters, results ---------- */
.big-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Each figure is a solid block so the section holds its own between photo-led sections. */
.big-figure { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: clamp(280px, 30vw, 400px); padding: clamp(28px, 4vw, 52px); border-radius: var(--radius); background: var(--night); color: var(--on-dark); }
.big-figure-alt { background: var(--accent); color: var(--accent-ink); }
.big-figure-alt .big-figure-text { color: rgb(var(--ink-rgb) / .82); }
.big-figure-alt .big-figures-pre { color: rgb(var(--ink-rgb) / .7); }
.big-figure b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(4.5rem, 11vw, 9.5rem); line-height: .85; letter-spacing: -.02em; white-space: nowrap; margin-top: auto; }
.big-figure [data-count] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.big-figure-text { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 30ch; color: rgb(var(--light-rgb) / .86); }
.big-figures-pre { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--light-rgb) / .7); }
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(48px, 6vw, 80px); }
.channels article { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.channels p { color: var(--muted); font-size: 16px; }
.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); border-top: 1.5px solid var(--ink); }
.results div { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 0 0; }
.results div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.results dd { order: -1; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.results dt { font-weight: 500; font-size: 15px; }
.results small { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }

/* ---------- P7 Behind the shot ---------- */
.bts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.bts-stack { position: relative; aspect-ratio: 6 / 5; }
.bts-stack a { position: absolute; width: 76%; display: block; border: 8px solid var(--paper); box-shadow: var(--shadow-md); transition: transform .4s var(--ease); }
.bts-stack a:first-child { left: 0; top: 0; transform: rotate(-2.5deg); }
.bts-stack a:last-child { right: 0; bottom: 0; transform: rotate(1.5deg); }
.bts-stack a:hover { transform: rotate(0) translateY(-6px); z-index: 2; }
.bts-stack img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bts-copy { display: grid; gap: 18px; }
.bts-copy h2 { margin-bottom: 4px; }
.bts-copy > p:not(.eyebrow) { color: var(--ink-2); max-width: 52ch; }
.shot-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.shot-notes dt { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.shot-notes dd { font-size: 16px; line-height: 1.45; }

/* ---------- Packages ---------- */
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 18px; }
/* White cards lift off the paper background; Standard is the dark, raised centrepiece. */
.package { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .45s var(--nav-ease), box-shadow .45s var(--nav-ease), border-color .3s var(--ease); }
.package:hover, .package:focus-within { transform: translateY(-6px); border-color: rgb(var(--ink-rgb) / .35); box-shadow: var(--shadow-md); }
.package-mid { background: var(--night); color: var(--on-dark); border-color: var(--night); margin-block: -18px; padding-block: calc(clamp(24px, 3vw, 36px) + 18px); box-shadow: var(--shadow-lg); }
.package-mid:hover, .package-mid:focus-within { border-color: var(--night); box-shadow: var(--shadow-lg); }
.package-mid ul li::before { background: var(--on-dark-muted); }
.package-mid .btn-ink { background: var(--on-dark); color: var(--ink); }
.package-mid .btn-ink:hover { background: var(--white); }
.package-flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 7px 14px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--shadow-sm); }
.package h3 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.price { font-family: var(--display); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.package-mid .price { font-size: clamp(3rem, 4.6vw, 4rem); }
.price small { font-family: var(--body); font-size: 15px; color: var(--muted); vertical-align: middle; }
.package-mid .price small { color: var(--on-dark-muted); }
.package ul { display: grid; gap: 10px; font-size: 15.5px; }
.package ul li { position: relative; padding-left: 20px; }
.package ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--muted); }
.package .btn { align-self: flex-start; margin-top: auto; }
.addons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 64px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.addons h3 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; margin-bottom: 6px; }
.addons p { color: var(--muted); }
.addons ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.addons li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.terms { margin-top: 32px; color: var(--muted); font-size: 15px; max-width: 80ch; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; font-size: 18px; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--muted); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--ink-2); max-width: 62ch; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); }
.contact-photo { position: relative; min-height: 100%; background: var(--night); }
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-form { padding: var(--section) var(--gutter); display: grid; gap: 18px; align-content: center; max-width: 720px; }
.contact-form h2 { margin-bottom: 4px; }
.form { display: grid; gap: 16px; margin-top: 16px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; }
.optional { font-weight: 400; color: var(--muted); }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); font-size: 16px; font-weight: 400; transition: border-color .2s; }
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .28); }
.form [aria-invalid="true"] { border-color: var(--error); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form-alt { color: var(--muted); font-size: 15px; }
.form-status { font-size: 15px; min-height: 1.5em; }
.form-status.is-error { color: var(--error); }


/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgb(var(--night-rgb) / .96); color: var(--on-dark); display: grid; place-items: center; padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(64px + env(safe-area-inset-bottom, 0px)); }
.lightbox[hidden] { display: none; }
.lightbox-figure { display: grid; gap: 14px; justify-items: center; max-width: 100%; }
.lightbox-figure img { max-width: min(1600px, 100%); max-height: calc(100svh - 170px); width: auto; height: auto; object-fit: contain; }
.lightbox-figure figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--on-dark-muted); text-align: center; }
.lightbox-btn { position: absolute; border: 1.5px solid rgb(var(--light-rgb) / .5); background: transparent; color: var(--on-dark); border-radius: var(--r-pill); cursor: pointer; min-width: 48px; height: 48px; padding: 0 16px; font-size: 15px; }
.lightbox-btn:hover { border-color: var(--on-dark); background: rgb(var(--light-rgb) / .1); }
.lightbox-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; left: 20px; top: calc(28px + env(safe-area-inset-top, 0px)); font-family: var(--mono); font-size: 13px; color: var(--on-dark-muted); }
.lightbox[data-single] .lightbox-prev, .lightbox[data-single] .lightbox-next, .lightbox[data-single] .lightbox-count { display: none; }
body.is-locked { overflow: hidden; }

/* ---------- Case study ---------- */
.cs-head { padding-top: calc(140px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(36px, 5vw, 56px); display: grid; gap: clamp(28px, 4vw, 44px); }
.crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.cs-head h1 { font-size: clamp(3rem, 9vw, 8.2rem); line-height: .92; letter-spacing: -.025em; max-width: 12ch; }
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1.5px solid var(--ink); }
.facts div { display: grid; gap: 4px; align-content: start; padding: 16px 20px 0 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: 16px; font-weight: 500; line-height: 1.4; }
.cs-open { position: relative; background: var(--night); }
.cs-open img { width: 100%; height: min(78svh, 860px); object-fit: cover; }
.cs-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: start; }
.cs-intro-copy { display: grid; gap: 18px; }
.cs-intro-copy p:not(.eyebrow) { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 56ch; }
.cs-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.cs-figures div { display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); }
.cs-figures div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.cs-figures dd { order: -1; font-family: var(--display); font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cs-figures dt { font-size: 14px; color: var(--muted); }
.cs-cover ul { border-top: 1.5px solid var(--ink); }
.cs-cover li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.gallery { display: grid; gap: clamp(64px, 8vw, 112px); }
.gallery-group { display: grid; gap: 20px; }
.gallery-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.gallery-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.gallery-head span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: start; }
.shot { display: grid; gap: 10px; }
.shot a { position: relative; display: block; overflow: hidden; background: var(--paper-2); cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot a:hover img { transform: scale(1.025); }
.shot figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: 14px; color: var(--ink-2); }
.shot figcaption .n { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.shot figcaption .x { grid-column: 2; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; }
.r32 a { aspect-ratio: 3 / 2; } .r23 a { aspect-ratio: 2 / 3; } .r21 a { aspect-ratio: 21 / 9; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lcard { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: var(--on-dark); background: var(--night); text-decoration: none; isolation: isolate; border-radius: var(--r-img); }
.lcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.lcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--night-rgb) / .38); transition: background-color .3s; }
.lcard:hover img { transform: scale(1.04); }
.lcard:hover::after { background: rgb(var(--night-rgb) / .5); }
.lcard-name { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; }
.lcard-cta { position: absolute; left: 20px; bottom: 16px; font-weight: 600; font-size: 15px; border-bottom: 1.5px solid currentColor; }
.cta-band { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px 48px; align-items: end; }

/* 404 */
.notfound { min-height: 100svh; display: grid; align-content: center; gap: 22px; padding-top: 120px; padding-bottom: 80px; }
.notfound h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: .95; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service { aspect-ratio: 4 / 5; }
  .library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results div, .results div + div { padding: 20px 20px 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .results div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav-bar { gap: 8px; padding: 6px 6px 6px 14px; }
  .nav-logo img { width: 112px; }
  .nav-cta { margin-left: auto; min-height: 40px; padding: 0 16px; font-size: 14px; }
  .nav-menu { display: grid; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head .lede { justify-self: start; }

  .hero { min-height: max(600px, 100svh); }
  .hero-copy { padding-bottom: 28px; gap: 16px; }
  .hero-bar { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
  .hero-count { display: none; }
  .hero-steps { gap: 6px; }
  .hero-steps button { gap: 0; padding: 20px 0; }
  .hero-steps b, .hero-steps small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-slide .credit { bottom: auto; top: calc(96px + env(safe-area-inset-top, 0px)); right: var(--gutter); }

  .lodges-grid { grid-template-columns: minmax(0, 1fr); }
  .lodges-preview { display: none; }
  .lodges li a { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "thumb name arrow" "thumb meta arrow"; gap: 4px 16px; padding: 14px 0; }
  .lodges-thumb { display: block; grid-area: thumb; width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-img); }
  .lodges-name { font-size: 1.45rem; }

  .feature-in { grid-template-columns: minmax(0, 1fr); padding-block: 100px 48px; }
  .figures dd { font-size: 2.6rem; }
  .figures dt { font-size: 13px; }

  .services { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 8px; scrollbar-width: none; }
  .services::-webkit-scrollbar { display: none; }
  .service { flex: 0 0 78%; aspect-ratio: 3 / 4; scroll-snap-align: start; }

  .platforms { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .platforms p { grid-column: 1; grid-row: auto; justify-self: start; }
  .platforms ul { grid-row: auto; margin-top: 8px; }
  .platform-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .big-figures, .channels { grid-template-columns: minmax(0, 1fr); }
  .bts-grid { grid-template-columns: minmax(0, 1fr); }
  .bts-stack { aspect-ratio: 5 / 4; }
  .packages { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 28px; }
  .package-mid { margin-block: 0; padding-block: clamp(24px, 3vw, 36px); }
  .addons, .faq { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .contact-photo img { position: static; height: 100%; }
  .contact-form { padding-block: 56px 72px; }

  .cs-head { padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
  .facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div, .facts div + div { padding: 14px 14px 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .facts div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .cs-open img { height: auto; aspect-ratio: 4 / 5; }
  .cs-intro { grid-template-columns: minmax(0, 1fr); }
  .grid12 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .grid12 > * { grid-column: 1 / -1; }
  .r21 a { aspect-ratio: 3 / 2; }
  .r23 { max-width: 420px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .library { gap: 20px 12px; }
  .library span { font-size: 14px; }
  .addons ul { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .shot-notes { grid-template-columns: minmax(0, 1fr); }
  .results dd { font-size: 2.4rem; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: none; }
}

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

/* ---------- Behind the shot, mirrored (copy left, frames right) ---------- */
.bts-flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bts-flip .bts-stack a:first-child { left: auto; right: 0; transform: rotate(2.5deg); }
.bts-flip .bts-stack a:last-child { right: auto; left: 0; transform: rotate(-1.5deg); }
.bts-flip .bts-stack a:hover { transform: rotate(0) translateY(-6px); }

/* ---------- Wildlife band ---------- */
.wildlife { background: var(--night); color: var(--on-dark); padding-block: var(--section); }
.wildlife .lede, .wildlife-intro p { color: rgb(var(--light-rgb) / .78); }
.wildlife-intro { display: grid; gap: 20px; justify-items: start; justify-self: end; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

/* ---------- Back to top ---------- */
.to-top { position: fixed; z-index: 40; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--nav-ease), transform .3s var(--nav-ease), visibility 0s linear .3s, background-color .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--nav-ease), transform .3s var(--nav-ease), visibility 0s, background-color .2s; }
.to-top:hover { background: var(--paper); }
.to-top svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .bts-flip { grid-template-columns: minmax(0, 1fr); }
  .bts-flip .bts-copy { order: 2; }
  .wildlife-intro { justify-self: start; }
        .to-top { width: 40px; height: 40px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Footer ----------
   A white link card framed in dark, then a photo panel with the wordmark set huge.
   Letters rise in one by one when it scrolls into view (site.js adds .is-in). */
.site-footer { background: var(--paper); }
.foot-wrap { background: var(--night); margin: 0 8px; padding: 8px 8px 0; border-radius: 0; }
.foot-card { background: var(--white); border-radius: var(--radius); padding: clamp(32px, 4vw, 56px) clamp(20px, 3.4vw, 48px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .6fr)); gap: 32px; }
.foot-intro { display: grid; gap: 16px; align-content: start; justify-items: start; }
.foot-logo img { width: 160px; height: auto; }
.foot-intro p { font-size: 15px; color: var(--muted); max-width: 40ch; }
.foot-intro p b { font-weight: 600; color: var(--ink); }
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.foot-mail { font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--line); user-select: all; }
.foot-mail:hover { border-color: currentColor; }
.foot-mini { display: flex; gap: 12px; align-items: center; margin-top: 4px; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; transition: transform .3s var(--nav-ease), border-color .2s, background-color .2s; }
.foot-mini:hover { transform: translateY(-2px); border-color: var(--ink); background: var(--white); }
.foot-mini img { width: 84px; height: 56px; object-fit: cover; border-radius: var(--r-img); }
.foot-mini b { display: block; font-size: 14px; font-weight: 600; }
.foot-mini small { font-size: 13px; color: var(--muted); }
.fcol { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.fcol h4 { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fcol a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; justify-self: start; border-bottom: 1px solid transparent; transition: border-color .2s; }
.fcol a:hover { border-color: currentColor; }
.fcol-icon { width: 17px; height: 17px; flex: none; }

.mega { position: relative; margin: 0 8px 8px; border-radius: 0; overflow: hidden; isolation: isolate; color: var(--white); background: var(--night); min-height: clamp(300px, 36vw, 540px); display: flex; flex-direction: column; justify-content: flex-end; }
.mega > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; animation: mega-pan 28s ease-in-out infinite alternate; }
.mega::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--night-rgb) / .94) 0%, rgb(var(--night-rgb) / .4) 40%, rgb(var(--night-rgb) / .78) 100%); }
@keyframes mega-pan { from { transform: scale(1.08) translate(-1.5%, -1%); } to { transform: scale(1.08) translate(1.5%, 1%); } }
.mega-tag { text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); margin-bottom: 10px; padding-inline: 16px; }
.wordmark-mega { display: flex; justify-content: center; flex-wrap: nowrap; font-family: var(--display); font-size: clamp(40px, 10.6vw, 180px); line-height: .85; letter-spacing: .01em; padding: 0 2vw; margin-bottom: clamp(24px, 3vw, 44px); white-space: nowrap; }
.wordmark-mega .l { display: inline-block; transition: transform 1s cubic-bezier(.34, 1.56, .64, 1) calc(var(--li) * 60ms), opacity .6s var(--ease) calc(var(--li) * 60ms), color .4s; }
.wordmark-mega .l--space { width: .28em; }
.js .wordmark-mega .l { transform: translateY(60%); opacity: 0; }
.js .mega.is-in .wordmark-mega .l { transform: none; opacity: 1; }
.wordmark-mega .l:hover { color: var(--sand); }
.mega.is-in .wordmark-mega .l.glint { animation: glint 1.2s var(--ease); }
@keyframes glint { 50% { color: var(--sand); transform: translateY(-4%); } }
.mega-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 14px clamp(20px, 3vw, 40px) calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(var(--light-rgb) / .14); font-size: 12.5px; color: rgb(var(--light-rgb) / .78); }
.mega-base a { color: inherit; text-underline-offset: 3px; }
.mega-base b { font-weight: 600; color: var(--white); }
.mega-links { display: flex; gap: 14px; }
.mega-links a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgb(var(--light-rgb) / .25); border-radius: 50%; transition: border-color .2s, background-color .2s; }
.mega-links a:hover { border-color: var(--white); background: rgb(var(--light-rgb) / .1); }
.mega-links .fcol-icon { width: 16px; height: 16px; }

@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-intro { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .foot-wrap { margin: 0 6px; padding: 6px 6px 0; }
  .mega { margin: 0 6px 6px; }
  .foot-card { padding: 28px 20px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .foot-mini { width: 100%; }
  .mega-base { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mega > img { animation: none; }
  .js .wordmark-mega .l { transform: none; opacity: 1; }
}

/* ---------- Scroll reveal ----------
   One motion for the whole site: content fades in and rises as it arrives, siblings staggered.
   Uses an animation on opacity and the translate property, so it never fights the transform
   and transition rules that cards already use for hover. */
.js .reveal:not(.is-in) { opacity: 0; }
.js .reveal.is-in { animation: reveal-up .9s var(--nav-ease) var(--d, 0ms) both; }
@keyframes reveal-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }

/* ---------- Word swap ----------
   One word in a heading rolls up and is replaced; the slot eases to each word's width. */
.swap { display: inline-grid; vertical-align: baseline; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; transition: width .6s var(--nav-ease); white-space: nowrap; }
.swap-word { grid-area: 1 / 1; justify-self: start; transition: transform .6s var(--nav-ease), opacity .45s var(--nav-ease); }
.swap-word.is-below { transform: translateY(105%); opacity: 0; }
.swap-word.is-above { transform: translateY(-105%); opacity: 0; transition: transform .6s var(--nav-ease), opacity .2s linear; }
.swap-word.is-below { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-in) { opacity: 1; }
  .js .reveal.is-in { animation: none; }
}

/* ---------- CRO additions ---------- */
.section-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.section-cta--left { justify-content: flex-start; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.step-n { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--accent); }
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--muted); font-size: 16px; }
.packages-help { margin-top: 12px; font-size: 15px; }
.packages-help a { font-weight: 600; text-underline-offset: 3px; }
.contact-points { display: grid; gap: 8px; margin-top: 4px; font-size: 16px; }
.contact-points li { position: relative; padding-left: 26px; }
.contact-points li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
    .section-cta .btn { flex: 1 1 100%; }
}

/* ---------- Brand orange accents ---------- */
.swap-word { color: var(--accent); }
.mega .swap-word, .feature .swap-word { color: inherit; }
.packages-help a, .lede a, .faq details p a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1.5px; margin-right: 10px; vertical-align: middle; background: var(--accent); }
.hero-tag, .mega-tag { color: var(--on-dark); }
.mega-tag { color: var(--accent); }
.nav-links a:hover { border-color: var(--accent); }
.fcol a:hover { border-color: var(--accent); }
.foot-mail:hover { border-color: var(--accent); }
.package:hover { border-color: var(--accent); }
.package-mid:hover { border-color: var(--night); }
.faq summary::after { color: var(--accent); }
.lodges-fill { background: var(--accent); }
.big-figure:not(.big-figure-alt) b { color: var(--on-dark); }

/* ---------- Subtle hovers ---------- */
.library-img { grid-column: 1 / -1; display: block; overflow: hidden; border-radius: var(--r-img); background: var(--line); cursor: zoom-in; }
.library-img img { display: block; transition: transform .8s var(--nav-ease), filter .4s var(--ease); }
.library li span { position: relative; justify-self: start; padding-bottom: 4px; transition: color .3s var(--ease); }
.library li span::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--nav-ease); }
.library li:hover .library-img img, .library-img:focus-visible img { transform: scale(1.05); filter: saturate(1.08); }
.library li:hover span::after, .library li:focus-within span::after { transform: scaleX(1); }
.platform-logos li { transition: transform .35s var(--nav-ease), border-color .3s, box-shadow .35s var(--nav-ease); }
.platform-logos li:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.steps li { transition: transform .35s var(--nav-ease), border-color .3s, box-shadow .35s var(--nav-ease); }
.steps li:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.channels article { transition: border-color .3s; }
.channels article:hover { border-color: var(--accent); }

/* ---------- Services: expanding cards ----------
   Desktop: the active card grows to twice the width while an orange bar fills along its foot;
   when the bar finishes the next card takes over. Hover takes control. Phones keep the swipe row. */
.service-bar { position: absolute; left: 20px; right: 20px; bottom: 18px; height: 2px; background: rgb(var(--light-rgb) / .28); overflow: hidden; display: none; }
.service-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
@media (min-width: 901px) {
  .services { display: flex; gap: 16px; height: clamp(460px, 44vw, 620px); }
  .service { flex: 1 1 0; min-width: 0; aspect-ratio: auto; transition: flex-grow .9s var(--nav-ease); cursor: pointer; }
  .service.is-active { flex-grow: 2; }
  .service-copy { bottom: 38px; }
  .service-copy p { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .35s var(--ease), max-height .6s var(--nav-ease); }
  .service.is-active .service-copy p { opacity: 1; max-height: 9em; transition-delay: .2s, 0s; }
  .service-bar { display: block; }
  .services.is-cycling .service.is-active .service-bar i { animation: lodges-fill 6s linear forwards; }
  .services.is-paused .service-bar i { animation-play-state: paused; }
  .services:not(.is-cycling) .service.is-active .service-bar i { transform: scaleX(1); }
}

/* ---------- Proof strip (under the hero) ---------- */
.proof-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.proof-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; padding-block: 18px; font-size: 15px; font-weight: 500; }
.proof-strip li { display: inline-flex; align-items: center; gap: 10px; }
.proof-strip li::before { content: ""; width: 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }
@media (min-width: 901px) and (max-height: 760px) {
  .hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); }
  .hero-copy { gap: 14px; padding-bottom: 28px; }
}
@media (max-width: 900px) {
  .hero { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
  .hero h1 { font-size: clamp(2.2rem, 9.4vw, 2.9rem); max-width: 14ch; }
  .proof-strip ul { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 16px; font-size: 14px; }
}

/* Figure blocks carry a faint photo, tinted to the block colour. */
.big-figure { position: relative; overflow: hidden; isolation: isolate; }
.big-figure::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fig-img) center / cover no-repeat; opacity: .24; filter: grayscale(.3); transition: opacity .6s var(--ease), transform 1.2s var(--nav-ease); }
.big-figure-alt::before { mix-blend-mode: multiply; opacity: .4; filter: grayscale(1) contrast(1.1); }
.big-figure:hover::before { opacity: .34; transform: scale(1.04); }
.big-figure-alt:hover::before { opacity: .5; }

/* Keep the footer's bottom bar clear of the back-to-top button (44px + 18px inset). */
.mega-base { padding-right: calc(clamp(20px, 3vw, 40px) + 64px); }
@media (max-width: 620px) {
  .mega-base { padding-right: clamp(20px, 3vw, 40px); padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Footer, full bleed: the aerial photo runs behind the whole footer, the white card sits straight on it.
   No outer frame or side margins. */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--night); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--night-rgb) / .55) 0%, rgb(var(--night-rgb) / .35) 45%, rgb(var(--night-rgb) / .8) 100%); }
.foot-wrap { margin: 0; padding: clamp(20px, 3vw, 40px) var(--gutter) 0; background: none; border-radius: 0; }
.foot-card { max-width: var(--max); margin-inline: auto; box-shadow: var(--shadow-lg); }
.mega { position: static; margin: 0; border-radius: 0; background: none; min-height: clamp(260px, 30vw, 460px); }
.mega::before { display: none; }
.mega > img { z-index: -2; }
@media (max-width: 620px) {
  .foot-wrap { margin: 0; padding: 16px 12px 0; }
  .mega { margin: 0; }
}

/* Hero headline word follows the slideshow; it stays light on the photo, with an orange underline. */
.hero .swap-word { color: var(--on-dark); }
.hero .swap { box-shadow: inset 0 -.06em 0 var(--accent); }

/* Case-study gallery photos share the photo corner. */
.shot a, .cs-open, .lodges-thumb { border-radius: var(--r-img); }
.cs-open { border-radius: 0; }

/* Footer, compact: the wordmark is a short sign-off strip under the link card, not a second hero. */
.site-footer::before { background: linear-gradient(180deg, rgb(var(--night-rgb) / .72) 0%, rgb(var(--night-rgb) / .6) 50%, rgb(var(--night-rgb) / .88) 100%); }
.mega { min-height: 0; justify-content: flex-start; padding-top: clamp(28px, 4vw, 52px); }
.mega-tag { margin-bottom: 6px; }
.wordmark-mega { font-size: clamp(36px, 8.6vw, 140px); margin-bottom: clamp(14px, 2vw, 24px); }

/* Minimal hero bar: progress lines with the service label only; no lodge names, credit or counter. */
.hero-steps small { font-size: 12px; color: var(--on-dark); opacity: .8; }
.hero-steps button[aria-current="true"] small { opacity: 1; }

/* ---------- Enquiry form: required markers, date range, honeypot ---------- */
.form-legend { font-size: 14px; color: var(--muted); }
.req { color: var(--accent); font-weight: 600; margin-left: 2px; }
.form-dates { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.form-dates legend { padding: 0; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.form input[type="date"] { color-scheme: light; accent-color: var(--accent); cursor: pointer; }
.form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.form input[type="date"]:invalid:not(:focus) { color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hero bar labels promoted to titles: the service name in the bold body face (the lodge names are gone). */
.hero-steps small { font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--on-dark); opacity: .7; }
.hero-steps button[aria-current="true"] small { opacity: 1; }

/* ---------- Wildlife carousel ----------
   Slides sit on a circle of positions around the featured centre; site.js sets each slide's
   offset (--o) and the layout maths below does the rest, so the loop never visibly jumps. */
.wildlife .section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.wl { position: relative; --w: min(56vw, 820px); --gap: 22px; --side: .72; }
.wl-track { position: relative; height: calc(var(--w) * 2 / 3 + 64px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.wl-track.is-dragging { cursor: grabbing; }
.wl-slide { position: absolute; top: 0; left: 50%; width: var(--w); margin: 0;
  --abs: max(var(--o), calc(var(--o) * -1));
  --scale: calc(1 - min(var(--abs), 1) * (1 - var(--side)));
  --x: calc(var(--o) * (var(--w) * (1 + var(--side)) / 2 + var(--gap)));
  transform: translateX(calc(-50% + var(--x) + var(--drag, 0px))) scale(var(--scale));
  transform-origin: 50% 40%;
  transition: transform 1s var(--nav-ease), opacity .8s var(--ease), filter .8s var(--ease);
  z-index: calc(10 - var(--abs));
  opacity: calc(1 - max(var(--abs) - 1, 0) * .55);
  filter: brightness(calc(1 - min(var(--abs), 1) * .45)) saturate(calc(1 - min(var(--abs), 1) * .3));
}
.wl-slide.is-far { opacity: 0; pointer-events: none; }
.wl-slide.no-anim, .wl-track.is-dragging .wl-slide { transition: none; }
.wl-slide a { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-img); background: var(--night); cursor: zoom-in; }
.wl-track.is-dragging .wl-slide a { cursor: grabbing; }
.wl-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); pointer-events: none; }
.wl-slide figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 15px; color: var(--on-dark); opacity: 0; transition: opacity .5s var(--ease); }
.wl-slide figcaption small { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: rgb(var(--light-rgb) / .6); text-align: right; }
.wl-slide.is-active figcaption { opacity: 1; transition-delay: .35s; }
.wl-controls { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.wl-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(var(--light-rgb) / .35); background: transparent; color: var(--on-dark); cursor: pointer; transition: border-color .2s, background-color .2s; }
.wl-btn:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.wl-btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .wl { --w: 80vw; --gap: 12px; --side: .8; }
  .wl-slide figcaption { flex-direction: column; gap: 2px; font-size: 14px; }
  .wl-slide figcaption small { text-align: left; }
  .wl-track { height: calc(var(--w) * 2 / 3 + 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-slide { transition: none; }
}

/* Footer card without link columns: logo, prompt, actions and client galleries in one row. */
.foot-grid { display: block; }
.foot-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; justify-content: space-between; }
.foot-intro p { flex: 1 1 280px; max-width: 44ch; }
.foot-mini { margin-top: 0; }
/* Darker tint so the footer copy reads on any photo. */
.site-footer::before { background: linear-gradient(180deg, rgb(var(--night-rgb) / .82) 0%, rgb(var(--night-rgb) / .78) 50%, rgb(var(--night-rgb) / .92) 100%); }
@media (max-width: 900px) {
  .foot-intro { flex-direction: column; align-items: flex-start; }
  .foot-mini { width: 100%; }
}

/* Side slides peek in from the edges but never widen the page. */
.wildlife { overflow-x: clip; }
.wl { overflow: hidden; padding-block: 12px; }

/* Wildlife carousel: portrait cards (4:5) suit the close-up wildlife set. */
.wl { --w: min(32vw, 460px); --side: .76; --gap: 20px; }
.wl-track { height: calc(var(--w) * 5 / 4 + 64px); }
.wl-slide a { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .wl { --w: 68vw; --side: .8; --gap: 12px; }
  .wl-track { height: calc(var(--w) * 5 / 4 + 72px); }
}

/* Even gaps all the way out: the first step clears the large centre card, later steps clear small ones. */
.wl-slide { --x: calc(var(--o) * (var(--w) * var(--side) + var(--gap)) + clamp(-1, var(--o), 1) * var(--w) * (1 - var(--side)) / 2); }

/* If the carousel script hasn't run (or failed), show the photos as a plain swipeable row. */
.wl:not(.is-ready) .wl-track { display: flex; gap: var(--gap); height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); cursor: auto; }
.wl:not(.is-ready) .wl-slide { position: static; flex: 0 0 var(--w); transform: none; opacity: 1; filter: none; scroll-snap-align: center; }
.wl:not(.is-ready) .wl-slide figcaption { opacity: 1; }
.wl:not(.is-ready) .wl-controls { display: none; }

/* Wildlife carousel, natural ratios: every photo shares one height and keeps its own shape.
   site.js measures the widths and sets each slide's position (--x) and size (--scale). */
.wl { --h: min(34vw, 500px); --side: .74; --gap: 20px; }
.wl-track { height: calc(var(--h) + 64px); }
.wl-slide { width: calc(var(--h) * var(--r, .8)); transform: translateX(calc(-50% + var(--x, 0px) + var(--drag, 0px))) scale(var(--scale, 1)); opacity: calc(1 - min(max(var(--abs) - 1, 0), 1) * .5); }
.wl-slide a { aspect-ratio: var(--r, .8); }
.wl-slide img { object-fit: cover; }
@media (max-width: 900px) {
  .wl { --h: 56vw; --side: .8; --gap: 12px; }
  .wl-track { height: calc(var(--h) + 72px); }
}
/* Script-less fallback row uses the same shared height. */
.wl:not(.is-ready) .wl-slide { flex: 0 0 auto; }

/* The footer photo must sit under the footer-wide tint: .mega must not start its own layer. */
.mega { isolation: auto; }

/* ---------- Tilted mosaic band (layout preview) ----------
   A dark band: copy on the left, a mosaic of photos tilted ~35deg on the right. Columns drift
   slowly in alternating directions; each strip holds its photos twice so the loop is seamless. */
.mosaic-band { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: var(--on-dark); min-height: clamp(520px, 52vw, 720px); display: grid; align-items: center; }
.mosaic { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mosaic-grid { position: absolute; top: 50%; left: 66%; width: 1260px; height: 1600px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; transform: translate(-50%, -50%) rotate(-35deg); }
.mosaic-col { overflow: hidden; }
.mosaic-strip { animation: mosaic-up var(--dur, 70s) linear infinite; }
.mosaic-col--down .mosaic-strip { animation-name: mosaic-down; }
.mosaic-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: 18px; }
@keyframes mosaic-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mosaic-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.mosaic-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, var(--night) 0%, var(--night) 30%, rgb(var(--night-rgb) / .72) 46%, rgb(var(--night-rgb) / .38) 70%, rgb(var(--night-rgb) / .3) 100%); }
.mosaic-copy { display: grid; gap: 18px; justify-items: start; padding-block: var(--section); }
.mosaic-copy > * { max-width: 34rem; }
.mosaic-copy > p:not(.eyebrow) { color: rgb(var(--light-rgb) / .86); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.mosaic-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mosaic-tags li { border: 1px solid rgb(var(--light-rgb) / .28); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13.5px; color: rgb(var(--light-rgb) / .9); }
.preview-head { padding-top: calc(130px + env(safe-area-inset-top, 0px)); padding-bottom: 40px; display: grid; gap: 14px; }
.preview-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.preview-head a { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.preview-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-block: 28px 12px; }
.preview-foot { padding-block: 48px 80px; }
@media (max-width: 900px) {
  .mosaic-grid { left: 50%; width: 1100px; height: 1500px; gap: 12px; }
  .mosaic-strip img { margin-bottom: 12px; }
  .mosaic-shade { background: linear-gradient(180deg, rgb(var(--night-rgb) / .72) 0%, rgb(var(--night-rgb) / .8) 50%, rgb(var(--night-rgb) / .9) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-strip { animation: none; }
}

/* Mosaic on phones: smaller tiles and a lighter tint, so the photos show behind the copy. */
@media (max-width: 900px) {
  .mosaic-grid { left: 55%; width: 820px; height: 1300px; }
  .mosaic-shade { background: linear-gradient(180deg, rgb(var(--night-rgb) / .5) 0%, rgb(var(--night-rgb) / .62) 45%, rgb(var(--night-rgb) / .8) 100%); }
}

/* Mosaic tiles stay tilted with the grid, but each photo is turned back upright inside its tile
   (counter-rotated +35deg, scaled 1.55x so it still covers the tilted 4:5 tile). */
.mosaic-tile { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); margin-bottom: 18px; background: var(--night); }
.mosaic-tile img { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; object-fit: cover; transform: rotate(35deg) scale(1.55); }
@media (max-width: 900px) { .mosaic-tile { margin-bottom: 12px; } }

/* Mosaic, upright: straight columns on the right side of the band, photos at their natural angle. */
.mosaic-grid { top: 50%; left: auto; right: -2%; width: min(64vw, 1000px); height: 1600px; transform: translateY(-50%); }
.mosaic-tile img { transform: none; }
@media (max-width: 900px) {
  .mosaic-grid { right: -10%; width: 120%; height: 1400px; }
}

/* ---------- Mosaic, final arrangement ----------
   Desktop: the mosaic occupies the right half only, so photos never sit under the copy.
   Phones: copy first, mosaic as its own block below. Tiles rest dimmed; site.js lights a few
   random visible tiles to full brightness at a time. */
.mosaic-shade { display: none; }
.mosaic { inset: 0 0 0 52%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.mosaic-grid { position: absolute; inset: -30% var(--gutter) -30% 0; width: auto; height: auto; transform: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mosaic-tile { margin-bottom: 16px; }
.mosaic-tile img { filter: brightness(.42) saturate(.8); transition: filter 1.4s var(--ease); }
.mosaic-tile.is-lit img { filter: none; }
@media (max-width: 900px) {
  .mosaic-band { display: flex; flex-direction: column; min-height: 0; }
  .mosaic-copy { order: 1; padding-bottom: 32px; }
  .mosaic { order: 2; position: relative; inset: auto; height: 460px; margin-inline: var(--gutter); margin-bottom: 56px; }
  .mosaic-grid { inset: -30% 0; gap: 10px; }
  .mosaic-tile { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-tile img { transition: none; }
}

/* ---------- Why it matters: preview options ---------- */
/* A · Photo split */
.wim-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); }
.wim-a-photo { position: relative; min-height: 100%; background: var(--night); }
.wim-a-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wim-a-copy { padding: var(--section) var(--gutter); display: grid; gap: 22px; align-content: center; max-width: 680px; }
.wim-a-stats { display: grid; border-top: 1px solid var(--line); }
.wim-a-stats > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.wim-a-stats dt { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wim-a-stats dd { display: grid; gap: 4px; }
.wim-a-stats b { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 5vw, 4.4rem); line-height: .9; color: var(--ink); }
.wim-a-stats span { color: var(--ink-2); }
.wim-a-channels, .wim-d-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.wim-a-channels li, .wim-d-channels li { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px; font-size: 14px; background: var(--white); }
/* B · Editorial numbers */
.wim-b-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.wim-b-figures > div { display: grid; gap: 10px; padding: 36px 40px 40px 0; }
.wim-b-figures > div + div { padding-left: 40px; border-left: 1px solid var(--line); }
.wim-b-figures small { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wim-b-figures b { font-family: var(--display); font-weight: 400; font-size: clamp(5rem, 12vw, 10rem); line-height: .85; letter-spacing: -.02em; }
.wim-b-figures b::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 18px; background: var(--accent); }
.wim-b-figures p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 30ch; color: var(--ink-2); }
.wim-b-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.wim-b-channels article { display: grid; gap: 8px; }
.wim-b-channels p { color: var(--muted); }
/* C · Dark band with channel photos */
.wim-c { background: var(--night); color: var(--on-dark); }
.wim-c-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.wim-c-lede { color: rgb(var(--light-rgb) / .78); margin-top: 16px; max-width: 46ch; }
.wim-c-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wim-c-figures b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .9; color: var(--accent); }
.wim-c-figures p { margin-top: 10px; color: rgb(var(--light-rgb) / .85); font-size: 15.5px; }
.wim-c-figures p span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--light-rgb) / .6); margin-right: 4px; }
.wim-c-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wim-c-cards article { display: grid; gap: 10px; align-content: start; }
.wim-c-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); margin-bottom: 6px; }
.wim-c-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wim-c-cards article:hover .wim-c-img img { transform: scale(1.04); }
.wim-c-cards p { color: rgb(var(--light-rgb) / .75); font-size: 15.5px; }
/* D · Progress bars */
.wim-d-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: center; }
.wim-d-copy { display: grid; gap: 18px; }
.wim-d-bars { display: grid; gap: 34px; }
.wim-bar { display: grid; gap: 14px; }
.wim-bar-head { display: grid; gap: 4px; }
.wim-bar-head b { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.wim-bar-head span { color: var(--ink-2); }
.wim-bar i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.wim-bar em { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1.8s var(--nav-ease); }
.wim-d-bars.is-in .wim-bar em { width: var(--v); }
@media (max-width: 900px) {
  .wim-a { grid-template-columns: minmax(0, 1fr); }
  .wim-a-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .wim-a-photo img { position: static; }
  .wim-b-figures, .wim-b-channels, .wim-c-top, .wim-c-cards, .wim-d-grid { grid-template-columns: minmax(0, 1fr); }
  .wim-b-figures > div, .wim-b-figures > div + div { padding: 28px 0; border-left: 0; }
  .wim-b-figures > div + div { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .wim-bar em { transition: none; width: var(--v); }
}

/* Why it matters (option A) on the homepage: tinted ground so it separates from the lodges list above. */
.home .wim-a { background: var(--paper-2); }

/* Mosaic on phones: the stacked band must stretch its children, otherwise the mosaic
   collapses to zero width (its photos are positioned inside it). */
@media (max-width: 900px) {
  .mosaic-band { align-items: stretch; }
  .mosaic { align-self: stretch; width: auto; height: 420px; margin: 0 var(--gutter) 56px; border-radius: var(--radius); }
  .mosaic-copy { padding-top: 56px; }
  .mosaic-copy > * { max-width: none; }
  .mosaic-tags li { font-size: 13px; }
}
@media (max-width: 900px) {
  .mosaic-tile img { filter: brightness(.6) saturate(.9); }
  .mosaic-tile.is-lit img { filter: none; }
}

.form-captcha:empty { display: none; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* Mosaic highlight fades: slow and even in both directions. */
.mosaic-tile img { transition: filter 1.8s cubic-bezier(.4, 0, .2, 1); }

/* ---------- Mosaic variants (homepage mosaic preview) ---------- */
.mosaic-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
/* Hero: full height, room for the nav. */
.mosaic-band--hero { min-height: max(600px, 100svh); padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
.mosaic-band--hero h1 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.02em; }
.mosaic-band--hero .mosaic { inset: 0 0 0 50%; }
/* Light: paper ground, ink text, tiles at full brightness. */
.mosaic-band--light { background: var(--paper-2); color: var(--ink); }
.mosaic-band--light .mosaic-copy > p:not(.eyebrow) { color: var(--ink-2); }
.mosaic-band--light .mosaic-tile img { filter: none; }
/* Mirrored: photos on the left, copy on the right. */
.mosaic-band--flip .mosaic { inset: 0 52% 0 0; }
.mosaic-band--flip .mosaic-grid { inset: -30% 0 -30% var(--gutter); }
.mosaic-band--flip .mosaic-copy { justify-items: start; padding-left: calc(50% + 32px); }
/* Mosaic filling a container (contact). */
.contact-mosaic { position: relative; overflow: hidden; background: var(--paper-2); }
.mosaic--fill { position: absolute; inset: 0; }
.mosaic--fill .mosaic-grid { inset: -20% 16px; }
.mosaic--fill .mosaic-tile img { filter: none; }
/* Platforms: compact logo row. */
.logo-strip { background: var(--white); border-bottom: 1px solid var(--line); padding-block: 36px; }
.logo-strip .wrap { display: grid; gap: 14px; }
.logo-strip .eyebrow { margin: 0; }
@media (max-width: 900px) {
  .mosaic-band--hero { padding-top: calc(80px + env(safe-area-inset-top, 0px)); min-height: 0; }
  .mosaic-band--hero .mosaic { inset: auto; }
  .mosaic-band--flip .mosaic { inset: auto; }
  .mosaic-band--flip .mosaic-grid { inset: -30% 0; }
  .mosaic-band--flip .mosaic-copy { padding-left: var(--gutter); }
  .contact-mosaic { aspect-ratio: auto; height: 320px; }
}

/* Mosaic inside the contact column: undo the single-photo rule that stretched every image. */
.contact-mosaic img { position: static; inset: auto; width: 100%; height: 100%; }
/* Form labels: keep the asterisk / "(optional)" on the same line as the label text. */
.form label { display: block; }
.form label input, .form label select, .form label textarea { display: block; margin-top: 7px; }
.form .optional { margin-left: 4px; }
.contact-mosaic { isolation: isolate; }
.mosaic--fill { z-index: 0; }

/* ---------- Shorter homepage variant ---------- */
.home-short .hero-tag { display: none; }
.short-proof { background: var(--white); border-bottom: 1px solid var(--line); padding-block: 28px; }
.short-proof-grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 20px 48px; align-items: center; }
.short-fig { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.short-fig b { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; white-space: nowrap; }
.short-fig > span { font-size: 14px; color: var(--ink-2); max-width: 17ch; line-height: 1.35; }
.short-fig [data-count] { display: inline-block; text-align: right; }
.short-checks { display: grid; gap: 6px; justify-self: end; font-size: 14px; font-weight: 500; }
.short-checks li { display: flex; align-items: center; gap: 10px; }
.short-checks li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }
.home-short .services { height: clamp(420px, 38vw, 540px); }
.library--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.short-logos { display: grid; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.short-logos .eyebrow { margin: 0; }
.steps-inline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; padding: 16px 0; border-block: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.steps-inline li { display: flex; align-items: baseline; gap: 10px; }
.steps-inline b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: .08em; }
.addons--compact { margin-top: 32px; padding-top: 24px; }
.addons--compact ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-short .feature { min-height: min(72svh, 640px); }
.home-short .contact-form { padding-block: var(--section); }
.home-short .form textarea { min-height: 96px; }
@media (max-width: 1100px) {
  .short-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .short-checks { grid-column: 1 / -1; justify-self: start; grid-auto-flow: column; gap: 6px 24px; }
}
@media (max-width: 900px) {
  .home-short .services { height: auto; }
  .library--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addons--compact ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .short-proof-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .short-checks { grid-auto-flow: row; }
  .addons--compact ul { grid-template-columns: minmax(0, 1fr); }
}
/* Shorter homepage: keep section backgrounds alternating after the reorder. */
.home-short #packages { background: var(--paper); }
.home-short #faq { background: var(--paper-2); }

/* ---------- Proof band options (preview) ---------- */
.pb-hero { height: 140px; overflow: hidden; background: var(--night); }
.pb-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: brightness(.6); }
.pb-checks { display: grid; gap: 8px; font-size: 15px; font-weight: 500; }
.pb-checks li { display: flex; align-items: center; gap: 10px; }
.pb-checks li::before { content: ""; flex: none; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }
.pb-checks--light { color: var(--on-dark); }
.pb-a, .pb-b, .pb-c, .pb-e { background: var(--white); border-bottom: 1px solid var(--line); }
.pb-a, .pb-b, .pb-c, .pb-d, .pb-e { margin-bottom: 8px; }
/* A · Four even columns */
.pb-a-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-a-grid > div { display: grid; gap: 6px; align-content: start; padding: 32px 28px; }
.pb-a-grid > div + div { border-left: 1px solid var(--line); }
.pb-a-grid > div:first-child { padding-left: 0; }
.pb-a-grid b { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; white-space: nowrap; }
.pb-a-grid b small, .pb-b-fig b small, .pb-d-fig b small { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); vertical-align: middle; margin-right: 4px; }
.pb-a-grid > div > span { font-size: 14px; color: var(--ink-2); max-width: 26ch; }
/* B · Floating card */
.pb-b { background: transparent; border: 0; }
.pb-b-card { position: relative; margin-top: -64px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 24px 48px; align-items: center; padding: 28px 36px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.pb-b-fig { display: grid; gap: 4px; }
.pb-b-fig b { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; white-space: nowrap; }
.pb-b-fig > span { font-size: 14px; color: var(--ink-2); max-width: 24ch; }
.pb-b .pb-checks { justify-self: end; }
/* C · Ticker */
.pb-c { overflow: hidden; padding-block: 18px; }
.pb-c-track { display: flex; width: max-content; animation: pb-tick 48s linear infinite; }
.pb-c-track li { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-size: 16px; color: var(--ink-2); }
.pb-c-track li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pb-c-track b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-right: 6px; }
.pb-c:hover .pb-c-track { animation-play-state: paused; }
@keyframes pb-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* D · Dark continuation */
.pb-d { background: var(--night); color: var(--on-dark); padding-block: 32px; border-top: 1px solid rgb(var(--light-rgb) / .12); }
.pb-d-grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 24px 56px; align-items: center; }
.pb-d-fig { display: grid; gap: 4px; }
.pb-d-fig b { font-family: var(--display); font-weight: 400; font-size: 2.8rem; line-height: 1; color: var(--accent); white-space: nowrap; }
.pb-d-fig b small { color: rgb(var(--light-rgb) / .6); }
.pb-d-fig > span { font-size: 14px; color: rgb(var(--light-rgb) / .8); max-width: 24ch; }
.pb-d .pb-checks { justify-self: end; }
/* E · Icon row */
.pb-e-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-block: 28px; }
.pb-e-row li { display: grid; gap: 4px; align-content: start; }
.pb-e-row svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 8px; }
.pb-e-row b { font-size: 17px; font-weight: 600; }
.pb-e-row li > span { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .pb-a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-a-grid > div { padding: 22px 16px; border-bottom: 1px solid var(--line); }
  .pb-a-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pb-b-card, .pb-d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; }
  .pb-d-grid { padding-block: 0; }
  .pb-b .pb-checks, .pb-d .pb-checks { grid-column: 1 / -1; justify-self: start; }
  .pb-e-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pb-b-card, .pb-d-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-e-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-c-track { animation: none; flex-wrap: wrap; width: auto; }
}
.pb-a-grid [data-count], .pb-b-fig [data-count], .pb-d-fig [data-count], .pb-e-row [data-count] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Short homepage: inside and out photo grid ---------- */
.inside-out { background: var(--paper); }
.io-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: 12px; }
.io-grid li { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--line); }
.io-grid li:first-child { grid-column: span 2; grid-row: span 2; }
.io-grid li:nth-child(6), .io-grid li:nth-child(7) { grid-column: span 2; }
.io-grid a { display: block; height: 100%; cursor: zoom-in; }
.io-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--nav-ease); }
.io-grid span { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: rgb(var(--night-rgb) / .55); color: var(--white); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.io-grid li:hover img, .io-grid a:focus-visible img { transform: scale(1.04); }
.io-grid li:hover span, .io-grid li:focus-within span { opacity: 1; transform: none; }
.library--two { row-gap: 28px; }
@media (hover: none) { .io-grid span { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .io-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 220px); gap: 8px; }
  .io-grid li:nth-child(6), .io-grid li:nth-child(7) { grid-column: auto; }
}

/* Short homepage: proof band option D, a dark band continuing the hero. */
.io-grid li:nth-child(6), .io-grid li:nth-child(7) { grid-column: auto; }
.home-short .pb-d { margin-bottom: 0; }
@media (max-width: 560px) {
  .home-short .pb-d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .home-short .pb-d-fig { align-self: start; grid-template-rows: 15px auto auto; }
  .home-short .pb-d-fig b { position: relative; grid-row: 2; font-size: 2.1rem; }
  .home-short .pb-d-fig b small { position: absolute; transform: translateY(-19px); font-size: 11px; }
  .home-short .pb-d-fig > span { grid-row: 3; font-size: 13px; }
  .home-short .pb-d .pb-checks { font-size: 14px; }
}

/* ---------- Behind the shot: prints on a table ---------- */
.prints-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.prints-copy { display: grid; gap: 16px; }
.prints-copy > p:not(.eyebrow) { color: var(--ink-2); max-width: 34ch; margin: 0; }
.prints { position: relative; aspect-ratio: 16 / 11; }
.print { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z); display: block; padding: 7px; background: var(--white); border-radius: 2px; box-shadow: var(--shadow-md); transform: rotate(var(--r)); transition: transform .45s var(--nav-ease), box-shadow .45s var(--ease); cursor: zoom-in; }
.print img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.print img.is-tall { aspect-ratio: 2 / 3; }
.print:hover, .print:focus-visible { transform: rotate(0deg) scale(1.08); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .print { transition: none; } }
/* Homepage rhythm: one spacing token (--section) and alternating backgrounds, so neighbouring sections never double up. */
.home-short #services { background: var(--paper-2); }
.home-short .prints-section { background: var(--paper); }

/* ---------- Unified pass (5 Oct 2026): type scale, phone layout ---------- */
/* Type scale: 12px mono labels · 14px captions and small print · 16px body · 15px buttons · lede and h2 from tokens. */
.service-copy p, .pb-d-fig > span, .home-short .pb-d-fig > span, .foot-mini small, .terms, .form-alt, .price small { font-size: 14px; }
.package ul, .steps-inline, .foot-intro p, .foot-mail { font-size: 16px; }
.library span, .library--row span { font-size: 15px; }
.mega-base { font-size: 14px; }
.home-short .pb-d-fig b small, .pb-d-fig b small { font-size: 12px; }
.contact .lede, .prints-copy > p:not(.eyebrow) { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

@media (max-width: 900px) {
  /* Prints: a swipeable row on phones and tablets, slight alternating tilt, same height. */
  .prints-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prints { aspect-ratio: auto; display: flex; align-items: center; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 18px var(--gutter) 30px; scrollbar-width: none; }
  .prints::-webkit-scrollbar { display: none; }
  .prints .print { position: relative; left: auto; top: auto; z-index: auto; width: auto; flex: none; padding: 6px; scroll-snap-align: center; transform: rotate(-1.6deg); }
  .prints .print:nth-child(even) { transform: rotate(1.6deg); }
  .prints .print img, .prints .print img.is-tall { width: auto; height: clamp(180px, 48vw, 300px); aspect-ratio: auto; }
  .prints .print:hover, .prints .print:focus-visible { transform: none; }
  /* The proof band sits on the same gutter as everything else. */
  .pb-d-grid { padding-inline: var(--gutter); }
}
@media (max-width: 560px) {
  /* Rotating words in section headings take their own line so they never run off the screen. */
  main h2 .swap { display: grid; }
}