/* ==========================================================================
   RIPPLES Studio (Hebrew) - rebuilt off legacy WordPress/Elementor.
   Palette + type are lifted from the original Elementor kit (post-5.css) so the
   page reads identically; see Website/hebrew-sites/README.md for the token table.
   RTL throughout. No build step - plain CSS.
   ========================================================================== */

/* --- Birzia: self-hosted on the old site, 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'); }

:root{
  --espresso:#252525;
  --cream:#EEE2CC;
  --pale:rgba(244,241,201,0.61);
  --tan:#BC9D7B;
  --brick:#9D391E;
  --brown:#41291D;
  --brown-mid:#8A572A;
  --white:#FEFEFE;
  --grey:#54595F;
  --maxw:1140px;
  --pad:clamp(1rem,4vw,2.5rem);
  --radius:10px;
  --font:'Birzia','Open Sans Hebrew','Arial Hebrew',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-weight:300;
  background:var(--cream);color:var(--espresso);
  line-height:1.65;font-size:clamp(1rem,.55vw + .9rem,1.125rem);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;font-weight:900}
h1{font-size:clamp(2rem,5.5vw,3.75rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.75rem)}
p{margin:0 0 1em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.center{text-align:center}
.section{padding:clamp(3rem,7vw,6rem) 0}
.section--cream{background:var(--cream)}
.section--dark{background:var(--brown);color:var(--cream)}
.section--pale{background:var(--pale)}

/* Skip links - the original site had them; accessibility law applies here. */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--espresso);
  color:var(--cream);padding:.75rem 1.25rem}
.skip:focus{inset-inline-start:0}

/* --- header ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(37,37,37,.92);
  backdrop-filter:blur(6px);color:var(--cream);
}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand img{width:150px}
.nav{margin-inline-start:auto;display:flex;gap:1.6rem;align-items:center}
.nav a{text-decoration:none;font-weight:400;font-size:1.0625rem;white-space:nowrap}
.nav a:hover{color:var(--tan)}
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:inherit;font-weight:700;font-size:1.0625rem;
  padding:.85rem 2rem;border-radius:var(--radius);
  background:var(--cream);color:var(--espresso);transition:background .18s,color .18s;
}
.btn:hover{background:var(--tan);color:var(--white)}
.btn--brick{background:var(--brick);color:var(--white)}
.btn--brick:hover{background:var(--brown-mid)}
.btn--wide{width:100%}
.nav-toggle{display:none;margin-inline-start:auto;background:none;border:0;color:var(--cream);
  font-size:1.75rem;line-height:1;cursor:pointer;padding:.25rem .5rem}

/* --- hero --------------------------------------------------------------- */
.hero{background:var(--brown);color:var(--cream);text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.hero .kicker{font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.18em;font-weight:400;
  margin-bottom:.6rem;color:var(--cream)}
.hero h1{margin-bottom:1.4rem}
.hero-figure{border:2px solid var(--tan);border-radius:var(--radius);overflow:hidden;margin-top:1.5rem}
.hero-cta{margin-top:1.75rem}

/* --- generic blocks ----------------------------------------------------- */
.lead{max-width:52rem;margin-inline:auto}

/* Feature cards: the originals are dark rounded cards on the cream page, with a cream line
   icon on top, centred text, and the last row centred (podcast has 5, studio has 4).
   Flex rather than grid precisely so an odd final row centres instead of leaving a hole. */
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2.5rem}
.feature{
  flex:1 1 17rem;max-width:22rem;
  background:var(--espresso);color:var(--cream);
  border-radius:14px;padding:2.25rem 1.75rem 2rem;text-align:center;
}
.features--two .feature{flex-basis:24rem;max-width:27rem}   /* studio: 4 cards, 2 per row */
.feature h3{color:var(--cream);font-size:clamp(1.25rem,1.6vw,1.6rem);margin-bottom:.75rem}
.feature p{font-size:.9375rem;margin-bottom:.5rem}
.feature p:last-child{margin-bottom:0}
.feature a{font-weight:700}
.feature .ico{display:block;width:3.25rem;height:3.25rem;margin:0 auto 1.1rem}
.feature .ico svg{width:100%;height:100%;display:block}   /* both axes: safe with or without viewBox */
.photo-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-top:2.5rem}
.photo-row img{border-radius:var(--radius)}

/* --- pricing ------------------------------------------------------------ */
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:2.5rem}
.card{
  background:var(--white);border:1px solid rgba(37,37,37,.12);border-radius:var(--radius);
  padding:2rem 1.5rem;display:flex;flex-direction:column;text-align:center;position:relative;
}
.card--featured{border-color:var(--brick);box-shadow:0 10px 30px rgba(37,37,37,.12)}
.card .flag{position:absolute;top:-.85rem;inset-inline-start:50%;transform:translateX(50%);
  background:var(--brick);color:var(--white);font-size:.8125rem;font-weight:700;
  padding:.3rem 1rem;border-radius:999px;white-space:nowrap}
.card h3{margin-bottom:.25rem}
.card .price{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:900;color:var(--brick);margin:.35rem 0 1rem}
.card .price small{display:block;font-size:.9375rem;font-weight:400;color:var(--grey)}
.card ul{list-style:none;margin:0 0 1.5rem;padding:0;text-align:start}
.card li{padding:.35rem 0;border-bottom:1px dashed rgba(37,37,37,.12)}
.card li:last-child{border-bottom:0}
.card .btn{margin-top:auto}
.note{font-size:.9375rem;color:var(--grey);margin-top:1.5rem}

/* --- gear lists --------------------------------------------------------- */
.gear{display:grid;gap:2.5rem;margin-top:2.5rem}
.gear-cat{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.gear-cat:nth-child(even) .gear-photo{order:2}
.gear-list{columns:2;column-gap:2rem;list-style:none;margin:0;padding:0;font-size:.9375rem}
.gear-list li{padding:.2rem 0;break-inside:avoid}
.gear-photo img{border-radius:var(--radius)}

/* --- contact / form ----------------------------------------------------- */
.contact-grid{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);margin-top:2.5rem}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:400;margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;padding:.8rem 1rem;
  border:1px solid rgba(37,37,37,.25);border-radius:var(--radius);background:var(--white);
  color:var(--espresso);
}
.field textarea{min-height:8rem;resize:vertical}
.field--check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem}
.field--check input{width:auto;margin-top:.35rem}
.form-status{margin-top:1rem;font-weight:700;min-height:1.5em}
.form-status[data-state="ok"]{color:var(--brown-mid)}
.form-status[data-state="err"]{color:var(--brick)}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{margin-bottom:1.5rem}
.info-list h3{margin-bottom:.15rem;font-size:1.25rem}
.info-list a{text-decoration:none;font-weight:700;color:var(--brick)}
.info-list .ico{display:block;width:1.9rem;height:1.9rem;margin-bottom:.4rem}
.info-list .ico svg{width:100%;height:100%;display:block}
/* The extracted SVGs carry an inline pale-cream fill - override it here or they disappear. */
.info-list .ico svg,.info-list .ico svg *{fill:var(--brick)!important}

/* --- footer ------------------------------------------------------------- */
.site-footer{background:var(--espresso);color:var(--cream);padding:3rem 0 2rem;text-align:center}
.site-footer img{width:160px;margin-inline:auto}
.site-footer .tagline{margin:1rem 0 1.5rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:center;
  list-style:none;margin:0 0 1.5rem;padding:0;font-size:.9375rem}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--tan)}
.copy{font-size:.875rem;color:rgba(238,226,204,.7)}

/* --- floating WhatsApp (was a plugin on the old site) ------------------- */
.wa-float{
  position:fixed;inset-inline-start:1.25rem;bottom:1.25rem;z-index:90;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* --- legal pages -------------------------------------------------------- */
.legal{max-width:52rem;margin-inline:auto}
.legal h1{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:1.5rem}
.legal h2{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-top:2rem}
.legal ul{padding-inline-start:1.25rem}

/* --- responsive --------------------------------------------------------- */
@media (max-width:900px){
  .gear-cat,.contact-grid{grid-template-columns:1fr}
  .gear-cat:nth-child(even) .gear-photo{order:0}
  .gear-list{columns:1}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;inset-inline:0;top:100%;flex-direction:column;gap:0;
    background:var(--espresso);padding:.5rem 0;display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.85rem var(--pad);width:100%}
  .site-header .wrap{position:relative}
  .header-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* --- podcast: "how it works" steps ------------------------------------- */
.steps{list-style:none;counter-reset:step;display:grid;gap:1.25rem;padding:0;margin:2.5rem 0;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.steps li{counter-increment:step;position:relative;padding-top:3.25rem;font-weight:700;
  font-size:1.125rem}
.steps li::before{
  content:counter(step);position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);
  width:2.5rem;height:2.5rem;border-radius:50%;background:var(--tan);color:var(--espresso);
  display:grid;place-items:center;font-size:1.25rem;font-weight:900;
}

/* --- podcast: compact add-on service tiles ------------------------------ */
.mini-cards{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.mini{background:var(--white);border:1px solid rgba(37,37,37,.12);border-radius:var(--radius);
  padding:1.5rem 1.25rem;text-align:center}
.mini h3{font-size:1.125rem;margin-bottom:.5rem}
.mini p{margin:0 0 .35rem;font-size:.9375rem}
.mini .price{font-size:1.375rem;margin:.5rem 0 0}
.mini--wide{grid-column:1/-1}

.mic-figure{margin:2.5rem auto 0;max-width:22rem}
.mic-figure img{border-radius:var(--radius)}