/* ==========================================================================
   RIPPLES Studio / Podcast (Hebrew) — NOCTURNE design system, RTL.
   Ported from the global site's css/nocturne.css so the Hebrew properties
   read as the same brand: near-black warm ground, cream type, single brick
   accent, film grain, glass nav capsule, hairline surfaces.

   Type is the one place this file diverges from nocturne.css, because the
   brand's Latin faces (Monigue, Bebas Neue, Inter) carry no Hebrew glyphs:
   every stack puts the brand face FIRST and Birzia second, so Latin words
   render in the brand face and Hebrew falls through to Birzia per-glyph.
   Birzia stays self-hosted; it also has Latin glyphs, hence the ordering.
   Shared verbatim by studio-site/ and podcast-site/ — edit once, copy over.
   ========================================================================== */

/* --- Birzia: Hebrew, self-hosted (weights archived in _shared/fonts) ------ */
@font-face { font-family:'Birzia'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/Birzia-Light.woff2') format('woff2'), url('../fonts/Birzia-Light.woff') format('woff'); }
@font-face { font-family:'Birzia'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Birzia-Medium.woff2') format('woff2'), url('../fonts/Birzia-Medium.woff') format('woff'); }
@font-face { font-family:'Birzia'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Birzia-Bold.woff2') format('woff2'), url('../fonts/Birzia-Bold.woff') format('woff'); }
@font-face { font-family:'Birzia'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/Birzia-Black.woff2') format('woff2'), url('../fonts/Birzia-Black.woff') format('woff'); }

/* --- Monigue: the brand display face (Latin only), same file as the global site --- */
@font-face { font-family:'Monigue'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Monigue.woff2') format('woff2'), url('../fonts/Monigue.woff') format('woff'); }

:root{
  /* ground */
  --bg:#080706;
  --bg-2:#0d0b09;
  --surface:#14110d;
  --surface-2:#1b1611;
  /* ink */
  --cream:#f1ebde;
  --cream-dim:#ada594;
  --cream-faint:#6a6357;
  /* RIPPLES red — the single accent */
  --accent:#c24a2c;
  --accent-bright:#e0633a;
  --accent-deep:#9d391e;
  --accent-glow:rgba(194,74,44,.26);
  --accent-soft:rgba(194,74,44,.12);
  /* lines */
  --line:rgba(241,235,222,.09);
  --line-strong:rgba(241,235,222,.16);
  /* type stacks — brand face first, Birzia carries the Hebrew */
  --display:'Monigue','Birzia',sans-serif;
  --label:'Bebas Neue','Birzia',sans-serif;
  --sans:'Inter','Birzia',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* metrics */
  --ease:cubic-bezier(.2,.7,.3,1);
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --nav-h:74px;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:400;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--cream)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);border-radius:4px;
}

/* --- film grain: the signature Nocturne texture ------------------------- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}20%{transform:translate(2%,3%)}30%{transform:translate(-1%,2%)}40%{transform:translate(3%,-1%)}50%{transform:translate(-2%,1%)}60%{transform:translate(1%,-3%)}70%{transform:translate(-3%,2%)}80%{transform:translate(2%,-2%)}90%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}

/* --- type --------------------------------------------------------------- */
/* Eyebrow = Bebas label over a short brick rule (the global site's .kicker). */
.kicker{
  display:inline-block;font-family:var(--label);font-weight:400;
  font-size:clamp(19px,2vw,23px);line-height:1;letter-spacing:.05em;
  color:var(--cream);margin-bottom:clamp(14px,1.5vw,20px);
}
.kicker::after{content:"";display:block;height:2px;background:var(--accent);margin-top:6px}

h1,h2,h3,h4{font-family:var(--display);font-weight:900;font-synthesis-weight:none;
  line-height:1.02;letter-spacing:0;color:var(--cream)}
h1{font-size:clamp(2.6rem,6vw,4.9rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:.4em}
h3{font-size:clamp(1.3rem,2vw,1.75rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--cream)}
.lead{max-width:56rem;margin-inline:auto;color:var(--cream-dim);font-size:clamp(1rem,1.4vw,1.15rem)}
.lead strong{color:var(--cream)}
.center{text-align:center}
/* Sized for a bare figure but also for "החל מ - ₪250/שעה": a full Hebrew phrase
   at display scale gets clumsy fast, so this stays well under the h2 ceiling. */
.price{font-family:var(--display);font-weight:900;font-synthesis-weight:none;
  font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.1;color:var(--accent-bright);
  letter-spacing:.01em;margin:.5rem 0 1.1rem;text-wrap:balance}
.price small{display:block;font-family:var(--sans);font-weight:400;font-size:.9rem;
  letter-spacing:0;color:var(--cream-faint);margin-top:.5rem}

/* --- layout ------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
main{padding-top:var(--nav-h)}
.section{padding:clamp(3.5rem,7vw,6.5rem) 0;position:relative}
/* the hero CTA and the first headline below it were sitting two full section
   pads apart - close that up without touching the rhythm further down */
.hero + .section{padding-top:clamp(2rem,3.5vw,3rem)}
/* Section seam: a hairline that fades out at the page edges with a short accent
   tick centred on it. Without this, two neighbouring dark bands read as one
   unbroken black field. Uses ::after (not ::before) because .section--dark
   already spends ::before on its glow. */
.section::after,.hero::after,.site-footer::after{
  content:"";position:absolute;top:0;inset-inline:0;height:3px;pointer-events:none;z-index:2;
  background:
    linear-gradient(90deg,transparent,rgba(241,235,222,.10) 12%,rgba(241,235,222,.24) 50%,
                    rgba(241,235,222,.10) 88%,transparent) top left/100% 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top center/70px 3px no-repeat;
}
.hero::after{display:none}          /* nothing to separate above the hero */

/* Legacy Elementor band names, re-pointed at the Nocturne ground. Alternating
   grounds plus a warm wash off the top edge give each band its own volume. */
.section--cream{background-color:var(--bg)}
.section--pale{background-color:var(--bg-2)}
.section--cream,.section--pale{
  background-image:radial-gradient(ellipse 85% 55% at 50% 0%,rgba(194,74,44,.06),transparent 72%);
  background-repeat:no-repeat;
}
.section--dark{background-color:var(--surface)}
.section--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,var(--accent-soft),transparent 70%);
}
.section--dark .wrap{position:relative}

/* Scroll-in motion. Content is visible by default and only hidden once JS has
   flagged the document — a no-JS or failed-JS load must never blank a section. */
.js-anim [data-rise]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

/* --- skip links --------------------------------------------------------- */
/* Parked with a transform rather than a -9999px offset: in RTL a far inline-start
   offset is a real overflow risk, and this stays inside the viewport box. */
.skip{position:absolute;inset-inline-start:0;top:0;z-index:2000;background:var(--accent);
  color:#fff;padding:.75rem 1.25rem;transform:translateY(-200%)}
.skip:focus{transform:none}

/* --- header: fixed, transparent, glass capsule around the links --------- */
.site-header{position:fixed;top:0;inset-inline:0;z-index:1000;padding:13px 0 0;
  transition:padding .35s var(--ease),background .35s var(--ease)}
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(8,7,6,.92),rgba(8,7,6,.72) 60%,transparent);
  transition:opacity .35s var(--ease);
}
.site-header.solid{padding-top:8px}
.site-header.solid::before{opacity:1}
/* grid, not flex: 1fr auto 1fr keeps the capsule dead-centre whatever the CTA width */
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;min-height:60px;position:relative}
.brand{display:flex;align-items:center;justify-self:start;padding:.5rem 0}
.brand img{width:132px;height:auto;
  filter:drop-shadow(0 0 14px rgba(224,99,58,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.9));
  transition:filter .28s var(--ease)}
.brand:hover img{filter:drop-shadow(0 0 20px rgba(224,99,58,.66)) drop-shadow(0 2px 3px rgba(0,0,0,.9))}
.nav{
  /* No justify-self here: the 1fr/auto/1fr grid already centres the capsule, and
     self-alignment also applies to ABSOLUTELY POSITIONED boxes, so a stray
     `center` kept shrink-wrapping the mobile drawer to its content width. */
  display:flex;align-items:center;gap:26px;padding:9px 26px;
  background:linear-gradient(180deg,rgba(26,21,16,.6),rgba(13,11,9,.5));
  border:1px solid var(--line-strong);border-radius:100px;
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(241,235,222,.05);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.site-header.solid .nav{background:linear-gradient(180deg,rgba(20,16,12,.93),rgba(11,9,8,.89))}
.nav a{position:relative;font-size:14.5px;font-weight:500;letter-spacing:.01em;color:var(--cream);
  padding:6px 0;white-space:nowrap;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:inset-inline-end;transition:transform .25s var(--ease)}
.nav a:hover{color:var(--accent-bright)}
.nav a:hover::after{transform:scaleX(1)}
.nav-toggle{display:none;background:none;border:0;color:var(--cream);font-size:1.6rem;
  line-height:1;cursor:pointer;padding:.25rem .5rem;justify-self:end}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:15px 26px;border-radius:2px;cursor:pointer;border:1px solid var(--line-strong);
  background:transparent;color:var(--cream);text-align:center;
  transition:transform .18s var(--ease),background .18s var(--ease),
             box-shadow .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent-bright);transform:translateY(-2px)}
.btn--brick{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 0 0 0 var(--accent-glow)}
.btn--brick:hover{background:var(--accent-bright);color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 40px -10px var(--accent-glow)}
.btn--wide{width:100%}
/* the header CTA is a single <a class="btn header-cta">, not a wrapper */
.btn.header-cta{justify-self:end;padding:10px 20px;font-size:14px;border-radius:100px;
  border-color:var(--accent);color:var(--accent-bright);background:var(--accent-soft)}
.btn.header-cta:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:none}

/* --- hero --------------------------------------------------------------- */
.hero{
  position:relative;text-align:center;overflow:hidden;
  /* pulled up under the glass nav, which is transparent until the page scrolls */
  margin-top:calc(var(--nav-h) * -1);
  /* a full screen on load: nothing of the next section shows until you scroll */
  min-height:100vh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(2.5rem,5vw,4rem);
  background:var(--bg);
}
/* background video layer. The poster is painted as a CSS background so it also covers
   reduced motion, no-JS and the moment before the file arrives. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--bg) url("/img/hero-poster-wide.jpg?v=2") center/cover no-repeat}
/* graded down so cream type holds over the brightest frames - the footage keeps its
   full frame, nothing is clouded over. Posters are baked at the same values. */
/* The softening and the grade are BAKED INTO THE FILE, not done here: a CSS blur()
   re-blurs a full-screen video every frame, on top of the grain overlay and the nav's
   backdrop-filter. Baking also made the files ~40% smaller, since the blur strips the
   detail the encoder was spending bits on. Only opacity is left to the browser. */
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block;opacity:.8}
/* the poster is the same footage: once the video runs it has to go, or the still
   ghosts through the video's opacity */
.hero-bg.is-playing{background-image:none}
/* Edge-anchored: the top band sits under the nav, the bottom hands off to the next
   section. The middle of the frame is left nearly alone - see the glyph shadows below. */
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,6,.88) 0%,rgba(8,7,6,.26) 24%,
    rgba(8,7,6,.3) 56%,rgba(8,7,6,.96) 100%)}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 12%,rgba(194,74,44,.20),transparent 68%),
    radial-gradient(ellipse 40% 30% at 12% 0%,rgba(157,57,30,.14),transparent 70%);
}
.hero::before{z-index:1}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .kicker{color:var(--cream);text-shadow:0 1px 1px rgba(8,7,6,1),0 2px 4px rgba(8,7,6,.8)}
.hero .kicker::after{background:var(--accent);width:100%}
/* contrast bought on the letters, not with a cloud over the footage */
.hero h1{margin-bottom:1.2rem;
  text-shadow:0 1px 1px rgba(8,7,6,1),0 2px 6px rgba(8,7,6,.85),0 0 22px rgba(8,7,6,.5)}
.hero-figure{
  margin-top:clamp(1.75rem,3vw,2.75rem);border:1px solid var(--line-strong);
  border-radius:8px;overflow:hidden;background:var(--bg-2);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 60px -30px var(--accent-glow);
}
.hero-cta{margin-top:clamp(1.75rem,3vw,2.5rem);display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.hero-figure video{display:block;width:100%;height:auto;background:var(--bg-2)}
/* the same figure treatment is reused inside sections - cap it so a portrait
   shot doesn't swallow the band the way a hero image should */
.section .hero-figure{max-width:52rem;margin-inline:auto;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}

/* --- feature cards ------------------------------------------------------ */
/* Flex (not grid) so an odd final row centres: podcast has 5, studio 4. */
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin-top:clamp(2.5rem,4vw,3.5rem)}
.feature{
  flex:1 1 17rem;max-width:22rem;background:var(--surface);color:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2.25rem 1.75rem 2rem;text-align:center;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.feature:hover{transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 30px -16px var(--accent-glow)}
.features--two .feature{flex-basis:24rem;max-width:27rem}
.feature h3{margin-bottom:.6rem;font-size:clamp(1.25rem,1.7vw,1.6rem)}
.feature p{font-size:15px;color:var(--cream-dim)}
/* a link alone in its own paragraph can carry a real touch target */
.feature p > a:only-child{display:inline-block;padding:.5rem 0;color:var(--accent-bright);font-weight:500}
.feature .ico{display:block;width:3rem;height:3rem;margin:0 auto 1.2rem;color:var(--accent-bright)}
.feature .ico svg{width:100%;height:100%;display:block}
/* The extracted Elementor icons carry an inline pale-cream fill/stroke. */
.feature .ico svg [fill="#f4f1c9"],.feature .ico svg [style*="f4f1c9"]{color:inherit}
.feature .ico svg path[style*="stroke: #f4f1c9"]{stroke:currentColor!important}
.feature .ico svg path[style*="fill: #f4f1c9"]{fill:currentColor!important}

.photo-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin-top:clamp(2.5rem,4vw,3.5rem)}
.photo-row img{border-radius:var(--radius);border:1px solid var(--line);
  filter:saturate(.95);transition:transform .5s var(--ease),border-color .3s var(--ease)}
.photo-row img:hover{transform:translateY(-4px);border-color:var(--line-strong)}

/* --- pricing cards ------------------------------------------------------ */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  margin-top:clamp(2.5rem,4vw,3.5rem)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.25rem 1.6rem 1.9rem;display:flex;flex-direction:column;text-align:center;position:relative;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 30px -16px var(--accent-glow)}
.card--featured{border-color:var(--accent);background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),0 0 40px -22px var(--accent-glow)}
.card .flag{
  position:absolute;top:-.8rem;inset-inline-start:50%;transform:translateX(50%);
  font-family:var(--label);font-size:13.5px;letter-spacing:.08em;font-weight:400;
  background:var(--accent);color:#fff;padding:5px 14px;border-radius:100px;white-space:nowrap;
}
/* Monigue has lowercase, but its caps and lowercase are very different weights -
   uppercasing keeps a row of package titles even (no-op on the Hebrew ones). */
.card h3{margin-bottom:.2rem;text-transform:uppercase}
/* Cards with no .price line: the title used to get its air from the price
   block's margins, so the sub-line (or the list itself) has to supply it. */
.card-sub{font-family:var(--sans);font-size:14.5px;line-height:1.55;
  color:var(--cream-faint);margin:.55rem 0 1.25rem;text-wrap:balance}
.card h3 + ul{margin-top:1.25rem}
.card ul{list-style:none;margin:0 0 1.6rem;text-align:start;font-size:15px;color:var(--cream-dim)}
.card li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.card li:last-child{border-bottom:0}
.card .btn{margin-top:auto}
.note{font-size:14.5px;color:var(--cream-faint);margin-top:1.75rem}

/* --- gear --------------------------------------------------------------- */
.gear{display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.5rem,4vw,3.5rem)}
.gear-cat{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.gear-cat:nth-child(even) .gear-photo{order:2}
.gear-photo img{border-radius:var(--radius);border:1px solid var(--line);filter:saturate(.95)}
.gear-list{columns:2;column-gap:2rem;list-style:none;font-size:14.5px;color:var(--cream-dim);
  margin-top:1.1rem}
.gear-list li{padding:.28rem 0;break-inside:avoid;border-bottom:1px solid var(--line)}

/* --- podcast: numbered steps ------------------------------------------- */
.steps{list-style:none;counter-reset:step;display:grid;gap:1.5rem;
  margin:clamp(2.5rem,4vw,3.5rem) 0;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.steps li{counter-increment:step;position:relative;padding-top:3.6rem;
  font-family:var(--display);font-weight:900;font-synthesis-weight:none;
  font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--cream)}
.steps li::before{
  content:counter(step);position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);
  font-family:var(--display);font-size:2.9rem;line-height:1;color:var(--accent);opacity:.9;
}
.steps li::after{content:"";position:absolute;top:3.05rem;inset-inline-start:50%;
  transform:translateX(50%);width:26px;height:2px;background:var(--accent)}

/* --- podcast: add-on tiles --------------------------------------------- */
/* flex, not grid: the tile count is odd, and a short final row should centre
   rather than leave a hole at the inline-end of the row */
.mini-cards{list-style:none;margin:clamp(2.5rem,4vw,3.5rem) 0 0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:1rem}
.mini{flex:1 1 14rem;max-width:20rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.3rem;text-align:center;
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.mini:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.mini h3{font-size:1.1rem;margin-bottom:.5rem}
.mini p{margin:0 0 .35rem;font-size:14.5px;color:var(--cream-dim)}
.mini .price{font-size:1.5rem;margin:.6rem 0 0;color:var(--accent-bright)}
.mini--wide{flex-basis:100%;max-width:none}
.mic-figure{margin:clamp(2.5rem,4vw,3.5rem) auto 0;max-width:22rem}
.mic-figure img{border-radius:var(--radius);border:1px solid var(--line)}

/* --- contact + form ----------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);margin-top:clamp(2.5rem,4vw,3.5rem)}
#contact-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:14px;font-weight:500;color:var(--cream-dim);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;padding:14px 16px;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:2px;color:var(--cream);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--cream-faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(241,235,222,.26)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cream-dim) 50%),
                   linear-gradient(135deg,var(--cream-dim) 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 2px),calc(0% + 24px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:var(--surface);color:var(--cream)}
.field textarea{min-height:8rem;resize:vertical}
.field--check{display:flex;gap:.65rem;align-items:flex-start;font-size:14.5px;color:var(--cream-dim);
  margin-top:1.25rem}
.field--check input{width:24px;height:24px;flex:0 0 auto;margin-top:.1rem;accent-color:var(--accent)}
.field--check label{margin:0;color:inherit}
.field--check a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}
#contact-form .btn{margin-top:1.5rem}
.form-status{margin-top:1rem;font-weight:500;min-height:1.5em;font-size:15px}
.form-status[data-state="ok"]{color:var(--accent-bright)}
.form-status[data-state="err"]{color:#ff8a6a}

.info-list{list-style:none}
.info-list li{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.info-list li:first-child{padding-top:0}
.info-list li:last-child{border-bottom:0}
.info-list h3{margin-bottom:.2rem;font-size:1.3rem}
.info-list p{font-size:15px;color:var(--cream-dim);margin-bottom:.2rem}
/* inline-block + padding so these clear a 36px touch target (accessibility law) */
.info-list a{display:inline-block;padding:.45rem 0;color:var(--accent-bright);font-weight:500;
  transition:color .2s var(--ease)}
.info-list a:hover{color:var(--accent)}
.info-list .ico{display:block;width:1.6rem;height:1.6rem;margin-bottom:.55rem;color:var(--accent)}
.info-list .ico svg{width:100%;height:100%;display:block}
.info-list .ico svg,.info-list .ico svg *{fill:currentColor!important}

/* --- footer ------------------------------------------------------------- */
.site-footer{background:var(--bg-2);position:relative;
  padding:clamp(3.5rem,6vw,5rem) 0 2.25rem;text-align:center}
.site-footer img{width:150px;margin-inline:auto;
  filter:drop-shadow(0 0 14px rgba(224,99,58,.32))}
.site-footer .tagline{margin:1.5rem 0;color:var(--cream-dim);font-size:15px}
.site-footer .tagline strong{font-family:var(--label);font-weight:400;font-size:20px;
  letter-spacing:.06em;color:var(--cream);display:block;margin-bottom:.35rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:center;
  list-style:none;margin:0 0 1.75rem;font-size:14.5px}
.footer-links a{display:inline-block;padding:.6rem .25rem;color:var(--cream-dim);
  transition:color .2s var(--ease)}
.footer-links a:hover{color:var(--accent-bright)}
.copy{font-size:13.5px;color:var(--cream-faint)}

/* --- floating WhatsApp -------------------------------------------------- */
.wa-float{
  position:fixed;inset-inline-start:1.25rem;bottom:1.25rem;z-index:900;
  width:54px;height:54px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.8);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(37,211,102,.5)}
.wa-float svg{width:30px;height:30px;fill:#0b2e18}

/* --- legal pages -------------------------------------------------------- */
.legal{max-width:52rem;margin-inline:auto;color:var(--cream-dim)}
.legal h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.75rem;color:var(--cream)}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:2.5rem;text-align:start;color:var(--cream)}
.legal h3{font-size:1.15rem;margin-top:1.75rem;color:var(--cream)}
.legal p,.legal li{font-size:16px}
.legal ul,.legal ol{padding-inline-start:1.3rem;margin-bottom:1em}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}

/* --- responsive --------------------------------------------------------- */
@media (max-width:960px){
  .gear-cat,.contact-grid{grid-template-columns:1fr}
  .gear-cat:nth-child(even) .gear-photo{order:0}
  .gear-list{columns:1}
}
@media (max-width:860px){
  /* Back to flex on mobile. As a grid child the absolutely positioned drawer
     resolves its insets against its GRID AREA and keeps shrink-wrapping to
     161px whatever grid-column/justify-self say; flex restores the wrap as the
     containing block so inset-inline:0 really means full width. */
  .site-header .wrap{display:flex;align-items:center;justify-content:space-between}
  .nav-toggle{display:block;padding:.55rem .7rem;font-size:1.7rem}
  .nav{
    position:absolute;inset-inline:0;top:calc(100% + 10px);flex-direction:column;
    align-items:stretch;gap:0;padding:.5rem 1.25rem;border-radius:10px;
    background:rgba(13,11,9,.97);backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);display:none;
    box-shadow:0 26px 60px -22px rgba(0,0,0,.85);
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.9rem .25rem;font-size:16px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .btn.header-cta{display:none}
}
@media (max-width:700px){
  .hero-bg{background-image:url("/img/hero-poster-tall.jpg?v=2")}
  /* svh, not vh: on a phone vh is the tall viewport, which would push the button
     under the browser bar on load */
  .hero{min-height:100svh}
}
@media (max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .steps{gap:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js-anim [data-rise]{opacity:1;transform:none}
}