/* ==========================================================================
   SOS Outdoor Solutions — core styles
   Palette: pond water + pine + warm landscape-lighting brass
   ========================================================================== */

:root{
  /* brand */
  --ink:#08130F;
  --deep:#0C241E;
  --pine:#12362D;
  --moss:#245C4A;
  --water:#2F9C84;
  --water-lt:#5FC9AE;
  --brass:#D9A441;
  --brass-lt:#F2C971;
  --koi:#E4633A;

  /* neutrals */
  --stone-50:#FAF9F5;
  --stone-100:#F1EFE8;
  --stone-200:#E0DCD1;
  --stone-300:#C6C1B4;
  --stone-500:#8A857A;
  --stone-700:#4B4740;

  /* semantic */
  --bg:var(--stone-50);
  --fg:var(--ink);
  --muted:var(--stone-700);
  --line:rgba(8,19,15,.12);
  --card:#fff;

  /* type */
  --display:"Fraunces","Georgia",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* rhythm */
  --pad:clamp(1.25rem,4vw,3rem);
  --maxw:1240px;
  --radius:18px;
  --radius-lg:28px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.7s;

  --shadow-sm:0 1px 2px rgba(8,19,15,.06),0 4px 14px rgba(8,19,15,.06);
  --shadow-md:0 8px 24px rgba(8,19,15,.10),0 2px 6px rgba(8,19,15,.06);
  --shadow-lg:0 30px 70px -20px rgba(8,19,15,.34),0 10px 24px rgba(8,19,15,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:6px}
::selection{background:var(--brass);color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 0,"WONK" 0}
.h-xl{font-size:clamp(2.75rem,1.6rem + 5.4vw,6rem)}
.h-lg{font-size:clamp(2.1rem,1.35rem + 3.2vw,3.9rem)}
.h-md{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem)}
.h-sm{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.075rem,1rem + .45vw,1.3rem);line-height:1.6;color:var(--muted)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--moss);margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;opacity:.55;border-radius:2px}
.on-dark .eyebrow,.sec--dark .eyebrow{color:var(--water-lt)}

/* ---------- layout ---------- */
.wrap{width:min(100% - (var(--pad) * 2),var(--maxw));margin-inline:auto}
.wrap--wide{width:min(100% - (var(--pad) * 2),1440px)}
.sec{padding:clamp(4.5rem,9vw,8.5rem) 0;position:relative}
.sec--tight{padding:clamp(3rem,6vw,5.5rem) 0}
.sec--dark{background:var(--deep);color:var(--stone-100)}
.sec--dark p{color:rgba(241,239,232,.76)}
.sec--pine{background:var(--pine);color:var(--stone-100)}
.sec--pine p,.sec--pine .lede{color:rgba(241,239,232,.78)}
.on-dark p{color:rgba(255,255,255,.82)}
.grid{display:grid;gap:clamp(1.25rem,2.4vw,2rem)}
.sec__head{max-width:62ch}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--pine);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;letter-spacing:.01em;
  background:var(--btn-bg);color:var(--btn-fg);overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
  box-shadow:0 2px 0 rgba(8,19,15,.12);white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(120% 160% at 50% 120%,var(--water) 0%,var(--moss) 45%,transparent 70%);
  transform:translateY(65%) scale(.85);opacity:0;
  transition:transform .55s var(--ease),opacity .4s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn:hover::before{transform:translateY(0) scale(1.25);opacity:1}
.btn:active{transform:translateY(-1px)}
.btn .btn__ico{transition:transform .4s var(--ease)}
.btn:hover .btn__ico{transform:translateX(4px)}

.btn--brass{--btn-bg:var(--brass);--btn-fg:var(--ink)}
.btn--brass::before{background:radial-gradient(120% 160% at 50% 120%,var(--brass-lt) 0%,#fff0c4 60%,transparent 75%)}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost::before{background:radial-gradient(120% 160% at 50% 120%,rgba(255,255,255,.22),transparent 70%)}
.btn--ghost:hover{color:#fff}
.on-dark .btn--ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--stone-100)}
.on-dark .btn--ghost::before{background:radial-gradient(120% 160% at 50% 120%,var(--stone-100) 0%,#fff 65%,transparent 78%)}
.btn--lg{padding:1.15rem 2rem;font-size:1rem}

.link-underline{
  position:relative;font-weight:600;display:inline-flex;align-items:center;gap:.45rem;padding-bottom:2px;
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform .45s var(--ease);
}
.link-underline:hover::after{transform-origin:left;transform:scaleX(1)}
.link-underline svg{transition:transform .4s var(--ease)}
.link-underline:hover svg{transform:translateX(4px)}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out)}
.is-in[data-reveal]{opacity:1;transform:none}
.is-in[data-reveal="clip"]{clip-path:inset(0 0 0 0)}
/* On narrow screens a 30px sideways offset pushes the page 10px wider than the
   viewport before the element reveals, which shows up as a horizontal scroll.
   Reveal vertically instead — it reads better on a phone anyway. */
@media (max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(26px)}
}

/* split-text headline reveal */
.split .word{display:inline-block;overflow:hidden;vertical-align:top}
.split .word > span{display:inline-block;transform:translateY(110%);
  transition:transform 1s var(--ease-out);transition-delay:var(--wd,0ms)}
.split.is-in .word > span{transform:translateY(0)}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  padding:clamp(.7rem,1.6vw,1.15rem) 0;color:#fff;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .4s var(--ease),color .4s var(--ease);
}
.header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,19,15,.55),transparent);
  opacity:1;transition:opacity .4s var(--ease);pointer-events:none;
}
.header.is-stuck{background:rgba(250,249,245,.86);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);color:var(--ink);box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(8,19,15,.4)}
.header.is-stuck::after{opacity:0}
.header.is-hidden{transform:translateY(-105%)}
.header{transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease)}
.header__inner{display:flex;align-items:center;gap:1.25rem}

.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand__mark{width:auto;height:40px;color:currentColor;flex-shrink:0;
  transition:transform .6s var(--ease),opacity .4s var(--ease)}
.brand:hover .brand__mark{transform:scale(1.05)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.01em}
.brand__sub{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.72;font-weight:600}

.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a{position:relative;padding:.6rem .85rem;font-size:.92rem;font-weight:500;border-radius:999px;
  transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);opacity:.85}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header__cta{margin-left:.75rem;display:flex;align-items:center;gap:.6rem}
.phone-pill{
  display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.15rem;border-radius:999px;
  background:var(--brass);color:var(--ink);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 2px 0 rgba(8,19,15,.15);
}
.phone-pill:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(217,164,65,.8)}
.phone-pill svg{animation:ring 4.5s var(--ease) infinite}
@keyframes ring{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-14deg)}92%{transform:rotate(12deg)}94%{transform:rotate(-8deg)}96%{transform:rotate(5deg)}}

.burger{display:none;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1.5px currentColor;flex-shrink:0}
.burger span{display:block;width:18px;height:1.8px;background:currentColor;border-radius:2px;position:relative;
  transition:transform .4s var(--ease),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.8px;background:currentColor;
  border-radius:2px;transition:transform .4s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.is-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:75;background:var(--deep);color:var(--stone-100);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 3rem;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .8s var(--ease);pointer-events:none;
}
.drawer.is-open{clip-path:circle(150% at calc(100% - 46px) 46px);pointer-events:auto}
.drawer a{font-family:var(--display);font-size:clamp(1.9rem,9vw,3rem);padding:.28em 0;display:block;
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
.drawer.is-open a{opacity:1;transform:none}
.drawer a:hover{color:var(--water-lt)}
.drawer__foot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:var(--ink);
  padding:clamp(6rem,14vh,10rem) 0 clamp(3rem,7vh,5rem);
}
.hero__media{position:absolute;inset:-6% 0 0;z-index:0;will-change:transform}
.hero__scene{width:100%;height:112%;object-fit:cover}
/* Drop a real photo/video in and it covers the illustrated scene */
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(80% 60% at 18% 78%,rgba(8,19,15,.72),transparent 70%),
    linear-gradient(180deg,rgba(8,19,15,.55) 0%,rgba(8,19,15,.12) 32%,rgba(8,19,15,.55) 72%,rgba(8,19,15,.9) 100%);
}
/* shimmering water light */
.hero__caustics{
  position:absolute;left:-20%;right:-20%;bottom:-10%;height:62%;z-index:1;pointer-events:none;
  opacity:.3;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(102deg,rgba(95,201,174,0) 0 22px,rgba(140,235,210,.5) 24px,rgba(95,201,174,0) 30px),
    repeating-linear-gradient(78deg,rgba(255,255,255,0) 0 30px,rgba(190,255,238,.34) 33px,rgba(255,255,255,0) 41px);
  filter:blur(7px);
  animation:caustics 14s linear infinite;
}
@keyframes caustics{
  0%{transform:translate3d(0,0,0) skewY(0deg)}
  50%{transform:translate3d(-40px,10px,0) skewY(1.2deg)}
  100%{transform:translate3d(-80px,0,0) skewY(0deg)}
}
/* drifting light orbs — landscape lighting */
.hero__orbs{position:absolute;inset:0;z-index:1;pointer-events:none}
.orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,163,.95),rgba(217,164,65,.35) 40%,transparent 70%);
  filter:blur(1px);animation:drift var(--t,18s) ease-in-out infinite alternate;opacity:.8}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1);opacity:.35}
  to{transform:translate3d(var(--dx,20px),var(--dy,-40px),0) scale(1.35);opacity:.95}
}
/* koi */
.hero__koi{position:absolute;inset:auto 0 0;height:46%;z-index:1;pointer-events:none;opacity:.5;filter:blur(.4px)}

.hero__inner{position:relative;z-index:2}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;padding:.5rem 1rem .5rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:1.4rem;
}
.hero__eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--water-lt);
  box-shadow:0 0 0 0 rgba(95,201,174,.8);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(95,201,174,0)}100%{box-shadow:0 0 0 0 rgba(95,201,174,0)}}
.hero h1{max-width:16ch;text-shadow:0 2px 40px rgba(8,19,15,.45)}
.hero h1 em{font-style:italic;color:var(--water-lt);font-variation-settings:"SOFT" 100,"WONK" 1}
.hero__lede{max-width:52ch;margin-top:1.3rem;color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1rem + .4vw,1.28rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.hero__trust{
  margin-top:clamp(2.5rem,6vh,4rem);margin-bottom:clamp(1.5rem,4vh,3rem);
  display:grid;gap:1px;background:rgba(255,255,255,.16);
  grid-template-columns:repeat(4,1fr);border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.trust{padding:1.15rem 1.25rem;background:rgba(8,19,15,.42);transition:background .4s var(--ease)}
.trust:hover{background:rgba(47,156,132,.34)}
.trust b{display:block;font-family:var(--display);font-size:clamp(1.3rem,1.1rem + .9vw,2rem);line-height:1;font-weight:600}
.trust span{display:block;margin-top:.4rem;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:500}

.scroll-cue{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.8));
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ==========================================================================
   Marquee ticker
   ========================================================================== */
.marquee{background:var(--brass);color:var(--ink);padding:.85rem 0;overflow:hidden;
  border-block:1px solid rgba(8,19,15,.14)}
.marquee__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;flex-shrink:0}
.marquee span{font-family:var(--display);font-size:clamp(1rem,.9rem + .5vw,1.4rem);font-weight:600;white-space:nowrap}
.marquee i{width:7px;height:7px;border-radius:50%;background:var(--pine);flex-shrink:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* The header is brand + seven links + two buttons on one row. Below roughly
   1400px that stops fitting, and with nothing set to shrink, the phone button
   simply ran off the right edge. Two steps: tuck the nav in first, then hand
   over to the burger well before anything can overflow. */
@media (max-width:1400px){
  .header__inner{gap:1rem}
  .nav{gap:0}
  .nav a{padding:.6rem .58rem;font-size:.88rem}
  .nav a::after{left:.58rem;right:.58rem}
  .header__cta{margin-left:.5rem;gap:.5rem}
}
@media (max-width:1240px){
  .nav,.header__cta .btn{display:none}
  .burger{display:flex}
}
@media (max-width:1024px){
  .hero__trust{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .phone-pill span{display:none}
  .phone-pill{width:46px;height:46px;padding:0;justify-content:center;flex-shrink:0}
  .phone-pill svg{width:19px;height:19px;flex-shrink:0}
  .hero__trust{grid-template-columns:repeat(2,1fr)}
  /* On a phone the wordmark, the call button and the burger together were
     wider than the gutter allows, pushing the burger past the right edge. */
  .header__inner{gap:.6rem}
  .brand{min-width:0}
  .brand__mark{height:34px}
  .brand__txt{min-width:0}
  .brand__name{font-size:.9rem}
  .brand__sub{font-size:.55rem;letter-spacing:.16em}
}
@media (max-width:400px){
  .brand__name{font-size:.84rem}
  .brand__sub{display:none}
}
/* Below this the wordmark simply cannot share the row with the call button and
   the burger, so the logo carries the branding on its own. */
@media (max-width:380px){
  .brand__txt{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .split .word > span{transform:none !important}
}