/* Elevate Terrain: site styles
   Concept: a field survey of steep ground. Mist-green paper, forest ink, kraft from the logo,
   wet-basalt plates for photographs, and real contour lines (img/topo.svg) as the one signature. */

:root{
  /* Brand palette (see BRAND.md) */
  --mist:      #EAEDE6;   /* reading surface: waterfall spray */
  --mist-2:    #DCE1D6;
  --paper:     #F6F7F3;   /* cards and forms */
  --ink:       #1A261C;   /* body text */
  --ink-soft:  #4E5D4A;
  --moss:      #5C6F55;   /* secondary lines and captions */
  --forest:    #1F3B2D;   /* primary: logo green */
  --kraft:     #D4A574;   /* accent: logo kraft, bands and rules */
  --kraft-lt:  #EBD7B8;
  --basalt:    #121712;   /* wet rock: photo plates */
  --basalt-2:  #1D241C;
  --line:      rgba(31,59,45,.2);
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Barlow", system-ui, sans-serif;
  --cond:  "Barlow Condensed", "Barlow", sans-serif;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; background:var(--mist); color:var(--ink); font:400 1.0625rem/1.6 var(--sans) }
img{ max-width:100%; display:block }
a{ color:var(--forest); text-underline-offset:.18em }
a:hover{ color:var(--ink) }
:focus-visible{ outline:3px solid var(--kraft); outline-offset:3px }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }
.skip{ position:absolute; left:-999px; top:8px; background:var(--forest); color:#fff; padding:.5rem .8rem; z-index:50 }
.skip:focus{ left:8px }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--forest); line-height:1.02; margin:0 0 .5em; letter-spacing:-.022em; font-optical-sizing:auto }
h1{ font-size:clamp(3rem, 8.4vw, 7.2rem) }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.6rem) }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.7rem); line-height:1.15; font-weight:600; letter-spacing:-.01em }
p{ margin:0 0 1em; max-width:66ch }
.lede{ font-size:clamp(1.15rem, 1.8vw, 1.35rem); color:var(--ink-soft); max-width:58ch }
.note{ font-family:var(--cond); font-weight:500; font-size:.95rem; letter-spacing:.02em; color:var(--ink-soft) }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5em; padding:.8em 1.35em; border-radius:999px; font:600 1rem/1 var(--sans);
  text-decoration:none; border:2px solid var(--forest); background:var(--forest); color:#F3F1EA; transition:background .2s, color .2s }
.btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.btn.ghost{ background:transparent; color:var(--forest) }
.btn.ghost:hover{ background:var(--forest); color:#fff }
.btn.light{ background:var(--kraft); border-color:var(--kraft); color:var(--basalt) }
.btn.light:hover{ background:#fff; border-color:#fff }
.btn.outline-light{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff }
.btn.outline-light:hover{ background:#fff; color:var(--basalt) }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:40; background:rgba(231,235,227,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:78px }
.brand{ font-family:var(--serif); font-weight:700; font-size:1.35rem; color:var(--forest); text-decoration:none; letter-spacing:.01em; display:flex; align-items:center; gap:.55rem }
.brand svg{ width:30px; height:30px; flex:none }
.nav{ display:flex; align-items:center; gap:clamp(.8rem, 2vw, 1.8rem) }
.nav a{ color:var(--ink); text-decoration:none; font-weight:500 }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--forest); text-decoration:underline; text-decoration-color:var(--kraft); text-decoration-thickness:3px }
.nav .btn{ color:#F3F1EA; text-decoration:none }
.menu-btn{ display:none; background:none; border:2px solid var(--forest); border-radius:8px; padding:.4rem .6rem; font:600 .95rem var(--sans); color:var(--forest) }
@media (max-width: 860px){
  .menu-btn{ display:block }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; gap:0;
        background:var(--mist); border-bottom:1px solid var(--line); padding:.5rem var(--gut) 1.2rem }
  .nav.open{ display:flex }
  .nav a{ padding:.7rem 0; width:100% }
  .nav .btn{ width:auto; margin-top:.5rem; padding:.8em 1.35em }
}

/* ---------- hero (the signature: photo + live contour overlay) ---------- */
.hero{ position:relative; min-height:min(92vh, 860px); display:flex; align-items:flex-end; color:#fff; background:var(--basalt); overflow:hidden }
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40% }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,24,19,.15) 0%, rgba(19,24,19,.25) 45%, rgba(19,24,19,.82) 100%) }
.topo-overlay{ position:absolute; inset:0; z-index:1; color:var(--kraft); opacity:0; mix-blend-mode:screen;
  -webkit-mask:url(img/topo.svg) center/cover no-repeat; mask:url(img/topo.svg) center/cover no-repeat; background:currentColor;
  animation:topo-in 2.4s .3s ease-out forwards }
@keyframes topo-in{ from{ opacity:0; transform:scale(1.04) } to{ opacity:.42; transform:scale(1) } }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(2.5rem, 7vh, 5rem); padding-top:6rem }
.hero h1{ color:#fff; max-width:12ch }
.hero .lede{ color:rgba(255,255,255,.88) }
.credit{ position:absolute; right:var(--gut); bottom:1rem; z-index:2; font:500 .8rem var(--cond); letter-spacing:.03em; color:rgba(255,255,255,.7) }

/* page hero (inner pages) */
.page-hero{ position:relative; padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 3.5rem); overflow:hidden; border-bottom:1px solid var(--line) }
.page-hero::before{ content:""; position:absolute; inset:-10% -10% -10% 35%; color:var(--forest); opacity:.12; background:currentColor;
  -webkit-mask:url(img/topo.svg) center/cover no-repeat; mask:url(img/topo.svg) center/cover no-repeat; pointer-events:none }
.page-hero .wrap{ position:relative }

/* ---------- sections ---------- */
section{ padding:clamp(3.5rem, 8vw, 6.5rem) 0 }
.rule{ height:14px; margin:0; border:0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C30 1 60 13 90 7 S150 1 180 7 S225 12 240 7' fill='none' stroke='%231F3B2D' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center/240px 14px }

/* proof sentence */
.proof{ padding:clamp(2.5rem, 6vw, 4.5rem) 0 }
.proof p{ font-family:var(--serif); font-size:clamp(1.45rem, 3.2vw, 2.35rem); line-height:1.3; color:var(--forest); max-width:34ch; margin:0 }
.proof p span{ color:var(--ink-soft) }

/* services index: ruled rows, not cards */
.svc-list{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line) }
.svc-list li{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 160px; gap:clamp(1rem, 3vw, 2.5rem); align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--line) }
.svc-list h3{ margin:0 }
.svc-list p{ margin:0; color:var(--ink-soft) }
.svc-list .thumb{ aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--mist-2) }
.svc-list .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s }
.svc-list li:hover .thumb img{ transform:scale(1.05) }
.svc-list a.more{ font-weight:600; white-space:nowrap }
@media (max-width: 760px){
  .svc-list li{ grid-template-columns:1fr 110px; }
  .svc-list li > div:nth-child(2){ grid-column:1 / -1; grid-row:2 }
}

/* split: photo + text */
.split{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.5rem, 5vw, 4.5rem); align-items:center }
.split.flip > :first-child{ order:2 }
.split figure{ margin:0 }
.split figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px }
@media (max-width: 820px){ .split{ grid-template-columns:1fr } .split.flip > :first-child{ order:0 } }
figcaption{ font:500 .85rem var(--cond); letter-spacing:.03em; color:var(--ink-soft); margin-top:.55rem }

/* quote */
.quote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem, 3.4vw, 2.5rem); line-height:1.25; color:var(--forest); margin:0 0 1rem; max-width:22ch }
.quote-by{ font-family:var(--cond); font-size:1rem; color:var(--ink-soft) }

/* dark plate */
.plate{ background:var(--basalt); color:#E9ECE6 }
.plate h2, .plate h3{ color:#fff }
.plate p{ color:rgba(233,236,230,.82) }
.plate a:not(.btn){ color:var(--kraft) }
.plate .split figure img{ aspect-ratio:3/4 }

/* kraft band with contour lines */
.band{ position:relative; background:var(--kraft); color:var(--basalt); overflow:hidden }
.band::before{ content:""; position:absolute; inset:0; color:var(--forest); opacity:.18; background:currentColor;
  -webkit-mask:url(img/topo.svg) center/cover no-repeat; mask:url(img/topo.svg) center/cover no-repeat }
.band .wrap{ position:relative }
.band h2{ color:var(--basalt) }
.band p{ color:#3A3326 }

/* photo row */
.photo-row{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px }
.photo-row img{ width:100%; height:clamp(220px, 32vw, 420px); object-fit:cover; border-radius:3px }
@media (max-width: 700px){ .photo-row{ grid-template-columns:1fr 1fr } .photo-row img:first-child{ grid-column:1 / -1 } }

/* service detail blocks */
.svc{ scroll-margin-top:90px }
.svc + .svc{ border-top:1px solid var(--line) }
.checks{ list-style:none; padding:0; margin:1rem 0 0 }
.checks li{ position:relative; padding:.55rem 0 .55rem 1.6rem; border-bottom:1px dashed var(--line); max-width:62ch }
.checks li::before{ content:""; position:absolute; left:0; top:1.05rem; width:.8rem; height:2px; background:var(--kraft) }
.checks li strong{ color:var(--forest) }
.steps{ counter-reset:s; list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:1rem }
.steps li{ counter-increment:s; display:grid; grid-template-columns:2.6rem 1fr; gap:.8rem; align-items:start }
.steps li::before{ content:counter(s); font:600 1.25rem/2.4rem var(--serif); width:2.4rem; height:2.4rem; text-align:center; border:2px solid var(--forest); border-radius:50%; color:var(--forest) }
.tag{ display:inline-block; font:600 .8rem var(--cond); letter-spacing:.04em; padding:.2rem .6rem; border-radius:999px; background:var(--kraft-lt); color:#5A4524; margin-bottom:.8rem }

/* trip styles / courses: varied blocks */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1rem, 3vw, 2rem) }
@media (max-width: 760px){ .grid-2{ grid-template-columns:1fr } }
.block{ padding:1.6rem 0 0; border-top:3px solid var(--forest) }
.block p{ color:var(--ink-soft) }
.course{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:clamp(1.3rem, 3vw, 2.2rem) }
.course + .course{ margin-top:1.5rem }
.course h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem) }
.modules{ columns:2 260px; column-gap:2rem; padding-left:1.2rem; margin:1rem 0 0 }
.modules li{ break-inside:avoid; margin-bottom:.7rem }
.modules li::marker{ font-family:var(--serif); font-weight:700; color:var(--forest) }

/* faq */
.faq details{ border-bottom:1px solid var(--line); padding:1rem 0 }
.faq summary{ cursor:pointer; font:600 1.1rem var(--sans); color:var(--forest); list-style:none; display:flex; justify-content:space-between; gap:1rem }
.faq summary::after{ content:"+"; font:400 1.5rem/1 var(--serif) }
.faq details[open] summary::after{ content:"−" }
.faq details p{ margin:.6rem 0 0 }

/* credentials */
.creds{ list-style:none; padding:0; margin:1rem 0 0; border-top:1px solid var(--line) }
.creds li{ padding:.8rem 0; border-bottom:1px solid var(--line); display:flex; gap:1rem; align-items:baseline }
.creds li::before{ content:""; flex:none; width:10px; height:10px; border:2px solid var(--forest); border-radius:50%; transform:translateY(1px) }

/* image placeholder: Renan flags what to shoot */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:260px; aspect-ratio:4/5; padding:1.5rem;
  border:2px dashed #B5895A; border-radius:4px; background:repeating-linear-gradient(45deg, rgba(212,165,116,.12) 0 12px, transparent 12px 24px);
  font:600 1rem/1.4 var(--cond); letter-spacing:.03em; color:#7A5A33 }
.ph.wide{ aspect-ratio:16/9 }

/* contact form */
.form{ display:grid; gap:1rem; max-width:640px }
.form label{ display:grid; gap:.35rem; font-weight:600; color:var(--forest) }
.form input, .form select, .form textarea{ font:400 1rem var(--sans); color:var(--ink); padding:.75rem .85rem; border:1.5px solid #9AA595; border-radius:6px; background:#fff }
.form input:focus, .form select:focus, .form textarea:focus{ outline:3px solid var(--kraft); outline-offset:1px; border-color:var(--forest) }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.form-status{ margin:0; font-weight:600; color:var(--forest) }
.form-status.err{ color:#9B2C1F }
@media (max-width: 600px){ .form .row{ grid-template-columns:1fr } }

/* footer */
.site-foot{ background:var(--forest); color:#D9E0D6; padding:3rem 0 2rem }
.site-foot a{ color:#fff; text-decoration:none }
.site-foot a:hover{ text-decoration:underline }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem }
.foot-grid .brand{ color:#fff }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.foot-small{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.18); font-size:.9rem; color:#B9C4B5 }
@media (max-width: 700px){ .foot-grid{ grid-template-columns:1fr } }

/* ---------- v2 additions ---------- */

/* hero video */
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 70% }

/* two doors: the visitor picks a path right under the hero */
.doors{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line) }
.door{ position:relative; display:block; padding:clamp(2rem, 5vw, 3.6rem) var(--gut); text-decoration:none; color:var(--ink); transition:background .25s }
.door + .door{ border-left:1px solid var(--line) }
.door:hover{ background:var(--paper) }
.door .who{ font:600 1rem var(--cond); letter-spacing:.03em; color:var(--moss); display:block; margin-bottom:.6rem }
.door h2{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom:.4em }
.door p{ color:var(--ink-soft); margin-bottom:1.3rem }
.door .go{ font-weight:600; color:var(--forest); border-bottom:2px solid var(--kraft); padding-bottom:2px }
/* line the doors up with the page grid */
.door:first-child{ padding-left:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
.door:last-child{ padding-right:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
@media (max-width: 760px){ .doors{ grid-template-columns:1fr } .door + .door{ border-left:0; border-top:1px solid var(--line) } }

/* trust strip: credentials divided by hairlines */
.trust{ border-bottom:1px solid var(--line); background:var(--paper) }
.trust ul{ list-style:none; margin:0 auto; padding:1.1rem var(--gut); max-width:var(--wrap); display:flex; flex-wrap:wrap; gap:.6rem 0 }
.trust li{ font:500 1rem/1.3 var(--cond); letter-spacing:.02em; color:var(--forest); padding:0 .95rem; border-left:1px solid var(--line) }
@media (max-width: 760px){ .trust ul{ display:grid; gap:.45rem } .trust li{ border-left:0; padding:0 } }
.trust li:first-child{ padding-left:0; border-left:0 }

/* section heads: a hairline above every major heading, like a manual chapter */
.sec-head{ border-top:1px solid var(--forest); padding-top:1.1rem; margin-bottom:2rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:end }
.sec-head h2{ margin:0 }
.sec-head p{ margin:0; color:var(--ink-soft) }
@media (max-width: 760px){ .sec-head{ grid-template-columns:1fr; gap:.8rem } }

/* field-note captions: a logbook entry under each photo */
figcaption.fn{ display:flex; gap:.7rem; align-items:baseline; font:500 .92rem/1.35 var(--cond); letter-spacing:.02em; color:var(--ink-soft); margin-top:.7rem }
figcaption.fn time{ flex:none; padding:.08rem .45rem; border:1px solid var(--moss); border-radius:3px; color:var(--forest); font-weight:600 }
.plate figcaption.fn{ color:#AEB8AA } .plate figcaption.fn time{ color:var(--kraft); border-color:rgba(212,165,116,.55) }

/* work page */
.project{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.5rem, 4vw, 3.5rem); padding:clamp(2.5rem, 6vw, 4.5rem) 0; border-top:1px solid var(--line) }
.project:first-of-type{ border-top:0 }
.project .facts{ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:1.2rem 0 0; padding:1rem 0 0; border-top:1px solid var(--line); font-size:.98rem }
.project .facts dt{ font:600 .95rem var(--cond); letter-spacing:.02em; color:var(--moss) }
.project .facts dd{ margin:0 }
.project .gallery{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start }
.project .gallery img, .project .gallery .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; min-height:0 }
.project .gallery img:first-child{ grid-column:1 / -1; aspect-ratio:16/10 }
@media (max-width: 820px){ .project{ grid-template-columns:1fr } }

/* before / after pairs */
.ba-set{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(.8rem, 2vw, 1.5rem); margin-top:1.2rem }
.ba{ margin:0 }
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:4px }
.ba-pair div{ position:relative }
.ba-pair img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px }
.ba-pair span{ position:absolute; left:6px; top:6px; font:600 .78rem var(--cond); letter-spacing:.04em; padding:.12rem .45rem; border-radius:3px; background:rgba(18,23,18,.78); color:#fff }
.ba-pair div:last-child span{ background:var(--kraft); color:var(--basalt) }
@media (max-width: 820px){ .ba-set{ grid-template-columns:1fr } }

/* mobile sticky action */
.mobile-cta{ display:none }
@media (max-width: 760px){
  .mobile-cta{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:45; justify-content:center;
    padding:.95rem 1rem; border-radius:999px; background:var(--forest); color:#fff; font-weight:600; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.25) }
  body{ padding-bottom:76px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .topo-overlay{ opacity:.42 }
}

/* real logo in header/footer */
.brand img{ display:block; height:62px; width:auto }
.site-foot .brand img{ height:64px }


/* phone hero: the vertical clip keeps the rappeller near the top; push copy to the bottom */
@media (max-width: 760px) and (orientation: portrait){ .hero .hero-video{ object-position:25% 15% } .hero{ min-height:88svh } }


/* readable text on dark plates */
.plate .block p{ color:rgba(233,236,230,.82) }
.plate .block h3{ color:#fff }


/* ---------- articles ---------- */
.post-hero{ position:relative; min-height:min(70vh,620px); display:flex; align-items:flex-end; color:#fff; background:var(--basalt); overflow:hidden }
.post-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.post-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,24,19,.1), rgba(19,24,19,.85)) }
.post-hero .wrap{ position:relative; z-index:1; padding-bottom:clamp(2rem,6vh,4rem); padding-top:5rem }
.post-hero h1{ color:#fff; font-size:clamp(2.3rem,5.4vw,4.4rem); max-width:18ch }
.post-hero .lede{ color:rgba(255,255,255,.88) }
.post-kicker{ color:var(--kraft) !important; margin-bottom:.6rem }
.post-body{ max-width:820px; padding-top:clamp(2rem,5vw,3.5rem); padding-bottom:clamp(3rem,7vw,5rem) }
.post-body h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin-top:2.8rem; scroll-margin-top:90px }
.post-body h3{ margin-top:1.8rem; margin-bottom:.4rem }
.post-body p, .post-body li{ font-size:1.08rem }
.post-body figure{ margin:2rem 0 }
.post-body figure.wide img{ width:100%; border-radius:4px; max-height:560px; object-fit:cover }
.post-body figure.half-right{ float:right; width:min(42%,320px); margin:0 0 1rem 1.5rem }
.post-body figure.half-right img{ border-radius:4px; aspect-ratio:3/4; object-fit:cover; width:100% }
@media (max-width:640px){ .post-body figure.half-right{ float:none; width:100%; margin:1.5rem 0 } }
.post-body h2{ clear:both }
.toc{ background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1.1rem 1.4rem; margin-bottom:2rem }
.toc ol{ margin:.5rem 0 0; padding-left:1.2rem; columns:2 220px }
.toc a{ text-decoration:none } .toc a:hover{ text-decoration:underline }
.post-author{ display:flex; gap:1.2rem; align-items:center; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--forest) }
.post-author img{ width:88px; height:88px; border-radius:50%; object-fit:cover; flex:none }
.post-author p{ margin:.3rem 0 0; color:var(--ink-soft); font-size:1rem }
.guide-list{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.6rem }

.table-wrap{ overflow-x:auto; margin:1rem 0 2rem; border:1px solid var(--line); border-radius:6px }
.hike-table{ width:100%; border-collapse:collapse; font-size:.98rem; min-width:620px }
.hike-table th{ text-align:left; font:600 .95rem var(--cond); letter-spacing:.02em; color:var(--forest); background:var(--paper); padding:.7rem .9rem; border-bottom:1px solid var(--forest) }
.hike-table td{ padding:.65rem .9rem; border-bottom:1px solid var(--line); vertical-align:top }
.hike-table tr:last-child td{ border-bottom:0 }
.post-body .band p, .post-body .band h2{ color:var(--basalt) }


/* guides index */
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,320px),1fr)); gap:clamp(1rem,2.5vw,1.8rem) }
.guide-card{ display:block; text-decoration:none; color:var(--ink); border-top:3px solid var(--forest); padding-top:1rem }
.guide-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:4px; margin-bottom:.9rem; transition:transform .4s }
.guide-card:hover img{ transform:scale(1.02) }
.guide-card h2{ font-size:clamp(1.35rem,2.2vw,1.65rem); margin:.4rem 0 }
.guide-card p{ color:var(--ink-soft); margin:0 }
.guide-card:hover h2{ text-decoration:underline; text-decoration-color:var(--kraft); text-decoration-thickness:3px }


.form [hidden]{ display:none }

/* Guest reviews */
.reviews{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; margin-top:1.5rem }
.reviews blockquote{ margin:0; padding:1.25rem 1.25rem 1rem; background:var(--paper); border-left:3px solid var(--kraft); border-radius:4px }
.reviews blockquote p{ margin:0 0 .75rem; font-family:var(--serif, Georgia, serif); font-size:1.125rem; line-height:1.45; color:var(--ink) }
.reviews cite{ font-style:normal; font-size:.875rem; color:var(--ink-soft) }


/* ---------- Waterfall Rappel tours (home) ---------- */
.brand-wr{ gap:.7rem }
.brand-wr img{ height:56px; width:56px }
.brand-wr span{ display:grid; font:600 1.35rem/1.05 var(--serif); color:var(--forest); letter-spacing:-.01em }
.brand-wr small{ font:500 .85rem/1.2 var(--cond); letter-spacing:.03em; color:var(--moss) }
.hero h1 + .lede{ margin-top:.2rem }
.tours{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1.2rem, 3vw, 2.4rem) }
.tour{ display:flex; flex-direction:column; border-top:3px solid var(--forest); padding-top:1.3rem }
.tour:first-child{ border-top-color:var(--kraft) }
.tour h3{ margin-bottom:.35rem }
.tour .price{ font:500 clamp(2.4rem, 4.4vw, 3.2rem)/1 var(--serif); color:var(--forest); letter-spacing:-.02em; margin:0 0 .4rem }
.tour .price span{ font:500 1rem var(--cond); letter-spacing:.02em; color:var(--moss) }
.tour .checks{ margin:.4rem 0 1.4rem; flex:1 }
.tour .btn{ align-self:flex-start }
@media (max-width: 860px){ .tours{ grid-template-columns:1fr } }
/* tours hero: everything (badge, headline, buttons) fits on the first screen */
.hero-tour{ min-height:calc(100svh - 78px); max-height:900px; align-items:center }
.hero-tour .wrap{ padding-top:3rem; padding-bottom:3rem }
.hero-tour h1{ font-size:clamp(2.4rem, 5vw, 4.4rem); max-width:16ch }
.hero-tour .actions{ margin-top:1.2rem }
.hero-tour{ align-items:flex-start }
.hero-tour .wrap{ padding-top:clamp(2rem, 7vh, 4.5rem) }
.hero-tour{ padding:0 }
.hero-tour video{ object-position:center 25% }
.hero-tour::after{ background:linear-gradient(90deg, rgba(19,24,19,.72) 0%, rgba(19,24,19,.45) 38%, rgba(19,24,19,.05) 70%), linear-gradient(180deg, rgba(19,24,19,0) 60%, rgba(19,24,19,.55) 100%) }
.hero-price{ margin:1.1rem 0 0; font:500 1.05rem/1.3 var(--cond); letter-spacing:.02em; color:rgba(255,255,255,.78) }
/* wide screens: copy on a basalt panel at left, the falls get the right side to themselves, so the headline never covers the rappeller */
@media (min-width: 961px){
  .hero-tour{ align-items:center; min-height:min(calc(100svh - 78px), 820px) }
  .hero-tour video{ inset:0 0 0 40%; width:60%; object-position:center 30%; transform:scale(1.03); transform-origin:center }
  .hero-tour::after{ background:linear-gradient(90deg, var(--basalt) 40%, rgba(18,23,18,.55) 46%, rgba(18,23,18,0) 58%) }
  /* contour lines live on the panel and fade out where the video begins */
  .hero-tour .topo-overlay{ inset:0 52% 0 0; z-index:3;
    -webkit-mask:url(img/topo.svg) center/cover no-repeat, linear-gradient(90deg, #000 70%, transparent); -webkit-mask-composite:source-in;
    mask:url(img/topo.svg) center/cover no-repeat, linear-gradient(90deg, #000 70%, transparent); mask-composite:intersect }
  .hero-tour .wrap{ max-width:none; margin:0; width:46%; padding:3rem clamp(1.5rem, 3vw, 3rem) 3rem max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
  .hero-tour h1{ font-size:clamp(2.4rem, 3.5vw, 3.7rem); max-width:14ch }
  .hero-tour .lede{ max-width:34ch }
  .hero-tour .credit{ bottom:1.2rem }
}
/* phones and tablets: the falls on top with nothing over them, copy below on the basalt panel */
@media (max-width: 960px){
  .hero-tour{ --vh:min(calc(100vw * 1.25), 58svh); display:block; min-height:0; max-height:none; background:var(--basalt) }
  .hero-tour .hero-video{ position:relative; inset:auto; display:block; width:100%; height:var(--vh); object-fit:cover; object-position:center 25% }
  .hero-tour::after{ inset:0 0 auto 0; height:var(--vh); background:linear-gradient(180deg, rgba(18,23,18,0) 72%, var(--basalt) 100%) }
  .hero-tour .topo-overlay{ inset:var(--vh) 0 0 0 }
  .hero-tour .wrap{ padding:1.6rem var(--gut) 2.4rem }
  .hero-tour h1{ font-size:clamp(2.1rem, 8.6vw, 3.2rem); max-width:14ch }
  .hero-tour .credit{ top:calc(var(--vh) - 1.9rem); bottom:auto }
}
/* phones: shorter video and no second badge (the header already shows it), so the buttons fit on the first screen */
@media (max-width: 760px){
  .hero-tour{ --vh:min(calc(100vw * 1.1), 44svh) }
  .hero-tour .wrap{ padding-top:1.1rem }
  .hero-tour .lede{ font-size:1.02rem; line-height:1.5 }
}
/* the sticky "Book a tour" bar waits until the hero buttons scroll away */
.mobile-cta{ transition:transform .25s ease, opacity .25s ease }
.mobile-cta.cta-hidden{ transform:translateY(140%); opacity:0; pointer-events:none }

/* Da Life Outdoors credit: a quiet line in the hero, the logo beside the lead guide note */
.hero-collab{ display:flex; align-items:center; gap:.9rem; width:fit-content; margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); font:500 .95rem/1.3 var(--cond); letter-spacing:.02em; color:rgba(255,255,255,.62) }
.hero-collab img{ width:74px; height:auto; opacity:.8 }
.guide-credit{ display:flex; align-items:center; gap:1.2rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line) }
.guide-credit img{ flex:none; width:110px; height:auto }
.guide-credit p{ margin:0 }
/* crew page: one card per guide, photo on top */
.crew{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(2rem,5vw,3.5rem) }
.crew-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; background:var(--line) }
.crew-card h2{ margin:1.2rem 0 .2rem; font-size:clamp(1.6rem,3vw,2.1rem) }
.crew-card .crew-role{ margin:0 0 .8rem; color:var(--kraft); font-weight:600 }
.crew-card .crew-certs{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:.92rem }
@media (max-width: 520px){ .guide-credit{ gap:.9rem; align-items:flex-start } .guide-credit img{ width:72px; margin-top:.3rem } }
/* merch page: four products, square art on top of each card */
.tours.merch{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) }
.merch-hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem); align-items:center }
.merch-hero h1{ font-size:clamp(2.8rem, 6vw, 5.2rem) }
.merch-collage{ position:relative; max-width:440px; width:100%; justify-self:end; padding:0 0 2.5rem 3rem }
.mc-photo{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 18px 40px rgba(20,40,30,.22) }
.mc-card{ position:absolute; background:#fff; border-radius:12px; padding:.35rem; box-shadow:0 10px 26px rgba(20,40,30,.25); height:auto }
.mc-a{ width:42%; left:0; bottom:0; transform:rotate(-6deg) }
.mc-b{ width:28%; right:-12%; bottom:-3%; transform:rotate(5deg) }
.mc-c{ width:24%; right:-4%; top:-5%; transform:rotate(8deg); border-radius:50% }
@media (max-width: 860px){
  .merch-hero-grid{ grid-template-columns:1fr }
  .merch-collage{ justify-self:center; max-width:330px; padding-left:2.2rem; margin-top:.5rem }
  .mc-b{ right:-6% } .mc-c{ right:-2% }
}
.hero-offer{ display:inline-block; margin:1.2rem 0 0; padding:.6rem 1rem; border-radius:8px; background:var(--forest); color:#EFE5D3; font:500 1rem/1.4 var(--cond); letter-spacing:.02em }
.hero-offer strong{ color:#fff }
.merch-art{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:8px; margin-bottom:1rem }
.btn[aria-disabled="true"]{ opacity:.55; cursor:default; pointer-events:none }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
/* privacy and terms pages */
.legal h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:.4rem}
.legal h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:2.6rem 0 .6rem}
.legal h3{font-size:1.2rem;margin:1.6rem 0 .4rem}
.legal ul{padding-left:1.2rem}
.legal li{margin:.3rem 0}

/* Gallery page: masonry columns, photo store banner, lightbox (site.js) */
.photo-store{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; padding:clamp(1.1rem,3vw,1.6rem) clamp(1.1rem,3vw,2rem); background:var(--kraft-lt); border-radius:14px }
.photo-store h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 .25rem }
.photo-store p{ margin:0; color:var(--ink-soft) }
.gallery{ columns:3 260px; column-gap:12px }
.g-item{ display:block; margin:0 0 12px; break-inside:avoid; border-radius:10px; overflow:hidden; background:var(--basalt) }
.g-item img{ display:block; width:100%; height:auto; transition:transform .4s ease, opacity .3s }
.g-item:hover img{ transform:scale(1.03); opacity:.92 }
.lightbox{ width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(12,15,12,.94); color:#fff }
.lightbox[open]{ display:flex; align-items:center; justify-content:center }
.lightbox::backdrop{ background:rgba(12,15,12,.94) }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:3.5rem 1rem 1rem }
.lightbox img{ max-width:min(94vw,1600px); max-height:calc(100vh - 8rem); max-height:calc(100dvh - 8rem); width:auto; height:auto; border-radius:6px }
.lightbox figcaption{ font-size:.95rem; color:rgba(255,255,255,.82); text-align:center; max-width:60ch }
.lightbox button{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:999px; width:46px; height:46px; font-size:1.5rem; line-height:1; cursor:pointer }
.lightbox button:hover{ background:rgba(255,255,255,.25) }
.lightbox .lb-close{ top:12px; right:12px }
.lightbox .lb-prev{ left:12px; top:50% }
.lightbox .lb-next{ right:12px; top:50% }
@media (max-width:640px){ .gallery{ columns:2; column-gap:8px } .g-item{ margin-bottom:8px; border-radius:6px } .lightbox .lb-prev, .lightbox .lb-next{ top:auto; bottom:14px } }