/* ============================================================
   STOKED OUT SNACK CO. — Alpine Earth design system
   One stylesheet, five pages. Per-page character comes from
   body-level token overrides, not from forked CSS.
   ============================================================ */

:root {
  --ink:        #2B211B;
  --ink-deep:   #1C1410;
  --bone:       #F2EDE4;
  --bone-dim:   #E8E0D2;
  --rust:       #B85C38;
  --rust-dark:  #9A4A2C;
  --rust-light: #E39A7C;
  --pine:       #2F4A3C;
  --pine-light: #3E6250;
  --body:       #4a4038;
  --muted:      #6b6053;

  /* Tokens each page re-points. This is the flex mechanism. */
  --tint:     var(--pine);   /* structural accent per persona   */
  --sec-pad:  96px;          /* vertical rhythm per persona     */
  --lead:     1.6;           /* body line-height per persona    */
  --rule:     rgba(43,33,27,0.12);
}

/* Resorts: operational. Pine structure, denser rhythm. */
body.page-resorts   { --tint: var(--pine); --sec-pad: 84px; --lead: 1.62; }
/* Guide ops: editorial. Ink structure, most air, loosest leading. */
body.page-guiding   { --tint: var(--ink);  --sec-pad: 118px; --lead: 1.78; }
/* Workplaces: warm. Rust structure, mid rhythm. */
body.page-teams     { --tint: var(--rust); --sec-pad: 100px; --lead: 1.7; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: 'Open Sans', sans-serif;
  line-height: var(--lead);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .eyebrow, .btn, nav a, label, .logo { font-family: 'Oswald', sans-serif; text-transform: uppercase; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rust); outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--rust);
  color: var(--bone); padding: 12px 20px; z-index: 100; font-size: 13px;
}
.skip:focus { left: 0; }

/* ---------------- NAV ---------------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.logo-link { text-decoration: none; flex-shrink: 0; }
.logo { font-weight: 700; font-size: 19px; letter-spacing: 0.06em; color: var(--ink); }
.logo span { color: var(--rust); }

nav ul { list-style: none; display: flex; gap: 28px; }
nav a {
  color: var(--ink); text-decoration: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s; white-space: nowrap;
}
nav a:hover { border-color: var(--rust); }
nav a.active { border-color: var(--rust); color: var(--rust); }

.nav-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-cta {
  background: var(--rust); color: var(--bone) !important;
  padding: 10px 18px; border-radius: 2px; border-bottom: none !important;
}
.nav-cta:hover { background: var(--rust-dark); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; flex-direction: column; background: var(--bone); border-bottom: 1px solid var(--rule); }
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 15px 32px; color: var(--ink); text-decoration: none;
  font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; border-top: 1px solid rgba(43,33,27,0.08);
}
.mobile-menu a.active { color: var(--rust); }

/* ---------------- SHARED TYPE ---------------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--rust); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; display: inline-block; flex-shrink: 0; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  padding: 16px 30px; border-radius: 2px; text-decoration: none; cursor: pointer;
  border: none; transition: transform 0.15s ease, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--rust); color: var(--bone); }
.btn-primary:hover { background: var(--rust-dark); }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid rgba(242,237,228,0.4); }
.btn-ghost:hover { border-color: var(--bone); }
.btn-dark { background: var(--ink); color: var(--bone); }
.btn-dark:hover { background: var(--ink-deep); }
.btn-outline-dark { background: transparent; color: var(--ink); border: 1px solid rgba(43,33,27,0.35); }
.btn-outline-dark:hover { border-color: var(--ink); }

/* ---------------- HERO VARIANTS ---------------- */
.hero { position: relative; color: var(--bone); overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.06;
  letter-spacing: -0.005em; margin-bottom: 22px; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--rust-light); }
.hero p.sub {
  font-family: 'Open Sans', sans-serif; font-size: 17px; text-transform: none;
  max-width: 54ch; color: rgba(242,237,228,0.84); margin-bottom: 32px; line-height: 1.65;
}

/* A — photo-backed full bleed (home, guiding, our story) */
.hero--photo { background: var(--ink); }
.hero--photo .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
/* Scrim kept deliberately light so the photograph reads in natural colour.
   Legibility comes from the frosted copy panel below, not from flooding the image. */
.hero--photo .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(28,20,16,0.52) 0%, rgba(28,20,16,0.30) 38%, rgba(28,20,16,0.06) 72%),
    linear-gradient(180deg, rgba(28,20,16,0.04) 0%, rgba(28,20,16,0.34) 100%);
}
.hero--photo .wrap { padding-top: 122px; padding-bottom: 112px; }

/* D — powder: full-bleed action shot, copy left over open snow.
   The veil is a LIGHT wash, not a dark scrim — it lifts the left side for
   legibility and leaves the powder plume at full contrast. */
.hero--powder { position: relative; background: var(--bone); overflow: hidden; }
.hero--powder .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('img/hero-powder.jpg');
  background-size: cover; background-position: 50% 44%;
}
.hero--powder .hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg,
    rgba(242,237,228,0.95) 0%,
    rgba(242,237,228,0.88) 25%,
    rgba(242,237,228,0.60) 42%,
    rgba(242,237,228,0.16) 57%,
    rgba(242,237,228,0) 70%);
}
.hero--powder .wrap {
  position: relative; z-index: 2;
  min-height: 560px; display: flex; flex-direction: column; justify-content: center;
  padding-top: 104px; padding-bottom: 104px;
}
.hero--powder .hero-copy { max-width: 610px; }
.hero--powder h1 { color: var(--ink); max-width: 100%; }
.hero--powder h1 em { color: var(--rust); }
.hero--powder p.sub { color: var(--body); }
.hero--powder .eyebrow { color: var(--rust); }

/* C — duo: copy left, photograph right in its own column.
   Used where the photo's subject sits centre-frame and an overlay panel
   would inevitably cover faces. Nothing can collide at any viewport. */
.hero--duo { background: linear-gradient(150deg, var(--pine) 0%, var(--ink) 64%); }
.hero--duo .wrap {
  display: grid; grid-template-columns: 1fr 1.02fr; gap: 54px; align-items: center;
  padding-top: 92px; padding-bottom: 92px;
}
.hero--duo h1 { max-width: 100%; }
.hero--duo .hero-figure picture { display: block; }
.hero--duo .hero-figure img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 26px 64px rgba(0,0,0,0.46);
}

/* Frosted copy panel — carries the text so the image underneath stays untouched */
.hero--photo .hero-panel {
  max-width: 660px;
  background: linear-gradient(135deg, rgba(28,20,16,0.90) 0%, rgba(28,20,16,0.80) 100%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border-left: 3px solid var(--rust);
  padding: 38px 40px 40px;
  border-radius: 2px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.34);
}
.hero--photo .hero-panel h1 { max-width: 100%; }
.hero--photo .hero-panel p.sub { margin-bottom: 26px; }
.hero--photo .hero-panel .btn-row { margin-bottom: 0; }

/* Resorts hero photo: two patrollers sit center-right of frame, so the
   panel anchors left where the frame is clear open terrain, and the
   background position is tuned to keep both their faces in view without
   the panel ever overlapping them. */
.hero--photo-resorts .hero-bg { background-position: center 38%; }
.hero--photo-resorts .hero-panel { max-width: 560px; }

/* Workplaces hero photo: skyline shot, subject-free, so the default
   left-anchored panel and scrim already read cleanly. */
.hero--photo-workplaces .hero-bg { background-position: center 30%; }

/* B — split: copy left, tall portrait right (resorts) */
.hero--split { background: linear-gradient(150deg, var(--pine) 0%, var(--ink) 62%); }
.hero--split .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
  padding-top: 96px; padding-bottom: 96px;
}
.hero-figure { position: relative; }
.hero-figure img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}
.hero-figure figcaption {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.16em; color: rgba(242,237,228,0.62);
  margin-top: 12px; display: flex; align-items: center; gap: 8px;
}
.hero-figure figcaption::before { content: ''; width: 16px; height: 1px; background: var(--rust); }

/* C — light hero on bone (workplaces) */
.hero--light { background: var(--bone); color: var(--ink); border-bottom: 1px solid var(--rule); }
.hero--light .wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center;
  padding-top: 84px; padding-bottom: 84px;
}
.hero--light h1 { color: var(--ink); }
.hero--light h1 em { color: var(--rust); }
.hero--light p.sub { color: var(--body); }
.hero--light .hero-figure figcaption { color: var(--muted); }
.hero--light .eyebrow { color: var(--rust); }

/* built-for chip rail */
.built-for { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.built-for-label {
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--rust); text-transform: uppercase; margin-right: 4px;
}
.chip {
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(242,237,228,0.86); background: rgba(242,237,228,0.07);
  border: 1px solid rgba(242,237,228,0.24); padding: 7px 12px; border-radius: 2px;
}
.hero--light .chip { color: var(--body); background: rgba(43,33,27,0.03); border-color: rgba(43,33,27,0.2); }

/* ---------------- SIGNATURE: THE DAY PROFILE ----------------
   An elevation profile is a real artifact of this business. Here it
   carries information: each page plots its buyer's actual working day
   and marks — in rust — the point where a Stoked Out box shows up. */
.dayline { background: var(--bone); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 34px 0 30px; }
.dayline-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dayline svg { display: block; width: 100%; min-width: 660px; height: auto; }
.dayline-title {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 11px;
  font-weight: 600; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 18px;
}
.dayline-note {
  font-family: 'Open Sans', sans-serif; text-transform: none;
  font-size: 14px; line-height: 1.7; color: var(--body);
  max-width: 78ch; margin-top: 22px;
  border-left: 2px solid var(--rust); padding-left: 16px;
}
.dl-fill  { fill: var(--tint); opacity: 0.07; }
.dl-line  { stroke: var(--tint); stroke-width: 1.5; fill: none; opacity: 0.55;
            stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 1.5s ease-out; }
.dl-line.in-view { stroke-dashoffset: 0; }
.dl-dot   { fill: var(--bone); stroke: var(--tint); stroke-width: 1.5; }
.dl-dot--key { fill: var(--rust); stroke: var(--rust); }
.dl-time  { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; fill: var(--ink); }
.dl-label { font-family: 'Open Sans', sans-serif; font-size: 10.5px; fill: var(--muted); }
.dl-time--key  { fill: var(--rust); }
.dl-label--key { fill: var(--rust); font-weight: 600; }

/* thin divider used between sections */
.rule-divider { height: 1px; background: var(--rule); }

/* ---------------- SECTIONS ---------------- */
.section { padding: var(--sec-pad) 0; }
.section--alt { background: #fff; }
.section--ink { background: var(--ink); color: var(--bone); }
.section--pine { background: var(--pine); color: var(--bone); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head .eyebrow { color: var(--tint); }
.section-head h2 { font-size: clamp(27px, 3.6vw, 40px); font-weight: 700; line-height: 1.12; }
.section-head p {
  font-family: 'Open Sans', sans-serif; text-transform: none; font-size: 16px;
  color: var(--body); margin-top: 14px; max-width: 58ch;
}
.section--ink .section-head h2, .section--pine .section-head h2 { color: var(--bone); }
.section--ink .section-head p, .section--pine .section-head p { color: rgba(242,237,228,0.78); }
.section--ink .section-head .eyebrow, .section--pine .section-head .eyebrow { color: var(--rust-light); }
.section-head--wide { max-width: 780px; }

/* ---------------- PRIORITY USE-CASE LIST ----------------
   Numbered because the order is the point: these are ranked by how
   they actually matter to this buyer, not decorated with numerals. */
.usecases { border-top: 1px solid var(--rule); }
.section--ink .usecases, .section--pine .usecases { border-top-color: rgba(242,237,228,0.18); }
.usecase {
  display: grid; grid-template-columns: 74px 1fr 1.25fr; gap: 26px;
  padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.section--ink .usecase, .section--pine .usecase { border-bottom-color: rgba(242,237,228,0.18); }
.uc-rank {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--rust); padding-top: 3px;
}
.uc-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 600; line-height: 1.25; }
.uc-desc { font-size: 14.5px; color: var(--body); }
.section--ink .uc-desc, .section--pine .uc-desc { color: rgba(242,237,228,0.76); }
.uc-flag {
  display: inline-block; font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--rust); border: 1px solid var(--rust);
  padding: 3px 7px; border-radius: 2px; margin-top: 8px;
}

/* secondary "also works for" grid */
.also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.also-item { border-left: 2px solid var(--tint); padding: 4px 0 4px 16px; }
.also-item h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; }
.also-item p { font-size: 13.5px; color: var(--body); }
.section--ink .also-item p { color: rgba(242,237,228,0.72); }
.section--ink .also-item { border-left-color: var(--rust); }

/* ---------------- CARDS / ROUTER ---------------- */
.router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.route {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.route:hover { transform: translateY(-4px); border-color: var(--rust); box-shadow: 0 14px 34px rgba(43,33,27,0.10); }
.route img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.route-body { padding: 26px 24px 28px; }
.route-kicker { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--rust); margin-bottom: 10px; }
.route h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.2; }
.route p { font-size: 14px; color: var(--body); margin-bottom: 16px; }
.route-go { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink); border-bottom: 1px solid var(--rust); padding-bottom: 3px; }

/* ---------------- TRUST BAR ---------------- */
.trust { background: var(--bone); padding: 44px 0; border-bottom: 1px solid var(--rule); }
.trust .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-icon {
  width: 42px; height: 42px; flex-shrink: 0; border: 1.5px solid var(--pine);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pine);
}
.trust-text { font-size: 13px; font-weight: 600; line-height: 1.3; }

/* ---------------- FULL-BLEED IMAGE BAND ---------------- */
.band { position: relative; min-height: 460px; display: flex; align-items: center; background: var(--ink); overflow: hidden; }
.band-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.band-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,20,16,0.92) 0%, rgba(28,20,16,0.68) 48%, rgba(28,20,16,0.22) 100%); }
.band .wrap { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 70px; }
.band-copy { max-width: 50ch; color: var(--bone); }
.band-copy .eyebrow { color: var(--rust-light); }
.band-copy h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; line-height: 1.14; margin-bottom: 16px; }
.band-copy p { font-size: 16px; color: rgba(242,237,228,0.82); }
.band-copy p + p { margin-top: 14px; }

/* ---------------- SPLIT FEATURE (image + copy) ---------------- */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; }
.split--flip { grid-template-columns: 1.15fr 0.85fr; }
.split--flip .split-media { order: 2; }
.split-media img { width: 100%; height: auto; display: block; border-radius: 2px; }
.split-copy h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; line-height: 1.14; margin-bottom: 16px; }
.split-copy > p { font-size: 16px; color: var(--body); }
.split-copy > p + p { margin-top: 14px; }
.section--ink .split-copy > p { color: rgba(242,237,228,0.8); }
.section--ink .split-copy h2 { color: var(--bone); }

/* ---------------- SPEC BLOCK (pack bag) ---------------- */
.spec { border: 1px solid var(--rule); border-radius: 2px; background: var(--bone); margin-top: 28px; }
.section--ink .spec { border-color: rgba(242,237,228,0.22); background: rgba(242,237,228,0.04); }
.spec-head {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; color: var(--rust); padding: 14px 20px; border-bottom: 1px solid var(--rule);
}
.section--ink .spec-head { border-bottom-color: rgba(242,237,228,0.22); }
.spec-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.section--ink .spec-row { border-bottom-color: rgba(242,237,228,0.12); }
.spec-row:last-child { border-bottom: none; }
.spec-key { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); padding-top: 2px; }
.section--ink .spec-key { color: rgba(242,237,228,0.55); }
.spec-val { color: var(--body); }
.section--ink .spec-val { color: rgba(242,237,228,0.85); }

/* Centered copy variant for sections that drop the media column entirely */
.split-copy--centered { max-width: 720px; margin: 0 auto; text-align: center; }
.split-copy--centered .spec { text-align: left; }
.split-copy--centered .spec-head { text-align: center; }

/* ---------------- MANIFEST ---------------- */
.manifest { border-top: 1px solid var(--rule); }
.manifest-row { display: grid; grid-template-columns: 90px 1fr 2fr; gap: 24px; padding: 21px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.manifest-code { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--rust); }
.manifest-item { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 17px; font-weight: 600; }
.manifest-desc { font-size: 14px; color: var(--body); }
.manifest-note { margin-top: 20px; font-size: 13px; color: var(--muted); font-style: italic; }

/* ---------------- WHY GRID ---------------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.why-item h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 10px; line-height: 1.28; }
.why-item p { font-size: 14px; color: var(--body); }
.why-icon {
  width: 46px; height: 46px; border: 1.5px solid var(--tint); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--tint); margin-bottom: 16px;
}
.section--ink .why-item p, .section--pine .why-item p { color: rgba(242,237,228,0.82); }
.section--ink .why-item h3, .section--pine .why-item h3 { color: var(--bone); }
.section--pine .why-icon { border-color: rgba(242,237,228,0.55); color: var(--bone); }
.section--ink .why-icon { border-color: var(--rust-light); color: var(--rust-light); }

/* ---------------- TIERS ---------------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tier-card { background: var(--bone); border: 1px solid rgba(43,33,27,0.15); padding: 32px 26px; border-radius: 2px; display: flex; flex-direction: column; }
.section--alt .tier-card { background: var(--bone); }
.tier-card.featured { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.tier-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.tier-for { font-size: 12.5px; font-weight: 600; color: var(--rust); margin-bottom: 18px; }
.tier-card.featured .tier-for { color: var(--rust-light); }
.tier-list { list-style: none; margin-bottom: 26px; flex-grow: 1; }
.tier-list li { font-size: 14px; padding: 8px 0; border-top: 1px solid rgba(43,33,27,0.1); }
.tier-card.featured .tier-list li { border-top-color: rgba(242,237,228,0.15); }
.tier-list li:first-child { border-top: none; }
.tier-btn .btn { width: 100%; text-align: center; }

/* ---------------- STEPS ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step-num { font-family: 'Oswald', sans-serif; font-size: 42px; font-weight: 700; color: var(--rust); opacity: 0.35; line-height: 1; margin-bottom: 12px; }
.step-card h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 8px; }
.step-card p { font-size: 14px; color: var(--body); }

/* ---------------- STORY COLLAGE ---------------- */
.collage { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 128px; gap: 16px; }
.collage figure { position: relative; overflow: hidden; border-radius: 2px; margin: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.collage figure:hover img { transform: scale(1.035); }
.c-anchor { grid-column: span 4; grid-row: span 3; }
.c-tall   { grid-column: span 2; grid-row: span 3; }
.c-wide   { grid-column: span 3; grid-row: span 2; }
.collage figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
  background: linear-gradient(180deg, rgba(28,20,16,0) 0%, rgba(28,20,16,0.78) 100%);
  color: rgba(242,237,228,0.9); font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.14em;
}

/* ---------------- FOUNDER BAND ---------------- */
.founder { background: var(--pine); color: var(--bone); }
.founder .wrap { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; }
.founder-photo img { width: 100%; height: auto; display: block; border-radius: 2px; }
.founder-copy .eyebrow { color: var(--rust-light); }
.founder-copy h2 { font-size: clamp(25px, 3.3vw, 35px); font-weight: 700; margin-bottom: 18px; line-height: 1.16; }
.founder-copy p { font-size: 16px; color: rgba(242,237,228,0.86); margin-bottom: 22px; max-width: 56ch; }
.link-arrow { color: var(--bone); text-decoration: none; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; border-bottom: 1px solid var(--rust); padding-bottom: 3px; }
.link-arrow:hover { color: var(--rust-light); }

/* ---------------- PROSE (our story) ---------------- */
.prose p { font-size: 16.5px; color: var(--body); line-height: 1.78; }
.prose p + p { margin-top: 20px; }
.prose h3 { font-size: 20px; font-weight: 600; margin: 36px 0 12px; }
.prose em { color: var(--ink); font-style: italic; }
.pullquote {
  border-left: 3px solid var(--rust); padding: 6px 0 6px 24px; margin: 34px 0;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 500; line-height: 1.32; color: var(--ink);
}

/* ---------------- FORM ---------------- */
.form-section { background: var(--pine); color: var(--bone); }
.form-section .section-head .eyebrow { color: var(--rust-light); }
.form-section .section-head h2 { color: var(--bone); }
.form-section .section-head p { color: rgba(242,237,228,0.78); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 720px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 8px; color: rgba(242,237,228,0.82); }
input, select, textarea {
  width: 100%; background: rgba(242,237,228,0.08); border: 1px solid rgba(242,237,228,0.3);
  color: var(--bone); padding: 13px 14px; font-family: 'Open Sans', sans-serif; font-size: 14px; border-radius: 2px;
}
input::placeholder, textarea::placeholder { color: rgba(242,237,228,0.42); }
textarea { resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rust); }
select option { color: var(--ink); background: var(--bone); }
.form-submit { margin-top: 24px; }
.form-note { font-size: 12.5px; color: rgba(242,237,228,0.6); margin-top: 14px; }

/* ---------------- FINAL CTA + FOOTER ---------------- */
.final-cta { background: var(--ink); color: var(--bone); text-align: center; padding: 96px 0; }
.final-cta h2 { font-size: clamp(27px, 4.2vw, 44px); font-weight: 700; margin-bottom: 20px; }
.final-cta p { font-size: 16px; color: rgba(242,237,228,0.76); max-width: 52ch; margin: 0 auto 32px; }

footer { background: var(--ink); border-top: 1px solid rgba(242,237,228,0.12); padding: 44px 0 40px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.foot-brand p { color: rgba(242,237,228,0.5); font-size: 12.5px; margin-top: 10px; max-width: 34ch; }
.foot-brand .logo { color: var(--bone); font-size: 17px; }
footer h4 { font-size: 11px; letter-spacing: 0.16em; color: rgba(242,237,228,0.45); margin-bottom: 14px; font-weight: 600; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
footer a { color: rgba(242,237,228,0.72); text-decoration: none; font-size: 13px; }
footer a:hover { color: var(--rust-light); }
.foot-bottom { border-top: 1px solid rgba(242,237,228,0.12); margin-top: 34px; padding-top: 20px; }
.foot-bottom p { color: rgba(242,237,228,0.4); font-size: 12px; }

/* ---------------- PRODUCT GALLERY ---------------- */
/* Column ratio is tuned so the square flat-lay and the two 1.79:1 shots
   finish at the same height — no object-fit cropping, so no product item
   ever gets cut off the edge of frame. */
.productshots {
  display: grid; grid-template-columns: 1.16fr 1fr; gap: 20px;
  align-items: start; margin-bottom: 52px;
}
.productshots figure { margin: 0; position: relative; border-radius: 2px; overflow: hidden; background: var(--ink); }
.productshots img { width: 100%; height: auto; display: block; }
.ps-stack { display: grid; gap: 20px; }
.productshots figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.16em; color: rgba(242,237,228,0.92);
  padding: 26px 18px 12px;
  background: linear-gradient(180deg, rgba(28,20,16,0) 0%, rgba(28,20,16,0.86) 68%);
}
.ps-note {
  font-family: 'Open Sans', sans-serif; text-transform: none;
  font-size: 12.5px; color: var(--muted); margin: -34px 0 52px; font-style: italic;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .split, .split--flip { grid-template-columns: 1fr; gap: 34px; }
  .split--flip .split-media { order: 0; }
  .also-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  nav ul { display: none; }
  .nav-toggle { display: flex; }
  .hero--split .wrap, .hero--light .wrap { grid-template-columns: 1fr; gap: 38px; padding-top: 70px; padding-bottom: 70px; }
  .hero--duo .wrap { grid-template-columns: 1fr; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
  /* Powder hero on phones: portrait crop, copy sits over the open snow up top */
  .hero--powder .hero-bg { background-image: url('img/hero-powder-sm.jpg'); background-position: 50% 62%; }
  .hero--powder .hero-veil {
    background: linear-gradient(178deg,
      rgba(242,237,228,0.95) 0%,
      rgba(242,237,228,0.90) 34%,
      rgba(242,237,228,0.62) 52%,
      rgba(242,237,228,0.10) 70%,
      rgba(242,237,228,0) 82%);
  }
  .hero--powder .wrap { min-height: 600px; justify-content: flex-start; padding-top: 78px; padding-bottom: 78px; }
  .hero--powder .hero-copy { max-width: 100%; }
  /* Duo photo gets its own tighter mobile crop — let it fill, and centre it on tablets */
  .hero--duo .hero-figure { max-width: 440px; width: 100%; margin: 0 auto; }
  .hero--duo .hero-figure figcaption { justify-content: center; }
  .hero--photo .wrap { padding-top: 88px; padding-bottom: 80px; }
  .hero--photo-resorts .hero-bg { background-position: 68% center; }
  .hero-figure { max-width: 420px; }
  .router, .why-grid, .tier-grid, .steps, .trust .wrap, .also-grid { grid-template-columns: 1fr; }
  .usecase { grid-template-columns: 54px 1fr; gap: 16px; }
  .uc-desc { grid-column: 2 / -1; margin-top: 6px; }
  .manifest-row { grid-template-columns: 62px 1fr; }
  .manifest-desc { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
  .founder .wrap { grid-template-columns: 1fr; gap: 28px; }
  .founder-photo { max-width: 220px; }
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 108px; }
  .c-anchor { grid-column: span 2; grid-row: span 2; }
  .c-wide   { grid-column: span 2; grid-row: span 2; }
  .c-tall   { grid-column: span 1; grid-row: span 3; }
  footer .wrap { grid-template-columns: 1fr; gap: 26px; }
  .band { min-height: 380px; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .productshots { grid-template-columns: 1fr; gap: 14px; }
  .ps-stack { gap: 14px; }
  .ps-note { margin: -22px 0 40px; }
  .hero--photo .hero-panel { padding: 28px 24px 30px; }
}

@media (max-width: 520px) {
  .wrap, .wrap-narrow { padding: 0 22px; }
  .hero h1 { font-size: clamp(28px, 8vw, 38px); }
  .collage { grid-template-columns: 1fr; grid-auto-rows: 96px; }
  .c-anchor, .c-wide { grid-column: span 1; grid-row: span 2; }
  .c-tall { grid-column: span 1; grid-row: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dl-line { transition: none; stroke-dashoffset: 0; }
  .btn:hover, .route:hover { transform: none; }
  .collage figure:hover img { transform: none; }
}