/* ============================================================
   THE OUTDOOR PROS — EDITORIAL GROUNDS / CINEMATIC PROPERTY
   Design system v1 (ground-up build)
   ============================================================ */
:root{
  --ink:#141210; --ink2:#1E1B17; --paper:#FAF7F1; --stone:#E9E3D8;
  --amber:#D97A1F; --amber-l:#E8B96F; --line:#2A2620; --line-l:#DED7C8;
  --dim:#B8B0A0; --mute:#9A937F;
  --serif:'Fraunces', Georgia, serif; --sans:'Inter', system-ui, sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1); --easex:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.65;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.05}
.serif-i{font-style:italic;background:linear-gradient(100deg,var(--amber-l),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Loader ---------- */
#loader{position:fixed;inset:0;background:var(--ink);z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .7s var(--ease), visibility .7s}
#loader.done{opacity:0;visibility:hidden}
#loader img{width:92px;opacity:0;animation:lg .9s var(--easex) forwards .15s}
@keyframes lg{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
#loader .bar{width:180px;height:1px;background:var(--line);position:relative;overflow:hidden}
#loader .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--amber);transition:width .3s}
#loader p{font-size:10px;letter-spacing:3px;color:var(--mute);text-transform:uppercase}

/* ---------- Nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 4vw;transition:background .4s var(--ease), box-shadow .4s, padding .4s}
#nav.glass{background:rgba(20,18,16,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding:12px 4vw}
#nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
#nav .brand img.badge{height:44px}
#nav .brand img.word{height:30px}
#nav ul{display:flex;gap:34px;list-style:none}
#nav ul a{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;color:var(--dim);position:relative;transition:color .3s}
#nav ul a:hover{color:var(--paper)}
#nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--amber-l);transition:right .35s var(--ease)}
#nav ul a:hover::after{right:0}
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.3px;color:#fff;background:var(--amber);border:0;border-radius:999px;padding:13px 26px;text-decoration:none;cursor:pointer;box-shadow:0 0 26px rgba(217,122,31,.35);transition:transform .25s var(--ease), box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(217,122,31,.55)}
.btn.ghost{background:transparent;border:1px solid #55503F;box-shadow:none;color:var(--paper)}
.btn.ghost:hover{border-color:var(--amber-l);color:var(--amber-l)}
#nav .btn{padding:10px 20px;font-size:12px}
#menu-toggle{display:none;background:none;border:0;color:var(--paper);font-size:24px;cursor:pointer}

/* ---------- Journey scaffold ---------- */
.journey{position:relative}
.stop{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:clip}
.stop .plate{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 1.4s var(--easex)}
.stop.in .plate{transform:scale(1)}
.stop .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.5),rgba(20,18,16,.15) 40%,rgba(20,18,16,.78))}
.stop .content{position:relative;z-index:3;max-width:660px;padding:0 6vw 12vh}
.eyebrow{display:inline-block;font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--amber-l);border:1px solid rgba(217,122,31,.4);background:rgba(217,122,31,.09);border-radius:999px;padding:7px 15px;margin-bottom:18px}
.stop h1{font-size:clamp(42px,6.2vw,86px);margin-bottom:16px}
.stop h2{font-size:clamp(36px,5vw,64px);margin-bottom:14px}
.stop p.lede{color:var(--dim);font-size:16px;max-width:52ch;margin-bottom:26px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}

/* reveal engine */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}.stop .plate{transform:none!important}}

/* trust strip */
#trust{position:relative;z-index:4;display:flex;justify-content:center;gap:4vw;flex-wrap:wrap;padding:16px 4vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(20,18,16,.6);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
#trust b{color:var(--amber-l);font-weight:500}

/* ---------- Sections (secondary) ---------- */
section.band{padding:120px 6vw}
section.band.paper{background:var(--paper);color:#241F19}
section.band.paper .eyebrow{border-color:rgba(217,122,31,.5);background:rgba(217,122,31,.07);color:#B8641A}
.band h2{font-size:clamp(34px,4.4vw,58px);max-width:20ch;margin-bottom:18px}
.band p.lede{font-size:17px;color:var(--dim);max-width:60ch}
.band.paper p.lede{color:#5F584C}
.grid{display:grid;gap:22px;margin-top:48px}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:28px;transition:transform .35s var(--ease), border-color .35s, box-shadow .35s}
.card:hover{transform:translateY(-6px);border-color:#6B4A1D;box-shadow:0 18px 44px rgba(217,122,31,.16)}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:14px;color:var(--dim)}
.paper .card{background:#fff;border-color:var(--line-l)}
.paper .card p{color:#6B6459}
.review-stars{color:var(--amber);letter-spacing:2px;margin-bottom:10px}
blockquote{font-family:var(--serif);font-size:17px;line-height:1.5;font-style:italic}
.review-meta{margin-top:14px;font-size:12px;color:var(--mute);letter-spacing:.5px}

/* financing panel */
#financing{position:relative;overflow:clip}
#financing::before{content:"";position:absolute;left:50%;top:55%;width:70vw;height:60vh;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(217,122,31,.32),rgba(217,122,31,.1) 45%,transparent 72%);pointer-events:none}
#financing .inner{position:relative;text-align:center;max-width:720px;margin:0 auto}

/* contact */
#contact form{display:grid;gap:14px;max-width:520px;margin-top:36px}
#contact input,#contact select,#contact textarea{background:var(--ink2);border:1px solid var(--line);border-radius:10px;color:var(--paper);font-family:var(--sans);font-size:14px;padding:14px 16px;width:100%}
#contact input:focus,#contact select:focus,#contact textarea:focus{outline:none;border-color:var(--amber)}

/* footer */
footer{border-top:1px solid var(--line);padding:70px 4vw 40px;overflow:clip}
footer .wordmark{font-family:var(--serif);font-size:clamp(20px,8vw,150px);letter-spacing:2px;color:#241F19;text-align:center;white-space:nowrap;line-height:1;margin-bottom:44px;user-select:none}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--amber-l)}

/* sticky mobile call bar */
#callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(20,18,16,.92);backdrop-filter:blur(12px);padding:10px 14px;gap:10px}
@media (max-width:820px){
  #nav ul{display:none}
  #menu-toggle{display:block}
  #callbar{display:flex}
  #callbar .btn{flex:1;text-align:center}
  .stop .content{padding-bottom:16vh}
  section.band{padding:80px 6vw}
}
/* mobile menu overlay */
#mmenu{position:fixed;inset:0;background:var(--ink);z-index:70;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:8px;transform:translateY(-100%);transition:transform .5s var(--easex)}
#mmenu.open{transform:none}
#mmenu a{font-family:var(--serif);font-size:34px;text-decoration:none;color:var(--paper);padding:8px 0;opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
#mmenu.open a{opacity:1;transform:none}
#mmenu .close{position:absolute;top:20px;right:22px;font-size:30px;background:none;border:0;color:var(--paper);cursor:pointer}

/* ============ TRAVEL ENGINE (pinned scrub journey) ============ */
.jtrack{ position:relative; }
.jviewport{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ink); }
.jplates, .jplate{ position:absolute; inset:0; }
.jplate{ background-size:cover; background-position:center; opacity:0; will-change:transform,opacity,filter; }
.jscrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,.5), rgba(20,18,16,.14) 40%, rgba(20,18,16,.74)); pointer-events:none; }
.jcontent{ position:absolute; inset:0; pointer-events:none; }
.jstop{ position:absolute; left:6vw; bottom:11vh; max-width:660px; opacity:0; transform:translateY(26px); transition:opacity .55s var(--ease), transform .55s var(--ease); pointer-events:none; }
.jstop.on{ opacity:1; transform:none; pointer-events:auto; }
.jstop h1{ font-size:clamp(42px,6vw,84px); margin-bottom:16px; }
.jstop h2{ font-size:clamp(36px,4.8vw,62px); margin-bottom:14px; }
.jstop p.lede{ color:var(--dim); font-size:16px; max-width:52ch; margin-bottom:24px; }
.jcount{ position:absolute; top:96px; right:28px; z-index:6; font-family:var(--serif); font-size:15px; color:rgba(250,247,241,.8); letter-spacing:1px; }
.jrail{ position:absolute; right:26px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; z-index:6; }
.jdot{ width:8px; height:8px; border-radius:50%; background:rgba(250,247,241,.28); border:0; padding:0; cursor:pointer; transition:all .3s var(--tog-ease, ease); }
.jdot.on{ background:var(--amber-l); transform:scale(1.5); box-shadow:0 0 12px rgba(217,122,31,.6); }
.jskip{ position:absolute; bottom:26px; right:28px; z-index:6; font-size:11px; letter-spacing:1.8px; color:rgba(250,247,241,.66); text-decoration:none; text-transform:uppercase; }
.jskip:hover{ color:var(--amber-l); }
@media (max-width:820px){ .jstop{ left:6vw; right:6vw; bottom:14vh; } .jrail{ right:12px; } .jskip{ right:auto; left:6vw; } }
@media (prefers-reduced-motion:reduce){
  .jtrack{ height:auto !important; }
  .jviewport{ position:static; height:auto; overflow:visible; }
  .jplates{ display:none; }
  .jstop{ position:static; opacity:1; transform:none; pointer-events:auto; padding:64px 0; }
  .jcontent{ position:static; }
  .jcount,.jrail,.jskip{ display:none; }
}
/* Bigger loader */
#loader img{ width:170px; }
#loader .bar{ width:240px; }
#loader p{ font-size:11px; }

/* ---- v3 stepped slides: track = single viewport ---- */
.jtrack{ height:100vh !important; }
.jviewport{ position:relative; }

/* ---- alive idle drift on active scene ---- */
@keyframes jbreathe { 0%{ transform:scale(1.05) translate(0,0);} 50%{ transform:scale(1.085) translate(-6px,-4px);} 100%{ transform:scale(1.05) translate(0,0);} }
.jplate.idle{ animation: jbreathe 26s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .jplate.idle{ animation:none; } }

/* ---- cinemagraph fx layers over a still base ---- */
.jplate .fx{ position:absolute; inset:0; background:center/cover no-repeat; display:none; pointer-events:none; will-change:transform; }
.jplate.idle .fx{ display:block; }

/* trees: the WHOLE reaching limb (bottom-left trunk → arch → right tip, incl. left canopy) sways as one */
.jplate[data-scene="trees"] .fx{ background-image:url("../renders/trees.jpg"); }
.fx-limb{
  -webkit-mask-image:url("../renders/masks/limb-mask.png");
          mask-image:url("../renders/masks/limb-mask.png");
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transform-origin:8% 96%;
  animation:limbsway 7s ease-in-out infinite;
}
@keyframes limbsway {
  0%,100%{ transform:rotate(0deg); }
  50%    { transform:rotate(0.45deg); }
}

/* pool: water shimmer only, deck/house/sky still.
   NOTE: Chrome drops CSS masks when an SVG filter is in play, so the water is a
   pre-cut transparent PNG (alpha = traced water area) — no CSS mask needed. */
.fx-water{
  background:none;
}
.fx-water::before{
  content:""; position:absolute; inset:0;
  background:url("../renders/masks/water-cutout.png") center/cover no-repeat;
  filter:url(#water);
}
@media (prefers-reduced-motion:reduce){ .jplate.idle .fx{ display:none; } }

/* ---- service pages ---- */
.shero{position:relative;min-height:64vh;display:flex;align-items:flex-end;padding:130px 4vw 64px;overflow:hidden}
.shero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.shero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.22) 45%,rgba(20,18,16,.85) 100%);z-index:1}
.shero .inner{position:relative;z-index:2;max-width:860px}
.shero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,62px);line-height:1.06;margin:12px 0 16px;color:#fff}
.shero h1 .serif-i{font-style:italic;color:var(--amber-l)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.steps .card b{display:block;font-family:var(--serif);font-size:26px;color:var(--amber-l);margin-bottom:8px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.svc-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.svc-links a{border:1px solid var(--line);padding:9px 18px;border-radius:999px;color:var(--dim);text-decoration:none;font-size:13px;transition:.25s}
.svc-links a:hover{color:var(--amber-l);border-color:var(--amber-l)}
.gaf-strip{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}
.gaf-strip img{width:110px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
@media (max-width:700px){ footer .wordmark{letter-spacing:0} }
/* services grid: even rows (4+4 desktop, 2s on tablet, 1 on phone) */
#services .grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ #services .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ #services .grid{grid-template-columns:1fr} }
/* nav social icons */
#nav ul li.social a{display:inline-flex;align-items:center;padding:2px}
#nav ul li.social a::after{display:none}
#nav ul li.social svg{display:block}
/* legal pages */
.legal h2{font-size:26px;margin:38px 0 10px}
.legal p, .legal li{font-size:15px;color:var(--dim);max-width:72ch}
.legal ul{margin:8px 0 8px 22px}
/* eyebrow readability over photos (tour stops + service heroes) */
.jstop .eyebrow, .shero .eyebrow{
  color:#F6CE93;
  background:rgba(20,18,16,.62);
  border-color:rgba(232,185,111,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  text-shadow:0 1px 6px rgba(0,0,0,.65);
}