/* ==========================================================================
   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;
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.75rem,3vw,2.5rem);
  background:var(--bg);
}
.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 .wrap{position:relative;z-index:1}
.hero .kicker{color:var(--cream-dim)}
.hero .kicker::after{background:var(--accent);width:100%}
.hero h1{margin-bottom:1.2rem;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.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}
/* 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}
.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: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}
}