/* =========================================================================
   Extra Care — Home page sections
   ========================================================================= */

/* ---------------- HERO ---------------- */
.hero{ position:relative; min-block-size:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-block:calc(var(--nav-h) + 3rem) 4rem; overflow:hidden; }
.hero__grid{ position:absolute; inset:0; background-image:linear-gradient(var(--hair-soft) 1px,transparent 1px),linear-gradient(90deg,var(--hair-soft) 1px,transparent 1px); background-size:clamp(40px,5vw,64px) clamp(40px,5vw,64px); -webkit-mask:radial-gradient(80% 70% at 50% 38%,#000 10%,transparent 72%); mask:radial-gradient(80% 70% at 50% 38%,#000 10%,transparent 72%); opacity:.7; }
.hero__glow{ position:absolute; inset-block-start:-10%; inset-inline:0; margin-inline:auto; inline-size:min(70vw,820px); block-size:min(70vw,820px); border-radius:50%; background:radial-gradient(circle, color-mix(in oklch,var(--accent) 16%,transparent), transparent 62%); filter:blur(8px); z-index:0; }
.hero__mesh{ position:absolute; inset:0; z-index:0; inline-size:100%; block-size:100%; opacity:.6; filter:blur(8px) saturate(1.05); -webkit-mask:radial-gradient(95% 80% at 50% 36%,#000 30%,transparent 78%); mask:radial-gradient(95% 80% at 50% 36%,#000 30%,transparent 78%); }
@media (prefers-reduced-motion:reduce){ .hero__mesh{ filter:blur(20px); opacity:.4; } }
.hero__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero__emblem{ inline-size:clamp(120px,15vw,196px); aspect-ratio:1; margin-block-end:clamp(1.5rem,3vw,2.6rem); }
.hero__kicker{ margin-block-end:1.4rem; }
.hero h1{ font-size:var(--t-h1); letter-spacing:-.03em; max-inline-size:16ch; }
.hero h1 .grad{ background:linear-gradient(100deg,var(--clinics),var(--ped-deep) 40%,var(--lab) 72%,var(--scan-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero__sub{ margin-block-start:1.5rem; max-inline-size:54ch; }
.hero__cta{ margin-block-start:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.hero__scroll{ position:absolute; inset-block-end:1.6rem; inset-inline:0; margin-inline:auto; width:max-content; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--gray); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-family:var(--font-accent); font-weight:700; z-index:2; }
.hero__scroll .m{ inline-size:1px; block-size:34px; background:linear-gradient(var(--gray),transparent); position:relative; overflow:hidden; }
.hero__scroll .m::after{ content:""; position:absolute; inset-block-start:-34px; inset-inline:0; block-size:34px; background:var(--accent); animation:scrollcue 2.2s var(--e-inout) infinite; }
@keyframes scrollcue{ 0%{ transform:translateY(0);} 60%,100%{ transform:translateY(68px);} }
.hero__ecg{ position:absolute; inset-block-end:0; inset-inline:0; z-index:1; }

/* ---------------- PROMISE (pinned scrollytelling) ---------------- */
.promise{ position:relative; }
.promise__sticky{ position:sticky; inset-block-start:0; block-size:100vh; display:flex; align-items:center; overflow:hidden; }
.promise__rail{ position:absolute; inset-block-start:50%; inset-inline-start:var(--gutter); translate:0 -50%; display:flex; flex-direction:column; gap:.9rem; z-index:3; }
/* On phones the rail tick numbers (01, 02, 03) overlap the centered headline text — hide them. */
@media (max-width:720px){ .promise__rail{ display:none; } }
.promise__rail .tick{ display:flex; align-items:center; gap:.8rem; color:var(--gray-3); font-family:var(--font-accent); font-weight:800; font-size:.8rem; letter-spacing:.1em; transition:color .4s; }
/* In RTL mode (Arabic) the rail flips to the right edge — put the bar on the OUTSIDE (right of number) so the number sits closer to the content text */
body[dir="rtl"] .promise__rail .tick{ flex-direction:row-reverse; }
.promise__rail .tick .bar{ inline-size:34px; block-size:2px; background:var(--hair); transition:.4s; }
.promise__rail .tick.on{ color:var(--accent); }
.promise__rail .tick.on .bar{ inline-size:60px; background:var(--accent); }
.promise__beats{ position:relative; inline-size:100%; block-size:100vh; }
.beat{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-inline:var(--gutter); opacity:0; transform:translateY(40px) scale(.99); transition:opacity .7s var(--e-out), transform .7s var(--e-out); pointer-events:none; }
.beat.on{ opacity:1; transform:none; pointer-events:auto; }
.beat .eyebrow{ margin-block-end:1.5rem; }
.beat h2{ font-size:clamp(2rem,1rem+4.4vw,4.6rem); letter-spacing:-.03em; max-inline-size:18ch; }
/* Arabic glyphs render visually smaller — bump the Arabic version by ~10pt while leaving English at its original clamp */
body[dir="rtl"] .beat h2.i18n-ar{ font-size:clamp(2.6rem,1.4rem+4.8vw,5.3rem); line-height:1.3; }
.beat h2 b{ color:var(--accent); font-weight:700; }
.beat p{ margin-block-start:1.4rem; max-inline-size:50ch; }
.beat__bg{ position:absolute; inset:0; z-index:-1; opacity:.5; background:radial-gradient(60% 60% at 50% 50%, color-mix(in oklch,var(--accent) 12%,transparent), transparent 70%); transition:background .6s; }

/* ---------------- SPLIT DOORS ---------------- */
.doors{ display:flex; min-block-size:88svh; position:relative; }
.door{ position:relative; flex:1 1 50%; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(2rem,4vw,4rem); color:#fff; text-decoration:none; transition:flex-grow .7s var(--e-inout); min-block-size:60svh; }
.door:hover,.door:focus-visible{ flex-grow:1.45; }
.door__media{ position:absolute; inset:0; z-index:0; }
.door__media img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform 1.2s var(--e-out), filter .6s; transform:scale(1.06); }
.door:hover .door__media img{ transform:scale(1.12); }
.door__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in oklch,var(--door) 30%,transparent) 0%, color-mix(in oklch,var(--door) 86%,#000 12%) 100%); mix-blend-mode:multiply; }
.door__media::before{ content:""; position:absolute; inset:0; z-index:1; background:color-mix(in oklch,var(--door) 30%,transparent); }
.door__content{ position:relative; z-index:2; max-inline-size:32ch; }
.door .eyebrow{ color:rgba(255,255,255,.9); }
.door .eyebrow::before{ background:#fff; }
.door h3{ font-size:clamp(1.8rem,1rem+3vw,3.4rem); letter-spacing:-.025em; margin-block-start:.6rem; }
/* Arabic glyphs render smaller — boost the door title in RTL for visual parity with English */
body[dir="rtl"] .door h3{ font-size:clamp(2.3rem,1.3rem+3.6vw,4.2rem); line-height:1.3; }
body[dir="rtl"] .door .eyebrow{ font-size:.86rem; }
.door p{ margin-block-start:1rem; color:rgba(255,255,255,.86); max-inline-size:42ch; }
.door .door__go{ margin-block-start:1.6rem; display:inline-flex; align-items:center; gap:.6em; font-weight:600; }
.door .door__go .ar{ transition:transform .4s var(--e-out); }
.door:hover .door__go .ar{ transform:translateX(5px); }
.door--mivida{ --door:#7C51A1; }
.door--rehab{ --door:#0081C5; }
.doors__seam{ position:absolute; inset-block:0; inset-inline-start:50%; inline-size:1px; background:rgba(255,255,255,.4); z-index:5; pointer-events:none; }
.door .emtag{ position:absolute; inset-block-start:clamp(2rem,4vw,4rem); inset-inline-start:clamp(2rem,4vw,4rem); inline-size:48px; block-size:48px; z-index:2; }
@media (max-width:820px){
  .doors{ flex-direction:column !important; }
  .door{ flex:0 0 auto !important; min-block-size:48svh; inline-size:100%; }
  .door:hover{ flex-grow:0 !important; }
  .doors__seam{ display:none; }
}

/* ---------------- SPECIALTIES BENTO ---------------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:1rem; }
.bcell{ position:relative; border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(1.2rem,2vw,1.7rem); background:var(--bg); overflow:hidden; transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s; display:flex; flex-direction:column; min-block-size:160px; }
.bcell:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.bcell .top{ display:flex; align-items:center; justify-content:space-between; }
.bcell .ic{ inline-size:30px; block-size:30px; color:var(--accent); }
.bcell .idx{ font-family:var(--font-accent); font-weight:800; color:var(--gray-3); font-size:.85rem; }
.bcell h4{ margin-block-start:auto; font-size:clamp(1.05rem,.9rem+.5vw,1.32rem); letter-spacing:-.02em; }
.bcell p{ font-size:.88rem; color:var(--gray); margin-block-start:.4rem; }
.bcell--2{ grid-column:span 2; } .bcell--tall{ grid-row:span 2; }
.bcell.accent{ background:linear-gradient(155deg, color-mix(in oklch,var(--accent) 88%,#000 16%), var(--accent)); color:#fff; border-color:transparent; }
/* Brand-coloured specialty cards — exact emblem hexes, more saturated tint */
.bcell[data-color="blue"]{ --bc:#0099D6; }
.bcell[data-color="orange"]{ --bc:#D38729; }
.bcell[data-color="purple"]{ --bc:#7C51A1; }
.bcell[data-color="green"]{ --bc:#1B8C45; }
.bcell[data-color]{ background:color-mix(in oklch, var(--bc) 32%, #fff 68%); border-color:color-mix(in oklch, var(--bc) 50%, transparent); }
.bcell[data-color] .ic{ color:var(--bc); }
.bcell[data-color] .idx{ color:color-mix(in oklch, var(--bc) 75%, #555 25%); }
.bcell[data-color]:hover{ background:color-mix(in oklch, var(--bc) 42%, #fff 58%); border-color:var(--bc); }
.bcell.accent .ic{ color:#fff; } .bcell.accent p{ color:rgba(255,255,255,.86); } .bcell.accent .idx{ color:rgba(255,255,255,.55); }
.bcell.accent .emfill{ position:absolute; inset-block-end:-18%; inset-inline-end:-8%; inline-size:55%; opacity:.16; }
@media (max-width:860px){ .bento{ grid-template-columns:repeat(2,1fr); } .bcell--2{ grid-column:span 2; } }
@media (max-width:520px){ .bento{ grid-template-columns:1fr; } .bcell--2,.bcell--tall{ grid-column:span 1; grid-row:span 1; } }

/* ---------------- EXTENDED CARE STRIP ---------------- */
.beyond{ background:var(--bg-soft); }
.beyond__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.beyond__list{ display:grid; gap:0; }
.beyond__item{ display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:center; padding-block:1.3rem; border-block-start:1px solid var(--hair); cursor:default; transition:padding-inline-start .4s var(--e-out); }
.beyond__item:hover{ padding-inline-start:.6rem; }
.beyond__item .ic{ inline-size:34px; block-size:34px; color:var(--accent); flex:none; }
.beyond__item h4{ font-size:1.18rem; letter-spacing:-.02em; }
.beyond__item p{ font-size:.92rem; color:var(--gray); margin-block-start:.2rem; }
.beyond__item .pl{ font-family:var(--font-accent); font-weight:800; color:var(--gray-3); font-size:.8rem; }
.beyond__visual{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.beyond__visual img{ inline-size:100%; block-size:100%; object-fit:cover; }
.beyond__visual .badge{ position:absolute; inset-block-end:1.2rem; inset-inline-start:1.2rem; background:color-mix(in oklch,var(--bg) 86%,transparent); backdrop-filter:blur(10px); border-radius:var(--r-md); padding:.9rem 1.1rem; display:flex; gap:.8rem; align-items:center; box-shadow:var(--shadow-sm); }
.beyond__visual .badge .ic{ inline-size:26px; block-size:26px; color:var(--accent); }
.beyond__visual .badge b{ display:block; font-size:.95rem; } .beyond__visual .badge span{ font-size:.78rem; color:var(--gray); }
@media (max-width:820px){ .beyond__grid{ grid-template-columns:1fr; } .beyond__visual{ aspect-ratio:16/11; } }

/* ---------------- 24/7 DARK BEAT ---------------- */
.promise247{ background:var(--ink-2); color:#fff; position:relative; overflow:hidden; text-align:center; padding-block:clamp(6rem,11vw,12rem); }
.promise247__em{ inline-size:clamp(120px,16vw,200px); aspect-ratio:1; margin:0 auto clamp(2rem,4vw,3rem); filter:drop-shadow(0 0 40px color-mix(in oklch,var(--accent) 60%,transparent)); }
.promise247 .eyebrow{ color:var(--accent); }
.promise247 h2{ font-size:clamp(2.2rem,1rem+4.6vw,5rem); letter-spacing:-.03em; max-inline-size:18ch; margin-inline:auto; }
.promise247 p{ color:rgba(255,255,255,.7); max-inline-size:50ch; margin:1.4rem auto 0; }
.promise247__cta{ margin-block-start:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
@media (max-width:560px){
  /* Side-by-side on mobile, no wrap */
  .promise247__cta{ flex-wrap:nowrap; gap:.6rem; }
  .promise247__cta .btn{ flex:1 1 0; padding:.85em .8em; font-size:.92rem; white-space:nowrap; }
}
.promise247__glow{ position:absolute; inset-block-start:50%; inset-inline:0; margin-inline:auto; inline-size:min(80vw,900px); block-size:min(80vw,900px); translate:0 -50%; border-radius:50%; background:radial-gradient(circle, color-mix(in oklch,var(--accent) 20%,transparent), transparent 60%); z-index:0; }
.promise247 .wrap{ position:relative; z-index:2; }
.promise247__ticker{ position:absolute; inset-block-end:0; inset-inline:0; border-block-start:1px solid rgba(255,255,255,.1); padding-block:1rem; display:flex; gap:0; white-space:nowrap; color:rgba(255,255,255,.4); font-family:var(--font-accent); font-weight:700; letter-spacing:.2em; font-size:.8rem; text-transform:uppercase; overflow:hidden; }
.marquee{ display:inline-flex; gap:3rem; padding-inline-end:3rem; animation:marquee 26s linear infinite; will-change:transform; }
.marquee bdi.ar, .promise247__ticker bdi.ar{ letter-spacing:0 !important; text-transform:none !important; font-family:var(--font-ar); font-feature-settings:"liga","calt","kern"; font-size:1.18em; vertical-align:middle; }
.promise247__ticker .marquee span{ display:inline-flex; gap:3rem; }
/* Two duplicated copies inside .marquee → translate by exactly one copy width (-50%) for a seamless loop */
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Force the marquee styling to stay identical regardless of body language —
   override the global RTL letter-spacing/text-transform reset for this element only */
.promise247__ticker, .promise247__ticker .marquee, .promise247__ticker .marquee > span{ letter-spacing:.2em !important; text-transform:uppercase !important; direction:ltr; }
.promise247__ticker .marquee bdi.ar{ direction:rtl; }
body[dir="rtl"] .marquee{ animation-direction:normal; }
@media (prefers-reduced-motion:reduce){ .marquee{ animation:none; } }

/* ---------------- TRUST ---------------- */
.trust__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; }
.trust__stats .s{ background:var(--bg); padding:clamp(1.6rem,3vw,2.4rem); }
.trust__stats .s .v{ font-family:var(--font-accent); font-weight:800; font-size:clamp(2.4rem,1rem+4vw,3.8rem); letter-spacing:-.03em; color:var(--accent); line-height:1; }
.trust__stats .s .l{ margin-block-start:.6rem; color:var(--gray); font-size:.95rem; }
.trust__stats .s .ph{ display:inline-block; margin-block-start:.4rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-3); font-family:var(--font-accent); font-weight:700; }
.trust__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-block-start:1rem; }
.tcard{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(1.4rem,2.4vw,2rem); background:var(--bg); }
.tcard .ic{ inline-size:38px; block-size:38px; color:var(--accent); }
.tcard h4{ font-size:1.22rem; margin-block-start:1.1rem; letter-spacing:-.02em; }
.tcard p{ font-size:.94rem; color:var(--gray); margin-block-start:.5rem; }
@media (max-width:860px){ .trust__stats{ grid-template-columns:repeat(2,1fr); } .trust__cards{ grid-template-columns:1fr; } }

/* ---------------- FAMILY · "one becomes four" ---------------- */
.family__split{ position:relative; padding-block-start:clamp(40px,6vw,80px); margin-block-start:clamp(.5rem,2vw,1.5rem); }
.family__anchor{ position:absolute; inset-block-start:clamp(6px,1.6vw,24px); inset-inline:0; margin-inline:auto; inline-size:clamp(120px,15vw,170px); aspect-ratio:1; pointer-events:none; }
.family__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.6vw,1.2rem); }
.fcard{ position:relative; border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(1.4rem,2.4vw,2rem); overflow:hidden; min-block-size:236px; display:flex; flex-direction:column; transition:transform .5s var(--e-out), box-shadow .5s var(--e-out); }
.fcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.fcard__mark{ display:block; inline-size:clamp(42px,5vw,54px); aspect-ratio:1; transform-origin:center center; will-change:transform; transition:transform 1.05s cubic-bezier(.22,.85,.24,1); z-index:4; }
.fcard__mark img{ inline-size:100%; block-size:100%; object-fit:contain; display:block; }
.fcard__body{ display:flex; flex-direction:column; flex:1; opacity:0; transform:translateY(16px); transition:opacity .7s var(--e-out), transform .7s var(--e-out); }
.fcard h4{ margin-block-start:.9rem; font-size:1.4rem; letter-spacing:-.02em; }
.fcard p{ font-size:.92rem; color:var(--gray); margin-block-start:.4rem; }
.fcard .em-piece{ opacity:.1; }
.fcard[data-dir="n"] .em-piece[data-dir="n"],
.fcard[data-dir="s"] .em-piece[data-dir="s"],
.fcard[data-dir="e"] .em-piece[data-dir="e"],
.fcard[data-dir="w"] .em-piece[data-dir="w"]{ opacity:1; }
.fcard .em-guides,.fcard .em-ring{ display:none; }
.fcard::after{ content:""; position:absolute; inset-block-end:-30%; inset-inline-end:-15%; inline-size:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in oklch,var(--fc) 18%,transparent),transparent 70%); }
.family__split.revealed .fcard__body,
.family__row .fcard__body{ opacity:1; transform:none; }
.family__split.revealed .fcard[data-dir="e"] .fcard__body{ transition-delay:.10s; }
.family__split.revealed .fcard[data-dir="s"] .fcard__body{ transition-delay:.18s; }
.family__split.revealed .fcard[data-dir="w"] .fcard__body{ transition-delay:.26s; }
.family__split.revealed .fcard[data-dir="e"] .fcard__mark{ transition-delay:.06s; }
.family__split.revealed .fcard[data-dir="s"] .fcard__mark{ transition-delay:.12s; }
.family__split.revealed .fcard[data-dir="w"] .fcard__mark{ transition-delay:.18s; }
@media (max-width:860px){ .family__row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .family__split{ padding-block-start:0; } .family__anchor{ display:none; } .fcard__mark{ transform:none !important; } .fcard__body{ opacity:1; transform:none; } }
@media (max-width:480px){ .family__row{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .family__split{ padding-block-start:0; } .family__anchor{ display:none; } .fcard__mark{ transform:none !important; } .fcard__body{ opacity:1 !important; transform:none !important; } }

/* ---------------- CLOSING CTA ---------------- */
.closing{ position:relative; text-align:center; overflow:hidden; }
.closing__em{ position:absolute; inset-block-start:50%; inset-inline:0; margin-inline:auto; inline-size:min(60vw,640px); translate:0 -50%; opacity:.05; z-index:0; }
.closing .wrap{ position:relative; z-index:2; }
.closing h2{ font-size:var(--t-h1); letter-spacing:-.03em; max-inline-size:16ch; margin-inline:auto; }
.closing p{ margin:1.4rem auto 0; max-inline-size:48ch; }
.closing__cta{ margin-block-start:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* shared section heading block */
.shead{ max-inline-size:62ch; }
.shead.center{ margin-inline:auto; }
.shead h2{ font-size:var(--t-h2); letter-spacing:-.025em; margin-block-start:1.1rem; }
.shead p{ margin-block-start:1.1rem; }
.shead__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-block-end:clamp(2rem,4vw,3.5rem); }

/* ============ OVERHAUL: denser hero + showcase + gallery + testimonials ============ */
.hero{ min-block-size:auto; padding-block:calc(var(--nav-h) + clamp(1.6rem,4vw,3rem)) clamp(2.5rem,5vw,4rem); }
.hero__emblem{ inline-size:clamp(92px,10vw,140px); margin-block-end:clamp(.9rem,2.2vw,1.6rem); }
.hero h1{ max-inline-size:18ch; }
.hero__showcase{ position:relative; inline-size:100%; max-inline-size:1060px; margin-block-start:clamp(2.4rem,5vw,3.6rem); display:grid; grid-template-columns:1fr 1.26fr 1fr; gap:clamp(.7rem,1.4vw,1.15rem); align-items:center; }
.hero__showcase .hs{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--bg-soft); }
.hero__showcase .hs img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; aspect-ratio:3/4; transition:transform 1.1s var(--e-out); }
.hero__showcase .hs--2{ position:relative; } .hero__showcase .hs--2 img{ aspect-ratio:4/5; }
.hero__showcase .hs--1{ transform:rotate(-2.4deg) translateY(14px); }
.hero__showcase .hs--3{ transform:rotate(2.4deg) translateY(14px); }
.hero__showcase:hover .hs img{ transform:scale(1.05); }
.hs__badge{ position:absolute; inset-block-end:.7rem; inset-inline:0; margin-inline:auto; inline-size:max-content; max-inline-size:92%; display:inline-flex; align-items:center; gap:.5em; background:color-mix(in oklch,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-radius:var(--r-pill); padding:.5em .9em; font-size:.76rem; font-weight:600; box-shadow:var(--shadow-sm); }
.hs__badge .pulse{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--scan-deep); box-shadow:0 0 0 0 color-mix(in oklch,var(--scan-deep) 55%,transparent); animation:emergpulse 2s var(--e-out) infinite; }
.hs__stat{ position:absolute; inset-block-start:-7%; inset-inline-start:-3%; background:var(--ink); color:#fff; border-radius:var(--r-md); padding:.75rem 1rem; box-shadow:var(--shadow-lg); text-align:center; z-index:3; }
.hs__stat .num{ display:block; font-size:1.7rem; line-height:1; color:#fff; }
.hs__stat span{ font-size:.68rem; letter-spacing:.04em; color:rgba(255,255,255,.7); }
body[dir="rtl"] .hs__stat{ inset-inline-start:auto; inset-inline-end:-3%; }
@media (max-width:640px){ .hero__showcase{ max-inline-size:none; gap:clamp(.4rem,1.4vw,.7rem); } .hs__stat{ inset-block-start:-5%; padding:.5rem .7rem; } .hs__stat .num{ font-size:1.3rem; } }

/* gallery */
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(140px,1fr); gap:clamp(.7rem,1.4vw,1rem); }
.gallery__grid .g{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); min-block-size:150px; }
.gallery__grid .g img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform 1s var(--e-out); }
.gallery__grid .g:hover img{ transform:scale(1.06); }
.gallery__grid .g--tall{ grid-row:span 2; }
.gallery__grid .g--wide{ grid-column:span 2; }
.gallery__grid .g figcaption{ position:absolute; inset-block-end:0; inset-inline:0; padding:1.4rem 1rem .85rem; color:#fff; font-weight:600; font-size:.95rem; letter-spacing:-.01em; background:linear-gradient(transparent, color-mix(in oklch,var(--ink) 78%, transparent)); }
@media (max-width:760px){ .gallery__grid{ grid-template-columns:repeat(2,1fr); } .gallery__grid .g--tall{ grid-row:span 1; } }

/* testimonials */
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-block-start:clamp(1.6rem,3vw,2.6rem); }
.tcard2{ margin:0; background:var(--bg); border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(1.5rem,2.4vw,2rem); display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-sm); transition:transform .5s var(--e-out), box-shadow .5s var(--e-out); }
.tcard2:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.tcard2 .stars{ color:var(--lab); letter-spacing:.12em; font-size:.95rem; }
.tcard2 blockquote{ margin:0; font-size:1.12rem; line-height:1.5; letter-spacing:-.01em; color:var(--ink); }
.tcard2 figcaption{ display:flex; align-items:center; gap:.8rem; margin-block-start:auto; }
.tcard2 figcaption img{ inline-size:48px; block-size:48px; border-radius:50%; object-fit:cover; flex:none; }
.tcard2 figcaption b{ display:block; font-size:.98rem; } .tcard2 figcaption small{ color:var(--gray); font-size:.85rem; }
@media (max-width:820px){ .testi__grid{ grid-template-columns:1fr; max-inline-size:560px; margin-inline:auto; } }

/* ===== de-crowd hero + showcase choreography ===== */
.hero__sub{ margin-block-start:clamp(1.4rem,2.4vw,2rem); }
.hero__cta{ margin-block-start:clamp(2rem,3.4vw,2.8rem); }
.hero__showcase{ margin-block-start:clamp(3.2rem,6vw,4.8rem); }
.hero__showcase .hs--1{ transform:rotate(-1.8deg) translateY(10px); }
.hero__showcase .hs--3{ transform:rotate(1.8deg) translateY(10px); }
.hero__showcase .hs, .hero__showcase .hs__stat{ opacity:0; animation:xcFade 1s var(--e-out) both; }
.hero__showcase .hs--1{ animation-delay:.18s; }
.hero__showcase .hs--2{ animation-delay:.30s; }
.hero__showcase .hs--3{ animation-delay:.42s; }
.hero__showcase .hs__stat{ animation-delay:.62s; }
@keyframes xcFade{ from{ opacity:0; } to{ opacity:1; } }
/* a little more air in dense grids */
.gallery__grid{ gap:clamp(.85rem,1.6vw,1.15rem); }
.bento{ gap:clamp(.9rem,1.6vw,1.2rem); }
.testi__grid{ gap:clamp(1.1rem,1.8vw,1.4rem); }
@media (prefers-reduced-motion:reduce){ .hero__showcase .hs, .hero__showcase .hs__stat{ opacity:1; animation:none; } }