/* ==========================================================================
   Huw Williams Golf · THE SWING STORY (scrollytelling homepage)
   One real swing, scrubbed by scroll, carries the whole conversion story.
   Brand world continues Range to Resort V2: course-led green family, ink,
   paper, one warm sand accent; Hanken Grotesk + IBM Plex Mono (data only).
   The signature is real motion — no drawn flight paths, no tickers.
   ========================================================================== */

:root {
	--green: oklch(43% 0.09 152);
	--green-deep: oklch(34% 0.075 153);
	--green-bright: oklch(58% 0.115 150);
	--green-950: oklch(21.5% 0.042 153);
	--green-900: oklch(26.5% 0.055 153);
	--green-850: oklch(30.5% 0.065 153);
	--ink: oklch(26% 0.025 240);
	--ink-950: oklch(20.5% 0.022 242);
	--paper: oklch(97.5% 0.006 120);
	--paper-dim: oklch(94% 0.008 120);
	--sand: oklch(76% 0.066 73);
	--sand-deep: oklch(55% 0.075 66);
	--bone: oklch(98% 0.005 120);

	--line-dark: color-mix(in oklch, var(--bone) 16%, transparent);
	--line-light: color-mix(in oklch, var(--ink) 14%, transparent);

	--display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--data: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

	--fs-hero: clamp(2.1rem, 4.8vw, 4rem);
	--fs-h2: clamp(1.55rem, 2.6vw, 2.3rem);
	--fs-h2-end: clamp(2.2rem, 5vw, 4rem);
	--fs-band-h2: clamp(1.9rem, 3.6vw, 3rem);
	--track-caps: 0.16em;

	--ease-house: cubic-bezier(0.19, 1, 0.22, 1);
	--card-w: 25rem;
	--pillar-w: 100vw; /* set by JS in pillar mode */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
	font-family: var(--display);
	font-size: 1.06rem;
	line-height: 1.55;
	color: var(--ink);
	background: var(--green-950);
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip {
	position: fixed; top: -4rem; left: 1rem; z-index: 50;
	background: var(--paper); color: var(--ink); padding: 0.7rem 1.1rem;
	border-radius: 0.4rem; font-weight: 700; text-decoration: none;
	transition: top 0.2s var(--ease-house);
}
.skip:focus-visible { top: 1rem; }

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

/* ---------- header ---------- */
.top {
	position: fixed; inset: 0 0 auto 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.1rem clamp(1.2rem, 3.4vw, 2.6rem);
	background: linear-gradient(to bottom, oklch(20% 0.03 220 / 0.55), transparent);
	transition: background 0.3s ease;
}
.top--solid {
	background: color-mix(in oklch, var(--green-950) 92%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--line-dark);
}
.wordmark {
	font-weight: 800; letter-spacing: 0.02em; text-decoration: none;
	color: var(--bone); font-size: 1.02rem; text-transform: uppercase;
}
.wordmark span { color: var(--sand); margin-left: 0.45em; font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
	display: inline-block; text-decoration: none; font-weight: 700;
	font-size: 0.98rem; line-height: 1; padding: 0.95rem 1.5rem;
	border-radius: 0.45rem; letter-spacing: 0.01em;
	transition: transform 0.35s var(--ease-house), background 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: #fff; }
.btn--ghost {
	color: var(--bone); border: 1px solid var(--line-dark);
	background: oklch(25% 0.03 220 / 0.35); backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: color-mix(in oklch, var(--bone) 44%, transparent); }
.btn--green { background: var(--green); color: var(--bone); }
.btn--green:hover { background: var(--green-deep); }
.btn--line { color: var(--ink); border: 1px solid var(--line-light); background: transparent; }
.top__cta { padding: 0.75rem 1.15rem; font-size: 0.9rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

.link-cta {
	display: inline-block; margin-top: 1.1rem; font-weight: 700;
	color: var(--sand); text-decoration: none; font-size: 0.98rem;
}
.link-cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- labels ---------- */
.label {
	font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--track-caps); color: var(--sand);
	margin-bottom: 0.9rem;
}
.label--ink { color: var(--sand-deep); }
.label--bone { color: var(--sand); }

/* ---------- the scrolly stage ---------- */
.scrolly { height: 300vh; position: relative; }
.stage {
	position: sticky; top: 0; height: 100vh; height: 100svh;
	overflow: hidden; background: var(--green-950);
}
.stage__poster, .stage__back, .stage__main {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.stage__poster { object-fit: cover; object-position: center bottom; opacity: 1; transition: opacity 0.5s ease; z-index: 1; }
.stage--pillar .stage__poster { object-fit: contain; background: var(--green-950); }
.stage__poster.is-hidden { opacity: 0; }
.stage__back { z-index: 0; filter: blur(26px) saturate(1.15) brightness(0.72); transform: scale(1.12); display: none; }
.stage__main { z-index: 2; }
.stage--pillar .stage__back { display: block; }
.stage__flash {
	position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
	background: radial-gradient(ellipse 60% 45% at 50% 62%, oklch(99% 0.01 90 / 0.85), transparent 70%);
}
.stage__grad {
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background:
		linear-gradient(to bottom, oklch(20% 0.03 220 / 0.38), transparent 22%),
		linear-gradient(to top, oklch(18% 0.03 220 / 0.45), transparent 30%);
	transition: background 0.4s ease;
}
.stage--dim .stage__grad {
	background:
		radial-gradient(ellipse 90% 60% at 50% 46%, oklch(20% 0.03 222 / 0.52), oklch(20% 0.03 222 / 0.3) 70%),
		linear-gradient(to bottom, oklch(20% 0.03 220 / 0.5), oklch(20% 0.03 222 / 0.26) 40%, oklch(20% 0.03 220 / 0.4)),
		linear-gradient(to top, oklch(18% 0.03 220 / 0.6), transparent 45%);
}

/* ---------- chapters ---------- */
.chapter {
	position: absolute; inset: 0; z-index: 4;
	display: grid; align-items: center;
	padding: 5.5rem clamp(1.2rem, 4vw, 4rem) 4rem;
	opacity: 0; visibility: hidden; pointer-events: none;
	will-change: opacity, transform;
}
.chapter.is-live { opacity: 1; visibility: visible; pointer-events: auto; }

.chapter__card {
	width: min(var(--card-w), 100%);
	color: var(--bone);
	background: oklch(22% 0.03 200 / 0.55);
	border: 1px solid var(--line-dark);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 0.9rem;
	padding: 1.7rem 1.7rem 1.8rem;
	box-shadow: 0 24px 60px oklch(15% 0.03 220 / 0.35);
}
.chapter__card--tight { padding-bottom: 1.5rem; }
.chapter__card h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.02em; margin-bottom: 0.75rem; font-weight: 800; }
.chapter__card p { font-size: 0.99rem; color: color-mix(in oklch, var(--bone) 88%, transparent); }
.chapter__card strong { color: var(--sand); }

/* side placement (pillar mode positions via JS-set custom props) */
.chapter[data-side="left"] { justify-items: start; }
.chapter[data-side="right"] { justify-items: end; }
.chapter[data-low] { align-items: end; }

.stage--pillar .chapter[data-side="left"] .chapter__card { margin-left: max(1.5vw, calc(50vw - var(--pillar-w) / 2 - var(--card-w) - 4vw)); }
.stage--pillar .chapter[data-side="right"] .chapter__card { margin-right: max(1.5vw, calc(50vw - var(--pillar-w) / 2 - var(--card-w) - 4vw)); }

/* hero + end overlays */
.chapter__inner { text-align: center; justify-self: center; color: var(--bone); max-width: 46rem; }
/* the chapter's 5.5rem top padding is subtracted so the copy tucks right
   under the "HW GOLF" line of the brand lockup */
.chapter__inner--hero { align-self: start; margin-top: calc(clamp(2rem, 5vh, 5rem) + clamp(4.5rem, 12vh, 7.5rem) + 2.4rem - 5.5rem); }
.chapter__inner--hero .label { margin-bottom: 0.5rem; }
.stage__brand {
	position: absolute; left: 50%; transform: translateX(-50%);
	top: clamp(2rem, 5vh, 5rem);
	z-index: 3; pointer-events: none;
	display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.stage__brand img {
	height: clamp(4.5rem, 12vh, 7.5rem); width: auto;
	filter: drop-shadow(0 6px 22px oklch(20% 0.03 220 / 0.5)) drop-shadow(0 1px 4px oklch(20% 0.03 220 / 0.35));
}
.stage__brand span {
	color: var(--bone); font-weight: 700; font-size: 0.88rem;
	text-transform: uppercase; letter-spacing: 0.34em; text-indent: 0.34em;
	text-shadow: 0 1px 10px oklch(20% 0.03 220 / 0.65), 0 1px 3px oklch(20% 0.03 220 / 0.5);
}
.chapter__inner--hero h1 {
	font-size: min(var(--fs-hero), 8.5vh); line-height: 1; letter-spacing: -0.028em;
	font-weight: 800; margin-bottom: 0.8rem;
	text-shadow: 0 2px 24px oklch(20% 0.03 220 / 0.55);
}
.chapter__inner--hero .lede {
	font-size: min(clamp(1.02rem, 1.5vw, 1.22rem), 3.4vh);
	max-width: 40rem; margin: 0 auto;
	color: color-mix(in oklch, var(--bone) 92%, transparent);
	text-shadow: 0 1px 12px oklch(20% 0.03 220 / 0.6);
}
.chapter__inner--hero .cta-row { justify-content: center; }
.chapter__inner--end h2 { font-size: var(--fs-h2-end); letter-spacing: -0.025em; font-weight: 800; text-shadow: 0 2px 24px oklch(20% 0.03 220 / 0.55); }
.chapter__inner--end .cta-row { justify-content: center; margin-top: 1.9rem; }

/* chips */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }
.chips li {
	font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.09em; padding: 0.42rem 0.66rem; border-radius: 99px;
	border: 1px solid var(--line-dark);
	color: color-mix(in oklch, var(--bone) 85%, transparent);
	background: oklch(30% 0.03 200 / 0.3);
}

/* mini image card inside chapters */
.minicard { margin-top: 1.2rem; border-radius: 0.6rem; overflow: hidden; border: 1px solid var(--line-dark); }
.minicard img { width: 100%; height: 9.5rem; object-fit: cover; }
.minicard figcaption {
	font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.08em;
	text-transform: uppercase; padding: 0.5rem 0.75rem;
	color: color-mix(in oklch, var(--bone) 70%, transparent);
	background: oklch(20% 0.03 200 / 0.5);
}

/* quotes */
.quote { margin-top: 1.1rem; }
.stars { color: var(--sand); letter-spacing: 0.18em; font-size: 0.8rem; display: block; margin-bottom: 0.35rem; }
.quote blockquote { font-size: 0.95rem; font-style: italic; color: color-mix(in oklch, var(--bone) 90%, transparent); }
.quote figcaption { margin-top: 0.4rem; font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklch, var(--bone) 62%, transparent); }
.finemark { margin-top: 1.1rem; font-size: 0.78rem !important; color: color-mix(in oklch, var(--bone) 55%, transparent) !important; }

/* persistent CTA dock: the two conversion routes ride the whole story */
.stage__cta {
	position: absolute; bottom: clamp(1.1rem, 3vh, 2rem); left: 50%;
	transform: translateX(-50%); z-index: 5;
	display: flex; gap: 0.8rem; white-space: nowrap;
}

/* progress rail */
.rail {
	position: absolute; right: clamp(0.9rem, 2vw, 1.8rem); top: 50%;
	transform: translateY(-50%); z-index: 5;
	display: flex; flex-direction: column; gap: 0.85rem;
}
.rail a {
	width: 0.55rem; height: 0.55rem; border-radius: 50%;
	background: color-mix(in oklch, var(--bone) 34%, transparent);
	transition: background 0.25s ease, transform 0.25s var(--ease-house);
	position: relative;
}
.rail a:hover { transform: scale(1.35); }
.rail a.is-on { background: var(--sand); transform: scale(1.35); }
.rail a::after {
	content: attr(data-t); position: absolute; right: 1.3rem; top: 50%;
	transform: translateY(-50%); white-space: nowrap;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--bone); opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.rail a:hover::after, .rail a.is-on:hover::after { opacity: 1; }

/* scroll cue */
.scrollcue {
	position: absolute; bottom: calc(clamp(1.1rem, 3vh, 2rem) + 4.7rem); left: 50%; transform: translateX(-50%);
	z-index: 5; color: color-mix(in oklch, var(--bone) 82%, transparent);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	display: flex; align-items: center; gap: 0.7rem; pointer-events: none;
	transition: opacity 0.3s ease;
}
.scrollcue__line {
	width: 1px; height: 2.4rem; background: linear-gradient(to bottom, transparent, var(--bone));
	animation: cue 2.2s var(--ease-house) infinite;
	transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0.2); opacity: 0; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(0.9rem); opacity: 0; } }

/* ---------- bands after the story ---------- */
.band { padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 4vw, 3rem); }
.band__inner { max-width: 68rem; margin: 0 auto; }
.band h2 { font-size: var(--fs-band-h2); letter-spacing: -0.022em; line-height: 1.1; font-weight: 800; margin-bottom: 0.7rem; }
.band__lede { max-width: 36rem; margin-bottom: 2.4rem; color: color-mix(in oklch, currentColor 75%, transparent); }

.band--tips { background: var(--paper); color: var(--ink); }
.tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; margin-bottom: 2.2rem; }
.tip {
	text-decoration: none; border-radius: 0.7rem; overflow: hidden;
	background: #fff; border: 1px solid var(--line-light);
	transition: transform 0.35s var(--ease-house), box-shadow 0.35s ease;
	display: block;
}
.tip:hover { transform: translateY(-4px); box-shadow: 0 18px 40px oklch(30% 0.03 220 / 0.16); }
.tip img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.tip span { display: block; padding: 0.85rem 1rem 1rem; font-weight: 700; font-size: 0.93rem; line-height: 1.35; color: var(--ink); }

.band--contact { background: var(--green-950); color: var(--bone); }
.band--contact h2 { max-width: 44rem; }
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; margin-top: 2.4rem; }
.route {
	text-decoration: none; display: flex; flex-direction: column; gap: 0.55rem;
	background: var(--green-900); border: 1px solid var(--line-dark);
	border-radius: 0.8rem; padding: 1.5rem 1.4rem 1.4rem;
	transition: transform 0.35s var(--ease-house), background 0.25s ease;
}
.route:hover { transform: translateY(-4px); background: var(--green-850); }
.route__k { font-size: 0.72rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--sand); }
.route__t { font-size: 0.95rem; color: color-mix(in oklch, var(--bone) 82%, transparent); flex: 1; }
.route__go { font-weight: 700; font-size: 0.95rem; color: var(--bone); }
.contact-line { margin-top: 2.2rem; color: color-mix(in oklch, var(--bone) 75%, transparent); }
.contact-line a { color: var(--sand); font-weight: 700; text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }

/* footer */
.foot { background: var(--ink-950); color: var(--bone); padding: 3rem clamp(1.2rem, 4vw, 3rem) 3.4rem; }
.foot__inner { display: flex; flex-direction: column; gap: 0.9rem; }
.wordmark--foot { font-size: 1rem; }
.foot__meta { font-size: 0.85rem; color: color-mix(in oklch, var(--bone) 62%, transparent); }
.foot__social { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 0.3rem; }
.foot__social a { font-size: 0.85rem; font-weight: 700; text-decoration: none; color: color-mix(in oklch, var(--bone) 80%, transparent); }
.foot__social a:hover { color: var(--sand); }
.foot__fine { font-size: 0.75rem; color: color-mix(in oklch, var(--bone) 42%, transparent); margin-top: 0.6rem; }

/* ---------- mobile / overlay mode ---------- */
@media (max-width: 760px) {
	.chapter { align-items: start; padding-top: 14.5rem; }
	.chapter[data-low] { align-items: start; }
	.chapter__card { padding: 1.25rem 1.25rem 1.35rem; background: oklch(22% 0.03 200 / 0.62); }
	.chapter__card h2 { font-size: 1.35rem; }
	.chapter__card p { font-size: 0.92rem; }
	.minicard img { height: 7rem; }
	.minicard { display: none; }
	.quote blockquote { font-size: 0.88rem; }
	.quote + .quote { display: none; }
	.chapter__inner--hero { margin-top: 0.5rem; }
	.rail { display: none; }
	.top__cta { font-size: 0.82rem; padding: 0.65rem 0.95rem; }
	.stage__cta { gap: 0.55rem; width: max-content; }
	.stage__cta .btn { font-size: 0.8rem; padding: 0.72rem 0.9rem; }
	.scrollcue { bottom: calc(clamp(1.1rem, 3vh, 2rem) + 3.9rem); }
}
@media (max-height: 700px) {
	.chapter__inner--hero .lede { display: none; }
	.chapter__inner--hero h1 { font-size: min(var(--fs-hero), 7.5vh); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.scrollcue__line { animation: none; }
	.btn, .tip, .route, .rail a { transition: none; }
	.stage__flash { display: none; }
}

/* ==========================================================================
   INTERIOR PAGES · same world as the swing story: paper and deep green
   bands, the video pillar language carried into compact page heroes.
   ========================================================================== */

.top--page { background: color-mix(in oklch, var(--green-950) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-dark); }
.top__nav { display: flex; gap: 1.35rem; margin: 0 auto; }
.top__nav a {
	color: color-mix(in oklch, var(--bone) 78%, transparent); text-decoration: none;
	font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em;
}
.top__nav a:hover, .top__nav a[aria-current="page"] { color: var(--sand); }
@media (max-width: 860px) { .top__nav { display: none; } }

.page { background: var(--green-950); }

/* page hero: copy beside a portrait video pillar */
.phero { padding: 7.5rem clamp(1.2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); color: var(--bone); }
.phero__grid { max-width: 68rem; margin: 0 auto; display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 861px) { .phero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.phero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; margin-bottom: 1rem; }
.phero .lede { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: color-mix(in oklch, var(--bone) 86%, transparent); max-width: 34rem; }
.phero .cta-row { margin-top: 1.8rem; }

.vid { width: 100%; border-radius: 0.9rem; border: 1px solid var(--line-dark); display: block; background: var(--green-900); }
.vid--portrait { aspect-ratio: 9 / 16; object-fit: cover; max-height: 74vh; margin: 0 auto; }

/* bands */
.band--paper { background: var(--paper); color: var(--ink); }
.band--dim { background: var(--paper-dim); color: var(--ink); }
.band--green { background: var(--green-950); color: var(--bone); }
.band__kicker-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* split band: text + media */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 68rem; margin: 0 auto; }
@media (min-width: 861px) {
	.split { grid-template-columns: 1fr 1fr; }
	.split--flip > :first-child { order: 2; }
}
.split h2 { margin-bottom: 0.8rem; }
.split p + p { margin-top: 0.8rem; }
.split img { border-radius: 0.9rem; border: 1px solid currentColor; border-color: color-mix(in oklch, currentColor 12%, transparent); width: 100%; }

/* steps */
.steps { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--paper-raised, #fff); border: 1px solid var(--line-light); border-radius: 0.8rem; padding: 1.5rem 1.4rem; }
.band--green .step { background: var(--green-900); border-color: var(--line-dark); }
.step__k { font-size: 0.72rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--sand-deep); display: block; margin-bottom: 0.55rem; }
.band--green .step__k { color: var(--sand); }
.step h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.95rem; color: color-mix(in oklch, currentColor 78%, transparent); }

/* price cards */
.price-grid { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
@media (min-width: 720px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price { background: #fff; border: 1px solid var(--line-light); border-radius: 0.9rem; padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.price--hot { border-color: var(--green); box-shadow: 0 12px 34px oklch(30% 0.05 152 / 0.14); }
.price__name { font-size: 0.74rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--sand-deep); }
.price__amt { font-family: var(--data); font-size: 1.9rem; font-weight: 600; color: var(--ink); }
.price__amt span { font-size: 0.9rem; color: color-mix(in oklch, var(--ink) 55%, transparent); }
.price__t { font-size: 0.93rem; color: color-mix(in oklch, var(--ink) 72%, transparent); flex: 1; }
.price-note { margin-top: 1.1rem; font-size: 0.8rem; color: color-mix(in oklch, currentColor 55%, transparent); }

/* review wall */
.wall { columns: 1; column-gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 720px) { .wall { columns: 2; } }
@media (min-width: 1080px) { .wall { columns: 3; } }
.wall .review { break-inside: avoid; background: #fff; border: 1px solid var(--line-light); border-radius: 0.9rem; padding: 1.4rem 1.3rem; margin-bottom: 1.1rem; }
.wall .stars { color: var(--sand-deep); }
.wall blockquote { font-size: 0.95rem; font-style: italic; color: color-mix(in oklch, var(--ink) 88%, transparent); }
.wall figcaption { margin-top: 0.55rem; font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklch, var(--ink) 55%, transparent); }

/* credential grid */
.creds { list-style: none; display: grid; gap: 0.7rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.creds li { border: 1px solid var(--line-dark); border-radius: 0.6rem; padding: 0.85rem 1rem; font-size: 0.9rem; font-weight: 600; color: color-mix(in oklch, var(--bone) 88%, transparent); background: var(--green-900); }

/* full-bleed still band */
.fullbleed { position: relative; }
.fullbleed img { width: 100%; height: clamp(18rem, 52vh, 30rem); object-fit: cover; display: block; }
.fullbleed figcaption {
	position: absolute; left: clamp(1.2rem, 4vw, 3rem); bottom: 1.1rem;
	font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--bone); text-shadow: 0 1px 8px oklch(20% 0.03 220 / 0.7);
}

/* trip gallery */
.gal { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.2rem; }
@media (min-width: 861px) { .gal { grid-template-columns: repeat(4, 1fr); } }
.gal img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0.7rem; border: 1px solid var(--line-dark); }

/* footer nav */
.foot__nav { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; }
.foot__nav a { font-size: 0.85rem; font-weight: 700; text-decoration: none; color: color-mix(in oklch, var(--bone) 80%, transparent); }
.foot__nav a:hover { color: var(--sand); }