/* ============================================================
   PeaksLane — shared shell: tokens, header, footer, trail, buttons.
   Every page links this; page-specific rules stay inline on the page.
   ============================================================ */
/* ============================================================
   THE ASCENT — a scroll narrative for PeaksLane
   Basecamp (ice/white)  ->  Summit (deep navy, stars)
   ============================================================ */
:root{
  --navy:#0A2038;
  --mountain:#1D4E7C;
  --glacial:#4E93C6;
  --frost:#9CC6E4;
  --ice:#DDEEF8;
  --teal:#2AD4CE;
  --white:#FFFFFF;
  --ink:#0A2038;
  --body:#2c4a68;
  /* --glacial is a fill and border colour: at 11px it only reaches 3.3:1 on
     white and 2.8:1 on --ice. Small type uses this darker cut instead, which
     clears WCAG AA (4.5:1) on both. */
  --glacial-ink:#2E6890;
  --mono:'Space Mono', monospace;
  --sans:'Nunito', system-ui, sans-serif;
  --maxw:1120px;
  --header-h:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--teal);color:var(--navy)}
/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--glacial-ink);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:26px;height:2px;
  background:var(--teal);
  display:inline-block;
}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:.55em 0 .5em}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:600;color:var(--body)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
/* ---------- altitude chip ---------- */
.alt-chip{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--mountain);
  background:rgba(255,255,255,.75);
  border:1px solid var(--frost);
  border-radius:999px;
  padding:.35em 1em;
  display:inline-block;
  backdrop-filter:blur(4px);
}
/* ============================================================
   HEADER (sticky, swaps to dark past the treeline)
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(156,198,228,.35);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:var(--maxw);
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto}
.brand .logo-dark{display:none}
nav.primary{display:flex;align-items:center;gap:1.6rem}
nav.primary a{
  text-decoration:none;
  font-weight:700;font-size:.86rem;
  color:var(--mountain);
  letter-spacing:.02em;
  transition:color .3s;
}
nav.primary a:hover{color:var(--teal)}
.altimeter{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--glacial-ink);
  min-width:8.5ch;
  text-align:right;
  transition:color .45s;
}
.cta-mini{
  text-decoration:none;
  background:var(--navy);color:var(--white)!important;
  font-weight:800;font-size:.84rem;
  padding:.55em 1.2em;border-radius:999px;
  transition:background .3s,transform .2s;
}
.cta-mini:hover{background:var(--mountain);transform:translateY(-1px)}
/* dark header state (over summit / cta) */
body.above-clouds header{
  background:rgba(10,32,56,.82);
  border-bottom-color:rgba(78,147,198,.25);
}
body.above-clouds nav.primary a{color:var(--ice)}
body.above-clouds nav.primary a:hover{color:var(--teal)}
body.above-clouds .brand .logo-light{display:none}
body.above-clouds .brand .logo-dark{display:block}
body.above-clouds .altimeter{color:var(--teal)}
body.above-clouds .cta-mini{background:var(--teal);color:var(--navy)!important}
/* ---------- language switcher ----------
   <details> rather than a scripted menu: it opens on click and on keyboard
   without JavaScript, so the three language versions stay reachable even if
   /assets/js/lang.js never loads. */
.langpick{position:relative}
.langpick summary{
  list-style:none;cursor:pointer;
  font-weight:800;font-size:.86rem;
  color:var(--mountain);
  border:1.5px solid var(--frost);
  border-radius:999px;
  padding:.25em .8em;
  display:inline-flex;align-items:center;gap:.45em;
  white-space:nowrap;
  transition:color .3s,border-color .3s;
}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary::after{
  content:'';
  border:.28em solid transparent;
  border-top-color:currentColor;
  transform:translateY(.14em);
  transition:transform .2s;
}
.langpick[open] summary::after{transform:rotate(180deg) translateY(.1em)}
.langpick summary:hover{color:var(--teal);border-color:var(--teal)}
.langmenu{
  position:absolute;top:calc(100% + .7rem);right:0;
  min-width:10rem;
  list-style:none;margin:0;padding:.3rem;
  background:var(--white);
  border:1px solid rgba(156,198,228,.6);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(10,32,56,.18);
  z-index:60;
}
/* the menu is a light card in both header states, so its links have to win
   against the dark-header rule that turns nav links to ice */
.langmenu a{
  display:block;
  padding:.5em .8em;border-radius:9px;
  font-size:.85rem;font-weight:700;
  color:var(--mountain)!important;
}
.langmenu a:hover{background:var(--ice);color:var(--navy)!important}
.langmenu a[aria-current]{background:rgba(42,212,206,.16);color:var(--navy)!important}
body.above-clouds .langpick summary{color:var(--ice);border-color:rgba(156,198,228,.4)}
body.above-clouds .langpick summary:hover{color:var(--teal);border-color:var(--teal)}
/* ============================================================
   ENQUIRY FORM — only ever rendered inside a night section, so it is
   styled once for dark ground rather than carrying two themes.
   ============================================================ */
.enquiry{max-width:720px;margin:2.4rem auto 0;text-align:left}
.enquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.enquiry .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{
  font-size:.78rem;font-weight:800;letter-spacing:.04em;
  color:var(--ice);
}
.field .opt{font-weight:600;color:var(--frost);letter-spacing:0}
.enquiry input,.enquiry select,.enquiry textarea{
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  color:var(--white);
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(156,198,228,.45);
  border-radius:12px;
  padding:.75em .9em;
  width:100%;
  transition:border-color .25s,background .25s;
}
.enquiry textarea{resize:vertical;min-height:7.5rem;line-height:1.6}
.enquiry select{
  appearance:none;
  /* chevron drawn in the SVG rather than a font glyph so it never shifts */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239CC6E4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px;
  padding-right:2.6rem;
}
.enquiry option{color:var(--navy);background:var(--white)}
.enquiry ::placeholder{color:var(--frost);opacity:1}
.enquiry input:hover,.enquiry select:hover,.enquiry textarea:hover{border-color:rgba(156,198,228,.7)}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{
  border-color:var(--teal);
  background:rgba(255,255,255,.12);
  outline:none;
}
.enquiry input:focus-visible,.enquiry select:focus-visible,.enquiry textarea:focus-visible{
  outline:3px solid var(--teal);outline-offset:2px;
}
.enquiry [aria-invalid="true"]{border-color:#FF9C8A}
.field .err{font-size:.78rem;font-weight:700;color:#FF9C8A;min-height:0}
/* opt-in: unticked by default, and the wording sits beside the box so what
   was consented to is unambiguous */
.check{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.85rem;font-weight:600;color:var(--frost);line-height:1.55;
  margin:.4rem 0 1.6rem;cursor:pointer;
}
/* 24px square: the label is clickable too, but the box itself has to clear
   the WCAG 2.2 minimum target on its own */
.check input{width:1.5rem;height:1.5rem;flex:0 0 auto;margin-top:.05rem;accent-color:var(--teal)}
.enquiry .btn{width:100%;justify-content:center}
.enquiry .btn[disabled]{opacity:.6;cursor:progress}
.form-note{
  font-size:.76rem;font-weight:600;line-height:1.65;
  color:var(--frost);margin-top:1.2rem;
}
.form-note a{color:var(--teal)}
.form-status{
  margin-top:1rem;font-size:.9rem;font-weight:700;
  color:var(--teal);text-align:center;
}
.form-status.bad{color:#FF9C8A}
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- keyboard affordances ----------
   Navy reads at 15.9:1 on the light sections; on the night sections and the
   dark header it disappears, so the ring switches to teal there (8.9:1 on
   navy). Both clear the 3:1 WCAG 2.2 asks of a focus indicator. */
:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:3px;
  border-radius:4px;
}
.night :focus-visible,
.on-dark :focus-visible,
footer :focus-visible,
body.above-clouds header :focus-visible{outline-color:var(--teal)}
.skip-link{
  position:absolute;left:50%;top:-100px;
  transform:translateX(-50%);
  z-index:100;
  background:var(--navy);color:var(--white);
  font-weight:800;font-size:.9rem;
  padding:.7em 1.4em;
  border-radius:0 0 12px 12px;
  text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{top:0}
/* mobile nav: keep it dead simple — links collapse to essentials */
nav.primary a{white-space:nowrap}
.cta-mini .cta-short{display:none}
@media(max-width:840px){
  nav.primary a.hide-m{display:none}
  nav.primary{gap:.9rem}
  .altimeter{display:none}
}
/* phones: logo + language + a compact CTA, nothing else */
@media(max-width:600px){
  nav.primary a.hide-s{display:none}
  nav.primary{gap:.7rem}
  .brand img{height:32px}
  .cta-mini .cta-long{display:none}
  .cta-mini .cta-short{display:inline}
}
/* ============================================================
   THE ROUTE LINE — a continuous dotted trail down the page
   ============================================================ */
main{position:relative}
.trail{position:relative}
/* camp dot that sits on the line */
.waypoint{
  position:relative;
  z-index:2;
  display:flex;justify-content:center;
  padding:0 0 2.2rem;
}
.waypoint .dot{
  display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
}
.waypoint .label{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mountain);
  background:rgba(255,255,255,.85);
  padding:.3em 1em;border-radius:999px;
  border:1px solid var(--frost);
  backdrop-filter:blur(4px);
}
.waypoint.on-dark .pin{border-color:var(--navy)}
.waypoint.on-dark .label{
  color:var(--ice);background:rgba(10,32,56,.6);
  border-color:rgba(78,147,198,.4);
}
.hero .wrap{max-width:860px;text-align:center}
.hero h1{color:var(--navy);margin:.6em 0 .5em}
.hero h1 .thin{font-weight:600;color:var(--mountain)}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{
  text-decoration:none;font-weight:800;font-size:1rem;
  padding:.85em 1.9em;border-radius:999px;
  display:inline-block;
  transition:transform .2s,box-shadow .2s,background .3s;
}
.btn-primary{
  background:var(--navy);color:var(--white);
  box-shadow:0 10px 26px rgba(10,32,56,.22);
}
.btn-primary:hover{background:var(--mountain);transform:translateY(-2px)}
.btn-ghost{
  color:var(--mountain);
  border:2px solid var(--frost);
  background:rgba(255,255,255,.6);
}
.btn-ghost:hover{border-color:var(--glacial);transform:translateY(-2px)}
/* sun halo */
.hero .halo{
  position:absolute;
  top:8%;right:12%;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(42,212,206,.18) 0%,rgba(42,212,206,0) 65%);
  pointer-events:none;
}
.ridge{position:absolute;left:0;right:0;bottom:0;width:100%}
.ridge-back{
  height:100%;
  background:linear-gradient(180deg,#c8e2f4 0%,var(--frost) 100%);
  clip-path:polygon(0 62%, 10% 44%, 19% 58%, 30% 30%, 41% 55%, 52% 22%, 64% 52%, 74% 34%, 85% 56%, 94% 40%, 100% 58%, 100% 100%, 0 100%);
  opacity:.8;
}
.ridge-mid{
  height:76%;
  background:linear-gradient(180deg,#7db2d9 0%,var(--glacial) 100%);
  clip-path:polygon(0 70%, 8% 52%, 17% 66%, 28% 36%, 38% 62%, 50% 28%, 60% 58%, 72% 40%, 83% 64%, 92% 48%, 100% 66%, 100% 100%, 0 100%);
  opacity:.9;
}
.ridge-front{
  height:52%;
  background:linear-gradient(180deg,#2c6092 0%,var(--mountain) 85%);
  clip-path:polygon(0 78%, 9% 58%, 20% 74%, 33% 40%, 45% 70%, 57% 34%, 68% 66%, 79% 46%, 90% 72%, 100% 56%, 100% 100%, 0 100%);
}
/* ============================================================
   SECTION SHELLS — the climb through changing light
   ============================================================ */
section.leg{position:relative;padding:5.5rem 0}
/* twinkle overlay for the night sky */
.night{position:relative}
/* dark-section text */
.on-dark, .on-dark h2, .on-dark h3{color:var(--ice)}
.on-dark p.lede{color:var(--frost)}
.on-dark .eyebrow{color:var(--teal)}
/* ============================================================
   BASECAMP — the challenge
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
@media(max-width:840px){.split{grid-template-columns:1fr;gap:2rem}}
.pain-list{list-style:none;display:grid;gap:1rem;margin-top:.5rem}
.pain-list li{
  background:var(--white);
  border:1px solid rgba(156,198,228,.5);
  border-left:4px solid var(--glacial);
  border-radius:14px;
  padding:1.1rem 1.4rem;
  font-weight:600;color:var(--body);
  box-shadow:0 6px 18px rgba(10,32,56,.05);
}
.pain-list li strong{color:var(--navy);display:block;margin-bottom:.15rem;font-weight:800}
.contact-inner{text-align:center;max-width:680px;margin:0 auto;padding-bottom:5rem}
.contact-inner h2{color:var(--white)}
.contact-inner p.lede{color:var(--frost);margin-bottom:2.4rem}
.btn-summit{
  background:var(--teal);color:var(--navy);
  box-shadow:0 12px 34px rgba(42,212,206,.35);
}
.btn-summit:hover{background:#4fe0da;transform:translateY(-2px)}
.btn-outline{
  color:var(--ice);
  border:2px solid rgba(156,198,228,.5);
  background:transparent;
}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.contact-emails{
  margin-top:2rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--glacial);
  display:grid;gap:.4rem;
}
.contact-emails a{color:var(--frost);text-decoration:none;border-bottom:1px dashed rgba(156,198,228,.4)}
.contact-emails a:hover{color:var(--teal);border-color:var(--teal)}
/* footer */
footer{
  background:#071627;
  border-top:1px solid rgba(78,147,198,.2);
  padding:2.6rem 0 3rem;
}
footer .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
footer img{height:44px;width:auto}
footer .fine{
  font-size:.8rem;color:var(--glacial);font-weight:600;
}
footer .fine a{color:var(--frost);text-decoration:none}
footer .fine a:hover{color:var(--teal)}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap}
footer nav a{
  font-size:.82rem;font-weight:700;color:var(--frost);text-decoration:none;
}
footer nav a:hover{color:var(--teal)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}