/* ==========================================================================
   פצפץ — מכניסים צבע לאירוע
   Design system + layout. No build step, no framework.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* deep raspberry rather than near-black: the dark surfaces read pink too */
  --ink:#400c2c;
  --ink-2:#571239;
  --ink-3:#6d2350;
  --muted:#8a5a76;
  --line:#ffdcec;
  --paper:#ffffff;
  --cream:#fff4f9;

  --pink:#ff1f8c;
  --pink-2:#ff7ab8;
  --pink-soft:#ffd6e9;
  --rose:#ff4fa3;
  --violet:#b942d6;
  --violet-2:#f0a6d4;
  --cyan:#ff9ecb;
  --lime:#ffe066;
  --amber:#ffb020;

  --grad-hot:linear-gradient(135deg,#ff1f8c 0%,#d81ba6 100%);
  --grad-uv:linear-gradient(135deg,#ff4fa3 0%,#ff9ecb 100%);

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:40px;
  --shadow-sm:0 2px 8px rgba(64,12,44,.08);
  --shadow-md:0 10px 30px rgba(64,12,44,.12);
  --shadow-lg:0 24px 60px rgba(64,12,44,.20);

  --wrap:1180px;
  --pad:clamp(16px,4vw,32px);
  --font-display:"Secular One","Heebo",system-ui,sans-serif;
  --font-body:"Heebo","Assistant",system-ui,"Segoe UI",sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  /* the page ground is a soft pink so the white cards read as cards */
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:0;top:-100px;background:var(--ink);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 12px 0}
.skip:focus{top:0}

/* ---------- layout helpers ---------- */
.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.section{padding:clamp(56px,9vw,110px) 0;position:relative}
/* alternating bands: soft pink ground, deeper pink for the accent sections */
.section--cream{background:linear-gradient(180deg,#ffe6f2 0%,#ffdcec 100%)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--pink);background:var(--pink-soft);
  padding:7px 16px;border-radius:999px;margin-bottom:16px;
}
.h-sec{font-size:clamp(30px,5.2vw,52px);margin-bottom:14px}
.sub-sec{font-size:clamp(17px,2.2vw,20px);color:var(--muted);max-width:60ch;margin-bottom:clamp(28px,5vw,48px)}
.center{text-align:center}
.center .sub-sec{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;
  font-weight:700;font-size:17px;line-height:1;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--grad-hot);color:#fff;box-shadow:0 8px 24px rgba(255,46,148,.35)}
.btn--primary:hover{box-shadow:0 14px 34px rgba(255,46,148,.45)}
.btn--wa{background:#25D366;color:#0b3d1f;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.btn--wa:hover{box-shadow:0 14px 34px rgba(37,211,102,.45)}
.btn--ghost{background:transparent;border-color:currentColor}
.btn--light{background:#fff;color:var(--ink);box-shadow:var(--shadow-md)}
.btn--lg{padding:17px 34px;font-size:18px}
.btn--block{width:100%}
.btn svg{width:20px;height:20px;flex:none}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;inset-inline:0;z-index:100;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.hdr__in{display:flex;align-items:center;gap:18px;height:72px}
/* The logo is black script with pink wings. Inverting it to white over the
   photo hero turned it into an unreadable blob, so it keeps its real colours
   and sits on a white sticker while the header is transparent. */
.hdr__logo{
  flex:none;display:block;border-radius:14px;
  transition:background .3s ease,padding .3s ease,box-shadow .3s ease;
}
.hdr__logo img{height:46px;width:auto;display:block}
.hdr.is-top .hdr__logo{
  background:rgba(255,255,255,.95);padding:5px 13px;
  box-shadow:0 6px 22px rgba(48,8,32,.30);
}
.hdr__nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.hdr__nav a{
  padding:9px 13px;border-radius:999px;font-weight:600;font-size:16px;
  color:var(--ink);transition:background .2s ease,color .2s ease;
}
.hdr.is-top .hdr__nav a{color:#fff}
.hdr__nav a:hover{background:rgba(139,92,246,.12)}
.hdr.is-top .hdr__nav a:hover{background:rgba(255,255,255,.16)}
.hdr__cta{margin-inline-start:10px}
.hdr:not(.is-top){background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 8px 24px rgba(21,14,31,.06)}
.burger{display:none;margin-inline-start:auto;width:46px;height:46px;border:0;background:rgba(255,255,255,.14);border-radius:14px;align-items:center;justify-content:center}
.hdr:not(.is-top) .burger{background:var(--cream)}
.burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.25s}
.hdr.is-top .burger{color:#fff}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline:0;height:2px;background:currentColor;border-radius:2px;transition:.25s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:940px){
  .hdr__nav{
    position:fixed;top:72px;inset-inline:10px;background:#fff;color:var(--ink);
    flex-direction:column;align-items:stretch;gap:2px;padding:12px;
    border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
    transform:translateY(-14px) scale(.98);opacity:0;pointer-events:none;
    transition:.24s ease;max-height:calc(100dvh - 100px);overflow:auto;
  }
  .hdr__nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .hdr.is-top .hdr__nav a{color:var(--ink)}
  .hdr__nav a{padding:13px 16px;border-radius:14px;font-size:18px}
  .hdr__cta{margin:8px 0 0}
  .burger{display:flex}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:min(94dvh,860px);display:flex;align-items:center;
  background:var(--ink);color:#fff;overflow:hidden;padding:110px 0 60px;
}
.hero__bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);opacity:.62}
/* the photos stay readable; the pink above them is a wash, not a blanket */
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero__bg span:nth-child(even) img{transform:scaleX(-1)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(1200px 700px at 76% 8%,rgba(255,31,140,.42),transparent 66%),
    radial-gradient(950px 620px at 6% 94%,rgba(255,79,163,.34),transparent 66%),
    linear-gradient(180deg,rgba(58,10,38,.74) 0%,rgba(92,14,60,.56) 45%,rgba(48,8,32,.90) 100%);
}
.hero__in{position:relative;z-index:2;width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.hero__badge{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  padding:8px 18px;border-radius:999px;font-size:15px;font-weight:600;margin-bottom:22px;
}
.hero__badge b{color:var(--lime)}
.hero h1{
  font-size:clamp(38px,7.4vw,80px);line-height:1.02;margin-bottom:20px;max-width:16ch;
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#ffe066 10%,#fff6da 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 18px rgba(90,10,55,.55));
}
.hero__lead{font-size:clamp(18px,2.4vw,23px);color:rgba(255,255,255,.9);max-width:48ch;margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,56px)}
.hero__stats div{min-width:96px}
/* numbers stay LTR so "10+" does not flip to "+10" inside the RTL page */
.hero__stats b{display:block;font-family:var(--font-display);font-size:clamp(26px,4vw,38px);line-height:1;color:#fff;direction:ltr;unicode-bidi:isolate;text-align:right}
.hero__stats span{font-size:14px;color:rgba(255,255,255,.66)}
.hero__scroll{position:absolute;bottom:18px;inset-inline-start:50%;transform:translateX(50%);z-index:2;color:rgba(255,255,255,.6);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px}
.hero__scroll i{display:block;width:2px;height:26px;background:linear-gradient(180deg,transparent,#fff);border-radius:2px;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.2;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}}
@media (max-width:700px){
  .hero__bg{grid-template-columns:repeat(2,1fr)}
  .hero__bg span:nth-child(n+5){display:none}
  .hero__cta{display:grid;grid-template-columns:1fr;gap:12px}
  .hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
  .hero__scroll{display:none}
}

/* ---------- marquee ---------- */
.marquee{background:var(--ink-2);color:#fff;padding:14px 0;overflow:hidden;white-space:nowrap;border-block:1px solid rgba(255,255,255,.08)}
.marquee__track{display:inline-flex;gap:40px;animation:slide 30s linear infinite;font-family:var(--font-display);font-size:19px}
.marquee__track>span{display:inline-flex;align-items:center;gap:40px;color:rgba(255,255,255,.85)}
.marquee i{color:var(--pink);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- stalls ---------- */
.stalls{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.stall{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;
}
.stall:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.stall__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.stall__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.stall:hover .stall__media img{transform:scale(1.06)}
.stall__tag{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  background:rgba(255,255,255,.95);color:var(--ink);font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.stall__tag--soon{background:var(--ink);color:#fff}
.stall__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.stall h3{font-size:24px;margin-bottom:8px}
.stall p{font-size:16px;color:var(--muted);flex:1;margin-bottom:16px}
.stall__pick{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px;border-radius:14px;border:2px dashed var(--violet-2);
  background:#fff;color:var(--violet);font-weight:700;font-size:16px;transition:.2s;
}
.stall__pick:hover{background:#f6f0ff}
.stall__pick[aria-pressed="true"]{background:var(--grad-hot);border-style:solid;border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(255,46,148,.3)}
.stall__pick .check{display:none}
.stall__pick[aria-pressed="true"] .check{display:inline}
.stall__pick[aria-pressed="true"] .plus{display:none}
.stall__media--soon{
  display:grid;place-items:center;color:var(--pink);font-size:60px;line-height:1;
  background:repeating-linear-gradient(45deg,#ffeaf4 0 14px,#ffdcec 14px 28px);
}
.stall.is-soon{opacity:.72}
.stall.is-soon .stall__pick{border-color:var(--line);color:var(--muted);pointer-events:none;border-style:solid}

/* ---------- quote builder ---------- */
.builder{background:linear-gradient(160deg,#ff1f8c 0%,#c2189b 55%,#7c1560 100%);color:#fff;position:relative;overflow:hidden}
.builder::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 500px at 85% 0%,rgba(255,158,203,.45),transparent 65%),
             radial-gradient(700px 500px at 5% 100%,rgba(124,21,96,.5),transparent 65%);
}
.builder>.wrap{position:relative;z-index:1}
.builder .h-sec{color:#fff}
.builder .sub-sec{color:rgba(255,255,255,.72)}
.builder .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.builder__grid{display:grid;grid-template-columns:1.35fr .9fr;gap:26px;align-items:start}
@media (max-width:900px){.builder__grid{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);backdrop-filter:blur(10px)}
.card h3{font-size:21px;margin-bottom:6px}
.field{margin-bottom:20px}
.field>label,.field__label{display:block;font-weight:700;font-size:15px;margin-bottom:9px;color:rgba(255,255,255,.9)}
.field__hint{font-size:13px;color:rgba(255,255,255,.5);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:9px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.04);color:#fff;font-size:15px;font-weight:600;transition:.18s;
}
.chip:hover{background:rgba(255,255,255,.14)}
.chip[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.inp{
  width:100%;padding:13px 16px;border-radius:14px;font:inherit;font-size:16px;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);color:#fff;
  transition:.18s;
}
.inp::placeholder{color:rgba(255,255,255,.4)}
.inp:focus{background:rgba(255,255,255,.13);border-color:var(--violet-2);outline:none}
.inp[type="date"]{color-scheme:dark}
textarea.inp{resize:vertical;min-height:82px;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

.summary{position:sticky;top:92px}
.summary__list{list-style:none;margin:0 0 6px;padding:0;font-size:15.5px}
.summary__list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.summary__list li:last-child{border-bottom:0}
.summary__list .k{color:rgba(255,255,255,.6);flex:none}
.summary__list .v{font-weight:700;text-align:end}
.summary__empty{color:rgba(255,255,255,.55);font-size:15px;padding:8px 0 18px}
.summary__saved{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--lime);margin-top:14px;min-height:20px;opacity:0;transition:opacity .3s}
.summary__saved.show{opacity:1}
.linkish{background:none;border:0;padding:0;color:rgba(255,255,255,.55);font-size:14px;text-decoration:underline;text-underline-offset:3px;margin-top:12px}
.linkish:hover{color:#fff}

/* ---------- gallery ---------- */
.gal__filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.fbtn{
  padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;font-weight:600;font-size:15px;color:var(--ink-3);transition:.18s;
}
.fbtn:hover{border-color:var(--violet-2);color:var(--violet)}
.fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gal{columns:4;column-gap:14px}
@media (max-width:1000px){.gal{columns:3}}
@media (max-width:680px){.gal{columns:2}}
.gal figure{break-inside:avoid;margin:0 0 14px;position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--cream);cursor:zoom-in}
.gal figure[hidden]{display:none}
.gal__more{text-align:center;margin-top:26px}
.gal img{width:100%;height:auto;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,14,31,.5),transparent 45%);opacity:0;transition:.3s;pointer-events:none}
.gal figure:hover::after{opacity:1}
.fav{
  position:absolute;bottom:10px;inset-inline-end:10px;z-index:2;width:38px;height:38px;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;
  opacity:0;transform:translateY(6px);transition:.24s;box-shadow:var(--shadow-sm);
}
.gal figure:hover .fav,.fav.is-on{opacity:1;transform:none}
.fav svg{width:19px;height:19px;fill:none;stroke:var(--ink-3);stroke-width:2}
.fav.is-on{background:var(--pink)}
.fav.is-on svg{fill:#fff;stroke:#fff}
@media (hover:none){.fav{opacity:1;transform:none}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:150;background:rgba(15,9,22,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lb.is-open{display:flex}
.lb img{max-width:min(1100px,92vw);max-height:86dvh;width:auto;border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.lb__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;display:grid;place-items:center;backdrop-filter:blur(6px)}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__prev{inset-inline-end:18px}
.lb__next{inset-inline-start:18px}
.lb__close{position:absolute;top:18px;inset-inline-end:18px;transform:none}
.lb__count{position:absolute;bottom:20px;inset-inline:0;text-align:center;color:rgba(255,255,255,.6);font-size:14px}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;
}
.quote__stars{color:var(--amber);font-size:15px;letter-spacing:2px;margin-bottom:10px}
.quote p{font-size:16.5px;flex:1;position:relative;z-index:1}
.quote__who{display:flex;align-items:center;gap:11px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.quote__av{width:40px;height:40px;border-radius:50%;background:var(--grad-hot);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:17px;flex:none}
.quote__who b{font-size:15.5px;display:block}
.quote__meta{display:block;font-size:13px;color:var(--muted)}

/* ---------- courses ---------- */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-bottom:34px}
.course{
  border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.22s;
}
.course:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.course__media{aspect-ratio:16/10;overflow:hidden}
.course__media img{width:100%;height:100%;object-fit:cover}
.course__body{padding:22px;display:flex;flex-direction:column;flex:1}
.course h3{font-size:22px;margin-bottom:10px}
.course__meta{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--violet);background:#f4eeff;padding:5px 12px;border-radius:999px;margin-bottom:12px;align-self:flex-start}
.course p{font-size:15.5px;color:var(--muted)}
.course__inc{list-style:none;margin:0 0 18px;padding:0;font-size:14.5px;flex:1}
.course__inc li{display:flex;gap:8px;align-items:flex-start;padding:3px 0}
.course__inc li::before{content:"✓";color:#16a34a;font-weight:700;flex:none}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;margin-bottom:11px;overflow:hidden;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow-md);border-color:var(--violet-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 22px;font-weight:700;font-size:17.5px;
  display:flex;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-inline-start:auto;font-family:var(--font-display);font-size:26px;
  color:var(--pink);line-height:1;transition:transform .25s;flex:none;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--cream)}
.faq__a{padding:0 22px 20px;color:var(--muted);font-size:16.5px}
.faq__a p:last-child{margin-bottom:0}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.about__media{position:relative;isolation:isolate}
.about__media img{border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/5;object-fit:cover}
.about__media::before{
  content:"";position:absolute;inset:-16px -16px 44px 44px;border-radius:var(--r-xl);
  background:var(--grad-uv);opacity:.18;z-index:-1;
}
.about__sig{font-family:var(--font-display);font-size:22px;color:var(--pink);margin-top:6px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
.contact__cards{display:grid;gap:12px}
.ccard{
  display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.2s;
}
.ccard:hover{transform:translateX(-5px);box-shadow:var(--shadow-md);border-color:var(--violet-2)}
.ccard__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--pink-soft);color:var(--pink)}
.ccard__ic svg{width:22px;height:22px}
.ccard b{display:block;font-size:17px}
.ccard span{font-size:14px;color:var(--muted)}

/* ---------- footer ---------- */
.ftr{background:linear-gradient(180deg,#5e1440 0%,#400c2c 60%);color:rgba(255,255,255,.76);padding:56px 0 26px;font-size:15px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px}
@media (max-width:760px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
.ftr__brand img{height:56px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.ftr h4{color:#fff;font-size:17px;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{padding:4px 0}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr__soc{display:flex;gap:10px;margin-top:16px}
.ftr__soc a{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s;color:#fff}
.ftr__soc a:hover{background:var(--pink)}
.ftr__soc svg{width:20px;height:20px;fill:currentColor}
.ftr__bot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13.5px;color:rgba(255,255,255,.5)}

/* ---------- sticky mobile bar ---------- */
.bar{
  position:fixed;inset-inline:0;bottom:0;z-index:90;display:none;gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.bar .btn{flex:1;padding:14px 10px;font-size:16px}
@media (max-width:760px){.bar{display:flex}body{padding-bottom:78px}}

/* floating whatsapp (desktop) */
.wa-float{
  position:fixed;inset-inline-end:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:31px;height:31px;fill:#fff}
@media (max-width:760px){.wa-float{display:none}}

/* ---------- reveal ----------
   Only hidden once JS has confirmed it is running, so the page is never
   blank for a crawler or a browser where the script failed to load. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   Viewport range: 320px phones through 2560px desktops.
   ========================================================================== */

/* --- large desktops: use the space instead of a 1180px column in the middle --- */
@media (min-width:1500px){
  :root{--wrap:1340px}
  .gal{columns:5}
  .hero h1{max-width:18ch}
}
@media (min-width:1800px){
  :root{--wrap:1460px}
  body{font-size:18px}
}
@media (min-width:2200px){
  :root{--wrap:1600px}
  .gal{columns:6}
}

/* --- short viewports (phone held sideways, small laptops) ---
   94dvh of a 380px-tall landscape phone cannot hold the hero copy. */
@media (max-height:620px){
  .hero{min-height:auto;padding:104px 0 52px}
  .hero__scroll{display:none}
  .hero h1{font-size:clamp(30px,5.6vw,52px)}
  .hero__cta{margin-bottom:30px}
}
@media (max-height:460px){
  .hero__stats{display:none}
  .hdr__nav{max-height:calc(100dvh - 90px)}
}

/* Grid and flex children default to min-width:auto, so a single unbreakable
   token — the email address in the contact card — can stretch its track and
   with it the whole page. Cap them and let long words break. */
.contact>*,.about>*,.builder__grid>*,.contact__cards>*,.stalls>*,
.quotes>*,.courses>*,.ftr__grid>*,.ccard>*,.hdr__in>*{min-width:0}
.ccard b{overflow-wrap:anywhere}

/* --- small phones (iPhone SE and narrow Androids) ---
   the long WhatsApp button labels were forcing a horizontal scrollbar. --- */
@media (max-width:400px){
  :root{--pad:14px}
  .btn{padding:13px 18px;font-size:16px;white-space:normal;text-align:center}
  .btn--lg{padding:15px 20px;font-size:16.5px}
  .hero__badge{font-size:13.5px;padding:7px 14px}
  .hero__stats{gap:18px 12px}
  .chip{font-size:14px;padding:8px 13px}
  .stall__body,.course__body{padding:18px}
  .gal__filters{gap:7px}
  .fbtn{font-size:14px;padding:8px 14px}
  .bar{gap:7px;padding-inline:8px}
  .bar .btn{padding:13px 6px;font-size:15px}
}
@media (max-width:340px){
  .gal{columns:1}
  .quote{padding:20px}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:96px;inset-inline-start:50%;transform:translate(50%,20px);z-index:160;
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.3s;
}
.toast.show{opacity:1;transform:translate(50%,0)}