/* Far Ridge · concept by Brand Evolution */
:root{
  --white:#FFFFFF; --paper:#F3F1EC; --ink:#1C2420; --ink2:#3B4640; --rule:#A7ABA4;
  --pine:#1F3A2D; --pine-d:#15271E; --saffron:#D9822B; --snow:#FBFAF7;
  --fs:min(19vh,10.8vw);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);overflow-x:hidden;font-size:16px;line-height:1.5}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:4px}
::selection{background:var(--pine);color:var(--snow)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--snow);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.concept{position:fixed;left:14px;bottom:14px;z-index:90;font:500 11px/1 var(--sans);letter-spacing:.04em;color:var(--snow);background:var(--ink);padding:8px 11px;border-radius:99px;text-decoration:none;opacity:.92}
.concept:hover{background:var(--pine)}

/* ================= HERO ================= */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--white)}
.paper{position:absolute;inset:0;background:var(--paper)}
.topo{position:absolute;inset:0;width:100%;height:100%}
.topo path{fill:none;stroke:#fff;stroke-linecap:round}

.nav{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;padding:max(18px,calc(var(--fs)*.14)) max(20px,calc(var(--fs)*.27)) 0;font-size:max(13px,calc(var(--fs)*.085));font-weight:500}
.nav ul{display:flex;gap:max(18px,calc(var(--fs)*.17))}
.nav a{position:relative;text-decoration:none;color:var(--ink);padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.row{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;column-gap:.085em;
  font:800 var(--fs)/.8 var(--display);letter-spacing:-.015em;color:var(--ink);white-space:nowrap;text-transform:uppercase}
.w{display:block;cursor:pointer;user-select:none;-webkit-user-select:none;transform:translateY(.035em)}
.pill{position:relative;flex:none;width:3.62em;height:1.81em;border-radius:999px;overflow:hidden;background:#d8d3cf;font-size:1em;isolation:isolate}
.scene{position:absolute;left:50%;top:50%;width:3.62em;height:1.81em;transform:translate(-50%,-50%);display:block}
/* hero photo: four frames of one valley (img/drawings.json), crossfaded by the time-of-day button; the drawn canvas is the fallback */
.vista{position:absolute;left:50%;top:50%;width:3.62em;height:1.81em;transform:translate(-50%,-50%);display:none;overflow:hidden}
.vista-in{position:absolute;inset:-5%;will-change:transform}
.vista img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.6s ease}
.vista img.on{opacity:1}
.pill.photo .vista{display:block}
.pill.photo .scene{visibility:hidden}
@media (prefers-reduced-motion:reduce){.vista img{transition:none}}
.hair{position:absolute;inset:0;background:#b9b9b9;opacity:0;pointer-events:none}
.ic{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;background:none;color:#fff;opacity:.85;display:grid;place-items:center;cursor:pointer;transition:background-color .3s var(--ease),opacity .3s}
.ic:hover{background:rgba(255,255,255,.2);opacity:1}
.ic svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.ic-sky{left:max(10px,calc(var(--fs)*.15))}
.ic-snd{right:max(10px,calc(var(--fs)*.15))}
.ic-snd .wave{display:none}
.ic-snd[aria-pressed="true"] .wave{display:inline}
.ic-snd[aria-pressed="true"] .mute{display:none}

.hbar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;gap:max(22px,calc(var(--fs)*.2));padding:0 max(20px,calc(var(--fs)*.27)) 62px}
.lede{width:min(440px,36vw);font-size:max(14px,calc(var(--fs)*.092));line-height:1.48;color:var(--ink2)}
.drop{float:left;font:800 3.25em/.78 var(--display);color:var(--ink);margin:.06em .1em 0 0}
.rule{flex:1;height:1px;background:var(--rule);margin-bottom:24px;transform-origin:center}
.cta{flex:none;display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:99px;background:#1b1b1b;color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:background-color .35s var(--ease),transform .35s var(--ease)}
.cta:hover{background:var(--pine);transform:translateY(-2px)}

/* start state of the reveal (only when JS runs and motion is allowed) */
html.js:not(.rm) .paper{opacity:0}
html.js:not(.rm) .row{column-gap:.026em}
html.js:not(.rm) .pill{width:.012em;clip-path:inset(50% 0)}
html.js:not(.rm) .hair{opacity:1}
html.js:not(.rm) .ic{opacity:0}
html.js:not(.rm) .nav{transform:translateY(-140%)}
html.js:not(.rm) .hbar{transform:translateY(160%)}
html.js:not(.rm) .rule{transform:scaleX(0)}

/* ================= SECTIONS ================= */
.wrap{width:min(1200px,100% - 64px);margin-inline:auto}
main section{padding:130px 0}
.kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pine);margin-bottom:20px}
.sec-head{display:grid;grid-template-columns:1fr minmax(240px,340px);grid-template-areas:"k k" "h n";gap:0 6vw;align-items:end;margin-bottom:64px}
.sec-head .kicker{grid-area:k}
.sec-head h2{grid-area:h}
.sec-head .sec-note{grid-area:n;color:var(--ink2);font-size:16px;line-height:1.6}
h2{font:400 clamp(40px,5.6vw,84px)/1 var(--serif);letter-spacing:-.015em}
h2 em,.intro-big em{font-style:italic;color:var(--saffron)}

html.js:not(.rm) .rv{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.js:not(.rm) .rv.in{opacity:1;transform:none}

.intro{padding-bottom:40px!important}
.intro-big{font:400 clamp(28px,3.4vw,50px)/1.18 var(--serif);letter-spacing:-.01em;max-width:24em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid var(--rule)}
.facts li{padding:24px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.facts li+li{padding-left:24px;border-left:1px solid rgba(28,36,32,.15)}
.facts b{font:800 clamp(34px,3.6vw,52px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.facts span{color:var(--ink2)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{perspective:1100px}
.card-in{height:100%;display:flex;flex-direction:column;background:var(--snow);border-radius:24px;overflow:hidden;box-shadow:0 1px 0 rgba(28,36,32,.06),0 30px 60px -40px rgba(21,39,30,.45);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .6s var(--ease);will-change:transform}
.card.hot .card-in{transition:transform .12s linear,box-shadow .6s var(--ease);box-shadow:0 1px 0 rgba(28,36,32,.06),0 40px 70px -36px rgba(21,39,30,.55)}
.vig{display:block;width:100%;height:auto;aspect-ratio:400/260}
.vig g{transition:transform .6s var(--ease)}
.card.hot .vig g{transition:transform .15s linear}
.vig .p1{transform:translate(calc(var(--mx,0)*-4px),calc(var(--my,0)*-3px))}
.vig .p2{transform:translate(calc(var(--mx,0)*-8px),calc(var(--my,0)*-4px))}
.vig .p3{transform:translate(calc(var(--mx,0)*-13px),calc(var(--my,0)*-5px))}
.vig .p4{transform:translate(calc(var(--mx,0)*-20px),calc(var(--my,0)*-6px))}
.vig--photo{overflow:hidden;background:#C3A6AF}
.vig--photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06) translate(calc(var(--mx,0)*-8px),calc(var(--my,0)*-4px));transition:transform .6s var(--ease)}
.card.hot .vig--photo img{transition:transform .15s linear}
.card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.where{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pine)}
.card h3{font:400 36px/1.05 var(--serif);margin:10px 0 12px}
.card-body>p:not(.where):not(.price){color:var(--ink2);font-size:15.5px;line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 22px}
.tags li{font-size:12.5px;font-weight:500;padding:6px 10px;border:1px solid rgba(28,36,32,.2);border-radius:99px}
.price{margin-top:auto;font-size:15px;color:var(--ink2)}
.price b{font:800 40px/1 var(--display);color:var(--ink);letter-spacing:-.01em;margin-right:4px}
.card-cta{margin-top:16px;align-self:flex-start;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1.5px solid var(--saffron);padding-bottom:3px}
.card-cta:hover{color:var(--saffron)}

.treks{background:var(--pine-d);color:var(--snow);padding:130px 0}
.treks .kicker{color:#E9B16F}
.treks .sec-note{color:rgba(251,250,247,.72)}
.trek-list{border-top:1px solid rgba(251,250,247,.22)}
.trek{display:grid;grid-template-columns:1.5fr 1fr .9fr .6fr;gap:32px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(251,250,247,.22);transition:background-color .5s var(--ease)}
.trek:hover{background:rgba(251,250,247,.04)}
.t-name h3{font:400 30px/1.1 var(--serif)}
.t-name p{margin-top:6px;color:rgba(251,250,247,.7);font-size:15px;max-width:44ch}
.t-prof{width:100%;height:auto;max-width:240px;overflow:visible}
.t-prof .pl{fill:none;stroke:var(--saffron);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
html.js:not(.rm) .t-prof .pl{stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .3s}
html.js:not(.rm) .trek.in .t-prof .pl{stroke-dashoffset:0}
.t-prof .pt{fill:var(--snow);opacity:0;transition:opacity .3s}
.trek:hover .t-prof .pt{opacity:1}
.t-meta{display:grid;grid-template-columns:repeat(3,auto);gap:4px 18px;justify-content:start}
.t-meta div{display:flex;flex-direction:column;gap:2px}
.t-meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,250,247,.6)}
.t-meta dd{font-weight:600;font-size:15px;white-space:nowrap}
.t-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.t-price b{font:800 38px/1 var(--display)}
.t-price span{font-size:12px;color:rgba(251,250,247,.6);margin-top:4px}

.steps{position:relative;--p:0}
.track{position:absolute;left:0;right:0;top:22px;height:2px;background:rgba(28,36,32,.14);border-radius:2px;overflow:hidden}
.track .fill{position:absolute;inset:0;background:var(--saffron);transform-origin:left;transform:scaleX(var(--p))}
.steps ol{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.step .num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1.5px solid var(--rule);font:800 22px/1 var(--display);transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.step.on .num{background:var(--saffron);border-color:var(--saffron);color:#fff;transform:scale(1.08)}
.step h3{font:400 28px/1.1 var(--serif);margin:26px 0 10px}
.step p{color:var(--ink2);font-size:15.5px;line-height:1.6;max-width:30ch}
.fine{margin-top:60px;padding-top:22px;border-top:1px solid var(--rule);color:var(--ink2);font-size:15px}
html.js:not(.rm) .step{opacity:.35;transition:opacity .6s var(--ease)}
html.js:not(.rm) .step.on{opacity:1}

.foot{background:var(--ink);color:var(--snow);padding:120px 0 90px}
.foot-kicker{font:italic 400 clamp(22px,2.4vw,32px)/1.2 var(--serif);color:#E9B16F}
.foot-word{display:inline-block;margin-top:14px;font:800 clamp(64px,13vw,210px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;transition:color .4s var(--ease)}
.foot-word span{display:inline-block;transition:transform .5s var(--ease)}
.foot-word:hover{color:var(--saffron)}
.foot-word:hover span{transform:translate(.08em,-.08em)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:80px;padding-top:26px;border-top:1px solid rgba(251,250,247,.22);font-size:15px;line-height:1.6;color:rgba(251,250,247,.75)}
.foot-cols b{color:var(--snow);font-weight:600}
.foot-cols a{text-decoration:none;border-bottom:1px solid rgba(251,250,247,.35)}
.foot-cols a:hover{color:var(--saffron)}
.foot-small{margin-top:50px;font-size:13px;color:rgba(251,250,247,.5)}

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  .cards{grid-template-columns:1fr 1fr}
  .trek{grid-template-columns:1fr 1fr;gap:18px 28px}
  .t-price{align-items:flex-start;text-align:left}
  .steps ol{grid-template-columns:1fr 1fr;row-gap:44px}
  .track{display:none}
}
@media (max-width:720px){
  :root{--fs:min(28vw,12vh)}
  .nav{padding:16px 20px 0;font-size:12.5px}
  .nav .nav-r{display:none}
  .nav ul{gap:16px}
  .nav a{white-space:nowrap;padding:12px 0;display:inline-block}
  .nav{padding-top:6px}
  .concept{box-shadow:0 0 0 1px rgba(244,241,234,.35)}
  .row{left:20px;right:20px;top:42%;transform:translateY(-50%);flex-direction:column;column-gap:0;row-gap:.1em}
  html.js:not(.rm) .row{column-gap:0;row-gap:.03em}
  .w{transform:none}
  .pill{width:calc(100vw - 40px);height:calc((100vw - 40px)/1.85)}
  .scene,.vista{width:calc(100vw - 40px);height:calc((100vw - 40px)/1.85)}
  html.js:not(.rm) .pill{width:calc(100vw - 40px);height:1.5px;clip-path:inset(0 50%)}
  .hbar{flex-wrap:wrap;gap:14px 16px;padding:0 20px 58px}
  .lede{width:100%;font-size:13px;line-height:1.5}
  .rule{margin-bottom:19px}
  .cta{height:38px;padding:0 18px;font-size:14px}
  .wrap{width:calc(100% - 40px)}
  main section,.treks{padding:90px 0}
  .sec-head{grid-template-columns:1fr;grid-template-areas:"k" "h" "n";gap:18px;margin-bottom:44px}
  .facts{grid-template-columns:1fr;margin-top:50px}
  .facts li,.facts li+li{padding:18px 0;border-left:0;border-bottom:1px solid rgba(28,36,32,.15)}
  .cards{grid-template-columns:1fr}
  .trek{grid-template-columns:1fr}
  .t-prof{max-width:none}
  .steps ol{grid-template-columns:1fr}
  .foot{padding:90px 0 80px}
  .foot-cols{grid-template-columns:1fr 1fr}
}