/*
Theme Name: Social Paradigm v3.9
Template: twentytwentyfive
Author: Yash Verma
Description: One-page creative growth studio site for Social Paradigm — content, experiences, and creator-led collaborations.
Version: 3.9.6
*/

/* Fonts are enqueued in functions.php — an @import here would be a third serial round trip. */

:root{
  --sp-yellow:#FFCA3A;
  --sp-yellow-soft:#FFE39A;
  --sp-dark:#141414;
  --sp-muted:#6E6E6E;
  --sp-line:#ececec;
  --sp-light:#F6F6F3;
}

html{ scroll-behavior:smooth; }
:target{ scroll-margin-top:92px; }

body{
  font-family:"Inter", sans-serif;
  color:var(--sp-dark);
  background:#fff;
  line-height:1.6;
}

h1,h2,h3,h4,h5{ font-family:"Space Grotesk", sans-serif; letter-spacing:-0.02em; line-height:1.08; }

/* ---------- helpers ---------- */
.sp-eyebrow{
  font-family:"Space Grotesk", sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.78rem;
  font-weight:600;
  color:var(--sp-muted);
}
.sp-section-pad{ padding-top:clamp(3.5rem,8vw,6.5rem); padding-bottom:clamp(3.5rem,8vw,6.5rem); }

/* ---------- buttons ---------- */
.wp-element-button, .wp-block-button__link{
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.wp-element-button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.is-style-outline .wp-block-button__link{ border-width:2px; }

/* ---------- header / nav ---------- */
.sp-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--sp-line);
}
.sp-header .wp-block-site-title a{
  font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:1.3rem;
  text-decoration:none; color:var(--sp-dark);
}
.sp-header .wp-block-site-title a::before{
  content:""; display:inline-block; width:11px; height:11px;
  background:var(--sp-yellow); border-radius:50%; margin-right:9px; vertical-align:middle;
}
.sp-header .wp-block-site-logo{ line-height:0; }
.sp-header .wp-block-site-logo img,
.sp-footer .wp-block-site-logo img{
  display:block; box-sizing:border-box;
  background:#fff; padding:5px; border-radius:10px;
}
.sp-footer .wp-block-site-logo img{ padding:7px; border-radius:13px; }
.sp-header .wp-block-navigation{ font-family:"Space Grotesk", sans-serif; font-weight:500; }
.sp-header .wp-block-navigation a{ color:var(--sp-dark); font-size:.97rem; }
.sp-header .wp-block-navigation a:hover{ color:#000; text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--sp-yellow); text-decoration-thickness:2px; }

/* ---------- hero ---------- */
.sp-hero{ position:relative; overflow:clip; background:#fff; }
.sp-hero::before{
  content:""; position:absolute; top:-120px; left:-140px; width:380px; height:380px;
  background:var(--sp-light); border-radius:42% 58% 55% 45% / 55% 45% 55% 45%; z-index:0;
}
.sp-hero > *{ position:relative; z-index:1; }
.sp-hero h1{ font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:700; }
.sp-hero .sp-sub{ color:var(--sp-muted); font-size:clamp(1.05rem,1.6vw,1.2rem); max-width:34ch; }

.sp-photo-frame{ position:relative; }
.sp-photo-frame img{
  position:relative; z-index:2;
  border-radius:46% 54% 47% 53% / 54% 46% 54% 46%;
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}
.sp-photo-frame::before{
  content:""; position:absolute; z-index:1; inset:8% -8% -6% 10%;
  background:var(--sp-yellow);
  border-radius:54% 46% 52% 48% / 48% 54% 46% 52%;
}
.sp-photo-frame::after{
  content:""; position:absolute; z-index:3; right:-6px; top:-12px; width:120px; height:120px;
  background-image:radial-gradient(var(--sp-dark) 1.6px, transparent 1.7px);
  background-size:14px 14px; opacity:.18;
}

/* ---------- stats ---------- */
.sp-stats{ border-top:1px solid var(--sp-line); padding-top:2.6rem; margin-top:1rem; }
.sp-stat h3{ font-size:clamp(1.7rem,3vw,2.4rem); margin:0; color:var(--sp-dark); }
.sp-stat p{ color:var(--sp-muted); font-size:.92rem; margin:.3rem 0 0; line-height:1.35; }
.sp-stat{ position:relative; padding-left:.9rem; }
.sp-stat::before{ content:""; position:absolute; left:0; top:.35rem; width:5px; height:1.5rem; background:var(--sp-yellow); border-radius:3px; }

/* ---------- services ---------- */
.sp-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1.5rem; align-items:stretch;
}
.sp-service-card{
  background:#fff; border:1px solid var(--sp-line); border-radius:20px;
  padding:2rem 1.9rem !important; height:100%; margin:0;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sp-service-card:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(0,0,0,.09); border-color:transparent; }
.sp-service-num{ font-family:"Space Grotesk", sans-serif; font-weight:700; color:var(--sp-yellow); font-size:1.05rem; margin:0 0 .6rem; }
.sp-service-card h3{ font-size:1.32rem; margin:0 0 .55rem; }
.sp-service-card p{ color:var(--sp-muted); margin:0; font-size:.98rem; }


/* ---------- portfolio ---------- */
.sp-portfolio-tiles img{ border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.08); }

/* side-scrolling reel showcase */
.sp-reel-scroller{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1.5rem .25rem 1rem; margin-top:1rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--sp-yellow) #ececec; }
.sp-reel-scroller::-webkit-scrollbar{ height:8px; }
.sp-reel-scroller::-webkit-scrollbar-track{ background:#ececec; border-radius:8px; }
.sp-reel-scroller::-webkit-scrollbar-thumb{ background:var(--sp-yellow); border-radius:8px; }
.sp-reel-vid{
  flex:0 0 auto; scroll-snap-align:start;
  width:300px; height:533px; object-fit:cover;
  border-radius:18px; background:#000; cursor:pointer; display:block;
  box-shadow:0 16px 38px rgba(0,0,0,.22);
}
.sp-reel-vid:hover{ box-shadow:0 18px 44px rgba(0,0,0,.32); }
@media (max-width:600px){ .sp-reel-vid{ width:250px; height:444px; } }

/* ---------- personal ---------- */
.sp-personal-photo img{ border-radius:24px; box-shadow:0 24px 50px rgba(0,0,0,.16); }

/* ---------- reviews ---------- */
.sp-review{ background:#fff; border:1px solid var(--sp-line); border-radius:20px; padding:2rem !important; height:100%; margin:0; display:flex; flex-direction:column; }
.sp-stars{ color:var(--sp-yellow); letter-spacing:3px; font-size:1.05rem; }
.sp-review .sp-quote{ font-size:1.05rem; color:#262626; margin:.8rem 0 1.2rem; flex:1 1 auto; }
.sp-review-name{ font-family:"Space Grotesk", sans-serif; font-weight:700; margin:0; }
.sp-review-role{ color:var(--sp-muted); font-size:.88rem; margin:.15rem 0 0; }

.sp-scroll-hint{ color:var(--sp-muted) !important; font-size:.95rem; margin:0 0 1.4rem; }
.sp-reviews-scroller{
  display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.5rem .25rem 1.5rem; margin:0 -.25rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--sp-yellow) #ececec;
}
.sp-reviews-scroller::-webkit-scrollbar{ height:8px; }
.sp-reviews-scroller::-webkit-scrollbar-track{ background:#ececec; border-radius:8px; }
.sp-reviews-scroller::-webkit-scrollbar-thumb{ background:var(--sp-yellow); border-radius:8px; }
.sp-reviews-scroller > .sp-review{ flex:0 0 auto; width:min(340px, 80vw); scroll-snap-align:start; }
html[data-theme="dark"] .sp-reviews-scroller{ scrollbar-color:var(--sp-yellow) #262626; }
html[data-theme="dark"] .sp-reviews-scroller::-webkit-scrollbar-track{ background:#262626; }


/* ---------- lottie decorations ---------- */
.sp-lottie{ line-height:0; }
.sp-lottie svg{ display:block; width:100%; height:auto; }
/* nothing is loaded for reduced-motion users, so the empty boxes must collapse */
@media (prefers-reduced-motion: reduce){ .sp-lottie{ display:none; } }

/* aspect-ratio reserves the box before the SVG arrives, so nothing shifts on load */
.sp-lottie-wave{ width:min(340px,86%); margin:0 auto; aspect-ratio:260/160; }
.sp-lottie-pulse{ width:150px; margin:0 auto 1.4rem; aspect-ratio:1; }
.sp-lottie-arrow{ width:104px; margin:0 auto 1.1rem; aspect-ratio:2; }
/* the waveform's non-accent bars are drawn in the brand dark, which vanishes on a
   dark background — recolour just those paths (the yellow accents stay put). */
html[data-theme="dark"] .sp-lottie-wave path[fill="rgb(19,19,19)"]{ fill:#ededed; }
@media (max-width:781px){
  .sp-wid-cols{ gap:2rem; }
  .sp-lottie-wave{ width:min(260px,70%); }
  .sp-lottie-pulse{ width:118px; }
}

/* ---------- faq ---------- */
.sp-faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:.85rem; }
.sp-faq{
  border:1px solid var(--sp-line); border-radius:18px; background:#fff; overflow:hidden;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.sp-faq:hover{ border-color:#dcdcdc; }
.sp-faq[open]{ box-shadow:0 18px 40px rgba(0,0,0,.08); border-color:transparent; }
/* summary padding never changes between states — changing it made the question jump on click */
.sp-faq summary{
  cursor:pointer; list-style:none;
  padding:1.25rem 1.5rem;
  font-family:"Space Grotesk", sans-serif; font-weight:600;
  font-size:clamp(1rem,1.4vw,1.08rem); line-height:1.5; color:var(--sp-dark);
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
}
.sp-faq summary::-webkit-details-marker{ display:none; }
.sp-faq summary:focus-visible{ outline:none; }
.sp-faq:has(summary:focus-visible){ outline:2px solid var(--sp-yellow); outline-offset:3px; border-radius:18px; }
@supports not (selector(:has(*))){
  .sp-faq summary:focus-visible{ outline:2px solid var(--sp-yellow); outline-offset:-3px; }
}
.sp-faq summary::after{
  content:"+"; flex:0 0 auto;
  width:30px; height:30px;
  display:grid; place-items:center;
  font-size:1.45rem; font-weight:400; line-height:1;
  color:var(--sp-dark); background:#fff;
  border:1px solid var(--sp-line); border-radius:50%;
  transition:transform .3s cubic-bezier(.3,.9,.3,1), background .25s ease, border-color .25s ease;
}
.sp-faq:hover summary::after{ background:var(--sp-light); border-color:#d8d8d8; }
.sp-faq[open] summary::after{ transform:rotate(135deg); background:var(--sp-yellow); border-color:var(--sp-yellow); }
/* answer sits flush under the question: the gap is the summary's own bottom padding */
.sp-faq-a{
  padding:.65rem 1.5rem 1.5rem;
  color:var(--sp-muted); line-height:1.65; font-size:1rem; max-width:64ch;
}
/* content reveals with a short slide+fade. deliberately NOT a height transition —
   ::details-content support is uneven and mis-laid-out the panel mid-open. */
.sp-faq[open] .sp-faq-a{ animation:sp-faq-in .28s cubic-bezier(.21,.7,.25,1) both; }
@keyframes sp-faq-in{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .sp-faq[open] .sp-faq-a{ animation:none; }
  .sp-faq summary::after{ transition:none; }
}

/* ---------- contact (dark) ---------- */

/* ============================================================
   FOOTER — premium, aligned
   ============================================================ */
.sp-footer{
  background:#0e0e0e; color:#b9b9b9;
  border-top:1px solid rgba(255,255,255,.07);
}

/* top grid: brand + link columns */
.sp-footer-inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:2.5rem;
  align-items:start;
}

/* brand */
.sp-foot-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.sp-foot-logo{ display:block; line-height:0; }
.sp-foot-logo img{
  width:124px; height:auto; display:block;
  background:#fff; padding:8px; border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sp-foot-wordmark{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.4rem; color:#fff; }
.sp-footer .sp-foot-tag{ color:#8b8b8b; margin:1rem 0 0; font-size:.92rem; letter-spacing:.01em; }

/* link columns */
.sp-foot-col{ display:flex; flex-direction:column; gap:.7rem; }
.sp-foot-head{
  font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; margin:0 0 .35rem;
}
.sp-foot-col a{
  color:#a8a8a8; text-decoration:none; font-size:.96rem;
  width:fit-content; transition:color .15s ease, transform .15s ease;
}
.sp-foot-col a:hover{ color:var(--sp-yellow); transform:translateX(3px); }

/* "Get in Touch" CTA */
.sp-foot-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.5rem; padding:.72rem 1.4rem;
  font-family:"Space Grotesk", sans-serif; font-weight:600; font-size:.96rem;
  color:var(--sp-dark) !important; text-decoration:none !important;
  background:linear-gradient(135deg, var(--sp-yellow) 0%, #ffd96b 100%);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(255,202,58,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sp-foot-cta svg{ transition:transform .18s ease; }
.sp-foot-cta:hover{
  color:var(--sp-dark) !important; transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(255,202,58,.42); filter:saturate(115%);
}
.sp-foot-cta:hover svg{ transform:translateX(4px); }

/* bottom bar */
.sp-footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  margin-top:2.5rem; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.sp-footer-bottom p{ margin:0; color:#6f6f6f; font-size:.82rem; }

/* brand tagline marquee — "Creative Content Experience" running words */
.sp-marquee{
  overflow:hidden; width:100%;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:1.35rem 0; margin:0 0 2.6rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sp-marquee-track{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:sp-marquee 28s linear infinite; will-change:transform;
}
.sp-marquee:hover .sp-marquee-track{ animation-play-state:paused; }
.sp-marquee-item{
  font-family:"Fraunces", Georgia, serif; font-style:italic; font-weight:500;
  font-size:clamp(1.7rem, 4.2vw, 3.1rem); line-height:1; color:#f2f2f2;
  padding:0 1.4rem;
}
.sp-marquee-item.is-outline{
  color:transparent; -webkit-text-stroke:1px rgba(242,242,242,.5);
}
.sp-marquee-dot{ color:var(--sp-yellow); font-size:1.1rem; transform:translateY(-.15em); }
@keyframes sp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .sp-marquee{ -webkit-mask-image:none; mask-image:none; }
  .sp-marquee-track{ animation:none; justify-content:center; width:100%; }
}

@media (max-width:781px){
  .sp-footer-inner{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
  .sp-foot-brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .sp-footer-inner{ grid-template-columns:1fr; }
  .sp-footer-bottom{ flex-direction:column; align-items:flex-start; }
}



/* Free Reel Idea — the primary conversion section (dark, like #contact) */
.sp-fri-form{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1.05rem; text-align:left; }
.sp-fri-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.sp-fri-field{ display:flex; flex-direction:column; gap:.45rem; }
.sp-fri-field > span{ font-size:.9rem; font-weight:500; color:#e6e6e6; letter-spacing:.01em; }
.sp-fri-field input, .sp-fri-field textarea{
  font:inherit; font-size:1rem; color:#fff; background:#1c1c1c;
  border:1px solid #333; border-radius:12px; padding:.85rem 1rem; width:100%; box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease; resize:vertical;
}
.sp-fri-field input::placeholder, .sp-fri-field textarea::placeholder{ color:#6f6f6f; }
.sp-fri-field input:focus, .sp-fri-field textarea:focus{
  outline:none; border-color:var(--sp-yellow); box-shadow:0 0 0 3px rgba(255,202,58,.18);
}
.sp-fri-submit{
  font:inherit; font-weight:600; font-size:1.05rem; cursor:pointer;
  background:var(--sp-yellow); color:var(--sp-dark); border:0; border-radius:999px;
  padding:1rem 1.9rem; margin-top:.5rem; align-self:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.sp-fri-submit:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,202,58,.28); }
.sp-fri-note{ font-size:.88rem; color:#9a9a9a !important; text-align:center; margin:.2rem 0 0; }
@media (max-width:600px){ .sp-fri-row{ grid-template-columns:1fr; } .sp-fri-submit{ width:100%; } }

/* ---------- why social paradigm (reuses .sp-service-card) ---------- */
/* 6-column track: row 1 = three cards spanning 2, row 2 = two cards spanning 3.
   Both rows fill the full width, so nothing reads as an orphan. */
.sp-why-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; align-items:stretch; }
.sp-why-grid > .sp-service-card{ grid-column:span 2; }
.sp-why-grid > .sp-service-card:nth-child(4),
.sp-why-grid > .sp-service-card:nth-child(5){ grid-column:span 3; }
@media (max-width:980px){
  .sp-why-grid{ grid-template-columns:repeat(2,1fr); }
  .sp-why-grid > .sp-service-card,
  .sp-why-grid > .sp-service-card:nth-child(4),
  .sp-why-grid > .sp-service-card:nth-child(5){ grid-column:span 1; }
  .sp-why-grid > .sp-service-card:nth-child(5){ grid-column:span 2; }
}
@media (max-width:600px){
  .sp-why-grid{ grid-template-columns:1fr; }
  .sp-why-grid > .sp-service-card:nth-child(5){ grid-column:span 1; }
}

/* ---------- not for everyone ---------- */
.sp-nfe-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.75rem; }
.sp-nfe-col{ border:1px solid var(--sp-line); border-radius:20px; padding:2rem 1.9rem; background:#fff; }
.sp-nfe-head{
  font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:1.05rem;
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.6rem;
}
.sp-nfe-head::before{
  content:"\2715"; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:.82rem;
  background:#f3f3f3; color:#8a8a8a;
}
.sp-nfe-yes .sp-nfe-head::before{ content:"\2713"; background:var(--sp-yellow); color:var(--sp-dark); }
.sp-nfe-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.95rem; }
.sp-nfe-list li{ position:relative; padding-left:1.35rem; color:var(--sp-muted); font-size:1rem; line-height:1.55; }
.sp-nfe-list li::before{
  content:""; position:absolute; left:0; top:.62rem;
  width:7px; height:7px; border-radius:50%; background:#dcdcdc;
}
.sp-nfe-yes .sp-nfe-list li::before{ background:var(--sp-yellow); }
.sp-nfe-list strong{ color:var(--sp-dark); font-weight:600; }
.sp-nfe-quote{
  font-family:"Fraunces", Georgia, serif; font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.35; text-align:center;
  max-width:22ch; margin:2.75rem auto 0; padding:0; border:0;
  color:var(--sp-dark);
}
.sp-nfe-quote::before{
  content:""; display:block; width:44px; height:4px; border-radius:3px;
  background:var(--sp-yellow); margin:0 auto 1.25rem;
}

/* two-up proof metrics read bigger than the old four-up */
.sp-stats-2 .sp-stat{ padding-left:1.3rem; }
.sp-stats-2 .sp-stat::before{ top:.55rem; width:6px; height:clamp(1.9rem,4.2vw,2.8rem); }
.sp-stats-2 .sp-stat h3{ font-size:clamp(2.3rem,5.6vw,3.6rem); line-height:1.05; }
.sp-stats-2 .sp-stat p{ font-size:1rem; margin-top:.45rem; }
/* proof bar — the two numbers read as evidence, not a boast, so they sit in
   their own panel with the "where this comes from" line attached. */
.sp-proofbar{
  margin-top:2.6rem;
  background:var(--sp-light); border:1px solid var(--sp-line);
  border-radius:22px; padding:2.2rem 2.4rem 1.9rem;
}
.sp-proofbar .sp-stats{
  border-top:0; padding-top:0; margin-top:0;
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
}
.sp-proofbar .sp-stat h3{ margin:0; }
.sp-proofbar .sp-stat p{ margin:.3rem 0 0; color:var(--sp-muted); font-size:1rem; line-height:1.35; }
/* tabular figures so the counter doesn't jitter the layout while it runs */
.sp-count{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.sp-stat-note{ font-size:.9rem !important; color:var(--sp-muted); margin-top:.5rem !important; max-width:34ch; line-height:1.55; }
.sp-stats-proof{
  font-size:.9rem; color:var(--sp-muted); line-height:1.55;
  margin:1.7rem 0 0; padding-top:1.4rem; border-top:1px solid var(--sp-line);
}
@media (max-width:600px){
  .sp-proofbar{ padding:1.7rem 1.4rem 1.5rem; border-radius:18px; }
  .sp-proofbar .sp-stats{ gap:1.6rem; }
}
/* the notes wrap to 6+ lines in two narrow columns, so stack them on phones */
@media (max-width:480px){
  .sp-proofbar .sp-stats{ grid-template-columns:1fr; gap:1.5rem; }
  .sp-stat-note{ max-width:none; }
}

/* ---------- theme toggle ---------- */
.sp-theme-toggle{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--sp-line); background:#fff;
  font-size:1.05rem; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.sp-theme-toggle:hover{ transform:translateY(-2px); border-color:var(--sp-yellow); }

/* ---------- responsive ---------- */
@media (max-width:781px){
  .sp-photo-frame{ max-width:360px; margin:0 auto; }
  .sp-hero::before{ display:none; }
}

/* ============================================================
   DARK MODE  (html[data-theme="dark"])
   ============================================================ */
html[data-theme="dark"] body{ background:#0f0f0f; color:#e8e8e8; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5{ color:#f4f4f4; }

/* light-background sections (what-i-do, portfolio, reviews) */
html[data-theme="dark"] .has-light-background-color{ background:#141414 !important; }

/* hero */
html[data-theme="dark"] .sp-hero{ background:#0f0f0f; }
html[data-theme="dark"] .sp-hero::before{ background:#171717; }
html[data-theme="dark"] .sp-hero .sp-sub{ color:#a7a7a7; }

/* header / nav */
html[data-theme="dark"] .sp-header{ background:rgba(15,15,15,.86); border-bottom-color:#262626; }
html[data-theme="dark"] .sp-header .wp-block-site-title a{ color:#f4f4f4; }
html[data-theme="dark"] .sp-header .wp-block-navigation a{ color:#dcdcdc; }
html[data-theme="dark"] .sp-header .wp-block-navigation a:hover{ color:#fff; }

/* stats */
html[data-theme="dark"] .sp-stats{ border-top-color:#262626; }
html[data-theme="dark"] .sp-stat h3{ color:#f4f4f4; }

/* service cards */
html[data-theme="dark"] .sp-service-card{ background:#181818; border-color:#272727; }
html[data-theme="dark"] .sp-service-card:hover{ box-shadow:0 22px 46px rgba(0,0,0,.55); }

/* reviews */
html[data-theme="dark"] .sp-review{ background:#1b1b1b; border-color:#2a2a2a; }
html[data-theme="dark"] .sp-review .sp-quote{ color:#e2e2e2; }
html[data-theme="dark"] .sp-review-name{ color:#f4f4f4; }

/* faq */
html[data-theme="dark"] .sp-faq{ background:#181818; border-color:#272727; }
html[data-theme="dark"] .sp-faq summary{ color:#f1f1f1; }
html[data-theme="dark"] .sp-faq[open]{ box-shadow:0 14px 34px rgba(0,0,0,.5); }

/* generic muted inline paragraphs stay legible */
html[data-theme="dark"] p[style*="#6e6e6e"]{ color:#9b9b9b !important; }

/* toggle button surface */
html[data-theme="dark"] .sp-theme-toggle{ background:#1c1c1c; border-color:#333; }

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */
@media (max-width:600px){
  .sp-section-pad{ padding-top:3rem; padding-bottom:3rem; }
  .sp-hero h1{ font-size:clamp(2rem, 8.5vw, 2.6rem); }
  .sp-hero .sp-sub{ max-width:none; }
  /* stats as a tidy 2x2 grid instead of a tall stack */
  .sp-stats{ display:grid !important; grid-template-columns:1fr 1fr; gap:1.5rem 1rem; padding-top:2rem; }
  .sp-stats > .sp-stat{ flex-basis:auto !important; }
  .sp-stat{ padding-left:.8rem; }
  .sp-stat h3{ font-size:1.6rem; }
  /* keep the header compact */
  .sp-header .wp-block-button__link{ padding-left:1.05rem; padding-right:1.05rem; font-size:.92rem; }
  .sp-header .wp-block-site-logo img{ padding:4px; }
}

/* tablet header: collapse the nav to a hamburger (kept on the right) */
@media (min-width:601px) and (max-width:900px){
  .sp-header .alignwide{ flex-wrap:nowrap !important; justify-content:flex-end; gap:1rem; }
  .sp-header .wp-block-site-logo{ margin-right:auto; }
  .sp-header .wp-block-navigation__responsive-container-open{ display:flex !important; }
  .sp-header .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; }
}

/* ============================================================
   PREMIUM MOTION  (disabled when the user prefers reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .sp-reveal{
    opacity:0; transform:translateY(24px);
    transition:opacity .75s cubic-bezier(.21,.7,.25,1), transform .75s cubic-bezier(.21,.7,.25,1);
  }
  .sp-reveal.sp-in{ opacity:1; transform:none; }

  /* hero entrance — pure CSS so it animates from first paint (no flash) */
  .sp-hero .sp-eyebrow, .sp-hero h1, .sp-hero .sp-sub,
  .sp-hero .wp-block-buttons, .sp-hero .sp-photo-frame, .sp-stats{
    animation:sp-rise .85s cubic-bezier(.21,.7,.25,1) both;
  }
  .sp-hero h1{ animation-delay:.08s; }
  .sp-hero .sp-sub{ animation-delay:.16s; }
  .sp-hero .wp-block-buttons{ animation-delay:.24s; }
  .sp-hero .sp-photo-frame{ animation-delay:.32s; }
  .sp-stats{ animation-delay:.42s; }
  @keyframes sp-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

  /* gentle float on the hero portrait */
  .sp-photo-frame img{ animation:sp-float 7s ease-in-out infinite; }
  @keyframes sp-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

}

/* ============================================================
   PREMIUM INTERACTIONS  (v1.7.0) — additive only, theme unchanged
   ============================================================ */

/* buttons — light sheen sweeps across on hover */
.wp-element-button{ position:relative; overflow:hidden; }
.wp-element-button::after{
  content:""; position:absolute; top:0; bottom:0; left:-130%; width:55%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .6s cubic-bezier(.4,0,.2,1);
}
.wp-element-button:hover::after{ left:160%; }
.is-style-outline .wp-element-button::after{ opacity:.5; }

/* service cards — top accent bar grows in on hover */
.sp-service-card{ position:relative; overflow:hidden; }
.sp-service-card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:var(--sp-yellow); transition:width .35s cubic-bezier(.21,.7,.25,1);
}
.sp-service-card:hover::after{ width:100%; }
.sp-service-num{ transition:letter-spacing .3s ease; }
.sp-service-card:hover .sp-service-num{ letter-spacing:.05em; }

/* review cards — lift + yellow edge */
.sp-review{ transition:transform .25s cubic-bezier(.21,.7,.25,1), box-shadow .25s ease, border-color .25s ease; }
.sp-review:hover{ transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.1); border-color:var(--sp-yellow); }
html[data-theme="dark"] .sp-review:hover{ box-shadow:0 24px 48px rgba(0,0,0,.55); }

/* personal photo — gentle zoom on hover */
.sp-personal-photo img{ transition:transform .5s cubic-bezier(.21,.7,.25,1), box-shadow .5s ease; }
.sp-personal-photo:hover img{ transform:scale(1.02); box-shadow:0 30px 60px rgba(0,0,0,.22); }

/* reels — gallery focus: hovering one dims the rest, hovered one pops */
.sp-reel-scroller{ padding-top:2rem; padding-bottom:1.25rem; }
.sp-reel-vid{ transition:transform .35s cubic-bezier(.21,.7,.25,1), box-shadow .35s ease, opacity .35s ease, filter .35s ease; }
@media (hover:hover){
  .sp-reel-scroller:hover .sp-reel-vid{ opacity:.5; transform:scale(.97); filter:saturate(.92); }
  .sp-reel-scroller .sp-reel-vid:hover{ opacity:1; transform:scale(1.02); filter:none; box-shadow:0 28px 64px rgba(0,0,0,.42); }
}

/* first reel = your featured work — yellow ring + gentle pulse */
.sp-reel-scroller .sp-reel-vid:first-child{ box-shadow:0 16px 38px rgba(0,0,0,.22), 0 0 0 3px rgba(255,202,58,.85); }
@media (prefers-reduced-motion: no-preference){
  .sp-reel-scroller .sp-reel-vid:first-child{ animation:sp-feature 3s ease-in-out infinite; }
  @keyframes sp-feature{
    0%,100%{ box-shadow:0 16px 38px rgba(0,0,0,.22), 0 0 0 3px rgba(255,202,58,.85); }
    50%{ box-shadow:0 22px 50px rgba(0,0,0,.3), 0 0 0 6px rgba(255,202,58,.4); }
  }
}
@media (hover:hover){
  .sp-reel-scroller:hover .sp-reel-vid:first-child{ animation:none; }
}

/* ============================================================
   OFFER POPUP  (appears 10s after load — see functions.php)
   ============================================================ */
.sp-offer{
  position:fixed; z-index:1000; right:24px; bottom:96px;
  width:340px; max-width:calc(100vw - 32px);
  background:#161616; color:#fff;
  border:1px solid rgba(255,255,255,.1); border-radius:18px;
  padding:1.5rem 1.5rem 1.6rem;
  box-shadow:0 28px 64px rgba(0,0,0,.45);
  opacity:0; transform:translateY(26px) scale(.96); transform-origin:bottom right;
  transition:opacity .5s cubic-bezier(.21,.7,.25,1), transform .5s cubic-bezier(.21,.7,.25,1);
  pointer-events:none;
}
.sp-offer.sp-offer-show{ opacity:1; transform:none; pointer-events:auto; }
.sp-offer::before{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,202,58,.16), transparent 55%);
}
.sp-offer > *{ position:relative; }
.sp-offer-badge{
  display:inline-block; background:var(--sp-yellow); color:var(--sp-dark);
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.32rem .65rem; border-radius:999px;
}
.sp-offer-title{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.25rem;
  color:#fff; margin:.8rem 0 .45rem; line-height:1.2;
}
.sp-offer-text{ color:#bdbdbd; font-size:.92rem; line-height:1.55; margin:0 0 1.15rem; }
.sp-offer-cta{
  display:inline-flex; align-items:center; gap:.45rem;
  background:linear-gradient(135deg, var(--sp-yellow) 0%, #ffd96b 100%);
  color:var(--sp-dark) !important; text-decoration:none !important;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.95rem;
  padding:.72rem 1.35rem; border-radius:999px;
  box-shadow:0 10px 24px rgba(255,202,58,.3);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sp-offer-cta svg{ transition:transform .18s ease; }
.sp-offer-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(255,202,58,.45); filter:saturate(115%); }
.sp-offer-cta:hover svg{ transform:translateX(3px); }
.sp-offer-close{
  position:absolute; top:10px; right:12px; width:30px; height:30px;
  border:none; background:transparent; color:#8a8a8a; cursor:pointer;
  font-size:1.5rem; line-height:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, background .15s ease;
}
.sp-offer-close:hover{ color:#fff; background:rgba(255,255,255,.08); }
@media (max-width:900px){
  .sp-offer{
    /* sits above the sticky CTA bar; --sp-bar-h only exists on the experience page,
       so every other page falls back to clearing the WhatsApp FAB at 84px */
    right:12px; left:12px; bottom:calc(var(--sp-bar-h, 84px) + .6rem); width:auto; max-width:none;
    transform-origin:bottom center; transform:translateY(120%);
  }
  .sp-offer.sp-offer-show{ transform:none; }
  /* the popup and the bar say the same thing, so never both at once */
  body:has(.sp-offer.sp-offer-show) .sp-x-ctabar,
  body:has(.sp-x-field :focus) .sp-x-ctabar{ transform:translateY(115%) !important; }
}
@media (prefers-reduced-motion: reduce){
  .sp-offer{ transition:opacity .25s ease; transform:none; }
  .sp-offer.sp-offer-show{ transform:none; }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON  (bottom-right; offer popup stacks above it)
   ============================================================ */
.sp-wa-fab{
  position:fixed; z-index:1000; right:24px; bottom:24px;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff !important;
  box-shadow:0 10px 26px rgba(37,211,102,.4), 0 4px 12px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sp-wa-fab:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 34px rgba(37,211,102,.5), 0 6px 16px rgba(0,0,0,.22);
}
@media (max-width:900px){
  .sp-wa-fab{ right:14px; bottom:14px; width:52px; height:52px; }
}
@media (prefers-reduced-motion: reduce){
  .sp-wa-fab, .sp-wa-fab:hover{ transform:none; }
}

/* new sections — dark mode */
html[data-theme="dark"] .sp-nfe-col{ background:#181818; border-color:#272727; }
html[data-theme="dark"] .sp-nfe-head{ color:#f1f1f1; }
html[data-theme="dark"] .sp-nfe-head::before{ background:#242424; color:#8a8a8a; }
html[data-theme="dark"] .sp-nfe-list li{ color:#a8a8a8; }
html[data-theme="dark"] .sp-nfe-list strong{ color:#f1f1f1; }
html[data-theme="dark"] .sp-nfe-list li::before{ background:#3a3a3a; }
html[data-theme="dark"] .sp-nfe-quote{ color:#f4f4f4; }

html[data-theme="dark"] .sp-faq:hover{ border-color:#333; }
html[data-theme="dark"] .sp-faq summary::after{ background:#202020; border-color:#333; color:#f1f1f1; }
html[data-theme="dark"] .sp-faq:hover summary::after{ background:#2e2e2e; border-color:#3d3d3d; }
html[data-theme="dark"] .sp-faq[open] summary::after{ background:var(--sp-yellow); border-color:var(--sp-yellow); color:var(--sp-dark); }
html[data-theme="dark"] .sp-stat-note, html[data-theme="dark"] .sp-stats-proof, html[data-theme="dark"] .sp-scroll-hint{ color:#9a9a9a !important; }
html[data-theme="dark"] .sp-proofbar{ background:#181818; border-color:#272727; }
html[data-theme="dark"] .sp-stats-proof{ border-top-color:#272727; }


/* ============================================================
   3D LAYER (v1.15.0)
   Depth + scroll-driven motion with CSS perspective/transforms only.
   ponytail: no three.js / GSAP — a WebGL canvas would be ~600KB, need a
   build step and fight the block theme. Everything here is GPU-composited
   and falls back to the flat v1.14 site when unsupported. Upgrade to
   three.js only if a real 3D *model* is ever needed, not for depth.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* ---------- hero: the portrait sits on a 3D stage ---------- */
  .sp-hero{ perspective:1500px; perspective-origin:65% 45%; }
  .sp-photo-frame figure{
    /* z-index:2 was on the <img>; the figure is a stacking context now that it
       has a transform, so it has to carry that z itself or the yellow blob
       (.sp-photo-frame::before, z-index:1) paints over the portrait. */
    position:relative; z-index:2; transform-style:preserve-3d;
    transform:rotateY(var(--sp-rx,0deg)) rotateX(calc(var(--sp-ry,0deg) * -1));
    transition:transform .5s cubic-bezier(.21,.7,.25,1);
  }
  /* two panels floating at different depths — the "content stack" motif */
  .sp-photo-frame figure::before,
  .sp-photo-frame figure::after{
    content:""; position:absolute; border-radius:16px; pointer-events:none;
  }
  .sp-photo-frame figure::before{      /* yellow reel card, in front-left */
    left:-11%; top:14%; width:30%; aspect-ratio:9/16; z-index:4;
    background:linear-gradient(155deg,var(--sp-yellow),var(--sp-yellow-soft));
    box-shadow:0 26px 52px rgba(0,0,0,.22);
    transform:translateZ(85px) rotateY(19deg) rotateZ(-7deg);
    animation:sp-drift-a 9s ease-in-out infinite;
  }
  .sp-photo-frame figure::after{       /* dark card, set back behind-right */
    right:-11%; bottom:9%; width:26%; aspect-ratio:9/16; z-index:0;
    background:linear-gradient(155deg,var(--sp-dark),#3a3a3a);
    box-shadow:0 20px 44px rgba(0,0,0,.28);
    transform:translateZ(-70px) rotateY(-17deg) rotateZ(6deg);
    animation:sp-drift-b 11s ease-in-out infinite;
  }
  @keyframes sp-drift-a{
    0%,100%{ transform:translateZ(85px) rotateY(19deg) rotateZ(-7deg) translateY(0); }
    50%    { transform:translateZ(105px) rotateY(13deg) rotateZ(-4deg) translateY(-16px); }
  }
  @keyframes sp-drift-b{
    0%,100%{ transform:translateZ(-70px) rotateY(-17deg) rotateZ(6deg) translateY(0); }
    50%    { transform:translateZ(-50px) rotateY(-11deg) rotateZ(3deg) translateY(13px); }
  }
  @media (max-width:781px){
    .sp-photo-frame figure::before, .sp-photo-frame figure::after{ display:none; }
  }

  /* ---------- cards tilt toward the cursor and lift off the page ---------- */
  .sp-services-grid, .sp-why-grid, .sp-nfe-cols, .sp-faq-list{ perspective:1300px; }
  .sp-service-card, .sp-nfe-col{ transform-style:preserve-3d; }
  .sp-service-card:hover{
    transform:translateY(-6px) translateZ(30px)
              rotateY(var(--sp-rx,0deg)) rotateX(calc(var(--sp-ry,0deg) * -1));
    box-shadow:0 34px 64px rgba(0,0,0,.14);
  }
  .sp-nfe-col{ transition:transform .3s cubic-bezier(.21,.7,.25,1), box-shadow .3s ease; }
  .sp-nfe-col:hover{
    transform:translateZ(24px) rotateY(var(--sp-rx,0deg)) rotateX(calc(var(--sp-ry,0deg) * -1));
    box-shadow:0 30px 58px rgba(0,0,0,.12);
  }
  /* card contents ride above the surface so the depth is real, not painted */
  .sp-service-card h3, .sp-service-card .sp-service-num{
    transition:transform .3s cubic-bezier(.21,.7,.25,1);
  }
  .sp-service-card:hover h3{ transform:translateZ(34px); }
  .sp-service-card:hover .sp-service-num{ transform:translateZ(52px); }

  /* ---------- work: the reels ride a 3D coverflow rail ---------- */
  .sp-reel-scroller{ perspective:1700px; perspective-origin:50% 42%; padding-block:2.4rem 1.4rem; }
  .sp-reel-vid{ transition:box-shadow .3s ease, transform .4s cubic-bezier(.21,.7,.25,1); }
  .sp-reel-vid:hover{ box-shadow:0 30px 70px rgba(0,0,0,.4); }

  /* ---------- proof bar: a growth chart rises on a 3D floor ---------- */
  .sp-proofbar{ position:relative; overflow:hidden; perspective:900px; }
  .sp-proofbar::after{
    content:""; position:absolute; right:2rem; bottom:1.2rem; width:230px; height:120px;
    pointer-events:none; opacity:.5; z-index:0;
    background:repeating-linear-gradient(90deg,var(--sp-yellow) 0 30px,transparent 30px 46px);
    /* rising staircase — the bars get taller left to right */
    clip-path:polygon(0 100%,0 82%,20% 82%,20% 62%,40% 62%,40% 40%,60% 40%,60% 20%,80% 20%,80% 0,100% 0,100% 100%);
    transform:rotateX(34deg) scaleY(var(--sp-grow,1));
    transform-origin:bottom;
  }
  .sp-proofbar > *{ position:relative; z-index:1; }

  /* ---------- scroll-driven 3D (native timelines, zero JS) ----------
     Where the browser supports scroll/view timelines the whole page
     animates off the scrollbar. Everywhere else the IntersectionObserver
     reveal in functions.php still runs — it checks the same @supports. */
  @supports (animation-timeline: view()){

    /* sections rotate up into place instead of just fading */
    .sp-section-pad:not(#home) h2,
    .sp-section-pad:not(#home) .sp-eyebrow,
    .sp-services-grid > .sp-service-card,
    .sp-why-grid > .sp-service-card,
    .sp-nfe-cols > .sp-nfe-col,
    .sp-faq-list > .sp-faq,
    .sp-nfe-quote, .sp-fri-form,
    #personal figure,
    .sp-section-pad:not(#home) .wp-block-buttons{
      animation:sp-3d-in linear both;
      animation-timeline:view();
      animation-range:entry 6% entry 62%;
    }
    @keyframes sp-3d-in{
      from{ opacity:0; transform:perspective(1100px) translateY(34px) translateZ(-90px) rotateX(15deg); }
      to  { opacity:1; transform:perspective(1100px) translateY(0) translateZ(0) rotateX(0); }
    }
    /* stagger across a row so a grid doesn't land as one slab */
    .sp-services-grid > .sp-service-card:nth-child(2n),
    .sp-why-grid > .sp-service-card:nth-child(2n),
    .sp-faq-list > .sp-faq:nth-child(2n){ animation-range:entry 10% entry 70%; }
    .sp-services-grid > .sp-service-card:nth-child(3n),
    .sp-why-grid > .sp-service-card:nth-child(3n){ animation-range:entry 14% entry 78%; }

    /* the coverflow: each reel turns as it crosses the scroller */
    .sp-reel-vid{
      animation:sp-coverflow linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% exit 100%;
    }
    /* the first reel also carries the featured-ring pulse (0,3,0 specificity
       beats .sp-reel-vid and `animation` is a shorthand) — run both timelines */
    .sp-reel-scroller .sp-reel-vid:first-child{
      animation:sp-coverflow linear both, sp-feature 3s ease-in-out infinite;
      animation-timeline:view(inline), auto;
      animation-range:entry 0% exit 100%, normal;
    }
    @keyframes sp-coverflow{
      0%  { transform:rotateY(34deg)  translateZ(-90px) scale(.88); opacity:.62; }
      50% { transform:rotateY(0deg)   translateZ(40px)  scale(1);   opacity:1; }
      100%{ transform:rotateY(-34deg) translateZ(-90px) scale(.88); opacity:.62; }
    }

    /* growth bars grow as the proof bar scrolls into view */
    .sp-proofbar::after{
      animation:sp-grow linear both;
      animation-timeline:view();
      animation-range:entry 20% cover 40%;
    }
    @keyframes sp-grow{
      from{ transform:rotateX(34deg) scaleY(0); opacity:0; }
      to  { transform:rotateX(34deg) scaleY(1); opacity:.5; }
    }

    /* hero portrait recedes on a Z axis as you scroll past it */
    .sp-photo-frame{
      animation:sp-hero-depth linear both;
      animation-timeline:view();
      animation-range:cover 30% cover 100%;
    }
    @keyframes sp-hero-depth{
      from{ transform:perspective(1500px) translateZ(0) rotateX(0); }
      to  { transform:perspective(1500px) translateZ(-160px) rotateX(9deg); opacity:.55; }
    }
  }
}

/* ============================================================
   MOBILE TAP TARGETS  (44px floor)
   ============================================================ */
@media (max-width:600px){
  .sp-foot-head{ font-size:.8rem; }
  .sp-foot-col{ gap:.1rem; }
  .sp-foot-col a{ min-height:44px; min-width:44px; display:flex; align-items:center; font-size:1rem; }
  .sp-header .wp-block-navigation__responsive-container-open{
    min-width:44px; min-height:44px; padding:10px;
  }
  .sp-offer-badge{ font-size:.72rem; }
}

/* ============================================================
   MOBILE MENU  — core's overlay, wearing this site's clothes
   ------------------------------------------------------------
   Core ships the scroll lock, dialog semantics, focus handling and
   the close button, so this styles that overlay rather than
   replacing it — and the links stay in parts/header.html, one copy.
   The two block attributes (overlayBackgroundColor/TextColor) are
   what stop core's `:not(.has-background) … {background:#fff}` from
   painting a white sheet over a black site.
   ============================================================ */

/* The theme's own header link colour (0,3,1) beats core's :where() reset (0,0,1),
   which is what actually made the overlay links black. This is a state override
   on third-party markup; matching it by specificity needs a 5-class selector. */
.wp-block-navigation__responsive-container.is-menu-open a{ color:inherit !important; }

.wp-block-navigation__responsive-container.is-menu-open{
  padding-top:calc(clamp(2rem, 8vh, 6rem) + env(safe-area-inset-top));
  padding-bottom:calc(clamp(2rem, 8vh, 6rem) + env(safe-area-inset-bottom));
  padding-left:max(1.5rem, env(safe-area-inset-left));
  padding-right:max(1.5rem, env(safe-area-inset-right));
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
/* core's close-wrapper and dialog are auto-height blocks, so the link list sat in
   a 285px band at the top of an 844px sheet. Make the chain fill, then centre. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
  flex:1; display:flex; flex-direction:column; min-height:0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  flex:1; justify-content:center; gap:.1rem;
}
.wp-block-navigation__responsive-container.is-menu-open a{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.9rem, 9vw, 2.6rem); line-height:1.15;
  min-height:56px; display:flex; align-items:center;
}
.wp-block-navigation__responsive-container.is-menu-open a:active{ color:var(--sp-yellow) !important; }
.wp-block-navigation__responsive-container-close{ min-width:44px; min-height:44px; }

/* backdrop-filter on the sticky header creates a CONTAINING BLOCK for fixed
   descendants, so core's `position:fixed; inset:0` overlay resolved against the
   header's box and the sheet was clipped to a ~400px band. Drop the filter (and
   the stacking context) while the menu is open and it becomes a true full-screen
   sheet again. */
html.has-modal-open body.sp-x .sp-header{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  position:static; z-index:auto;
}

/* The same stacking context trapped the overlay's z-index:100000 at the header's
   40 — the FAB, the offer popup and the progress hairline painted OVER the menu. */
html.has-modal-open .sp-offer,
html.has-modal-open .sp-x-ctabar,
html.has-modal-open .sp-x-rail,
html.has-modal-open .sp-wa-fab{ display:none !important; }

/* ---- the WhatsApp button docks onto the CTA bar on mobile ---- */
@media (max-width:900px){
  body.sp-x .sp-wa-fab{
    width:46px; height:46px; box-shadow:none;
    right:max(.9rem, env(safe-area-inset-right));
    bottom:calc(.62rem + env(safe-area-inset-bottom));
    z-index:1000;
  }
  /* tier 3 keeps the bar up permanently, so the footer needs the clearance */
  body.sp-x .sp-footer{ padding-bottom:calc(var(--sp-bar-h, 4rem) + 1rem); }
}

/* Skip the footer's layout and paint (and its 28s marquee) until it's near the
   viewport — on a 10,000px document that is most of the session. */
body.sp-x .sp-footer{ content-visibility:auto; contain-intrinsic-size:auto 900px; }