/* ═══════════════════════════════════════════════════════════
   STAGE 2.7 — JS takes over pnav positioning on project pages
   ═══════════════════════════════════════════════════════════
   position:sticky had too many edge cases. polish.js's
   initPnavStickyJS() now manages pnav position directly via
   inline styles (position:fixed when scrolled past, nothing
   otherwise). This CSS just ensures we don't fight the JS.
   ═══════════════════════════════════════════════════════════ */
body.project-page .pnav{
  /* Let JS control position — don't force sticky here */
  position: static;
  top: auto;
  /* These still apply for visual appearance */
  z-index: 100;
  /* Background/shadow inherited from Stage 2.6 rules below */
}

/* When JS puts pnav into fixed mode (inline style), these styles apply */
body.project-page .pnav[style*="position: fixed"],
body.project-page .pnav[style*="position:fixed"]{
  z-index: 100 !important;
  background: rgb(250,248,245) !important;
  box-shadow: 0 4px 20px rgba(12,63,81,.06) !important;
  border-bottom: 1px solid rgba(12,63,81,.08) !important;
}


/* ═══════════════════════════════════════════════════════════
   STAGE 2.6 — NUCLEAR fix: header covering pnav
   ═══════════════════════════════════════════════════════════
   Despite Stage 2.5 (z-index:51 on pnav, +2px buffer), user
   reports site-nav STILL covers pnav on project pages during
   scroll. Root causes identified:

   1. site-nav.stuck has box-shadow: 0 8px 32px rgba(...). That
      32px shadow extends DOWN over the pnav, creating visual
      "coverage" even if there's no element overlap.
   2. pnav background was rgba with alpha .82 — semi-transparent.
      The nav's shadow bleeds through that.
   3. During the nav's 350ms transition (default→stuck), the
      measured height is wrong → pnav top is wrong → visible
      overlap for ~300ms after each scroll event.

   Triple fix:
   (A) Remove site-nav's bottom box-shadow on project pages only
       (homepage keeps its shadow aesthetic).
   (B) pnav background becomes FULLY OPAQUE on project pages —
       a solid cream color that hides anything behind it.
   (C) pnav z-index bumped to 9999 — beats any future CSS.
       Combined with continuous JS measurement (polish.js onScrollStickyVars),
       the pnav now tracks the nav's actual height frame-by-frame.
   ═══════════════════════════════════════════════════════════ */

/* (A) Kill the bottom shadow of stuck site-nav on project pages
       — the 32px shadow was visually overlapping pnav */
body.project-page .site-nav.stuck{
  box-shadow: none !important;
  border-bottom: 1px solid rgba(12,63,81,.06) !important;
}

/* (B) Pnav: fully opaque background on project pages
       — no more "bleed through" from the nav */
body.project-page .pnav{
  background: rgb(250,248,245) !important;  /* SOLID cream, not rgba */
  backdrop-filter: none !important;          /* no blur needed on solid */
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(12,63,81,.08) !important;
  box-shadow: 0 4px 20px rgba(12,63,81,.04) !important;
}

/* (C) z-index 100 — above site-nav (50), below modals.
      Stage 2.7 JS positions pnav as fixed, so nuclear z-index
      isn't needed anymore. */
body.project-page .pnav,
body.project-page .project-sticky-nav{
  z-index: 100 !important;
}


/* ═══════════════════════════════════════════════════════════
   STAGE 2.5 — Fix: header was covering pnav on project pages
   ═══════════════════════════════════════════════════════════
   Root cause (user video 22 Apr):
   - Stage 2.4 added `margin-top: -1px` to pnav for pixel-perfect
     fusion with site-nav. But because site-nav has z-index:50
     and pnav had z-index:39, any overlap (even 1px) meant
     site-nav rendered ON TOP of pnav — hiding it.
   - Result: user scrolls, nav scrolls up, pnav gets covered
     by nav instead of sitting cleanly below it.

   Three-part fix:
   1. Removed Stage 2.4's negative margin on pnav
   2. Raised pnav z-index to 51 (above site-nav at 50) —
      safety net: even if sub-pixel overlap ever occurs,
      pnav stays visible on top.
   3. polish.js now adds a 2px safety buffer to --sticky-nav
      measurement — guarantees pnav always sits AT or BELOW
      the true bottom edge of nav, never above.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   STAGE 2.3 — Dynamic sticky heights (no more gaps)
   ═══════════════════════════════════════════════════════════
   Previously --sticky-urgency and --sticky-nav were hardcoded
   (46px, 84px). These assumed specific padding + content heights,
   but the actual rendered height depends on fonts, box-model, zoom.
   Any drift → gap between urgency-bar and site-nav, or between
   site-nav and pnav.

   Solution: polish.js measures urgency.getBoundingClientRect() and
   nav.getBoundingClientRect() (with .stuck class forced) at init,
   on resize, and when fonts load. Writes to :root as CSS vars.
   All sticky positioning now uses these vars.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   POLISH.CSS — Stage 1 + 1.5 consolidated
   Single source of truth for every cross-cutting polish rule.
   Loaded by: /, /projects/*, /privacy, /terms, /accessibility
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS (spacing + brand + focus)
   Strict scale per Stage 1.5 brief:
   --space-xs  = 8px   (tight inline gaps)
   --space-sm  = 16px  (eyebrow→H2, icon→label)
   --space-md  = 24px  (H2→lead, label→field)
   --space-lg  = 32px  (content→CTA, inter-field)
   --space-xl  = 48px  (lead→content, section-inner)
   --space-2xl = 72px  (between sections, mobile)
   --space-3xl = 96px  (between sections, desktop)
   ───────────────────────────────────────────── */
:root{
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:72px;
  --space-3xl:96px;

  --polish-gold:#C9A96E;
  --polish-focus-ring:0 0 0 3px rgba(201,169,110,.45);

  /* z-index system — explicit, no collisions */
  --z-float:60;
  --z-nav:100;
  --z-mobile-menu:150;
  --z-accessibility-panel:61;
  --z-urgency:9999;
  --z-popup:10000;
}

/* ─────────────────────────────────────────────
   2. URGENCY BAR
   Was inline in index.html. Moved here so every page
   that needs the banner gets the exact same styling.
   ───────────────────────────────────────────── */
body:has(.urgency-bar){padding-top:var(--sticky-urgency)}
body:has(.urgency-bar) .site-nav{top:var(--sticky-urgency) !important}
.urgency-bar{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--z-urgency);
  background:linear-gradient(135deg,#0C3F51 0%,#091f29 100%);
  color:#fff;
  padding:var(--space-xs) 20px;       /* 8 + 20 */
  text-align:center;
  font-family:'Heebo',sans-serif;
  font-size:13.5px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  direction:rtl;
  letter-spacing:.01em;
}
.urgency-bar-content{
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-sm);                /* 16 */
  flex-wrap:wrap;
}
.urgency-pulse{
  width:6px;height:6px;
  background:#c9a96e;
  border-radius:50%;
  display:inline-block;
  animation:urgencyPulse 2.4s ease-in-out infinite;
}
.urgency-text{color:rgba(255,255,255,.88);font-weight:500}
.urgency-cta{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(201,169,110,.45);
  background:rgba(201,169,110,.08);
  color:#c9a96e;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  font-size:13px;
  white-space:nowrap;
  letter-spacing:.02em;
  transition:background .22s ease, border-color .22s ease,
             color .22s ease, transform .22s ease;
}
.urgency-cta:hover{
  background:rgba(201,169,110,.22);
  border-color:rgba(201,169,110,.7);
  color:#e8c88a;
  transform:translateX(-2px);
}
@keyframes urgencyPulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.15)}
}

/* Urgency text long/short swap — prevents wrap on narrow phones */
.urgency-text-short{display:none}
@media(max-width:600px){
  .urgency-text-full{display:none}
  .urgency-text-short{display:inline}
  body:has(.urgency-bar){padding-top:var(--sticky-urgency)}
  body:has(.urgency-bar) .site-nav{top:var(--sticky-urgency) !important}
  .urgency-bar{padding:9px 12px;font-size:12px}
  .urgency-bar-content{gap:10px;flex-wrap:nowrap}
  .urgency-cta{font-size:11.5px;padding:4px 10px}
}
@media(max-width:360px){
  .urgency-text{font-size:11px}
  .urgency-cta{font-size:10.5px;padding:3px 9px}
}

/* ─────────────────────────────────────────────
   3. Z-INDEX SYSTEM (per Stage 1.5 audit P8)
   ───────────────────────────────────────────── */
.float-whatsapp{z-index:var(--z-float)}
.float-phone{z-index:calc(var(--z-float) + 1)}
.float-accessibility{z-index:calc(var(--z-float) + 2)}
.accessibility-panel{z-index:var(--z-accessibility-panel)}
.site-nav{z-index:var(--z-nav)}
.mobile-menu{z-index:var(--z-mobile-menu)}
.say-overlay{z-index:var(--z-popup) !important}

/* ─────────────────────────────────────────────
   4. UNIVERSAL FOCUS-VISIBLE (gold, consistent)
   Previously only .btn had a ring; keyboard users
   lost orientation on nav/FAQ/slider/dots/pills.
   ───────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.faq-question:focus-visible,
.thumb:focus-visible,
.slider-btn:focus-visible,
.say-more-btn:focus-visible,
.urgency-cta:focus-visible,
.ls-pill:focus-visible,
.acc-btn:focus-visible,
.nav-toggle:focus-visible,
.float-whatsapp:focus-visible,
.float-phone:focus-visible,
.float-accessibility:focus-visible,
.pnav__tab:focus-visible,
.project-tab:focus-visible,
.footer-social-pill:focus-visible,
.contact-link:focus-visible{
  outline:2px solid var(--polish-gold) !important;
  outline-offset:3px !important;
}
.skip-link:focus,
.skip-link:focus-visible{
  outline:2px solid var(--polish-gold) !important;
  outline-offset:3px !important;
  background:#0C3F51 !important;
  color:#fff !important;
}

/* ─────────────────────────────────────────────
   5. PACKAGE "מידע נוסף" BUTTON (flagship fix)
   Outer cards (dark glass on teal section) →
   light-on-dark. Featured (cream bg) → teal-on-light.
   Consistent size and shape across all three.
   ───────────────────────────────────────────── */
.package-card .say-more-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-xs);
  margin-top:22px;
  min-height:46px;
  padding:11px 26px;
  border-radius:999px;
  font-family:'Heebo',sans-serif;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  direction:rtl;
  width:auto;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1),
             background .22s ease, color .22s ease,
             border-color .22s ease, box-shadow .22s ease;
}
.package-card:not(.featured) .say-more-btn{
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.16);
}
.package-card:not(.featured) .say-more-btn:hover{
  background:#fff;
  color:var(--teal);
  border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}
.package-card.featured .say-more-btn{
  background:transparent;
  border:1.5px solid var(--teal);
  color:var(--teal);
}
.package-card.featured .say-more-btn:hover{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(12,63,81,.26);
}
.package-card .say-more-btn:active{transform:translateY(0) scale(.98)}
@media(max-width:640px){
  .package-card .say-more-btn{min-height:48px;padding:12px 26px;font-size:14px}
}


/* ─────────────────────────────────────────────
   7. .acc-btn tap target (44px min per WCAG)
   ───────────────────────────────────────────── */
.acc-btn{min-height:44px;padding:12px 14px;line-height:1.3}

/* ─────────────────────────────────────────────
   8. .btn min-height on mobile
   ───────────────────────────────────────────── */
@media(max-width:640px){
  .btn{min-height:50px}
}

/* ─────────────────────────────────────────────
   9. FORM FIELDS — override premium's outline:none
   and give keyboard users a visible gold ring.
   ───────────────────────────────────────────── */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
#leadForm input:focus-visible,
#leadForm textarea:focus-visible,
#leadForm select:focus-visible{
  outline:2px solid var(--polish-gold) !important;
  outline-offset:2px !important;
  border-color:rgba(201,169,110,.6) !important;
  box-shadow:0 0 0 4px rgba(201,169,110,.18),
             inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* Form submit on dark teal section — explicit gold ring */
#leadForm button[type="submit"]:focus-visible{
  outline:2px solid var(--polish-gold) !important;
  outline-offset:3px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.15),
             0 0 0 4px rgba(201,169,110,.22) !important;
}

/* Form spacing inside #leadForm — 16 between fields, 8 label-to-field */
#leadForm .form-grid{gap:var(--space-sm)}
#leadForm .field{gap:var(--space-xs)}
#leadForm .btn-row{margin-top:var(--space-md)}
#leadForm .contact-note{margin-top:var(--space-sm)}

/* ─────────────────────────────────────────────
  10. FOOTER / CONTACT POLISH
  ───────────────────────────────────────────── */
.footer-social-pill{color:rgba(255,255,255,.68)!important}
.footer-social-pill:hover{color:#fff!important}
.contact-link{min-height:40px;padding:6px 0!important}
.contact-link:hover{color:#fff!important;opacity:1!important}

/* Testimonial dots focus */
.testimonials-dots .dot:focus-visible{
  outline:2px solid var(--polish-gold) !important;
  outline-offset:4px !important;
}

/* Inline-style CTAs (checklist + final) — focus lift
   So keyboard users get the same affordance as mouse users. */
a[href="/brand/"]:focus-visible,
a[href="#checklist-cta"]:focus-visible{
  transform:translateY(-2px);
  transition:transform .22s ease;
}

/* Unified pressed state */
.btn:active,
.say-more-btn:active,
button[type="submit"]:active,
.urgency-cta:active,
.acc-btn:active{
  transform:translateY(0) scale(.98);
}

/* Nav CTA stays white on hover even behind the inline !important */
.site-nav .btn-primary,
.mobile-menu .btn-primary{color:#fff !important}

/* FAQ hover/focus indicator */
.faq-question:hover .faq-icon{background:rgba(12,63,81,.08)}
.faq-question:focus-visible{
  background:rgba(201,169,110,.06);
  border-radius:8px;
}

/* ─────────────────────────────────────────────
  11. HERO BREATHING ON MOBILE
  line-height:.91 is display-style for desktop drama,
  but Hebrew reads dense on phones.
  ───────────────────────────────────────────── */
@media(max-width:640px){
  .hero-title{line-height:1.18 !important; margin-bottom:26px !important}
  .hero-lead{margin-bottom:22px !important; line-height:1.8 !important}
  .hero-copy > div[style*="background:rgba(201,169,110,.1)"]{
    margin-bottom:28px !important;
  }
}

/* ─────────────────────────────────────────────
  12. CHECKLIST SECTION (homepage only, but rule
  is scoped and harmless on other pages)
  ───────────────────────────────────────────── */
#checklist-cta{
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, rgba(201,169,110,.14) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 100%, rgba(12,63,81,.06) 0%, transparent 55%),
    linear-gradient(180deg,#F7F3EE 0%,#F2EBE0 100%) !important;
}
.checklist-metrics{
  display:flex; justify-content:center; align-items:stretch;
  gap:12px; flex-wrap:wrap;
  max-width:560px; margin:0 auto var(--space-lg);
}
.checklist-metrics > div{
  flex:1 1 0; min-width:100px;
  padding:18px 14px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(201,169,110,.32);
  border-radius:16px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 20px rgba(12,63,81,.06), inset 0 1px 0 rgba(255,255,255,.7);
  text-align:center;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.checklist-metrics > div:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(12,63,81,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
.checklist-metrics strong{
  display:block;
  font-family:'Einstein','Heebo',sans-serif;
  font-size:26px; color:var(--teal);
  letter-spacing:-.02em; line-height:1; margin-bottom:6px;
  font-weight:800;
}
.checklist-metrics span{
  display:block;
  font-size:11.5px;
  color:#8C6B4B;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media(max-width:640px){
  .checklist-metrics{gap:8px; margin-bottom:28px}
  .checklist-metrics > div{padding:14px 8px; min-width:0}
  .checklist-metrics strong{font-size:20px}
  .checklist-metrics span{font-size:10px; letter-spacing:.1em}
}

/* FAQ → Final CTA soft transition (homepage only) */
#faq{padding-bottom:clamp(40px,5vh,64px) !important}
#faq::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:64px;
  background:linear-gradient(to bottom, transparent 0%, #F7F3EE 100%);
  pointer-events:none;
  z-index:1;
}
section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"]{
  padding-top:clamp(48px,6vh,72px) !important;
}

/* ─────────────────────────────────────────────
  13. PROJECT PAGES — Stage 1.5 additions
  ───────────────────────────────────────────── */

/* (Stage 1.8) language switcher is now visible on project pages — EN versions are live */

/* Project hero title — raise line-height on mobile for readable air (I9) */
@media(max-width:640px){
  .ph__title{line-height:1.05 !important}
}

/* Project sticky tabs — adjust top when urgency bar is present */
body.project-page:has(.urgency-bar) .pnav{top:calc(var(--sticky-urgency) + var(--sticky-nav)) !important}
body.project-page:has(.urgency-bar) section[id]{scroll-margin-top:calc(var(--sticky-urgency) + var(--sticky-nav) + 52px) !important}
@media(max-width:600px){
  body.project-page:has(.urgency-bar) .pnav{top:calc(var(--sticky-urgency) + var(--sticky-nav)) !important}
}

/* Project hero secondary button (when .btn-outline is used
   over a dark image, make it read right). I3 target. */
.ph .btn-outline{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:#fff !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.ph .btn-outline:hover{
  background:#fff !important;
  color:var(--teal) !important;
  border-color:#fff !important;
}

/* ─────────────────────────────────────────────
  14. SECTION RHYTHM (moved from inline)
  ───────────────────────────────────────────── */
.section{padding-block:clamp(56px, 7vh, 88px) !important}
.section-white + .section-gray,
.section-gray + .section-white,
.section-white + .section-cream,
.section-cream + .section-white{
  padding-top:clamp(48px, 6vh, 72px) !important;
}
@media(max-width:640px){
  .section{padding-block:clamp(44px, 6vh, 64px) !important}
  #checklist-cta{padding-block:clamp(56px, 8vh, 72px) !important; padding-inline:20px !important}
  #checklist-cta h2{font-size:clamp(24px, 6.5vw, 30px) !important}
  #checklist-cta > div > div[style*="background:#fff"]{padding:28px 22px !important}
  #checklist-cta a[href="/brand/"]{
    padding:18px 40px !important;
    font-size:16px !important;
    width:100%;
    max-width:320px;
    box-sizing:border-box;
  }
  section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] h2{font-size:clamp(24px, 6.5vw, 30px) !important}
  section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] .btn-row{
    flex-direction:column;
    width:100%;
    max-width:320px;
    margin-inline:auto;
  }
  section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] .btn-row a{
    width:100%;
    text-align:center;
    padding:16px 24px !important;
  }
  #contact h2{font-size:clamp(24px, 6.5vw, 30px) !important}
  #contact .contact-grid{padding:24px !important; border-radius:16px !important}
  #contact button[type="submit"]{padding:18px !important; font-size:16px !important}
}

/* ─────────────────────────────────────────────
  15. CTA HOVER VIA CSS (OQ1 — converted from inline onmouseover)
  Strip inline event handlers on the 3 big CTAs (checklist, final
  primary, form submit) and own hover in CSS so keyboard :focus-visible
  gets the same lift as mouse :hover, and there's no inline-style fight
  with the cascade.
  ───────────────────────────────────────────── */

/* Big checklist CTA — not a .btn, custom sizing */
.cta-checklist{
  box-shadow:0 12px 32px rgba(12,63,81,.3),0 4px 12px rgba(12,63,81,.18);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cta-checklist:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(12,63,81,.36),0 6px 16px rgba(12,63,81,.22);
}
.cta-checklist:focus-visible{
  transform:translateY(-2px);
}
.cta-checklist:active{transform:translateY(0) scale(.98)}

/* Final CTA primary — already has .btn .btn-primary.
   Re-apply the shadow baseline + transition here because we stripped
   the inline box-shadow along with the onmouseover handler. */
section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] .btn-primary{
  box-shadow:0 10px 28px rgba(12,63,81,.28) !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(12,63,81,.34) !important;
}

/* Form submit — already has .btn .btn-light. Same treatment. */
#leadForm button[type="submit"]{
  box-shadow:0 8px 24px rgba(0,0,0,.15) !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
#leadForm button[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}

/* ─────────────────────────────────────────────
  16. EYEBROW CONTRAST BOOST (OQ3)
  rgba(12,63,81,.44) was ~2.33:1 on white — below WCAG AA.
  Bumped to .62 → ~4.5:1 on white (AA). Teal sections bumped
  from .45 to .62 for the same AA level on dark.
  ───────────────────────────────────────────── */
.eyebrow{color:rgba(12,63,81,.62) !important}
.section-teal .eyebrow{color:rgba(255,255,255,.62) !important}

/* ═════════════════════════════════════════════════════
  17. ALIGNMENT SYSTEM — FINAL (Stage 1.5 round 3)

  Decision (Asaf, 2026-04-21):
    HE  → ALL TEXT right-aligned (no centered header blocks)
    EN  → ALL TEXT left-aligned (mirror)

  Only visual containers (grids, sliders, logo marquees, metric
  chips, testimonial controls) remain centered — text inside them
  still flows right (HE) or left (EN). Buttons keep centered inner
  text because that's button typography.
  ═════════════════════════════════════════════════════ */

/* ─ HE: override any centering exception to right ─ */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .project-pill,
html[dir="rtl"] .package-badge,
html[dir="rtl"] .section > .container > .reveal,
html[dir="rtl"] .section > .container > .reveal *,
html[dir="rtl"] .about-panel,
html[dir="rtl"] .about-panel > *,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .hero-copy > *,
html[dir="rtl"] .ph__text,
html[dir="rtl"] .ph__text > *,
html[dir="rtl"] .ps-split__text,
html[dir="rtl"] .ps-split__text > *,
html[dir="rtl"] .legal-card,
html[dir="rtl"] .legal-card > *,
html[dir="rtl"] .photo-caption,
html[dir="rtl"] .photo-caption > *,
html[dir="rtl"] .projects-head,
html[dir="rtl"] .projects-head > div > *{
  text-align:right !important;
}

/* btn-row: flex — use justify-content:flex-start (right in RTL) */
html[dir="rtl"] .btn-row{
  justify-content:flex-start !important;
}
/* Respect sections that explicitly want centered btn-row via inline style */
html[dir="rtl"] .btn-row[style*="justify-content:center"]{
  justify-content:center !important;
}

/* Override inline text-align:center on header wrappers */
html[dir="rtl"] #contact > .container > div > div[style*="text-align:center"],
html[dir="rtl"] #contact > .container > div > div[style*="text-align:center"] > *,
html[dir="rtl"] section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] > div,
html[dir="rtl"] section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] > div > *,
html[dir="rtl"] #checklist-cta > div,
html[dir="rtl"] #checklist-cta > div > h2,
html[dir="rtl"] #checklist-cta > div > p,
html[dir="rtl"] #checklist-cta > div > span,
html[dir="rtl"] #checklist-cta > div > a,
html[dir="rtl"] #checklist-cta div[style*="background:#fff"],
html[dir="rtl"] #checklist-cta div[style*="background:#fff"] > *,
html[dir="rtl"] #brandbook > .container,
html[dir="rtl"] #brandbook > .container > .reveal,
html[dir="rtl"] #brandbook > .container > .reveal > *{
  text-align:right !important;
}

/* Decorative horizontal lines — no margin-auto, flow to start edge */
html[dir="rtl"] #contact > .container > div > div[style*="text-align:center"] > div[style*="width:48px"],
html[dir="rtl"] section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] > div > div[style*="width:48px"]{
  margin-right:0 !important;
  margin-left:auto !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}

/* Button inner text stays centered (button typography — don't touch) */
html[dir="rtl"] .btn,
html[dir="rtl"] .btn > *,
html[dir="rtl"] button,
html[dir="rtl"] .say-more-btn,
html[dir="rtl"] .urgency-cta,
html[dir="rtl"] .ls-pill,
html[dir="rtl"] .acc-btn,
html[dir="rtl"] .cta-checklist,
html[dir="rtl"] .pnav__tab,
html[dir="rtl"] .project-tab,
html[dir="rtl"] .footer-social-pill,
html[dir="rtl"] .slider-btn,
html[dir="rtl"] .nav-toggle{
  text-align:center !important;
}

/* Visual containers with icons/chips/dots — center OK */
html[dir="rtl"] .checklist-metrics,
html[dir="rtl"] .checklist-metrics > div,
html[dir="rtl"] .testimonials-controls,
html[dir="rtl"] .testimonials-dots,
html[dir="rtl"] .swatches-row,
html[dir="rtl"] .swatch-item,
html[dir="rtl"] .logos-marquee,
html[dir="rtl"] .logo-svg-item,
html[dir="rtl"] .mark{
  text-align:center !important;
}

/* Keep metrics strong/span centered (numeric display) */
html[dir="rtl"] .checklist-metrics strong,
html[dir="rtl"] .checklist-metrics > div > span{
  text-align:center !important;
}

/* ─ LTR mirror (Stage 4 EN) ─ */

html[dir="ltr"] .eyebrow,
html[dir="ltr"] .project-pill,
html[dir="ltr"] .package-badge,
html[dir="ltr"] .section > .container > .reveal,
html[dir="ltr"] .section > .container > .reveal *,
html[dir="ltr"] .about-panel,
html[dir="ltr"] .about-panel > *,
html[dir="ltr"] .hero-copy,
html[dir="ltr"] .hero-copy > *,
html[dir="ltr"] .ph__text,
html[dir="ltr"] .ph__text > *,
html[dir="ltr"] .ps-split__text,
html[dir="ltr"] .ps-split__text > *,
html[dir="ltr"] .legal-card,
html[dir="ltr"] .legal-card > *,
html[dir="ltr"] .photo-caption,
html[dir="ltr"] .photo-caption > *,
html[dir="ltr"] .projects-head,
html[dir="ltr"] .projects-head > div > *,
html[dir="ltr"] #contact > .container > div > div[style*="text-align:center"],
html[dir="ltr"] #contact > .container > div > div[style*="text-align:center"] > *,
html[dir="ltr"] section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] > div,
html[dir="ltr"] section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] > div > *,
html[dir="ltr"] #checklist-cta > div,
html[dir="ltr"] #checklist-cta > div > *,
html[dir="ltr"] #brandbook > .container,
html[dir="ltr"] #brandbook > .container > .reveal,
html[dir="ltr"] #brandbook > .container > .reveal > *{
  text-align:left !important;
}

html[dir="ltr"] .btn-row{
  justify-content:flex-start !important;
}
html[dir="ltr"] .btn-row[style*="justify-content:center"]{
  justify-content:center !important;
}

html[dir="ltr"] #contact > .container > div > div[style*="text-align:center"] > div[style*="width:48px"],
html[dir="ltr"] section[style*="linear-gradient(180deg,#F7F3EE 0%,#EFE7D9"] > div > div[style*="width:48px"]{
  margin-left:0 !important;
  margin-right:auto !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}

html[dir="ltr"] .btn,
html[dir="ltr"] .btn > *,
html[dir="ltr"] button,
html[dir="ltr"] .say-more-btn,
html[dir="ltr"] .urgency-cta,
html[dir="ltr"] .ls-pill,
html[dir="ltr"] .acc-btn,
html[dir="ltr"] .cta-checklist,
html[dir="ltr"] .pnav__tab,
html[dir="ltr"] .project-tab,
html[dir="ltr"] .footer-social-pill,
html[dir="ltr"] .slider-btn,
html[dir="ltr"] .nav-toggle{
  text-align:center !important;
}

html[dir="ltr"] .checklist-metrics,
html[dir="ltr"] .checklist-metrics > div,
html[dir="ltr"] .testimonials-controls,
html[dir="ltr"] .testimonials-dots,
html[dir="ltr"] .swatches-row,
html[dir="ltr"] .swatch-item{
  text-align:center !important;
}

/* LTR arrow flip — common convention */
html[dir="ltr"] .cta-checklist::after{content:'→'}

/* ═════════════════════════════════════════════════════
  18. PERSISTENT CTAs — desktop nav + mobile sticky strip
  ═════════════════════════════════════════════════════ */

/* Desktop nav: second CTA (outline) lives next to primary */
.nav-actions .btn-outline.nav-cta-secondary{
  padding:0 16px !important;
  min-height:40px;
  font-size:13px;
}
@media(max-width:1180px){
  /* Hide secondary CTA between 981-1180 to save space, keep primary */
  .nav-actions .btn-outline.nav-cta-secondary{display:none}
}

/* Mobile sticky CTA strip — always visible on ≤980px */
.mobile-cta-strip{display:none}
@media(max-width:980px){
  .mobile-cta-strip{
    display:flex !important;
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:58;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    gap:8px;
    background:rgba(255,255,255,.98);
    border-top:1px solid rgba(12,63,81,.08);
    box-shadow:0 -4px 24px rgba(0,0,0,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    direction:rtl;
  }
  .mobile-cta-strip .btn{
    flex:1 1 0;
    min-height:44px;
    min-width:0;
    padding:10px 14px !important;
    font-size:13.5px !important;
    border-radius:10px !important;
    font-weight:700;
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  /* Body padding so content isn't hidden behind strip */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  /* Move floating buttons up to avoid collision with strip */
  .float-whatsapp{bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important}
  .float-phone{bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important}
  .float-accessibility{bottom:calc(212px + env(safe-area-inset-bottom,0px)) !important}
  .accessibility-panel{bottom:calc(270px + env(safe-area-inset-bottom,0px)) !important}
}
/* Hide mobile strip when:
   a) mobile menu is open (stacking would be confusing)
   b) popup is visible (covers strip with a modal anyway; avoid double CTAs)
   Strip always reachable otherwise. */
body.menu-open .mobile-cta-strip{opacity:0;pointer-events:none}
body:has(.say-overlay.visible) .mobile-cta-strip{opacity:0;pointer-events:none}

/* Floating button vertical stack when mobile-cta-strip is present.
   Strip height ≈ 44 + 20 padding = 64px. Need 12px gap above strip.
   WA at 88 gives 24px clear above strip bottom. Phone/a11y stack above. */
@media(max-width:980px){
  .float-whatsapp{bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important}
  .float-phone{bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important}
  .float-accessibility{bottom:calc(212px + env(safe-area-inset-bottom,0px)) !important}
  .accessibility-panel{bottom:calc(272px + env(safe-area-inset-bottom,0px)) !important}
  /* When mobile menu opens, float buttons already hidden via existing rules;
     when popup opens, they're covered by overlay. */
}

/* Safety margin for iOS keyboard: if an input is focused and the keyboard
   raises, fixed:bottom elements can overlap. We keep the strip visible
   (users may want to abandon the form via CTA) but lift it slightly so
   Safari's viewport shift doesn't push it offscreen in some scenarios. */
@media(max-width:980px){
  .mobile-cta-strip{
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* ═════════════════════════════════════════════════════
  19. SCROLL-SPY ACTIVE STATES
  ═════════════════════════════════════════════════════ */

/* Homepage nav link active — crisp + obvious
   - bolder weight (700) — no ambiguity
   - 3px rounded gold bar with soft glow — visible without screaming
   - subtle teal background pill around the active label for easy scan */
.site-nav .nav-links a{
  position:relative;
  font-size:14.5px !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
  transition:color .22s ease, font-weight .22s ease, opacity .22s ease;
}
@media (max-width:1180px){
  .site-nav .nav-links a{ font-size:14px !important; }
}
.site-nav .nav-links a.active{
  color:var(--teal) !important;
  font-weight:700 !important;
  opacity:1 !important;
}
.site-nav .nav-links a.active::after{
  content:'';
  position:absolute;
  bottom:-10px;
  inset-inline:0;
  height:3px;
  background:var(--polish-gold);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(201,169,110,.4);
}
/* Dim non-active siblings slightly so the active one pops */
.site-nav .nav-links:hover a:not(:hover),
.site-nav .nav-links:has(a.active) a:not(.active){
  opacity:.65;
}

/* Project page .pnav tab active — already strong (filled teal).
   Add a small lift for extra emphasis. */
.pnav__tab.active,
.project-tab.active{
  background:var(--teal) !important;
  color:#fff !important;
  border-color:var(--teal) !important;
  box-shadow:0 8px 24px rgba(12,63,81,.28) !important;
  transform:translateY(-1px);
}
/* Non-active tabs dim slightly when any tab is active */
.pnav:has(.pnav__tab.active) .pnav__tab:not(.active){
  opacity:.6;
}
.pnav:has(.pnav__tab.active) .pnav__tab:not(.active):hover{
  opacity:1;
}

/* Smart sticky release — pnav stops being sticky near related-projects.
   Also strip the sticky visual (blur + shadow + border + bg) so the
   band melts back into page flow instead of hovering over content. */
.pnav{
  transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.pnav.pnav--released{
  position:relative !important;
  top:auto !important;
  box-shadow:none !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom-color:transparent !important;
}

/* ═════════════════════════════════════════════════════
  20. ALIGNMENT LOCK — FINAL AGGRESSIVE LAYER (round 4)

  Purpose: after round 3, Asaf still sees mixed alignment — the
  decorative line, pill, and inner bonus box still centered while
  H2 + lead flow right. Root cause: some block elements use
  `margin:0 auto` (block centering) which doesn't respond to
  text-align rules, and some inline styles have space variants
  like `text-align: center` that missed earlier selectors.

  Fix: aggressive attribute selectors catching BOTH spacing
  variants (with/without space after colon), plus explicit class
  overrides for .checklist-metrics. In HE → force right-start.
  In LTR → force left-start.
  ═════════════════════════════════════════════════════ */

/* HE: any inline text-align:center → right (both spacing variants) */
html[dir="rtl"] [style*="text-align:center"],
html[dir="rtl"] [style*="text-align: center"]{
  text-align:right !important;
}

/* HE: any block with inline margin:0 auto → pin right (both variants) */
html[dir="rtl"] [style*="margin:0 auto"],
html[dir="rtl"] [style*="margin: 0 auto"]{
  margin-left:auto !important;
  margin-right:0 !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}

/* HE: class-based blocks centered via CSS (not inline) — pin right */
html[dir="rtl"] .checklist-metrics{
  margin-left:auto !important;
  margin-right:0 !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}

/* HE: btn-row always flows from start edge (right) — no exceptions,
   overrides any inline justify-content:center that snuck in */
html[dir="rtl"] .btn-row{
  justify-content:flex-start !important;
}

/* HE: explicit right-align for exception-list elements from premium.css */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .project-pill,
html[dir="rtl"] .package-badge{
  text-align:right !important;
}

/* HE: BUT — buttons keep centered inner text (button typography) */
html[dir="rtl"] .btn,
html[dir="rtl"] button,
html[dir="rtl"] .say-more-btn,
html[dir="rtl"] .urgency-cta,
html[dir="rtl"] .ls-pill,
html[dir="rtl"] .acc-btn,
html[dir="rtl"] .cta-checklist,
html[dir="rtl"] .pnav__tab,
html[dir="rtl"] .project-tab,
html[dir="rtl"] .footer-social-pill,
html[dir="rtl"] .nav-toggle,
html[dir="rtl"] .slider-btn{
  text-align:center !important;
}

/* HE: visual containers with icons/chips/dots stay centered internally */
html[dir="rtl"] .testimonials-dots,
html[dir="rtl"] .testimonials-controls,
html[dir="rtl"] .checklist-metrics > div,
html[dir="rtl"] .checklist-metrics > div > strong,
html[dir="rtl"] .checklist-metrics > div > span,
html[dir="rtl"] .swatches-row,
html[dir="rtl"] .swatch-item,
html[dir="rtl"] .swatch-item > *{
  text-align:center !important;
}
html[dir="rtl"] .swatches-row,
html[dir="rtl"] .testimonials-controls{
  justify-content:center !important;
}

/* ─ LTR mirror (Stage 4 EN) ─ */
html[dir="ltr"] [style*="text-align:center"],
html[dir="ltr"] [style*="text-align: center"]{
  text-align:left !important;
}
html[dir="ltr"] [style*="margin:0 auto"],
html[dir="ltr"] [style*="margin: 0 auto"]{
  margin-left:0 !important;
  margin-right:auto !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}
html[dir="ltr"] .checklist-metrics{
  margin-left:0 !important;
  margin-right:auto !important;
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}
html[dir="ltr"] .btn-row{justify-content:flex-start !important}
html[dir="ltr"] .eyebrow,
html[dir="ltr"] .project-pill,
html[dir="ltr"] .package-badge{text-align:left !important}
html[dir="ltr"] .btn,
html[dir="ltr"] button,
html[dir="ltr"] .say-more-btn,
html[dir="ltr"] .urgency-cta,
html[dir="ltr"] .ls-pill,
html[dir="ltr"] .acc-btn,
html[dir="ltr"] .cta-checklist,
html[dir="ltr"] .pnav__tab,
html[dir="ltr"] .project-tab,
html[dir="ltr"] .footer-social-pill,
html[dir="ltr"] .nav-toggle,
html[dir="ltr"] .slider-btn{
  text-align:center !important;
}
html[dir="ltr"] .testimonials-dots,
html[dir="ltr"] .testimonials-controls,
html[dir="ltr"] .checklist-metrics > div,
html[dir="ltr"] .checklist-metrics > div > strong,
html[dir="ltr"] .checklist-metrics > div > span,
html[dir="ltr"] .swatches-row,
html[dir="ltr"] .swatch-item,
html[dir="ltr"] .swatch-item > *{
  text-align:center !important;
}
html[dir="ltr"] .swatches-row,
html[dir="ltr"] .testimonials-controls{
  justify-content:center !important;
}

/* Safety: no horizontal scroll */
html,body{max-width:100%;overflow-x:hidden}

/* Mobile CTAs: keep btn-row RIGHT on mobile too (no center fallback) */
@media(max-width:640px){
  html[dir="rtl"] .btn-row{justify-content:flex-start !important}
  html[dir="ltr"] .btn-row{justify-content:flex-start !important}
}

/* ═════════════════════════════════════════════════════
  21. CHECKLIST BONUS BOX — moved from inline HTML (round 4)
  Previously the white "בונוס" box was inline-styled. Now it's
  a proper class that inherits RTL natural flow, can still be a
  block-centered visual card (max-width + margin auto), and stays
  internally right-aligned.
  ═════════════════════════════════════════════════════ */
.checklist-bonus{
  background:#fff;
  border:1px solid rgba(201,169,110,.4);
  border-radius:24px;
  padding:clamp(32px,4.5vw,48px) clamp(28px,4vw,44px);
  margin:var(--space-xl,48px) 0;
  max-width:560px;
  text-align:right;
  direction:rtl;
  box-shadow:0 20px 60px rgba(12,63,81,.12),0 4px 12px rgba(12,63,81,.06);
  position:relative;
}
/* "בונוס" gold pill badge */
.checklist-bonus__badge{
  position:absolute;
  top:-12px;
  inset-inline-end:32px;    /* right in RTL, left in LTR */
  background:#c9a96e;
  color:#fff;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
}
.checklist-bonus__list{
  list-style:none;
  padding:0;
  margin:0;
}
.checklist-bonus__list li{
  padding:14px 0;
  color:var(--teal);
  font-size:16.5px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  border-bottom:1px solid rgba(12,63,81,.08);
  line-height:1.5;
}
.checklist-bonus__list li:last-child{border-bottom:none}
.checklist-bonus__check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(12,63,81,.08);
  color:var(--teal);
  font-weight:700;
  flex-shrink:0;
  font-size:13px;
  margin-top:1px;
}
/* Microcopy under the checklist CTA */
.checklist-microcopy{
  font-size:13px;
  color:#888;
  margin-top:22px;
  letter-spacing:.02em;
}

/* Checklist CTA lives inside .btn-row now (not standalone) — keep
   its existing .cta-checklist hover/focus behaviour from section 15. */


/* ═══════════════════════════════════════════════════════════
   STAGE 1.8 — Unified sticky header offsets
   Ensures pnav "sticks" directly under site-nav with no gap,
   no overlap. Accounts for presence/absence of urgency bar.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Fallback values; polish.js overrides with real DOM measurements */
  --sticky-urgency: 40px;
  --sticky-nav: 84px;
}

/* pnav base — CSS-sticky is the fallback; polish.js overrides via inline
   styles to position:fixed when needed (no !important so inline wins). */
.pnav{
  position: sticky;
  top: var(--sticky-nav);
  z-index: 51;
}

/* pnav when urgency bar is present — pushed down by its height */
body:has(.urgency-bar) .pnav{
  top: calc(var(--sticky-urgency) + var(--sticky-nav));
}

/* Scroll offsets so anchor clicks don't hide content under sticky headers */
.pnav ~ section[id],
section[id]{
  scroll-margin-top: calc(var(--sticky-urgency) + var(--sticky-nav) + 24px);
}
body:not(:has(.urgency-bar)) .pnav ~ section[id],
body:not(:has(.urgency-bar)) section[id]{
  scroll-margin-top: calc(var(--sticky-nav) + 24px);
}

/* Same for project-sticky-nav (the older class name) */
.project-sticky-nav{
  position: sticky !important;
  top: var(--sticky-nav) !important;
  z-index: 51 !important;
}
body:has(.urgency-bar) .project-sticky-nav{
  top: calc(var(--sticky-urgency) + var(--sticky-nav)) !important;
}

/* Mobile ≤980: site-nav stays ~92px (same padding + inner size) */
@media (max-width: 980px){
  :root{
    --sticky-nav: 84px;
  }
}

/* Mobile ≤640: urgency bar slightly smaller, nav stays 92px when stuck */
@media (max-width: 640px){
  :root{
    --sticky-urgency: 42px;
    --sticky-nav: 84px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Stage 1.9 — LTR overrides for hardcoded RTL rules
   ═══════════════════════════════════════════════════════════════════════
   Several components had `direction:rtl` hardcoded which broke them on
   EN pages (where document is LTR). These overrides fix the visual 
   inconsistency without breaking HE behavior.
   ═══════════════════════════════════════════════════════════════════════ */

html[dir="ltr"] .urgency-bar {
  direction: ltr;
}

html[dir="ltr"] .package-card .say-more-btn {
  direction: ltr;
}

html[dir="ltr"] .mobile-cta-strip {
  direction: ltr;
}

html[dir="ltr"] .checklist-bonus {
  direction: ltr;
  text-align: left;
}

/* Also ensure flex layouts in LTR urgency bar keep proper order */
html[dir="ltr"] .urgency-bar-content {
  direction: ltr;
}


/* ═══════════════════════════════════════════════════════════
   STAGE 2.4 — Visual fusion of site-nav + pnav on project pages
   ═══════════════════════════════════════════════════════════
   The nav and pnav sit pixel-perfect next to each other, but they
   LOOK disconnected because:
   - site-nav.stuck uses rgba(250,248,245,.82)
   - pnav uses rgba(250,248,245,.86)  ← different alpha
   - site-nav.stuck has a border-bottom → creates a visible seam
   - pnav has a border-bottom too → another seam below

   This section unifies them into one continuous surface when
   both are sticky on a project page.
   ═══════════════════════════════════════════════════════════ */

/* 1. Match the pnav background to site-nav.stuck exactly */
body.project-page .pnav{
  background: rgba(250,248,245,.82) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

/* 2. Remove the seam between stuck nav and pnav
      — kill nav's bottom border/shadow when pnav sits under it */
body.project-page .site-nav.stuck{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 3. (Stage 2.5) REMOVED margin-top:-1px — it caused header to cover pnav.
      pnav now sits exactly where JS measurements place it, no overlap. */

/* 4. Keep a single subtle bottom border on the pnav only
      — this becomes the bottom edge of the combined header unit */
body.project-page .pnav{
  border-bottom: 1px solid rgba(12,63,81,.07) !important;
  box-shadow: 0 8px 32px rgba(12,63,81,.06) !important;
}

/* 5. On non-project pages, pnav keeps its original look (no changes) */

/* ============================================================
   PACKAGE PRICING - Added April 2026
============================================================ */
.package-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 6px 0;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.package-price-num {
  font-family: 'Einstein', 'Heebo', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--teal, #0C3F51);
  letter-spacing: -0.02em;
  line-height: 1;
}
.package-card.featured .package-price-num {
  color: var(--gold, #C9A96E);
}
.package-price-from {
  font-size: 13px;
  color: var(--muted, #6a7c84);
  font-weight: 500;
}
.package-tag {
  font-size: 13.5px;
  color: var(--muted, #6a7c84);
  margin: 0 0 16px 0 !important;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.package-card.featured .package-tag {
  color: rgba(255, 255, 255, 0.75);
}


/* ============= HERO (homepage) ============= */
.hero-grid {
  min-height: 600px !important;
  align-items: stretch !important;
}

.hero-stage {
  min-height: 0 !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: 16px !important;
}

.hero-copy {
  height: 100% !important;
  align-self: stretch !important;
}

/* Main card - shows full image with neutral cream bg */
.hero-main-card {
  min-height: 0 !important;
  border-radius: 32px !important;
  background: #F5F2ED !important;
}

.hero-main-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* If image is already balanced, use cover.
   For Hero, the cover images are 4:3 - they fit naturally in any cover box.
   Padding ensures nothing critical is at the edge. */

/* Hide the dark gradient overlay - we want clean images */
.hero-main-card::after {
  background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(12,63,81,.65) 100%) !important;
}

/* Thumbs - 4:3 ratio, contain so nothing crops */
.thumb {
  aspect-ratio: 4/3 !important;
  border-radius: 16px !important;
  background: #F5F2ED !important;
}

.thumb img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============= PROJECT CARDS (homepage + project pages) ============= */
/* Project cards have aspect-ratio:0.8 (portrait-ish)
   Most cover images are landscape - we use cover here because text overlay needs full coverage
   But we adjust object-position to center for best framing */
.project-card {
  background: #F5F2ED !important;
}
.project-card img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============= DARKEN gradient on project cards (less aggressive) ============= */
.project-card::after {
  background: linear-gradient(180deg, rgba(10,20,30,0) 0%, rgba(10,20,30,.55) 70%, rgba(10,20,30,.85) 100%) !important;
}

/* ============= PROJECT PAGE - Hero (full-bleed) ============= */
.ph__bg img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============= PROJECT PAGE - Split image visuals ============= */
/* These are portrait-ish images in the about/logo sections */
.ps-split__visual {
  background: #F5F2ED !important;
}
.ps-img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============= PROJECT PAGE - Editorial photo (full bleed) ============= */
.ph-editorial {
  background: #F5F2ED !important;
}
.ph-editorial img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============= PROJECT PAGE - Gallery cards ============= */
.gc, .gallery-card {
  background: #F5F2ED !important;
}
.gc img, .gallery-card img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============= ABOUT photo (designer profile) ============= */
.about-photo {
  background: #F5F2ED !important;
}
.about-photo img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* ============= MOBILE responsive ============= */
@media (max-width: 980px) {
  .hero-grid {
    min-height: auto !important;
  }
  .hero-stage {
    height: auto !important;
  }
  .hero-main-card {
    aspect-ratio: 4/3 !important;
    min-height: 280px !important;
  }
}




/* ============================================================
   HERO - TEXT FOCUSED (Apr 27 2026 - v2)
   Centered, generous, fills the visual space without an image
============================================================ */

/* Hero section itself - reduce min-height since we don't need 100vh */
.hero {
  min-height: auto !important;
  padding: 0 !important;
}

/* Hero grid - single centered column, fills the space nicely */
.hero-grid--centered {
  grid-template-columns: 1fr !important;
  min-height: auto !important;
  padding: 140px 24px 100px !important;
  justify-items: center !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Hero copy - generous box, full width of grid */
.hero-grid--centered .hero-copy {
  max-width: 100% !important;
  width: 100% !important;
  text-align: right !important;
  padding: 64px 72px !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* LTR (English) version - text aligned left */
html[dir="ltr"] .hero-grid--centered .hero-copy {
  text-align: left !important;
}

/* Hero title - bigger and bolder since it's the focus */
.hero-grid--centered .hero-title {
  max-width: 100% !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  line-height: 1.05 !important;
}

/* Hero lead */
.hero-grid--centered .hero-lead {
  max-width: 720px !important;
  font-size: clamp(17px, 1.6vw, 20px) !important;
}

/* Tablet */
@media (max-width: 980px) {
  .hero-grid--centered {
    padding: 100px 20px 60px !important;
  }
  .hero-grid--centered .hero-copy {
    padding: 40px 32px !important;
  }
  .hero-grid--centered .hero-title {
    font-size: clamp(36px, 7vw, 56px) !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .hero-grid--centered {
    padding: 80px 16px 40px !important;
  }
  .hero-grid--centered .hero-copy {
    padding: 28px 22px !important;
  }
}


/* ============================================================
   PROJECTS GRID 4×2 — Apr 27 2026
   8 projects displayed in: Desktop 4col × 2row, Tablet 3col, Mobile 1col
============================================================ */

.projects-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* Tablet: 3 columns */
@media (max-width: 1180px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Small tablet: 2 columns */
@media (max-width: 980px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}







/* ====================================================================
   PHASE 2.1 — Hero H1 mobile overflow safety
   Prevents the hero headline from cropping on the narrowest viewports.
   Surgical addition only kicks in below 380px.
   ==================================================================== */
.hero-title {
  overflow-wrap: break-word;
}
@media (max-width: 380px) {
  .hero-title {
    font-size: clamp(28px, 9vw, 40px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.12 !important;
  }
}



/* cleanup save */
/* clean 



/* ====================================================================
   PHASE 4.1 — Projects subtle polish
   Smaller pills, refined meta gradients, tighter typography.
   Grid layout left untouched (4-col stays clean).
   ==================================================================== */
/* Quieter, smaller pills site-wide on cards (less CMS / template feel) */
.project-card .project-pill {
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  padding: 5px 10px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.92) !important;
  color: #0C3F51 !important;
  border: 1px solid rgba(12,63,81,0.08) !important;
  backdrop-filter: blur(4px);
}
/* Override the dark teal pills (clients) to keep visual unity */
.project-card .project-pill[style*="0C3F51"] {
  background: rgba(12, 63, 81, 0.92) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Smoother project meta read on darker images */
.project-card .project-meta {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%) !important;
}
.project-card h3 {
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}
.project-card .project-meta p {
  opacity: 0.86;
  font-size: 13px !important;
  line-height: 1.5 !important;
}


/* p41 fix */

/* dirty trigger */

/* simplify */

/* simplify save */
/* p41 

/* ====================================================================
   PHASE 4.2 — Project pages: hex code bidi fix
   Hex swatches show # on the wrong side in RTL. Force LTR rendering.
   ==================================================================== */
.swatch-hex,
.hex-code {
  direction: ltr !important;
  unicode-bidi: bidi-override;
  display: inline-block;
  font-feature-settings: "tnum" 1;
}
/* EN project pages: remove duplicate kicker (we use ph__sub instead) */
html[dir="ltr"] .ph__kicker {
  display: none !important;
}

/* p42 */


/* ====================================================================
   PHASE 6.1 — Typography polish + label cleanup (Art Direction)
   Reduces 10 eyebrows to 3 editorial ones: Hero, About, Contact.
   Removes template feel without restructuring DOM.
   ==================================================================== */
#projects .projects-head .eyebrow,
#packages > .container > .reveal > .eyebrow,
#faq > .container > .reveal > .eyebrow,
#checklist-cta .eyebrow,
.section.section-gray:not(#projects):not(#faq) > .container > .reveal > .eyebrow,
.section.section-cream:not(.grain) > .container > .reveal > .eyebrow {
  display: none !important;
}
#projects .projects-head h2,
#packages > .container > .reveal > h2,
#faq > .container > .reveal > h2,
#checklist-cta h2,
.section.section-gray:not(#projects):not(#faq) > .container > .reveal > h2,
.section.section-cream:not(.grain) > .container > .reveal > h2 {
  margin-top: 0 !important;
}
.process-number {
  font-size: 84px !important;
  opacity: 0.05 !important;
  letter-spacing: -0.04em !important;
}
.section .lead {
  line-height: 1.72 !important;
}


/* ====================================================================
   PHASE 6.3 — Pain section: editorial marks instead of SaaS X/check
   Drops red X circles and gold check pills. Replaces with subtle
   em-dash and underline-only rows. Quiet luxury, not sales deck.
   ==================================================================== */
.pain-list { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; }
.pain-list li { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(12, 63, 81, 0.06) !important; padding-block: 14px !important; padding-inline: 0 !important; border-radius: 0 !important; }
.pain-list li:last-child { border-bottom: none !important; }
.pain-list .mark.bad { background: transparent !important; border: none !important; color: rgba(12, 63, 81, 0.4) !important; width: auto !important; height: auto !important; box-shadow: none !important; }
.pain-list .mark.bad svg { display: none !important; }
.pain-list .mark.bad::before { content: "—"; display: inline-block; font-size: 16px; font-weight: 400; letter-spacing: -0.05em; }

/* Positive grid (וכאן כבר רואים את ההבדל) — flatten gold pills */
.section.section-white div[style*="background:rgba(201,169,110,.08)"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.22) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
}
.section.section-white div[style*="background:rgba(201,169,110,.08)"] > span[style*="background:#C9A96E"] {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  color: rgba(201, 169, 110, 0.72) !important;
}
.section.section-white div[style*="background:rgba(201,169,110,.08)"] > span[style*="background:#C9A96E"] svg { display: none !important; }
.section.section-white div[style*="background:rgba(201,169,110,.08)"] > span[style*="background:#C9A96E"]::before {
  content: "—";
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.05em;
}


/* ====================================================================
   PHASE 6.5 — Checklist CTA: flatten bonus card
   Drops heavy box around the bonus checklist. Keeps clarity, removes
   template feel.
   ==================================================================== */
.checklist-bonus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  padding-top: 28px !important;
  margin-top: 28px !important;
}
.checklist-bonus__badge { display: none !important; }
.checklist-bonus__list { padding: 0 !important; }
.checklist-bonus__list li,
.checklist-bonus__list > * {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
}
.checklist-bonus__check {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  color: rgba(201, 169, 110, 0.85) !important;
}
.checklist-bonus__check svg { display: none !important; }
.checklist-bonus__check::before {
  content: "—";
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: rgba(201, 169, 110, 0.85);
}

/* ====================================================================
   v8 — Project sub-nav uses the canonical pill style from project.css.
   The earlier "PHASE 6.6 underline" rule wiped border-radius and forced
   a square active tab. Removed in v8. Pill rules live in project.css
   (.pnav__tab, .pnav__tab.active) and polish.css :2564 / :3310.
   ==================================================================== */




/* ════════════════════════════════════════════════════════════════════
   v5 — CLEAN MARQUEE + FLOATING ACTION BUTTONS — May 2026
   This single block is the ONLY place .logos-marquee, .logo-cell, and
   .float-* (whatsapp / instagram / phone / accessibility) are styled.
   All earlier definitions in polish.css / premium.css / styles.css have
   been stripped or overridden here.
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   MARQUEE — pure CSS, fixed-size cells, mask edges
   ────────────────────────────────────────────── */

.logos-strip{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#F4E8D4 0%,#ECDDC2 100%);
  border-top:1px solid rgba(201,169,110,.22);
  border-bottom:1px solid rgba(201,169,110,.22);
  padding:14px 0 8px;
}
.logos-strip__label{
  text-align:center;
  padding:34px 20px 22px;
  font-family:'Einstein','Heebo',sans-serif;
  font-size:14.5px !important;        /* up from 11 — Asaf wanted bolder */
  font-weight:600 !important;
  letter-spacing:.04em !important;    /* less aggressive cap-spacing */
  text-transform:none !important;     /* keep sentence case, more human */
  color:rgba(12,63,81,.78);
  margin:0;
  line-height:1.4;
}
@media (max-width: 640px){
  .logos-strip__label{
    padding:22px 18px 16px;
    font-size:13px !important;
  }
}
.logos-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
  direction:ltr;
}
.logos-marquee{
  display:flex;
  /* v13: spacing moved to .logo-cell margin-inline-end (uniform on every cell,
     incl. the last) so the 4 identical copies are pixel-equal in width and the
     loop reset lands exactly on a copy boundary. gap:0 also overrides the legacy
     styles.css `.logos-marquee{gap:72px}` which would otherwise re-add a flex gap. */
  gap:0;
  width:max-content;
  align-items:center;
  padding:18px 0 34px;
  /* v13: was 45s for translateX(-50%). Now translateX(-25%) (advance exactly one
     of four copies) → half the distance, so duration is halved to 22.5s to keep
     the same scroll speed (~same px/s as before). */
  animation:logosMarquee 22.5s linear infinite;
  animation-play-state:running;
  will-change:transform;
  direction:ltr;
}
.logos-marquee:hover{
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .logos-marquee{ animation: none; }
}
@keyframes logosMarquee{
  /* v13: advance by exactly ONE of the four identical copies (25%), then reset to 0.
     Copy 2 begins precisely where copy 1 began → the reset frame is pixel-identical,
     so the loop is seamless and at least 3 copies always cover the viewport (no gap). */
  from{ transform: translateX(0); }
  to{   transform: translateX(-25%); }
}
/* RTL parent should not flip the marquee — the cells are LTR strip */
html[dir="rtl"] .logos-wrap,
html[dir="rtl"] .logos-marquee{
  direction:ltr;
}

/* Each logo cell — fixed size, content centred, uniform height.
   Bigger than v5.0 per Asaf's feedback (more prominent). */
.logos-marquee .logo-cell{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:240px;
  height:100px;
  /* v13: uniform trailing space on EVERY cell (replaces flex gap) so all 4 copies
     are exactly equal width and translateX(-25%) aligns to a copy boundary.
     margin-inline-end in the forced-ltr strip = right margin in both HE and EN. */
  margin-inline-end:64px;
  text-decoration:none;
  cursor:default;
}
.logos-marquee a.logo-cell{
  cursor:pointer;
}
.logos-marquee .logo-cell img{
  display:block;
  width:240px;
  height:100px;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  /* v10: opacity 0.92 → 0.95 — Asaf flagged logos as too faded */
  opacity:.95;
  filter:contrast(1.05);
  transition:opacity .28s ease, transform .28s ease;
}
.logos-marquee a.logo-cell:hover img{
  opacity:1;
  transform:translateY(-2px);
}

/* Large desktop ≤ 1280px — v13: gap → per-cell margin-inline-end (keeps copies equal) */
@media (max-width: 1280px){
  .logos-marquee .logo-cell{ width:220px; height:92px; margin-inline-end:56px; }
  .logos-marquee .logo-cell img{ width:220px; height:92px; }
}
/* Tablet — v13: duration halved (32s → 16s) to keep speed with translateX(-25%) */
@media (max-width: 992px){
  .logos-marquee{ padding:14px 0 28px; animation-duration:16s; }
  .logos-marquee .logo-cell{ width:190px; height:80px; margin-inline-end:44px; }
  .logos-marquee .logo-cell img{ width:190px; height:80px; }
}
/* Phone — v13: duration halved (28s → 14s) */
@media (max-width: 640px){
  .logos-marquee{ padding:12px 0 24px; animation-duration:14s; }
  .logos-marquee .logo-cell{ width:160px; height:68px; margin-inline-end:32px; }
  .logos-marquee .logo-cell img{ width:160px; height:68px; }
}
/* Small phone — v13: gap → per-cell margin-inline-end */
@media (max-width: 380px){
  .logos-marquee .logo-cell{ width:140px; height:60px; margin-inline-end:24px; }
  .logos-marquee .logo-cell img{ width:140px; height:60px; }
}

/* ──────────────────────────────────────────────
   FLOATING ACTION BUTTONS — uniform 4-button stack
   - 56×56 desktop, 48×48 mobile
   - same circular shape, same shadow
   - RTL: right side · LTR: left side
   - Each button has a unique fill colour
   ────────────────────────────────────────────── */

:root{
  --fab-size: 56px;
  --fab-size-mobile: 48px;
  --fab-gap: 12px;
  --fab-edge: 24px;
  --fab-edge-mobile: 16px;
  --fab-shadow: 0 10px 30px rgba(12,63,81,.18), 0 2px 8px rgba(12,63,81,.10);
  --fab-shadow-hover: 0 14px 40px rgba(12,63,81,.26), 0 3px 10px rgba(12,63,81,.14);
}

/* Common base — applies to all four buttons */
.float-whatsapp,
.float-instagram,
.float-phone,
.float-accessibility{
  position:fixed !important;
  width:var(--fab-size) !important;
  height:var(--fab-size) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  text-decoration:none !important;
  box-shadow:var(--fab-shadow) !important;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),
             box-shadow .28s ease,
             background-color .22s ease,
             color .22s ease !important;
  outline:none;
  /* Hide text content if any (some buttons are emoji-only fallbacks) */
  font-size:0 !important;
  /* Default to RIGHT side (Hebrew RTL) */
  right:var(--fab-edge) !important;
  left:auto !important;
  /* iOS: respect home-indicator safe area */
  bottom:var(--fab-edge);
  z-index:60;
}
.float-whatsapp svg,
.float-instagram svg,
.float-phone svg,
.float-accessibility svg{
  width:24px !important;
  height:24px !important;
  display:block;
  pointer-events:none;
}

/* Per-button colour treatments — v7 unified.
   All four FABs share the same white-with-teal-icon-and-hairline treatment.
   Only WhatsApp keeps its green for recognisability. */
.float-whatsapp{
  background:#25D366 !important;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
}
.float-whatsapp svg{ fill:#fff !important; stroke:none !important; }

.float-instagram{
  background:#FFFFFF !important;
  color:#0C3F51 !important;
  border:1px solid rgba(12,63,81,.10) !important;
}
.float-instagram svg{ stroke:#0C3F51 !important; fill:none !important; }

.float-phone{
  background:#FFFFFF !important;
  color:#0C3F51 !important;
  border:1px solid rgba(12,63,81,.10) !important;
}
.float-phone svg{ stroke:#0C3F51 !important; }

.float-accessibility{
  background:#FFFFFF !important;
  color:#0C3F51 !important;
  border:1px solid rgba(12,63,81,.10) !important;
}
.float-accessibility svg{ stroke:#0C3F51 !important; }
.float-accessibility svg circle[fill="currentColor"]{ fill:#0C3F51 !important; }

/* RTL stack (default): WhatsApp at bottom, then Instagram, Phone, Accessibility */
.float-whatsapp{        bottom: calc(var(--fab-edge) + 0   * (var(--fab-size) + var(--fab-gap)) + env(safe-area-inset-bottom, 0px)) !important; }
.float-instagram{       bottom: calc(var(--fab-edge) + 1   * (var(--fab-size) + var(--fab-gap)) + env(safe-area-inset-bottom, 0px)) !important; }
.float-phone{           bottom: calc(var(--fab-edge) + 2   * (var(--fab-size) + var(--fab-gap)) + env(safe-area-inset-bottom, 0px)) !important; }
.float-accessibility{   bottom: calc(var(--fab-edge) + 3   * (var(--fab-size) + var(--fab-gap)) + env(safe-area-inset-bottom, 0px)) !important; }

/* LTR mirror — buttons stack on the LEFT */
html[dir="ltr"] .float-whatsapp,
html[dir="ltr"] .float-instagram,
html[dir="ltr"] .float-phone,
html[dir="ltr"] .float-accessibility{
  left:var(--fab-edge) !important;
  right:auto !important;
}

/* Hover lifts equally for all four */
.float-whatsapp:hover,
.float-instagram:hover,
.float-phone:hover,
.float-accessibility:hover,
.float-whatsapp:focus-visible,
.float-instagram:focus-visible,
.float-phone:focus-visible,
.float-accessibility:focus-visible{
  transform:translateY(-3px) scale(1.05) !important;
  box-shadow:var(--fab-shadow-hover) !important;
}
.float-phone:hover, .float-accessibility:hover,
.float-phone:focus-visible, .float-accessibility:focus-visible{
  background:#0C3F51 !important;
  color:#fff !important;
}
.float-phone:hover svg, .float-accessibility:hover svg,
.float-phone:focus-visible svg, .float-accessibility:focus-visible svg{
  stroke:#fff !important;
}

/* Hide stack while mobile menu or overlay popups are visible */
body.menu-open .float-whatsapp,
body.menu-open .float-instagram,
body.menu-open .float-phone,
body.menu-open .float-accessibility,
body:has(.say-overlay.visible) .float-whatsapp,
body:has(.say-overlay.visible) .float-instagram,
body:has(.say-overlay.visible) .float-phone,
body:has(.say-overlay.visible) .float-accessibility{
  opacity:0 !important;
  pointer-events:none !important;
  transform:scale(.85) !important;
}

/* Tablet (≤ 980px) */
@media (max-width: 980px){
  :root{
    --fab-size: 52px;
    --fab-gap: 11px;
    --fab-edge: 20px;
  }
  .float-whatsapp svg,
  .float-instagram svg,
  .float-phone svg,
  .float-accessibility svg{
    width:22px !important;
    height:22px !important;
  }
}

/* Phone (≤ 640px) */
@media (max-width: 640px){
  :root{
    --fab-size: var(--fab-size-mobile);
    --fab-gap: 10px;
    --fab-edge: var(--fab-edge-mobile);
  }
  .float-whatsapp svg,
  .float-instagram svg,
  .float-phone svg,
  .float-accessibility svg{
    width:20px !important;
    height:20px !important;
  }
}

/* Accessibility panel — hidden by default, opened via .open class.
   Sits ABOVE the topmost FAB so it doesn't cover the buttons. */
.accessibility-panel{
  position:fixed !important;
  display:none !important;
  z-index:61 !important;
  width:min(320px, calc(100vw - 32px));
  background:#fff;
  border:1px solid rgba(12,63,81,.10);
  border-radius:24px;
  box-shadow:var(--fab-shadow-hover);
  padding:20px;
  right:var(--fab-edge) !important;
  left:auto !important;
  bottom: calc(var(--fab-edge) + 4 * (var(--fab-size) + var(--fab-gap)) + env(safe-area-inset-bottom, 0px)) !important;
}
.accessibility-panel.open{ display:block !important; }
html[dir="ltr"] .accessibility-panel{
  left:var(--fab-edge) !important;
  right:auto !important;
}

/* Reduced motion — turn off transforms */
@media (prefers-reduced-motion: reduce){
  .float-whatsapp,
  .float-instagram,
  .float-phone,
  .float-accessibility{
    transition: background-color .22s ease, color .22s ease !important;
  }
  .float-whatsapp:hover,
  .float-instagram:hover,
  .float-phone:hover,
  .float-accessibility:hover{
    transform:none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   v5 — TYPOGRAPHY: Einstein only (Asaf's font, woff/woff2)
   No Heebo, no Google Fonts, no system-font fallbacks visible to the
   user.  The legacy stylesheets reference 'Einstein' and 'Heebo' —
   we alias 'Heebo' to the same Einstein files so every old declaration
   resolves to Einstein without per-rule edits.
   ════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Einstein';
  src:url('fonts/Einstein-Regular.woff2') format('woff2'),
      url('fonts/Einstein-Regular.woff')  format('woff');
  font-weight:100 500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Einstein';
  src:url('fonts/Einstein-Medium.woff2') format('woff2'),
      url('fonts/Einstein-Medium.woff')  format('woff');
  font-weight:600 900;
  font-style:normal;
  font-display:swap;
}
/* Alias 'Heebo' → Einstein so every legacy 'Heebo' fallback in the older
   CSS resolves to Asaf's Einstein, not the Google font. */
@font-face{
  font-family:'Heebo';
  src:url('fonts/Einstein-Regular.woff2') format('woff2'),
      url('fonts/Einstein-Regular.woff')  format('woff');
  font-weight:100 500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Heebo';
  src:url('fonts/Einstein-Medium.woff2') format('woff2'),
      url('fonts/Einstein-Medium.woff')  format('woff');
  font-weight:600 900;
  font-style:normal;
  font-display:swap;
}

html, body{
  font-family:'Einstein','Heebo',sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Hard-override every element so no stray inline / framework font wins. */
*, *::before, *::after{
  font-family:inherit;
}


/* ════════════════════════════════════════════════════════════════════
   v5 — HERO GALLERY (4-tile mosaic on desktop, stacked on mobile)
   Sits in the right column on HE (RTL) and left column on EN (LTR).
   The images come from existing brand covers in /assets/images/brands/.
   ════════════════════════════════════════════════════════════════════ */

.hero.hero--with-gallery{
  padding-top:84px !important;
  padding-bottom:64px !important;
  min-height:auto !important;
  background:linear-gradient(180deg,#F5EFE5 0%, #ECE2D0 60%, #E2D5BC 100%) !important;
  position:relative;
  overflow:hidden;
}
.hero.hero--with-gallery::before{
  content:'';
  position:absolute;
  inset:auto -10% -20% -10%;
  height:340px;
  background:radial-gradient(ellipse at center, rgba(189,211,226,.35), transparent 70%);
  filter:blur(40px);
  z-index:0;
}
.hero.hero--with-gallery .hero-grid{
  position:relative;
  z-index:2;
  display:grid !important;
  grid-template-columns:1.05fr 1fr !important;
  gap:48px !important;
  align-items:center !important;
  width:min(1380px,calc(100% - 48px)) !important;
  margin-inline:auto !important;
  padding:32px 0 !important;
}
.hero.hero--with-gallery .hero-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
  max-width:none !important;
}
.hero.hero--with-gallery .hero-copy .eyebrow{
  margin-bottom:20px !important;
  display:inline-flex !important;
}
.hero.hero--with-gallery .hero-title{
  font-size:clamp(40px,5.6vw,76px) !important;
  line-height:1.02 !important;
  letter-spacing:-0.025em !important;
  margin:0 0 22px !important;
  color:var(--teal) !important;
  max-width:none !important;
}
.hero.hero--with-gallery .hero-lead{
  font-size:clamp(15.5px,1.5vw,17.5px) !important;
  line-height:1.85 !important;
  color:rgba(23,23,23,.72) !important;
  max-width:560px !important;
  margin:0 0 22px !important;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:rgba(201,169,110,.14);
  border:1px solid rgba(201,169,110,.42);
  border-radius:999px;
  margin:0 0 28px;
  font-size:12.5px;
  color:var(--teal);
  font-weight:500;
  letter-spacing:.01em;
  align-self:flex-start;
}
.hero-pill svg{flex-shrink:0}

.hero-cta-row{
  gap:14px !important;
  margin:0 0 14px !important;
  flex-wrap:wrap;
}
.hero.hero--with-gallery .btn-primary{
  background:var(--teal) !important;
  color:#fff !important;
  box-shadow:0 14px 36px rgba(12,63,81,.22) !important;
}
.hero-cta-note{
  font-size:12.5px;
  color:var(--muted);
  margin:0 0 32px;
  letter-spacing:.02em;
  opacity:.85;
}
.hero.hero--with-gallery .hero-stats{
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  padding-top:22px;
  border-top:1px solid rgba(12,63,81,.12);
}
.hero.hero--with-gallery .hero-stats > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hero.hero--with-gallery .hero-stats strong{
  font-size:26px;
  font-weight:700;
  color:var(--teal);
  line-height:1;
}
.hero.hero--with-gallery .hero-stats span{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
  max-width:160px;
}

/* The 4-tile mosaic gallery */
.hero-gallery{
  position:relative;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:14px;
  width:100%;
  height:560px;
  max-height:80vh;
}
.hero-tile{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:24px;
  background:#0c3f51;
  text-decoration:none;
  box-shadow:0 18px 48px rgba(12,63,81,.16),
             0 4px 14px rgba(12,63,81,.08);
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             box-shadow .42s ease;
  isolation:isolate;
}
.hero-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.hero-tile::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(12,63,81,0) 0%,
    rgba(12,63,81,0) 45%,
    rgba(12,63,81,.78) 100%);
  z-index:1;
}
.hero-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(12,63,81,.22),
             0 6px 18px rgba(12,63,81,.10);
}
.hero-tile:hover img{
  transform:scale(1.06);
}
.hero-tile__name{
  position:absolute;
  z-index:2;
  inset-inline-start:18px;
  bottom:18px;
  font-family:'Einstein',sans-serif;
  font-size:clamp(16px,1.6vw,22px);
  font-weight:600;
  color:#fff;
  letter-spacing:-0.01em;
  line-height:1.1;
}
.hero-tile__type{
  position:absolute;
  z-index:2;
  inset-inline-start:18px;
  bottom:42px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero-tile--feature{
  grid-column:1;
  grid-row:1 / span 3;
}
.hero-tile--a{ grid-column:2; grid-row:1; }
.hero-tile--b{ grid-column:2; grid-row:2; }
.hero-tile--c{ grid-column:2; grid-row:3; }

/* Tablet */
@media (max-width: 1080px){
  .hero.hero--with-gallery .hero-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  .hero.hero--with-gallery .hero-title{
    font-size:clamp(36px,7vw,58px) !important;
  }
  .hero-gallery{
    height:380px;
  }
}
/* Phone */
@media (max-width: 640px){
  .hero.hero--with-gallery{
    padding-top:64px !important;
    padding-bottom:48px !important;
  }
  .hero.hero--with-gallery .hero-grid{
    gap:28px !important;
    padding:18px 0 !important;
  }
  .hero-gallery{
    height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:200px 140px 140px;
    gap:10px;
  }
  .hero-tile--feature{
    grid-column:1 / span 2;
    grid-row:1;
  }
  .hero-tile--a{ grid-column:1; grid-row:2; }
  .hero-tile--b{ grid-column:2; grid-row:2; }
  .hero-tile--c{ grid-column:1 / span 2; grid-row:3; }
  .hero-tile{ border-radius:18px; }
  .hero.hero--with-gallery .hero-stats{
    gap:20px;
  }
  .hero.hero--with-gallery .hero-stats span{ max-width:none; }
}

/* ════════════════════════════════════════════════════════════════════
   v5 — PAIN section: premium-feel rebuild
   Replaces the X-bullet list + cream quote-card with a refined
   layout that uses our brand language: teal accents on a soft cream
   panel, big quote, calm bullets.
   ════════════════════════════════════════════════════════════════════ */

.pain-card{
  border-radius:28px !important;
  padding:42px 38px !important;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF9F4 100%) !important;
  border:1px solid rgba(12,63,81,.08) !important;
  box-shadow:0 18px 48px rgba(12,63,81,.06), 0 2px 6px rgba(12,63,81,.04) !important;
}
.pain-list{
  list-style:none !important;
  display:grid !important;
  gap:0 !important;
  margin:0 !important;
}
.pain-list li{
  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;
  padding:18px 0 !important;
  border-bottom:1px solid rgba(12,63,81,.08) !important;
  font-size:15.5px !important;
  line-height:1.55 !important;
  color:rgba(23,23,23,.82) !important;
}
.pain-list li:last-child{
  border-bottom:0 !important;
  padding-bottom:0 !important;
}
.pain-list li:first-child{ padding-top:0 !important; }
.pain-list .mark.bad{
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  background:rgba(12,63,81,.08) !important;
  color:var(--teal) !important;
  display:inline-grid !important;
  place-items:center !important;
  flex-shrink:0 !important;
  margin-top:2px !important;
}
.pain-list .mark.bad svg{
  width:11px !important;
  height:11px !important;
  stroke:var(--teal) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v5 — Project page cover image crops
   Cards now use aspect-ratio so the cover is never forcibly stretched.
   Object-position centred so the focal point stays in frame.
   ════════════════════════════════════════════════════════════════════ */
.project-cover, .project-card, .gallery-card, .project-cover-tile{
  border-radius:24px !important;
  overflow:hidden !important;
}
.project-cover{
  min-height:auto !important;
  aspect-ratio: 1.4 / 1 !important;
}
.project-cover img,
.project-card img,
.gallery-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
@media (max-width: 980px){
  .project-cover{ aspect-ratio: 1.25 / 1 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v5 — Project page sticky-nav: glue main nav and inner pnav together
   ════════════════════════════════════════════════════════════════════ */
body.project-page .pnav{
  background:rgba(250,248,245,.92) !important;
  backdrop-filter:blur(28px) !important;
  -webkit-backdrop-filter:blur(28px) !important;
  border-top:0 !important;
  margin-top:0 !important;
  box-shadow:0 1px 0 rgba(12,63,81,.06), 0 8px 28px rgba(12,63,81,.06) !important;
}
body.project-page .site-nav.stuck{
  border-bottom:0 !important;
  box-shadow:none !important;
}
body.project-page .site-nav.stuck + .pnav,
body.project-page .pnav.stuck{
  border-top:1px solid rgba(12,63,81,.06) !important;
}
/* Active inner-tab — make sure the LABEL renders AND the pill shape holds */
.pnav__tab,
.project-tab{
  border-radius:999px !important;
}
.pnav__tab.active,
.project-tab.active{
  background:var(--teal) !important;
  color:#fff !important;
  border-color:var(--teal) !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-indent:0 !important;
  text-transform:none !important;
}
.pnav__tab.active *,
.project-tab.active *{
  color:#fff !important;
  font-size:inherit !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   v5 — Footer social icons: standardised pill, calmer
   ════════════════════════════════════════════════════════════════════ */
.footer-social-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.78) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease !important;
}
.footer-social-pill:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.footer-social-pill svg{
  width:14px !important;
  height:14px !important;
  stroke-width:1.6 !important;
  flex-shrink:0;
}

/* ════════════════════════════════════════════════════════════════════
   v5 — Rounded-corner consistency for all major cards/panels
   24px is the canonical value across the site.
   ════════════════════════════════════════════════════════════════════ */
.about-panel,
.about-photo,
.contact-panel,
.testimonial,
.process-card,
.project-panel,
.legal-card,
.package-card,
.checklist-bonus,
.hero-main-card,
.faq-shell{
  border-radius:24px !important;
}
.about-panel, .about-photo{
  border-radius:28px !important;
  overflow:hidden;
}

/* ════════════════════════════════════════════════════════════════════
   v5 — Bonus-products copy block: visual hierarchy
   ════════════════════════════════════════════════════════════════════ */
section .reveal[style*="background:rgba(255,255,255,.04)"]{
  border-radius:18px !important;
  padding:26px 30px !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v5 — FAQ section: confident scale + same panel language
   ════════════════════════════════════════════════════════════════════ */
.faq-list{
  border-top:1px solid rgba(12,63,81,.10) !important;
  margin-top:36px !important;
}
.faq-item{
  border-bottom:1px solid rgba(12,63,81,.10) !important;
}
.faq-question{
  font-size:17px !important;
  font-weight:600 !important;
  padding:24px 4px !important;
  letter-spacing:-0.005em !important;
}
.faq-answer-inner{
  font-size:15.5px !important;
  line-height:1.85 !important;
  padding:0 4px 26px !important;
  color:rgba(23,23,23,.74) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v5 — Direction-aware text alignment
   Inline `text-align:right` on chip cards in the pain section was
   correct in HE but wouldn't flip in EN.  Override the inline rule
   with a logical `text-align:start` so it just works in both.
   ════════════════════════════════════════════════════════════════════ */
[style*="text-align:right"], [style*="text-align: right"]{
  text-align:start !important;
}
[style*="text-align:left"], [style*="text-align: left"]{
  text-align:start !important;
}
/* Centred text stays centred — only one-side overrides flipped. */
[style*="text-align:center"], [style*="text-align: center"]{
  text-align:center !important;
}

/* ════════════════════════════════════════════════════════════════════
   v6 — PAIN section: editorial Before/After card
   Replaces the 2-col Figma-template look with a single hairline-bordered
   comparison panel. Quiet luxury: line-art icons, generous whitespace,
   one subtle inner divider. Mobile: stacks vertically.
   ════════════════════════════════════════════════════════════════════ */
.pain-compare{
  margin-top:40px;
  background:#fff;
  border:1px solid rgba(12,63,81,.08);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(12,63,81,.02), 0 24px 60px -28px rgba(12,63,81,.18);
}
.pain-compare__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
}
.pain-compare__grid::before{
  content:"";
  position:absolute;
  inset-block:48px;
  inset-inline-start:50%;
  width:1px;
  background:rgba(12,63,81,.08);
  pointer-events:none;
}
.pain-compare__col{
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.pain-compare__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(12,63,81,.06);
}
.pain-compare__head .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(12,63,81,.32);
  flex-shrink:0;
}
.pain-compare__col--after .pain-compare__head .dot{
  background:#C9A96E;
  box-shadow:0 0 0 4px rgba(201,169,110,.18);
}
.pain-compare__label{
  font-family:'Einstein','Heebo',sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(12,63,81,.55);
}
.pain-compare__col--after .pain-compare__label{
  color:#0C3F51;
}
.pain-compare__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.pain-compare__list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:15.5px;
  line-height:1.55;
  color:rgba(22,22,22,.78);
}
.pain-compare__col--after .pain-compare__list li{
  color:rgba(12,63,81,.92);
  font-weight:500;
}
.pain-compare__icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(12,63,81,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
  color:rgba(12,63,81,.45);
}
.pain-compare__col--after .pain-compare__icon{
  background:rgba(201,169,110,.14);
  color:#A88656;
}
.pain-compare__icon svg{
  width:13px;
  height:13px;
  display:block;
}
.pain-statement{
  margin:48px auto 0;
  max-width:720px;
  text-align:center;
}
.pain-statement__quote{
  font-family:'Einstein','Heebo',sans-serif;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.34;
  letter-spacing:-.02em;
  color:var(--teal);
  margin:0 0 12px;
}
.pain-statement__sub{
  font-size:14.5px;
  line-height:1.8;
  color:rgba(22,22,22,.55);
  max-width:520px;
  margin:0 auto;
}
@media (max-width: 820px){
  .pain-compare__grid{ grid-template-columns:1fr; }
  .pain-compare__grid::before{
    inset-block:auto;
    inset-inline:48px;
    inset-block-start:50%;
    width:auto;
    height:1px;
  }
  .pain-compare__col{ padding:36px 28px; gap:18px; }
  .pain-statement{ margin-top:36px; padding-inline:8px; }
}

/* ════════════════════════════════════════════════════════════════════
   v6 — HERO gallery refinement (asymmetric mosaic)
   The previous gallery was 4 equal tiles. Refined to a 2-col mosaic
   with one feature tile (taller). Cleaner shadows, hairline borders,
   subtle hover lift. Calmer rhythm at every viewport.
   ════════════════════════════════════════════════════════════════════ */
/* Refines the existing v5 hero gallery (lines 2345+):
   softer shadows, slower hover ease, logical inset properties, and
   a calmer feature-tile name size. Layout (1 feature × 3 small)
   stays intact — that's the right composition. */
.hero--with-gallery .hero-grid{
  align-items:stretch;
  gap:44px;
}
.hero-tile{
  background:#E8DFD2 !important;
  box-shadow:0 1px 0 rgba(12,63,81,.04),
             0 22px 50px -24px rgba(12,63,81,.28) !important;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease !important;
}
.hero-tile::after{
  background:linear-gradient(180deg,
    rgba(12,63,81,0) 0%,
    rgba(12,63,81,0) 50%,
    rgba(12,63,81,.6) 100%) !important;
}
.hero-tile:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 1px 0 rgba(12,63,81,.04),
             0 28px 64px -22px rgba(12,63,81,.34) !important;
}
.hero-tile:hover img{ transform:scale(1.035) !important; }
.hero-tile__name{ inset-inline-start:20px !important; }
.hero-tile__type{ inset-inline-start:20px !important; }
.hero-tile--feature .hero-tile__name{
  font-size:clamp(20px,2.2vw,28px) !important;
}
@media (max-width: 1080px){
  .hero-gallery{ min-height:auto; height:380px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Bonus-products copy block (under packages)
   Was: wall of text on a flat cream rectangle.
   Now: headline + 2 bullets + single CTA. Quieter, scannable.
   ════════════════════════════════════════════════════════════════════ */
.bonus-block{
  margin:44px auto 0;
  max-width:880px;
  padding:30px 36px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 28px;
  align-items:start;
}
.bonus-block__title{
  font-family:'Einstein','Heebo',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  margin:0;
  align-self:center;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
}
.bonus-block__title::before{
  content:"";
  width:18px;
  height:1px;
  background:rgba(201,169,110,.7);
  display:inline-block;
}
.bonus-block__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bonus-block__list li{
  font-size:14.5px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  position:relative;
  padding-inline-start:18px;
}
.bonus-block__list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.7em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(201,169,110,.8);
}
.bonus-block__list li strong{
  color:#fff;
  font-weight:600;
}
.bonus-block__cta{
  grid-column:1 / -1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  align-self:start;
  justify-self:start;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.02em;
  transition:background .24s ease, border-color .24s ease, transform .24s ease;
}
.bonus-block__cta:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.32);
  transform:translateY(-1px);
}
@media (max-width: 720px){
  .bonus-block{ grid-template-columns:1fr; padding:24px 22px; gap:14px; }
  .bonus-block__title{ white-space:normal; }
  .bonus-block__title::before{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Footer social: standardised line-icon pills, 36×36
   Replaces mixed inline SVGs (varied stroke widths, half labels)
   with a unified iconography system. Aria-label only, no text.
   ════════════════════════════════════════════════════════════════════ */
.site-footer__social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.site-footer__social a.footer-social-pill{
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.72) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0 !important;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  text-decoration:none;
}
.site-footer__social a.footer-social-pill:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.site-footer__social a.footer-social-pill svg{
  width:16px !important;
  height:16px !important;
  stroke-width:1.6 !important;
  display:block;
}

/* ════════════════════════════════════════════════════════════════════
   v6 — say-popups (full-details package modal) styling alignment
   Match the rest of the site: Einstein typography, var(--teal) anchor,
   24px panel radius, soft shadow matching .about-panel.
   ════════════════════════════════════════════════════════════════════ */
.say-popup,
.say-popup *{ box-sizing:border-box; }
.say-popup{
  border-radius:24px !important;
  box-shadow:0 32px 80px -28px rgba(12,63,81,.45), 0 1px 0 rgba(12,63,81,.04) !important;
  border:1px solid rgba(12,63,81,.08) !important;
  background:#FAF8F5 !important;
  overflow:hidden;
}
.say-popup h2,
.say-popup h3,
.say-popup .say-title{
  font-family:'Einstein','Heebo',sans-serif !important;
  color:var(--teal) !important;
  letter-spacing:-.01em !important;
}
.say-popup .say-eyebrow,
.say-popup .say-label{
  font-family:'Einstein','Heebo',sans-serif !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:rgba(12,63,81,.55) !important;
}
.say-popup .say-cta,
.say-popup a.btn,
.say-popup button.btn{
  background:var(--teal) !important;
  color:#fff !important;
  border-radius:999px !important;
  border:0 !important;
}
.say-popup .say-close{
  background:rgba(12,63,81,.06) !important;
  color:var(--teal) !important;
  border-radius:50% !important;
  border:0 !important;
}
.say-popup .say-close:hover{
  background:rgba(12,63,81,.12) !important;
}
.say-overlay{
  background:rgba(12,63,81,.42) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Square-corner sweep: ensure every panel honours 24px radius
   ════════════════════════════════════════════════════════════════════ */
.about-panel,
.about-photo,
.process-card,
.package-card,
.contact-panel,
.testimonial,
.pain-card,
.faq-item,
.legal-card{
  border-radius:24px !important;
}
@media (max-width: 640px){
  .about-panel,
  .about-photo,
  .process-card,
  .package-card,
  .contact-panel,
  .testimonial,
  .pain-card,
  .faq-item,
  .legal-card{ border-radius:20px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Accessibility / form labels visible
   Contact form was placeholder-only labels. Make label visible above
   the field, not visually hidden — better for screen-readers and
   sighted users alike.
   ════════════════════════════════════════════════════════════════════ */
.contact-panel .field label,
.form-grid .field label{
  display:block !important;
  margin-bottom:7px;
  font-family:'Einstein','Heebo',sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
[dir="ltr"] .contact-panel .field label,
[dir="ltr"] .form-grid .field label{
  letter-spacing:.16em;
}
.contact-panel .field input:focus,
.contact-panel .field select:focus,
.form-grid .field input:focus,
.form-grid .field select:focus{
  outline:none;
  border-color:rgba(255,255,255,.45) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.12) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Tap targets ≥ 44px on mobile (FABs, footer links, nav links)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .float-whatsapp,
  .float-instagram,
  .float-phone,
  .float-accessibility,
  .nav-toggle{
    min-width:48px !important;
    min-height:48px !important;
  }
  .site-footer__social a.footer-social-pill{
    width:42px !important;
    height:42px !important;
  }
  .site-footer__links a{
    padding:8px 4px;
    display:inline-flex;
    align-items:center;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v6 — prefers-reduced-motion (system) and manual pause toggle
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .logos-marquee{ animation:none !important; }
  .hero-tile:hover img{ transform:none !important; }
  .reveal, .reveal-left, .reveal-scale{ opacity:1 !important; transform:none !important; }
}
/* Manual user toggle from accessibility panel — body.acc-stop */
body.acc-stop *,
body.acc-stop *::before,
body.acc-stop *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
body.acc-stop .logos-marquee{ animation:none !important; }
body.acc-stop .hero-tile:hover img{ transform:none !important; }
body.acc-stop .reveal,
body.acc-stop .reveal-left,
body.acc-stop .reveal-scale{ opacity:1 !important; transform:none !important; }
.acc-btn.active{
  background:var(--teal) !important;
  color:#fff !important;
  border-color:var(--teal) !important;
}
.acc-btn:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Part B refinements
   - Global smooth scroll
   - Unified focus ring (keyboard only)
   - Card lift micro-interaction
   - Anchor scroll-margin (so headers don't hide section tops)
   - Image fade-in for lazy-loaded brand covers
   ════════════════════════════════════════════════════════════════════ */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Universal keyboard focus ring — calm, on-brand */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-light:focus-visible{
  outline-offset:4px;
}

/* Section anchor offset (sticky headers ~ 120px) */
:where(section[id], article[id], div[id]){ scroll-margin-top:120px; }

/* Card hover: only on input:hover-capable devices */
@media (hover: hover){
  .project-card{
    transition:transform .42s cubic-bezier(.22,.61,.36,1),
               box-shadow .42s ease;
  }
  .project-card:hover{
    transform:translateY(-2px);
  }
  .package-card{
    transition:transform .42s cubic-bezier(.22,.61,.36,1),
               box-shadow .42s ease;
  }
  .package-card:not(.featured):hover{
    transform:translateY(-2px);
  }
  .process-card{
    transition:transform .42s cubic-bezier(.22,.61,.36,1),
               box-shadow .42s ease;
  }
  .process-card:hover{
    transform:translateY(-2px);
  }
  .footer-social-pill{
    transition:transform .22s ease, background .22s ease, color .22s ease;
  }
}

/* Stronger button hover for primary CTAs — gentle, never bouncy */
.btn-primary, .btn-outline, .btn-light{
  transition:background-color .24s ease,
             color .24s ease,
             border-color .24s ease,
             transform .24s ease,
             box-shadow .24s ease !important;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px -10px rgba(12,63,81,.34) !important;
}
.btn-outline:hover{
  transform:translateY(-1px);
}
.btn-light:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(12,63,81,.18) !important;
}

/* FAQ — cleaner divider rhythm + soft hover */
.faq-item{
  transition:background-color .22s ease;
}
.faq-item:hover{
  background:rgba(255,255,255,.4);
}
.faq-item.open{
  background:#fff;
  box-shadow:0 1px 0 rgba(12,63,81,.04), 0 12px 32px -16px rgba(12,63,81,.16);
}

/* Form inputs: subtle ring on focus, not just border */
.form-grid input,
.form-grid select,
.form-grid textarea,
.contact-panel input,
.contact-panel select,
.contact-panel textarea{
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

/* "Skip to content" link — visible only on focus */
.skip-link{
  position:absolute;
  inset-inline-start:-9999px;
  inset-block-start:8px;
  padding:10px 16px;
  background:var(--teal);
  color:#fff !important;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  z-index:9999;
}
.skip-link:focus{
  inset-inline-start:8px;
}

/* Mobile-CTA strip safe-area padding (iOS home indicator) */
.mobile-cta-strip{
  padding-bottom:max(12px, env(safe-area-inset-bottom)) !important;
}

/* Marquee — pause on hover (desktop) */
@media (hover: hover){
  .logos-wrap:hover .logos-marquee{ animation-play-state:paused; }
}

/* ════════════════════════════════════════════════════════════════════
   v6 — Project-page sticky polish (work alongside JS-driven pinning)
   Hairline + matched backdrop so the nav and pnav read as one piece.
   ════════════════════════════════════════════════════════════════════ */
body.project-page .site-nav,
body.project-page .site-nav.stuck{
  background:rgba(250,248,245,.92) !important;
  -webkit-backdrop-filter:blur(28px) !important;
  backdrop-filter:blur(28px) !important;
}
body.project-page .pnav,
body.project-page .pnav.stuck{
  background:rgba(250,248,245,.92) !important;
  -webkit-backdrop-filter:blur(28px) !important;
  backdrop-filter:blur(28px) !important;
  border-top:0 !important;
  border-bottom:1px solid rgba(12,63,81,.08) !important;
  box-shadow:none !important;
}
body.project-page .pnav__tab,
body.project-page .project-tab{
  border-radius:999px !important;
}
body.project-page .pnav__tab.active{
  background:var(--teal) !important;
  color:#fff !important;
  border-color:var(--teal) !important;
  border-radius:999px !important;
  box-shadow:0 8px 22px rgba(12,63,81,.22) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  padding:9px 18px !important;
}
body.project-page .pnav__tab.active *{
  color:#fff !important;
  font-size:inherit !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   v7 — HERO REBUILD
   - No eyebrow above H1 (AI tell removed)
   - H1 contained, never overflows
   - Single card holds: H1 → lead → niche pill → CTAs → microcopy → stats
   - Hairline divider before stats row, inside card
   - Card and gallery same height (align-items:stretch)
   - Buttons flush with content edge (no drift)
   ════════════════════════════════════════════════════════════════════ */
.hero.hero--v7{
  padding-top:clamp(140px, 11vw, 180px) !important;
  padding-bottom:clamp(56px, 7vw, 96px) !important;
  background:linear-gradient(180deg, #FAF7F1 0%, #F2EBE0 100%) !important;
  position:relative;
  overflow:hidden;
  min-height:auto !important;
}
.hero.hero--v7::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201,169,110,.06), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(12,63,81,.05), transparent 50%);
  pointer-events:none;
}
.hero.hero--v7 .hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:clamp(24px, 3vw, 48px);
  align-items:stretch;
  width:min(var(--container, 1240px), calc(100% - 48px));
  margin-inline:auto;
}
[dir="rtl"] .hero.hero--v7 .hero-grid{
  /* HE: card on the right (visual right), gallery on the left */
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
}

/* The card holding all text + stats */
.hero.hero--v7 .hero-card{
  background:#FAF7F1;
  border:1px solid rgba(12,63,81,.08);
  border-radius:24px;
  padding:clamp(28px, 3.5vw, 52px);
  display:flex;
  flex-direction:column;
  box-shadow:
    0 1px 0 rgba(12,63,81,.02),
    0 28px 64px -32px rgba(12,63,81,.18);
}

/* H1 — controlled clamp, never overflows.
   Earlier rules in premium.css use !important; we override with !important
   on the v7-specific selector so the cascade is unambiguous. */
.hero.hero--v7 .hero-title{
  font-family:'Einstein','Heebo',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  line-height:1.08 !important;
  color:var(--teal) !important;
  margin:0 0 18px !important;
  font-size:clamp(30px, 3.6vw, 52px) !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  text-wrap:balance !important;
  max-width:none !important;
}
[dir="ltr"] .hero.hero--v7 .hero-title{
  font-size:clamp(34px, 4vw, 58px) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
}

.hero.hero--v7 .hero-lead{
  font-size:clamp(15px, 1.15vw, 17px);
  line-height:1.65;
  color:rgba(12,63,81,.72);
  margin:0 0 24px;
  max-width:50ch;
}

/* Niche pill — quieter than before, single hairline dot */
.hero.hero--v7 .hero-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(201,169,110,.10);
  border:1px solid rgba(201,169,110,.28);
  color:#8B6F3F;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  margin:0 0 28px;
  width:max-content;
  max-width:100%;
}
.hero.hero--v7 .hero-pill__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#C9A96E;
  flex-shrink:0;
  box-shadow:0 0 0 4px rgba(201,169,110,.18);
}

/* CTAs — flush with the card content edge, no drift */
.hero.hero--v7 .hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
}
.hero.hero--v7 .hero-actions .btn{
  margin:0 !important;
}

.hero.hero--v7 .hero-microcopy{
  margin:18px 0 0;
  font-size:13px;
  color:rgba(12,63,81,.55);
  letter-spacing:.01em;
}

/* STATS ROW — inside the card, with hairline above */
.hero.hero--v7 .hero-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:auto;            /* pushes stats to the bottom of the card */
  padding-top:28px;
  border-top:1px solid rgba(12,63,81,.10);
  /* a thin top spacer */
  position:relative;
}
.hero.hero--v7 .hero-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:start;
}
.hero.hero--v7 .hero-stat strong{
  font-family:'Einstein','Heebo',sans-serif;
  font-weight:700;
  font-size:clamp(28px, 2.8vw, 36px);
  letter-spacing:-.02em;
  color:var(--teal);
  line-height:1;
  display:inline-flex;
  align-items:flex-start;
  gap:1px;
  /* Lock LTR direction for the number+suffix so RTL never flips "200+" → "+200" */
  direction:ltr;
  unicode-bidi:isolate;
  width:max-content;
}
.hero.hero--v7 .hero-stat strong sup{
  font-size:.55em;
  font-weight:600;
  color:#C9A96E;
  margin-inline-start:1px;
  letter-spacing:0;
  line-height:1;
  position:relative;
  top:.2em;
}
.hero.hero--v7 .hero-stat span{
  font-size:12.5px;
  line-height:1.45;
  color:rgba(12,63,81,.62);
  letter-spacing:.005em;
  font-weight:500;
  display:block;
}

/* GALLERY — same height as card (stretches to grid row) */
.hero.hero--v7 .hero-gallery{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-rows:repeat(3, 1fr);
  gap:14px;
  align-self:stretch;
  height:100%;
  min-height:560px;
}
.hero.hero--v7 .hero-tile{
  position:relative;
  display:block;
  border-radius:22px;
  overflow:hidden;
  background:#E8DFD2;
  text-decoration:none;
  isolation:isolate;
  /* v8: hero-tile is now a button, not anchor — reset native chrome */
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:inherit;
  width:100%;
  box-shadow:
    0 1px 0 rgba(12,63,81,.04),
    0 22px 50px -24px rgba(12,63,81,.22);
  transition:transform .55s cubic-bezier(.4,0,.2,1), box-shadow .55s cubic-bezier(.4,0,.2,1);
}
/* v8: subtle fade during image swap */
.hero.hero--v7 .hero-tile.hero-tile--swapping img{
  opacity:.35;
  transition:opacity .22s cubic-bezier(.32,.72,0,1);
}
.hero.hero--v7 .hero-tile img{
  transition:opacity .42s cubic-bezier(.32,.72,0,1),
             transform 1.2s cubic-bezier(.22,.61,.36,1) !important;
}
.hero.hero--v7 .hero-tile:focus-visible{
  outline:3px solid var(--polish-gold);
  outline-offset:3px;
}
.hero.hero--v7 .hero-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(12,63,81,0) 45%,
    rgba(12,63,81,.55) 100%);
  z-index:1;
  pointer-events:none;
}
.hero.hero--v7 .hero-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.hero.hero--v7 .hero-tile:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(12,63,81,.04),
    0 30px 60px -22px rgba(12,63,81,.32);
}
@media (hover: hover){
  .hero.hero--v7 .hero-tile:hover img{ transform:scale(1.04); }
}
.hero.hero--v7 .hero-tile__meta{
  position:absolute;
  z-index:2;
  inset-inline-start:20px;
  inset-block-end:20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:none;
}
.hero.hero--v7 .hero-tile__type{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero.hero--v7 .hero-tile__name{
  font-family:'Einstein','Heebo',sans-serif;
  font-size:clamp(15px, 1.3vw, 19px);
  font-weight:600;
  letter-spacing:-.005em;
  color:#fff;
  line-height:1;
}
.hero.hero--v7 .hero-tile--feature{
  grid-column:1;
  grid-row:1 / span 3;
}
.hero.hero--v7 .hero-tile--a{ grid-column:2; grid-row:1; }
.hero.hero--v7 .hero-tile--b{ grid-column:2; grid-row:2; }
.hero.hero--v7 .hero-tile--c{ grid-column:2; grid-row:3; }
.hero.hero--v7 .hero-tile--feature .hero-tile__name{
  font-size:clamp(20px, 1.9vw, 28px);
}

/* Tablet 1080px */
@media (max-width: 1080px){
  .hero.hero--v7 .hero-grid,
  [dir="rtl"] .hero.hero--v7 .hero-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .hero.hero--v7 .hero-gallery{
    min-height:auto;
    height:380px;
  }
  .hero.hero--v7 .hero-card{
    padding:36px 32px;
  }
}

/* Phone 640px */
@media (max-width: 640px){
  .hero.hero--v7{
    padding-block:64px 56px;
  }
  .hero.hero--v7 .hero-grid{
    width:min(var(--container, 1240px), calc(100% - 24px));
    gap:24px;
  }
  .hero.hero--v7 .hero-card{
    padding:28px 22px;
    border-radius:20px;
  }
  .hero.hero--v7 .hero-title{
    font-size:clamp(30px, 9vw, 44px);
    margin-bottom:14px;
  }
  .hero.hero--v7 .hero-lead{
    font-size:14.5px;
    margin-bottom:18px;
  }
  .hero.hero--v7 .hero-pill{
    margin-bottom:20px;
  }
  .hero.hero--v7 .hero-actions{
    flex-direction:column;
  }
  .hero.hero--v7 .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  .hero.hero--v7 .hero-stats{
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    padding-top:22px;
  }
  .hero.hero--v7 .hero-stat strong{
    font-size:24px;
  }
  .hero.hero--v7 .hero-stat span{
    font-size:11.5px;
    line-height:1.35;
  }
  .hero.hero--v7 .hero-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:200px 140px 140px;
    height:auto;
    gap:10px;
  }
  .hero.hero--v7 .hero-tile--feature{
    grid-column:1 / span 2;
    grid-row:1;
  }
  .hero.hero--v7 .hero-tile--a{ grid-column:1; grid-row:2; }
  .hero.hero--v7 .hero-tile--b{ grid-column:2; grid-row:2; }
  .hero.hero--v7 .hero-tile--c{ grid-column:1 / span 2; grid-row:3; }
  .hero.hero--v7 .hero-tile{
    border-radius:18px;
  }
}

/* Below 414 — single-col stats */
@media (max-width: 414px){
  .hero.hero--v7 .hero-stats{
    grid-template-columns:1fr;
    gap:18px;
  }
  .hero.hero--v7 .hero-stat{
    flex-direction:row;
    align-items:baseline;
    gap:14px;
  }
  .hero.hero--v7 .hero-stat strong{
    flex-shrink:0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v8 — IMAGE CROPS
   Source images are mostly 1600×1194 (1.34) landscape product shots.
   Some sources are 1080×1350 (4:5) Instagram-style portrait.
   Earlier sessions used object-position:center everywhere — which cut
   subjects out when slot aspect didn't match source aspect.
   This block sets per-image focal points based on visual inspection.
   ════════════════════════════════════════════════════════════════════ */

/* Universal default — center, with a touch of bias toward bottom for
   product photography (subjects usually sit slightly below frame center). */
.ph__bg img,
.ps-img,
.gc img,
.ph-editorial img{
  object-fit:cover !important;
  object-position:center 58% !important;
}

/* Hero (.ph) per-page focal points
   Container is ~100svh tall, source is 1.33–1.34 landscape.
   We need to bias the visible window so the brand mark stays in frame. */
body.project-page .ph__bg img[src*="daniel-cohen/"]{
  object-position:center 75% !important;
}
body.project-page .ph__bg img[src*="jonathan-eliasi/"]{
  object-position:center 70% !important;
}
body.project-page .ph__bg img[src*="miel/"]{
  object-position:65% 60% !important;
}
body.project-page .ph__bg img[src*="lumera/"]{
  object-position:center 62% !important;
}
body.project-page .ph__bg img[src*="lumiere/"]{
  object-position:center 55% !important;
}
body.project-page .ph__bg img[src*="velora/"]{
  object-position:center 60% !important;
}
body.project-page .ph__bg img[src*="vemar/"]{
  object-position:center 60% !important;
}
body.project-page .ph__bg img[src*="zohar/"]{
  object-position:center 60% !important;
}
/* Hero crop should never be tighter than necessary — drop the 1.06 zoom
   so we don't re-clip what object-position just rescued. */
.ph__bg img{ transform:scale(1.0) !important; }

/* About / Logo split sections (.ps-img)
   Was aspect-ratio:1.05 (near square) which fights 1.34 landscape sources.
   New ratio matches sources, so crops are minimal. */
.ps-img{
  aspect-ratio:4/3 !important;
}
/* For portrait source (zohar-class), use a portrait slot. */
body.project-page .ps-split__visual:has(img[src*="zohar/logo"]) .ps-img,
body.project-page .ps-split__visual:has(img[src*="zohar/g1"]) .ps-img,
body.project-page .ps-split__visual:has(img[src*="zohar/g2"]) .ps-img,
body.project-page .ps-split__visual:has(img[src*="zohar/g3"]) .ps-img{
  aspect-ratio:4/5 !important;
}

/* Editorial full-width photo break — center is fine for almost all */
.ph-editorial img{
  object-position:center 55% !important;
}

/* Gallery cards — biases per slot
   gc-1 (1.4 wide): subject usually centered, allow center
   gc-2 (.9 portrait): show middle (product subjects)
   gc-3 (square): center
   gc-4 (1.6 wide): keep subject, bias slightly down */
.gc-1 img{ object-position:center 55% !important; }
.gc-2 img{ object-position:center center !important; }
.gc-3 img{ object-position:center center !important; }
.gc-4 img{ object-position:center 55% !important; }

/* Logo image block — show logo cleanly without tight crop */
img[src*="/logo.jpeg"],
img[src*="/logo.jpg"]{
  object-position:center 50% !important;
}

/* Per-image overrides — subjects that sit far from frame center */
img[src*="daniel-cohen/g5"],
img[src*="jonathan-eliasi/g5"]{
  object-position:center 75% !important;  /* bag, logo low in frame */
}
img[src*="daniel-cohen/g3"],
img[src*="jonathan-eliasi/g3"]{
  object-position:center 60% !important;  /* wall logo, slight upper bias */
}
img[src*="daniel-cohen/g4"],
img[src*="jonathan-eliasi/g4"]{
  object-position:center 65% !important;  /* business cards, lower half */
}
img[src*="miel/cover"]{
  object-position:65% center !important;  /* bottle right of center */
}

/* Project-grid covers on the homepage — same bias logic */
.project-card img,
.project-cover img,
.project-cover-tile img{
  object-fit:cover !important;
  object-position:center 60% !important;
}
.project-card img[src*="daniel-cohen"],
.project-cover img[src*="daniel-cohen"]{
  object-position:center 75% !important;
}
.project-card img[src*="jonathan-eliasi"],
.project-cover img[src*="jonathan-eliasi"]{
  object-position:center 70% !important;
}

/* Mobile — compress hero a touch so users don't have to scroll past
   half a screen of empty wall on small viewports */
@media (max-width: 640px){
  body.project-page .ph{
    height:78svh !important;
    min-height:480px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v8 — PREMIUM SCROLL & REVEAL
   Asaf: "גלילה כיפית נעימה ועדינה ממש אפקט כיפי לא מוגזם אבל פרימיום."
   Quiet, like a luxury car door — not a spring.
   ════════════════════════════════════════════════════════════════════ */

/* Smooth-scroll padding so anchored sections clear the sticky nav cleanly */
html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}
body.project-page{
  scroll-padding-top:160px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
}

/* Reveal — subtler entrance (8px translateY, 0.8s, premium cubic bezier).
   Fires once via the existing IntersectionObserver in script.js. */
.reveal{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .8s cubic-bezier(.32,.72,0,1),
             transform .8s cubic-bezier(.32,.72,0,1);
  will-change:opacity, transform;
}
.reveal.in{
  opacity:1;
  transform:none;
}
.reveal-left{
  opacity:0;
  transform:translateX(-12px);
  transition:opacity .8s cubic-bezier(.32,.72,0,1),
             transform .8s cubic-bezier(.32,.72,0,1);
}
.reveal-left.in{
  opacity:1;
  transform:none;
}
.reveal-scale{
  opacity:0;
  transform:scale(.985);
  transition:opacity .8s cubic-bezier(.32,.72,0,1),
             transform .8s cubic-bezier(.32,.72,0,1);
}
.reveal-scale.in{
  opacity:1;
  transform:none;
}

/* Stagger delays — keep, but tighter so cascade feels coherent */
.delay-1{ transition-delay:.06s; }
.delay-2{ transition-delay:.12s; }
.delay-3{ transition-delay:.18s; }
.delay-4{ transition-delay:.24s; }

/* Soft reveal for any [data-reveal] selector if ever added to img/p */
[data-reveal]{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .8s cubic-bezier(.32,.72,0,1),
             transform .8s cubic-bezier(.32,.72,0,1);
}
[data-reveal].in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-scale, [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v10 — FULL POLISH PASS (Asaf's detailed review)
   ──────────────────────────────────────────────────────────────────
   1. HERO sharpened (+20% H1, smaller lead, dominant primary CTA,
      ghost secondary, stats 32px)
   3. PAIN cards strengthened (deeper shadow, more padding, bolder)
   4. PROJECTS as 4 large cards (2-col grid + view-all CTA)
   5. ASAF card stronger contrast + padding
   6. PROCESS as Studio Method (titles already changed in HTML)
   7. PACKAGES simplified (sharper cards)
   8. CHECKLIST CTA framed as conversion anchor
   10. CONTACT FORM larger inputs, gold focus ring
   11. MOBILE adjustments
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO ─────────────────────────────────────────────────── */
.hero.hero--v7 .hero-title{
  /* HE: 36–64; en/index.html applies the LTR-bumped version below */
  font-size:clamp(36px, 4.2vw, 64px) !important;
  line-height:1.05 !important;
  letter-spacing:-.022em !important;
  margin-bottom:18px !important;
}
[dir="ltr"] .hero.hero--v7 .hero-title{
  font-size:clamp(40px, 4.5vw, 68px) !important;
}
.hero.hero--v7 .hero-lead{
  font-size:16px !important;
  line-height:1.75 !important;
  color:rgba(23,23,23,.66) !important;
  margin-bottom:22px !important;
  max-width:560px !important;
}
.hero.hero--v7 .hero-actions{
  gap:14px !important;
  align-items:center !important;
  margin-top:6px !important;
}
.hero.hero--v7 .hero-actions .btn-primary{
  padding:18px 38px !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  min-height:60px !important;
  box-shadow:0 18px 38px rgba(12,63,81,.22),
             0 2px 0 rgba(12,63,81,.06) !important;
}
.hero.hero--v7 .hero-actions .btn-primary:hover{
  box-shadow:0 22px 46px rgba(12,63,81,.28),
             0 2px 0 rgba(12,63,81,.06) !important;
  transform:translateY(-2px) !important;
}
.hero.hero--v7 .hero-actions .btn-outline,
.hero.hero--v7 .hero-actions .btn:not(.btn-primary){
  background:transparent !important;
  border:1px solid rgba(12,63,81,.20) !important;
  color:rgba(12,63,81,.78) !important;
  font-weight:500 !important;
  font-size:14.5px !important;
  padding:14px 24px !important;
  min-height:52px !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.hero.hero--v7 .hero-actions .btn-outline:hover{
  border-color:rgba(12,63,81,.48) !important;
  color:var(--teal) !important;
  background:rgba(12,63,81,.03) !important;
}
.hero.hero--v7 .hero-stat strong{
  font-size:clamp(28px, 3.2vw, 36px) !important;
  letter-spacing:-.025em !important;
  font-weight:700 !important;
}
.hero.hero--v7 .hero-stat span{
  font-size:12px !important;
  letter-spacing:.02em !important;
  color:rgba(12,63,81,.55) !important;
  line-height:1.45 !important;
}

/* ── 3. PAIN section — deeper, sharper ───────────────────────── */
/* v11: Before card was #fff inside a section-white parent → invisible.
   Now it gets a soft warm-gray gradient distinct from the section,
   and the After card retains its cream gradient. Both have matching
   hairline border + ambient shadow — same frame, different tone.
   The outer .pain-compare wrapper becomes a transparent grid container
   (its old white panel + middle divider would create card-in-card). */
.pain-compare{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.pain-compare__grid{
  gap:24px !important;
}
.pain-compare__grid::before{ display:none !important; }
.pain-compare__col{
  background:linear-gradient(180deg, #FBFAF6 0%, #F4F1E8 100%) !important;
  border:1px solid rgba(12,63,81,.12) !important;
  border-radius:24px !important;
  padding:36px 32px !important;
  box-shadow:0 18px 48px -24px rgba(12,63,81,.18),
             0 2px 6px rgba(12,63,81,.04) !important;
}
.pain-compare__col--after{
  border-color:rgba(201,169,110,.32) !important;
  background:linear-gradient(180deg, #FAF8F4 0%, #F2EBDF 100%) !important;
  box-shadow:0 22px 56px -22px rgba(201,169,110,.20),
             0 2px 6px rgba(12,63,81,.04) !important;
}
.pain-compare__head{
  margin-bottom:22px !important;
  padding-bottom:18px !important;
  border-bottom:1px solid rgba(12,63,81,.08) !important;
}
.pain-compare__label{
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:rgba(12,63,81,.65) !important;
}
.pain-compare__list li{
  font-size:15.5px !important;
  line-height:1.55 !important;
  padding:13px 0 !important;
  color:rgba(23,23,23,.82) !important;
}
.pain-compare__icon{
  flex-shrink:0;
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(180,65,45,.08) !important;
  color:rgba(160,55,35,.70) !important;
  margin-inline-end:10px !important;
}
.pain-compare__icon svg{
  width:13px !important;
  height:13px !important;
  display:block !important;
}
.pain-compare__col--after .pain-compare__icon{
  background:rgba(201,169,110,.18) !important;
  color:#8C6B2C !important;
}
.pain-statement{
  margin-top:48px !important;
  padding:42px 36px !important;
  background:linear-gradient(180deg, rgba(12,63,81,.04) 0%, rgba(12,63,81,.07) 100%) !important;
  border-radius:24px !important;
  border:1px solid rgba(12,63,81,.10) !important;
  text-align:center !important;
}
.pain-statement__quote{
  font-family:'Einstein','Heebo',sans-serif !important;
  font-size:clamp(24px, 3.4vw, 36px) !important;
  line-height:1.25 !important;
  letter-spacing:-.02em !important;
  color:var(--teal) !important;
  margin-bottom:14px !important;
  font-weight:500 !important;
}
.pain-statement__sub{
  font-size:15.5px !important;
  line-height:1.7 !important;
  color:rgba(23,23,23,.7) !important;
  max-width:560px !important;
  margin-inline:auto !important;
}

/* ── 4. PROJECTS — 4 large cards, 2-col grid ─────────────────── */
#projects .projects-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:28px !important;
  margin-top:8px !important;
}
@media (max-width: 760px){
  #projects .projects-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
}
#projects .project-card{
  aspect-ratio:1.25 !important;
  border-radius:28px !important;
  box-shadow:0 22px 56px -28px rgba(12,63,81,.22),
             0 2px 6px rgba(12,63,81,.04) !important;
  transition:transform .42s cubic-bezier(.32,.72,0,1),
             box-shadow .42s cubic-bezier(.32,.72,0,1) !important;
}
#projects .project-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 36px 84px -28px rgba(12,63,81,.34),
             0 2px 6px rgba(12,63,81,.04) !important;
}
#projects .project-card:hover img{
  transform:scale(1.04) !important;
}
#projects .project-card img{
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1) !important;
}
#projects .project-meta h3{
  font-size:clamp(22px, 2.4vw, 28px) !important;
  margin-bottom:6px !important;
}
#projects .project-meta p{
  font-size:14px !important;
  color:rgba(255,255,255,.78) !important;
}
/* Hover overlay: subtle "View project" reveal — premium and quiet */
#projects .project-card::before{
  content:attr(data-view-label);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) translateY(8px);
  z-index:3;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  color:var(--teal);
  font-family:'Einstein','Heebo',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  opacity:0;
  transition:opacity .42s cubic-bezier(.32,.72,0,1),
             transform .42s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
  white-space:nowrap;
}
#projects .project-card:hover::before{
  opacity:1;
  transform:translate(-50%, -50%) translateY(0);
}
@media (hover: none){
  #projects .project-card::before{ display:none; }
}

/* ── 5. ASAF section card — stronger contrast ────────────────── */
#about .about-panel{
  background:#fff !important;
  border:1px solid rgba(12,63,81,.14) !important;
  padding:48px 44px !important;
  box-shadow:0 28px 64px -28px rgba(12,63,81,.20),
             0 2px 6px rgba(12,63,81,.04) !important;
}
#about .about-panel .lead{
  font-size:16px !important;
  line-height:1.85 !important;
  color:rgba(23,23,23,.78) !important;
}
#about .about-panel .about-quote{
  font-size:18px !important;
  border-inline-start:3px solid var(--polish-gold, #C9A96E) !important;
  padding-inline-start:18px !important;
  border-radius:0 !important;
}
#about .about-panel .btn-primary{
  margin-top:6px !important;
  padding:16px 32px !important;
  font-size:15.5px !important;
  font-weight:700 !important;
}
@media (max-width: 760px){
  #about .about-panel{
    padding:32px 26px !important;
  }
}

/* ── 6. PROCESS — tighter, sharper ───────────────────────────── */
.process-card{
  padding:34px 28px !important;
  border-radius:22px !important;
  background:#fff !important;
  border:1px solid rgba(12,63,81,.10) !important;
  box-shadow:0 16px 42px -22px rgba(12,63,81,.18) !important;
}
.process-card h3{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:var(--teal) !important;
  margin-bottom:10px !important;
  line-height:1.3 !important;
}
.process-card p{
  font-size:14.5px !important;
  line-height:1.7 !important;
  color:rgba(23,23,23,.7) !important;
}

/* ── 7. PACKAGES — simplified card chrome ────────────────────── */
.package-card{
  padding:42px 36px !important;
  border-radius:24px !important;
}
.package-card h3{
  font-size:26px !important;
  letter-spacing:-.015em !important;
  margin-bottom:8px !important;
}
.package-card > p:first-of-type,
.package-card > p:nth-of-type(1){
  font-size:14.5px !important;
  line-height:1.7 !important;
  margin-bottom:22px !important;
}
.package-card .package-list{
  gap:11px !important;
}
.package-card .package-list li{
  font-size:14.5px !important;
  line-height:1.55 !important;
}
.package-card .say-more-btn{
  margin-top:28px !important;
  width:100% !important;
  padding:14px 20px !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}
@media (max-width: 1100px){
  #packages .packages-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
}

/* ── 8. CHECKLIST CTA — conversion anchor frame ──────────────── */
#checklist-cta{
  padding:96px 0 !important;
}
#checklist-cta .container > .reveal:first-child h2{
  font-size:clamp(28px, 3.6vw, 42px) !important;
  letter-spacing:-.02em !important;
  line-height:1.2 !important;
  max-width:760px !important;
  margin-inline:auto !important;
}
#checklist-cta .container > .reveal:first-child .lead{
  font-size:16.5px !important;
  line-height:1.75 !important;
  max-width:620px !important;
  margin-inline:auto !important;
  margin-top:14px !important;
}
#checklist-cta .checklist-bonus{
  border:1px solid rgba(201,169,110,.32) !important;
  box-shadow:0 26px 64px -28px rgba(201,169,110,.32) !important;
}
#checklist-cta .cta-checklist{
  padding:22px 56px !important;
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  box-shadow:0 22px 48px -22px rgba(12,63,81,.32) !important;
}

/* ── 10. CONTACT FORM — larger, calmer, gold focus ───────────── */
/* v10 RTL/LTR fix: use logical paddings so the chevron (chevron sits
   on the inline-end edge in BOTH directions) never overlaps the value */
#contact .form-grid{ gap:18px !important; }
#contact .field label{
  font-size:11px !important;
  letter-spacing:.20em !important;
  color:rgba(255,255,255,.55) !important;
  margin-bottom:10px !important;
}
#contact .field input,
#contact .field select{
  height:56px !important;
  padding-block:14px !important;
  padding-inline-start:18px !important;
  padding-inline-end:18px !important;
  font-size:15.5px !important;
  border-radius:12px !important;
  border:1.5px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.07) !important;
  transition:border-color .24s ease, background .24s ease, box-shadow .24s ease !important;
}
/* Selects need extra inline-end space for the chevron icon */
#contact .field select{
  padding-inline-end:40px !important;
  /* Chevron always sits on the inline-end side regardless of dir */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22 viewBox=%220 0 12 8%22 fill=%22none%22><path d=%22M1 1.5l5 5 5-5%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/></svg>') !important;
  background-repeat:no-repeat !important;
  background-size:12px !important;
}
[dir="ltr"] #contact .field select{
  background-position:right 16px center !important;
}
[dir="rtl"] #contact .field select{
  background-position:left 16px center !important;
}
#contact .field input:focus,
#contact .field select:focus{
  border-color:rgba(201,169,110,.6) !important;
  background-color:rgba(255,255,255,.10) !important;
  box-shadow:0 0 0 3px rgba(201,169,110,.16) !important;
  outline:none !important;
}
#contact .form-grid .btn-row .btn{
  height:60px !important;
  font-size:16.5px !important;
  font-weight:700 !important;
  border-radius:12px !important;
}

/* v11: project-page next-projects section uses 3 cards, not 8 — give it
   a 3-col grid so we don't leave an empty slot in the default 4-col one. */
body.project-page .projects-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
}
@media (max-width: 980px){
  body.project-page .projects-grid{
    grid-template-columns:1fr !important;
  }
}

/* ── 11. MOBILE refinements ──────────────────────────────────── */
@media (max-width: 640px){
  /* Hero: image AFTER text on mobile so the user reads the H1 first */
  .hero.hero--v7 .hero-grid{
    grid-template-columns:1fr !important;
  }
  .hero.hero--v7 .hero-card{
    order:1 !important;
    padding:24px 0 !important;
  }
  .hero.hero--v7 .hero-gallery{
    order:2 !important;
    margin-top:18px !important;
    min-height:auto !important;
  }
  .hero.hero--v7 .hero-actions .btn-primary,
  .hero.hero--v7 .hero-actions .btn-outline{
    width:100% !important;
    min-height:54px !important;
  }
  /* Form fields full width with breathing room */
  #contact .form-grid .btn-row .btn{
    width:100% !important;
  }
  /* Pain quote: tighter padding so it doesn't feel oversized on phone */
  .pain-statement{ padding:30px 22px !important; }
  /* About panel: tighter */
  #about .about-grid{ gap:18px !important; }
}

/* =========================================================================
   v14 — FINAL CLEANUP BLOCK (single source of truth; loaded last)
   ========================================================================= */

/* Footer social pills — guarantee uniform icon alignment/size */
.footer-social-pill svg{flex:0 0 auto;display:block}
.footer-social-pill{align-items:center !important}

/* Accessibility panel — clean rebuild */
.accessibility-panel{
  width:min(320px, calc(100vw - 32px)) !important;
  padding:18px !important;
  background:rgba(255,255,255,.98) !important;
  -webkit-backdrop-filter:blur(20px) !important; backdrop-filter:blur(20px) !important;
  border:1px solid rgba(12,63,81,.12) !important;
  border-radius:20px !important;
  box-shadow:0 20px 60px rgba(12,63,81,.18) !important;
}
.accessibility-panel h3{font-size:16px !important;font-weight:700 !important;color:#0C3F51 !important;margin:0 0 4px !important;letter-spacing:0 !important}
.accessibility-panel > p{font-size:12.5px !important;color:rgba(12,63,81,.6) !important;margin:0 0 14px !important;line-height:1.5 !important}
.accessibility-panel .acc-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
.accessibility-panel .acc-btn{
  display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;
  min-height:48px !important;padding:10px 12px !important;
  font-size:12.5px !important;font-weight:600 !important;line-height:1.25 !important;
  border-radius:12px !important;
  background:rgba(12,63,81,.05) !important;
  border:1px solid rgba(12,63,81,.10) !important;
  color:#0C3F51 !important;cursor:pointer !important;
  transition:background .2s ease,color .2s ease,border-color .2s ease !important;
}
.accessibility-panel .acc-btn:hover,
.accessibility-panel .acc-btn.active{background:#0C3F51 !important;color:#fff !important;border-color:#0C3F51 !important}
.accessibility-panel .acc-close{
  width:100% !important;margin-top:10px !important;min-height:44px !important;
  background:transparent !important;border:1px solid rgba(12,63,81,.15) !important;
  color:rgba(12,63,81,.7) !important;border-radius:12px !important;font-weight:600 !important;
}
.accessibility-panel .acc-close:hover{background:rgba(12,63,81,.06) !important}

/* =========================================================================
   v15 — HERO airier + ONE dominant CTA + clean mobile (landing-page feel)
   ========================================================================= */
/* Dominant primary CTA */
.hero .hero-actions{ gap:16px !important; align-items:center !important; flex-wrap:wrap; }
.hero .hero-actions .btn-primary{
  padding:18px 42px !important; font-size:17px !important; font-weight:700 !important;
  box-shadow:0 12px 30px rgba(12,63,81,.22) !important;
}
/* Secondary demoted to a quiet text link so there is one clear action */
.hero .hero-actions .btn-outline{
  border:none !important; background:transparent !important;
  padding:12px 8px !important; text-decoration:underline; text-underline-offset:3px;
  box-shadow:none !important;
}
/* More breathing room around the hero copy */
.hero .hero-card{ padding-block:8px; }
.hero .hero-lead{ max-width:32ch; }

/* MOBILE: clean, short, message-first hero — drop the image collage */
@media(max-width:640px){
  .hero-gallery{ display:none !important; }
  .hero .hero-grid{ grid-template-columns:1fr !important; }
  .hero .hero-card{ text-align:center; }
  .hero .hero-pill{ margin-inline:auto; }
  .hero .hero-actions{ flex-direction:column; gap:12px !important; }
  .hero .hero-actions .btn{ width:100%; }
  .hero .hero-stats{ justify-content:center; }
}