/* ---------- the brand's own fonts, served from this site ---------- */
@font-face{
  font-family:'Josefin Sans';src:url('/assets/fonts/JosefinSans-Variable.ttf') format('truetype');
  font-weight:100 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Lato';src:url('/assets/fonts/Lato-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Lato';src:url('/assets/fonts/Lato-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Lato';src:url('/assets/fonts/Lato-Black.ttf') format('truetype');
  font-weight:900;font-style:normal;font-display:swap;
}

/* ============================================================
   Performance Verbier — design tokens
   ============================================================ */
:root{
  /* --- neutrals: the core is monochrome. Colour comes from photography. --- */
  --ink:#0D0D0F;
  --ink-2:#2A2A2F;
  --slate:#5E6066;
  --slate-2:#9A9CA1;
  --fog:#D9DADD;
  --frost:#E9EAEC;
  --linen:#F4F2EF;
  --white:#FFFFFF;

  /* --- Performance Verbier: the bottle green of the current team kit.
         Sampled from the uniforms: ~#007832 in sun, ~#183030 in shade.
         (The earlier aubergine came from the previous kit — kept below only
         because older photography still shows it.) --- */
  --pv-green:#0C5236;
  --pv-green-hover:#07381F;
  --pv-green-tint:#EDF4EF;
  --pv-lime:#C8E000;          /* the hood lining and lettering. Use sparingly. */
  --pv-heritage:#3A1D4D;      /* the old purple. Not in use. */
  --pv-stone:#EFEBE6;

  /* --- Powder Extreme: ink for actions, alpine blues for surfaces --- */
  --px-night:#0E1A26;
  --px-alpine:#1C3A52;
  --px-sky:#4E7E9E;
  --px-ice:#EAF0F4;
  --px-pine:#2B4435;

  /* --- semantic aliases: components read only these --- */
  --accent:var(--pv-green);
  --accent-hover:var(--pv-green-hover);
  --accent-tint:var(--pv-green-tint);
  --text:var(--ink);
  --text-muted:var(--slate);
  --text-faint:var(--slate-2);
  --surface:var(--white);
  --surface-alt:var(--linen);
  --surface-quiet:var(--pv-stone);
  --surface-inverse:var(--ink);
  --border-subtle:var(--frost);
  --border:var(--fog);
  --focus:rgba(12,82,54,.30);

  /* --- type --- */
  --display:'Josefin Sans','Futura','Century Gothic',sans-serif;
  --body:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* --- layout: 1200 container, 48 side padding, 24 gutter --- */
  --container:1200px;
  --mid:920px;
  --narrow:680px;
  --pad:48px;
  --gutter:24px;
  --header-h:76px;

  /* --- near-square. Cards and images 0, controls 2px, pills for chips. --- */
  --r-card:0;
  --r-control:2px;
  --r-pill:999px;

  /* --- shadows only for things that float --- */
  --shadow-2:0 2px 10px rgba(13,13,15,.07),0 1px 2px rgba(13,13,15,.05);
  --shadow-3:0 12px 40px rgba(13,13,15,.14);

  /* --- motion: calm and gliding. No bounce, no spin. --- */
  --ease-glide:cubic-bezier(.22,.61,.36,1);
  --t-fast:120ms;
  --t-base:240ms;
  --t-slow:480ms;

  /* --- text over photography uses a gradient, never a box --- */
  --photo-protect:linear-gradient(180deg,rgba(13,13,15,.52) 0%,rgba(13,13,15,.42) 35%,rgba(13,13,15,.72) 100%);
}

[data-brand="px"]{
  --accent:var(--px-night);
  --accent-hover:#060E16;
  --accent-tint:var(--px-ice);
  --surface-alt:var(--px-ice);
  --surface-quiet:var(--px-ice);
  --surface-inverse:var(--px-night);
  --focus:rgba(28,58,82,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Display type is Josefin: uppercase, bold, lightly tracked. */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.14;margin:0;text-wrap:balance;
}
p{margin:0 0 1em}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.wrap-mid{max-width:var(--mid);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--pad)}
@media(max-width:760px){
  .wrap,.wrap-mid,.wrap-narrow{padding:0 24px}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}

/* Overlines mirror the spaced lettering of the logo lockups. */
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
  margin-bottom:18px;
}
.band.dark .eyebrow,.hero .eyebrow{color:rgba(255,255,255,.72)}

/* ---------- header: 76px, transparent over the hero, white elsewhere ---------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--surface);
  border-bottom:1px solid var(--border-subtle)}
.hdr-in{display:flex;align-items:center;gap:28px;height:var(--header-h)}
/* The lockup is the artwork, not type. currentColor lets one file serve
   the white header and the dark footer. */
.logo{display:flex;align-items:center;flex:0 0 auto;color:var(--ink);text-decoration:none}
.logo img{height:40px;width:auto;display:block}
@media(max-width:560px){.logo img{height:32px}}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main a{text-decoration:none;font-family:var(--body);font-size:12px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  padding:10px 14px;white-space:nowrap;transition:color var(--t-fast) var(--ease-glide)}
nav.main a:hover{color:var(--accent)}
nav.main a.on{color:var(--accent)}
.btn-nav{background:var(--accent)!important;color:#fff!important;padding:12px 22px!important;
  border-radius:var(--r-control);transition:background var(--t-base) var(--ease-glide)}
.btn-nav:hover{background:var(--accent-hover)!important;color:#fff!important}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--border);
  border-radius:var(--r-control);width:44px;height:44px;cursor:pointer;
  align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--ink)}
.burger span:before{top:-6px}.burger span:after{top:6px}
@media(max-width:1000px){
  nav.main{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--surface);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 22px;
    border-bottom:1px solid var(--border);box-shadow:var(--shadow-2);display:none}
  nav.main.open{display:flex}
  nav.main a{padding:16px 4px;font-size:13px;border-bottom:1px solid var(--border-subtle)}
  .btn-nav{text-align:center;margin-top:14px;border-bottom:none!important}
  .burger{display:flex}
}

/* ---------- buttons: Lato Black, uppercase, widely tracked ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:900;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:16px 30px;border:1px solid var(--accent);
  border-radius:var(--r-control);cursor:pointer;
  transition:background var(--t-base) var(--ease-glide),transform var(--t-fast) var(--ease-glide)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:transparent;color:#fff;border-color:#fff}
.btn.sm{padding:11px 20px;font-size:11px}

/* ---------- hero: full-bleed photography, gradient protection ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;background:var(--ink)}
/* Photographs crossfade. Only the active one is opaque; the gradient over the
   top is what keeps the headline readable, per the design system — never a box. */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1200ms var(--ease-glide)}
.hero-img.on{opacity:1}
.hero-media:after{content:"";position:absolute;inset:0;z-index:2;
  background:var(--photo-protect)}
.hero-in{position:relative;z-index:3;padding:118px 0 96px;max-width:780px}
@media(min-width:761px){
  /* right-aligned against the photograph. Below this width the text fills the
     column anyway, so ragged-left just makes it harder to read. */
  .hero-in{margin-left:auto;text-align:right}
  .hero-in p{margin-left:auto}
  .hero .cta-row{justify-content:flex-end}
}
.hero h1{font-size:clamp(36px,5.6vw,62px);color:#fff;margin-bottom:24px}
/* Headline type is set once for both banner kinds. They had drifted apart — the
   homepage at .02em/1.14, page banners at .03em/1.06 — and in all-caps a tracking
   difference of a hundredth of an em is visible. Only the size differs by design. */
.hero h1,.page-hero h1{letter-spacing:.02em;line-height:1.08}
.hero p{font-family:var(--body);font-size:clamp(16px,1.9vw,19px);color:rgba(255,255,255,.82);
  max-width:54ch;margin-bottom:36px;text-transform:none;line-height:1.65}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.hero-in{padding:70px 0 60px}}

/* ---------- stat strip ---------- */
.stats{background:var(--surface-alt);border-bottom:1px solid var(--border-subtle)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 22px;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:44px;
  line-height:1;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-top:12px;line-height:1.5}
@media(max-width:760px){.stats-in{grid-template-columns:repeat(2,1fr)}.stat b{font-size:34px}
  .stat{padding:26px 14px}}

/* ---------- sections ---------- */
section.band{padding:96px 0}
section.band.tight{padding:64px 0}
section.band.alt{background:var(--surface-alt)}
section.band.dark{background:var(--surface-inverse);color:#fff}
section.band.dark h1,section.band.dark h2,section.band.dark h3{color:#fff}
section.band.dark p{color:rgba(255,255,255,.78)}
@media(max-width:760px){section.band{padding:60px 0}section.band.tight{padding:44px 0}}
.sec-head{max-width:62ch;margin-bottom:48px}
.sec-head h1,.sec-head h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:18px}
.sec-head p{font-size:17px;color:var(--text-muted);margin:0;text-transform:none}

/* ---------- team grid ---------- */
.filters{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:22px 0;margin-bottom:36px}
.filter-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.filter-row:last-child{margin-bottom:0}
.filter-row > b{font-family:var(--body);font-size:10.5px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-2);padding-top:9px;flex:0 0 86px}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.chip{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:7px 15px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:all var(--t-fast) var(--ease-glide)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip.clear{border-style:dashed;color:var(--slate)}
.result-line{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-bottom:28px}
.result-line b{color:var(--ink)}

.grid-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:40px var(--gutter)}
.card-person{text-decoration:none;color:inherit;display:block}
.card-person .shot{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--frost);margin-bottom:16px;border-radius:var(--r-card)}
/* both layers are absolutely positioned so they occupy exactly the same box —
   an auto-height wrapper made the two behave differently */
.card-person .shot .a,.card-person .shot .b{position:absolute;inset:0;
  transition:opacity var(--t-base) var(--ease-glide)}
.card-person .shot img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease-glide),opacity var(--t-base) var(--ease-glide)}
.card-person:hover .shot img{transform:scale(1.04)}
.card-person .shot .b{opacity:0;transition:opacity var(--t-base) var(--ease-glide)}
.card-person:hover .shot .a{opacity:0}
.card-person:hover .shot .b{opacity:1}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--frost);color:var(--slate-2);
  font-family:var(--display);font-size:52px;font-weight:700;letter-spacing:.04em}
.ph.warn{background:var(--pv-green-tint);color:var(--accent)}
.ph small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;font-family:var(--body);font-weight:900;
  color:var(--slate-2)}
.card-person h3{font-size:16px;margin-bottom:6px;letter-spacing:.08em}
.card-person .meta{font-size:13.5px;color:var(--text-muted);line-height:1.6;text-transform:none}
.card-person .qual{color:var(--ink-2);font-weight:700}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.tg{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--border-subtle);color:var(--slate)}
.tg.miss{border-color:var(--accent-tint);background:var(--accent-tint);color:var(--accent)}
.empty{padding:64px 20px;text-align:center;color:var(--text-muted);
  border:1px solid var(--border-subtle);grid-column:1/-1}

/* ---------- instructor profile ---------- */
.profile-top{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--pad);align-items:start}
@media(max-width:900px){.profile-top{grid-template-columns:1fr;gap:32px}}
.profile-shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--frost)}
.profile-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.facts{list-style:none;padding:0;margin:32px 0 0;border-top:1px solid var(--border)}
.facts li{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--border-subtle);
  font-size:15px}
.facts b{flex:0 0 150px;color:var(--slate-2);font-weight:900;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;padding-top:4px}
.facts span{flex:1}
.qual-link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-tint);
  font-size:13px}
.qual-link:hover{border-bottom-color:var(--accent)}
.bio{font-size:17px;line-height:1.75;color:var(--ink-2);max-width:62ch}
.pull{border-left:2px solid var(--accent);padding:2px 0 2px 26px;margin:34px 0;
  font-size:19px;line-height:1.6;color:var(--ink)}
.pull small{display:block;font-family:var(--body);font-size:10.5px;font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);margin-bottom:12px}

/* ---------- products: no border, no shadow, whitespace does the work ---------- */
.grid-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:40px var(--gutter)}
.card-product{background:transparent;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;position:relative;
  padding-top:22px;border-top:1px solid var(--ink)}
.card-product h3{font-size:19px;margin-bottom:14px;letter-spacing:.08em}
.card-product .price{font-family:var(--display);font-weight:700;font-size:32px;
  letter-spacing:0;margin:0 0 4px;color:var(--ink)}
.card-product .price small{font-family:var(--body);font-size:12px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-left:4px}
.card-product .peak{font-size:13px;color:var(--text-muted);margin-bottom:18px}
/* Two Hours has no peak price, so this slot is empty on that card. An empty div has
   no line box and collapses, which would pull its description a line higher than the
   cards beside it. A non-breaking space holds the line without printing anything. */
.card-product .peak:empty:before{content:"\00a0"}
.card-product .peak b{color:var(--ink-2);font-weight:900;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.card-product p{font-size:15px;color:var(--text-muted);flex:1;margin-bottom:20px}
.card-product .go{font-family:var(--body);font-size:11px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:3px;align-self:flex-start;
  transition:color var(--t-fast) var(--ease-glide)}
.card-product:hover .go{color:var(--accent);border-bottom-color:var(--accent)}
.flag{position:absolute;top:-10px;right:0;background:var(--accent);color:#fff;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:900;padding:4px 10px}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose h2{font-size:22px;margin:52px 0 16px;letter-spacing:.06em}
.prose h3{font-size:17px;margin:38px 0 12px;letter-spacing:.08em}
.prose p{font-size:16.5px;color:var(--ink-2)}
.prose ul{padding-left:20px;color:var(--ink-2)}
.prose li{margin:9px 0}
.prose strong,.prose b{color:var(--ink);font-weight:700}

/* ---------- accordion ---------- */
details.acc{border-top:1px solid var(--border);margin:0}
details.acc:last-of-type{border-bottom:1px solid var(--border)}
details.acc summary{padding:22px 2px;cursor:pointer;font-family:var(--display);
  font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:after{content:"+";font-family:var(--body);font-size:20px;
  color:var(--slate-2);font-weight:300}
details.acc[open] summary:after{content:"\2013"}
details.acc .body{padding:0 2px 26px;color:var(--ink-2)}
details.acc .body p{font-size:16px}
.lvl{display:grid;grid-template-columns:180px 1fr;gap:10px 24px;font-size:15.5px}
.lvl b{color:var(--ink);font-weight:900;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding-top:3px}
@media(max-width:640px){.lvl{grid-template-columns:1fr;gap:2px 0}.lvl b{margin-top:18px}}

/* ---------- callout ---------- */
.note{background:var(--surface-quiet);border-left:2px solid var(--accent);
  padding:22px 26px;margin:32px 0}
.note p:last-child{margin:0}
.note b{color:var(--ink);font-weight:900}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--pad);align-items:start}
@media(max-width:880px){.form-grid{grid-template-columns:1fr;gap:36px}}
fieldset{border:none;padding:0;margin:0 0 40px}
legend{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:22px;padding:0;color:var(--ink)}
.field{margin-bottom:20px}
.field label{display:block;font-size:10.5px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:8px;color:var(--ink-2)}
.field .hint{font-size:13.5px;color:var(--text-muted);font-weight:400;letter-spacing:0;
  text-transform:none;margin:-2px 0 8px}
input,select,textarea{width:100%;font-family:var(--body);font-size:15px;padding:14px;
  border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface);
  color:var(--ink);transition:border-color var(--t-fast) var(--ease-glide)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus)}
textarea{min-height:118px;resize:vertical}
/* A file input's "Choose file" button is drawn by the browser and sits inside the
   control, so the generous padding used on text inputs makes it unusually tall. */
.field input[type=file]{padding:10px 13px;font-size:14px;cursor:pointer}
/* .hint sits above a control; this is the same voice below one. */
.field small{display:block;font-size:13.5px;color:var(--text-muted);margin-top:7px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.aside{background:var(--surface-alt);padding:32px 28px;font-size:15px}
.aside h3{font-size:14px;letter-spacing:.14em;margin-bottom:16px}
.aside ul{list-style:none;padding:0;margin:0 0 22px}
.aside li{padding:8px 0 8px 24px;position:relative;color:var(--ink-2)}
/* A real tick, not a dash. The font stack is explicit because neither Lato nor
   Josefin Sans carries U+2713 — left to inherit, the glyph falls back to whatever
   the device happens to have and the size jumps around between platforms. */
/* top matches the li's padding-top and the line-height matches the text's, so the
   tick's line box and the first line of text centre together. Tuning a pixel offset
   instead would drift the moment the font or size changes. */
.aside li:before{content:"\2713";position:absolute;left:0;top:8px;line-height:1.5;
  font-family:"Apple Symbols","Segoe UI Symbol","DejaVu Sans",sans-serif;
  font-size:13px;font-weight:700;color:var(--accent)}

/* A tick list for prose, not inside an aside. Same glyph and same explicit font
   stack as .aside li:before — see the note above for why the stack is spelled out
   rather than inherited. The sizes differ because prose text is larger. */
.ticks{list-style:none;padding:0;margin:0 0 22px}
.ticks li{padding:6px 0 6px 28px;position:relative}
.ticks li:before{content:"\2713";position:absolute;left:0;top:6px;line-height:1.7;
  font-family:"Apple Symbols","Segoe UI Symbol","DejaVu Sans",sans-serif;
  font-size:15px;font-weight:700;color:var(--accent)}

/* A quiet closing line — an aside to a different reader than the page was written
   for, so it is deliberately not styled as a second call to action. */
.foot-line{text-align:center;font-size:15px;color:var(--text-muted);margin:0}
.foot-line a{color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.foot-line a:hover{color:var(--accent)}

/* ---------- page hero ----------
   A header band, not a second homepage: it stops well short of filling the screen
   so the content a visitor came for is still visible. The photographic and the
   plain green variants are the same height so pages read as a set. */
.page-hero{position:relative;display:flex;align-items:flex-end;
  min-height:clamp(240px,38vh,380px);overflow:hidden;background:var(--accent)}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The scrim is a gradient, not a flat wash: the type sits at the bottom, so that is
   where the darkening is needed, and the photograph stays legible higher up. */
.ph-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,15,.34) 0%,rgba(10,20,15,.30) 34%,rgba(10,20,15,.66) 82%,rgba(10,20,15,.76) 100%)}
.page-hero .wrap{position:relative;width:100%;padding-top:46px;padding-bottom:36px}
/* Snow is the brightest thing a camera here will ever record, and white type over
   it fails on contrast however the scrim is tuned. The shadow does the work the
   gradient cannot, and costs nothing where the photograph is already dark. */
.ph-in{max-width:42ch;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.page-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);margin:0}
.page-hero .eyebrow{color:rgba(255,255,255,.76);margin-bottom:12px}
.page-hero .ph-in p{color:rgba(255,255,255,.84);font-size:17px;margin:14px 0 0}
/* The breadcrumb and the eyebrow sit directly on top of each other, so they share
   one treatment and are told apart by colour alone. They previously differed in
   size, weight, tracking AND typeface, which read as two unrelated systems. */
.ph-crumb{font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:14px}
.ph-crumb a{color:rgba(255,255,255,.66);text-decoration:none}
.ph-crumb a:after{content:"\0020/\0020";color:rgba(255,255,255,.4)}
.ph-crumb a:hover{color:#fff}
.ph-crumb span{color:#fff}
/* No photograph: the band is flat brand green. A faint diagonal keeps it from
   reading as an empty placeholder without pretending to be an image. */
.page-hero.plain:before{content:"";position:absolute;inset:0;opacity:.07;
  background:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 9px)}
@media(max-width:760px){
  .page-hero{min-height:200px}
  .page-hero .wrap{padding-top:30px;padding-bottom:26px}
}

/* Powder Extreme coaches on the off-piste page. Same card as our own team so the
   page feels of a piece, but these link off-site and carry a certification line
   rather than specialism tags. */
.card-person.px .px-qual{font-size:12px;line-height:1.45;color:var(--text-muted);
  margin:6px 0 0;letter-spacing:.01em;text-transform:none}
.card-person.px h3:after{content:"\2197";font-size:.72em;margin-left:6px;
  color:var(--accent);vertical-align:super}

/* ---------- nav submenu ----------
   The parent stays a real link; the submenu is an addition. Opened on hover AND
   focus-within, because a touch device has no hover and a keyboard user has no
   mouse. On the mobile drawer it is simply always visible, indented. */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  display:none;flex-direction:column;background:var(--white);
  border:1px solid var(--border);min-width:178px;padding:6px 0;z-index:60;
  box-shadow:0 10px 30px rgba(0,0,0,.09)}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{display:flex}
.nav-sub a{padding:9px 16px;font-size:12.5px;letter-spacing:.06em;white-space:nowrap;
  text-transform:none;color:var(--ink-2)}
.nav-sub a:hover,.nav-sub a.on{color:var(--accent);background:var(--surface-alt)}
@media(max-width:900px){
  .nav-group{display:block;width:100%}
  .nav-sub{position:static;transform:none;display:flex;border:0;box-shadow:none;
    padding:0 0 6px 18px;background:transparent;min-width:0}
  .nav-sub a{padding:7px 0}
}

/* ---------- live data panels (weather, lifts, webcams) ---------- */
.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);margin:22px 0 0}
.live-cell{background:var(--white);padding:16px 14px;text-align:center}
.live-cell b{display:block;font-family:var(--body);font-size:10px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);margin-bottom:8px}
.live-cell span{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink)}
.live-cell small{display:block;font-size:12px;color:var(--text-muted);margin-top:4px}
.live-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);margin-top:18px}
.live-day{background:var(--white);padding:14px 10px;text-align:center}
.live-day b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-2);font-weight:900;margin-bottom:8px}
.live-day .t{font-family:var(--display);font-size:19px;font-weight:700}
.live-day .t i{font-style:normal;color:var(--text-muted);font-size:15px}
.live-day .p{font-size:12px;color:var(--accent);margin-top:5px;min-height:1em}
.live-note{font-size:12.5px;color:var(--text-muted);margin-top:12px}
.live-note a{color:var(--text-muted);text-decoration:underline}
.embed-wrap{border:1px solid var(--border);background:var(--white);margin-top:20px}
.embed-wrap iframe{display:block;width:100%;border:0}
.embed-cap{font-size:12.5px;color:var(--text-muted);padding:10px 14px;
  border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.live-fail{padding:22px;background:var(--surface-alt);font-size:14.5px;
  color:var(--text-muted);margin-top:22px}

/* An embed the visitor has to ask for. Styled as a deliberate offer, not a blocked
   thing: the page should not look broken while it waits. */
.embed-ask{padding:40px 28px;text-align:center;background:var(--surface-alt)}
.embed-ask p{font-size:14.5px;color:var(--text-muted);max-width:52ch;
  margin:0 auto 20px;line-height:1.6}

/* ---------- closing call to action ---------- */
/* A secondary block that should not compete with the real section headings.
   Used for the peak-season dates on the lessons index. */
.band.tight{padding-top:40px;padding-bottom:40px}
.sec-head.compact{margin-bottom:20px}
.sec-head.compact h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-2);font-weight:900;margin:0}
.facts.compact li{padding:9px 0;font-size:15px}
.facts.compact b{flex:0 0 190px;font-size:10px}
/* The closing call to action sits in the brand green, the same token the buttons and
   the card badges use — not near-black, which read as too heavy against the rest of
   the page. Using --accent rather than a hex means it follows the brand: on a Powder
   Extreme page this band picks up their navy automatically. */
.cta-band{background:var(--accent);color:#fff;padding:72px 48px;text-align:center}
.cta-band h2{font-size:clamp(24px,3.2vw,34px);color:#fff;margin-bottom:16px}
.cta-band p{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto 32px;font-size:16.5px}
@media(max-width:760px){.cta-band{padding:44px 24px}}

/* ---------- partners ---------- */
.p-cat{font-family:var(--body);font-size:10.5px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);padding-bottom:14px;
  border-bottom:1px solid var(--ink);margin-bottom:0}
.partner-list{display:flex;flex-direction:column}
.card-partner{display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start;
  padding:34px 0;border-bottom:1px solid var(--border-subtle)}
.card-partner:last-child{border-bottom:none}
@media(max-width:680px){.card-partner{grid-template-columns:1fr;gap:16px}}
.p-logo{display:flex;align-items:center;justify-content:center;min-height:86px;
  padding:16px;border:1px solid var(--border-subtle);text-decoration:none;
  transition:border-color var(--t-base) var(--ease-glide)}
.p-logo:hover{border-color:var(--ink)}
.p-logo img{max-height:56px;width:auto;object-fit:contain}
.wordmark{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);text-align:center;line-height:1.4}
.p-body h3{font-size:16px;margin-bottom:10px;letter-spacing:.08em}
.p-body h3 a{text-decoration:none}
.p-body h3 a:hover{color:var(--accent)}
.p-body p{font-size:15.5px;color:var(--text-muted);margin:0}
.p-note{margin-top:12px!important;font-size:14px!important;color:var(--ink-2)!important;
  padding-left:14px;border-left:2px solid var(--accent)}
.link-list{list-style:none;padding:0;margin:0;columns:2;column-gap:var(--pad)}
@media(max-width:680px){.link-list{columns:1}}
.link-list li{break-inside:avoid;padding:11px 0;font-size:15px;color:var(--text-muted)}
.link-list a{text-decoration:none;color:var(--ink)}
.link-list a b{font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.link-list a:hover b{color:var(--accent)}

/* ---------- footer ---------- */
footer.site{background:var(--surface-inverse);color:rgba(255,255,255,.66);
  padding:76px 0 36px;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-family:var(--body);font-size:10.5px;font-weight:900;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
footer.site a{color:rgba(255,255,255,.66);text-decoration:none;display:block;padding:5px 0;
  transition:color var(--t-fast) var(--ease-glide)}
footer.site a:hover{color:#fff}
footer.site .brand{height:34px;width:auto;margin-bottom:20px;
  /* the lockup is black artwork; invert it for the dark footer */
  filter:invert(1) brightness(2)}
/* ---------- sponsors ----------
   Two other companies' trademarks, sitting directly on the dark footer with no
   panel behind them: Savills' mark carries its own yellow ground, and the
   Laughland Jones artwork is the reversed white version, its paper knocked out.
   No CSS filters on either: a filter would be applied to whatever artwork happens
   to be in the file, and a logo that silently changes colour when the file is
   swapped is a trap. The white version is a deliberate, separate asset instead.
   Each logo's height is set per sponsor in
   SPONSORS, because one shared height makes the airier lockup look like an
   afterthought next to the solid square.

   Sits in the first footer column under the phone number, so it is left-aligned
   and sized to share that column rather than span the footer. */
.sponsors{margin-top:28px}
.sponsors h4{margin-bottom:14px}
.sponsor-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* A link for a sponsor with a URL, a plain span for one without: styled together
   so the artwork does not shift when a link is added later. */
.sponsor-row>a,.sponsor-row>span{display:block;
  transition:opacity var(--t-fast) var(--ease-glide)}
.sponsor-row>a{opacity:.92}
.sponsor-row>a:hover{opacity:1}
/* The per-sponsor height arrives as an inline style; width follows from it.
   .sponsor-art is the single-file preview's stand-in for the <img> and is sized
   by the same inline height, so preview and site cannot drift apart. */
.sponsor-row img,.sponsor-row .sponsor-art{width:auto;display:block}
.sponsor-row .sponsor-art{background-repeat:no-repeat;background-position:left center;
  background-size:contain}
/* Narrow screens: the footer collapses to one column, so scale both down
   proportionally rather than overriding the heights individually. */
@media(max-width:520px){.sponsor-row{gap:18px}
  .sponsor-row img,.sponsor-row .sponsor-art{transform:scale(.82);
    transform-origin:left center}}

.f-base{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px;
  color:rgba(255,255,255,.45);letter-spacing:.04em}
.f-base a{display:inline;color:rgba(255,255,255,.45)}

/* ---------- sticky enquire bar on phones ---------- */
.mobile-bar{display:none}
@media(max-width:760px){
  .mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:99;
    border-top:1px solid var(--border)}
  .mobile-bar a{flex:1;text-align:center;padding:17px 8px;background:var(--surface);
    text-decoration:none;font-weight:900;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink)}
  .mobile-bar a.primary{background:var(--accent);color:#fff}
  body{padding-bottom:58px}
}

/* ---------- misc ---------- */
.breadcrumb{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate-2);padding:28px 0 0}
.breadcrumb a{color:var(--slate-2);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

/* Touch targets below ~44px are unreliable with a thumb, and the team filter is
   the most-used control on the site. */
@media(max-width:760px){
  .chip{padding:12px 17px;font-size:13px}
  .filter-row > b{flex:0 0 100%;padding-top:0;margin-bottom:4px}
  .link-list li{padding:13px 0}
  .facts li{flex-direction:column;gap:3px}
  .facts b{flex:none}
  .card-product{padding-top:18px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media print{.hdr,.mobile-bar,footer.site{display:none}}