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

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Fraunces:ital,wght@0,500;1,400;1,500;1,600&display=swap');

: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; }

/* ---------- every saturday (dark) ---------- */
#every-saturday{ background:var(--sp-dark); color:#fff; }
#every-saturday .sp-eyebrow{ color:var(--sp-yellow); }
#every-saturday h2{ color:#fff; font-size:clamp(2rem,4.5vw,3.4rem); }
#every-saturday .sp-sat-sub{ color:var(--sp-yellow); font-size:clamp(1.2rem,2.4vw,1.8rem); font-weight:500; }
#every-saturday p{ color:#cfcfcf; }

/* ---------- 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-reviews-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem; align-items:stretch;
}
.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; }

/* ---------- faq ---------- */
.sp-faq-list{ max-width:760px; margin:0 auto; }
.sp-faq{ border:1px solid var(--sp-line); border-radius:14px; background:#fff; margin-bottom:.9rem; overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; }
.sp-faq[open]{ box-shadow:0 14px 34px rgba(0,0,0,.07); border-color:transparent; }
.sp-faq summary{ cursor:pointer; list-style:none; padding:1.15rem 1.35rem; font-family:"Space Grotesk", sans-serif; font-weight:600; font-size:1.04rem; color:var(--sp-dark); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.sp-faq summary::-webkit-details-marker{ display:none; }
.sp-faq summary::after{ content:"+"; color:var(--sp-yellow); font-size:1.7rem; line-height:1; font-weight:400; transition:transform .25s ease; }
.sp-faq[open] summary::after{ transform:rotate(45deg); }
.sp-faq-a{ padding:0 1.35rem 1.25rem; color:var(--sp-muted); line-height:1.6; }

/* ---------- contact (dark) ---------- */
#contact{ background:var(--sp-dark); color:#fff; }
#contact h2{ color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); }
#contact p{ color:#cfcfcf; }

/* ============================================================
   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; }
}

/* ---------- every saturday (premium, centered) ---------- */
.sp-es-stack{ text-align:center; }
.sp-es-logo{ margin:0 auto !important; }
.sp-es-logo img{
  width:min(560px,86%); height:auto;
  filter:drop-shadow(0 0 64px rgba(255,138,196,.38)) drop-shadow(0 20px 46px rgba(0,0,0,.45));
}
.sp-es-body{ color:#bcbcbc !important; font-size:1.08rem; max-width:58ch; margin-left:auto; margin-right:auto; }

/* lazy-loaded calendly embed */
.sp-calendly{ border-radius:14px; overflow:hidden; }
.sp-cal-loading{ display:flex; align-items:center; justify-content:center; gap:.55rem; height:100%; min-height:420px; padding:1rem; color:#cfcfcf; font-size:.98rem; background:#141414; border:1px solid #2a2a2a; border-radius:14px; }
.sp-cal-loading a{ color:var(--sp-yellow); text-decoration:none; }
.sp-cal-loading a:hover{ text-decoration:underline; }
.sp-cal-spinner{ width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:var(--sp-yellow); border-radius:50%; display:inline-block; animation:sp-spin .8s linear infinite; }
@keyframes sp-spin{ to{ transform:rotate(360deg); } }

/* ---------- 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; }
  .sp-es-body{ font-size:1rem; }
}

/* tablet header: collapse the nav to a hamburger (kept on the right) */
@media (min-width:601px) and (max-width:880px){
  .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); } }

  /* soft pulse on the Every Saturday glow */
  .sp-es-logo img{ animation:sp-glow 5.5s ease-in-out infinite; }
  @keyframes sp-glow{
    0%,100%{ filter:drop-shadow(0 0 64px rgba(255,138,196,.38)) drop-shadow(0 20px 46px rgba(0,0,0,.45)); }
    50%{ filter:drop-shadow(0 0 92px rgba(255,138,196,.6)) drop-shadow(0 20px 46px rgba(0,0,0,.45)); }
  }
}

/* ============================================================
   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:24px;
  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:600px){
  .sp-offer{
    right:12px; left:12px; bottom:12px; width:auto; max-width:none;
    transform-origin:bottom center; transform:translateY(120%);
  }
  .sp-offer.sp-offer-show{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .sp-offer{ transition:opacity .25s ease; transform:none; }
  .sp-offer.sp-offer-show{ transform:none; }
}