/* =========================================================================
   Val d'Isère Ski Instructors — design system
   Navy #0E1F3B · Gold #C9A876 · Georgia (serif, headlines/voice) · Inter (sans, UI)
   Consolidated from every validated page mockup during design phase.
   ========================================================================= */

:root {
	--navy: #0E1F3B;
	--navy-soft: #16294a;
	--gold: #C9A876;
	--cream: #F6F4EE;
	--ink: #0E1F3B;
	--muted: #5a6472;
	--faint: #8A8577;
	--border: #e4e0d5;
	--max: 960px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	background: #f4f2ec;
	color: var(--ink);
}

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

.wrap, .site-main { max-width: var(--max); margin: 0 auto; background: #fff; }

/* ---------- Header ---------- */
.site-header {
	background: var(--navy);
	padding: 28px 40px 16px;
	text-align: center;
}
/* The logo is one single image — mountain + "Val d'Isère" + "Ski
   Instructors" together, as one brand mark, not split into separate
   pieces. 110px is a middle ground: bigger and more legible than the
   original 80px, without ballooning the header enough to push hero
   headings on other pages out of view (140px did that). Uses the full
   logo file (the one without "Tailored Ski Lessons"), not the cropped
   mountain-only version from an earlier attempt at this. */
.site-header__logo-row img { height: 110px; width: auto; margin: 0 auto 18px; }
.site-nav__list {
	list-style: none;
	display: inline-flex;
	gap: 28px;
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255,255,255,0.15);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.site-nav__list a { color: rgba(255,255,255,0.6); text-decoration: none; }
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current-menu-parent > a { color: var(--gold); }

/* ---------- Navigation dropdowns (desktop) ---------- */
.site-header { position: relative; z-index: 100; }
.site-nav__list > li { position: relative; }
.site-nav__list > li.menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 4px; height: 4px;
	margin: 0 0 3px 8px;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}
.site-nav__list .sub-menu {
	list-style: none; margin: 0; padding: 22px 0 12px;
	position: absolute; top: 100%; left: 50%; min-width: 230px;
	background: var(--navy);
	border: 1px solid rgba(201,168,118,0.35); border-top: 0;
	text-align: left;
	opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 200;
	box-shadow: 0 18px 32px rgba(0,0,0,0.28);
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.site-nav__list .sub-menu li { display: block; }
.site-nav__list .sub-menu a { display: block; padding: 9px 24px; white-space: nowrap; }

/* Burger + chevron buttons: hidden on desktop. */
.site-nav__toggle, .sub-toggle { display: none; }

/* ---------- Navigation (tablet & mobile) ----------
   Links collapse behind a "Menu" button; parent items expand in place with a
   chevron. Only applies once main.js has flagged the nav as `is-enhanced`, so
   the links stay visible if JavaScript is unavailable. */
@media (max-width: 1024px) {
	.site-nav__list > li.menu-item-has-children > a::after { display: none; }

	.site-nav.is-enhanced .site-nav__toggle {
		display: inline-flex; align-items: center; gap: 14px;
		background: none; color: var(--gold);
		border: 1px solid rgba(201,168,118,0.5);
		padding: 13px 22px; margin-top: 2px; cursor: pointer;
		font: 600 11px/1 Inter, "Helvetica Neue", Arial, sans-serif;
		letter-spacing: 0.14em; text-transform: uppercase;
	}
	.site-nav__toggle-bars, .site-nav__toggle-bars::before, .site-nav__toggle-bars::after {
		display: block; width: 16px; height: 1px; background: currentColor;
		transition: transform .2s ease, background-color .2s ease;
	}
	.site-nav__toggle-bars { position: relative; }
	.site-nav__toggle-bars::before, .site-nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
	.site-nav__toggle-bars::before { top: -5px; }
	.site-nav__toggle-bars::after { top: 5px; }
	.site-nav.is-open .site-nav__toggle-bars { background: transparent; }
	.site-nav.is-open .site-nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
	.site-nav.is-open .site-nav__toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

	.site-nav.is-enhanced .site-nav__list {
		display: none; flex-direction: column; gap: 0;
		width: 100%; margin-top: 18px; padding-top: 0;
	}
	.site-nav.is-enhanced.is-open .site-nav__list { display: flex; }

	.site-nav.is-enhanced .site-nav__list > li {
		display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
		border-top: 1px solid rgba(255,255,255,0.1);
	}
	.site-nav.is-enhanced .site-nav__list > li:first-child { border-top: 0; }
	.site-nav.is-enhanced .site-nav__list > li > a { padding: 16px 4px; }

	.site-nav.is-enhanced .sub-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; margin-right: -44px; /* keeps the label optically centered */
		background: none; border: 0; padding: 0; cursor: pointer;
		color: rgba(255,255,255,0.6);
	}
	.site-nav.is-enhanced .sub-toggle::before {
		content: ""; width: 6px; height: 6px;
		border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .2s ease;
	}
	.site-nav.is-enhanced li.is-open > .sub-toggle { color: var(--gold); }
	.site-nav.is-enhanced li.is-open > .sub-toggle::before { transform: rotate(-135deg) translate(-2px, -2px); }

	.site-nav.is-enhanced .site-nav__list .sub-menu {
		display: none; position: static; flex-basis: 100%; width: 100%; min-width: 0;
		margin: 0; padding: 0 0 14px;
		background: transparent; border: 0; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none;
		text-align: center;
	}
	.site-nav.is-enhanced .site-nav__list li.is-open > .sub-menu { display: block; }
	.site-nav.is-enhanced .site-nav__list .sub-menu a {
		padding: 11px 0; white-space: normal; color: rgba(255,255,255,0.5);
	}
	.site-nav.is-enhanced .site-nav__list .sub-menu a:hover,
	.site-nav.is-enhanced .site-nav__list .sub-menu .current-menu-item > a { color: var(--gold); }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding: 14px 60px 0; font-size: 11px; color: #9aa1ab; letter-spacing: 0.03em; }
.breadcrumb span, .breadcrumb a { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 560px; overflow: hidden; background: var(--navy); }
.hero video, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(14,31,59,0) 0%, rgba(14,31,59,0.2) 55%, rgba(14,31,59,0.55) 100%);
}
.hero__inner {
	position: relative; z-index: 2; text-align: center; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
	padding: 0 60px 44px;
}
.hero h1 { font-family: Georgia, serif; font-weight: 400; font-size: 40px; color: #fff; margin: 0 0 12px; line-height: 1.25; text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5); }
.hero__subline { font-size: 14px; color: rgba(255,255,255,0.92); max-width: 480px; margin: 0 auto 22px; line-height: 1.6; text-shadow: 0 1px 14px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5); }
.hero .eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; margin: 0 0 16px; }

/* Our Network's optional photo-collage hero (see template-network.php) —
   fills the same space as .hero__poster, with the same .hero::before dark
   gradient and .hero__inner text stacking on top of it untouched. A grid
   rather than a single photo, since 4-8 shuffled tiles read as "a large,
   varied network" better than one static image. Fewer than a multiple of
   4 leaves a gap in the last row (revealing the navy background behind,
   which stays on-brand) — filling all 8, or another multiple of 4, gives
   the cleanest grid. */
/* A single row of 4 equal tiles, each the hero's full height — not a 2-row
   grid. Two rows meant two different tile shapes/heights to crop into,
   which read as "some photos huge, some tiny" rather than one consistent
   mosaic (see template-network.php). Flexbox rather than grid rows makes
   "exactly one row, all identical" the only possible outcome. */
.hero__collage { position: absolute; inset: 0; display: flex; gap: 3px; }
.hero__collage img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block;
	/* Biased toward the upper part of the frame rather than dead-center:
	   most of these are people on a mountain, and a face/head is far more
	   often near the top of the shot than the exact middle — this alone
	   won't perfectly center every face, but it crops off ski/scenery
	   rather than the tops of heads far more often than center-center did. */
	object-position: 50% 25%;
	/* Same navy-tinted, slightly darker treatment as before, to pull
	   photos shot in different light into one consistent, graded look. */
	filter: saturate(0.9) brightness(0.92);
}
@media (max-width: 640px) {
	/* 4 narrow slices reads fine on desktop but gets too thin to show
	   anything recognizable on a phone-width screen — 2 wider tiles
	   instead, hiding the other 2 rather than wrapping to a second row
	   (which would bring back the "two different shapes" problem). */
	.hero__collage img:nth-child(n+3) { display: none; }
}
/* A photo mosaic is busier behind text than one curated single photo, so
   the usual .hero::before gradient (light at the top, 55% dark at the
   very bottom) wasn't enough — text sat directly on bright/high-contrast
   tiles in places. Stronger and more uniform top-to-bottom, scoped to the
   collage variant only so the single-photo hero elsewhere is untouched. */
.hero--collage::before { background: linear-gradient(180deg, rgba(14,31,59,0.45) 0%, rgba(14,31,59,0.5) 45%, rgba(14,31,59,0.75) 100%); }

/* Simpler hero used on Concierge, Our Network, FAQ, Legal pages */
.hero--simple { height: auto; padding: 70px 60px 64px; display: block; background: #fff; }
.hero--simple::before { content: none; }
.hero--simple .hero__inner { position: static; padding: 0; height: auto; }
.hero--simple h1 { color: var(--ink); text-shadow: none; font-size: 32px; }
.hero--simple .hero__subline { color: var(--muted); text-shadow: none; }
.hero--legal { padding-bottom: 24px; }

/* TEST BUILD: video now plays on mobile too (previously hidden below 768px
   to save mobile data — see template-parts/hero.php's comment for why the
   .hero__poster--mobile fallback <img> exists regardless). `muted` +
   `playsinline` on the <video> tag are exactly what's needed for it to
   autoplay on mobile Safari/Chrome, so this is a straight comment/uncomment
   away from reverting: just swap which block below is active.
   To go back to "no video on mobile", replace this rule with:
     .hero__poster--mobile { display: none; }
     @media (max-width: 768px) {
       .hero video { display: none; }
       .hero__poster--mobile { display: block; }
     }
*/
.hero__poster--mobile { display: none; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-block; border: 1px solid var(--gold); color: var(--gold);
	padding: 12px 32px; font-size: 12px; letter-spacing: 0.1em; text-decoration: none;
}
.btn--dark { border-color: var(--ink); color: var(--ink); }

/* ---------- Section labels / titles ---------- */
.section-label { text-align: center; font-size: 11px; letter-spacing: 0.14em; color: var(--gold); margin: 0 0 12px; text-transform: uppercase; }
.section-title { text-align: center; font-family: Georgia, serif; font-weight: 400; font-size: 24px; color: var(--ink); margin: 0 0 40px; }

/* ---------- Philosophy / intro blocks ---------- */
.philosophy { text-align: center; padding: 72px 90px 64px; }
.philosophy--muted { background: var(--cream); }
.philosophy h2 { font-family: Georgia, serif; font-weight: 400; font-size: 15px; letter-spacing: 0.04em; color: var(--gold); text-transform: uppercase; margin: 0 0 22px; }
.philosophy p { font-family: Georgia, serif; font-size: 18px; line-height: 1.85; color: var(--ink); margin: 0 0 18px; text-align: left; }
.philosophy p.lead { font-size: 21px; text-align: center; }

/* ---------- Steps / process ---------- */
.process { padding: 0 48px 72px; }
/* Concierge's own "How it works" (5 steps) echoes the home page's navy
   treatment of the same idea (see .steps below) — same reasoning: this is
   the core of the Concierge pitch, and the visual match makes the link
   between the home's short teaser and this fuller version read as
   deliberate rather than coincidental. Chained selector + modifier
   (.process.process--dark) even though .process is Concierge-only today,
   so this never silently spreads if .process is ever reused elsewhere. */
.process.process--dark { background: var(--navy); padding: 64px 48px 80px; }
.process.process--dark .section-title { color: #fff; }
.process.process--dark .process__step h3 { color: #fff; }
.process.process--dark .process__step p { color: rgba(255,255,255,0.75); }
/* "How the selection works" is the core of the pitch (the private
   selection process itself), so a soft cream tint next to "Who we are"
   still read as too similar — no real hierarchy between "the main thing"
   and a supporting section. Using the same navy as the hero instead makes
   it a real anchor point: it reuses a color already established at the
   top of the page rather than introducing a third one, and gold numbers +
   white text on navy is the same pairing already used in the hero eyebrow.
   Overrides are scoped to .steps so the Concierge page's shared .process /
   .section-title / .steps__item p styling (white background) is untouched. */
.steps { background: var(--navy); padding: 64px 48px 80px; }
.steps .section-title { color: #fff; }
/* The button reuses the plain .btn style (gold border/text) rather than
   .btn--dark — that variant is for white backgrounds and would be
   invisible on navy. It's the exact same look already used for the CTA
   inside the hero, which sits on this same navy/dark background. */
.steps__cta { display: block; width: max-content; margin: 44px auto 0; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
/* Small teaser pointing to the Concierge page, sitting on the same navy
   background as the rest of .steps — kept deliberately brief (the homepage
   stays succinct; the Concierge page carries the actual detail) and set
   apart with a thin top divider rather than its own background block, so it
   reads as a footnote to the process rather than a competing section. */
.steps__concierge { max-width: 540px; margin: 44px auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.15); text-align: center; }
.steps__concierge p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.75); margin: 0 0 10px; }
.steps__concierge a { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.process__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.process__grid .process__step { flex: 0 1 260px; }
.steps__item, .process__step { text-align: center; }
.steps__num, .process__step .num { font-family: Georgia, serif; font-size: 26px; color: var(--gold); margin-bottom: 12px; }
.steps__item p, .process__step p { font-size: 14px; color: var(--ink); margin: 0; }
.steps__item p { color: rgba(255,255,255,0.85); }
.process__step h3 { font-size: 15px; color: var(--ink); margin: 0 0 10px; }
.process__step p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* ---------- Specialties / discipline grids ---------- */
.available, .range, .related { padding: 0 48px 72px; }
/* .specialties now sits right after the cream "Who we are" block on the
   homepage (see the reorder above), and the shared 0-top-padding rule left
   its label glued straight to that cream edge with no breathing room at
   all. Split out on its own, same fix already applied to .steps once —
   .available/.range/.related keep their 0 top padding since they still
   follow sections that already provide their own bottom spacing. */
.specialties { padding: 64px 48px 72px; }
/* On single-discipline.php, "Related disciplines" now always follows the
   shared testimonial partial (template-parts/testimonial.php), which ends
   in a border line (.testimonial-wrap { border-bottom }) — .related's
   shared 0-top-padding left the "Related disciplines" label glued straight
   to that line. Scoped modifier + chained selector (never a bare
   .related--discipline alone — same specificity/cascade-order pitfall as
   .cta--network before) so single-instructor.php's own .related section
   keeps its existing spacing untouched. */
.related.related--discipline { padding-top: 64px; }
/* .section-label is shared by many sections (Terrain, Who this is for, How
   the selection works, FAQ, etc.) with a tight 12px margin-bottom that reads
   fine when a paragraph or text block follows it. Here the label sits right
   above the photo grid with nothing in between, so the default gap felt too
   tight — scoped to .specialties only, so every other section keeps its
   existing spacing untouched. */
.specialties .section-label { margin-bottom: 32px; }
.specialties__grid, .related__grid {
	display: grid; gap: 3px;
}
.specialties__grid { grid-template-columns: repeat(4, 1fr); }
/* "Related disciplines" almost never has a full row of 4 (there are only
   4 disciplines total, so at most 3 can ever be "related" to the current
   one) — fixed 1fr columns would always fill the row and leave the tiles
   looking pinned to the left. auto-fit + justify-content:center groups
   whatever number of tiles there are and centers them instead. */
.related__grid { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); justify-content: center; }
.specialties__tile, .related__tile {
	aspect-ratio: 3/4; display: flex; align-items: flex-end; padding: 16px;
	background-size: cover; background-position: center; background-color: #EDEAE1;
	position: relative; text-decoration: none;
}
.specialties__tile::after, .related__tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14,31,59,0) 40%, rgba(14,31,59,0.65) 100%);
}
.specialties__tile span, .related__tile span { position: relative; z-index: 1; font-size: 13px; color: #fff; font-weight: 500; }

.range .tags, .beyond-list {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 600px; margin: 0 auto;
}
.range .tags span, .beyond-list span {
	font-size: 12px; color: var(--ink); border: 1px solid var(--gold); padding: 8px 16px; letter-spacing: 0.03em;
}

/* ---------- Who this is for / traits ---------- */
.who, .traits { padding: 0 60px 72px; }
/* Left-aligned, generously spaced: this component doubles as short
   persona cards ("Who this is for") on some discipline pages and as a
   list of distinct named options (e.g. Off-Piste's "Off-Piste & Freeride /
   Ski Touring / Heliski") on others. Centered text with a tight gap read
   fine for the former but made the latter look like one continuous block
   rather than 3 separate options. */
.who__grid, .traits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.who__card, .trait { background: var(--cream); padding: 28px 24px; text-align: left; }
.who__card h3 { font-size: 14px; color: var(--ink); margin: 0 0 10px; }
.who__card p, .trait p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0; }
/* A card becomes an <a> when it's given a "detail page" link — same look,
   plus a subtle lift on hover/focus and a small "Learn more" affordance so
   it doesn't just look decorative. */
.who__card--link { display: block; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.who__card--link:hover, .who__card--link:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14,31,59,0.1); }
.who__card-more { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
/* Full-width option rows, stacked one above another (e.g. Off-Piste's
   Off-Piste & Freeride / Ski Touring / Heliski), as an alternative to the
   side-by-side "Who this is for" cards above — see vdski_option_rows(). An
   optional photo sits on the left; text fills the rest. Rows with no photo
   just show text full-width. */
.options__list { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; text-align: left; }
.options__row {
	display: flex; align-items: stretch; background: var(--cream);
	text-decoration: none; overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.options__row-media { flex: 0 0 220px; background-size: cover; background-position: center; background-color: #EDEAE1; }
.options__row-content { flex: 1; padding: 26px 32px; }
.options__row-content h3 { font-size: 16px; color: var(--ink); margin: 0 0 8px; }
.options__row-content p { font-size: 13px; color: var(--muted); line-height: 1.75; margin: 0; max-width: 640px; }
.options__row-more { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.options__row--link:hover, .options__row--link:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,31,59,0.1); }

/* ---------- Our Network page (template-network.php) ---------- */
/* Client feedback: the page read as austere, with a couple of labels
   sitting flush against the section before them — most noticeable where a
   color or border boundary makes the missing gap obvious: the cream "Why
   we don't show you a list" block runs straight into "What every
   instructor has in common" with no gap (.traits normally has 0 top
   padding, correct elsewhere where it follows plain white space), and the
   closing "Tell us who you're looking for" sits right against the
   testimonial's own bottom border (.cta is 0-top-padding by design
   everywhere else, since it usually follows a section with its own
   bottom spacing already built in). Scoped to this page only. */
/* Chained (.traits.traits--network / .cta.cta--network) rather than a bare
   modifier class: .traits and .cta each set padding as a shorthand further
   down this file, which resets padding-top to 0 again — same specificity,
   later in the cascade wins for the properties it touches, regardless of
   which felt more "specific" while writing it. Chaining both classes
   raises specificity above the plain .traits/.cta rule so the override
   holds no matter where either rule sits in the file. */
.traits.traits--network { padding-top: 56px; }
/* .traits__grid normally uses 3 fixed equal columns (repeat(3, 1fr)),
   which looks fine with exactly 3 cards but leaves the row pinned to the
   left with empty space on the right whenever there are fewer — same fix
   already used for .related__grid (auto-fit + justify-content:center
   groups whatever number of cards there are and centers the row instead).
   Scoped to the network page since .traits__grid is shared with .who__grid
   on discipline pages, which isn't reporting this issue. */
.traits--network .traits__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 280px)); justify-content: center; }
.cta.cta--network { padding-top: 64px; }

/* ---------- Terrain / safety / practical text blocks ---------- */
.terrain, .safety, .practical, .why { padding: 72px 90px; text-align: center; }
.safety, .why { background: var(--cream); }
.terrain p, .safety .intro, .practical p, .why p { font-family: Georgia, serif; font-size: 17px; line-height: 1.9; color: var(--ink); max-width: 600px; margin: 0 auto; }

/* Optional photo+text split for the discipline/destination "terrain" section
   — same mechanism as .beyond--feature on the Concierge page (see below):
   the base .terrain class keeps today's plain centered text untouched, and
   this modifier only kicks in when an editor sets the optional section
   photo. Chained selector (.terrain.terrain--feature) so it reliably beats
   the shorthand `padding` above regardless of source order (see main.css
   notes elsewhere on this pattern). Discipline pages can also carry option
   rows (.terrain-options) below the split — that block spans the full grid
   width via grid-column so it isn't squeezed into one half.
   Left/right padding stays 0 so the photo bleeds edge-to-edge for a bit of
   drama — but top/bottom must NOT be 0: several sections that can follow
   this one (.who, .traits, .cta and more) are deliberately built with zero
   TOP padding, on the assumption that whatever precedes them always
   supplies its own bottom spacing (same reasoning behind every other
   "glued to the divider" fix on this site). This section needs real
   top/bottom padding of its own too, since it can just as easily follow a
   zero-bottom element (.breadcrumb) as precede a zero-top one. */
.terrain.terrain--feature {
	display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; text-align: left; padding: 64px 0;
}
.terrain.terrain--feature .terrain__media { background-size: cover; background-position: center; min-height: 440px; }
.terrain.terrain--feature .terrain__content { padding: 64px; align-self: center; }
.terrain.terrain--feature .terrain__content .section-label { text-align: left; }
.terrain.terrain--feature .terrain__content p { text-align: left; max-width: none; margin: 0 0 18px; }
.terrain.terrain--feature .terrain-options { grid-column: 1 / -1; padding: 24px 64px 0; }

@media (max-width: 720px) {
	.terrain.terrain--feature { grid-template-columns: 1fr; padding: 40px 0; }
	.terrain.terrain--feature .terrain__media { min-height: 240px; }
	.terrain.terrain--feature .terrain__content { padding: 40px 24px; }
	.terrain.terrain--feature .terrain-options { padding: 16px 24px 0; }
}
.why p { font-family: inherit; font-size: 14px; text-align: left; max-width: none; }

/* ---------- Sub-discipline detail pages (template-subdiscipline.php) ---------- */
/* A lightweight page for a named option nested inside a broader discipline
   (Off-Piste's Ski Touring, Heliski, Off-Piste & Freeride). Left-aligned,
   readable-width prose — the centered narrow style above is for a single
   short paragraph, not a full page of body copy. */
.subdisc-body { padding: 24px 90px 72px; max-width: 760px; margin: 0 auto; }
.subdisc-body p { font-family: Georgia, serif; font-size: 17px; line-height: 1.9; color: var(--ink); text-align: left; margin: 0 0 20px; }
.subdisc-body ul, .subdisc-body ol { margin: 0 0 20px 20px; color: var(--ink); font-size: 15px; line-height: 1.8; }

/* Optional photo+text split, same mechanism as .terrain--feature / .beyond--
   feature elsewhere: plain .subdisc-body is untouched until an editor sets
   the optional body photo, then this chained modifier switches it to a
   two-column layout. Top/bottom padding stays non-zero for the same reason
   as .terrain--feature above — the .cta section right after this one is
   built with zero top padding on purpose, relying on whatever precedes it. */
.subdisc-body.subdisc-body--feature {
	display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 64px 0; max-width: none; margin: 0;
}
.subdisc-body.subdisc-body--feature .subdisc-body__media { background-size: cover; background-position: center; min-height: 440px; }
.subdisc-body.subdisc-body--feature .subdisc-body__content { padding: 64px; align-self: center; max-width: 480px; margin: 0 auto; }

@media (max-width: 720px) {
	.subdisc-body.subdisc-body--feature { grid-template-columns: 1fr; padding: 40px 0; }
	.subdisc-body.subdisc-body--feature .subdisc-body__media { min-height: 240px; }
	.subdisc-body.subdisc-body--feature .subdisc-body__content { padding: 40px 24px; max-width: none; }
}

/* ---------- Instructors preview grid ---------- */
.instructors { padding: 0 48px 72px; }
.instructors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.instructors__avatar, .avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--cream); background-size: cover; background-position: center; margin: 0 auto 14px; }
.instructors__name, .related__person .name { font-size: 14px; color: var(--ink); margin: 0; }
.instructors__role, .related__person .role { font-size: 12px; color: var(--faint); margin: 4px 0 0; }

/* ---------- Testimonial ---------- */
.testimonial { text-align: center; padding: 56px 70px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.testimonial__quote { font-family: Georgia, serif; font-style: italic; font-size: 18px; color: var(--ink); margin: 0 0 14px; line-height: 1.7; }
.testimonial__who { font-size: 11px; color: var(--faint); letter-spacing: 0.06em; }
/* Wrapper around the testimonial + "Read more reviews on Google" link
   (see template-parts/testimonial.php — used on every page that shows a
   testimonial, not just the homepage). .testimonial normally draws its
   own bottom border right after the quote; here that border is moved to
   the wrapper instead, so it closes the box AFTER the reviews link rather
   than before it — otherwise the link visually grouped with whatever
   comes next on the page instead of with the testimonial above it. */
.testimonial-wrap { border-bottom: 1px solid #eee; }
.testimonial-wrap .testimonial { border-bottom: none; padding-bottom: 20px; }
/* Small, "more"-style link like .who__card-more / .options__row-more
   elsewhere, not a full button, since it's a secondary path — the
   testimonial itself already does the main convincing. The star + rating
   text is editable in the Customizer (Social Links) so the client can
   update the number as their real Google rating/review count changes. */
.testimonial__more { text-align: center; padding: 0 0 36px; }
.testimonial__more a { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.testimonial__more a:hover, .testimonial__more a:focus-visible { color: var(--ink); }

/* ---------- CTA ---------- */
.cta { text-align: center; padding: 0 60px 80px; }
/* Homepage's closing CTA sits right after .instagram-cta, which ends in its
   own bottom border — .cta's shared 0-top-padding (by design elsewhere,
   where it follows a section with its own bottom spacing) left "Tell us
   about your ideal instructor" glued to that line. Scoped modifier +
   chained selector (.cta.cta--home, not a bare .cta--home) so the fix only
   applies here and can't be silently overridden by the later, higher-
   specificity-tied .cta rule above — same pattern already used for
   .cta.cta--network. */
.cta.cta--home { padding-top: 64px; }
/* Same glued-to-testimonial-border fix as .cta--home, applied only when the
   destination/Concierge templates' own PHP logic detects the CTA would
   otherwise follow the shared testimonial partial with nothing in between —
   see single-destination.php and template-concierge.php. */
.cta.cta--destination, .cta.cta--concierge { padding-top: 64px; }
.cta h2 { font-family: Georgia, serif; font-weight: 400; font-size: 26px; color: var(--ink); margin: 0 0 14px; }
.cta .desc { font-size: 14px; color: var(--muted); max-width: 460px; margin: 0 auto 26px; line-height: 1.7; }

/* ---------- Homepage "Follow the season" (live Facebook feed) ---------- */
.follow { padding: 64px 48px 72px; text-align: center; }
.follow__intro { font-size: 14px; color: var(--muted); margin: 0 0 28px; }
.follow__embed { max-width: 500px; margin: 0 auto; }
.follow__embed .fb-page, .follow__embed iframe { width: 100% !important; }
/* Stopgap Instagram CTA below the Facebook feed — a thin top border keeps
   it visually separate from .follow above without a full color band,
   consistent with how .cta--mid style separators were handled elsewhere. */
/* No border above: this belongs with .follow, not with the final .cta
   below it — both are "come see us on social media" content, one block.
   The line goes on the BOTTOM instead, since .cta right after this has no
   top padding of its own (by design, elsewhere it always follows a
   section with its own bottom spacing) — without a line + real bottom
   padding here, "Join 7,000+ followers" and "Tell us about your ideal
   instructor" ran together as if they were one group. */
.instagram-cta {
	text-align: center; padding: 32px 48px 56px;
	border-bottom: 1px solid var(--border);
}
.instagram-cta__label { font-size: 15px; color: var(--ink); margin: 0 0 18px; font-family: Georgia, serif; }
/* Instagram camera-icon glyph (same shape as the footer social icon)
   inline in the button, so it reads as an Instagram action rather than a
   generic button — kept in the site's own ink/gold outline style instead
   of Instagram's brand gradient, to stay consistent with the rest of the
   design system. */
.btn--instagram { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); text-align: center; padding: 26px 0; }
.site-footer__line { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; margin: 0; }
.site-footer__line a { color: rgba(255,255,255,0.75); text-decoration: underline; }
/* "Cookie preferences" is a <button>, not a link (it re-opens the consent
   banner via JS, it doesn't navigate anywhere) — styled to read identically
   to the legal links either side of it. */
.footer-link-button {
	background: none; border: none; padding: 0; margin: 0; cursor: pointer;
	font: inherit; font-size: 11px; letter-spacing: 0.05em;
	color: rgba(255,255,255,0.75); text-decoration: underline;
}
/* Partner logos — forced to a plain white silhouette (brightness(0) +
   invert(1)) rather than shown in each brand's own colors, so three very
   different logos (an outdoor gear brand, an apparel brand, a local shop)
   don't clash with each other or with the navy footer. Dimmed by default,
   full opacity on hover as a small interactive hint that they're links. */
.site-footer__partners { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 28px; margin: 20px 0 0; }
/* height comes from the inline style footer.php prints (per-logo, set in
   the Customizer) — 28px here is only a fallback if that's ever missing. */
.site-footer__partners img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 0.15s ease; }
.site-footer__partners a:hover img, .site-footer__partners a:focus-visible img { opacity: 0.9; }
/* Icons bumped 18px -> 24px with a wider gap — client feedback: too small,
   and Facebook's bare "f" wasn't recognisable (fixed in footer.php with a
   circle frame around it, matching Instagram's framed-square treatment). */
.site-footer__social { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 16px 0 0; }
.site-footer__social a { display: inline-flex; color: rgba(255,255,255,0.6); transition: color 0.15s ease; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { color: var(--gold); }
.site-footer__copyright { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 0.04em; margin: 14px 0 0; }

/* ---------- Floating WhatsApp button (all pages, via footer.php) ---------- */
/* Fixed corner button, present site-wide. Uses the site's own navy rather
   than WhatsApp's brand green and stays small — a quiet extra way to reach
   the agency rather than a generic live-chat widget that would clash with
   the high-end positioning. Hidden entirely (see footer.php) if no
   WhatsApp number is set in the Customizer. */
.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 4px 18px rgba(14,31,59,0.4);
	z-index: 999;
	transition: background 0.15s ease, transform 0.15s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible {
	background: var(--navy-soft);
	transform: translateY(-2px);
}
@media (max-width: 640px) {
	.whatsapp-float { right: 16px; bottom: 16px; width: 46px; height: 46px; }
	.whatsapp-float svg { width: 23px; height: 23px; }
}

/* ---------- Cookie consent banner (template-parts/cookie-banner.php) ----------
   Fixed bar, shown until the visitor accepts or declines (assets/js/main.js
   toggles the [hidden] attribute and remembers the choice in localStorage —
   nothing server-side). Higher z-index than the WhatsApp bubble, and nudges
   that bubble up while visible so the two never overlap. */
.cookie-banner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
	background: #fff; border-top: 1px solid var(--border);
	box-shadow: 0 -4px 18px rgba(14,31,59,0.12);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
	max-width: 1100px; margin: 0 auto; padding: 20px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.cookie-banner__text { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 0; }
.cookie-banner__text a { color: var(--ink); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner__actions .btn { padding: 10px 22px; font-size: 11px; cursor: pointer; background: none; font-family: inherit; }
body.has-cookie-banner .whatsapp-float { bottom: 108px; }

@media (max-width: 720px) {
	.cookie-banner__inner { flex-direction: column; align-items: stretch; text-align: center; padding: 18px 20px; gap: 16px; }
	.cookie-banner__actions { justify-content: center; }
	body.has-cookie-banner .whatsapp-float { bottom: 148px; }
}

/* ---------- Contact page — WhatsApp alternative ---------- */
/* Sits above the (long, detailed) request form as a faster option for
   people who'd rather just message directly — hidden if no WhatsApp
   number is set in the Customizer. */
.contact-whatsapp {
	max-width: 680px;
	margin: 0 auto 40px;
	padding: 26px 28px;
	background: var(--cream);
	text-align: center;
}
.contact-whatsapp p { font-family: Georgia, serif; font-size: 15px; color: var(--ink); margin: 0 0 16px; }
.btn--whatsapp { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Instructor profile ---------- */
.profile-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; padding: 48px 60px 56px; align-items: center; }
.profile-photo { aspect-ratio: 4/5; background: var(--cream); background-size: cover; background-position: center; }
.profile-info { padding-left: 48px; }
.profile-info .eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; margin: 0 0 14px; }
.profile-info h1 { font-family: Georgia, serif; font-weight: 400; font-size: 34px; color: var(--ink); margin: 0 0 10px; }
.profile-info .tag { font-size: 13px; color: var(--muted); margin: 0 0 28px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0 0 32px; }
.facts .field { font-size: 10.5px; letter-spacing: 0.08em; color: var(--gold); text-transform: uppercase; margin: 0 0 4px; }
.facts .value { font-size: 13px; color: var(--ink); margin: 0; }
.profile-info .btn--cta { margin-top: 4px; }
.bio, .suited { padding: 56px 90px; text-align: center; }
.bio { background: var(--cream); }
.bio p, .suited p { font-family: Georgia, serif; font-size: 18px; line-height: 1.85; color: var(--ink); }
.gallery { padding: 0 60px 72px; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery__grid img { aspect-ratio: 4/5; object-fit: cover; width: 100%; height: 100%; }
.related__people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; padding: 0 60px 72px; }

/* ---------- FAQ ---------- */
.faq, .category { padding: 0 60px 56px; max-width: 700px; margin: 0 auto; }
/* On Concierge, "Questions before you begin" follows the shared testimonial
   partial, which ends in its own border line (.testimonial-wrap) — .faq's
   shared 0-top-padding left the label glued to it, same pattern already
   fixed for .related and .cta elsewhere. Chained selector + modifier so
   the standalone FAQ page's own .category-based layout is untouched. */
.faq.faq--concierge { padding-top: 64px; }
.category h2 { font-family: Georgia, serif; font-weight: 400; font-size: 20px; color: var(--ink); margin: 0 0 8px; padding-bottom: 14px; border-bottom: 1px solid var(--gold); }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-item h3 { font-size: 14px; color: var(--ink); margin: 0 0 8px; font-weight: 600; }
.faq-item p { font-size: 13px; color: var(--muted); line-height: 1.75; margin: 0; }

/* ---------- Legal / long-form text ---------- */
.legal { padding: 0 60px 60px; max-width: 760px; margin: 0 auto; }
.legal h2 { font-family: Georgia, serif; font-weight: 400; font-size: 19px; color: var(--ink); margin: 32px 0 14px; }
.legal h3 { font-size: 13.5px; color: var(--ink); margin: 22px 0 8px; font-weight: 600; }
.legal p { font-size: 13px; color: var(--muted); line-height: 1.85; margin: 0 0 12px; }
.legal ul { font-size: 13px; color: var(--muted); line-height: 1.85; padding-left: 20px; }

/* ---------- Trust grid (Concierge) ---------- */
.trust { padding: 72px 60px; }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.trust__item { text-align: center; padding: 28px 20px; background: var(--cream); }
.trust__item h3 { font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.trust__item p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; }

.beyond { padding: 80px 60px; text-align: center; }
.beyond--white { background: #fff; }
.beyond .intro { font-family: Georgia, serif; font-size: 19px; line-height: 1.8; color: var(--ink); max-width: 640px; margin: 0 auto 36px; }
/* Photo+text split, only used once a photo is actually set in wp-admin
   (see template-concierge.php) — .beyond__content on its own (no photo)
   is just a plain wrapper and inherits the centered layout above untouched.
   Top/bottom padding is intentionally NOT 0 (only left/right are, so the
   photo still bleeds edge-to-edge sideways): "Beyond skiing" and
   "Accommodation" are two consecutive .beyond sections, and if an editor
   sets a photo on both, two zero-padding sections back to back would leave
   their photos touching with no gap at all — the same "glued" issue fixed
   elsewhere on this site, just not yet visible until both photos are set. */
.beyond--feature { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; text-align: left; padding: 64px 0; }
.beyond--feature .beyond__media { background-size: cover; background-position: center; min-height: 440px; }
.beyond--feature .beyond__content { padding: 64px; align-self: center; }
.beyond--feature .section-label, .beyond--feature .intro { text-align: left; }
.beyond--feature .intro { margin: 0 0 24px; }
.beyond--feature .beyond-list { justify-content: flex-start; margin: 0; }
.beyond--feature.beyond--reverse .beyond__media { order: 2; }

@media (max-width: 720px) {
	.beyond--feature { grid-template-columns: 1fr; padding: 40px 0; }
	.beyond--feature.beyond--reverse .beyond__media { order: 0; }
	.beyond--feature .beyond__media { min-height: 240px; }
	.beyond--feature .beyond__content { padding: 40px 24px; }
}

/* ---------- Request form ---------- */
.request-form-wrap { padding: 0 60px 80px; max-width: 680px; margin: 0 auto; }

.form-success { background: var(--cream); padding: 32px; text-align: left; }
.form-success p:not(.section-label) { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }

.form-errors { background: #fbeceb; border: 1px solid #e3a8a3; padding: 16px 20px; margin-bottom: 28px; }
.form-errors ul { margin: 0; padding-left: 18px; }
.form-errors li { font-size: 13px; color: #8a2f28; line-height: 1.6; }

.request-form fieldset {
	border: none; border-top: 1px solid var(--border); margin: 0 0 32px; padding: 28px 0 0;
}
.request-form legend {
	font-family: Georgia, serif; font-size: 15px; color: var(--ink); padding: 0; margin-bottom: 18px;
}
.form-row { margin-bottom: 18px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.request-form label {
	display: block; font-size: 11.5px; letter-spacing: 0.03em; color: var(--muted);
	margin-bottom: 6px;
}
.request-form label.checkbox {
	display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink);
}
.request-form label.checkbox input { margin-top: 3px; }
.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="tel"],
.request-form input[type="date"],
.request-form select,
.request-form textarea {
	width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink);
	border: 1px solid var(--border); background: #fff; padding: 10px 12px;
}
.request-form textarea { resize: vertical; }
.form-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }

/* Honeypot: visually hidden but not display:none, so unsophisticated bots
   that skip display:none fields still fall for it. */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.request-form button[type="submit"] { cursor: pointer; font-family: inherit; }

@media (max-width: 720px) {
	.request-form-wrap { padding-left: 24px; padding-right: 24px; }
	.form-row--split, .form-checkboxes { grid-template-columns: 1fr; }
}

/* ---------- Rates table ---------- */
.rates-table-wrap { padding: 8px 60px 40px; max-width: 640px; margin: 0 auto; }
.rates-table { width: 100%; border-collapse: collapse; }
.rates-table th { text-align: left; font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; padding: 0 0 14px; border-bottom: 1px solid var(--gold); font-weight: 600; }
.rates-table td { padding: 20px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--ink); vertical-align: top; }
.rates-table td.session { font-family: Georgia, serif; font-size: 17px; }
.rates-table td.time { color: var(--muted); font-size: 13px; }
.rates-table td.price { text-align: right; font-family: Georgia, serif; font-size: 17px; white-space: nowrap; }
.rates-table .align-right { text-align: right; }
.rates-notes { padding: 32px 60px 64px; max-width: 640px; margin: 0 auto; }
.rates-notes p { font-size: 12.5px; color: var(--muted); line-height: 1.9; margin: 0 0 12px; }
.rates-notes .vat-note { color: var(--faint); font-style: italic; }

@media (max-width: 720px) {
	.site-header, .hero, .hero--simple, .philosophy, .steps, .process, .specialties,
	.who, .traits, .terrain, .safety, .practical, .why, .instructors, .testimonial,
	.cta, .breadcrumb, .faq, .category, .legal, .trust, .beyond, .profile-hero, .gallery, .related__people,
	.rates-table-wrap, .rates-notes, .subdisc-body {
		padding-left: 24px; padding-right: 24px;
	}
	.steps__grid, .process__grid, .who__grid, .traits__grid, .trust__grid,
	.instructors__grid, .related__people, .profile-hero, .gallery__grid {
		grid-template-columns: 1fr;
	}
	.specialties__grid { grid-template-columns: repeat(2, 1fr); }
	.profile-info { padding-left: 0; padding-top: 24px; }
	.options__row { flex-direction: column; }
	.options__row-media { flex-basis: auto; height: 160px; }
	.options__row-content { padding: 20px; }
	.hero h1 { font-size: 30px; }
	.rates-table td.time { display: none; }
	/* Homepage drone video: on a tall, narrow phone screen, object-fit:cover
	   only ever shows a ~39%-wide vertical slice of this 16:9 clip — centered
	   by default, which cut off the trailing (yellow-jacket) skier almost
	   the whole loop, since the two skiers drift apart from roughly 20% to
	   60% of the frame's width over the 10s clip. No single static crop
	   keeps both in frame every instant (they're too far apart at times),
	   but shifting the window left of center keeps both in frame far more
	   of the time than the default centered crop did. Checked frame-by-frame
	   against header_2.mp4 (September 2026) — revisit if the video changes. */
	.home .hero video { object-position: 30% bottom; }
}