/* ==========================================================================
   Lemhi — site stylesheet
   Crimson Pro (display) + DM Sans (body). Parchment / Evergreen palette.
   Orange eyebrow accent (orientation only), yellow punch (one per page).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400..900;1,400..900&family=DM+Sans:wght@400;500;700;800&display=swap');

:root{
  --paper:#F7F2E8;
  --card:#EBE6DD;
  --ink:#12130F;
  --evergreen:#295A42;
  --vibrant:#2E8B5F;
  --dark:#0F2418;
  --dark-deep:#03150E;
  --dark-lift:#184432;
  --sage:#6F9F84;
  --light-sage:#9FBFAE;
  --muted:#969696;
  --orient:#C4682D;
  --punch:#E6C96A;
  --hair:rgba(41,90,66,0.18);
  --r-sm:6px;
  --r-md:12px;
  --r-pill:999px;
  --shadow-card:0 2px 10px rgba(15,36,24,.08);
  --shadow-raised:0 14px 44px rgba(15,36,24,.20);
  --glow:0 0 18px 2px rgba(230,201,106,.65);
  --font-d:'Crimson Pro',Georgia,'Times New Roman',serif;
  --font-s:'DM Sans',system-ui,-apple-system,sans-serif;
  --dark-gradient:linear-gradient(145deg,var(--dark-deep) 0%,var(--dark) 55%,var(--dark-lift) 100%);
  --maxw:1200px;

  /* ---------- Topo Frontier: dark-mode-default tokens ---------- */
  --text-1:#F7F2E8;              /* primary text on dark: headlines, key numbers */
  --text-2:#D6E2DA;              /* secondary text on dark: body copy, descriptions */
  --rust:#C96A5E;                /* status: negative / needs-attention, non-text use */
  --rust-text:#E08D82;           /* rust lightened for 4.5:1 as type */
  --clay:#D98A5C;                /* status: soft-warning tier */
  --hair-dark:rgba(159,191,174,0.14);   /* hairline borders/dividers on dark */
  --panel:rgba(247,242,232,0.045);      /* translucent parchment panel fill on dark */
  --panel-lift:rgba(247,242,232,0.07);  /* nested panel fill on dark */
  --panel-border:rgba(159,191,174,0.14);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--dark-gradient);
  color:var(--text-2);
  font-family:var(--font-s);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-d);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text-1);
  margin:0;
  line-height:1.08;
}
p{line-height:1.6;margin:0;}
a{color:var(--light-sage);text-decoration:none;}
a:hover{color:var(--punch);}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- global keyboard focus state ----------
   A handful of components (value cards, process tabs) already carry a
   bespoke branded focus-visible ring. Everything else -- plain nav/footer
   links, buttons, form fields -- was falling back to the browser's
   default outline, which is fine but inconsistent and, on a dark-hero
   page, can end up low-contrast against the background. One sitewide
   rule instead of patching each component; :focus-visible only, so mouse
   clicks never show a ring, just keyboard/assistive-tech focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--punch);
  outline-offset:2px;
  border-radius:2px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- eyebrow (dark-mode default: light sage orients; orange is
   reserved for the parchment/torn-paper exception only) ---------- */
.eyebrow{
  font:700 13px/1 var(--font-s);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--light-sage);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:'';width:16px;height:2px;background:var(--sage);flex-shrink:0;}
.eyebrow.on-dark{color:var(--light-sage);}
.eyebrow.on-dark::before{background:var(--sage);}

/* ---------- buttons (dark-mode default: parchment-filled primary,
   sage-outline ghost; restored to evergreen-filled/hairline only inside
   the parchment exception, see far below) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 28px;border-radius:var(--r-pill);
  font:700 15px var(--font-s);border:none;cursor:pointer;
  transition:background .3s ease, transform .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--paper);color:var(--dark);}
.btn-primary:hover{background:var(--light-sage);color:var(--dark);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--paper);border:1.5px solid rgba(159,191,174,0.45);}
.btn-ghost:hover{background:rgba(159,191,174,.12);color:var(--paper);}
.btn-dark{background:var(--paper);color:var(--dark);}
.btn-dark:hover{background:var(--light-sage);color:var(--dark);transform:translateY(-1px);}
.btn-outline-dark{background:transparent;color:var(--paper);border:1.5px solid rgba(159,191,174,0.45);}
.btn-outline-dark:hover{background:rgba(159,191,174,.12);color:var(--paper);}

/* ---------- nav ---------- */
.nav{
  background:var(--paper);
  border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:100;
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:84px;gap:24px;
}
.nav-logo{flex-shrink:0;}
.nav-logo img{height:46px;width:auto;}
.nav-links{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.nav-links a{font:500 15px var(--font-s);color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--evergreen);font-weight:700;}
.nav-right{display:flex;align-items:center;gap:20px;flex-shrink:0;}
/* Contact link falls outside .nav-links, so with no color of its own it
   was inheriting the sitewide default link color (--light-sage) -- reads
   as too washed-out against the light nav bar. Orient (the site's orange
   accent) instead, on light-hero pages; the dark-hero override just below
   already gives it a near-white tone there and takes precedence. */
.nav-right a:not(.btn){color:var(--orient);}
.nav-toggle{display:none;flex-shrink:0;}
/* Mobile-only duplicate of the Contact link (see .nav-right a:not(.btn)
   below -- that rule hides the real Contact link at <=980px since
   .nav-right itself is never part of the collapsed menu). Without this,
   Contact was unreachable from the mobile/tablet nav entirely: it lived
   only in .nav-right, which disappears at this breakpoint, and nothing
   took its place inside .nav-links. Hidden on desktop; shown as a normal
   .nav-links row once the menu collapses. */
.nav-link-mobile-contact{display:none;}
@media (max-width:640px){
  .nav-logo img{height:36px;}
  .nav-right .btn{padding:10px 16px;font-size:13px;}
}
@media (max-width:980px){
  .nav-links{
    position:absolute;top:84px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--hair);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 32px 20px;
    display:none;
    max-height:calc(100vh - 84px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--hair);}
  .nav-link-mobile-contact{display:block;}
  .nav-right a:not(.btn){display:none;}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;background:none;border:1.5px solid var(--hair);
    border-radius:var(--r-sm);cursor:pointer;
  }
}

/* ---------- footer ---------- */
.footer{
  position:relative;overflow:hidden;
  background:var(--dark-gradient);color:var(--paper);
  padding:72px 0 32px;
}
.footer .wrap{position:relative;}
.footer-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;}
.footer-brand{max-width:320px;display:flex;flex-direction:column;gap:16px;}
.footer-brand img{height:72px;width:auto;align-self:flex-start;}

/* ---------- footer / cta topo texture — same asset & treatment as the hero,
   single layer, no trail line, so nothing competes when sections meet ---------- */
.footer-topo,.topo-tex{
  position:absolute;inset:0;width:100%;height:100%;
  background-image:url("../img/topo.svg");
  background-size:cover;background-repeat:no-repeat;background-position:center;
  opacity:.16;pointer-events:none;
  pointer-events:none;
  animation:topoDrift 42s ease-in-out infinite alternate;
  transform-origin:center;
}
.footer-brand p{color:var(--light-sage);font-size:14.5px;}
.footer-col{display:flex;flex-direction:column;gap:12px;min-width:130px;}
.footer-col-h{font:700 12px var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:var(--sage);}
.footer-col a{font:500 14px var(--font-s);color:var(--light-sage);transition:color .2s ease;}
.footer-col a:hover{color:var(--punch);}
.footer-bottom{
  margin-top:56px;padding-top:24px;border-top:1px solid rgba(159,191,174,0.25);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-bottom span{color:var(--muted);font-size:13px;}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{color:var(--muted);font-size:13px;transition:color .2s ease;}
.footer-legal a:hover{color:var(--punch);}

/* ---------- sections ---------- */
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.hero-dark{
  position:relative;overflow:hidden;
  background:var(--dark-gradient);color:var(--paper);
  padding:96px 0 84px;
}
.hero-dark .topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;}
.hero-dark .wrap{position:relative;}
.cta-dark{
  position:relative;overflow:hidden;text-align:center;
  background:var(--dark-gradient);color:var(--paper);
  padding:88px 0;
}
.cta-dark .topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;}
.cta-dark .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;}

/* ---------- topo drift (dark sections) ---------- */
.topo{animation:topoDrift 42s ease-in-out infinite alternate;transform-origin:center;}
@keyframes topoDrift{
  0%{transform:scale(1.04) translate(0,0);}
  100%{transform:scale(1.13) translate(-1.6%,1.4%);}
}

/* ---------- parallax layer: a plain full-bleed wrapper around a topo
   texture layer, translated vertically by assets/js/parallax.js in
   proportion to scroll position (data-parallax-speed on the wrapper, not
   the texture div itself). Kept as a separate element from the texture it
   wraps because the texture already carries its own transform-based
   ambient drift animation (topoDrift / lemhiHeroTopoDriftA) -- putting the
   JS-driven scroll offset on a parent instead of fighting that animation
   for the same `transform` property lets both motions compose. The result
   reads as the topo backdrop moving slightly slower than the page scrolls,
   so the parchment ridge cutting across it appears to slide over it. ---------- */
.parallax-layer{position:absolute;inset:0;pointer-events:none;will-change:transform;}
/* Bleed variant: for a wrapped layer whose own inset is pinned to 0 by a
   later, more specific rule (e.g. .lemhi-hero-v4__topo's `!important`
   mobile-overflow-fix patch further down), extending the WRAPPER itself
   instead gives the same overscan the -18%-style inset trick used to give
   directly -- the wrapped element's inset:0 then fills this bigger box
   instead of the hero's actual bounds, so the parallax translateY has real
   room to move before exposing an edge. */
.parallax-layer--bleed{position:absolute;top:-30%;bottom:-30%;left:0;right:0;pointer-events:none;will-change:transform;}
@media (prefers-reduced-motion:reduce){
  .parallax-layer,.parallax-layer--bleed{transform:none !important;}
}

/* ---------- yellow trail animation ---------- */
.trail-lines{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.trail-lines path{
  fill:none;
  stroke:rgba(230,201,106,.58);
  stroke-width:2.2;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:0.06 0.038;
  stroke-dashoffset:1;
  animation:lemhiTrailDraw 16s linear infinite;
}
.trail-lines path:nth-child(2){animation-delay:-4.5s;}
.trail-lines path:nth-child(3){animation-delay:-9.5s;}
@keyframes lemhiTrailDraw{
  0%{stroke-dashoffset:1;opacity:.2;}
  22%{opacity:.7;}
  100%{stroke-dashoffset:0;opacity:.2;}
}
.hero-dark .wrap,.cta-dark .wrap,.footer .wrap{z-index:2;}

/* ---------- single-line route (cta "join the expedition" panel) ---------- */
.cta-dark--expedition .topo{display:none;}
.cta-dark--expedition .waypoint-field{color:var(--punch);opacity:.5;}
.cta-route{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:.6;
}
.cta-route path{
  fill:none;
  stroke:rgba(230,201,106,.6);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:0.06 0.038;
  stroke-dashoffset:1;
  filter:drop-shadow(0 0 8px rgba(230,201,106,.18));
  animation:lemhiHeroRoute 16s linear infinite;
}

/* ---------- waypoint field: third background module (route markers, not
   topo contours) — used where a dark or tinted panel needs depth without
   competing with the topo texture claimed by hero/footer ---------- */
.waypoint-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.waypoint-field__lines line{stroke:currentColor;stroke-width:1;opacity:.4;}
.waypoint-field__dots circle{fill:currentColor;animation:waypointPulse 6s ease-in-out infinite;}
.waypoint-field__dots circle:nth-child(3n){animation-delay:-1.6s;}
.waypoint-field__dots circle:nth-child(3n+1){animation-delay:-3.4s;}
.waypoint-field__dots circle:nth-child(5n){animation-delay:-4.8s;}
@keyframes waypointPulse{
  0%,100%{opacity:.4;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .topo,.trail-lines path,.footer-topo,.topo-tex,.cta-route path,.waypoint-field__dots circle{animation:none;}
}

/* ---------- icon badges (cards, chips) — dark-mode default ---------- */
.icon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);
  background:rgba(247,242,232,.08);color:var(--light-sage);
  flex-shrink:0;
}
.icon-badge svg{width:22px;height:22px;}
/* standalone content icons (not wrapped in an icon-badge) read currentColor;
   default them to the same quiet Light Sage tone dark-mode icons use */
.card>svg,.feat>svg{color:var(--light-sage);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .card>svg,
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .feat>svg{color:var(--evergreen);}
.icon-badge--on-dark{background:rgba(247,242,232,.12);color:var(--light-sage);}
.icon-badge--solid{background:var(--evergreen);color:var(--paper);}
.card-head{display:flex;align-items:center;gap:12px;}

/* ---------- dark continuum: the seats panel, the operating-principle
   quote, and the testimonial marquee read as ONE continuous canvas, not
   three stacked green rectangles. Each used to be its own <section> with
   its own copy of the same 165deg gradient, so the dark->evergreen
   transition restarted at every section boundary and produced visible
   horizontal bands. Now there is exactly one gradient and one topo layer,
   sized to the combined height of all three, with the sub-blocks below
   contributing only spacing/typography. Removing all the text and cards
   from this section should leave one uninterrupted green field. ---------- */
.dark-continuum{
  position:relative;overflow:hidden;
  /* Was 165deg dark->dark-lift->evergreen, ending on the brightest green on
     the page right before the campfire CTA started the whole gradient over
     again from its darkest point -- a visible seam. The brighter 165deg
     recipe moved up to the hero instead (.lemhi-hero-v4__base).

     Reusing var(--dark-gradient) as-is here was tried first, but a CSS
     gradient restarts at 0% for every element's own box -- so even with
     the identical recipe, this section's bottom edge (its 100% stop,
     dark-lift, a mid-brightness green) sat directly against the campfire
     CTA's top edge (that section's own 0% stop, dark-deep, near-black).
     Same tokens, still a hard seam, just a smaller one.
     Fixed by running the same three tokens in reverse, vertically: this
     section now STARTS at dark-lift (right under the parchment ridge,
     reading as the same darker green the hero used to open on) and ENDS
     at dark-deep -- the exact color the campfire CTA's gradient opens
     on -- so the two sections meet at a matching color instead of an
     opposite one, and the green bleeds into the firelight instead of
     cutting into it. */
  background:linear-gradient(180deg, var(--dark-lift) 0%, var(--dark) 55%, var(--dark-deep) 100%);
}
.dark-continuum .topo-tex{opacity:.27;}
.dark-continuum__block{position:relative;z-index:2;}
.dark-continuum__block .waypoint-field{color:var(--punch);opacity:.4;}
.seat-card{
  display:flex;flex-direction:column;gap:10px;
  padding:24px;border-radius:var(--r-md);
  background:rgba(247,242,232,.055);
  border:1px solid rgba(247,242,232,.16);
  transition:transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.seat-card:hover{
  transform:translateY(-5px);
  background:rgba(247,242,232,.1);
  border-color:rgba(230,201,106,.4);
  box-shadow:0 16px 34px rgba(3,21,14,.28);
}
.seat-card p{font:700 16px var(--font-s);color:var(--paper);}
.chip.chip--on-dark{border-color:rgba(247,242,232,.28);color:var(--light-sage);}

/* "What the journey delivers" cards: bare icon + text in an inline row,
   no icon backdrop -- chosen from card-concepts.html's Variation 2 after
   the boxed-icon version read as too minimal/empty. Icons are yellow
   (var(--punch)) per direct request. */
.outcome-card{
  display:flex;flex-direction:row;align-items:center;gap:18px;
  padding:24px;border-radius:var(--r-md);
  background:rgba(247,242,232,.055);
  border:1px solid rgba(247,242,232,.16);
  transition:transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.outcome-card:hover{
  transform:translateY(-5px);
  background:rgba(247,242,232,.1);
  border-color:rgba(230,201,106,.4);
  box-shadow:0 16px 34px rgba(3,21,14,.28);
}
.outcome-card svg{width:26px;height:26px;color:var(--punch);stroke-width:1.6;flex-shrink:0;}
/* v2: headline + description (was a single bold line). Headline carries the
   card in the display serif; description drops to a lighter weight/opacity
   body line underneath, per the "restructure into headline + description"
   copy update. */
.outcome-card__text{display:flex;flex-direction:column;gap:5px;}
.outcome-card__title{font:700 18px var(--font-d);color:var(--paper);margin:0;line-height:1.25;}
.outcome-card__text p{font:500 14px var(--font-s);color:rgba(247,242,232,.68);margin:0;line-height:1.5;}
@media (max-width:520px){
  .outcome-card{padding:20px;gap:14px;}
  .outcome-card__title{font-size:17px;}
}

/* ---------- testimonial grid: was an infinite auto-scrolling marquee with
   an edge mask-fade, but with only three real quotes looped to fill the
   track, the fade mostly just cut cards off mid-sentence at the container
   edge instead of reading as a smooth infinite scroll. A static three-up
   grid shows the same three quotes in full, all the time, with nothing
   fading or clipping. ---------- */
.testi-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
}
@media (max-width:900px){
  .testi-grid{grid-template-columns:1fr;}
}
.testi-card{
  display:flex;flex-direction:column;gap:16px;padding:36px;
}
/* testimonial cards are always a parchment card floating on whatever backdrop
   they sit on (dark topo section or evergreen seats/quote panel) — never the
   dark-mode-default translucent panel, since their text colors (evergreen
   quote, ink name) are set for a light surface */
.testi-card.card{background:var(--card);border-color:var(--hair);}
.testi-card.card:hover{background:var(--card);border-color:var(--hair);}
.testi-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin:-8px -8px 0 0;}
.testi-card__photo{height:96px;width:auto;object-fit:contain;flex-shrink:0;margin:-14px -10px 0 0;}
.testi-card__quote-mark{
  display:block;font-family:var(--font-d);font-style:normal;font-weight:700;
  font-size:64px;line-height:.6;color:var(--evergreen);opacity:.9;flex-shrink:0;
}
.testi-card__quote{font-family:var(--font-d);font-size:18px;color:var(--evergreen);line-height:1.45;margin:0;}
.testi-card__name{font:700 14px var(--font-s);color:var(--ink);margin:0;}
.testi-card__name span{font-weight:500;color:var(--muted);}
@media (max-width:640px){
  .testi-card{padding:28px;gap:12px;}
  .testi-card__quote{font-size:16px;}
  .testi-card__photo{height:76px;}
}

/* ---------- scrolling logo marquee ---------- */
.logo-marquee{
  overflow:hidden;position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.logo-marquee-track{
  display:flex;align-items:center;gap:72px;width:max-content;
  animation:logoScroll 56s linear infinite;
}
.logo-marquee-track img{flex-shrink:0;opacity:.85;filter:grayscale(12%);}
.logo-marquee-track .logo-text{
  flex-shrink:0;white-space:nowrap;
  font:800 22px var(--font-s);letter-spacing:.01em;
  color:#fff;opacity:.6;
}
@keyframes logoScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-25%);}
}
@media (prefers-reduced-motion:reduce){
  .logo-marquee-track{animation:none;}
}

/* ---------- cards & grids: dark-mode default is the translucent
   parchment panel, per Topo Frontier. Panels never take a drop shadow
   on dark; separation comes from the sage hairline only. ---------- */
.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--r-md);padding:36px;}
.card-raised{box-shadow:none;}
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  .hero-dark,.cta-dark{padding:64px 0;}
}

.chip{
  display:inline-flex;padding:5px 13px;border-radius:var(--r-pill);
  font:500 12.5px var(--font-s);border:1px solid var(--hair-dark);color:var(--light-sage);
  width:fit-content;
}
.meta{font-size:13px;color:var(--muted);}
.measure{max-width:66ch;}

/* feature rows with a check icon */
.feat{display:flex;gap:12px;align-items:flex-start;}
.feat svg{flex-shrink:0;margin-top:3px;}
.feat p{font-size:15px;}

/* two-column split */
.split{display:flex;gap:64px;align-items:center;}
.split.reverse{flex-direction:row-reverse;}
@media (max-width:900px){
  .split,.split.reverse{flex-direction:column;gap:32px;}
}

/* responsive type helpers */
h1.display{font-size:clamp(2.2rem,5vw,3.6rem);}
h1.display-lg{font-size:clamp(2.6rem,6vw,4.2rem);}
h2.display{font-size:clamp(1.6rem,3.4vw,2.2rem);}

/* ---------- lemhi-hero-v4 (homepage hero, pasted component) ---------- */
  .lemhi-hero-v4,
  .lemhi-hero-v4 * { box-sizing: border-box; }
  .lemhi-hero-v4 {
    --lemhi-ink: #12130f;
    --lemhi-dark: #0F2418;
    --lemhi-evergreen: #295a42;
    --lemhi-balanced: #3E7A5C;
    --lemhi-sage: #6F9F84;
    --lemhi-light-sage: #9FBFAE;
    --lemhi-parchment: #f7f2e8;
    --lemhi-yellow: #E6C96A;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: clamp(780px, 92svh, 940px);
    color: var(--lemhi-parchment);
    background: #061e15;
  }
  .lemhi-hero-v4__base,
  .lemhi-hero-v4__topo,
  .lemhi-hero-v4__glow,
  .lemhi-hero-v4__route {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .lemhi-hero-v4__base {
    z-index: 0;
    /* Was the darkest gradient on the page (145deg dark-deep->dark->dark-lift) --
       now uses the same recipe as .dark-continuum below (165deg dark->dark-lift
       ->evergreen), so the page opens on the brighter, more topo-forward green
       instead of the darkest one. .dark-continuum has been swapped the other
       way (now var(--dark-gradient), same as the campfire CTA), so the
       page reads dark-continuum-bright -> mountains -> dark-continuum-dark
       bleeding straight into the campfire, instead of ending on a bright
       green right before the darkest section on the page. */
    background:
      radial-gradient(circle at 14% 18%, rgba(79,174,122,0.18), transparent 32%),
      radial-gradient(circle at 82% 70%, rgba(111,159,132,0.13), transparent 36%),
      linear-gradient(165deg, var(--dark) 0%, var(--dark-lift) 45%, var(--evergreen) 100%);
  }
  .lemhi-hero-v4__topo {
    inset: -18%;
    width: auto;
    height: auto;
    z-index: 1;
    background-repeat: repeat;
    background-size: 470px 470px;
    will-change: background-position, opacity;
  }
  .lemhi-hero-v4__topo--primary {
    opacity: 0.5;
    background-image: url("../img/topo.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: lemhiHeroTopoDriftA 26s linear infinite alternate;
  }
  .lemhi-hero-v4__topo--secondary {
    display: none;
  }
  .lemhi-hero-v4__glow {
    z-index: 2;
    background:
      linear-gradient(90deg, rgba(6,30,21,0.92) 0%, rgba(6,30,21,0.74) 39%, rgba(6,30,21,0.24) 68%, rgba(6,30,21,0.65) 100%),
      radial-gradient(circle at 69% 43%, rgba(230,201,106,0.13), transparent 26%);
  }
  .lemhi-hero-v4__route {
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0.58;
  }
  .lemhi-hero-v4__route path {
    fill: none;
    stroke: rgba(230,201,106,0.58);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 0.06 0.038;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 10px rgba(230,201,106,0.18));
    animation: lemhiHeroRoute 16s linear infinite;
  }
  .lemhi-hero-v4__inner {
    position: relative;
    z-index: 5;
    width: min(100%, 1280px);
    min-height: clamp(720px, 88svh, 880px);
    margin: 0 auto;
    padding: clamp(120px, 14vh, 170px) clamp(22px, 4vw, 54px) clamp(64px, 8vh, 96px);
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.04fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
  }
  .lemhi-hero-v4__copy {
    max-width: 760px;
  }
  .lemhi-hero-v4__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    font-family: "DM Sans", Inter, Arial, sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247,242,232,0.76);
  }
  .lemhi-hero-v4__eyebrow::before {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    background: rgba(230,201,106,0.68);
  }
  .lemhi-hero-v4__headline {
    margin: 0;
    max-width: 620px;
    font-family: "EB Garamond", Garamond, Georgia, serif;
    font-size: clamp(2.35rem, 4.15vw, 4.65rem);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -0.042em;
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--lemhi-parchment);
  }
  .lemhi-hero-v4__headline span {
    color: var(--lemhi-yellow);
  }
  .lemhi-hero-v4__subhead {
    max-width: 620px;
    margin: 28px 0 0;
    font-family: "DM Sans", Inter, Arial, sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.62;
    color: rgba(247,242,232,0.82);
  }
  .lemhi-hero-v4__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
  }
  .lemhi-hero-v4__primary,
  .lemhi-hero-v4__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 12px;
    font-family: "DM Sans", Inter, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
  }
  .lemhi-hero-v4__primary {
    gap: 10px;
    color: var(--lemhi-parchment);
    background: var(--lemhi-evergreen);
    border: 1px solid var(--lemhi-evergreen);
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
  }
  .lemhi-hero-v4__primary:hover {
    transform: translateY(-2px) scale(1.035);
    background: #32684d;
    border-color: #32684d;
    box-shadow: 0 18px 34px rgba(0,0,0,0.28);
  }
  .lemhi-hero-v4__arrow {
    display: inline-block;
    transition: transform 220ms ease;
  }
  .lemhi-hero-v4__primary:hover .lemhi-hero-v4__arrow {
    transform: translateX(6px);
  }
  .lemhi-hero-v4__secondary {
    color: rgba(247,242,232,0.84);
    border: 1px solid rgba(247,242,232,0.16);
    background: rgba(247,242,232,0.04);
    backdrop-filter: blur(10px);
  }
  .lemhi-hero-v4__secondary:hover {
    transform: translateY(-2px);
    color: var(--lemhi-yellow);
    border-color: rgba(230,201,106,0.4);
  }
  .lemhi-hero-v4__visual {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lemhi-hero-v4__visual-halo {
    display: none;
  }
  .lemhi-hero-v4__product-shell {
    position: relative;
    width: min(100%, 760px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
    animation: none;
  }
  .lemhi-hero-v4__product-topbar {
    display: none;
  }
  .lemhi-hero-v4__product-topbar span {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: rgba(247,242,232,0.48);
  }
  .lemhi-hero-v4__product-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.28));
  }
  .lemhi-hero-v4__chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 13px;
    border: 1px solid rgba(247,242,232,0.16);
    border-radius: 12px;
    background: rgba(15,36,24,0.68);
    color: rgba(247,242,232,0.9);
    backdrop-filter: blur(14px);
    font-family: "DM Sans", Inter, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  }
  .lemhi-hero-v4__chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--lemhi-yellow);
    box-shadow: 0 0 16px rgba(230,201,106,0.5);
  }
  .lemhi-hero-v4__chip--one { top: 9%; left: 3%; animation: lemhiChipFloat 6.8s ease-in-out infinite; }
  .lemhi-hero-v4__chip--two { right: 0%; top: 52%; animation: lemhiChipFloat 7.2s ease-in-out .6s infinite; }
  .lemhi-hero-v4__chip--three { left: 7%; bottom: 9%; animation: lemhiChipFloat 7.6s ease-in-out 1.1s infinite; }
  @keyframes lemhiHeroTopoDriftA {
    0% { background-position: 50% 50%; }
    100% { background-position: calc(50% - 54px) calc(50% - 32px); }
  }
  @keyframes lemhiHeroTopoDriftB {
    0% { background-position: 48% 54%; opacity: 0.18; }
    100% { background-position: calc(48% + 36px) calc(54% + 28px); opacity: 0.34; }
  }
  @keyframes lemhiHeroRoute {
    0% { stroke-dashoffset: 1; opacity: 0.2; }
    22% { opacity: 0.7; }
    100% { stroke-dashoffset: 0; opacity: 0.2; }
  }
  @keyframes lemhiHeroFloat {
    0%, 100% { transform: perspective(1000px) rotateY(-7deg) rotateX(3deg) translateY(0); }
    50% { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-12px); }
  }
  @keyframes lemhiChipFloat {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-8px,0); }
  }
  @media (max-width: 1050px) {
    .lemhi-hero-v4 { min-height: auto; }
    .lemhi-hero-v4__inner {
      grid-template-columns: 1fr;
      min-height: auto;
      padding-top: 150px;
    }
    .lemhi-hero-v4__copy { max-width: 850px; }
    .lemhi-hero-v4__visual { min-height: 500px; }
    .lemhi-hero-v4__glow {
      background:
        linear-gradient(to bottom, rgba(6,30,21,0.78) 0%, rgba(6,30,21,0.42) 50%, rgba(6,30,21,0.76) 100%),
        radial-gradient(circle at 50% 70%, rgba(230,201,106,0.13), transparent 36%);
    }
  }
  @media (max-width: 720px) {
    .lemhi-hero-v4__inner { padding: 136px 20px 82px; }
    .lemhi-hero-v4__headline { font-size: clamp(2.35rem, 10.5vw, 3.55rem); line-height: 1.02; }
    .lemhi-hero-v4__actions { width: 100%; flex-direction: column; }
    .lemhi-hero-v4__primary,
    .lemhi-hero-v4__secondary { width: 100%; }
    .lemhi-hero-v4__visual { min-height: 400px; }
    .lemhi-hero-v4__product-shell { width: min(96%, 520px); transform: none; border-radius: 0; }
    .lemhi-hero-v4__product-topbar { display: none; }
    .lemhi-hero-v4__chip { display: none; }
    .lemhi-hero-v4__topo { background-size: 360px 360px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lemhi-hero-v4__topo,
    .lemhi-hero-v4__route path,
    .lemhi-hero-v4__product-shell,
    .lemhi-hero-v4__chip { animation: none !important; }
    .lemhi-hero-v4__primary,
    .lemhi-hero-v4__secondary,
    .lemhi-hero-v4__arrow { transition: none !important; }
  }
  /* ---------------------------------------------------------------------------
     v5 PATCH: Crimson Pro headline, smoother green overlay, mobile overflow fix
     ---------------------------------------------------------------------------
     Notes:
     - Crimson Pro replaces EB Garamond only for the serif hero headline.
     - Topo layers are constrained to the hero bounds to prevent mobile side-scroll.
     - The glow layer is rebuilt with soft gradients to remove the hard cutoff.
  */
  .lemhi-hero-v4 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip !important;
    contain: layout paint;
  }
  @supports not (overflow: clip) {
    .lemhi-hero-v4 {
      overflow-x: hidden !important;
    }
  }
  .lemhi-hero-v4,
  .lemhi-hero-v4 * {
    min-width: 0;
  }
  .lemhi-hero-v4__base,
  .lemhi-hero-v4__topo,
  .lemhi-hero-v4__glow,
  .lemhi-hero-v4__route {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .lemhi-hero-v4__topo {
    inset: 0 !important;
    height: 100% !important;
    transform: scale(1.08);
    transform-origin: center;
    background-position: center center;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,0.90) 14%,
      #000 30%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,0.90) 14%,
      #000 30%,
      #000 100%
    );
  }
  .lemhi-hero-v4__topo--primary {
    opacity: 0.58;
  }
  .lemhi-hero-v4__topo--secondary {
    opacity: 0.20;
  }
  .lemhi-hero-v4__glow {
    z-index: 2;
    background:
      radial-gradient(ellipse at 17% 16%, rgba(62,122,92,0.30) 0%, rgba(62,122,92,0.12) 34%, transparent 62%),
      radial-gradient(ellipse at 74% 38%, rgba(230,201,106,0.10) 0%, rgba(230,201,106,0.04) 28%, transparent 56%),
      radial-gradient(ellipse at 58% 92%, rgba(4,19,13,0.42) 0%, transparent 62%),
      linear-gradient(
        115deg,
        rgba(3,21,14,0.72) 0%,
        rgba(6,30,21,0.54) 34%,
        rgba(6,30,21,0.34) 61%,
        rgba(6,30,21,0.58) 100%
      ) !important;
  }
  .lemhi-hero-v4::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(6,30,21,0.22) 0%,
        rgba(6,30,21,0.06) 22%,
        rgba(6,30,21,0.00) 44%,
        rgba(6,30,21,0.10) 100%
      );
  }
  .lemhi-hero-v4__inner {
    width: min(100%, 1280px);
    max-width: 100%;
  }
  .lemhi-hero-v4__copy,
  .lemhi-hero-v4__visual,
  .lemhi-hero-v4__product-shell,
  .lemhi-hero-v4__product-img {
    max-width: 100%;
  }
  .lemhi-hero-v4__headline {
    font-family: "Crimson Pro", Georgia, "Times New Roman", serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.018em !important;
    line-height: 0.98 !important;
    font-kerning: normal;
    font-optical-sizing: auto;
    text-rendering: geometricPrecision;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  }
  @media (max-width: 1050px) {
    .lemhi-hero-v4__glow {
      background:
        radial-gradient(ellipse at 35% 14%, rgba(62,122,92,0.22) 0%, rgba(62,122,92,0.08) 40%, transparent 68%),
        radial-gradient(ellipse at 55% 76%, rgba(230,201,106,0.11) 0%, transparent 46%),
        linear-gradient(
          to bottom,
          rgba(6,30,21,0.64) 0%,
          rgba(6,30,21,0.42) 32%,
          rgba(6,30,21,0.34) 62%,
          rgba(6,30,21,0.62) 100%
        ) !important;
    }
  }
  @media (max-width: 720px) {
    .lemhi-hero-v4 {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      min-height: auto;
    }
    .lemhi-hero-v4__inner {
      width: 100% !important;
      max-width: 100% !important;
      padding: 132px 20px 76px !important;
      overflow: hidden;
    }
    .lemhi-hero-v4__headline {
      font-size: clamp(2.5rem, 11vw, 3.55rem) !important;
      line-height: 0.98 !important;
      letter-spacing: -0.014em !important;
      max-width: 10.5ch;
    }
    .lemhi-hero-v4__subhead {
      max-width: 100%;
    }
    .lemhi-hero-v4__visual {
      width: 100%;
      max-width: 100%;
      min-height: 390px;
      overflow: hidden;
    }
    .lemhi-hero-v4__product-shell {
      width: min(100%, 520px) !important;
      max-width: 100% !important;
      transform: none !important;
    }
    .lemhi-hero-v4__route {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden;
    }
    .lemhi-hero-v4__topo {
      background-size: 360px 360px;
      transform: scale(1.04);
    }
  }
  /* ---------------------------------------------------------------------------
     v6 PATCH: restore desktop full-bleed while preserving mobile overflow safety
     ---------------------------------------------------------------------------
     Duda sometimes wraps HTML widgets in a constrained container. Desktop needs the
     classic full-bleed breakout. Mobile keeps the safer 100% width to prevent side
     scroll.
  */
  @media (min-width: 721px) {
    .lemhi-hero-v4 {
      width: 100vw !important;
      max-width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      overflow-x: clip !important;
    }
    .lemhi-hero-v4__base,
    .lemhi-hero-v4__topo,
    .lemhi-hero-v4__glow,
    .lemhi-hero-v4__route {
      width: 100vw !important;
      max-width: 100vw !important;
    }
    .lemhi-hero-v4__inner {
      width: min(100%, 1280px) !important;
      max-width: 1280px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
  @media (max-width: 720px) {
    .lemhi-hero-v4 {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      overflow-x: hidden !important;
    }
    .lemhi-hero-v4__base,
    .lemhi-hero-v4__topo,
    .lemhi-hero-v4__glow,
    .lemhi-hero-v4__route {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

/* ==========================================================================
   Refinements: visible hero topo, unified dark-section texture, hover
   interactivity, and scroll-aware transparent nav.
   ========================================================================== */

/* ---------- hero topo: swap in the same proven texture used site-wide ----------
   The pasted component's own base64 textures read as almost-flat at any opacity
   (too low-contrast against the dark gradient). topo.svg is the asset already
   working well on every other dark section (hero-dark / cta-dark / footer), so
   the hero now uses it too, single-layer, for one consistent look site-wide. */
.lemhi-hero-v4__topo--secondary{ display:none !important; }
.lemhi-hero-v4__topo--primary{
  background-image:url("../img/topo.svg") !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  opacity:.78 !important;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 2%, #000 100%) !important;
  mask-image:linear-gradient(to bottom, transparent 0%, #000 2%, #000 100%) !important;
}
.lemhi-hero-v4__glow{
  background:
    radial-gradient(ellipse at 17% 16%, rgba(62,122,92,0.18) 0%, rgba(62,122,92,0.07) 34%, transparent 62%),
    radial-gradient(ellipse at 74% 38%, rgba(230,201,106,0.07) 0%, transparent 52%),
    linear-gradient(
      115deg,
      rgba(3,21,14,0.52) 0%,
      rgba(6,30,21,0.32) 34%,
      rgba(6,30,21,0.14) 61%,
      rgba(6,30,21,0.38) 100%
    ) !important;
}
@media (max-width: 1050px){
  .lemhi-hero-v4__glow{
    background:
      radial-gradient(ellipse at 35% 14%, rgba(62,122,92,0.16) 0%, rgba(62,122,92,0.06) 40%, transparent 68%),
      radial-gradient(ellipse at 55% 76%, rgba(230,201,106,0.09) 0%, transparent 46%),
      linear-gradient(
        to bottom,
        rgba(6,30,21,0.5) 0%,
        rgba(6,30,21,0.28) 32%,
        rgba(6,30,21,0.22) 62%,
        rgba(6,30,21,0.48) 100%
      ) !important;
  }
}

/* ---------- button interactivity: glow + lift on hover ---------- */
.btn{transition:background .28s ease, transform .28s ease, color .28s ease, box-shadow .28s ease, border-color .28s ease;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.32), 0 0 26px rgba(230,201,106,.28);}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.24), 0 0 18px rgba(159,191,174,.22);}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.32), 0 0 26px rgba(230,201,106,.28);}
.btn-outline-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.24), 0 0 18px rgba(159,191,174,.22);}
/* parchment exception: light-sage-bg/punch-text (the dark-mode default
   hover) reads as pale-green-on-pale-yellow on a light/parchment
   background -- low-contrast, blends together, hard to read. Swap to a
   dark evergreen fill with parchment text instead, so the hover is a
   clear, legible state shift rather than a wash of near-matching pastels. */
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .btn-primary:hover,
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .btn-dark:hover{
  background:var(--dark);color:var(--paper);
  box-shadow:0 14px 30px rgba(15,36,24,.30), 0 0 0 6px rgba(15,36,24,.10);
}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .btn-primary:hover svg,
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .btn-dark:hover svg{stroke:var(--paper);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .btn-ghost:hover{
  background:rgba(41,90,66,.08);color:var(--evergreen);box-shadow:none;transform:translateY(-2px);
}

.lemhi-hero-v4__primary:hover{
  color:var(--lemhi-yellow);
  box-shadow:0 18px 34px rgba(0,0,0,0.28), 0 0 28px rgba(230,201,106,.22);
}
.lemhi-hero-v4__secondary:hover{
  box-shadow:0 10px 26px rgba(0,0,0,.22), 0 0 18px rgba(230,201,106,.16);
}

/* ---------- card interactivity: gentle pop on hover. Dark-mode panels
   never take a drop shadow (Topo Frontier); separation on hover comes
   from a lift + brighter hairline only. ---------- */
.card{transition:transform .28s ease, border-color .28s ease, background .28s ease;}
.card:hover{transform:translateY(-6px);border-color:rgba(159,191,174,.3);background:var(--panel-lift);}
.card-raised:hover{transform:translateY(-6px);}
/* the parchment exception (torn-edge break) and the parchment testimonial
   cards floating on green are light cards on a contrasting backdrop —
   an elevation shadow is the correct, previously-approved read there */
.testi-card.card-raised{box-shadow:var(--shadow-raised);}
.testi-card.card-raised:hover{box-shadow:0 26px 52px rgba(15,36,24,.20);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .card:hover{
  box-shadow:0 20px 42px rgba(15,36,24,.14);border-color:transparent;background:var(--card);
}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .card-raised{box-shadow:var(--shadow-raised);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .card-raised:hover{box-shadow:0 26px 52px rgba(15,36,24,.20);}

/* ---------- nav: transparent at top, solid once scrolled ---------- */
.nav{
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.nav--scrolled{
  background:var(--paper);
  border-bottom-color:var(--hair);
  box-shadow:0 4px 20px rgba(15,36,24,.08);
}
/* pages whose hero sits immediately under the nav need light nav content
   until the nav picks up its solid background */
body.has-dark-hero .nav:not(.nav--scrolled) .nav-logo img{
  filter:brightness(0) invert(1);
  opacity:.94;
}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-links a{color:rgba(247,242,232,.88);}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-links a[aria-current="page"]{color:var(--punch);}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-right a:not(.btn){color:rgba(247,242,232,.88);}
body.has-dark-hero .nav:not(.nav--scrolled) .btn-primary{
  background:rgba(247,242,232,.12);
  color:var(--paper);
  border:1.5px solid rgba(247,242,232,.35);
  backdrop-filter:blur(6px);
}
body.has-dark-hero .nav:not(.nav--scrolled) .btn-primary:hover{
  background:rgba(247,242,232,.2);
  color:var(--punch);
  box-shadow:0 10px 24px rgba(0,0,0,.24), 0 0 18px rgba(230,201,106,.22);
}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-toggle{border-color:rgba(247,242,232,.4);}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-toggle svg{stroke:#F7F2E8;}
/* the mobile nav-links panel is always a solid paper-colored overlay (see
   its @media(max-width:980px) rule below), regardless of has-dark-hero or
   scroll state -- so once it's open, its own links need to stay ink-dark
   even on a dark-hero page that hasn't scrolled yet, where the pale
   on-dark link color above would otherwise paint near-white text on that
   same near-white panel. */
@media (max-width:980px){
  body.has-dark-hero .nav .nav-links.open a{color:var(--ink);}
  body.has-dark-hero .nav .nav-links.open a[aria-current="page"]{color:var(--evergreen);font-weight:700;}
}
@media (prefers-reduced-motion:reduce){
  .btn,.card,.nav{transition:none;}
}

/* ---------- pull dark hero up under the transparent nav (desktop nav = 84px) ----------
   Without this, a dark hero sits in normal flow BELOW the nav's own box, so the
   transparent nav reveals the plain body background instead of the hero's own
   gradient -- and since body{background:var(--dark-gradient)} and the hero paint
   that same 145deg gradient independently, each restarting from its own box's
   0%, the two gradients land at slightly different colors right at the nav/hero
   seam (visible as a thin horizontal band). Pulling the hero up to start at the
   true page top (under the transparent nav) makes it one continuous gradient
   with no second box boundary to seam against. .hero-photo (About page team
   hero) was missing from this list -- that's why its nav read as a "green bar"
   instead of transparent like the other dark-hero pages; it's the same fix as
   .hero-dark, just with .hero-photo's own 104px top padding compensated instead
   of .hero-dark's 96px/64px. */
body.has-dark-hero header.nav + .lemhi-hero-v4,
body.has-dark-hero header.nav + .hero-dark,
body.has-dark-hero header.nav + .hero-photo{
  margin-top:-84px;
}
body.has-dark-hero header.nav + .hero-dark{
  padding-top:calc(96px + 84px);
}
body.has-dark-hero header.nav + .hero-photo{
  padding-top:calc(104px + 84px);
}
@media (max-width:900px){
  body.has-dark-hero header.nav + .hero-dark{padding-top:calc(64px + 84px);}
}

/* ---------- parchment cutout panel: torn-edge parchment break in a dark
   run of sections. The one place orange (.eyebrow default) is allowed to
   sit, since it's parchment underneath it. ---------- */
.parchment-cutout{
  position:relative;background:var(--paper);color:var(--ink);
  padding:72px 0 78px;
  filter:
    drop-shadow(0 6px 12px rgba(3,21,14,.42))
    drop-shadow(0 26px 48px rgba(3,21,14,.38));
  clip-path:polygon(
    0% 3%,3% 1%,7% 4%,11% 0%,16% 3%,21% 1%,26% 4%,31% 0%,36% 3%,41% 1%,46% 4%,51% 0%,56% 3%,61% 1%,66% 4%,71% 0%,76% 3%,81% 1%,86% 4%,91% 0%,96% 3%,100% 1%,
    100% 97%,96% 100%,91% 96%,86% 99%,81% 96%,76% 100%,71% 97%,66% 100%,61% 96%,56% 99%,51% 96%,46% 100%,41% 97%,36% 100%,31% 96%,26% 99%,21% 96%,16% 100%,11% 97%,7% 100%,3% 96%,0% 99%
  );
}
.parchment-cutout--quote{text-align:center;}
.parchment-cutout--quote .wrap{max-width:700px;}
.cutout-quote{
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(22px,3.6vw,32px);line-height:1.35;color:var(--evergreen);text-wrap:balance;
  margin-top:18px;
}
.cutout-quote cite{
  display:block;font:600 12px var(--font-s);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:20px;
}

/* ---------- quote card: a parchment break sized for an in-column pull-quote
   or blockquote (article body, testimonial aside) — same family as
   .parchment-cutout but a plain rounded panel rather than a full-bleed torn
   break, for places a torn edge would be too heavy. ---------- */
.quote-card{
  position:relative;background:var(--card);color:var(--ink);
  border-radius:var(--r-md);
  border-left:4px solid var(--evergreen);
  padding:28px 32px;
  margin:0;
  filter:drop-shadow(0 14px 30px rgba(3,21,14,.28));
}
.quote-card p{
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(18px,2.4vw,21px);line-height:1.4;color:var(--evergreen);margin:0;
}
.quote-card footer,.quote-card cite{
  display:block;margin-top:14px;font:600 13px var(--font-s);font-style:normal;
  color:var(--muted);
}

/* ==========================================================================
   Panel system — ten deliberately distinct content-block treatments so a
   page reads with real variety instead of one card style repeated in every
   grid. Pick the panel by what the content IS (a stat, a risk, a score, a
   list, a single call-out), not by rotating through them for decoration.
   ========================================================================== */

/* 5 — Topo Relief Tile: a stat/number callout with the topo contour texture
   baked directly into the tile (not just ambient at the section level), so
   the texture reads as a material this specific block is cut from. Exactly
   one tile per group may use --panel-topo--punch (the yellow number); the
   rest stay white, per the one-punchline rule. */
.panel-topo{
  position:relative;overflow:hidden;
  background:
    linear-gradient(165deg, rgba(3,21,14,.90) 0%, rgba(15,36,24,.93) 100%),
    url("../img/topo.svg");
  background-size:cover;background-position:center;
  border:1px solid var(--hair-dark);border-radius:var(--r-md);
  padding:28px;transition:transform .28s ease, border-color .28s ease;
}
.panel-topo:hover{transform:translateY(-5px);border-color:rgba(159,191,174,.32);}
.panel-topo__num{font:700 34px var(--font-d);color:var(--text-1);display:block;}
.panel-topo--punch .panel-topo__num{color:var(--punch);}
.panel-topo__label{font:700 14px var(--font-s);color:var(--text-2);margin-top:4px;}
.panel-topo__body{font-size:13.5px;color:var(--muted);margin-top:8px;}

/* 6 — Ghost Outline: no fill at all, just a hairline border — the airiest
   panel in the system, for a lightweight grouped list next to heavier
   filled panels (contrast through absence, not another texture). */
.panel-ghost{
  background:transparent;border:1.5px solid var(--panel-border);
  border-radius:var(--r-md);padding:32px;
  transition:border-color .28s ease, background .28s ease;
}
.panel-ghost:hover{border-color:rgba(159,191,174,.4);background:rgba(247,242,232,.02);}

/* 7 — Rust Ledger: the first real use of the Rust Rose status color —
   reserved for objections, risks, and "what could go wrong" call-outs.
   Never used for structure or data, only this one register. */
.panel-rust{
  background:rgba(201,106,94,.07);
  border:1px solid rgba(201,106,94,.26);border-left:3px solid var(--rust);
  border-radius:var(--r-md);padding:28px;
  transition:transform .28s ease, background .28s ease;
}
.panel-rust:hover{transform:translateY(-4px);background:rgba(201,106,94,.1);}
.panel-rust__label{
  font:700 12px var(--font-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--rust-text);
}

/* 8 — Compass Dial: a circular score/percentage read-out — the one panel
   built around a ring instead of a rectangle, echoing the readiness-score
   dials in the product itself. */
.panel-dial{
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:var(--r-md);padding:32px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
}
.panel-dial__ringwrap{position:relative;width:132px;height:132px;}
.panel-dial__ring{width:100%;height:100%;transform:rotate(-90deg);}
.panel-dial__track{fill:none;stroke:rgba(159,191,174,.16);stroke-width:8;}
.panel-dial__progress{
  fill:none;stroke:var(--punch);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:326.7;
  stroke-dashoffset:calc(326.7 - (326.7 * var(--pct, 70) / 100));
}
.panel-dial__value{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 30px var(--font-d);color:var(--text-1);
}
.panel-dial__label{font:700 14px var(--font-s);color:var(--text-2);}
.panel-dial__body{font-size:13.5px;color:var(--muted);}

/* 9 — Waypoint Stripe: a flat, undivided list — rows separated by a
   hairline with a small route-dot marker, no box around the group at all.
   For FAQs and sequences where the content should read as one continuous
   ledger rather than N separate cards. */
.panel-stripe__row{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 0;border-bottom:1px solid var(--hair-dark);
}
.panel-stripe__row:last-child{border-bottom:none;}
.panel-stripe__dot{
  width:8px;height:8px;border-radius:50%;background:var(--punch);
  margin-top:8px;flex-shrink:0;box-shadow:0 0 6px rgba(230,201,106,.5);
}
.panel-stripe__row h3{font-size:17px;color:var(--text-2);font-family:var(--font-s);font-weight:700;}
.panel-stripe__row p{font-size:15px;color:var(--muted);margin-top:8px;}

/* 10 — Solid Flag: a fully opaque evergreen block, sharper radius, a real
   drop shadow — the one panel allowed both a solid fill and a shadow,
   because it's a deliberate anchor planted inside a grid of lighter
   panels, not another translucent surface. Use once per grid, at most. */
.panel-flag{
  position:relative;background:var(--evergreen);color:var(--paper);
  border-radius:var(--r-sm);padding:32px;
  box-shadow:0 20px 40px rgba(3,21,14,.38);
  transition:transform .28s ease, box-shadow .28s ease;
}
.panel-flag:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(3,21,14,.44);}
.panel-flag h3{color:var(--paper);}
.panel-flag p{color:rgba(247,242,232,.82);}
.panel-flag svg{color:var(--paper);}

/* ---------- Trailblazer: a scroll-linked dot tracing a lit trail down the
   left margin, drawn from the exact approved Lemhi Trail vector path (see
   trailblazer.js — a hidden reference copy of that same path supplies all
   geometry; the visible stroke and the dot's position are both derived
   from it every frame, so they can never drift apart).

   The dot IS the trailblazer: the trail exists only BEHIND it, never
   ahead. There is deliberately no always-visible "preview" of the route
   ahead of the dot, and — after measuring the alternative and finding it
   unreliable — the reveal is NOT done with stroke-dasharray/dashoffset:
   this rail stretches a 226x1372 viewBox into a ~34px-wide box via
   preserveAspectRatio="none", and combined with the non-scaling-stroke
   below (needed to keep the line's width constant on screen), a dashed
   reveal is computed in a different coordinate space than
   getTotalLength() reports, so it visibly overshoots the dot in both
   directions. Instead, .trailblazer__progress's own `d` attribute is
   rebuilt on every update to contain only the path's points up to the
   dot's current position — the element itself simply has no coordinate
   past that point to draw. The dot sits later in paint order (and above
   on z-index) than the line, so the drawn line terminates underneath the
   dot's center rather than poking out past it.

   Wide-viewport only — there's no margin to hold it below 1440px, so it
   simply doesn't render there (see trailblazer.js). ---------- */
.trailblazer{
  position:fixed;left:22px;top:0;bottom:0;width:34px;height:100vh;
  z-index:60;pointer-events:none;
}
.trailblazer__svg{width:100%;height:100%;display:block;overflow:visible;z-index:1;}
.trailblazer__reference{fill:none;stroke:none;}
.trailblazer__progress{
  position:relative;z-index:1;
  fill:none;stroke:var(--punch);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(230,201,106,.6));
}
.trailblazer__dot{
  position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  z-index:2;
  border-radius:50%;background:var(--punch);
  box-shadow:0 0 0 4px rgba(230,201,106,.16),0 0 14px 2px rgba(230,201,106,.6);
  transition:left .05s linear,top .05s linear;
}
@media (max-width:1439px){
  .trailblazer{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .trailblazer__dot{transition:none;}
}

/* ---------- campfire CTA: replaces the route-line treatment on the
   homepage's final "join the expedition" panel with an animated fire.
   Headline/CTA fade in through the rising smoke as it scrolls into view. ---------- */
.cta-dark--campfire{padding-bottom:64px;position:relative;}
/* The shared .cta-dark background (var(--dark-gradient), 145deg) restarts
   fresh at this section's own top-left corner, and because the angle isn't
   perfectly vertical, its top EDGE isn't one flat color -- it drifts from
   dark-deep on the left toward dark partway across on the right. Right
   above it, the testimonial section (.dark-continuum) now tapers down to
   a flat dark-deep across its full width (see .dark-continuum's own
   comment). Flat color meeting a slightly-varying one still reads as a
   seam on the right-hand side of the page. Give the homepage's campfire
   section its own pure-vertical (no horizontal drift) gradient instead,
   scoped to .campfire-ground (a homepage-only class alongside the shared
   .cta-dark--campfire) so every other page's campfire CTA keeps the
   shared look: starts at the exact same dark-deep the testimonial section
   just ended on, brightens slightly through the middle (mostly masked by
   the fire's own glow anyway), and settles back to dark-deep at the very
   bottom -- which is also exactly what the footer's own gradient opens
   on, so the fire section blends into both neighbors instead of just the
   one above. Also removes this section's own bottom padding (see further
   down) so the campfire graphic can sit flush on the true ground. */
.campfire-ground{
  background:linear-gradient(180deg, var(--dark-deep) 0%, var(--dark) 55%, var(--dark-deep) 100%);
  padding-bottom:0;
}
/* Background scene: a quiet mountain ridge and a single tent silhouette
   sitting low behind the fire, so the closing panel reads as a campsite
   rather than a flat color field. Kept low-contrast and out of the way
   of the text and flame above it. */
.cta-scene{position:absolute;left:0;right:0;bottom:0;height:220px;overflow:hidden;pointer-events:none;z-index:0;}
.cta-mountains{position:absolute;inset:0;width:100%;height:100%;}
.cta-tent{position:absolute;left:9%;bottom:14px;width:70px;height:auto;}
@media (max-width:700px){
  .cta-tent{left:4%;width:52px;}
}
/* Round 24: a very subtle bighorn on the home page's campfire scene,
   echoing the one on the About page's night CTA. Round 23 tried this as a
   CSS mask-image (recoloring the About page's near-black PNG on the fly)
   and it never rendered for Tim -- opened locally rather than through a
   server, that's exactly the kind of thing that can silently fail, and a
   failed mask paints nothing at all rather than falling back visibly. Now
   a plain <img> pointed at its own pre-recolored file
   (bighorn-silhouette-evergreen.png -- brand evergreen, alpha scaled down
   ~28%), same static-image technique the About page's bighorn already
   uses successfully, so there's no CSS feature this depends on beyond
   object-fit. Positioned on the right side of the scene (the tent already
   owns the left), with `bottom` set to land its feet on this page's own
   near mountain-layer ridge line at that x position (same ridge-slope
   math as the About page bighorn, recalculated for this page's different
   mountain path/viewBox). */
.cta-bighorn-silhouette-home{
  position:absolute;top:auto;right:14%;bottom:44px;
  width:64px;height:auto;
  z-index:1;
  pointer-events:none;
}
@media (max-width:700px){
  .cta-bighorn-silhouette-home{right:6%;width:42px;bottom:40px;}
}
.campfire{position:relative;height:190px;width:100%;margin-top:0;z-index:1;pointer-events:none;}
/* On the campfire CTA specifically (id-scoped further down), .campfire is
   pulled out of the flex .wrap and pinned to the section's own bottom
   edge instead -- so the logs sit flush on the "ground" established by
   .cta-scene's mountain silhouette (also bottom:0 of this section), and
   only come into view once the page has actually scrolled down to the
   bottom of the section, rather than floating mid-section next to the
   copy. See .campfire-ground below for the reserved space this needs
   above it. */
.campfire-smoke{position:absolute;bottom:140px;border-radius:50%;background:var(--muted);filter:blur(14px);opacity:0;animation:campfireSmokeRise 9s ease-in infinite;}
@keyframes campfireSmokeRise{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0;}
  12%{opacity:.24;}
  70%{opacity:.13;}
  100%{transform:translateY(-240px) translateX(18px) scale(1.6);opacity:0;}
}
.campfire-glow{
  /* radial-gradient(circle, ...) draws a true circle sized to the box's
     farthest corner; in this non-square box that circle's radius is much
     larger than the box is tall, so the box's own rectangular edge (not
     the gradient's own falloff) is what cuts the glow off -- reads as a
     flat, linear cut at the top rather than a soft radial fade. ellipse
     sizes the gradient to the box's actual aspect ratio instead, so it
     fades out smoothly before it ever reaches an edge. */
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:440px;height:210px;
  background:radial-gradient(ellipse, rgba(230,201,106,.32) 0%, rgba(230,201,106,.08) 55%, rgba(230,201,106,0) 75%);
  filter:blur(2px);
}
.campfire-flame{position:absolute;bottom:32px;left:50%;transform-origin:bottom center;animation:campfireFlicker 2.6s ease-in-out infinite;}
@keyframes campfireFlicker{
  0%,100%{transform:translateX(-50%) scaleY(1) scaleX(1) skewX(0deg);}
  30%{transform:translateX(-50%) scaleY(1.06) scaleX(.96) skewX(-1.5deg);}
  60%{transform:translateX(-50%) scaleY(.95) scaleX(1.04) skewX(1.5deg);}
}
.campfire-logs{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;}
@media (prefers-reduced-motion:reduce){
  .campfire-smoke,.campfire-flame{animation:none;}
}

/* ==========================================================================
   Campfire pass: replaces the wayfinding-route/waypoint-constellation motif
   with the world established in the Campfire Council concept — ambient
   embers drifting through every dark section, warm horizon light in the
   hero, and torn-parchment seams where the paper world meets the green.
   ========================================================================== */

/* ---------- ember field: ambient drifting embers, shared across the hero,
   the seats panel, and the campfire CTA. This is the signature that used
   to be a traveling route line / dot constellation. ---------- */
.ember-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.ember-particle{
  position:absolute;border-radius:50%;background:var(--punch);
  opacity:0;animation:emberDrift 7.5s ease-in infinite;
  box-shadow:0 0 7px rgba(230,201,106,.55);
}
@keyframes emberDrift{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:.7;}
  85%{opacity:.32;}
  100%{transform:translateY(-170px) translateX(12px);opacity:0;}
}
.ember-glow-soft{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74%;height:150%;
  background:radial-gradient(ellipse at center, rgba(230,201,106,.09) 0%, transparent 65%);
}
@media (prefers-reduced-motion:reduce){
  .ember-particle{animation:none;opacity:0;}
}

/* ---------- hero: warm horizon glow behind the drifting embers, replacing
   the old animated route path (z-index 3, same slot in the stack) ---------- */
.lemhi-hero-v4__embers{z-index:3;}
.lemhi-hero-v4__horizon-glow{
  position:absolute;left:50%;bottom:-10%;transform:translateX(-50%);
  width:132%;height:58%;
  background:radial-gradient(ellipse at 50% 100%, rgba(230,201,106,.16) 0%, rgba(230,201,106,.05) 38%, transparent 68%);
  pointer-events:none;
}
.lemhi-hero-v4__visual-halo--ember{
  display:block;
  position:absolute;inset:-8%;z-index:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(230,201,106,.14) 0%, rgba(230,201,106,.05) 40%, transparent 70%);
  pointer-events:none;
}

/* ---------- "as featured in" folded into the hero itself: one continuous
   canvas (same base/topo/glow/embers layers), instead of a second section
   with its own background stitched underneath. Sits in the same
   stacking slot as .lemhi-hero-v4__inner, just further down the flow.

   Clearance below the logos: the parchment section right after the hero
   (.torn-both) is pulled up over the hero by a fixed -128px negative
   margin, and its clip-path ridge can reach the full 128px at its tallest
   peaks — that overlap zone is fixed in px and does not shrink at any
   viewport width. padding-bottom here has to clear that 128px at every
   breakpoint (not just on average), so its clamp() floor is set well
   past it rather than left to shrink on short viewports; the logos
   themselves also sit slightly higher in the hero (tighter margin/padding
   above) so the extra room reads as breathing space below them, not just
   a taller hero. ---------- */
.lemhi-hero-v4__logos{
  position:relative;z-index:5;
  padding:0 clamp(22px,4vw,54px) clamp(210px,25vh,260px);
  width:min(100%,1280px);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:32px;
  border-top:1px solid rgba(247,242,232,.1);
  margin-top:clamp(16px,3vh,32px);
  padding-top:clamp(24px,4vh,40px);
}
.lemhi-hero-v4__logos .featured-label{
  font:500 13px var(--font-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--light-sage);white-space:nowrap;text-align:center;
}
@media (max-width:720px){
  .lemhi-hero-v4__logos{padding-left:20px;padding-right:20px;}
}

/* ---------- ridge parchment edges: the recurring "cutout" motif, traced
   from the approved Lemhi mountain-range line art (the client-provided
   reference silhouette) rather than a generic hand-torn-paper zigzag or a
   photo-derived approximation. Only parchment surfaces carry the ridge;
   the green/dark canvas underneath stays whole. Coordinates below are the
   exact traced line: one point sampled per column of the reference image
   (top/bottom of its stroke averaged, no smoothing filter applied), at
   300-point resolution. torn-bottom mirrors the same traced shape
   (y -> 100-y) rather than a second, separately-traced line.

   --ridge-depth controls how tall the notch band reads, IN ABSOLUTE PIXELS,
   regardless of the section's own (often content-driven, e.g. a stacked
   mobile card grid) rendered height. Every y-coordinate in the notch is
   expressed as calc(var(--ridge-depth) * <fixed ratio 0-1>) — i.e. a
   fraction of that fixed pixel band — instead of a plain %, which is what
   let the ridge scale with the section's total height previously. That
   coupling was the bug: a tall mobile section (long stacked content) made
   the same 13.22% notch band balloon to far more than the 128px the
   negative margin below actually pulls over the neighbor, so the ridge's
   deepest points sliced past the overlap and exposed whatever sits behind
   the section instead of the neighbor's color — and because the x-axis
   still runs in %, a narrow mobile width compressed peaks horizontally
   while the notch stayed just as deep, reading as spiky "stalactites"
   instead of the gentle rolling silhouette at desktop widths.
   clamp(40px,10vw,128px) keeps the peak-height-to-section-width ratio close
   to constant across viewport widths (10vw == 128px at the ~1280px
   reference width the line art was traced against), which is what keeps
   the mobile silhouette reading like a scaled-down version of the desktop
   one rather than a proportionally taller, steeper one. ---------- */
/* Sibling sections don't overlap in normal flow, so a clipped notch would
   otherwise just reveal the plain body background instead of the
   neighboring section's color. Pull the torn section over its neighbor by
   negative margin (now tied to the same --ridge-depth, so the overlap
   always exactly matches the notch's real pixel depth) and lift it above
   them with z-index, so the neighbor's own (unclipped, rectangular)
   background is what actually shows through each notch. */
.torn-top,.torn-bottom,.torn-both{position:relative;z-index:4;background:var(--paper);--ridge-depth:clamp(40px,10vw,128px);}
.torn-top{margin-top:calc(var(--ridge-depth) * -1);}
.torn-bottom{margin-bottom:calc(var(--ridge-depth) * -1);}
.torn-both{margin-top:calc(var(--ridge-depth) * -1);margin-bottom:calc(var(--ridge-depth) * -1);}
.torn-top{
  clip-path:polygon(
    0.0% calc(var(--ridge-depth) * 1.0),0.33% calc(var(--ridge-depth) * 0.9932),0.67% calc(var(--ridge-depth) * 0.9894),1.0% calc(var(--ridge-depth) * 0.9864),1.34% calc(var(--ridge-depth) * 0.9826),1.67% calc(var(--ridge-depth) * 0.975),2.01% calc(var(--ridge-depth) * 0.9652),2.34% calc(var(--ridge-depth) * 0.9539),2.68% calc(var(--ridge-depth) * 0.938),3.01% calc(var(--ridge-depth) * 0.9168),3.34% calc(var(--ridge-depth) * 0.8949),3.68% calc(var(--ridge-depth) * 0.8714),4.01% calc(var(--ridge-depth) * 0.8555),4.35% calc(var(--ridge-depth) * 0.8411),4.68% calc(var(--ridge-depth) * 0.8313),5.02% calc(var(--ridge-depth) * 0.8162),5.35% calc(var(--ridge-depth) * 0.7935),5.69% calc(var(--ridge-depth) * 0.7685),6.02% calc(var(--ridge-depth) * 0.7436),6.35% calc(var(--ridge-depth) * 0.7148),6.69% calc(var(--ridge-depth) * 0.7095),7.02% calc(var(--ridge-depth) * 0.7307),7.36% calc(var(--ridge-depth) * 0.7307),7.69% calc(var(--ridge-depth) * 0.7375),8.03% calc(var(--ridge-depth) * 0.7375),8.36% calc(var(--ridge-depth) * 0.7413),8.7% calc(var(--ridge-depth) * 0.7443),9.03% calc(var(--ridge-depth) * 0.7504),9.36% calc(var(--ridge-depth) * 0.7579),9.7% calc(var(--ridge-depth) * 0.7829),10.03% calc(var(--ridge-depth) * 0.8079),10.37% calc(var(--ridge-depth) * 0.8298),10.7% calc(var(--ridge-depth) * 0.8472),11.04% calc(var(--ridge-depth) * 0.8487),11.37% calc(var(--ridge-depth) * 0.8623),11.71% calc(var(--ridge-depth) * 0.8691),12.04% calc(var(--ridge-depth) * 0.8457),12.37% calc(var(--ridge-depth) * 0.8169),12.71% calc(var(--ridge-depth) * 0.789),13.04% calc(var(--ridge-depth) * 0.7587),13.38% calc(var(--ridge-depth) * 0.7292),13.71% calc(var(--ridge-depth) * 0.7065),14.05% calc(var(--ridge-depth) * 0.6853),14.38% calc(var(--ridge-depth) * 0.6687),14.72% calc(var(--ridge-depth) * 0.6619),15.05% calc(var(--ridge-depth) * 0.6483),15.38% calc(var(--ridge-depth) * 0.6399),15.72% calc(var(--ridge-depth) * 0.6225),16.05% calc(var(--ridge-depth) * 0.5976),16.39% calc(var(--ridge-depth) * 0.5794),16.72% calc(var(--ridge-depth) * 0.5651),17.06% calc(var(--ridge-depth) * 0.5461),17.39% calc(var(--ridge-depth) * 0.5287),17.73% calc(var(--ridge-depth) * 0.5272),18.06% calc(var(--ridge-depth) * 0.5393),18.39% calc(var(--ridge-depth) * 0.5681),18.73% calc(var(--ridge-depth) * 0.5938),19.06% calc(var(--ridge-depth) * 0.6233),19.4% calc(var(--ridge-depth) * 0.652),19.73% calc(var(--ridge-depth) * 0.6687),20.07% calc(var(--ridge-depth) * 0.6755),20.4% calc(var(--ridge-depth) * 0.6929),20.74% calc(var(--ridge-depth) * 0.7209),21.07% calc(var(--ridge-depth) * 0.7458),21.4% calc(var(--ridge-depth) * 0.764),21.74% calc(var(--ridge-depth) * 0.7958),22.07% calc(var(--ridge-depth) * 0.8321),22.41% calc(var(--ridge-depth) * 0.8328),22.74% calc(var(--ridge-depth) * 0.8154),23.08% calc(var(--ridge-depth) * 0.7995),23.41% calc(var(--ridge-depth) * 0.7791),23.75% calc(var(--ridge-depth) * 0.7572),24.08% calc(var(--ridge-depth) * 0.7375),24.41% calc(var(--ridge-depth) * 0.7254),24.75% calc(var(--ridge-depth) * 0.7103),25.08% calc(var(--ridge-depth) * 0.6884),25.42% calc(var(--ridge-depth) * 0.6672),25.75% calc(var(--ridge-depth) * 0.6483),26.09% calc(var(--ridge-depth) * 0.6271),26.42% calc(var(--ridge-depth) * 0.6415),26.76% calc(var(--ridge-depth) * 0.6604),27.09% calc(var(--ridge-depth) * 0.6755),27.42% calc(var(--ridge-depth) * 0.6967),27.76% calc(var(--ridge-depth) * 0.7179),28.09% calc(var(--ridge-depth) * 0.7451),28.43% calc(var(--ridge-depth) * 0.7557),28.76% calc(var(--ridge-depth) * 0.7345),29.1% calc(var(--ridge-depth) * 0.7163),29.43% calc(var(--ridge-depth) * 0.7035),29.77% calc(var(--ridge-depth) * 0.7224),30.1% calc(var(--ridge-depth) * 0.7443),30.43% calc(var(--ridge-depth) * 0.7579),30.77% calc(var(--ridge-depth) * 0.7209),31.1% calc(var(--ridge-depth) * 0.6846),31.44% calc(var(--ridge-depth) * 0.6551),31.77% calc(var(--ridge-depth) * 0.6331),32.11% calc(var(--ridge-depth) * 0.612),32.44% calc(var(--ridge-depth) * 0.5938),32.78% calc(var(--ridge-depth) * 0.5726),33.11% calc(var(--ridge-depth) * 0.5507),33.44% calc(var(--ridge-depth) * 0.5242),33.78% calc(var(--ridge-depth) * 0.4955),34.11% calc(var(--ridge-depth) * 0.4697),34.45% calc(var(--ridge-depth) * 0.4614),34.78% calc(var(--ridge-depth) * 0.4584),35.12% calc(var(--ridge-depth) * 0.4614),35.45% calc(var(--ridge-depth) * 0.4818),35.79% calc(var(--ridge-depth) * 0.5038),36.12% calc(var(--ridge-depth) * 0.5242),36.45% calc(var(--ridge-depth) * 0.5416),36.79% calc(var(--ridge-depth) * 0.5582),37.12% calc(var(--ridge-depth) * 0.5794),37.46% calc(var(--ridge-depth) * 0.5976),37.79% calc(var(--ridge-depth) * 0.6157),38.13% calc(var(--ridge-depth) * 0.6301),38.46% calc(var(--ridge-depth) * 0.6483),38.8% calc(var(--ridge-depth) * 0.6687),39.13% calc(var(--ridge-depth) * 0.6884),39.46% calc(var(--ridge-depth) * 0.6967),39.8% calc(var(--ridge-depth) * 0.6899),40.13% calc(var(--ridge-depth) * 0.7012),40.47% calc(var(--ridge-depth) * 0.7186),40.8% calc(var(--ridge-depth) * 0.7133),41.14% calc(var(--ridge-depth) * 0.6997),41.47% calc(var(--ridge-depth) * 0.677),41.81% calc(var(--ridge-depth) * 0.6536),42.14% calc(var(--ridge-depth) * 0.6316),42.47% calc(var(--ridge-depth) * 0.6172),42.81% calc(var(--ridge-depth) * 0.5877),43.14% calc(var(--ridge-depth) * 0.5552),43.48% calc(var(--ridge-depth) * 0.5325),43.81% calc(var(--ridge-depth) * 0.531),44.15% calc(var(--ridge-depth) * 0.5129),44.48% calc(var(--ridge-depth) * 0.5189),44.82% calc(var(--ridge-depth) * 0.5257),45.15% calc(var(--ridge-depth) * 0.5068),45.48% calc(var(--ridge-depth) * 0.4818),45.82% calc(var(--ridge-depth) * 0.4448),46.15% calc(var(--ridge-depth) * 0.3971),46.49% calc(var(--ridge-depth) * 0.382),46.82% calc(var(--ridge-depth) * 0.4077),47.16% calc(var(--ridge-depth) * 0.4251),47.49% calc(var(--ridge-depth) * 0.4433),47.83% calc(var(--ridge-depth) * 0.4614),48.16% calc(var(--ridge-depth) * 0.4826),48.49% calc(var(--ridge-depth) * 0.4977),48.83% calc(var(--ridge-depth) * 0.5121),49.16% calc(var(--ridge-depth) * 0.5242),49.5% calc(var(--ridge-depth) * 0.5378),49.83% calc(var(--ridge-depth) * 0.5545),50.17% calc(var(--ridge-depth) * 0.5696),50.5% calc(var(--ridge-depth) * 0.5787),50.84% calc(var(--ridge-depth) * 0.5862),51.17% calc(var(--ridge-depth) * 0.5832),51.51% calc(var(--ridge-depth) * 0.5719),51.84% calc(var(--ridge-depth) * 0.5651),52.17% calc(var(--ridge-depth) * 0.5446),52.51% calc(var(--ridge-depth) * 0.5242),52.84% calc(var(--ridge-depth) * 0.5129),53.18% calc(var(--ridge-depth) * 0.503),53.51% calc(var(--ridge-depth) * 0.4887),53.85% calc(var(--ridge-depth) * 0.4607),54.18% calc(var(--ridge-depth) * 0.438),54.52% calc(var(--ridge-depth) * 0.4115),54.85% calc(var(--ridge-depth) * 0.3888),55.18% calc(var(--ridge-depth) * 0.3601),55.52% calc(var(--ridge-depth) * 0.3495),55.85% calc(var(--ridge-depth) * 0.3714),56.19% calc(var(--ridge-depth) * 0.379),56.52% calc(var(--ridge-depth) * 0.3971),56.86% calc(var(--ridge-depth) * 0.4191),57.19% calc(var(--ridge-depth) * 0.4395),57.53% calc(var(--ridge-depth) * 0.4614),57.86% calc(var(--ridge-depth) * 0.4501),58.19% calc(var(--ridge-depth) * 0.4637),58.53% calc(var(--ridge-depth) * 0.5144),58.86% calc(var(--ridge-depth) * 0.5378),59.2% calc(var(--ridge-depth) * 0.5265),59.53% calc(var(--ridge-depth) * 0.5083),59.87% calc(var(--ridge-depth) * 0.4939),60.2% calc(var(--ridge-depth) * 0.4758),60.54% calc(var(--ridge-depth) * 0.4508),60.87% calc(var(--ridge-depth) * 0.4289),61.2% calc(var(--ridge-depth) * 0.4274),61.54% calc(var(--ridge-depth) * 0.4138),61.87% calc(var(--ridge-depth) * 0.3949),62.21% calc(var(--ridge-depth) * 0.3669),62.54% calc(var(--ridge-depth) * 0.3366),62.88% calc(var(--ridge-depth) * 0.3343),63.21% calc(var(--ridge-depth) * 0.2988),63.55% calc(var(--ridge-depth) * 0.2776),63.88% calc(var(--ridge-depth) * 0.2542),64.21% calc(var(--ridge-depth) * 0.2247),64.55% calc(var(--ridge-depth) * 0.1989),64.88% calc(var(--ridge-depth) * 0.1732),65.22% calc(var(--ridge-depth) * 0.149),65.55% calc(var(--ridge-depth) * 0.121),65.89% calc(var(--ridge-depth) * 0.0923),66.22% calc(var(--ridge-depth) * 0.056),66.56% calc(var(--ridge-depth) * 0.0219),66.89% calc(var(--ridge-depth) * 0.0061),67.22% 0px,67.56% calc(var(--ridge-depth) * 0.0204),67.89% calc(var(--ridge-depth) * 0.0325),68.23% calc(var(--ridge-depth) * 0.0764),68.56% calc(var(--ridge-depth) * 0.121),68.9% calc(var(--ridge-depth) * 0.1778),69.23% calc(var(--ridge-depth) * 0.2118),69.57% calc(var(--ridge-depth) * 0.233),69.9% calc(var(--ridge-depth) * 0.2337),70.23% calc(var(--ridge-depth) * 0.2489),70.57% calc(var(--ridge-depth) * 0.2874),70.9% calc(var(--ridge-depth) * 0.289),71.24% calc(var(--ridge-depth) * 0.3064),71.57% calc(var(--ridge-depth) * 0.3359),71.91% calc(var(--ridge-depth) * 0.3517),72.24% calc(var(--ridge-depth) * 0.3389),72.58% calc(var(--ridge-depth) * 0.382),72.91% calc(var(--ridge-depth) * 0.4221),73.24% calc(var(--ridge-depth) * 0.4357),73.58% calc(var(--ridge-depth) * 0.4576),73.91% calc(var(--ridge-depth) * 0.4758),74.25% calc(var(--ridge-depth) * 0.5083),74.58% calc(var(--ridge-depth) * 0.531),74.92% calc(var(--ridge-depth) * 0.5446),75.25% calc(var(--ridge-depth) * 0.5719),75.59% calc(var(--ridge-depth) * 0.6112),75.92% calc(var(--ridge-depth) * 0.6331),76.25% calc(var(--ridge-depth) * 0.6293),76.59% calc(var(--ridge-depth) * 0.6475),76.92% calc(var(--ridge-depth) * 0.6626),77.26% calc(var(--ridge-depth) * 0.6876),77.59% calc(var(--ridge-depth) * 0.711),77.93% calc(var(--ridge-depth) * 0.7216),78.26% calc(var(--ridge-depth) * 0.6884),78.6% calc(var(--ridge-depth) * 0.6596),78.93% calc(var(--ridge-depth) * 0.6415),79.26% calc(var(--ridge-depth) * 0.6346),79.6% calc(var(--ridge-depth) * 0.6203),79.93% calc(var(--ridge-depth) * 0.5983),80.27% calc(var(--ridge-depth) * 0.5772),80.6% calc(var(--ridge-depth) * 0.559),80.94% calc(var(--ridge-depth) * 0.5446),81.27% calc(var(--ridge-depth) * 0.5227),81.61% calc(var(--ridge-depth) * 0.4939),81.94% calc(var(--ridge-depth) * 0.4758),82.27% calc(var(--ridge-depth) * 0.5106),82.61% calc(var(--ridge-depth) * 0.5514),82.94% calc(var(--ridge-depth) * 0.593),83.28% calc(var(--ridge-depth) * 0.6225),83.61% calc(var(--ridge-depth) * 0.652),83.95% calc(var(--ridge-depth) * 0.68),84.28% calc(var(--ridge-depth) * 0.6672),84.62% calc(var(--ridge-depth) * 0.652),84.95% calc(var(--ridge-depth) * 0.6339),85.28% calc(var(--ridge-depth) * 0.6316),85.62% calc(var(--ridge-depth) * 0.6271),85.95% calc(var(--ridge-depth) * 0.6135),86.29% calc(var(--ridge-depth) * 0.6067),86.62% calc(var(--ridge-depth) * 0.5998),86.96% calc(var(--ridge-depth) * 0.6097),87.29% calc(var(--ridge-depth) * 0.6074),87.63% calc(var(--ridge-depth) * 0.5862),87.96% calc(var(--ridge-depth) * 0.5749),88.29% calc(var(--ridge-depth) * 0.5673),88.63% calc(var(--ridge-depth) * 0.5431),88.96% calc(var(--ridge-depth) * 0.5242),89.3% calc(var(--ridge-depth) * 0.5098),89.63% calc(var(--ridge-depth) * 0.5053),89.97% calc(var(--ridge-depth) * 0.503),90.3% calc(var(--ridge-depth) * 0.4894),90.64% calc(var(--ridge-depth) * 0.4713),90.97% calc(var(--ridge-depth) * 0.4614),91.3% calc(var(--ridge-depth) * 0.4478),91.64% calc(var(--ridge-depth) * 0.4281),91.97% calc(var(--ridge-depth) * 0.4138),92.31% calc(var(--ridge-depth) * 0.4123),92.64% calc(var(--ridge-depth) * 0.3873),92.98% calc(var(--ridge-depth) * 0.3722),93.31% calc(var(--ridge-depth) * 0.3517),93.65% calc(var(--ridge-depth) * 0.3525),93.98% calc(var(--ridge-depth) * 0.3835),94.31% calc(var(--ridge-depth) * 0.416),94.65% calc(var(--ridge-depth) * 0.438),94.98% calc(var(--ridge-depth) * 0.4584),95.32% calc(var(--ridge-depth) * 0.4788),95.65% calc(var(--ridge-depth) * 0.5091),95.99% calc(var(--ridge-depth) * 0.5416),96.32% calc(var(--ridge-depth) * 0.5401),96.66% calc(var(--ridge-depth) * 0.5242),96.99% calc(var(--ridge-depth) * 0.5038),97.32% calc(var(--ridge-depth) * 0.4894),97.66% calc(var(--ridge-depth) * 0.503),97.99% calc(var(--ridge-depth) * 0.5242),98.33% calc(var(--ridge-depth) * 0.5635),98.66% calc(var(--ridge-depth) * 0.5998),99.0% calc(var(--ridge-depth) * 0.6399),99.33% calc(var(--ridge-depth) * 0.6672),99.67% calc(var(--ridge-depth) * 0.6884),100.0% calc(var(--ridge-depth) * 0.7035),100% 100%,0% 100%
  );
}
.torn-bottom{
  clip-path:polygon(
    0% 0%,100% 0%,100.0% calc(100% - var(--ridge-depth) * 0.7035),99.67% calc(100% - var(--ridge-depth) * 0.6884),99.33% calc(100% - var(--ridge-depth) * 0.6672),99.0% calc(100% - var(--ridge-depth) * 0.6399),98.66% calc(100% - var(--ridge-depth) * 0.5998),98.33% calc(100% - var(--ridge-depth) * 0.5635),97.99% calc(100% - var(--ridge-depth) * 0.5242),97.66% calc(100% - var(--ridge-depth) * 0.503),97.32% calc(100% - var(--ridge-depth) * 0.4894),96.99% calc(100% - var(--ridge-depth) * 0.5038),96.66% calc(100% - var(--ridge-depth) * 0.5242),96.32% calc(100% - var(--ridge-depth) * 0.5401),95.99% calc(100% - var(--ridge-depth) * 0.5416),95.65% calc(100% - var(--ridge-depth) * 0.5091),95.32% calc(100% - var(--ridge-depth) * 0.4788),94.98% calc(100% - var(--ridge-depth) * 0.4584),94.65% calc(100% - var(--ridge-depth) * 0.438),94.31% calc(100% - var(--ridge-depth) * 0.416),93.98% calc(100% - var(--ridge-depth) * 0.3835),93.65% calc(100% - var(--ridge-depth) * 0.3525),93.31% calc(100% - var(--ridge-depth) * 0.3517),92.98% calc(100% - var(--ridge-depth) * 0.3722),92.64% calc(100% - var(--ridge-depth) * 0.3873),92.31% calc(100% - var(--ridge-depth) * 0.4123),91.97% calc(100% - var(--ridge-depth) * 0.4138),91.64% calc(100% - var(--ridge-depth) * 0.4281),91.3% calc(100% - var(--ridge-depth) * 0.4478),90.97% calc(100% - var(--ridge-depth) * 0.4614),90.64% calc(100% - var(--ridge-depth) * 0.4713),90.3% calc(100% - var(--ridge-depth) * 0.4894),89.97% calc(100% - var(--ridge-depth) * 0.503),89.63% calc(100% - var(--ridge-depth) * 0.5053),89.3% calc(100% - var(--ridge-depth) * 0.5098),88.96% calc(100% - var(--ridge-depth) * 0.5242),88.63% calc(100% - var(--ridge-depth) * 0.5431),88.29% calc(100% - var(--ridge-depth) * 0.5673),87.96% calc(100% - var(--ridge-depth) * 0.5749),87.63% calc(100% - var(--ridge-depth) * 0.5862),87.29% calc(100% - var(--ridge-depth) * 0.6074),86.96% calc(100% - var(--ridge-depth) * 0.6097),86.62% calc(100% - var(--ridge-depth) * 0.5998),86.29% calc(100% - var(--ridge-depth) * 0.6067),85.95% calc(100% - var(--ridge-depth) * 0.6135),85.62% calc(100% - var(--ridge-depth) * 0.6271),85.28% calc(100% - var(--ridge-depth) * 0.6316),84.95% calc(100% - var(--ridge-depth) * 0.6339),84.62% calc(100% - var(--ridge-depth) * 0.652),84.28% calc(100% - var(--ridge-depth) * 0.6672),83.95% calc(100% - var(--ridge-depth) * 0.68),83.61% calc(100% - var(--ridge-depth) * 0.652),83.28% calc(100% - var(--ridge-depth) * 0.6225),82.94% calc(100% - var(--ridge-depth) * 0.593),82.61% calc(100% - var(--ridge-depth) * 0.5514),82.27% calc(100% - var(--ridge-depth) * 0.5106),81.94% calc(100% - var(--ridge-depth) * 0.4758),81.61% calc(100% - var(--ridge-depth) * 0.4939),81.27% calc(100% - var(--ridge-depth) * 0.5227),80.94% calc(100% - var(--ridge-depth) * 0.5446),80.6% calc(100% - var(--ridge-depth) * 0.559),80.27% calc(100% - var(--ridge-depth) * 0.5772),79.93% calc(100% - var(--ridge-depth) * 0.5983),79.6% calc(100% - var(--ridge-depth) * 0.6203),79.26% calc(100% - var(--ridge-depth) * 0.6346),78.93% calc(100% - var(--ridge-depth) * 0.6415),78.6% calc(100% - var(--ridge-depth) * 0.6596),78.26% calc(100% - var(--ridge-depth) * 0.6884),77.93% calc(100% - var(--ridge-depth) * 0.7216),77.59% calc(100% - var(--ridge-depth) * 0.711),77.26% calc(100% - var(--ridge-depth) * 0.6876),76.92% calc(100% - var(--ridge-depth) * 0.6626),76.59% calc(100% - var(--ridge-depth) * 0.6475),76.25% calc(100% - var(--ridge-depth) * 0.6293),75.92% calc(100% - var(--ridge-depth) * 0.6331),75.59% calc(100% - var(--ridge-depth) * 0.6112),75.25% calc(100% - var(--ridge-depth) * 0.5719),74.92% calc(100% - var(--ridge-depth) * 0.5446),74.58% calc(100% - var(--ridge-depth) * 0.531),74.25% calc(100% - var(--ridge-depth) * 0.5083),73.91% calc(100% - var(--ridge-depth) * 0.4758),73.58% calc(100% - var(--ridge-depth) * 0.4576),73.24% calc(100% - var(--ridge-depth) * 0.4357),72.91% calc(100% - var(--ridge-depth) * 0.4221),72.58% calc(100% - var(--ridge-depth) * 0.382),72.24% calc(100% - var(--ridge-depth) * 0.3389),71.91% calc(100% - var(--ridge-depth) * 0.3517),71.57% calc(100% - var(--ridge-depth) * 0.3359),71.24% calc(100% - var(--ridge-depth) * 0.3064),70.9% calc(100% - var(--ridge-depth) * 0.289),70.57% calc(100% - var(--ridge-depth) * 0.2874),70.23% calc(100% - var(--ridge-depth) * 0.2489),69.9% calc(100% - var(--ridge-depth) * 0.2337),69.57% calc(100% - var(--ridge-depth) * 0.233),69.23% calc(100% - var(--ridge-depth) * 0.2118),68.9% calc(100% - var(--ridge-depth) * 0.1778),68.56% calc(100% - var(--ridge-depth) * 0.121),68.23% calc(100% - var(--ridge-depth) * 0.0764),67.89% calc(100% - var(--ridge-depth) * 0.0325),67.56% calc(100% - var(--ridge-depth) * 0.0204),67.22% 100%,66.89% calc(100% - var(--ridge-depth) * 0.0061),66.56% calc(100% - var(--ridge-depth) * 0.0219),66.22% calc(100% - var(--ridge-depth) * 0.056),65.89% calc(100% - var(--ridge-depth) * 0.0923),65.55% calc(100% - var(--ridge-depth) * 0.121),65.22% calc(100% - var(--ridge-depth) * 0.149),64.88% calc(100% - var(--ridge-depth) * 0.1732),64.55% calc(100% - var(--ridge-depth) * 0.1989),64.21% calc(100% - var(--ridge-depth) * 0.2247),63.88% calc(100% - var(--ridge-depth) * 0.2542),63.55% calc(100% - var(--ridge-depth) * 0.2776),63.21% calc(100% - var(--ridge-depth) * 0.2988),62.88% calc(100% - var(--ridge-depth) * 0.3343),62.54% calc(100% - var(--ridge-depth) * 0.3366),62.21% calc(100% - var(--ridge-depth) * 0.3669),61.87% calc(100% - var(--ridge-depth) * 0.3949),61.54% calc(100% - var(--ridge-depth) * 0.4138),61.2% calc(100% - var(--ridge-depth) * 0.4274),60.87% calc(100% - var(--ridge-depth) * 0.4289),60.54% calc(100% - var(--ridge-depth) * 0.4508),60.2% calc(100% - var(--ridge-depth) * 0.4758),59.87% calc(100% - var(--ridge-depth) * 0.4939),59.53% calc(100% - var(--ridge-depth) * 0.5083),59.2% calc(100% - var(--ridge-depth) * 0.5265),58.86% calc(100% - var(--ridge-depth) * 0.5378),58.53% calc(100% - var(--ridge-depth) * 0.5144),58.19% calc(100% - var(--ridge-depth) * 0.4637),57.86% calc(100% - var(--ridge-depth) * 0.4501),57.53% calc(100% - var(--ridge-depth) * 0.4614),57.19% calc(100% - var(--ridge-depth) * 0.4395),56.86% calc(100% - var(--ridge-depth) * 0.4191),56.52% calc(100% - var(--ridge-depth) * 0.3971),56.19% calc(100% - var(--ridge-depth) * 0.379),55.85% calc(100% - var(--ridge-depth) * 0.3714),55.52% calc(100% - var(--ridge-depth) * 0.3495),55.18% calc(100% - var(--ridge-depth) * 0.3601),54.85% calc(100% - var(--ridge-depth) * 0.3888),54.52% calc(100% - var(--ridge-depth) * 0.4115),54.18% calc(100% - var(--ridge-depth) * 0.438),53.85% calc(100% - var(--ridge-depth) * 0.4607),53.51% calc(100% - var(--ridge-depth) * 0.4887),53.18% calc(100% - var(--ridge-depth) * 0.503),52.84% calc(100% - var(--ridge-depth) * 0.5129),52.51% calc(100% - var(--ridge-depth) * 0.5242),52.17% calc(100% - var(--ridge-depth) * 0.5446),51.84% calc(100% - var(--ridge-depth) * 0.5651),51.51% calc(100% - var(--ridge-depth) * 0.5719),51.17% calc(100% - var(--ridge-depth) * 0.5832),50.84% calc(100% - var(--ridge-depth) * 0.5862),50.5% calc(100% - var(--ridge-depth) * 0.5787),50.17% calc(100% - var(--ridge-depth) * 0.5696),49.83% calc(100% - var(--ridge-depth) * 0.5545),49.5% calc(100% - var(--ridge-depth) * 0.5378),49.16% calc(100% - var(--ridge-depth) * 0.5242),48.83% calc(100% - var(--ridge-depth) * 0.5121),48.49% calc(100% - var(--ridge-depth) * 0.4977),48.16% calc(100% - var(--ridge-depth) * 0.4826),47.83% calc(100% - var(--ridge-depth) * 0.4614),47.49% calc(100% - var(--ridge-depth) * 0.4433),47.16% calc(100% - var(--ridge-depth) * 0.4251),46.82% calc(100% - var(--ridge-depth) * 0.4077),46.49% calc(100% - var(--ridge-depth) * 0.382),46.15% calc(100% - var(--ridge-depth) * 0.3971),45.82% calc(100% - var(--ridge-depth) * 0.4448),45.48% calc(100% - var(--ridge-depth) * 0.4818),45.15% calc(100% - var(--ridge-depth) * 0.5068),44.82% calc(100% - var(--ridge-depth) * 0.5257),44.48% calc(100% - var(--ridge-depth) * 0.5189),44.15% calc(100% - var(--ridge-depth) * 0.5129),43.81% calc(100% - var(--ridge-depth) * 0.531),43.48% calc(100% - var(--ridge-depth) * 0.5325),43.14% calc(100% - var(--ridge-depth) * 0.5552),42.81% calc(100% - var(--ridge-depth) * 0.5877),42.47% calc(100% - var(--ridge-depth) * 0.6172),42.14% calc(100% - var(--ridge-depth) * 0.6316),41.81% calc(100% - var(--ridge-depth) * 0.6536),41.47% calc(100% - var(--ridge-depth) * 0.677),41.14% calc(100% - var(--ridge-depth) * 0.6997),40.8% calc(100% - var(--ridge-depth) * 0.7133),40.47% calc(100% - var(--ridge-depth) * 0.7186),40.13% calc(100% - var(--ridge-depth) * 0.7012),39.8% calc(100% - var(--ridge-depth) * 0.6899),39.46% calc(100% - var(--ridge-depth) * 0.6967),39.13% calc(100% - var(--ridge-depth) * 0.6884),38.8% calc(100% - var(--ridge-depth) * 0.6687),38.46% calc(100% - var(--ridge-depth) * 0.6483),38.13% calc(100% - var(--ridge-depth) * 0.6301),37.79% calc(100% - var(--ridge-depth) * 0.6157),37.46% calc(100% - var(--ridge-depth) * 0.5976),37.12% calc(100% - var(--ridge-depth) * 0.5794),36.79% calc(100% - var(--ridge-depth) * 0.5582),36.45% calc(100% - var(--ridge-depth) * 0.5416),36.12% calc(100% - var(--ridge-depth) * 0.5242),35.79% calc(100% - var(--ridge-depth) * 0.5038),35.45% calc(100% - var(--ridge-depth) * 0.4818),35.12% calc(100% - var(--ridge-depth) * 0.4614),34.78% calc(100% - var(--ridge-depth) * 0.4584),34.45% calc(100% - var(--ridge-depth) * 0.4614),34.11% calc(100% - var(--ridge-depth) * 0.4697),33.78% calc(100% - var(--ridge-depth) * 0.4955),33.44% calc(100% - var(--ridge-depth) * 0.5242),33.11% calc(100% - var(--ridge-depth) * 0.5507),32.78% calc(100% - var(--ridge-depth) * 0.5726),32.44% calc(100% - var(--ridge-depth) * 0.5938),32.11% calc(100% - var(--ridge-depth) * 0.612),31.77% calc(100% - var(--ridge-depth) * 0.6331),31.44% calc(100% - var(--ridge-depth) * 0.6551),31.1% calc(100% - var(--ridge-depth) * 0.6846),30.77% calc(100% - var(--ridge-depth) * 0.7209),30.43% calc(100% - var(--ridge-depth) * 0.7579),30.1% calc(100% - var(--ridge-depth) * 0.7443),29.77% calc(100% - var(--ridge-depth) * 0.7224),29.43% calc(100% - var(--ridge-depth) * 0.7035),29.1% calc(100% - var(--ridge-depth) * 0.7163),28.76% calc(100% - var(--ridge-depth) * 0.7345),28.43% calc(100% - var(--ridge-depth) * 0.7557),28.09% calc(100% - var(--ridge-depth) * 0.7451),27.76% calc(100% - var(--ridge-depth) * 0.7179),27.42% calc(100% - var(--ridge-depth) * 0.6967),27.09% calc(100% - var(--ridge-depth) * 0.6755),26.76% calc(100% - var(--ridge-depth) * 0.6604),26.42% calc(100% - var(--ridge-depth) * 0.6415),26.09% calc(100% - var(--ridge-depth) * 0.6271),25.75% calc(100% - var(--ridge-depth) * 0.6483),25.42% calc(100% - var(--ridge-depth) * 0.6672),25.08% calc(100% - var(--ridge-depth) * 0.6884),24.75% calc(100% - var(--ridge-depth) * 0.7103),24.41% calc(100% - var(--ridge-depth) * 0.7254),24.08% calc(100% - var(--ridge-depth) * 0.7375),23.75% calc(100% - var(--ridge-depth) * 0.7572),23.41% calc(100% - var(--ridge-depth) * 0.7791),23.08% calc(100% - var(--ridge-depth) * 0.7995),22.74% calc(100% - var(--ridge-depth) * 0.8154),22.41% calc(100% - var(--ridge-depth) * 0.8328),22.07% calc(100% - var(--ridge-depth) * 0.8321),21.74% calc(100% - var(--ridge-depth) * 0.7958),21.4% calc(100% - var(--ridge-depth) * 0.764),21.07% calc(100% - var(--ridge-depth) * 0.7458),20.74% calc(100% - var(--ridge-depth) * 0.7209),20.4% calc(100% - var(--ridge-depth) * 0.6929),20.07% calc(100% - var(--ridge-depth) * 0.6755),19.73% calc(100% - var(--ridge-depth) * 0.6687),19.4% calc(100% - var(--ridge-depth) * 0.652),19.06% calc(100% - var(--ridge-depth) * 0.6233),18.73% calc(100% - var(--ridge-depth) * 0.5938),18.39% calc(100% - var(--ridge-depth) * 0.5681),18.06% calc(100% - var(--ridge-depth) * 0.5393),17.73% calc(100% - var(--ridge-depth) * 0.5272),17.39% calc(100% - var(--ridge-depth) * 0.5287),17.06% calc(100% - var(--ridge-depth) * 0.5461),16.72% calc(100% - var(--ridge-depth) * 0.5651),16.39% calc(100% - var(--ridge-depth) * 0.5794),16.05% calc(100% - var(--ridge-depth) * 0.5976),15.72% calc(100% - var(--ridge-depth) * 0.6225),15.38% calc(100% - var(--ridge-depth) * 0.6399),15.05% calc(100% - var(--ridge-depth) * 0.6483),14.72% calc(100% - var(--ridge-depth) * 0.6619),14.38% calc(100% - var(--ridge-depth) * 0.6687),14.05% calc(100% - var(--ridge-depth) * 0.6853),13.71% calc(100% - var(--ridge-depth) * 0.7065),13.38% calc(100% - var(--ridge-depth) * 0.7292),13.04% calc(100% - var(--ridge-depth) * 0.7587),12.71% calc(100% - var(--ridge-depth) * 0.789),12.37% calc(100% - var(--ridge-depth) * 0.8169),12.04% calc(100% - var(--ridge-depth) * 0.8457),11.71% calc(100% - var(--ridge-depth) * 0.8691),11.37% calc(100% - var(--ridge-depth) * 0.8623),11.04% calc(100% - var(--ridge-depth) * 0.8487),10.7% calc(100% - var(--ridge-depth) * 0.8472),10.37% calc(100% - var(--ridge-depth) * 0.8298),10.03% calc(100% - var(--ridge-depth) * 0.8079),9.7% calc(100% - var(--ridge-depth) * 0.7829),9.36% calc(100% - var(--ridge-depth) * 0.7579),9.03% calc(100% - var(--ridge-depth) * 0.7504),8.7% calc(100% - var(--ridge-depth) * 0.7443),8.36% calc(100% - var(--ridge-depth) * 0.7413),8.03% calc(100% - var(--ridge-depth) * 0.7375),7.69% calc(100% - var(--ridge-depth) * 0.7375),7.36% calc(100% - var(--ridge-depth) * 0.7307),7.02% calc(100% - var(--ridge-depth) * 0.7307),6.69% calc(100% - var(--ridge-depth) * 0.7095),6.35% calc(100% - var(--ridge-depth) * 0.7148),6.02% calc(100% - var(--ridge-depth) * 0.7436),5.69% calc(100% - var(--ridge-depth) * 0.7685),5.35% calc(100% - var(--ridge-depth) * 0.7935),5.02% calc(100% - var(--ridge-depth) * 0.8162),4.68% calc(100% - var(--ridge-depth) * 0.8313),4.35% calc(100% - var(--ridge-depth) * 0.8411),4.01% calc(100% - var(--ridge-depth) * 0.8555),3.68% calc(100% - var(--ridge-depth) * 0.8714),3.34% calc(100% - var(--ridge-depth) * 0.8949),3.01% calc(100% - var(--ridge-depth) * 0.9168),2.68% calc(100% - var(--ridge-depth) * 0.938),2.34% calc(100% - var(--ridge-depth) * 0.9539),2.01% calc(100% - var(--ridge-depth) * 0.9652),1.67% calc(100% - var(--ridge-depth) * 0.975),1.34% calc(100% - var(--ridge-depth) * 0.9826),1.0% calc(100% - var(--ridge-depth) * 0.9864),0.67% calc(100% - var(--ridge-depth) * 0.9894),0.33% calc(100% - var(--ridge-depth) * 0.9932),0.0% calc(100% - var(--ridge-depth) * 1.0)
  );
}
.torn-both{
  clip-path:polygon(
    0.0% calc(var(--ridge-depth) * 1.0),0.33% calc(var(--ridge-depth) * 0.9932),0.67% calc(var(--ridge-depth) * 0.9894),1.0% calc(var(--ridge-depth) * 0.9864),1.34% calc(var(--ridge-depth) * 0.9826),1.67% calc(var(--ridge-depth) * 0.975),2.01% calc(var(--ridge-depth) * 0.9652),2.34% calc(var(--ridge-depth) * 0.9539),2.68% calc(var(--ridge-depth) * 0.938),3.01% calc(var(--ridge-depth) * 0.9168),3.34% calc(var(--ridge-depth) * 0.8949),3.68% calc(var(--ridge-depth) * 0.8714),4.01% calc(var(--ridge-depth) * 0.8555),4.35% calc(var(--ridge-depth) * 0.8411),4.68% calc(var(--ridge-depth) * 0.8313),5.02% calc(var(--ridge-depth) * 0.8162),5.35% calc(var(--ridge-depth) * 0.7935),5.69% calc(var(--ridge-depth) * 0.7685),6.02% calc(var(--ridge-depth) * 0.7436),6.35% calc(var(--ridge-depth) * 0.7148),6.69% calc(var(--ridge-depth) * 0.7095),7.02% calc(var(--ridge-depth) * 0.7307),7.36% calc(var(--ridge-depth) * 0.7307),7.69% calc(var(--ridge-depth) * 0.7375),8.03% calc(var(--ridge-depth) * 0.7375),8.36% calc(var(--ridge-depth) * 0.7413),8.7% calc(var(--ridge-depth) * 0.7443),9.03% calc(var(--ridge-depth) * 0.7504),9.36% calc(var(--ridge-depth) * 0.7579),9.7% calc(var(--ridge-depth) * 0.7829),10.03% calc(var(--ridge-depth) * 0.8079),10.37% calc(var(--ridge-depth) * 0.8298),10.7% calc(var(--ridge-depth) * 0.8472),11.04% calc(var(--ridge-depth) * 0.8487),11.37% calc(var(--ridge-depth) * 0.8623),11.71% calc(var(--ridge-depth) * 0.8691),12.04% calc(var(--ridge-depth) * 0.8457),12.37% calc(var(--ridge-depth) * 0.8169),12.71% calc(var(--ridge-depth) * 0.789),13.04% calc(var(--ridge-depth) * 0.7587),13.38% calc(var(--ridge-depth) * 0.7292),13.71% calc(var(--ridge-depth) * 0.7065),14.05% calc(var(--ridge-depth) * 0.6853),14.38% calc(var(--ridge-depth) * 0.6687),14.72% calc(var(--ridge-depth) * 0.6619),15.05% calc(var(--ridge-depth) * 0.6483),15.38% calc(var(--ridge-depth) * 0.6399),15.72% calc(var(--ridge-depth) * 0.6225),16.05% calc(var(--ridge-depth) * 0.5976),16.39% calc(var(--ridge-depth) * 0.5794),16.72% calc(var(--ridge-depth) * 0.5651),17.06% calc(var(--ridge-depth) * 0.5461),17.39% calc(var(--ridge-depth) * 0.5287),17.73% calc(var(--ridge-depth) * 0.5272),18.06% calc(var(--ridge-depth) * 0.5393),18.39% calc(var(--ridge-depth) * 0.5681),18.73% calc(var(--ridge-depth) * 0.5938),19.06% calc(var(--ridge-depth) * 0.6233),19.4% calc(var(--ridge-depth) * 0.652),19.73% calc(var(--ridge-depth) * 0.6687),20.07% calc(var(--ridge-depth) * 0.6755),20.4% calc(var(--ridge-depth) * 0.6929),20.74% calc(var(--ridge-depth) * 0.7209),21.07% calc(var(--ridge-depth) * 0.7458),21.4% calc(var(--ridge-depth) * 0.764),21.74% calc(var(--ridge-depth) * 0.7958),22.07% calc(var(--ridge-depth) * 0.8321),22.41% calc(var(--ridge-depth) * 0.8328),22.74% calc(var(--ridge-depth) * 0.8154),23.08% calc(var(--ridge-depth) * 0.7995),23.41% calc(var(--ridge-depth) * 0.7791),23.75% calc(var(--ridge-depth) * 0.7572),24.08% calc(var(--ridge-depth) * 0.7375),24.41% calc(var(--ridge-depth) * 0.7254),24.75% calc(var(--ridge-depth) * 0.7103),25.08% calc(var(--ridge-depth) * 0.6884),25.42% calc(var(--ridge-depth) * 0.6672),25.75% calc(var(--ridge-depth) * 0.6483),26.09% calc(var(--ridge-depth) * 0.6271),26.42% calc(var(--ridge-depth) * 0.6415),26.76% calc(var(--ridge-depth) * 0.6604),27.09% calc(var(--ridge-depth) * 0.6755),27.42% calc(var(--ridge-depth) * 0.6967),27.76% calc(var(--ridge-depth) * 0.7179),28.09% calc(var(--ridge-depth) * 0.7451),28.43% calc(var(--ridge-depth) * 0.7557),28.76% calc(var(--ridge-depth) * 0.7345),29.1% calc(var(--ridge-depth) * 0.7163),29.43% calc(var(--ridge-depth) * 0.7035),29.77% calc(var(--ridge-depth) * 0.7224),30.1% calc(var(--ridge-depth) * 0.7443),30.43% calc(var(--ridge-depth) * 0.7579),30.77% calc(var(--ridge-depth) * 0.7209),31.1% calc(var(--ridge-depth) * 0.6846),31.44% calc(var(--ridge-depth) * 0.6551),31.77% calc(var(--ridge-depth) * 0.6331),32.11% calc(var(--ridge-depth) * 0.612),32.44% calc(var(--ridge-depth) * 0.5938),32.78% calc(var(--ridge-depth) * 0.5726),33.11% calc(var(--ridge-depth) * 0.5507),33.44% calc(var(--ridge-depth) * 0.5242),33.78% calc(var(--ridge-depth) * 0.4955),34.11% calc(var(--ridge-depth) * 0.4697),34.45% calc(var(--ridge-depth) * 0.4614),34.78% calc(var(--ridge-depth) * 0.4584),35.12% calc(var(--ridge-depth) * 0.4614),35.45% calc(var(--ridge-depth) * 0.4818),35.79% calc(var(--ridge-depth) * 0.5038),36.12% calc(var(--ridge-depth) * 0.5242),36.45% calc(var(--ridge-depth) * 0.5416),36.79% calc(var(--ridge-depth) * 0.5582),37.12% calc(var(--ridge-depth) * 0.5794),37.46% calc(var(--ridge-depth) * 0.5976),37.79% calc(var(--ridge-depth) * 0.6157),38.13% calc(var(--ridge-depth) * 0.6301),38.46% calc(var(--ridge-depth) * 0.6483),38.8% calc(var(--ridge-depth) * 0.6687),39.13% calc(var(--ridge-depth) * 0.6884),39.46% calc(var(--ridge-depth) * 0.6967),39.8% calc(var(--ridge-depth) * 0.6899),40.13% calc(var(--ridge-depth) * 0.7012),40.47% calc(var(--ridge-depth) * 0.7186),40.8% calc(var(--ridge-depth) * 0.7133),41.14% calc(var(--ridge-depth) * 0.6997),41.47% calc(var(--ridge-depth) * 0.677),41.81% calc(var(--ridge-depth) * 0.6536),42.14% calc(var(--ridge-depth) * 0.6316),42.47% calc(var(--ridge-depth) * 0.6172),42.81% calc(var(--ridge-depth) * 0.5877),43.14% calc(var(--ridge-depth) * 0.5552),43.48% calc(var(--ridge-depth) * 0.5325),43.81% calc(var(--ridge-depth) * 0.531),44.15% calc(var(--ridge-depth) * 0.5129),44.48% calc(var(--ridge-depth) * 0.5189),44.82% calc(var(--ridge-depth) * 0.5257),45.15% calc(var(--ridge-depth) * 0.5068),45.48% calc(var(--ridge-depth) * 0.4818),45.82% calc(var(--ridge-depth) * 0.4448),46.15% calc(var(--ridge-depth) * 0.3971),46.49% calc(var(--ridge-depth) * 0.382),46.82% calc(var(--ridge-depth) * 0.4077),47.16% calc(var(--ridge-depth) * 0.4251),47.49% calc(var(--ridge-depth) * 0.4433),47.83% calc(var(--ridge-depth) * 0.4614),48.16% calc(var(--ridge-depth) * 0.4826),48.49% calc(var(--ridge-depth) * 0.4977),48.83% calc(var(--ridge-depth) * 0.5121),49.16% calc(var(--ridge-depth) * 0.5242),49.5% calc(var(--ridge-depth) * 0.5378),49.83% calc(var(--ridge-depth) * 0.5545),50.17% calc(var(--ridge-depth) * 0.5696),50.5% calc(var(--ridge-depth) * 0.5787),50.84% calc(var(--ridge-depth) * 0.5862),51.17% calc(var(--ridge-depth) * 0.5832),51.51% calc(var(--ridge-depth) * 0.5719),51.84% calc(var(--ridge-depth) * 0.5651),52.17% calc(var(--ridge-depth) * 0.5446),52.51% calc(var(--ridge-depth) * 0.5242),52.84% calc(var(--ridge-depth) * 0.5129),53.18% calc(var(--ridge-depth) * 0.503),53.51% calc(var(--ridge-depth) * 0.4887),53.85% calc(var(--ridge-depth) * 0.4607),54.18% calc(var(--ridge-depth) * 0.438),54.52% calc(var(--ridge-depth) * 0.4115),54.85% calc(var(--ridge-depth) * 0.3888),55.18% calc(var(--ridge-depth) * 0.3601),55.52% calc(var(--ridge-depth) * 0.3495),55.85% calc(var(--ridge-depth) * 0.3714),56.19% calc(var(--ridge-depth) * 0.379),56.52% calc(var(--ridge-depth) * 0.3971),56.86% calc(var(--ridge-depth) * 0.4191),57.19% calc(var(--ridge-depth) * 0.4395),57.53% calc(var(--ridge-depth) * 0.4614),57.86% calc(var(--ridge-depth) * 0.4501),58.19% calc(var(--ridge-depth) * 0.4637),58.53% calc(var(--ridge-depth) * 0.5144),58.86% calc(var(--ridge-depth) * 0.5378),59.2% calc(var(--ridge-depth) * 0.5265),59.53% calc(var(--ridge-depth) * 0.5083),59.87% calc(var(--ridge-depth) * 0.4939),60.2% calc(var(--ridge-depth) * 0.4758),60.54% calc(var(--ridge-depth) * 0.4508),60.87% calc(var(--ridge-depth) * 0.4289),61.2% calc(var(--ridge-depth) * 0.4274),61.54% calc(var(--ridge-depth) * 0.4138),61.87% calc(var(--ridge-depth) * 0.3949),62.21% calc(var(--ridge-depth) * 0.3669),62.54% calc(var(--ridge-depth) * 0.3366),62.88% calc(var(--ridge-depth) * 0.3343),63.21% calc(var(--ridge-depth) * 0.2988),63.55% calc(var(--ridge-depth) * 0.2776),63.88% calc(var(--ridge-depth) * 0.2542),64.21% calc(var(--ridge-depth) * 0.2247),64.55% calc(var(--ridge-depth) * 0.1989),64.88% calc(var(--ridge-depth) * 0.1732),65.22% calc(var(--ridge-depth) * 0.149),65.55% calc(var(--ridge-depth) * 0.121),65.89% calc(var(--ridge-depth) * 0.0923),66.22% calc(var(--ridge-depth) * 0.056),66.56% calc(var(--ridge-depth) * 0.0219),66.89% calc(var(--ridge-depth) * 0.0061),67.22% 0px,67.56% calc(var(--ridge-depth) * 0.0204),67.89% calc(var(--ridge-depth) * 0.0325),68.23% calc(var(--ridge-depth) * 0.0764),68.56% calc(var(--ridge-depth) * 0.121),68.9% calc(var(--ridge-depth) * 0.1778),69.23% calc(var(--ridge-depth) * 0.2118),69.57% calc(var(--ridge-depth) * 0.233),69.9% calc(var(--ridge-depth) * 0.2337),70.23% calc(var(--ridge-depth) * 0.2489),70.57% calc(var(--ridge-depth) * 0.2874),70.9% calc(var(--ridge-depth) * 0.289),71.24% calc(var(--ridge-depth) * 0.3064),71.57% calc(var(--ridge-depth) * 0.3359),71.91% calc(var(--ridge-depth) * 0.3517),72.24% calc(var(--ridge-depth) * 0.3389),72.58% calc(var(--ridge-depth) * 0.382),72.91% calc(var(--ridge-depth) * 0.4221),73.24% calc(var(--ridge-depth) * 0.4357),73.58% calc(var(--ridge-depth) * 0.4576),73.91% calc(var(--ridge-depth) * 0.4758),74.25% calc(var(--ridge-depth) * 0.5083),74.58% calc(var(--ridge-depth) * 0.531),74.92% calc(var(--ridge-depth) * 0.5446),75.25% calc(var(--ridge-depth) * 0.5719),75.59% calc(var(--ridge-depth) * 0.6112),75.92% calc(var(--ridge-depth) * 0.6331),76.25% calc(var(--ridge-depth) * 0.6293),76.59% calc(var(--ridge-depth) * 0.6475),76.92% calc(var(--ridge-depth) * 0.6626),77.26% calc(var(--ridge-depth) * 0.6876),77.59% calc(var(--ridge-depth) * 0.711),77.93% calc(var(--ridge-depth) * 0.7216),78.26% calc(var(--ridge-depth) * 0.6884),78.6% calc(var(--ridge-depth) * 0.6596),78.93% calc(var(--ridge-depth) * 0.6415),79.26% calc(var(--ridge-depth) * 0.6346),79.6% calc(var(--ridge-depth) * 0.6203),79.93% calc(var(--ridge-depth) * 0.5983),80.27% calc(var(--ridge-depth) * 0.5772),80.6% calc(var(--ridge-depth) * 0.559),80.94% calc(var(--ridge-depth) * 0.5446),81.27% calc(var(--ridge-depth) * 0.5227),81.61% calc(var(--ridge-depth) * 0.4939),81.94% calc(var(--ridge-depth) * 0.4758),82.27% calc(var(--ridge-depth) * 0.5106),82.61% calc(var(--ridge-depth) * 0.5514),82.94% calc(var(--ridge-depth) * 0.593),83.28% calc(var(--ridge-depth) * 0.6225),83.61% calc(var(--ridge-depth) * 0.652),83.95% calc(var(--ridge-depth) * 0.68),84.28% calc(var(--ridge-depth) * 0.6672),84.62% calc(var(--ridge-depth) * 0.652),84.95% calc(var(--ridge-depth) * 0.6339),85.28% calc(var(--ridge-depth) * 0.6316),85.62% calc(var(--ridge-depth) * 0.6271),85.95% calc(var(--ridge-depth) * 0.6135),86.29% calc(var(--ridge-depth) * 0.6067),86.62% calc(var(--ridge-depth) * 0.5998),86.96% calc(var(--ridge-depth) * 0.6097),87.29% calc(var(--ridge-depth) * 0.6074),87.63% calc(var(--ridge-depth) * 0.5862),87.96% calc(var(--ridge-depth) * 0.5749),88.29% calc(var(--ridge-depth) * 0.5673),88.63% calc(var(--ridge-depth) * 0.5431),88.96% calc(var(--ridge-depth) * 0.5242),89.3% calc(var(--ridge-depth) * 0.5098),89.63% calc(var(--ridge-depth) * 0.5053),89.97% calc(var(--ridge-depth) * 0.503),90.3% calc(var(--ridge-depth) * 0.4894),90.64% calc(var(--ridge-depth) * 0.4713),90.97% calc(var(--ridge-depth) * 0.4614),91.3% calc(var(--ridge-depth) * 0.4478),91.64% calc(var(--ridge-depth) * 0.4281),91.97% calc(var(--ridge-depth) * 0.4138),92.31% calc(var(--ridge-depth) * 0.4123),92.64% calc(var(--ridge-depth) * 0.3873),92.98% calc(var(--ridge-depth) * 0.3722),93.31% calc(var(--ridge-depth) * 0.3517),93.65% calc(var(--ridge-depth) * 0.3525),93.98% calc(var(--ridge-depth) * 0.3835),94.31% calc(var(--ridge-depth) * 0.416),94.65% calc(var(--ridge-depth) * 0.438),94.98% calc(var(--ridge-depth) * 0.4584),95.32% calc(var(--ridge-depth) * 0.4788),95.65% calc(var(--ridge-depth) * 0.5091),95.99% calc(var(--ridge-depth) * 0.5416),96.32% calc(var(--ridge-depth) * 0.5401),96.66% calc(var(--ridge-depth) * 0.5242),96.99% calc(var(--ridge-depth) * 0.5038),97.32% calc(var(--ridge-depth) * 0.4894),97.66% calc(var(--ridge-depth) * 0.503),97.99% calc(var(--ridge-depth) * 0.5242),98.33% calc(var(--ridge-depth) * 0.5635),98.66% calc(var(--ridge-depth) * 0.5998),99.0% calc(var(--ridge-depth) * 0.6399),99.33% calc(var(--ridge-depth) * 0.6672),99.67% calc(var(--ridge-depth) * 0.6884),100.0% calc(var(--ridge-depth) * 0.7035),100.0% calc(100% - var(--ridge-depth) * 0.7035),99.67% calc(100% - var(--ridge-depth) * 0.6884),99.33% calc(100% - var(--ridge-depth) * 0.6672),99.0% calc(100% - var(--ridge-depth) * 0.6399),98.66% calc(100% - var(--ridge-depth) * 0.5998),98.33% calc(100% - var(--ridge-depth) * 0.5635),97.99% calc(100% - var(--ridge-depth) * 0.5242),97.66% calc(100% - var(--ridge-depth) * 0.503),97.32% calc(100% - var(--ridge-depth) * 0.4894),96.99% calc(100% - var(--ridge-depth) * 0.5038),96.66% calc(100% - var(--ridge-depth) * 0.5242),96.32% calc(100% - var(--ridge-depth) * 0.5401),95.99% calc(100% - var(--ridge-depth) * 0.5416),95.65% calc(100% - var(--ridge-depth) * 0.5091),95.32% calc(100% - var(--ridge-depth) * 0.4788),94.98% calc(100% - var(--ridge-depth) * 0.4584),94.65% calc(100% - var(--ridge-depth) * 0.438),94.31% calc(100% - var(--ridge-depth) * 0.416),93.98% calc(100% - var(--ridge-depth) * 0.3835),93.65% calc(100% - var(--ridge-depth) * 0.3525),93.31% calc(100% - var(--ridge-depth) * 0.3517),92.98% calc(100% - var(--ridge-depth) * 0.3722),92.64% calc(100% - var(--ridge-depth) * 0.3873),92.31% calc(100% - var(--ridge-depth) * 0.4123),91.97% calc(100% - var(--ridge-depth) * 0.4138),91.64% calc(100% - var(--ridge-depth) * 0.4281),91.3% calc(100% - var(--ridge-depth) * 0.4478),90.97% calc(100% - var(--ridge-depth) * 0.4614),90.64% calc(100% - var(--ridge-depth) * 0.4713),90.3% calc(100% - var(--ridge-depth) * 0.4894),89.97% calc(100% - var(--ridge-depth) * 0.503),89.63% calc(100% - var(--ridge-depth) * 0.5053),89.3% calc(100% - var(--ridge-depth) * 0.5098),88.96% calc(100% - var(--ridge-depth) * 0.5242),88.63% calc(100% - var(--ridge-depth) * 0.5431),88.29% calc(100% - var(--ridge-depth) * 0.5673),87.96% calc(100% - var(--ridge-depth) * 0.5749),87.63% calc(100% - var(--ridge-depth) * 0.5862),87.29% calc(100% - var(--ridge-depth) * 0.6074),86.96% calc(100% - var(--ridge-depth) * 0.6097),86.62% calc(100% - var(--ridge-depth) * 0.5998),86.29% calc(100% - var(--ridge-depth) * 0.6067),85.95% calc(100% - var(--ridge-depth) * 0.6135),85.62% calc(100% - var(--ridge-depth) * 0.6271),85.28% calc(100% - var(--ridge-depth) * 0.6316),84.95% calc(100% - var(--ridge-depth) * 0.6339),84.62% calc(100% - var(--ridge-depth) * 0.652),84.28% calc(100% - var(--ridge-depth) * 0.6672),83.95% calc(100% - var(--ridge-depth) * 0.68),83.61% calc(100% - var(--ridge-depth) * 0.652),83.28% calc(100% - var(--ridge-depth) * 0.6225),82.94% calc(100% - var(--ridge-depth) * 0.593),82.61% calc(100% - var(--ridge-depth) * 0.5514),82.27% calc(100% - var(--ridge-depth) * 0.5106),81.94% calc(100% - var(--ridge-depth) * 0.4758),81.61% calc(100% - var(--ridge-depth) * 0.4939),81.27% calc(100% - var(--ridge-depth) * 0.5227),80.94% calc(100% - var(--ridge-depth) * 0.5446),80.6% calc(100% - var(--ridge-depth) * 0.559),80.27% calc(100% - var(--ridge-depth) * 0.5772),79.93% calc(100% - var(--ridge-depth) * 0.5983),79.6% calc(100% - var(--ridge-depth) * 0.6203),79.26% calc(100% - var(--ridge-depth) * 0.6346),78.93% calc(100% - var(--ridge-depth) * 0.6415),78.6% calc(100% - var(--ridge-depth) * 0.6596),78.26% calc(100% - var(--ridge-depth) * 0.6884),77.93% calc(100% - var(--ridge-depth) * 0.7216),77.59% calc(100% - var(--ridge-depth) * 0.711),77.26% calc(100% - var(--ridge-depth) * 0.6876),76.92% calc(100% - var(--ridge-depth) * 0.6626),76.59% calc(100% - var(--ridge-depth) * 0.6475),76.25% calc(100% - var(--ridge-depth) * 0.6293),75.92% calc(100% - var(--ridge-depth) * 0.6331),75.59% calc(100% - var(--ridge-depth) * 0.6112),75.25% calc(100% - var(--ridge-depth) * 0.5719),74.92% calc(100% - var(--ridge-depth) * 0.5446),74.58% calc(100% - var(--ridge-depth) * 0.531),74.25% calc(100% - var(--ridge-depth) * 0.5083),73.91% calc(100% - var(--ridge-depth) * 0.4758),73.58% calc(100% - var(--ridge-depth) * 0.4576),73.24% calc(100% - var(--ridge-depth) * 0.4357),72.91% calc(100% - var(--ridge-depth) * 0.4221),72.58% calc(100% - var(--ridge-depth) * 0.382),72.24% calc(100% - var(--ridge-depth) * 0.3389),71.91% calc(100% - var(--ridge-depth) * 0.3517),71.57% calc(100% - var(--ridge-depth) * 0.3359),71.24% calc(100% - var(--ridge-depth) * 0.3064),70.9% calc(100% - var(--ridge-depth) * 0.289),70.57% calc(100% - var(--ridge-depth) * 0.2874),70.23% calc(100% - var(--ridge-depth) * 0.2489),69.9% calc(100% - var(--ridge-depth) * 0.2337),69.57% calc(100% - var(--ridge-depth) * 0.233),69.23% calc(100% - var(--ridge-depth) * 0.2118),68.9% calc(100% - var(--ridge-depth) * 0.1778),68.56% calc(100% - var(--ridge-depth) * 0.121),68.23% calc(100% - var(--ridge-depth) * 0.0764),67.89% calc(100% - var(--ridge-depth) * 0.0325),67.56% calc(100% - var(--ridge-depth) * 0.0204),67.22% 100%,66.89% calc(100% - var(--ridge-depth) * 0.0061),66.56% calc(100% - var(--ridge-depth) * 0.0219),66.22% calc(100% - var(--ridge-depth) * 0.056),65.89% calc(100% - var(--ridge-depth) * 0.0923),65.55% calc(100% - var(--ridge-depth) * 0.121),65.22% calc(100% - var(--ridge-depth) * 0.149),64.88% calc(100% - var(--ridge-depth) * 0.1732),64.55% calc(100% - var(--ridge-depth) * 0.1989),64.21% calc(100% - var(--ridge-depth) * 0.2247),63.88% calc(100% - var(--ridge-depth) * 0.2542),63.55% calc(100% - var(--ridge-depth) * 0.2776),63.21% calc(100% - var(--ridge-depth) * 0.2988),62.88% calc(100% - var(--ridge-depth) * 0.3343),62.54% calc(100% - var(--ridge-depth) * 0.3366),62.21% calc(100% - var(--ridge-depth) * 0.3669),61.87% calc(100% - var(--ridge-depth) * 0.3949),61.54% calc(100% - var(--ridge-depth) * 0.4138),61.2% calc(100% - var(--ridge-depth) * 0.4274),60.87% calc(100% - var(--ridge-depth) * 0.4289),60.54% calc(100% - var(--ridge-depth) * 0.4508),60.2% calc(100% - var(--ridge-depth) * 0.4758),59.87% calc(100% - var(--ridge-depth) * 0.4939),59.53% calc(100% - var(--ridge-depth) * 0.5083),59.2% calc(100% - var(--ridge-depth) * 0.5265),58.86% calc(100% - var(--ridge-depth) * 0.5378),58.53% calc(100% - var(--ridge-depth) * 0.5144),58.19% calc(100% - var(--ridge-depth) * 0.4637),57.86% calc(100% - var(--ridge-depth) * 0.4501),57.53% calc(100% - var(--ridge-depth) * 0.4614),57.19% calc(100% - var(--ridge-depth) * 0.4395),56.86% calc(100% - var(--ridge-depth) * 0.4191),56.52% calc(100% - var(--ridge-depth) * 0.3971),56.19% calc(100% - var(--ridge-depth) * 0.379),55.85% calc(100% - var(--ridge-depth) * 0.3714),55.52% calc(100% - var(--ridge-depth) * 0.3495),55.18% calc(100% - var(--ridge-depth) * 0.3601),54.85% calc(100% - var(--ridge-depth) * 0.3888),54.52% calc(100% - var(--ridge-depth) * 0.4115),54.18% calc(100% - var(--ridge-depth) * 0.438),53.85% calc(100% - var(--ridge-depth) * 0.4607),53.51% calc(100% - var(--ridge-depth) * 0.4887),53.18% calc(100% - var(--ridge-depth) * 0.503),52.84% calc(100% - var(--ridge-depth) * 0.5129),52.51% calc(100% - var(--ridge-depth) * 0.5242),52.17% calc(100% - var(--ridge-depth) * 0.5446),51.84% calc(100% - var(--ridge-depth) * 0.5651),51.51% calc(100% - var(--ridge-depth) * 0.5719),51.17% calc(100% - var(--ridge-depth) * 0.5832),50.84% calc(100% - var(--ridge-depth) * 0.5862),50.5% calc(100% - var(--ridge-depth) * 0.5787),50.17% calc(100% - var(--ridge-depth) * 0.5696),49.83% calc(100% - var(--ridge-depth) * 0.5545),49.5% calc(100% - var(--ridge-depth) * 0.5378),49.16% calc(100% - var(--ridge-depth) * 0.5242),48.83% calc(100% - var(--ridge-depth) * 0.5121),48.49% calc(100% - var(--ridge-depth) * 0.4977),48.16% calc(100% - var(--ridge-depth) * 0.4826),47.83% calc(100% - var(--ridge-depth) * 0.4614),47.49% calc(100% - var(--ridge-depth) * 0.4433),47.16% calc(100% - var(--ridge-depth) * 0.4251),46.82% calc(100% - var(--ridge-depth) * 0.4077),46.49% calc(100% - var(--ridge-depth) * 0.382),46.15% calc(100% - var(--ridge-depth) * 0.3971),45.82% calc(100% - var(--ridge-depth) * 0.4448),45.48% calc(100% - var(--ridge-depth) * 0.4818),45.15% calc(100% - var(--ridge-depth) * 0.5068),44.82% calc(100% - var(--ridge-depth) * 0.5257),44.48% calc(100% - var(--ridge-depth) * 0.5189),44.15% calc(100% - var(--ridge-depth) * 0.5129),43.81% calc(100% - var(--ridge-depth) * 0.531),43.48% calc(100% - var(--ridge-depth) * 0.5325),43.14% calc(100% - var(--ridge-depth) * 0.5552),42.81% calc(100% - var(--ridge-depth) * 0.5877),42.47% calc(100% - var(--ridge-depth) * 0.6172),42.14% calc(100% - var(--ridge-depth) * 0.6316),41.81% calc(100% - var(--ridge-depth) * 0.6536),41.47% calc(100% - var(--ridge-depth) * 0.677),41.14% calc(100% - var(--ridge-depth) * 0.6997),40.8% calc(100% - var(--ridge-depth) * 0.7133),40.47% calc(100% - var(--ridge-depth) * 0.7186),40.13% calc(100% - var(--ridge-depth) * 0.7012),39.8% calc(100% - var(--ridge-depth) * 0.6899),39.46% calc(100% - var(--ridge-depth) * 0.6967),39.13% calc(100% - var(--ridge-depth) * 0.6884),38.8% calc(100% - var(--ridge-depth) * 0.6687),38.46% calc(100% - var(--ridge-depth) * 0.6483),38.13% calc(100% - var(--ridge-depth) * 0.6301),37.79% calc(100% - var(--ridge-depth) * 0.6157),37.46% calc(100% - var(--ridge-depth) * 0.5976),37.12% calc(100% - var(--ridge-depth) * 0.5794),36.79% calc(100% - var(--ridge-depth) * 0.5582),36.45% calc(100% - var(--ridge-depth) * 0.5416),36.12% calc(100% - var(--ridge-depth) * 0.5242),35.79% calc(100% - var(--ridge-depth) * 0.5038),35.45% calc(100% - var(--ridge-depth) * 0.4818),35.12% calc(100% - var(--ridge-depth) * 0.4614),34.78% calc(100% - var(--ridge-depth) * 0.4584),34.45% calc(100% - var(--ridge-depth) * 0.4614),34.11% calc(100% - var(--ridge-depth) * 0.4697),33.78% calc(100% - var(--ridge-depth) * 0.4955),33.44% calc(100% - var(--ridge-depth) * 0.5242),33.11% calc(100% - var(--ridge-depth) * 0.5507),32.78% calc(100% - var(--ridge-depth) * 0.5726),32.44% calc(100% - var(--ridge-depth) * 0.5938),32.11% calc(100% - var(--ridge-depth) * 0.612),31.77% calc(100% - var(--ridge-depth) * 0.6331),31.44% calc(100% - var(--ridge-depth) * 0.6551),31.1% calc(100% - var(--ridge-depth) * 0.6846),30.77% calc(100% - var(--ridge-depth) * 0.7209),30.43% calc(100% - var(--ridge-depth) * 0.7579),30.1% calc(100% - var(--ridge-depth) * 0.7443),29.77% calc(100% - var(--ridge-depth) * 0.7224),29.43% calc(100% - var(--ridge-depth) * 0.7035),29.1% calc(100% - var(--ridge-depth) * 0.7163),28.76% calc(100% - var(--ridge-depth) * 0.7345),28.43% calc(100% - var(--ridge-depth) * 0.7557),28.09% calc(100% - var(--ridge-depth) * 0.7451),27.76% calc(100% - var(--ridge-depth) * 0.7179),27.42% calc(100% - var(--ridge-depth) * 0.6967),27.09% calc(100% - var(--ridge-depth) * 0.6755),26.76% calc(100% - var(--ridge-depth) * 0.6604),26.42% calc(100% - var(--ridge-depth) * 0.6415),26.09% calc(100% - var(--ridge-depth) * 0.6271),25.75% calc(100% - var(--ridge-depth) * 0.6483),25.42% calc(100% - var(--ridge-depth) * 0.6672),25.08% calc(100% - var(--ridge-depth) * 0.6884),24.75% calc(100% - var(--ridge-depth) * 0.7103),24.41% calc(100% - var(--ridge-depth) * 0.7254),24.08% calc(100% - var(--ridge-depth) * 0.7375),23.75% calc(100% - var(--ridge-depth) * 0.7572),23.41% calc(100% - var(--ridge-depth) * 0.7791),23.08% calc(100% - var(--ridge-depth) * 0.7995),22.74% calc(100% - var(--ridge-depth) * 0.8154),22.41% calc(100% - var(--ridge-depth) * 0.8328),22.07% calc(100% - var(--ridge-depth) * 0.8321),21.74% calc(100% - var(--ridge-depth) * 0.7958),21.4% calc(100% - var(--ridge-depth) * 0.764),21.07% calc(100% - var(--ridge-depth) * 0.7458),20.74% calc(100% - var(--ridge-depth) * 0.7209),20.4% calc(100% - var(--ridge-depth) * 0.6929),20.07% calc(100% - var(--ridge-depth) * 0.6755),19.73% calc(100% - var(--ridge-depth) * 0.6687),19.4% calc(100% - var(--ridge-depth) * 0.652),19.06% calc(100% - var(--ridge-depth) * 0.6233),18.73% calc(100% - var(--ridge-depth) * 0.5938),18.39% calc(100% - var(--ridge-depth) * 0.5681),18.06% calc(100% - var(--ridge-depth) * 0.5393),17.73% calc(100% - var(--ridge-depth) * 0.5272),17.39% calc(100% - var(--ridge-depth) * 0.5287),17.06% calc(100% - var(--ridge-depth) * 0.5461),16.72% calc(100% - var(--ridge-depth) * 0.5651),16.39% calc(100% - var(--ridge-depth) * 0.5794),16.05% calc(100% - var(--ridge-depth) * 0.5976),15.72% calc(100% - var(--ridge-depth) * 0.6225),15.38% calc(100% - var(--ridge-depth) * 0.6399),15.05% calc(100% - var(--ridge-depth) * 0.6483),14.72% calc(100% - var(--ridge-depth) * 0.6619),14.38% calc(100% - var(--ridge-depth) * 0.6687),14.05% calc(100% - var(--ridge-depth) * 0.6853),13.71% calc(100% - var(--ridge-depth) * 0.7065),13.38% calc(100% - var(--ridge-depth) * 0.7292),13.04% calc(100% - var(--ridge-depth) * 0.7587),12.71% calc(100% - var(--ridge-depth) * 0.789),12.37% calc(100% - var(--ridge-depth) * 0.8169),12.04% calc(100% - var(--ridge-depth) * 0.8457),11.71% calc(100% - var(--ridge-depth) * 0.8691),11.37% calc(100% - var(--ridge-depth) * 0.8623),11.04% calc(100% - var(--ridge-depth) * 0.8487),10.7% calc(100% - var(--ridge-depth) * 0.8472),10.37% calc(100% - var(--ridge-depth) * 0.8298),10.03% calc(100% - var(--ridge-depth) * 0.8079),9.7% calc(100% - var(--ridge-depth) * 0.7829),9.36% calc(100% - var(--ridge-depth) * 0.7579),9.03% calc(100% - var(--ridge-depth) * 0.7504),8.7% calc(100% - var(--ridge-depth) * 0.7443),8.36% calc(100% - var(--ridge-depth) * 0.7413),8.03% calc(100% - var(--ridge-depth) * 0.7375),7.69% calc(100% - var(--ridge-depth) * 0.7375),7.36% calc(100% - var(--ridge-depth) * 0.7307),7.02% calc(100% - var(--ridge-depth) * 0.7307),6.69% calc(100% - var(--ridge-depth) * 0.7095),6.35% calc(100% - var(--ridge-depth) * 0.7148),6.02% calc(100% - var(--ridge-depth) * 0.7436),5.69% calc(100% - var(--ridge-depth) * 0.7685),5.35% calc(100% - var(--ridge-depth) * 0.7935),5.02% calc(100% - var(--ridge-depth) * 0.8162),4.68% calc(100% - var(--ridge-depth) * 0.8313),4.35% calc(100% - var(--ridge-depth) * 0.8411),4.01% calc(100% - var(--ridge-depth) * 0.8555),3.68% calc(100% - var(--ridge-depth) * 0.8714),3.34% calc(100% - var(--ridge-depth) * 0.8949),3.01% calc(100% - var(--ridge-depth) * 0.9168),2.68% calc(100% - var(--ridge-depth) * 0.938),2.34% calc(100% - var(--ridge-depth) * 0.9539),2.01% calc(100% - var(--ridge-depth) * 0.9652),1.67% calc(100% - var(--ridge-depth) * 0.975),1.34% calc(100% - var(--ridge-depth) * 0.9826),1.0% calc(100% - var(--ridge-depth) * 0.9864),0.67% calc(100% - var(--ridge-depth) * 0.9894),0.33% calc(100% - var(--ridge-depth) * 0.9932),0.0% calc(100% - var(--ridge-depth) * 1.0)
  );
}
/* layered contact + ambient shadow so the paper reads as lifted off the
   dark terrain underneath it (depth cue), rather than sitting flush */
.torn-edge{
  filter:
    drop-shadow(0 6px 14px rgba(3,21,14,.4))
    drop-shadow(0 30px 60px rgba(3,21,14,.4));
}

/* ---------- parchment exception: the torn-edge break (and the reusable
   .parchment-cutout panel) are the one place the site stays on its
   original light/parchment treatment inside the otherwise-dark Topo
   Frontier system. Restore every component's pre-dark-mode look, scoped
   to these containers only. ---------- */
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment){color:var(--ink);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) h1,
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) h2,
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) h3{color:var(--evergreen);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) a{color:var(--evergreen);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) a:hover{color:var(--vibrant);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .eyebrow{color:var(--orient);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .eyebrow::before{background:var(--orient);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .chip{color:var(--evergreen);border-color:var(--hair);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .icon-badge{background:rgba(41,90,66,.08);color:var(--evergreen);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .icon-badge--on-dark{background:rgba(247,242,232,.12);color:var(--punch);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .card{background:var(--card);border-color:var(--hair);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .meta{color:var(--muted);}
:is(.torn-top,.torn-bottom,.torn-both,.parchment-cutout,.section-parchment) .panel-stripe__row{border-bottom-color:var(--hair);}

/* ---------- "as featured in": now part of the dark, topo-textured world
   instead of a light break right after the hero. Logos are forced to a
   flat white silhouette so mixed-color press logos read cleanly on dark. ---------- */
.logos-dark{
  position:relative;overflow:hidden;
  background:var(--dark-gradient);color:var(--paper);
  padding:34px 0 130px;
}
/* The hero's own overlay (radial highlights + a horizontal darkening wash
   for text contrast) leaves its bottom edge lighter than this section's
   flat gradient start, which reads as a visible seam. Bridge it with a
   soft wash that picks up the hero's ending tone and fades into this
   section's own background over the first ~140px. */
.logos-dark::before{
  content:"";position:absolute;top:0;left:0;right:0;height:150px;
  background:linear-gradient(to bottom, rgba(30,60,40,.85) 0%, rgba(18,42,29,.5) 45%, rgba(18,42,29,0) 100%);
  pointer-events:none;
}
.logos-dark .featured-label{color:var(--light-sage);}
.logo-marquee-track img.logo-invert{
  filter:brightness(0) invert(1);
  opacity:.6;
}
.logo-marquee.on-dark{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* ---------- "how we think about it": dark evergreen with floating embers,
   matching the seats panel rather than standing apart as a parchment
   break — the parchment is reserved for the tearaway sections. ---------- */
.testi-dark{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg, var(--dark) 0%, var(--dark-lift) 45%, var(--evergreen) 100%);
}
.testi-dark .topo-tex{opacity:.34;}
.quote-dark{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg, var(--dark) 0%, var(--dark-lift) 45%, var(--evergreen) 100%);
  color:var(--paper);
  text-align:center;
}
.quote-dark .wrap{position:relative;z-index:2;max-width:720px;}
.quote-dark .cutout-quote{
  color:var(--paper);font-family:var(--font-d);font-weight:600;
  font-size:clamp(22px,3.6vw,32px);line-height:1.35;text-wrap:balance;margin-top:18px;
}
.quote-dark .cutout-quote cite{
  display:block;font:600 12px var(--font-s);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--light-sage);margin-top:20px;
}

/* ---------- campfire CTA, round two: topo bleeding up from the footer,
   a wider ambient firelight wash so the fire feels like it's lighting the
   whole section rather than sitting in an isolated box, and a staggered
   "presenting" reveal (eyebrow, then headline, then copy, then button)
   instead of the whole block fading in as one flat unit. ---------- */
.cta-topo-bleed{
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 62%);
  mask-image:linear-gradient(to top, #000 0%, transparent 62%);
}
.cta-dark--campfire .firelight-wash{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:150%;height:78%;
  background:radial-gradient(ellipse at 50% 100%, rgba(230,201,106,.22) 0%, rgba(230,201,106,.08) 42%, rgba(230,201,106,.02) 65%, transparent 80%);
  pointer-events:none;z-index:1;
}
.campfire-cta-content{display:flex;flex-direction:column;align-items:center;text-align:center;}
.campfire-cta-content > *{
  opacity:0;filter:blur(8px);transform:translateY(14px);
  transition:opacity .9s ease, filter .9s ease, transform .9s ease;
  margin-left:auto;margin-right:auto;
}
.campfire-cta-content.is-lit > *{opacity:1;filter:blur(0);transform:translateY(0);}
.campfire-cta-content > *:nth-child(1){transition-delay:.05s;}
.campfire-cta-content > *:nth-child(2){transition-delay:.22s;}
.campfire-cta-content > *:nth-child(3){transition-delay:.4s;}
.campfire-cta-content > *:nth-child(4){transition-delay:.58s;}
/* ---------- the campsite arrives lit but fireless: logs sit empty and the
   headline is not yet in frame. When the fire itself scrolls into view it
   catches (glow blooms, flame jumps up from the logs), and a beat later
   the message fades in just above it, in the rising glow -- "logs empty,
   then lit, then the offer appears in the smoke." ---------- */
.cta-dark--campfire .wrap{gap:28px;}
.campfire-cta-content{gap:18px;}
/* .campfire-ground: the homepage instance's ground-level layout. The
   .campfire graphic used to be a second flex child in .wrap, floating
   right under the copy with a fixed 28px gap regardless of the section's
   actual height. Now it's a direct child of the section, pinned to the
   true bottom edge (position:absolute;bottom:0, matching .cta-scene), so
   scrolling all the way to the section's bottom is what reveals it. The
   copy above needs its own reserved clearance for that pinned graphic --
   margin-bottom on the content block, sized to the campfire's height plus
   some breathing room above the ground -- since the campfire no longer
   contributes to the section's natural flow height. */
.campfire-ground{padding-top:104px;}
.campfire-ground .campfire-cta-content{margin-bottom:280px;}
.campfire-ground .campfire{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  margin-top:0;
}
@media (max-width:700px){
  .campfire-ground .campfire-cta-content{margin-bottom:210px;}
}
.campfire-fire{position:absolute;inset:0;}
.campfire-glow{width:480px;height:260px;bottom:8px;}
.campfire-glow-outer{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:720px;height:360px;
  background:radial-gradient(ellipse at 50% 100%, rgba(230,201,106,.18) 0%, rgba(230,201,106,.05) 45%, transparent 75%);
  filter:blur(4px);
}
.campfire-fire{
  transform-origin:50% 100%;
  opacity:0;transform:scale(.55);
  /* Lengthened from .8s and given a bigger overshoot (scale peaks past 1
     before settling) for a more pronounced "catch" -- combined with the
     JS-side delay before is-blazing is even added (see the ignite script),
     the fire now visibly takes a beat once the logs are in view, rather
     than igniting the instant the section scrolls in. */
  transition:opacity 1.1s cubic-bezier(.22,.9,.34,1), transform 1.2s cubic-bezier(.32,1.7,.4,1);
}
.campfire.is-blazing .campfire-fire{opacity:1;transform:scale(1);}
/* A brief bloom on the outer glow only, layered on top of the flame's own
   scale-in, so the ignition moment reads as a flare catching rather than
   a simple fade/grow. Keyframes restate the element's static
   left:50%/translateX(-50%) centering at every step since the animation
   overrides it while running. */
@keyframes campfireIgniteBloom{
  0%{opacity:0;transform:translateX(-50%) scale(.4);}
  55%{opacity:1;transform:translateX(-50%) scale(1.3);}
  100%{opacity:1;transform:translateX(-50%) scale(1);}
}
.campfire.is-blazing .campfire-glow-outer{animation:campfireIgniteBloom 1.3s cubic-bezier(.22,.9,.34,1) both;}
@media (prefers-reduced-motion:reduce){
  .campfire-cta-content > *{transition:none;opacity:1;filter:none;transform:none;}
  .campfire-fire{transition:none;opacity:1;transform:scale(1);}
  .campfire.is-blazing .campfire-glow-outer{animation:none;}
}
@media (max-width:700px){
  .campfire{height:160px;}
  .campfire-glow{width:340px;height:200px;}
  .campfire-glow-outer{width:460px;height:260px;}
  .cta-scene{height:170px;}
}

/* ---------- lemhi-campfire component (Round 22) -- Tim's supplied
   three-layer flame (outer lick, mid, hot inner core, each swaying/
   flickering on its own timing) with an ambient ember glow and rising
   sparks, self-contained and sized via the --lf-size custom property.
   Shared verbatim across every page that uses it (currently the
   homepage's big campfire CTA and the About page's small tent-side
   fire) so both stay visually identical; each usage only sets its own
   --lf-size and position via a page-scoped selector below. ---------- */
.lemhi-campfire{position:relative;width:var(--lf-size);height:var(--lf-size);}
.lemhi-campfire::before{
  content:"";position:absolute;left:50%;top:62%;width:220%;height:220%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(230,201,106,.34) 0%,rgba(196,104,45,.12) 32%,transparent 62%);
  animation:lf-glow 3s ease-in-out infinite;pointer-events:none;
}
.lemhi-campfire svg{position:relative;width:100%;height:100%;overflow:visible;}
.lemhi-campfire path{transform-box:fill-box;transform-origin:50% 100%;}
.lf-outer{animation:lf-sway 2.8s ease-in-out infinite;}
.lf-mid{animation:lf-sway 2.1s ease-in-out infinite reverse;}
.lf-inner{animation:lf-flick 1.3s ease-in-out infinite;}
.lf-sparks{position:absolute;left:50%;top:24%;width:0;height:0;}
.lf-sparks i{position:absolute;border-radius:50%;opacity:0;animation:lf-spark 3s ease-out infinite;}
@keyframes lf-sway{0%,100%{transform:rotate(-2deg) scaleY(1);}50%{transform:rotate(2deg) scaleY(1.05);}}
@keyframes lf-flick{0%,100%{transform:scale(1,1);}30%{transform:scale(.93,1.07);}65%{transform:scale(1.05,.95);}}
@keyframes lf-glow{0%,100%{opacity:.8;}50%{opacity:1;}}
@keyframes lf-spark{0%{transform:translate(0,0);opacity:0;}15%{opacity:1;}100%{transform:translate(var(--dx,6px),-110px);opacity:0;}}
@media (prefers-reduced-motion:reduce){.lemhi-campfire *,.lemhi-campfire::before{animation:none!important;}}

/* Homepage hookup: the .lemhi-campfire sits inside the existing .campfire
   wrapper (still id="campfireGraphic", still what the ignite-on-scroll
   IntersectionObserver in index.html's inline script toggles .is-blazing
   on) in place of the old .campfire-fire/.campfire-logs pairing. Sized to
   --lf-size:190px/160px to match .campfire's own former height:190px/160px
   footprint exactly ("the same size that it is"). bottom:0 with no extra
   lift -- unlike the old logs, which sat 16px above .campfire's own
   bottom edge -- puts its base flush on the true floor of the scene (the
   same bottom:0 edge .cta-scene's mountain fill and .campfire itself
   already sit on), so it reads as grounded rather than hovering in front
   of the mountain. The opacity/scale transition mirrors the old
   .campfire-fire ignite so the "catches when it scrolls into view" beat
   is preserved with the new asset. */
.campfire-ground .campfire .lemhi-campfire{
  --lf-size:190px;
  position:absolute;left:50%;bottom:0;transform:translateX(-50%) scale(.55);
  transform-origin:50% 100%;opacity:0;
  transition:opacity 1.1s cubic-bezier(.22,.9,.34,1), transform 1.2s cubic-bezier(.32,1.7,.4,1);
}
.campfire-ground .campfire.is-blazing .lemhi-campfire{
  opacity:1;transform:translateX(-50%) scale(1);
}
@media (prefers-reduced-motion:reduce){
  .campfire-ground .campfire .lemhi-campfire{transition:none;opacity:1;transform:translateX(-50%) scale(1);}
}
@media (max-width:700px){
  .campfire-ground .campfire .lemhi-campfire{--lf-size:160px;}
}

/* ==========================================================================
   Section template system — six reusable full-bleed section treatments
   (picked by Tim from the panel-concepts review) so a page reads with real
   variety instead of every section repeating the same flat dark-evergreen
   gradient. Compose with the existing .section / .section-tight (padding
   only) — each class below supplies background + text-color scoping only.
   Pick a treatment by what the content IS, not by rotating through them.
   ========================================================================== */

/* Parchment Field — full-width light break. Joins the existing
   parchment-exception color scoping (see :is(...,.section-parchment) rules
   above), so eyebrow/headline/chip/link colors flip to the light-mode set
   automatically. */
.section-parchment{background:var(--paper);}

/* Evergreen Anchor — the dark default, formalized with a soft radial
   highlight so it has more depth than a flat fill. Use this instead of a
   bare .section when a dark section is needed but shouldn't feel inert. */
.section-evergreen{
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(230,201,106,.09), transparent 60%),var(--dark-gradient);
  color:var(--paper);
}

/* Terracotta Spotlight — full orange-brown wash, reserved for the ONE stat
   or quote per page that should stop the scroll. Don't use twice on the
   same page. */
.section-terracotta{
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse 800px 500px at 50% 0%, rgba(230,138,92,.22), transparent 65%),linear-gradient(160deg, #3A1C10 0%, #5C2C16 55%, #7A3B1E 100%);
  color:var(--paper);
}
.section-terracotta .eyebrow{color:var(--punch);}
.section-terracotta .eyebrow::before{background:var(--punch);}

/* Golden Hour — the boldest swing, full yellow. Use sparingly (about once
   per long page) for the single number that should be the thing people
   remember. Ink-dark text, not the usual paper/evergreen pairing. */
.section-golden{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg, #F3D989 0%, #E6C96A 55%, #D9B655 100%);
  color:#3A2B0E;
}
.section-golden h1,.section-golden h2,.section-golden h3{color:#3A2B0E;}
.section-golden .eyebrow{color:#3A2B0E;}
.section-golden .eyebrow::before{background:#3A2B0E;}

/* Split Duotone — one section, two fills, straight down the middle. Built
   for paired concepts (before/after, us/them, sell/deliver) where the
   contrast between the two halves IS the content. Collapses to a single
   column on narrow screens. */
.section-duotone{display:grid;grid-template-columns:1fr 1fr;}
.section-duotone .duotone-half{padding:64px 44px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.section-duotone .duotone-half--dark{background:linear-gradient(165deg, var(--dark) 0%, var(--evergreen) 100%);color:var(--paper);}
.section-duotone .duotone-half--light{background:var(--paper);color:var(--ink);}
.section-duotone .duotone-half--dark h3{color:var(--paper);}
.section-duotone .duotone-half--dark p{color:var(--light-sage);}
.section-duotone .duotone-half--light h3{color:var(--evergreen);}
.section-duotone .duotone-half--light p{color:var(--muted);}
.section-duotone .duotone-half--light .eyebrow{color:var(--orient);}
.section-duotone .duotone-half--light .eyebrow::before{background:var(--orient);}
@media (max-width:800px){
  .section-duotone{grid-template-columns:1fr;}
}

/* Vista — an illustrated mountain-ridge + treeline scene used as a
   full-bleed background, in place of a stock team/office photo (Lemhi
   avoids stock-photo energy; this stays in the same vector/topo language
   as the campfire CTA's mountain silhouettes). One ridge illustration,
   reused everywhere — only the sky-wash color changes per instance, via
   the --dawn / --misty / --dusk modifier, so repeated use across pages
   doesn't read as the same photo recycled. */
.section-vista{position:relative;overflow:hidden;color:var(--paper);padding:108px 0 96px;}
.section-vista__sky{position:absolute;inset:0;}
.section-vista--dawn .section-vista__sky{background:linear-gradient(180deg,#3A1C10 0%,#5C2C16 45%,#7A3B1E 78%,#8B4A1F 100%);}
.section-vista--misty .section-vista__sky{background:linear-gradient(180deg,#0A1F15 0%,#132E20 45%,#1E4530 78%,#295A42 100%);}
.section-vista--dusk .section-vista__sky{background:linear-gradient(180deg,#0F2418 0%,#1a3a2c 45%,#2a4a3a 78%,#3E7A5C 100%);}
.section-vista__ridges{position:absolute;inset:0;width:100%;height:100%;}
.section-vista .topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.1;mix-blend-mode:overlay;}
.section-vista__wash{position:absolute;inset:0;background:rgba(15,36,24,.4);}
.section-vista .wrap{position:relative;z-index:2;}
@media (max-width:700px){
  .section-vista{padding:88px 0 72px;}
}

/* ==========================================================================
   Round two — Tim's picks from the panel-concepts review, reacting to
   feedback that Terracotta Spotlight and the original Golden Hour read as
   too stark/aggressive for the brand. These four are additive to the six
   above, not replacements: Terracotta/Golden stay defined (other pages may
   still use them) but About uses this set instead. Vista Overlook's own
   ridge/topo language carries through all of them on purpose, so a page
   built from this set reads as one continuous piece of terrain rather than
   four unrelated panel styles.
   ========================================================================== */

/* Bighorn silhouette — a brief homage to Louie the mascot, never the
   mascot art itself. Same flat silhouette reused everywhere it appears
   (Ridgeline Watch, Overlook Duotone); only position/size change per
   placement. Fades and rises in on scroll via the .is-inview toggle. */
.bighorn-silhouette{
  fill:#0A160F;opacity:0;transform:translateY(10px);
  transition:opacity 1.4s ease .3s, transform 1.4s cubic-bezier(.22,.9,.3,1) .3s;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.bighorn-silhouette.is-inview{opacity:.92;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .bighorn-silhouette{transition:none;opacity:.92;transform:none;}
}

/* Ridgeline Watch — Vista Overlook, extended: the same ridge geometry now
   moves in parallax layers as the page scrolls (JS sets each path's
   transform from data-depth; see reveal.js), and a bighorn silhouette
   keeps watch on the high line. The sky is a softer "alpenglow" wash — the
   yellow-background idea Tim wants to keep chasing, kept out of the
   Golden-Hour-is-too-stark trap by staying a minority tone low in the sky
   rather than a full field. */
.section-ridgeline{position:relative;overflow:hidden;color:var(--paper);padding:112px 0 100px;}
.section-ridgeline__sky{position:absolute;inset:0;background:linear-gradient(180deg,#18251f 0%,#26402f 42%,#3a5a44 72%,#5c7f5e 100%);}
.section-ridgeline__sky::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 900px 420px at 50% 100%, rgba(230,201,106,.16), transparent 70%);}
.section-ridgeline__ridges{position:absolute;inset:0;width:100%;height:100%;}
.section-ridgeline__ridges path{will-change:transform;}
.section-ridgeline .topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.08;mix-blend-mode:overlay;}
.section-ridgeline__wash{position:absolute;inset:0;background:rgba(15,36,24,.32);}
.section-ridgeline .bighorn-silhouette{position:absolute;left:63%;bottom:47%;width:64px;height:auto;}
.section-ridgeline .wrap{position:relative;z-index:2;}
@media (max-width:720px){
  .section-ridgeline .bighorn-silhouette{left:70%;width:46px;}
}

/* First Light — the yellow-background idea, dialed back: gold lives as a
   slow, breathing glow at the center of a dark evergreen field instead of
   covering the whole panel. Built for the ONE stat per page that should
   feel like a moment arriving, not Golden Hour's full 100% wash. */
.section-firstlight{position:relative;overflow:hidden;background:var(--dark-gradient);color:var(--paper);}
.section-firstlight__glow{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:64%;height:120%;background:radial-gradient(ellipse at center, rgba(230,201,106,.38) 0%, rgba(230,201,106,.14) 38%, transparent 70%);animation:firstlightBreathe 7s ease-in-out infinite;pointer-events:none;}
.section-firstlight .topo-tex{opacity:.16;}
.section-firstlight .wrap{position:relative;z-index:2;}
@keyframes firstlightBreathe{
  0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}
}
@media (prefers-reduced-motion:reduce){ .section-firstlight__glow{animation:none;} }

/* Compass Spotlight — replaces Terracotta Spotlight's full orange wash.
   Field stays dark evergreen; orange goes back to its usual job (the
   needle, the eyebrow) per the accent hierarchy, while a slow-rotating
   line-art compass rose gives the panel its own quiet motion behind the
   one stat that should stop the scroll. */
.section-compass{position:relative;overflow:hidden;background:var(--dark-gradient);color:var(--paper);}
.section-compass__rose{position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);opacity:.16;animation:compassSpin 50s linear infinite;pointer-events:none;}
.section-compass .wrap{position:relative;z-index:2;}
@keyframes compassSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .section-compass__rose{animation:none;} }

/* Overlook Duotone — Split Duotone paired with Vista Overlook for once,
   kept exactly as rare as Split Duotone always was. Swap one
   .duotone-half for .duotone-half--vista to get the illustrated ridge
   (with its own bighorn silhouette) instead of a flat dark fill. */
.section-duotone .duotone-half--vista{position:relative;overflow:hidden;padding:0;min-height:420px;background:linear-gradient(180deg,#12241b 0%,#1f3a2a 45%,#345740 78%,#4c7256 100%);color:var(--paper);display:block;}
.section-duotone .duotone-half--vista .topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.09;mix-blend-mode:overlay;}
.section-duotone .duotone-half--vista__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%;}
.section-duotone .duotone-half--vista .bighorn-silhouette{position:absolute;left:58%;bottom:38%;width:52px;}
.section-duotone .duotone-half--vista .duotone-half__content{position:relative;z-index:2;height:100%;padding:56px 44px;display:flex;flex-direction:column;justify-content:flex-end;}

/* Waypoint Fold — a third "not-green" panel (alongside Parchment Field):
   parchment with a barely-there map fold that shifts as if the paper is
   settling, and a compass pin that drops onto a milestone as the section
   arrives. Built for a founding date or timeline moment, not a workhorse. */
.section-fold{position:relative;background:var(--paper);overflow:hidden;}
.section-fold__crease{position:absolute;inset:-10% -10%;background:linear-gradient(115deg, transparent 42%, rgba(41,90,66,.05) 47%, rgba(41,90,66,.09) 50%, rgba(41,90,66,.05) 53%, transparent 58%);animation:foldShift 12s ease-in-out infinite alternate;pointer-events:none;}
@keyframes foldShift{0%{transform:translateX(0);}100%{transform:translateX(2.5%);}}
@media (prefers-reduced-motion:reduce){ .section-fold__crease{animation:none;} }
.map-pin{width:34px;height:34px;transform:translateY(-26px) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;}
.map-pin.is-inview{transform:translateY(0) scale(1);opacity:1;}
@media (prefers-reduced-motion:reduce){ .map-pin{transition:none;opacity:1;transform:none;} }

/* ==========================================================================
   About page rebuild, round two — Tim's Atlassian/Fivetran/Storyblok-
   inspired structure: photo hero, mission/vision, values, investors, team,
   a clickable horizontal "Lemhi Story" journey, and a Join-The-Team CTA.
   New, page-specific components; the winning-seven + round-two panels above
   still carry the mission/vision, values, and investor sections.
   ========================================================================== */

/* Photo hero — .hero-dark's gradient + topo, split into two columns so the
   team's own heart-cropped photo (their existing culture-photo treatment,
   see team-photo.jpg) sits beside the headline instead of trying to force
   an oddly-shaped cutout into a full-bleed cover background. */
.hero-photo{position:relative;overflow:hidden;background:var(--dark-gradient);color:var(--paper);padding:104px 0 0;}
.hero-photo .topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;}
.hero-photo .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero-photo__photo{display:flex;justify-content:center;}
.hero-photo__photo img{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 18px 40px rgba(3,21,14,.5));}
@media (max-width:900px){
  .hero-photo .wrap{grid-template-columns:1fr;text-align:center;}
  .hero-photo__photo{order:-1;}
  .hero-photo__photo img{max-width:280px;}
}

/* Featured-in slider, moved up under the hero (round 16) -- same exact
   marquee markup/classes as the homepage's .lemhi-hero-v4__logos, just
   without that block's huge padding-bottom (which exists only to clear
   the homepage's torn-paper overlap; this page's next section is plain
   parchment, so a normal divider + spacing is enough here). */
.hero-photo__logos{
  position:relative;z-index:2;
  padding:40px clamp(22px,4vw,54px) 56px;
  width:min(100%,1280px);margin:56px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:28px;
  border-top:1px solid rgba(247,242,232,.1);
}
.hero-photo__logos .featured-label{
  font:500 13px var(--font-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--light-sage);white-space:nowrap;text-align:center;
}
@media (max-width:720px){
  .hero-photo__logos{padding-left:20px;padding-right:20px;}
}

/* Gold-hover card — the "With Lemhi you can..." card treatment
   (.outcome-card / .seat-card, both dark-background) mirrored onto the
   About page's other interactive tiles, per Tim's Round-13 note that the
   home page's gold hover-state should carry over here too. Two context
   variants share the same lift + gold-border + shadow motion; only the
   resting card color changes so it reads correctly on dark vs. parchment
   sections. */
.gold-hover-card{
  display:block;border-radius:var(--r-md);border:1px solid transparent;
  transition:transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.gold-hover-card--on-dark{background:rgba(247,242,232,.055);border-color:rgba(247,242,232,.16);}
.gold-hover-card--on-dark:hover{
  transform:translateY(-5px);
  background:rgba(247,242,232,.1);
  border-color:rgba(230,201,106,.4);
  box-shadow:0 16px 34px rgba(3,21,14,.28);
}
.gold-hover-card--on-light{background:var(--card);border-color:var(--hair);}
.gold-hover-card--on-light:hover{
  transform:translateY(-5px);
  background:#fff;
  border-color:rgba(230,201,106,.55);
  box-shadow:0 16px 34px rgba(41,90,66,.16);
}

/* Values grid — five icon-led cards, Atlassian's "values to live by"
   pattern. Sits on Evergreen Anchor so the icon-badge--on-dark treatment
   applies automatically. Click-to-flip: .value-card is the perspective
   frame, .value-card__inner is what actually rotates 180deg on the Y
   axis, and front/back are absolutely stacked faces with
   backface-visibility hidden so only one is ever legible at a time. */
.values-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;}
.value-card{perspective:1400px;}
.value-card__inner{
  position:relative;width:100%;min-height:216px;cursor:pointer;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.value-card.is-flipped .value-card__inner{transform:rotateY(180deg);}
.value-card__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;justify-content:center;
  padding:26px 20px;border-radius:var(--r-md);
  background:rgba(247,242,232,.05);border:1px solid rgba(159,191,174,.14);
  transition:border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.value-card__face h3{font-size:16px;color:var(--paper);transition:color .28s ease;}
.value-card__icon{width:30px;height:30px;color:var(--light-sage);stroke-width:1.6;transition:color .28s ease;}
/* Round 18: the constellation-dot treatment on these icons (small gold
   star points at each icon's vertices) didn't land -- "good swing, just
   not right" -- so it's gone. Plain line icons, front and back. */
.value-card__icon--back{width:24px;height:24px;color:var(--light-sage);stroke-width:1.6;}
.value-card__face--back{
  transform:rotateY(180deg);
  background:rgba(230,201,106,.09);border-color:rgba(230,201,106,.4);
}
.value-card__face--back p{font-size:13.5px;line-height:1.55;color:var(--paper);margin:0;}
.value-card:not(.is-flipped) .value-card__inner:hover .value-card__face--front{
  border-color:rgba(230,201,106,.5);
  background:rgba(247,242,232,.1);
  box-shadow:0 14px 30px rgba(3,21,14,.26);
}
.value-card:not(.is-flipped) .value-card__inner:hover .value-card__face--front h3,
.value-card:not(.is-flipped) .value-card__inner:hover .value-card__icon{color:var(--punch);}
.value-card__inner:focus-visible .value-card__face--front{border-color:var(--punch);outline:none;}
@media (max-width:980px){ .values-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .values-grid{grid-template-columns:1fr;} .value-card__inner{min-height:190px;} }
@media (prefers-reduced-motion:reduce){ .value-card__inner{transition:none;} }

/* Investors row — real VC-firm logo marks, each tile linking out to that
   firm's own site. Heights are set per-logo (not one shared rule) because
   the three marks have very different natural proportions -- SSV is a
   stacked icon-over-wordmark, the other two are single-line wordmarks --
   so matching height alone would make SSV read tiny; these values were
   tuned so the three sit at roughly the same visual weight. Same
   gold-hover-card lift as the rest of the page. */
.investors-row{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.investor-tile{display:flex;align-items:center;justify-content:center;padding:22px 32px;min-width:200px;}
.investor-tile img{width:auto;max-width:100%;}

/* Team cards — Round 20: real headshots are in now, in a "topo frame"
   instead of the old plain circle. The frame is the same idea as the
   gold contour-line cutout on the hero team photo above (an organic,
   topographic-map-style double outline the photo sits inside), but
   recolored evergreen since this section sits on the parchment card
   background rather than the dark hero. The blob shape is one shared
   clip-path (defined once, referenced by every card, see the hidden
   <svg><defs> in the markup) so all five photos read as one consistent
   die-cut, not five different silhouettes.

   Hover keeps the same language the rest of the page already uses for a
   "there's more here" cue (gold-hover-card's lift + accent shift): the
   frame lifts and scales up slightly, the ring color intensifies from
   evergreen to the brighter vibrant green, and a "View LinkedIn" pill
   fades up over the photo. Every card links out to that person's real
   LinkedIn profile. */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 22px;margin-top:8px;}
.team-card{display:flex;flex-direction:column;align-items:center;gap:2px;width:164px;text-decoration:none;}
.team-card__frame{position:relative;width:164px;height:164px;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.team-card:hover .team-card__frame{transform:scale(1.055);}
/* Round 21: each photo now clips to its own variant shape (5 distinct
   frames instead of one shape repeated), set per-card via an inline
   clip-path style on the <img> itself rather than one shared class rule
   here -- see the per-card markup. */
.team-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.team-card__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
/* The two ring shapes live once in a shared <defs> (see the hidden <svg>
   at the top of the team section) and each card pulls them in with
   <use>. A <use> clone renders with the referenced path's own
   fill/stroke attributes (stroke="currentColor" on the defs path), so
   color has to be driven through the *use* element's inherited
   `color` -- not a class rule targeting the clone directly, which the
   clone's shadow content won't pick up. */
.team-card__rings .ring1{color:var(--evergreen);transition:color .3s ease;}
.team-card__rings .ring2{color:var(--sage);opacity:.7;transition:color .3s ease,opacity .3s ease;}
.team-card:hover .team-card__rings .ring1{color:var(--vibrant);}
.team-card:hover .team-card__rings .ring2{color:var(--vibrant);opacity:.9;}
.team-card__hover{
  position:absolute;left:50%;bottom:16px;transform:translate(-50%,8px);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  background:var(--dark-deep);color:var(--paper);font:600 11.5px var(--font-s);
  padding:6px 13px;border-radius:var(--r-pill);
  opacity:0;transition:opacity .28s ease,transform .28s ease;pointer-events:none;
  box-shadow:0 8px 18px rgba(3,21,14,.32);
}
.team-card:hover .team-card__hover{opacity:1;transform:translate(-50%,0);}
.team-card__name{font:700 15px var(--font-s);color:var(--ink);transition:color .28s ease;margin-top:14px;}
.team-card:hover .team-card__name{color:var(--evergreen);}
.team-card__title{font-size:13.5px;color:var(--muted);}
@media (max-width:640px){
  .team-grid{gap:26px 16px;}
  .team-card{width:132px;}
  .team-card__frame{width:132px;height:132px;}
}

/* The Lemhi Story — a clickable horizontal journey. A row of waypoint
   buttons (styled as trail markers, extending the Trailhead Markers
   language from the panel-concepts review) drives a single content panel
   below via JS toggling [data-step]/[data-panel] visibility -- no anchor
   links, no page reload, matches the "click a milestone, the story
   updates" pattern Tim flagged on Fivetran's page.

   The trail itself is drawn, not styled: journey.js measures each
   .journey__dot's real on-screen center and threads a bezier through
   those exact points (see the file for why), so the line is guaranteed
   to pass through every dot -- "wavy" comes from a small alternating
   perpendicular bulge between dots, the same organic, hand-traced feel
   as the trailblazer.js margin rail, in the site's yellow accent instead
   of a straight repeating-gradient bar. */
/* Background, round two: Tim wanted a darker green at the very top (not
   the bright branded evergreen) so it reads as clearly darker than the
   values/team sections above it, still fading down through Forest Ink to
   match where .cta-night picks up. The topo texture now carries more of
   the "green" read at the top -- higher base opacity -- and is masked to
   fade out before the gradient bottoms out, so it doesn't sit as visible
   texture on top of near-black (which just looked muddy). */
.journey{position:relative;overflow:hidden;background:linear-gradient(180deg, var(--dark-lift) 0%, var(--dark) 55%, var(--ink) 100%);color:var(--paper);}
.journey .topo-tex{
  opacity:.4;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 80%);
  mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 80%);
}
/* Round 19: a few small stars at the very top and bottom edges of the
   section -- the same night-sky language as the CTA below, poking in here
   too instead of starting cold at the CTA boundary. Kept to the edges
   (top:2-5%, top:94-98%) rather than scattered throughout so it reads as
   the starfield bleeding in at the seams, not a second full night sky
   competing with the constellation art in the middle of the section. */
.journey__stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.journey__trail{position:relative;z-index:1;margin:0 auto 8px;max-width:920px;padding-top:6px;}
/* Round 17: the art used to sit absolutely positioned behind the panel
   copy as a low-opacity backdrop watermark -- fine when it was faint, but
   once it became a bright drawn-on constellation (round 16) it started
   fighting the text on top of it for legibility. Restructured into an
   actual two-column layout instead: text on the left, art in its own
   column on the right, nothing overlapping. */
.journey__panels-frame{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;
}
.journey__art{position:relative;order:2;width:100%;max-width:360px;aspect-ratio:1/1;justify-self:end;pointer-events:none;z-index:0;}
/* Round 16: the watermark illustrations became literal constellations --
   fixed "star" points per step, connected by a thin gold line that draws
   itself on (stroke-dashoffset animated to 0 by journey.js, which measures
   each path's real length rather than a hardcoded dasharray) whenever that
   step becomes active, and un-draws when you move to another step. Ties
   the story art to the same night-sky language as the CTA below it. */
.journey__art svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease;}
.journey__art svg.is-active-art{opacity:1;}
.journey__art .const-line{
  fill:none;stroke:var(--punch);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;filter:drop-shadow(0 0 4px rgba(230,201,106,.5));
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.journey__art .const-star{fill:var(--paper);opacity:.8;transition:opacity .4s ease;}
.journey__art .const-star--major{fill:var(--punch);}
/* ---------- constellation variants for the reworked Lemhi Story stops:
   a dim/faint tier (scattered uncharted stars, a "turned back" branch),
   a dotted "route" line kept OUT of the .const-line draw-on mechanism
   (journey.js unconditionally overwrites stroke-dasharray on every
   .const-line with its own full-path-length value to drive the reveal
   wipe, which would stomp any dash pattern given to it via CSS -- so the
   route line uses its own class and simply fades in with the panel
   instead of wiping on), and a stronger glow for the sunrise stop. ---------- */
.journey__art .const-star--faint{opacity:.32;}
.journey__art svg.is-active-art .const-star--faint{animation:constTwinkleFaint 3.2s ease-in-out infinite;}
@keyframes constTwinkleFaint{0%,100%{opacity:.2;}50%{opacity:.42;}}
.journey__art .const-line--faint{opacity:.3;filter:none;}
.journey__art .const-line--dim{opacity:.55;}
.journey__art .const-route{
  fill:none;stroke:var(--punch);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:.1 7;opacity:.75;
  /* v2: the map's route (the only stop that still uses const-route --
     stop 5's was removed) now reveals left-to-right AFTER the outline
     finishes, instead of just fading in with the parent svg at the same
     time as the outline. clip-path avoids the usual getTotalLength/
     dashoffset "draw" trick because that trick works by temporarily
     replacing the dot dasharray with one giant dash spanning the whole
     path -- which would erase the dotted look while it draws. inset()
     percentages resolve against this path's own bounding box (fill-box),
     so the reveal tracks its actual horizontal extent regardless of the
     stop's specific coordinates. */
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.4,0,.2,1);
  transition-delay:1.2s; /* matches the map outline's own 1.2s draw time below */
}
.journey__art svg.is-active-art .const-route{clip-path:inset(0 0% 0 0);}
.journey__art .const-star--sun-glow{filter:drop-shadow(0 0 7px rgba(230,201,106,.85));}
@media (prefers-reduced-motion:reduce){
  .journey__art .const-star--faint{animation:none;}
  .journey__art .const-route{transition:none;}
}
/* Round 19: each illustration used to carry one extra "lone" star off to
   the side, unconnected to the drawn line -- meant to read as ambient sky,
   but it just looked like a stray dot that didn't belong to the shape.
   Removed; every star left is now a real vertex of its constellation. */
.journey__art svg.is-active-art .const-star{animation:constTwinkle 2.8s ease-in-out infinite;}
@keyframes constTwinkle{0%,100%{opacity:.55;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .journey__art .const-line{transition:none;}
  .journey__art svg.is-active-art .const-star{animation:none;}
}

/* ---------- v2 per-stop animation sequencing (all pure CSS: every stop's
   art is keyed off the existing svg.is-active-art toggle journey.js
   already flips on click, so timing is just transition-delay/animation-
   delay stacked on top of the base draw-on mechanism above -- no new JS
   needed). ---------- */

/* Stop 1, the folded map: outline draws faster (1.2s) than the site's
   default 1.5s so the route (delayed 1.2s above) starts right as the
   outline finishes, never overlapping it. */
.journey__art .const-line.const-line--map-outline{transition-duration:1.2s;}

/* Stop 2, the mountain range: down to one ridgeline (the 3-layer version
   was noise -- the mid/back ridges carried no stars and just cluttered the
   panel). */
.journey__art .const-line.const-line--ridge-front{transition-delay:0s;}

/* Stop 3, the fork: stem, then the faded turn-back branch, then the
   bright push-on branch last -- the choice is drawn after the doubt. */
.journey__art .const-line.const-line--fork-back{transition-delay:.3s;}
.journey__art .const-line.const-line--fork-push{transition-delay:.6s;}

/* Stop 4, triumphing together: three separate paths (family, guide,
   allies) converging on one shared point, staggered so they visibly
   arrive one after another rather than all at once. The shared point
   itself pops in (.const-star--arrive) once the last path lands. */
.journey__art .const-line.const-line--converge-a{transition-delay:0s;}
.journey__art .const-line.const-line--converge-b{transition-delay:.35s;}
.journey__art .const-line.const-line--converge-c{transition-delay:.7s;}

/* Stop 5, the compass: cardinals first, diagonals after. */
.journey__art .const-line.const-line--compass-diag{transition-delay:.4s;}

/* Shared "arrive" treatment for a node that shouldn't exist yet -- the
   map's endpoint (stop 1) and the compass's north point (stop 5) -- until
   the line reaching it finishes drawing, at which point it pops in with
   one pulse and settles into the same continuous twinkle every other
   star gets. Two animations, so animation-delay is set per-instance
   inline as a matching comma-separated pair (e.g. "2.2s, 2.8s"): the
   pulse's own delay, then the twinkle's (timed to start right as the
   pulse ends, so they never overlap and glitch). Each stop's delay is
   timed to when ITS OWN feeding line-segment finishes revealing, not the
   svg's overall reveal duration: for stop 1 that's the dotted route
   (finishes at 2.2s -- the inline "2.2s, 2.8s"), for stop 5 it's just the
   north cardinal ray, the FIRST of the 4 sub-paths drawn inside one
   combined <path> (so it finishes far earlier than the full cardinal
   reveal despite sharing its 1.5s transition -- measured empirically at
   ~0.5s). Stop 5's delay used to be "2s, 2.6s", copied from roughly the
   diagonals' finish time instead of the north ray's own -- a ~1.5s dead
   gap where the ray had plainly already arrived and the star just sat
   there invisible (Tim: "the top star shows up delayed for some
   reason"). Fixed to "0.5s, 1.1s" to match the ray it's actually tied to. */
.journey__art .const-star--arrive{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;}
.journey__art svg.is-active-art .const-star--arrive{
  animation-name:constArrive, constTwinkle;
  animation-duration:.6s, 2.8s;
  animation-timing-function:cubic-bezier(.34,1.56,.64,1), ease-in-out;
  animation-iteration-count:1, infinite;
  animation-fill-mode:both, none;
}
@keyframes constArrive{0%{opacity:0;transform:scale(.3);}55%{opacity:1;transform:scale(1.55);}100%{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){
  .journey__art .const-star--arrive,
  .journey__art svg.is-active-art .const-star--arrive{opacity:1;transform:scale(1);animation:none;}
}

/* ---------- highlight-sweep on each panel's one bracketed phrase. Same
   background-size-driven "highlighter" mechanism as the site-wide
   .hl-sweep (box-decoration-break:clone so a phrase that wraps still
   highlights every line it touches), but its own class/colors: a low-
   opacity gold marker band low in the line (60% of line-height, like a
   real highlighter pen) instead of a solid fill, since a solid band in
   .hl-sweep's colors wouldn't read against this section's dark green,
   and gold/yellow is the only accent this dark background gets (no
   orange). Timed with transition-delay/duration alone, keyed off the
   existing .journey__panel.is-active toggle -- no JS needed here either.
   Body copy itself sits one notch below full brightness so the swept
   phrase reads as popping up TO full cream, not just gaining a
   background. ---------- */
.journey__panel p{color:rgba(247,242,232,.74);}
/* Round (Tim: "mirror the same highlights we're doing on the home
   page"): matches .hl-sweep's own mechanism (background-size-driven
   highlighter box, box-decoration-break:clone) but with the fill/text
   pair flipped for this section's dark-on-dark surface -- a solid
   Evergreen box would disappear against this section's own dark green
   background, so here the box sweeps in solid Punch yellow (the
   brand's one accent for dark surfaces) and the text inverts to
   Evergreen for contrast against it, the mirror image of hl-sweep's
   light-surface green-box/yellow-text pairing. */
.journey__hl{
  background-image:linear-gradient(var(--punch), var(--punch));
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:0 50%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:.05em .26em;
  margin:0 -.16em;
  border-radius:4px;
  font-weight:700;
  color:inherit;
  transition:background-size 1.05s cubic-bezier(.22,.9,.3,1), color .6s ease .35s;
}
.journey__panel.is-active .journey__hl{
  background-size:100% 100%;
  color:var(--evergreen);
}
@media (prefers-reduced-motion:reduce){
  .journey__hl{transition:none;}
}
@media (max-width:1100px){
  .journey__panels-frame{grid-template-columns:1fr;}
  .journey__art{display:none;}
}
.journey__line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.journey__line path{fill:none;stroke:var(--punch);stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:.1 11;opacity:.9;}
/* overflow-x:auto here (needed so the row can scroll on narrow viewports)
   implicitly computes overflow-y to auto too, per spec, once either axis
   isn't visible -- so with no padding-top the active dot's scale(1.15)
   hover/active transform pushed its top ~1px past the clipping box and
   got a flat top sheared off. padding-top mirrors padding-bottom so the
   scaled-up dot has the same clearance on both sides. */
.journey__steps{position:relative;display:flex;justify-content:space-between;gap:6px;overflow-x:auto;padding-top:6px;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.journey__step{
  flex:1 1 0;min-width:108px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;padding:0 4px;font-family:var(--font-s);
}
.journey__dot{position:relative;z-index:2;width:14px;height:14px;border-radius:50%;background:var(--dark-lift);border:2px solid var(--sage);transition:background .25s ease, border-color .25s ease, transform .25s ease;}
.journey__year{font:700 12.5px var(--font-s);letter-spacing:.06em;color:var(--light-sage);transition:color .25s ease;}
.journey__label{font:600 13px var(--font-s);color:rgba(247,242,232,.55);text-align:center;line-height:1.3;transition:color .25s ease;}
.journey__step:hover .journey__dot{border-color:var(--punch);}
.journey__step.is-active .journey__dot{background:var(--punch);border-color:var(--punch);transform:scale(1.15);}
.journey__step.is-active .journey__year{color:var(--punch);}
.journey__step.is-active .journey__label{color:var(--paper);}
.journey__panels{position:relative;z-index:1;order:1;min-height:170px;}
.journey__panel{
  position:absolute;inset:0;display:none;flex-direction:column;gap:14px;text-align:left;align-items:flex-start;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease;
}
.journey__panel.is-active{display:flex;opacity:1;transform:translateY(0);position:relative;}
@media (max-width:700px){
  .journey__steps{justify-content:flex-start;}
  .journey__step{min-width:92px;}
  .journey__line{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .journey__panel{transition:none;}
}

/* ---------- Lemhi Story, mobile rework: the tab strip (5 buttons in a
   horizontal scroller with no "more" affordance) + click-to-swap single
   panel was designed for a pointer that can hover and a row wide enough
   to hold 5 waypoints -- on a phone only ~3 fit before the row started
   scrolling, and the story read as a cramped carousel instead of a
   journey. .journey__mobile is a completely separate, purpose-built
   layout: every stop stacked top-to-bottom, all visible at once, threaded
   by one continuous dotted rail -- the vertical equivalent of the desktop
   trail line, so the "walking a path" idea survives the layout swap
   instead of just disappearing (the way the horizontal line already does
   below 700px). Swapped in at the SAME 1100px breakpoint the constellation
   art already disappears at (that art stays hidden here too -- it was
   designed as a two-column companion to a single active panel, not a
   long vertical scroll, and re-adding it per-stop is a separate ask from
   "fix the layout"). journey.js still drives the desktop tabs untouched;
   this list needs no click-to-swap JS since nothing is hidden, only a
   small IntersectionObserver hook (added there) to fire each stop's
   .journey__hl sweep as it scrolls into view instead of on tab-click. ---------- */
.journey__mobile{display:none;}
@media (max-width:1100px){
  .journey__trail,.journey__panels-frame{display:none;}
  .journey__mobile{
    display:flex;flex-direction:column;
    position:relative;z-index:1;
    max-width:520px;margin:0 auto;
  }
}
.journey__mobile-item{
  position:relative;display:grid;grid-template-columns:20px 1fr;column-gap:18px;
  padding-bottom:34px;
}
.journey__mobile-item--last{padding-bottom:0;}
.journey__mobile-rail{position:relative;display:flex;justify-content:center;}
.journey__mobile-rail::before{
  content:"";position:absolute;top:20px;bottom:-34px;left:50%;
  width:0;transform:translateX(-50%);
  border-left:2px dotted rgba(159,191,174,.45);
}
.journey__mobile-item--last .journey__mobile-rail::before{display:none;}
.journey__mobile-dot{
  position:relative;z-index:1;flex-shrink:0;width:13px;height:13px;margin-top:3px;
  border-radius:50%;background:var(--dark-lift);border:2px solid var(--sage);
  transition:background .3s ease,border-color .3s ease;
}
.journey__mobile-dot--final{background:var(--punch);border-color:var(--punch);}
.journey__mobile-item.is-visible .journey__mobile-dot{background:var(--punch);border-color:var(--punch);}
.journey__mobile-body{display:flex;flex-direction:column;gap:7px;padding-top:1px;}
/* ---------- constellation art, round 2: brought back per-stop (Tim
   missed it after the mobile rework dropped it -- see journey.js's
   comment above). Reuses the desktop .journey__art class on purpose so
   every existing .journey__art .const-line/.const-star/etc. rule (colors,
   the draw-on transition, the twinkle/arrive animations) applies here
   for free with zero duplicated CSS -- only the things that actually
   differ for a small inline mobile copy get overridden below: real size
   instead of a 360px absolutely-positioned overlay, and `order:0` so it
   renders first in this flex body instead of inheriting the desktop
   rule's order:2 (which would push it to the END, after the text). Each
   item holds exactly one svg (not five stacked ones switched by
   opacity), so is-active-art here just means "this stop's art has been
   revealed" -- journey.js adds it (and calls the same drawArt() helper
   used on desktop) the moment the stop scrolls into view, alongside the
   existing .is-visible/highlight-sweep trigger. ---------- */
.journey__mobile-art{
  /* explicit display:block override -- reusing the .journey__art class
     (for its const-line/const-star styling, see the comment above) also
     pulls in that class's own @media(max-width:1100px){.journey__art{
     display:none;}} rule, which exists to hide the DESKTOP companion art
     at the same width this mobile list shows up. Same specificity, this
     rule is later in the stylesheet, so it wins and un-hides just this
     mobile copy without touching the desktop rule. */
  display:block;
  position:relative;order:0;justify-self:auto;
  width:76px;max-width:76px;aspect-ratio:1/1;
  margin-bottom:2px;
}
.journey__mobile-year{font:700 12px var(--font-s);letter-spacing:.07em;text-transform:uppercase;color:var(--light-sage);}
.journey__mobile-label{font-size:19px;color:var(--paper);}
.journey__mobile-text{font-size:15px;line-height:1.6;color:rgba(247,242,232,.74);max-width:48ch;}
@media (max-width:1100px){
  /* the desktop art column is gone, so this list's own copy needs the
     highlight-sweep on-scroll instead of on tab-click -- see journey.js */
  .journey__mobile-item .journey__hl{transition:background-size 1.05s cubic-bezier(.22,.9,.3,1), color .6s ease .35s;}
  .journey__mobile-item.is-visible .journey__hl{background-size:100% 100%;color:var(--evergreen);}
}
@media (max-width:480px){
  .journey__mobile-item{grid-template-columns:16px 1fr;column-gap:14px;padding-bottom:28px;}
  .journey__mobile-rail::before{top:18px;bottom:-28px;}
  .journey__mobile-art{width:64px;max-width:64px;}
  .journey__mobile-label{font-size:18px;}
  .journey__mobile-text{font-size:14.5px;}
}

/* ---------- About page CTA, round two: a night sky replacing the
   site-wide campfire CTA (.cta-dark--campfire, still used as-is on every
   other page). Scoped to its own classes rather than touching the shared
   ones. Picks up where .journey's gradient leaves off (Forest Ink) and
   deepens further into a near-black night, with a starfield, the same
   mountain/tent silhouettes as the campfire version, and a small fire
   beside the tent with a glow that's actually grounded at its base.

   Round two fixes: more headroom above (padding-top, no padding-bottom)
   so there's real sky for the stars instead of the scene reading
   vertically centered; the mountains are bottom-anchored at a fixed
   height with preserveAspectRatio="none" (set in the HTML) so they sit
   flush with the section's true bottom edge instead of "meet"-scaling
   into a smaller strip with flat color both above and below it. The glow
   starts from the small fire's actual position (right of the tent, not
   left) and sits at bottom:0 instead of a negative offset, so it reads
   as light radiating up off a flame instead of an orb floating in the
   dark.

   Round three: the "black bar" was actually the plain, unstyled "as
   featured in" section that used to sit between this CTA and the footer
   -- moved up under the hero now, so this section runs straight into
   the footer with nothing in between. Top padding roughly tripled so
   there's real sky to scroll through before the scene appears, and a
   small ground shadow was added under the tent so it doesn't read as
   floating regardless of what the mountain silhouette is doing under it.

   Round four: the content was sitting flush against the mountains at the
   very bottom of all that padding, reading as "grounded" rather than
   floating in the sky it's supposed to occupy. Split the padding so the
   copy has real sky both above AND below it before the scene starts --
   padding-bottom doesn't move the copy itself (it's normal flow, right
   after padding-top), it just pushes the section's own bottom edge (and
   with it every bottom:0 child -- mountains, tent, the bighorn below)
   further away, opening a visible gap of stars between the two. The
   constellation bighorn wasn't reading clearly at that size in the
   starfield, so it's gone; a small dark silhouette now stands on the
   ridge to the right of the tent instead, the same flat-fill treatment
   as the mountains and tent themselves.

   Round five: rounds two/four kept adding sky, and it overshot -- this
   much padding-top plus padding-bottom made the section a long scroll
   with not much happening in it. Cut both values roughly in half. Still
   enough padding-top for a real starfield beat before the scene arrives,
   still a visible gap of stars between the copy and the ridge, just not
   a slog to get there. */
.cta-night{position:relative;overflow:hidden;background:linear-gradient(180deg, var(--ink) 0%, var(--dark-deep) 100%);padding:280px 0 300px;}
.night-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.star{position:absolute;border-radius:50%;background:var(--paper);animation:starTwinkle 5s ease-in-out infinite;}
@keyframes starTwinkle{0%,100%{opacity:.15;}50%{opacity:.9;}}
@media (prefers-reduced-motion:reduce){ .star{animation:none;opacity:.45;} }
/* .cta-scene and .cta-mountains share class names with the sitewide
   campfire CTA (.cta-dark--campfire), which sets its own fixed
   .cta-scene{height:220px} and .cta-mountains{inset:0}. inset:0 doesn't
   touch height, and a shorthand like inset only overrides the exact
   longhands it sets -- so without explicitly overriding height/top here
   too, those sitewide values silently won on this page: the scene box
   stayed pinned at 220px tall (instead of stretching full-bleed), which
   in turn put every bottom:0 child (mountains, tent, glow, fire) flush
   with the bottom of that too-short 220px box instead of the section's
   real bottom -- the mountains rendered up near the TOP of the tall sky
   instead of anchored at its base. top:auto/height:auto below force
   those longhands back open so bottom:0 + height:240px behave as written. */
.cta-night .cta-scene{position:absolute;top:0;right:0;bottom:0;left:0;height:auto;pointer-events:none;}
.cta-night .cta-mountains{position:absolute;top:auto;left:0;right:0;bottom:0;width:100%;height:240px;}
.cta-night .cta-tent{position:absolute;top:auto;left:9%;bottom:0;width:70px;height:auto;z-index:1;}
.cta-night .cta-tent-shadow{
  position:absolute;left:calc(9% + 35px);bottom:0;width:100px;height:22px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(3,15,10,.55) 0%, rgba(3,15,10,0) 72%);
  z-index:1;
}
/* Round 22: the old two-layer flame-outer/flame-inner SVG was replaced in
   the markup with Tim's .lemhi-campfire component (shared block defined
   below, under "lemhi-campfire component"). This selector now just sizes
   and places that component at the exact spot/footprint the old flame
   held -- z-index above the mountain fill, bottom:0 so it sits flush on
   the same ground the tent and bighorn stand on. */
.cta-night .cta-campfire-small{
  position:absolute;left:calc(9% + 76px);bottom:0px;width:26px;height:26px;z-index:1;
}
/* A standing bighorn silhouette on the ridge, right side of the scene --
   terrain, not another constellation. Two things had to change from the
   first pass to make it actually read: (1) its fill needs to be DARKER
   than the mountain silhouette it stands in front of, not the same tone
   -- #0B2016 on #0B2016 is invisible no matter the opacity, same reason
   the tent reads only because it's near-black (#071510) against a
   lighter mountain fill; (2) bottom:0 buried most of its body inside the
   mountain's own fill zone at this x-position, leaving only the horns
   poking into open sky. Lifting it on a bottom offset puts its legs at
   the ridge line and its body/head against the open sky gradient above
   the mountains, where the near-black fill actually has something
   lighter to contrast against.

   Round five: the shape itself was redrawn -- the first pass read as a
   vague dark blob with no real animal in it. This one has a distinct
   neck/head/muzzle separate from the body, an ear, four individual legs,
   a small tail, and -- the actual point of a bighorn -- a bold curled
   horn, drawn as a thick round-capped stroke (an open spiral reads more
   like a real horn than trying to fill a closed horn-shaped polygon).

   Round six: still not it -- redrawn again from scratch against a real
   reference photo (a ram walking, side profile, head and neck carried low
   and forward, one heavy curled horn hanging in front of the face). The
   whole animal is one continuous outline now instead of a rounded body
   blob with a head stuck on, the neck actually slopes down to the muzzle
   instead of sitting level with the back, and all four legs are angled
   into a walking stride (front pair and rear pair each scissored, not
   four parallel posts) rather than standing square.

   Round 20: retired for good -- Tim supplied a real bighorn photo
   (standing, facing forward, full curl horns), cut to a transparent PNG
   (assets/img/bighorn-silhouette.png) and swapped in as an <img> in place
   of the hand-drawn <svg>. It's a square/portrait crop rather than the
   old wide walking-profile viewBox, so it's sized a touch narrower to
   land at roughly the same visual scale in the scene.

   Round 21: sized down again to about half (Tim: too big), and the
   `bottom` offset recalculated rather than just left alone -- the ridge
   line under .cta-mountains' near layer slopes upward at this x
   position, so the right `bottom` value is a function of exactly how
   wide the image is (a narrower image sits further right, over a higher
   point on the slope) and needs to move with it, not stay fixed. */
.cta-night .cta-bighorn-silhouette{position:absolute;top:auto;right:10%;bottom:61px;width:76px;height:auto;opacity:.97;z-index:1;}
@media (max-width:640px){
  .cta-night .cta-tent{left:4%;width:52px;}
  .cta-night .cta-tent-shadow{left:calc(4% + 26px);width:76px;}
  .cta-night .cta-campfire-small{left:calc(4% + 58px);width:20px;height:20px;}
  .cta-night .cta-bighorn-silhouette{right:3%;width:49px;bottom:76px;}
}
.tent-glow{
  position:absolute;left:calc(9% + 89px);bottom:0;width:240px;height:220px;transform:translate(-50%,10%) scale(.9);
  background:radial-gradient(ellipse at 50% 78%, rgba(230,201,106,.5) 0%, rgba(230,201,106,.2) 32%, rgba(196,104,45,.09) 56%, transparent 74%);
  filter:blur(8px);opacity:0;transition:opacity 1.6s ease;pointer-events:none;
}
.tent-glow__core{
  position:absolute;left:calc(9% + 89px);bottom:8px;width:32px;height:42px;transform:translate(-50%,0);
  background:radial-gradient(ellipse at 50% 100%, rgba(255,226,160,.9) 0%, rgba(230,201,106,.5) 45%, transparent 75%);
  filter:blur(3px);opacity:0;transition:opacity 1.6s ease .25s;pointer-events:none;z-index:1;
}
.cta-night.is-glowing .tent-glow{opacity:1;animation:tentGlowBreathe 5.5s ease-in-out infinite;}
.cta-night.is-glowing .tent-glow__core{opacity:1;animation:tentGlowBreathe 4.2s ease-in-out infinite .3s;}
@keyframes tentGlowBreathe{0%,100%{transform:translate(-50%,10%) scale(.9);}50%{transform:translate(-50%,10%) scale(1);}}
@media (max-width:640px){
  .tent-glow{left:calc(4% + 68px);width:170px;height:160px;}
  .tent-glow__core{left:calc(4% + 68px);width:24px;height:32px;}
}
@media (prefers-reduced-motion:reduce){
  .cta-night.is-glowing .tent-glow,.cta-night.is-glowing .tent-glow__core{animation:none;}
}
/* Round 21: eyebrow/headline/subhead/button had zero gap between them --
   .eyebrow has no margin, h1/h2/h3 are margin:0 sitewide, p is margin:0
   sitewide -- so with nothing but each element's own line-height they
   read as crunched together. A flex gap here is the fix (cleaner than
   fighting each child's own margin rules one at a time). */
.cta-night-content{display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;z-index:2;}
.cta-night-content > *{
  opacity:0;filter:blur(6px);transform:translateY(14px);
  transition:opacity .8s ease, filter .8s ease, transform .8s ease;
}
.cta-night-content.is-lit > *{opacity:1;filter:blur(0);transform:translateY(0);}
.cta-night-content > *:nth-child(1){transition-delay:.05s;}
.cta-night-content > *:nth-child(2){transition-delay:.22s;}
.cta-night-content > *:nth-child(3){transition-delay:.4s;}
.cta-night-content > *:nth-child(4){transition-delay:.58s;}
@media (prefers-reduced-motion:reduce){
  .cta-night-content > *{transition:none;opacity:1;filter:none;transform:none;}
}
.cta-night .wrap{position:relative;z-index:2;}

/* ---------- scroll-triggered phrase highlight ----------
   Used on callout phrases inside the parchment/cream cards (the compass
   3-cards and the testimonial quote cards). A dark-green highlighter box
   grows in from the left behind the phrase as it scrolls into view, and
   the phrase's own text shifts to the brand yellow partway through that
   sweep, so the color change reads as happening *during* the highlight,
   not before or after it.

   background-size 0%->100% on a span with box-decoration-break:clone is
   the mechanism that makes this work per-line for phrases that wrap: each
   line fragment gets its own box for background-size purposes, so a
   2-line phrase highlights both lines together instead of one rectangle
   stretching across the whole paragraph's bounding box. */
.hl-sweep{
  background-image:linear-gradient(var(--evergreen), var(--evergreen));
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:0 50%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  /* padding vs. margin: the negative margin pulls the highlighted box back
     toward the surrounding text so it doesn't visually shift the line, but
     leaving it exactly equal-and-opposite to the padding (as it used to be)
     meant the swept-green background landed flush against the letters
     immediately before/after the span, with zero breathing room. Margin is
     now less negative than the padding, so a small sliver of un-highlighted
     space always separates the highlight from its neighboring characters. */
  padding:.05em .26em;
  margin:0 -.16em;
  border-radius:4px;
  font-weight:700;
  transition:background-size 1.05s cubic-bezier(.22,.9,.3,1), color .6s ease .35s;
}
.hl-sweep.is-lit{
  background-size:100% 100%;
  color:var(--punch);
}
@media (prefers-reduced-motion:reduce){
  .hl-sweep{transition:none;}
}

/* About page mission statement: the highlighted clause reads as one
   phrase, so it should never break mid-line once there's room for it.
   Held off on mobile, where forcing it would just push the phrase into
   horizontal overflow instead of a second line. */
@media (min-width:640px){
  .mission-highlight{white-space:nowrap;}
}

/* ---------- nav: Resources dropdown ----------
   Desktop: hover/focus popover, positioned under the trigger. Its panel is
   always a light "paper" surface regardless of the header's light/dark
   hero state, since it's a discrete popped-up card, not part of the bar
   itself -- so its links get an explicit ink color that beats the
   dark-hero override on ".nav-links a" (see the two rules at the bottom
   of this block; both need to out-rank that override, one per hero
   state). */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:5px;}
.nav-dropdown-trigger::after{
  content:"";display:inline-block;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:16px;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:0 20px 40px rgba(15,36,24,.16);
  padding:8px;min-width:190px;
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:150;
}
.nav-dropdown-menu a{padding:10px 12px;border-radius:8px;white-space:nowrap;font-size:14.5px;}
.nav-dropdown-menu a:hover{background:var(--card);}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
body.has-dark-hero .nav .nav-links .nav-dropdown-menu a{color:var(--ink);}
body.has-dark-hero .nav.nav--scrolled .nav-links .nav-dropdown-menu a{color:var(--ink);}

@media (max-width:980px){
  .nav-dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:none;padding:0 0 4px 16px;margin-top:0;
    min-width:0;
  }
  .nav-dropdown-menu a{border-bottom:1px solid var(--hair);}
  .nav-dropdown-menu a:last-child{border-bottom:none;}
  .nav-dropdown-trigger::after{transform:translateY(-1px) rotate(135deg);}
}

/* ---------- footer: affiliation logos + social links ----------
   The three membership/partner marks (GTIA, Microsoft For Startups,
   IAMCP) are supplied as white-on-transparent already, so no invert
   filter is needed here (contrast with .logo-invert above, which forces
   mixed-color press logos to flat white) -- just a quieted opacity so
   they read as a footnote, not competing with the nav links beside them.
   Lives as its own full-width row between the footer-grid and
   footer-bottom, right-aligned so it sits in the bottom-right corner
   directly above the footer-bottom divider line. */
.footer-affiliations{
  margin-top:36px;display:flex;flex-direction:column;align-items:flex-end;
  gap:10px;text-align:right;
}
.footer-affiliations-label{
  font:600 11px var(--font-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--light-sage);opacity:.8;
}
.footer-affiliations-logos{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:20px;}
.footer-affiliations-logos img{height:26px;width:auto;opacity:.8;}
@media (max-width:640px){
  .footer-affiliations{align-items:flex-start;text-align:left;}
  .footer-affiliations-logos{justify-content:flex-start;}
}

.footer-social-link{display:inline-flex;align-items:center;gap:9px;}
.footer-social-link svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;}

/* ---------- compass cards: dot-chip label + corner icon watermark ----------
   Replaces the old icon-badge-plus-plain-chip header, chosen as "V2" from
   chip-concepts.html after a 5-way comparison. The dot-chip reuses the
   hero's floating chip-dot visual language (glowing yellow dot, bold
   small-caps-weight label) recolored for the light/parchment card context
   these cards actually sit in (the hero's version assumes a dark glass
   surface). The old icon comes back as a large, faint corner mark instead
   of a boxed badge -- present as texture, not as a second UI element
   competing with the chip. Explicit colors throughout (not inherited via
   the shared torn-section ink/evergreen overrides) since these are new
   selectors that list doesn't cover. */
.dot-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:12px;
  border:1px solid var(--hair);
  background:rgba(41,90,66,.05);
  color:var(--evergreen);
  font:800 13px var(--font-s);letter-spacing:.02em;
  width:fit-content;position:relative;z-index:2;
}
.dot-chip__dot{
  width:7px;height:7px;border-radius:99px;flex-shrink:0;
  background:var(--punch);box-shadow:0 0 10px rgba(230,201,106,.55);
}
.compass-card{position:relative;overflow:hidden;}
.compass-card>*{position:relative;z-index:2;}
.compass-card__wm{
  position:absolute;top:-16px;right:-16px;width:104px;height:104px;
  color:var(--evergreen);opacity:.1;z-index:1;pointer-events:none;
}
.compass-card__wm svg{width:100%;height:100%;}

/* always exactly 4 chips per card -- locked to a 2x2 grid on desktop so
   the compass cards line up evenly regardless of label length; below
   980px each card's own width shrinks with the single-column layout, so
   the chips relax back to wrapping pills. */
.feature-chip-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.feature-chip{
  font:600 11px var(--font-s);letter-spacing:-.005em;padding:6px 8px;border-radius:99px;min-width:0;
  background:rgba(41,90,66,.055);border:1px solid var(--hair);
  color:var(--evergreen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
@media (max-width:980px){
  .feature-chip-row{display:flex;flex-wrap:wrap;}
  .feature-chip{white-space:nowrap;}
}

/* ---------- header nav: yellow on hover, every state ----------
   Every link/button in the header bar turns brand yellow on hover,
   regardless of which of the nav's light/dark x scrolled/unscrolled x
   mobile-open states is active. Each selector below mirrors the exact
   chain of the rule it needs to beat (see the nav + dropdown sections
   above) with :hover appended, so it wins on specificity rather than
   relying on !important. */
.nav-links a:hover{color:var(--punch);}
.nav-links a[aria-current="page"]:hover{color:var(--punch);}
.nav-right a:not(.btn):hover{color:var(--punch);}
.nav-dropdown-menu a:hover{color:var(--punch);}
/* This used to only override the text color to punch/yellow, leaving the
   base .btn-primary:hover background on pale light-sage underneath --
   pale yellow text on pale sage is exactly the low-contrast "blends
   together" combination to avoid. Give it its own dark evergreen
   background too, so yellow pops against something dark instead of
   fading into another pastel. */
.nav .btn-primary:hover{background:var(--dark);color:var(--punch);box-shadow:0 10px 24px rgba(15,36,24,.28);}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-links a:hover{color:var(--punch);}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-links a[aria-current="page"]:hover{color:var(--punch);}
body.has-dark-hero .nav:not(.nav--scrolled) .nav-right a:not(.btn):hover{color:var(--punch);}
body.has-dark-hero .nav .nav-links .nav-dropdown-menu a:hover{color:var(--punch);}
body.has-dark-hero .nav.nav--scrolled .nav-links .nav-dropdown-menu a:hover{color:var(--punch);}
@media (max-width:980px){
  body.has-dark-hero .nav .nav-links.open a:hover{color:var(--punch);}
  body.has-dark-hero .nav .nav-links.open a[aria-current="page"]:hover{color:var(--punch);}
}

/* ==========================================================================
   Product page — dawn-to-dusk journey (Tim's pick from the journey-concepts
   review: "Trail Markers" up top, opening into a light vista, closing on a
   sunset vista with a waving flag before the campfire CTA). Reuses the same
   procedural ridge geometry as .section-vista throughout the site — only
   the sky color and ridge tone change per beat, same rule as everywhere
   else this ridge illustration appears.
   ========================================================================== */

/* ---- 1. Trailhead hero (dawn) ---- */
.trail-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#3C3226 0%,#6E5136 42%,#8B6239 68%,#A9793F 86%,#C79A5E 100%);color:var(--paper);padding-bottom:0;}
.trail-hero__ridges{position:absolute;inset:0;width:100%;height:100%;}
/* v5 fix, replacing the v3/v4 approach entirely: v4 tried to bridge the
   seam from .section-lostwoods's side (a pseudo-element measured to start
   at the hero's true bottom-edge color and fade to the section's own
   opening tone), plus a 3px negative-top overlap meant to swallow any
   hairline sub-pixel gap between the two elements. The overlap did
   nothing -- .section-lostwoods has overflow:hidden, which clips its own
   pseudo-element's negative offset right back off, so the two sides were
   still meeting at a razor's-edge boundary, and a persistent hairline
   bright row remained there at every x (a sub-pixel antialiasing blend
   right at the join, immune to color-matching from either side alone).
   Fixed at the root instead: the fade now lives entirely INSIDE the hero
   (.trail-hero::after below), which also has overflow:hidden but isn't
   being asked to bleed past its own box -- it just fades the hero's own
   last ~130px down to solid #1B1108, the exact color
   .section-lostwoods's own background already opens on. Both sides of
   the real boundary land on the identical value, so there's no seam left
   for antialiasing to expose regardless of sub-pixel rounding, and no
   need to bridge across the join at all -- .section-lostwoods::before
   from v3/v4 has been removed. */
.trail-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to bottom, transparent 0%, #1B1108 100%);pointer-events:none;z-index:1;}
.trail-hero .wrap{position:relative;z-index:2;}
.trail-marker{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font-s);letter-spacing:.08em;text-transform:uppercase;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(15,36,24,.35);border:1px solid rgba(247,242,232,.25);color:var(--paper);width:max-content;}
.trail-marker__dot{width:6px;height:6px;border-radius:50%;background:var(--punch);flex-shrink:0;}
.trail-marker.on-light{background:var(--card);border-color:var(--hair);color:var(--evergreen);}
.trail-marker.on-light .trail-marker__dot{background:var(--orient);}

/* ---- 1b. Trailhead layout: copy + a floating product shot, so the hero
   reads as one scene instead of a text block over a backdrop. Same grid
   idea as the homepage hero, scoped to its own classes and re-tinted for
   the warm dawn sky instead of the homepage's evergreen glow. ---- */
.trail-hero__inner{display:grid;grid-template-columns:minmax(0,0.88fr) minmax(320px,1fr);gap:clamp(28px,5vw,64px);align-items:center;}
.trail-hero__copy{display:flex;flex-direction:column;gap:22px;}
.trail-hero__visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px;}
.trail-hero__product-shell{position:relative;width:100%;max-width:460px;}
.trail-hero__product-img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 50px rgba(10,4,1,.4));}
.trail-hero__chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:9px 13px;border:1px solid rgba(247,242,232,.18);border-radius:12px;background:rgba(20,10,5,.62);color:rgba(247,242,232,.92);backdrop-filter:blur(12px);font-family:var(--font-s);font-size:.78rem;font-weight:800;letter-spacing:.02em;box-shadow:0 16px 34px rgba(0,0,0,.28);animation:trailChipFloat 7s ease-in-out infinite;}
.trail-hero__chip-dot{width:7px;height:7px;border-radius:99px;background:var(--punch);box-shadow:0 0 14px rgba(230,201,106,.5);flex-shrink:0;}
.trail-hero__chip--one{top:2%;left:-2%;animation-delay:0s;}
.trail-hero__chip--two{right:-4%;top:48%;animation-delay:.6s;}
.trail-hero__chip--three{left:4%;bottom:0%;animation-delay:1.1s;}
@keyframes trailChipFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-8px,0);}}
@media (max-width:1000px){
  .trail-hero__inner{grid-template-columns:1fr;}
  .trail-hero__visual{min-height:260px;margin-top:4px;}
}
@media (max-width:700px){
  .trail-hero__chip{display:none;}
  .trail-hero__product-shell{max-width:340px;}
}
@media (prefers-reduced-motion:reduce){
  .trail-hero__chip{animation:none;}
}

/* ---- 2. Light tan overlook (bridge into daylight). Top stop picks up
   right where the trail-hero gradient leaves off, so the two sections
   read as one continuous sky instead of a hard cut. ---- */
.overlook-tan{position:relative;overflow:hidden;background:linear-gradient(180deg,#C79A5E 0%,#DEBE87 22%,#F3E4C8 55%,#EAD3A6 100%);padding:72px 0 64px;}
.overlook-tan__ridges{position:absolute;inset:0;width:100%;height:100%;}
.overlook-tan .wrap{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.overlook-tan p{max-width:56ch;font-size:15.5px;color:rgba(18,19,15,.72);}

/* ---- 3. Large parchment frame (Our Proven Process — the real
   Baseline / Deliver / Maintain stage-picker ported from the "journey"
   section of lemhi-sales.netlify.app: same three phases, same five
   stages, same click-to-open cards, same grouped activity lists (some
   themselves clickable to swap the screenshot), same outcome lines and
   screenshots, restyled onto this site's own tokens. ---- */
.proven-frame{border:1px solid var(--hair);border-radius:20px;background:var(--paper);padding:clamp(32px,5vw,56px) clamp(20px,5vw,64px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-card);}
.proven-frame .eyebrow{color:var(--orient);}
.proven-frame .eyebrow::before{background:var(--orient);}

/* Phase columns -- Baseline / Deliver / Maintain, each a group of
   clickable stage cards. */
.proven-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,3vw,40px);}
.proven-col__head{border-top:3px solid var(--orient);padding-top:16px;display:flex;flex-direction:column;gap:8px;}
.proven-col__stage{font:600 11.5px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--orient);}
.proven-col__title{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-d);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.1;letter-spacing:-.02em;color:var(--evergreen);}
.proven-col__title svg{width:20px;height:20px;flex-shrink:0;stroke:var(--evergreen);margin-top:2px;}
.proven-cards{display:grid;gap:12px;margin-top:16px;}
.proven-cards.cols-2{grid-template-columns:1fr 1fr;}
.proven-cards.cols-1{grid-template-columns:1fr;}
.proven-card{appearance:none;text-align:left;cursor:pointer;font-family:var(--font-s);background:var(--card);border:1px solid var(--hair);border-radius:var(--r-md);padding:14px 16px;min-height:132px;display:flex;flex-direction:column;gap:9px;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.proven-card svg{width:22px;height:22px;stroke:var(--evergreen);transition:stroke .18s ease;}
.proven-card__label{font:600 10.5px/1 var(--font-s);letter-spacing:.09em;text-transform:uppercase;color:var(--orient);transition:color .18s ease;}
.proven-card__name{font-family:var(--font-d);font-weight:700;font-size:18px;line-height:1.25;color:var(--evergreen);margin-top:auto;transition:color .18s ease;}
.proven-card:hover{border-color:var(--evergreen);}
.proven-card.is-active{background:var(--evergreen);border-color:var(--evergreen);box-shadow:var(--shadow-raised);transform:translateY(-3px);}
.proven-card.is-active svg{stroke:var(--punch);}
.proven-card.is-active .proven-card__label{color:rgba(247,242,232,.78);}
.proven-card.is-active .proven-card__name{color:var(--paper);}
.proven-card:focus-visible{outline:2px solid var(--evergreen);outline-offset:2px;}

/* Detail panel -- opens below the cards once a stage is picked. Left:
   name + quote, then a single row of pill tabs (one per activity; for
   Managed AI Service, one per service cadence) that drive BOTH the
   short description shown below them AND the screenshot on the right --
   only one tab's worth of copy is visible at a time, by design, so the
   panel stays compact instead of listing every activity's full
   description at once. "Always on" chips (Managed AI Service only), and
   the outcome line with a yellow-highlighted phrase. Right:
   browser-chrome framed screenshot. On hover (fine-pointer devices only)
   the whole frame pops out -- scales up ~1.5x in place, uncropped,
   lifted above the surrounding grid with an elevated shadow. This is NOT
   the old crop-and-zoom effect that was removed per earlier feedback:
   that one magnified the image inside its fixed viewport (cropping it);
   this scales the entire chrome-framed card as one object, so nothing
   is clipped. */
.proc-panel{margin-top:clamp(16px,2vw,24px);border:1px solid var(--hair);border-radius:var(--r-md);background:var(--card);padding:clamp(14px,1.7vw,22px);display:none;}
.proc-panel.is-open{display:block;}
.proc-panel__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,2.4vw,30px);align-items:start;}
.proc-panel__head{padding-bottom:12px;border-bottom:1px solid var(--hair);}
.proc-panel__name{font-family:var(--font-d);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.08;color:var(--evergreen);}
.proc-panel__quote{font-family:var(--font-d);font-style:italic;font-weight:400;font-size:clamp(0.95rem,1.2vw,1.08rem);line-height:1.32;color:var(--muted);margin-top:7px;}
.proc-panel__groups{margin-top:14px;}
.proc-panel__tabs{display:flex;flex-wrap:wrap;gap:6px;}
.proc-panel__tab{flex:1 1 0;min-width:64px;max-width:230px;appearance:none;cursor:pointer;font:600 10px/1.25 var(--font-s);letter-spacing:0;padding:8px 6px;border-radius:10px;background:var(--paper);border:1px solid var(--hair);color:var(--evergreen);white-space:normal;text-align:center;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.proc-panel__tab:hover{border-color:var(--evergreen);}
.proc-panel__tab.is-active{background:var(--evergreen);border-color:var(--evergreen);color:var(--paper);}
.proc-panel__tab:focus-visible{outline:2px solid var(--evergreen);outline-offset:2px;}
.proc-panel__tab-desc{margin-top:12px;font:400 .89rem/1.42 var(--font-s);color:var(--ink);opacity:.85;}
.proc-panel__subitems{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.proc-panel__subitem-name{appearance:none;background:none;border:0;padding:0;text-align:left;font-family:var(--font-s);font-size:.92rem;font-weight:600;line-height:1.28;color:var(--evergreen);display:flex;align-items:flex-start;gap:6px;cursor:pointer;width:100%;}
.proc-panel__subitem-name span:first-child{flex:1;min-width:0;border-bottom:1px dashed var(--sage);}
.proc-panel__subitem.is-selected .proc-panel__subitem-name span:first-child{border-bottom-style:solid;border-bottom-color:var(--punch);}
.proc-panel__subitem-name svg{width:13px;height:13px;flex-shrink:0;margin-top:3px;stroke:var(--sage);}
.proc-panel__subitem.is-selected .proc-panel__subitem-name svg{stroke:var(--orient);}
.proc-panel__subitem-desc{font:400 .85rem/1.35 var(--font-s);color:var(--ink);opacity:.78;margin-top:3px;}
.proc-panel__chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;}
.proc-panel__chips-label{font:600 10.5px/1 var(--font-s);letter-spacing:.1em;text-transform:uppercase;color:var(--evergreen);}
.proc-panel__chip{font:400 13px/1 var(--font-s);padding:6px 12px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--hair);color:var(--evergreen);}
.proc-panel__outcome{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;gap:14px;align-items:baseline;}
.proc-panel__outcome-label{font:600 10.5px/1 var(--font-s);letter-spacing:.12em;text-transform:uppercase;color:var(--orient);flex:0 0 auto;padding-top:5px;}
.proc-panel__outcome-text{font-family:var(--font-d);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.3;color:var(--ink);}
.proc-panel__outcome-text mark{background:var(--punch);color:var(--ink);border-radius:4px;padding:0 6px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.proc-shot-frame{border:1px solid var(--sage);border-radius:var(--r-md);background:var(--paper);display:flex;flex-direction:column;box-shadow:var(--shadow-card);position:relative;z-index:1;}
.proc-shot-chrome{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--hair);}
.proc-shot-chrome span{width:10px;height:10px;border-radius:50%;background:rgba(41,90,66,.18);}
.proc-shot-label{margin-left:8px;font:400 12.5px/1 var(--font-s);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.proc-shot-viewport{background:var(--card);position:relative;overflow:hidden;border-radius:0 0 11px 11px;}
.proc-shot-img{width:100%;height:auto;display:block;}
/* ---------- mobile rework: touch equivalent of the desktop hover-zoom
   below. On a phone the frame renders at a fraction of the real product's
   resolution -- legible as a "yes, this is a real dashboard" glance, not
   as something you can actually read -- and unlike a mouse there is no
   hover to fall back on, so touch visitors had no way to see the shot at
   size. .proc-shot-zoom is a persistent, unmissable tap target (not just
   "tap the image" with no indication that does anything) that opens the
   same image full-size in #procLightbox. Defined BEFORE the hover-capable
   media query below on purpose: that query's own .proc-shot-zoom{display:
   none} rule needs to win the cascade on hover-capable devices (same
   specificity, source order decides), not get shadowed by this base
   display:flex. ---------- */
.proc-shot-zoom{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;gap:6px;
  appearance:none;cursor:pointer;border:1px solid rgba(247,242,232,.16);border-radius:var(--r-pill);
  background:rgba(15,36,24,.82);color:var(--paper);
  padding:8px 12px 8px 9px;font:600 11.5px/1 var(--font-s);letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(15,36,24,.28);
  -webkit-tap-highlight-color:transparent;
}
.proc-shot-zoom svg{width:14px;height:14px;flex-shrink:0;}
.proc-shot-zoom:focus-visible{outline:2px solid var(--punch);outline-offset:2px;}

/* Hover "pop out" -- whole frame magnifies ~1.5x and lifts above the
   grid, uncropped. Scoped to devices with a real hover + precise
   pointer so it never triggers as a sticky/stuck state on touch. */
@media (hover:hover) and (pointer:fine){
  .proc-shot-frame{transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s ease;will-change:transform;}
  .proc-shot-frame:hover{transform:scale(1.5);z-index:30;box-shadow:0 30px 70px rgba(15,36,24,.4),0 8px 22px rgba(15,36,24,.22);}
  /* the hover already gives these visitors a legible close-up, so the tap
     target above (built for touch, where hover can never fire) would just
     be redundant clutter sitting on top of the frame -- hide it here. */
  .proc-shot-zoom{display:none;}
}

/* Full-size viewer. Simple fixed-position modal: dim backdrop, close
   button, image scaled to fit the viewport with room to scroll if a
   screenshot is unusually tall. prefers-reduced-motion just gets the
   opacity fade dropped, still no reliance on it to function. */
.proc-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;}
.proc-lightbox[hidden]{display:none;}
.proc-lightbox__backdrop{position:absolute;inset:0;background:rgba(8,18,13,.86);}
.proc-lightbox__frame{
  position:relative;z-index:1;width:100%;max-width:820px;max-height:100%;
  display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-md);
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:procLightboxIn .22s ease both;
}
@keyframes procLightboxIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
.proc-lightbox__chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hair);flex-shrink:0;}
.proc-lightbox__label{font:600 13px/1.2 var(--font-s);color:var(--evergreen);}
.proc-lightbox__close{
  appearance:none;cursor:pointer;flex-shrink:0;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);border-radius:50%;background:var(--card);color:var(--evergreen);
}
.proc-lightbox__close:focus-visible{outline:2px solid var(--evergreen);outline-offset:2px;}
.proc-lightbox__viewport{overflow:auto;background:var(--card);}
.proc-lightbox__img{display:block;width:100%;height:auto;}
@media (prefers-reduced-motion:reduce){
  .proc-lightbox__frame{animation:none;}
}

/* ---------- live preview strip, round 2: see the HTML comment on
   .proc-live-preview for why this exists. Hidden entirely above 900px --
   desktop's side-by-side .proc-panel__grid already shows the screenshot
   with no scroll problem, so this would just be a redundant second copy
   there. Below 900px it's sticky, pinned just under the (now
   single-column) stage buttons, so it stays in view while scrolling
   through the write-up beneath it -- it un-sticks naturally once you
   scroll past the bottom of .proven-frame, it isn't fixed forever. Top
   offset clears the site nav (.nav is itself position:sticky, 84px
   tall, z-index:100) with a little breathing room; z-index stays well
   under the nav's so the nav always wins if they ever overlap. ---------- */
.proc-live-preview{display:none;}
@media (max-width:900px){
  .proven-cols{grid-template-columns:1fr;gap:32px;}
  .proc-panel__grid{grid-template-columns:1fr;}
  .proc-panel__grid > .proc-shot-frame{display:none;}

  .proc-live-preview{
    display:block;margin-top:20px;
    position:sticky;top:96px;z-index:5;
  }
  .proc-live-preview .proc-shot-frame{box-shadow:0 16px 36px rgba(15,36,24,.18);}
}
@media (max-width:480px){
  .proven-cards.cols-2{grid-template-columns:1fr;}
  .proc-panel__tab{font-size:9.5px;padding:7px 4px;min-width:66px;line-height:1.15;}
  .proc-live-preview{top:88px;}
}

/* ---- 4. Tan fading into dark-brown sunset vista, flag waving on the
   farthest ridge as the sun sets — the beat right before the campfire
   CTA, so the fire reads as picking up where this sunset left off. ---- */
.sunset-vista{position:relative;overflow:hidden;background:linear-gradient(180deg,#DEBE87 0%,#B3793F 28%,#7A4B2E 56%,#3E2418 82%,#1E120B 100%);padding:100px 0 84px;color:var(--paper);}
.sunset-vista__ridges{position:absolute;inset:0;width:100%;height:100%;}
.sunset-vista .wrap{position:relative;z-index:2;}
.sunset-flagpole{position:absolute;}
.sunset-flagpole__pole{position:absolute;bottom:0;left:0;width:1.5px;background:#1a0f08;}
.sunset-flag{position:absolute;left:1.5px;transform-origin:0% 50%;animation:flagWave 2.6s ease-in-out infinite;}
.sunset-flag--back{opacity:.5;animation-duration:2.9s;animation-delay:-.4s;}
@keyframes flagWave{
  0%,100%{transform:skewY(-7deg) scaleX(1);}
  50%{transform:skewY(8deg) scaleX(.96);}
}
@media (prefers-reduced-motion:reduce){
  .sunset-flag{animation:none;}
}
@media (max-width:1099px){
  /* Below ~1100px the centered copy column runs wide enough that its
     right edge reaches the flag's peak position (and on phones the
     column is full-width with nowhere clear to move it). Rather than
     float it in empty sky or run the pole through a line of copy,
     drop the flourish below this width and let the sunset gradient +
     ridge carry the beat on their own. */
  .sunset-flagpole{display:none;}
}

/* =====================================================================
   DEMO PAGE (demo.html) — Retool-style asymmetric split: parchment form
   column left, dark evergreen + topo proof column right. This page has
   no single dramatic dark hero scene, so we skip the sitewide
   has-dark-hero / transparent-nav convention entirely and force the nav
   solid from load via body.demo-page, rather than trying to make nav
   text legible over two different-toned halves at once.
   ===================================================================== */
body.demo-page .nav{background:var(--paper);border-bottom:1px solid var(--hair);box-shadow:0 4px 20px rgba(15,36,24,.08);}

.demo-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.demo-hero__form-col{background:var(--paper);color:var(--ink);padding:56px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;}
.demo-hero__form-inner{display:flex;flex-direction:column;gap:26px;max-width:460px;}
.demo-hero__intro{display:flex;flex-direction:column;gap:8px;}
.demo-hero__form-wrap{min-height:380px;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--card);padding:4px;}

/* ---------- HubSpot embed fallback (see assets/js/hs-form-fallback.js) ----
   Shown inside .hs-form-frame only if the embed script never populates it
   (blocked script, network failure). Sized to sit comfortably inside the
   reserved min-height on both the demo and contact forms without causing
   any layout jump. */
.hs-form-fallback{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:28px 22px;
}
.hs-form-fallback p{font-size:14.5px;line-height:1.5;color:var(--ink);max-width:36ch;}
.demo-hero__visual-col{position:relative;overflow:hidden;background:var(--dark-gradient);color:var(--paper);padding:56px clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:center;}
.demo-hero__visual-col .topo-tex{opacity:.32;}
.demo-hero__visual-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:28px;}
.demo-hero__proof-tiles{display:flex;flex-direction:column;gap:12px;}
.demo-hero__proof-tile{border:1px solid rgba(247,242,232,.16);border-radius:var(--r-md);background:rgba(15,36,24,.35);backdrop-filter:blur(6px);padding:16px 18px;font-size:14.5px;line-height:1.5;color:rgba(247,242,232,.9);}
.demo-hero__product{min-height:0;}
@media (max-width:980px){
  .demo-hero{grid-template-columns:1fr;}
  .demo-hero__form-col,.demo-hero__visual-col{padding:48px 24px;}
}
@media (max-width:700px){
  .demo-hero__product .trail-hero__chip{display:none;}
  .demo-hero__product .trail-hero__product-shell{max-width:320px;margin:0 auto;}
}

/* ---- What Happens Next — vertical trail directly under the form.
   Two earlier versions of this connector tried to read as a hand-traced
   winding trail: first 3 independent per-step SVGs (a hand-tuned Bezier
   stretched to a guessed viewBox height, which drifted off the dot
   whenever real content height didn't match the guess -- the "weird
   lines jutting off past the point" Tim called out), then a single
   spline measured through every dot's real on-screen center so it could
   never drift. That second version was geometrically correct but still
   read badly: jittering the dots across a 28px-wide rail gives the
   curve almost no room to breathe, so a "wiggle" over that little
   horizontal distance looks like a jagged zigzag rather than an organic
   trail (Tim: still no good). Rather than chase a third, fussier attempt
   at a winding line, this is a straight one: every dot sits dead center
   in its rail, and demo-trail.js draws one plain vertical line through
   their real measured centers -- simple, always attaches cleanly, and
   still reads as a trail via the dot-and-orange-line motif without
   pretending to wind through 28px of room it doesn't have. */
.demo-trail{display:flex;flex-direction:column;gap:14px;}
.demo-trail__steps{display:flex;flex-direction:column;position:relative;}
.demo-trail__step{position:relative;display:grid;grid-template-columns:28px 1fr;gap:16px;padding-bottom:22px;}
.demo-trail__step:last-child{padding-bottom:0;}
.demo-trail__rail{position:relative;height:100%;}
.demo-trail__line{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:0;}
.demo-trail__line-path{fill:none;stroke:var(--orient);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.55;}
.demo-trail__dot{position:absolute;top:3px;left:50%;width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--orient);transform:translateX(-50%);z-index:1;}
.demo-trail__content{display:flex;flex-direction:column;gap:3px;}
.demo-trail__num{font:700 11px/1 var(--font-s);letter-spacing:.08em;text-transform:uppercase;color:var(--orient);}
.demo-trail__title{font-family:var(--font-d);font-weight:700;font-size:17px;color:var(--evergreen);margin-top:2px;}
.demo-trail__body{font-size:13.5px;color:var(--ink);line-height:1.5;}

/* =====================================================================
   CONTACT PAGE — "base camp" hero: sunrise over the mountains, tent in
   the foreground, fire going, a bighorn nearby on the near ridge.
   Lighter parchment panel (morning light) instead of the dark topo hero
   this page used to open on, so the top of the page isn't wall-to-wall
   dark green with the sections below it. Combined with .section-parchment
   in the markup for its ink/evergreen/orient text cascade; this block
   only supplies the sunrise gradient + scene layers. Nav is forced solid
   via body.contact-page, same reasoning as the demo page: no single
   dramatic dark scene here to justify a transparent overlay nav.
   The fire is a static reuse of the shared .campfire component with
   is-blazing set directly in the markup (no scroll-triggered ignite --
   this is a hero, it should read as already lit on load, not catch once
   scrolled into view like the old bottom-of-page campfire CTAs).
   ===================================================================== */
body.contact-page .nav{background:var(--paper);border-bottom:1px solid var(--hair);box-shadow:0 4px 20px rgba(15,36,24,.08);}

.basecamp-hero{position:relative;overflow:hidden;padding:132px 0 248px;background:linear-gradient(180deg,#FBE6C4 0%,#F6D9A8 26%,#F3E4C8 56%,#F7F2E8 100%);}
.basecamp-hero__sun{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:560px;height:560px;background:radial-gradient(circle, rgba(230,201,106,.5) 0%, rgba(230,201,106,.16) 42%, transparent 72%);filter:blur(8px);pointer-events:none;}
.basecamp-hero .wrap{position:relative;z-index:3;}
.basecamp-hero__inner{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;max-width:1040px;}
.basecamp-hero__copy{display:flex;flex-direction:column;gap:22px;padding-top:4px;}
.basecamp-hero__contact-card{display:flex;flex-direction:column;gap:10px;padding:28px;box-shadow:0 14px 34px rgba(60,40,20,.14);}
.basecamp-hero__contact-card svg{color:var(--evergreen);}
.basecamp-hero__ground{position:absolute;left:0;right:0;bottom:0;height:280px;overflow:hidden;pointer-events:none;}
.basecamp-hero__ridges{position:absolute;inset:0;width:100%;height:100%;}
.basecamp-hero__ground .ember-field{z-index:1;}
.basecamp-hero__goat{position:absolute;right:14%;bottom:58px;width:78px;height:auto;opacity:.88;z-index:2;}
.basecamp-hero__tent{position:absolute;left:19%;bottom:0;width:176px;height:auto;z-index:2;}
.basecamp-hero__fire{position:absolute;left:40%;bottom:0;z-index:2;}
@media (max-width:900px){
  .basecamp-hero{padding:116px 0 210px;}
  .basecamp-hero__inner{grid-template-columns:1fr;gap:28px;max-width:520px;}
  .basecamp-hero__contact-card{padding:24px;}
  .basecamp-hero__ground{height:230px;}
  .basecamp-hero__tent{width:140px;left:13%;}
  .basecamp-hero__fire{--lf-size:160px;left:42%;}
  .basecamp-hero__goat{width:60px;bottom:50px;right:14%;}
}
@media (max-width:600px){
  .basecamp-hero{padding:108px 0 180px;}
  .basecamp-hero__ground{height:190px;}
  .basecamp-hero__tent{width:108px;left:6%;}
  .basecamp-hero__fire{--lf-size:128px;left:44%;}
  .basecamp-hero__goat{display:none;}
  .basecamp-hero__sun{width:400px;height:400px;}
}

/* ---- Base camp ground: the tan/brown that carries on below the hero, so
   the page doesn't jump from a warm sunrise scene into a mismatched dark
   panel. Color is pulled directly from the hero's own near-ridge fill
   (#B3793F), so the mountains and the ground beneath them read as the
   same material. That tan is light enough that dark ink/evergreen text
   reads far better than the sitewide light-text default, so this section
   is also given the .section-parchment cascade (its own background rule
   here wins the tie by coming later in the file). Same topo-tex asset
   used everywhere else on the site, just doubling as a rocky-ground
   texture here. ---- */
.basecamp-ground{position:relative;overflow:hidden;background:linear-gradient(180deg,#BD8248 0%,#A9713A 100%);}
.basecamp-ground .topo-tex{opacity:.16;}

.basecamp-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;max-width:1040px;}
.basecamp-contact-side{display:flex;flex-direction:column;gap:20px;}
@media (max-width:900px){
  .basecamp-contact-grid{grid-template-columns:1fr;max-width:560px;gap:24px;}
}

/* =====================================================================
   BLOG / FIELD NOTES — "a leather-bound journal wrapped in parchment."
   The dark hero reads as the cover (Garamond Bold + gold eyebrow already
   does most of that work sitewide; a raised spine along the left edge is
   the one purpose-built addition), and the posts themselves sit on the
   sitewide torn-top parchment break used elsewhere (about.html, index.html)
   so the page reads as opening the book rather than scrolling a flat
   list -- reusing that exact technique rather than inventing a new one,
   per "similarly structured to what we have on other pages."
   ===================================================================== */
/* Dog-eared corner on the featured/"open" entry only -- a folded-page
   triangle (drawn as two stacked pseudo-elements: a soft crease shadow,
   then the paper-colored fold itself) so it reads as the journal's
   current page, distinct from the grid of past entries below it. */
.card--dogear{position:relative;overflow:hidden;}
.card--dogear::before{content:"";position:absolute;top:0;right:0;width:44px;height:44px;background:linear-gradient(135deg, transparent 50%, rgba(15,36,24,.16) 50%);pointer-events:none;}

/* =====================================================================
   PLATFORM PAGE RESTRUCTURE — mirrors the structural beats of a reference
   product page Tim likes (hero -> problem -> proof -> comparison ->
   testimonials -> CTA), told entirely in Lemhi's own expedition language:
   lost in the dark woods with no compass, breaking through to the parchment
   map (the operating model already built for the process section), back
   out to the trade-off every MSP is making today, proof from the trail,
   then the map unrolled for their own book.
   ===================================================================== */

/* ---------- 1. LOST IN THE WOODS — the problem section. Dark brown, not
   evergreen (this is deliberately a different world than the rest of the
   site's dark sections, so the parchment break that follows reads as a
   real escape, not just another panel). Two-layer pine treeline instead
   of the site's usual mountain ridge, so it's legible at a glance as a
   different kind of terrain -- the woods, not the overlook. ---------- */
.section-lostwoods{
  position:relative;overflow:hidden;color:var(--paper);
  padding:104px 0 0;
  background:linear-gradient(180deg,#1B1108 0%,#140C06 55%,#0B0703 100%);
}
/* v5: the seam bridge that used to live here (v3/v4) is gone -- the fade
   is now handled entirely on the hero's side (.trail-hero::after), which
   lands on this section's own opening color (#1B1108) before the boundary
   is even reached, so this section doesn't need to do anything special at
   its top edge any more. See the long comment on .trail-hero::after for
   why bridging from this side kept failing.

   Round (Tim: "the top of the second panel is #29190c" -- lighter than the
   hero's own #1b1107 handoff, so the seam broke right where it should have
   been invisible): that #29190c was this rule's own radial-gradient --
   a warm highlight centered at 50% 8%, i.e. almost exactly on top of the
   seam -- blended back up over the flat #1B1108 the linear-gradient opens
   on. Removed outright rather than just moved/shrunk: the linear-gradient
   alone already does the job Tim asked for ("fade from #1b1107 to a
   darker brown") -- #1B1108 -> #140C06 -> #0B0703, darkest at the
   bottom -- and it needs nothing layered on top of it right at y=0 for
   that opening value to land exactly where the hero left off. */
.section-lostwoods .eyebrow{color:var(--punch);}
.section-lostwoods .eyebrow::before{background:var(--punch);}
/* Round (Tim: "remove the brown mountain/tree shape on the bottom of the
   section, make it plain blank dark brown that's then immediately
   scrolling into the parchment mountain range"): .lostwoods__trees and
   its rules here (which round 9/10 spent several passes tuning -- see the
   prior history in this file's git blame / session log) are gone. Two
   jagged mountain dividers back to back -- this section's own brown ridge
   immediately above .mountain-pass--to-parchment's white one -- read as
   redundant. The section's background linear-gradient above already ends
   on a flat, textureless dark brown with nothing layered on it, which is
   exactly the "plain blank dark brown" floor asked for, and
   .mountain-pass--to-parchment's own background (#0B0703, below) already
   matches that gradient's end tone, so the two sections now meet with
   nothing in between. */
.lostwoods__intro{position:relative;z-index:2;max-width:640px;display:flex;flex-direction:column;gap:14px;margin-bottom:52px;}
.lostwoods__intro p{font-size:15.5px;color:rgba(247,242,232,.72);max-width:54ch;}
.lostwoods__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-bottom:64px;}
@media (max-width:980px){
  .lostwoods__grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .lostwoods__grid{grid-template-columns:1fr;}
}
.lostwoods-card{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  padding:24px 22px;border-radius:var(--r-md);
  background:rgba(247,242,232,.045);
  border:1px solid rgba(159,191,174,.14);
  transition:transform .28s ease,background .28s ease,border-color .28s ease;
}
.lostwoods-card:hover{transform:translateY(-4px);background:rgba(247,242,232,.075);border-color:rgba(230,201,106,.3);}
.lostwoods-card__icon{width:38px;height:38px;color:var(--light-sage);transition:color .28s ease;}
.lostwoods-card__icon svg{width:100%;height:100%;}
.lostwoods-card:hover .lostwoods-card__icon{color:var(--punch);}
.lostwoods-card h3{font-size:17.5px;color:var(--paper);line-height:1.25;}
.lostwoods-card p{font-size:14px;line-height:1.5;color:rgba(247,242,232,.68);margin:0;}
@media (prefers-reduced-motion:reduce){
  .lostwoods-card{transition:none;}
}

/* ---------- 2. THE MOUNTAIN PASS — a dedicated, FIXED-HEIGHT bridge strip
   on each side of the parchment process section, tracing the same
   approved Lemhi mountain-range line art the site's torn-top/torn-bottom
   already use elsewhere, but as a standalone SVG fill in its own small
   section instead of a clip-path applied directly to the (tall, dynamic --
   the proc-panel's content height changes as visitors click between
   stages) parchment box itself. That original clip-path technique
   computes its percentages against the clipped element's OWN box height,
   so reusing it straight on a tall, variable-height section either eats
   into real content above it or leaves a gap below, exactly what was
   reported. A fixed 150px strip with its own baked-in SVG silhouette
   can't drift: it always reveals exactly the intended band, regardless of
   how tall the process section's content is on either side of it. #process
   itself goes back to a plain, un-clipped parchment section. ---------- */
#process{padding:96px 0;}
@media (max-width:700px){
  #process{padding:64px 0;}
}
.mountain-pass{position:relative;height:150px;overflow:hidden;}
.mountain-pass svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.mountain-pass--to-parchment{background:#0B0703;}
.mountain-pass--to-green{background:var(--dark-lift);}
@media (max-width:700px){
  .mountain-pass{height:90px;}
}

/* ---------- 3. THE BETTER TRADE — 3-column comparison table, living on
   the same dark-green + topo canvas as the testimonials block right after
   it (one continuous .dark-continuum field, per the pattern already
   established on index.html, rather than two stacked green rectangles).
   Accent hierarchy respected: no orange here, only punch (yellow) and
   light-sage on this dark-green ground. ---------- */
.compare-wrap{max-width:640px;margin:0 auto 44px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.compare-wrap p{font-size:15.5px;color:var(--text-2);max-width:56ch;}
/* ---------- feature checklist table: one flat CSS grid (label column +
   3 provider columns) rather than 3 separate cards, so the grouped rows
   ("The Business" / "The Delivery" / "The Client") read across all three
   at a glance, per the attached feature-table direction. Wrapped in a
   horizontally-scrolling strip below tablet width instead of stacking,
   since a checklist loses its whole point once the columns aren't side
   by side. Accent hierarchy respected: yellow only inside the
   highlighted Managed AI Practice column, light-sage elsewhere. ---------- */
.feature-table__hint{display:none;}
.feature-table__scroll{overflow-x:auto;margin:0 -4px;padding:0 4px;}
.feature-table{
  display:grid;grid-template-columns:minmax(200px,1.7fr) repeat(3,minmax(118px,1fr));
  min-width:640px;
  border-radius:var(--r-md);overflow:hidden;
  background:rgba(247,242,232,.03);
  border:1px solid rgba(159,191,174,.14);
}
.feature-table__head{padding:22px 16px;border-bottom:1px solid rgba(159,191,174,.16);}
.feature-table__head--label{padding-left:24px;}
.feature-table__col-title{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--paper);line-height:1.2;text-align:center;}
.feature-table__head--label .feature-table__col-title{text-align:left;visibility:hidden;}
.feature-table__group{
  grid-column:1/-1;padding:18px 24px 8px;
  font:700 10.5px var(--font-s);letter-spacing:.12em;text-transform:uppercase;
  color:var(--light-sage);
}
.feature-table__label{
  padding:13px 24px;font-size:14px;line-height:1.35;color:var(--text-2);
  border-top:1px solid rgba(159,191,174,.08);display:flex;align-items:center;
}
.feature-table__mark{
  display:flex;align-items:center;justify-content:center;
  padding:13px 10px;border-top:1px solid rgba(159,191,174,.08);
}
.feature-table__mark svg{width:18px;height:18px;flex-shrink:0;}
.feature-table__mark--yes svg{color:var(--light-sage);}
.feature-table__mark--no svg{color:var(--muted);opacity:.55;}
.feature-table__cell--highlight{background:rgba(230,201,106,.07);}
.feature-table__cell--highlight.feature-table__mark--yes svg{color:var(--punch);}
.feature-table__head.feature-table__cell--highlight .feature-table__col-title{color:var(--punch);}
@media (max-width:700px){
  .feature-table{min-width:560px;grid-template-columns:minmax(160px,1.6fr) repeat(3,minmax(100px,1fr));}
  .feature-table__label{padding:12px 16px;font-size:13px;}
  .feature-table__head{padding:18px 10px;}
  .feature-table__col-title{font-size:14.5px;}
}

/* ---------- 3 Ways Forward, mobile rework: below 700px the desktop grid
   (even trimmed to a 560px min-width scroll strip with a "swipe to
   compare" hint) still asked the reader to hold 3 columns' worth of
   yes/no marks in their head while panning sideways past them one
   screen-width at a time. .feature-table__mobile replaces the scroll
   strip + hint outright at the same breakpoint: one column read top to
   bottom at a time, switched with 3 tabs, so nothing needs to be held in
   memory across a swipe. See feature-table.js for the tab logic --
   plain class toggling, no data model, since the 3 panels' content is
   static and just baked into the markup once each. ---------- */
.feature-table__mobile{display:none;}
@media (max-width:700px){
  .feature-table__scroll,.feature-table__hint{display:none;}
  .feature-table__mobile{
    display:block;max-width:520px;margin:0 auto;
    border:1px solid rgba(159,191,174,.14);border-radius:var(--r-md);
    background:rgba(247,242,232,.03);overflow:hidden;
  }
}
.feature-table__mobile-tabs{display:flex;}
.feature-table__mobile-tab{
  flex:1 1 0;min-width:0;appearance:none;cursor:pointer;text-align:center;
  padding:14px 8px;font:600 12px/1.25 var(--font-s);letter-spacing:0;
  background:rgba(247,242,232,.04);color:var(--text-2);
  border:0;border-bottom:2px solid rgba(159,191,174,.16);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.feature-table__mobile-tab:not(:last-child){border-right:1px solid rgba(159,191,174,.12);}
.feature-table__mobile-tab.is-active{background:rgba(247,242,232,.03);color:var(--paper);border-bottom-color:var(--light-sage);}
.feature-table__mobile-tab--highlight.is-active{color:var(--punch);border-bottom-color:var(--punch);}
.feature-table__mobile-tab:focus-visible{outline:2px solid var(--punch);outline-offset:-2px;}

/* ---------- compare grid, round 2: replaces the old one-panel-at-a-time
   .feature-table__mobile-panel blocks. One flat CSS grid holds every row
   (group headers span all 3 columns via grid-column:1/-1; feature rows
   emit 3 .ft-cell divs back to back, letting grid auto-placement drop
   them into the next row's 3 column tracks) so a row's height always
   matches its tallest cell automatically -- no manual row-height syncing
   needed even though only the focused column ever wraps to 2 lines.
   data-focus on the container (set by feature-table.js, same tab click
   as before) drives which column's track gets 1fr + which cells show
   their label text; the other two tracks collapse to a fixed-width gray
   rail showing just the mark. ---------- */
.feature-table__compare{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:stretch;
}
.feature-table__compare[data-focus="0"]{grid-template-columns:1fr 44px 44px;}
.feature-table__compare[data-focus="1"]{grid-template-columns:44px 1fr 44px;}
.feature-table__compare[data-focus="2"]{grid-template-columns:44px 44px 1fr;}

.ft-row-group{
  grid-column:1/-1;
  padding:16px 20px 6px;
  font:700 10.5px var(--font-s);letter-spacing:.12em;text-transform:uppercase;
  color:var(--light-sage);
}
.ft-cell{
  display:flex;align-items:center;justify-content:center;
  padding:11px 6px;border-top:1px solid rgba(159,191,174,.08);
  transition:background .18s ease,padding .18s ease;
  min-width:0;
}
.ft-cell__mark{display:flex;flex-shrink:0;}
.ft-cell__mark svg{width:18px;height:18px;}
.ft-cell__text{display:none;}

/* focused column: full-width row, icon + label, left-aligned like a
   normal comparison row */
.feature-table__compare[data-focus="0"] .ft-cell--col0,
.feature-table__compare[data-focus="1"] .ft-cell--col1,
.feature-table__compare[data-focus="2"] .ft-cell--col2{
  justify-content:flex-start;gap:12px;padding:11px 20px;
}
.feature-table__compare[data-focus="0"] .ft-cell--col0 .ft-cell__text,
.feature-table__compare[data-focus="1"] .ft-cell--col1 .ft-cell__text,
.feature-table__compare[data-focus="2"] .ft-cell--col2 .ft-cell__text{
  display:block;font-size:14px;line-height:1.35;color:var(--text-2);
}

/* collapsed rail columns: the "small gray column" Tim asked for -- icon
   only, muted background, so the 3-way comparison reads at a glance
   without tapping anything. */
.feature-table__compare[data-focus="0"] .ft-cell--col1,
.feature-table__compare[data-focus="0"] .ft-cell--col2,
.feature-table__compare[data-focus="1"] .ft-cell--col0,
.feature-table__compare[data-focus="1"] .ft-cell--col2,
.feature-table__compare[data-focus="2"] .ft-cell--col0,
.feature-table__compare[data-focus="2"] .ft-cell--col1{
  background:rgba(150,150,150,.10);
}
/* the focused Managed AI Practice column keeps its existing highlight
   tint (matches the old .feature-table__mobile-panel--highlight look) */
.feature-table__compare[data-focus="1"] .ft-cell--col1{
  background:rgba(230,201,106,.07);
}

/* accent hierarchy: yellow marks ONE column, Managed AI Practice --
   fixed to that column's identity, not to whichever one is currently
   focused, so it reads the same (matches the desktop table's
   .feature-table__cell--highlight treatment) whether that column is
   expanded or collapsed to a rail. Every other column's "yes" stays
   light-sage green. */
.ft-cell--col1 .ft-cell__mark.feature-table__mark--yes svg{color:var(--punch);}
.ft-cell--col0 .ft-cell__mark.feature-table__mark--yes svg,
.ft-cell--col2 .ft-cell__mark.feature-table__mark--yes svg{color:var(--light-sage);}
.ft-cell__mark.feature-table__mark--no svg{color:var(--muted);opacity:.55;}

/* ---------- 4. THE SIGNPOST CAMPFIRE — closing demo CTA. Tim's call:
   "same scene and everything" as the homepage's campfire CTA (same
   .cta-dark--campfire/.campfire-ground scaffold, same mountains/tent),
   but recomposed asymmetrically like the About page's night scene: the
   tent and campfire cluster together on the LEFT (same small
   .lemhi-campfire.cta-campfire-small the About page uses -- see the
   round below), the bighorn stands on the RIGHT same as About, and a
   signpost -- a post with an arrow arm carrying the actual "Request a
   Demo" link -- stands centered under the copy. The campfire no longer
   needs its own separate .btn underneath the headline; the signpost's
   main arm IS the button.

   Round (Tim: "two fires... just have the fire that has that we have on
   the about page"): the old #campfireGraphic/.campfire -- a full-size
   190px .lemhi-campfire scaled to .55 and pinned well right of the tent
   -- plus the .tent-glow ambient blob at the tent read as two separate
   light sources. Swapped for About's exact structure: one small (26px)
   .lemhi-campfire.cta-campfire-small sitting right at the tent (see the
   markup), always lit (no ignite-on-scroll -- About's doesn't have one
   either), with .tent-glow left at its shared default position/size
   (same as About, now that the fire sits at the same offset from the
   tent) so it reads as that one fire's own ambient glow, not a second
   source. The old .campfire/.lemhi-campfire position overrides that used
   to live here are gone with the element they targeted. */
.campfire-ground--signpost .cta-campfire-small{
  position:absolute;left:calc(9% + 76px);bottom:0px;width:26px;height:26px;z-index:1;
}
@media (max-width:700px){
  .campfire-ground--signpost .cta-campfire-small{left:calc(4% + 58px);width:20px;height:20px;}
}
.campfire-ground--signpost.is-glowing .tent-glow{opacity:1;animation:tentGlowBreathe 5.5s ease-in-out infinite;}
.campfire-ground--signpost.is-glowing .tent-glow__core{opacity:1;animation:tentGlowBreathe 4.2s ease-in-out infinite .3s;}
@media (prefers-reduced-motion:reduce){
  .campfire-ground--signpost.is-glowing .tent-glow,
  .campfire-ground--signpost.is-glowing .tent-glow__core{animation:none;}
}
/* Bighorn, ported from the About page's night scene verbatim -- same
   asset, same position math (the ridge line under this page's
   .cta-mountains near layer is identical to About's, same path data),
   just rescoped to this page's own section class. */
.campfire-ground--signpost .cta-bighorn-silhouette{position:absolute;top:auto;right:10%;bottom:61px;width:76px;height:auto;opacity:.97;z-index:1;}
@media (max-width:700px){
  .campfire-ground--signpost .cta-bighorn-silhouette{right:3%;width:49px;bottom:76px;}
}
/* The signpost stands ON the scene's ground plane, not floating inside the
   centered copy above it. v2 (Tim): center it under the copy instead of
   parking it off to the right -- .signpost itself is already a
   self-centered unit (post/arm/shadow all anchored to left:50% of their
   own 20px-wide box, confirmed above), so centering this outer wrapper
   with left:50%/translateX(-50%) centers the whole sign as one piece.
   .cta-scene itself is pointer-events:none (it's decorative background),
   so the signpost and its link need pointer-events re-enabled explicitly. */
.campfire-ground--signpost .cta-scene{overflow:visible;}
.campfire-ground--signpost .cta-scene .signpost{
  position:absolute;top:auto;left:50%;transform:translateX(-50%);bottom:38px;z-index:2;pointer-events:auto;
}
@media (max-width:700px){
  .campfire-ground--signpost .cta-scene .signpost{bottom:30px;}
}
/* Round (Tim: "the request a demo button isn't working now"): centering
   the signpost under the copy (v2 above) put it directly under
   .campfire-cta-content's own wrapper, .wrap -- and .wrap is
   display:flex (sitewide), which means a flex item's margin is NEVER
   collapsed into the container the way a block child's would be. That
   flex item is .campfire-cta-content, and .campfire-ground gives it a
   280px margin-bottom (reserved clearance for the ground scene below
   it -- see that rule). Because flex items' margins count toward the
   container's own size, .wrap's actual box balloons 280px tall past its
   visible text, right down over the scene -- invisible (.wrap has no
   background), but still a real box. .wrap sits later in the DOM than
   .cta-scene, so at their shared stacking level it paints (and hit-
   tests) on top of it, silently swallowing clicks anywhere under that
   phantom area -- including the now-centered signpost link, which lives
   inside .cta-scene. Nothing inside .wrap on this section is actually
   interactive (the signpost's link is the section's only control, and
   it lives in .cta-scene, not .wrap), so the fix is just to take .wrap
   back out of hit-testing here rather than rework the stacking order
   sitewide. */
.campfire-ground--signpost .wrap{pointer-events:none;}
.campfire-ground--signpost .campfire-cta-content{pointer-events:auto;}
/* ---------- signpost reveal, staged in two beats (Tim: "I want the
   signpost to show up last... the post to appear, and then the arrow to
   appear on top of that, kind of like it's being generated"). Triggered
   by .is-signposted / .is-signpost-armed on the section, added via
   setTimeout after the existing is-glowing/is-lit beats in this page's
   ignite script, so the signpost is reliably the last thing on screen
   to finish revealing. Every transform below appends to the element's
   own resting translateX(-50%) centering rather than replacing it. ---------- */
.signpost__shadow{opacity:0;transition:opacity .5s ease .05s;}
.signpost__post{
  opacity:0;transform-origin:50% 100%;
  transform:translateX(-50%) scaleY(.08);
  transition:opacity .4s ease, transform .6s cubic-bezier(.22,.9,.34,1);
}
.campfire-ground--signpost.is-signposted .signpost__shadow{opacity:1;}
.campfire-ground--signpost.is-signposted .signpost__post{opacity:1;transform:translateX(-50%) scaleY(1);}
.signpost__arm--main{
  opacity:0;
  transform:translateX(-50%) scale(.6);
  transition:opacity .4s ease .05s, transform .5s cubic-bezier(.34,1.56,.64,1) .05s, box-shadow .3s ease, background .3s ease;
}
.campfire-ground--signpost.is-signpost-armed .signpost__arm--main{opacity:1;transform:translateX(-50%) scale(1);}
@media (prefers-reduced-motion:reduce){
  .signpost__shadow,.signpost__post,.signpost__arm--main{transition:none;opacity:1;}
  .signpost__post{transform:translateX(-50%) scaleY(1);}
  .signpost__arm--main{transform:translateX(-50%) scale(1);}
}

/* v2 (Tim's call): one arrow, not two -- the sub "Trailhead" arm is gone --
   and the whole sign now lives centered underneath the CTA copy as its
   4th fade-in child (same slot the plain .btn button fills on every other
   dark CTA) instead of pinned to the section's right edge next to the
   campfire scene. Because it's in-flow now, the old per-breakpoint %-right
   insets (there to dodge .cta-dark's overflow:hidden clipping) are gone
   too -- centered content can't run off the edge the way an absolutely
   pinned one could. The post sits centered under the arm itself (arm now
   carries transform:translateX(-50%) against the post's own centerline,
   where before the post sat at the arm's left edge). */
.signpost{position:relative;width:20px;height:112px;margin-top:2px;}
.signpost__shadow{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:64px;height:14px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(3,21,14,.4) 0%, rgba(3,21,14,0) 72%);
  filter:blur(1px);pointer-events:none;
}
.signpost__post{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:13px;height:100%;
  background:linear-gradient(180deg,#9C7148 0%,#6E4C2C 100%);
  border-radius:4px 4px 1px 1px;
  box-shadow:inset -3px 0 4px rgba(0,0,0,.28), inset 2px 0 3px rgba(255,255,255,.08);
  pointer-events:none;
}
.signpost__post::after{
  content:"";position:absolute;inset:2px 4px;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px);
  opacity:.55;
}
.signpost__arm{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  display:flex;align-items:center;height:46px;
  padding:0 22px 0 16px;
  font:700 14px var(--font-s);letter-spacing:.01em;white-space:nowrap;
  clip-path:polygon(0% 12%, 82% 12%, 82% 0%, 100% 50%, 82% 100%, 82% 88%, 0% 88%);
  box-shadow:0 8px 16px rgba(3,21,14,.4);
}
.signpost__arm--main{
  background:var(--paper);color:var(--dark);text-decoration:none;z-index:2;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.signpost__arm--main:hover{
  background:var(--light-sage);color:var(--dark);
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 14px 28px rgba(3,21,14,.45), 0 0 22px rgba(230,201,106,.24);
}
@media (max-width:700px){
  .signpost{height:88px;}
  .signpost__post{width:10px;}
  .signpost__arm{
    height:38px;padding:0 13px 0 9px;font-size:10.5px;
    clip-path:polygon(0% 10%, 80% 10%, 80% 0%, 100% 50%, 80% 100%, 80% 90%, 0% 90%);
  }
}
@media (prefers-reduced-motion:reduce){
  .signpost__arm--main{transition:none;}
  .signpost__arm--main:hover{transform:translateX(-50%);}
}
.card--dogear::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:38px 38px 0 0;border-color:var(--paper) transparent transparent transparent;filter:drop-shadow(-2px 2px 3px rgba(15,36,24,.22));pointer-events:none;}