/* Concept B - Alpine Trail */
:root{
  --bg:#EFE7DA;--bg-2:#E5DACA;--forest:#1E3B33;--forest-2:#264A40;--moss:#4D6849;--rust:#B4592F;--rust-ink:#9A4724;--ridge-h:clamp(56px,8vw,120px);
  --ink:#17201C;--muted:#4A5550;--sand:#EFE7DA;
  --line:#CDBFA9;--line-strong:#8C8170;--input-bg:#FBF7F0;--focus:#B4592F;--accent-strong:#1E3B33;
  --btn-bg:#B4592F;--btn-ink:#FFF8F0;--btn-bg-hover:#9A4724;
  --font-display:"Bricolage Grotesque Variable",system-ui,sans-serif;--font-body:"Literata Variable",Georgia,serif;
  --radius-btn:12px;--radius-input:10px;--placeholder:#5A645F;
  --m-ease:cubic-bezier(.25,.8,.25,1);--m-ease-out:cubic-bezier(.25,.8,.25,1);--m-dur-s:180ms;--m-dur-m:340ms;--m-dur-l:520ms;--m-stagger:60ms;--m-distance:16px;--m-scale-in:1;--m-line-draw:1800;
}
body{font-size:1.04rem}
.eyebrow{font-family:var(--font-display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--rust-ink)}
h2{font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:800;letter-spacing:-.03em;font-variation-settings:"opsz" 96}
h3{font-weight:700;letter-spacing:-.01em}
.btn{font-family:var(--font-display);font-weight:700;letter-spacing:.01em}

/* Header */
.site-head{position:sticky;top:0;z-index:30;background:var(--forest);color:var(--sand);--focus:#E9A57E}
.hero,.book,.site-foot{--focus:#E9A57E}
.book-card{--focus:var(--rust)}
.head-row{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sand);font-family:var(--font-display);font-weight:800;letter-spacing:.06em;font-size:1.05rem}
.brand .logo-mark{width:44px;height:32px;color:#E9A57E}
.brand span{display:grid;line-height:1.05}
.brand small{font-weight:500;letter-spacing:.02em;font-size:.72rem;opacity:.8;text-transform:none;font-family:var(--font-body);font-style:italic}
.site-head nav{margin-left:auto;display:flex;gap:26px}
.site-head nav a{text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.95rem;opacity:.85}
.site-head nav a:hover{opacity:1}
.head-cta{min-height:44px;padding:.5em 1.1em}
.draft-note{background:var(--bg-2);color:var(--forest);border-bottom:2px dashed var(--rust)}
@media (max-width:820px){.site-head nav{display:none}.head-cta{margin-left:auto}}
@media (max-width:400px){.head-row{gap:12px}.site-head .brand{gap:8px;font-size:.92rem;letter-spacing:.04em;white-space:nowrap}.site-head .brand .logo-mark{width:36px;height:26px}.site-head .brand small{display:none}.head-cta{padding:.5em .9em;white-space:nowrap}}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(88vh,820px);background:var(--forest);color:var(--sand)}
.hero-copy{padding:clamp(48px,8vw,110px) clamp(16px,5vw,72px) clamp(48px,6vw,80px) max(16px,calc((100vw - 1180px)/2));display:grid;align-content:center;gap:20px}
.hero .eyebrow{color:#E9A57E}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem);font-weight:800;letter-spacing:-.045em;line-height:.95;font-variation-settings:"opsz" 96}
.hero h1 span{display:block;color:#E9A57E}
.hero .lead{max-width:44ch;font-size:clamp(1.02rem,1.5vw,1.15rem);color:#D9D6C8}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn-ghost{color:var(--sand)}
.hero-media{position:relative;min-height:420px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% center}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{padding:56px 16px 48px}.hero-media{min-height:86vw}.hero-media img{object-position:35% 30%}}
@media (min-width:901px) and (max-height:780px){.hero-copy{padding-top:48px}}
.markers{list-style:none;padding:0;margin:-34px auto 0;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);background:var(--sand);border-radius:16px;box-shadow:0 18px 40px -24px rgba(23,32,28,.5)}
.markers li{display:flex;align-items:center;gap:12px;padding:20px 24px;font-family:var(--font-display);font-weight:700}
.markers li+li{border-left:1px solid var(--line)}
.markers .logo-mark{width:30px;height:22px;color:var(--rust)}
@media (max-width:700px){.markers{grid-template-columns:1fr;margin-top:-24px}.markers li+li{border-left:0;border-top:1px solid var(--line)}}

/* For who */
.for-who{padding-block:clamp(72px,10vw,130px)}
.fw-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
.fw-grid h2{position:sticky;top:110px;color:var(--forest)}
.fw-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fw-cards li{background:var(--input-bg);border:1.5px solid var(--line);border-radius:18px;padding:26px;display:grid;align-content:start;gap:12px}
.fw-cards span{font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--rust)}
@media (max-width:820px){.fw-grid{grid-template-columns:1fr}.fw-grid h2{position:static}.fw-cards{grid-template-columns:1fr}}

/* About */
.about{padding-block:clamp(40px,6vw,80px) clamp(72px,10vw,130px)}
.about-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:center}
.snap{margin:0;background:#FFFDF8;padding:14px 14px 18px;border-radius:6px;box-shadow:0 22px 50px -26px rgba(23,32,28,.55);transform:rotate(-2.5deg);max-width:420px}
.snap img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:3px}
.snap figcaption{font-family:var(--font-display);font-weight:600;font-size:.95rem;margin-top:12px;text-align:center;color:var(--muted)}
.about h2{color:var(--forest);margin:10px 0 18px}
.about p+p{margin-top:14px}
.about p:not(.eyebrow){color:var(--muted)}
.values{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:24px 0 0}
.values li{font-family:var(--font-display);font-weight:700;font-size:.92rem;padding:9px 16px;border-radius:10px;background:var(--forest);color:var(--sand)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}.snap{margin-inline:auto;transform:rotate(-1.5deg)}}

/* How */
.how{background:var(--moss);color:#F4F0E6;padding-block:clamp(72px,10vw,130px)}
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px)}
.how-head p{margin-top:14px;font-size:1.12rem;opacity:1;color:#F4F0E6;max-width:34ch}
.trail p{color:#F4F0E6}
.trail{list-style:none;padding:0;margin:0;display:grid;gap:34px;position:relative}
.trail::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;border-left:3px dashed rgba(244,240,230,.55)}
.trail li{position:relative;padding-left:46px}
.trail li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;border-radius:50%;background:#E9A57E;box-shadow:0 0 0 5px var(--moss)}
.km{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:1;color:#F4F0E6}
.trail h3{font-size:1.6rem;margin:4px 0 8px}
@media (max-width:820px){.how-grid{grid-template-columns:1fr}}

/* Ridge seams: two angular silhouettes rise from each coloured section into the one above it (about/how, how/packages, voices/book).
   The previous section's bottom padding is at least as tall as the ridge, so no text is ever covered. */
.how,.packages,.book{position:relative}
.how::before,.how::after,.packages::before,.packages::after,.book::before,.book::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.how::before,.packages::before,.book::before{bottom:calc(100% - 1px);height:var(--ridge-h);clip-path:polygon(0 100%,0 70%,6% 52%,11% 62%,19% 28%,26% 50%,32% 40%,41% 66%,49% 34%,57% 56%,66% 14%,74% 48%,82% 30%,90% 58%,96% 44%,100% 52%,100% 100%)}
.how::after,.packages::after,.book::after{bottom:calc(100% - 3px);height:calc(var(--ridge-h)*.72);clip-path:polygon(0 100%,0 56%,9% 40%,15% 58%,24% 36%,31% 60%,40% 46%,47% 70%,58% 30%,67% 52%,76% 24%,85% 54%,93% 38%,100% 60%,100% 100%)}
.how::before{background:color-mix(in srgb,var(--moss) 45%,var(--bg))}
.how::after{background:var(--moss)}
.packages::before{background:color-mix(in srgb,var(--bg) 45%,var(--moss))}
.packages::after{background:var(--bg)}
.book::before{background:color-mix(in srgb,var(--forest) 45%,var(--bg))}
.book::after{background:var(--forest)}

/* Packages */
.packages{padding-block:clamp(72px,10vw,130px) clamp(40px,5vw,64px)}
.sec-head{display:grid;gap:12px;margin-bottom:40px}
.sec-head h2{color:var(--forest)}
.sec-head p{color:var(--muted);max-width:52ch}
.rows{display:grid;gap:16px}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:28px;align-items:center;padding:28px 30px;border-radius:20px;background:var(--input-bg);border:1.5px solid var(--line)}
.row-name h3{font-size:1.9rem;color:var(--forest);display:inline}
.row-name p{margin-top:8px;color:var(--muted)}
.row ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.row li{padding-left:22px;position:relative}
.row li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:var(--moss)}
.row-price{display:grid;gap:6px;justify-items:start}
.price{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--forest);letter-spacing:-.03em}
.row-price small{color:var(--muted)}
.row-price .btn{margin-top:8px}
.row.featured{border-color:var(--rust);border-width:2.5px;box-shadow:0 20px 44px -28px rgba(180,89,47,.7)}
.pk-note{margin-top:26px;color:var(--muted)}
@media (max-width:900px){.row{grid-template-columns:1fr;gap:18px}}

/* Voices */
.voices{background:var(--bg);padding-block:clamp(40px,5vw,64px) clamp(72px,10vw,130px)}
.voices-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.v-img{position:relative;margin:0;border-radius:20px;overflow:hidden;position:sticky;top:100px}
.v-img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.voices h2{color:var(--forest);margin-bottom:26px}
.q{margin:0 0 22px;padding:28px;border-radius:18px;background:var(--input-bg);border-left:5px solid var(--rust)}
.q blockquote{margin:0;font-size:1.08rem;line-height:1.65}
.q figcaption{margin-top:14px;font-family:var(--font-display);font-weight:800;color:var(--rust-ink)}
@media (max-width:820px){.voices-grid{grid-template-columns:1fr}.v-img{position:relative;top:0}.v-img img{aspect-ratio:16/10;max-height:360px}}

/* Booking */
.book{background:var(--forest);color:var(--sand);padding-block:clamp(72px,10vw,130px) 48px}
.book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.book h2{margin-bottom:16px}
.book-copy p{color:#D9D6C8}
@media (min-width:901px){.book-copy{position:sticky;top:100px}}
.book-points{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:10px;font-family:var(--font-display);font-weight:600}
.book-points li::before{content:"\2192";color:#E9A57E;margin-right:10px}
.book .btn-ghost{color:var(--sand)}
.book-card{background:var(--sand);color:var(--ink);border-radius:22px;padding:clamp(22px,4vw,38px)}
@media (max-width:900px){.book-grid{grid-template-columns:1fr}}

/* Newsletter */
/* Folded into the forest booking field; it ends on --ink, which is the footer. The rust full-width band is gone. */
.newsletter{background:linear-gradient(180deg,var(--forest) 0,var(--forest) calc(100% - 96px),var(--ink) 100%);padding-block:0 96px;color:var(--sand);--focus:#E9A57E}
.nl-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:var(--forest-2);border-radius:20px;padding:clamp(24px,4vw,40px)}
.newsletter h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:8px}
.newsletter input{border-color:transparent}
@media (max-width:820px){.nl-row{grid-template-columns:1fr}}

/* Footer */
.site-foot{background:var(--ink);color:#C9CCC4;padding-block:52px 36px}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:start}
.site-foot nav{display:flex;gap:22px}
.site-foot nav a{font-family:var(--font-display);font-weight:700;color:var(--sand)}
.site-foot .disclaimer{grid-column:1/-1;padding:20px;border-radius:14px;background:#22302A;color:#E2E4DC}
.site-foot .disclaimer a{color:#F0B48F}
.copy{grid-column:1/-1;font-size:.85rem}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}}

/* Motion (Business Factory runtime, quiet direction, tokens in :root). One load gesture: the three markers step up one after another (transform only,
   text is never faded). Trail steps arrive from the trail line. One drawn line: the dashed trail. Off under reduced motion and without JS. */
@keyframes bf-step-up{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .markers li{animation:bf-step-up var(--m-dur-l) var(--m-ease-out) both}
  .js .markers li:nth-child(1){animation-delay:240ms}
  .js .markers li:nth-child(2){animation-delay:calc(240ms + var(--m-stagger))}
  .js .markers li:nth-child(3){animation-delay:calc(240ms + var(--m-stagger) * 2)}
  .js-motion .trail li[data-reveal]:not(.is-in):not(.in){transform:translateX(calc(var(--m-distance) * -1))}
  .js-motion .trail::before{clip-path:inset(0 0 100% 0);transition:clip-path calc(var(--m-line-draw) * 1ms) var(--m-ease)}
  .js-motion .how-head.is-in ~ .trail::before,.js-motion .how-head.in ~ .trail::before{clip-path:inset(0)}
}