/* ============================================================================
   SPAROW — Mobile-first responsive layer  (v2.1.8)
   ----------------------------------------------------------------------------
   Loaded LAST, after sparow-ssr.css. Changes NO markup, ACF wiring, or SEO
   fallback — only re-sizes / re-spaces / re-flows the existing HTML.

   ARCHITECTURE (fixed in 2.1.8)
   -----------------------------
   Base visual values live in each element's INLINE style (the full bento grid:
   repeat(6,1fr), grid-column:span 4, section padding:148px 24px 80px, etc).
   Inline styles have very high precedence, so the ONLY safe way to restyle for
   phones without breaking the desktop bento is to put every override INSIDE a
   max-width media query. Above the phone/tablet breakpoints these rules simply
   do not exist, so the original inline bento layout applies verbatim on laptop
   / desktop / ultra-wide. No revert-layer, no undo-the-!important games (that
   was the 2.1.7 bug that flattened the laptop grid).

   Breakpoints
   -----------
     <= 640px   phone     (bento -> single column)
     <= 980px   tablet    (bento -> 2 columns, spacing eased)
     >= 981px   UNTOUCHED -> original inline bento design
   Plus min-width-only ultra-wide framing that widens the container without ever
   altering the grid template.
   ========================================================================== */


/* ---- A. BACKGROUND: off below laptop for speed, kept on desktop --------- */
@media (max-width:980px){
  #sp-bg{ background:linear-gradient(180deg,#eaf2fe 0%,#e3edfd 55%,#eaf2fe 100%); }
  #sp-bg > *{ animation:none !important; filter:none !important; opacity:0 !important; }
}

/* touch: drop hover-only light sweeps (composite cost, no benefit) */
@media (hover:none){
  .sp-glass::after,.sp-card::after,.sp-btn::before{ display:none; }
  .sp-card{ transition:box-shadow .3s ease; }
}

/* reduced motion everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  #sp-bg > *{ opacity:0 !important; }
}


/* =====================  TABLET AND BELOW  (<= 980px)  ==================== */
@media (max-width:980px){

  html{ -webkit-text-size-adjust:100%; }

  /* section wrappers: ease desktop 148/24/80 + big gaps */
  [style*="148px 24px 80px"]{ padding:112px 28px 56px !important; gap:52px !important; }

  /* BENTO -> 2 columns (still a bento grid) */
  [data-bento]{ grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }
  [data-bento] > .sp-reveal:first-child,
  [data-bento] > [style*="span 4"],
  [data-bento] > [style*="span 6"]{ grid-column:1 / -1 !important; }
  [data-bento] > [style*="span 3"],
  [data-bento] > [style*="span 2"]{ grid-column:span 1 !important; }

  /* other grids */
  [data-2col="1"]{ grid-template-columns:1fr 1fr !important; gap:26px !important; }
  [data-footgrid="1"]{ grid-template-columns:1fr 1fr 1fr !important; gap:30px 24px !important; }
  [data-footgrid="1"] > div:first-child{ grid-column:1 / -1 !important; }
  [data-statgrid="1"]{ grid-template-columns:repeat(4,1fr) !important; gap:12px !important; }
  [data-tcols="1"]{ grid-template-columns:1fr 1fr !important; }
  [data-faqcols="1"]{ grid-template-columns:1fr !important; }

  /* 4-across step rail -> 2-up, connectors off */
  [data-stepwrap="1"]{ flex-wrap:wrap !important; gap:24px 0 !important; }
  [data-stepwrap="1"] > div:not([data-stepcon]){ flex:0 0 50% !important; }
  [data-stepcon]{ display:none !important; }

  /* header logo sized for desktop two-row bar -> right-size it */
  #sp-nav img, #sp-nav-seo img{ height:84px !important; margin:-16px 0 !important; }
  #sp-nav > div:first-child, #sp-nav-seo > div:first-child{ padding:8px 24px !important; }
}


/* =========================  PHONE  (<= 640px)  ========================== */
@media (max-width:640px){

  [style*="148px 24px 80px"]{ padding:92px 18px 44px !important; gap:38px !important; }

  /* BENTO -> single column (1-col bento; tiles keep card treatment) */
  [data-bento]{ grid-template-columns:1fr !important; gap:14px !important; }
  [data-bento] > *{ grid-column:1 / -1 !important; }

  /* hero: tighter box + fluid headline */
  [data-bento] > .sp-reveal:first-child{ padding:28px 20px !important; border-radius:22px !important; }
  [data-bento] h1{ font-size:clamp(29px,7.6vw,44px) !important; line-height:1.07 !important; }
  [data-bento] h1 + p,
  [data-bento] p[style*="max-width:580px"]{ font-size:clamp(15px,3.7vw,17px) !important; line-height:1.6 !important; }
  [data-bento] [style*="border-top:1px solid rgba(255,255,255,0.12)"]{
    gap:18px 26px !important; margin-top:24px !important; padding-top:20px !important;
  }
  [data-bento] button[type="submit"].sp-btn{ width:100%; justify-content:center !important; font-size:16px !important; padding:15px 24px !important; }

  /* other grids collapse */
  [data-2col="1"]{ grid-template-columns:1fr !important; gap:22px !important; }
  [data-footgrid="1"]{ grid-template-columns:1fr 1fr !important; gap:26px 22px !important; }
  [data-statgrid="1"]{ grid-template-columns:1fr 1fr !important; gap:16px 12px !important; }
  [data-tcols="1"]{ grid-template-columns:1fr !important; }
  [data-stepwrap="1"] > div:not([data-stepcon]){ flex:0 0 100% !important; }

  /* auto-fill card grids -> single comfy column */
  [style*="minmax(200px,1fr)"],
  [style*="minmax(280px,1fr)"]{ grid-template-columns:1fr !important; }

  /* softer card shadows on phone GPUs */
  .sp-card{ box-shadow:0 16px 34px -24px rgba(18,46,92,0.24),inset 0 1px 0 rgba(255,255,255,0.9) !important; }

  /* compact header */
  #sp-nav img, #sp-nav-seo img{ height:62px !important; margin:-8px 0 !important; }
  #sp-nav > div:first-child, #sp-nav-seo > div:first-child{ padding:8px 16px !important; }

  /* article + images */
  .sp-article{ font-size:16px; line-height:1.7; }
  .sp-article h2{ margin-top:26px !important; }
  .sp-hwrap img, .sp-hzoom{ width:100% !important; height:auto !important; }
}


/* =====================  MOBILE NAV MENU  (<= 980px)  ===================
   Only touches #sp-mobile / #sp-burger — never the bento grid — so the laptop
   layout is unaffected. Smooth slide/fade instead of the instant display snap. */
@media (max-width:980px){
  #sp-mobile{
    display:flex !important;
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .28s cubic-bezier(.16,1,.3,1),
               transform .32s cubic-bezier(.16,1,.3,1),
               visibility .28s;
    will-change:opacity,transform;
  }
  #sp-mobile.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  #sp-mobile.open > a,
  #sp-mobile.open > div{ animation:spMobIn .4s cubic-bezier(.16,1,.3,1) both; }
  #sp-mobile.open > *:nth-child(2){ animation-delay:.03s; }
  #sp-mobile.open > *:nth-child(3){ animation-delay:.06s; }
  #sp-mobile.open > *:nth-child(4){ animation-delay:.09s; }
  #sp-mobile.open > *:nth-child(5){ animation-delay:.12s; }
  #sp-mobile.open > *:nth-child(6){ animation-delay:.15s; }
  #sp-mobile.open > *:nth-child(n+7){ animation-delay:.18s; }
  body:has(#sp-mobile.open){ overflow:hidden; }
  .sp-burger{ display:block !important; min-width:44px; min-height:44px; }
}
@keyframes spMobIn{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }


/* =====================  ULTRA-WIDE  (>= 1760px)  =======================
   MIN-width nicety: widens the container so the bento fills big monitors.
   Never alters the grid template. */
@media (min-width:1440px){
  [style*="max-width:1280px"]{ max-width:1340px !important; }
}
@media (min-width:1760px){
  [style*="max-width:1280px"],
  [style*="max-width:1340px"]{ max-width:1480px !important; }
}


/* ============================================================================
   UNIFIED MOTION SYSTEM  (v2.3.0)
   ----------------------------------------------------------------------------
   Goal: every page — React (Home/About/Areas/Partners/Contact/Products/Blog)
   AND server-rendered (Industries/blog-single/product-single) — shares ONE
   consistent set of motion values: intro, scroll-reveal, hover/tilt, easing,
   background. This block loads on all three enqueue branches, so it overrides
   the per-page divergences with a single source of truth.

   Shared tokens
   -------------
     --sp-ease        : cubic-bezier(.16,1,.3,1)   (both engines already use it)
     reveal distance  : 20px  (was 26px SSR / 22px React)
     reveal duration  : 0.70s
     stagger step     : 0.05s (cap 6)
     tilt             : 3deg / perspective(1000px) / lift 3px  (desktop, fine ptr)
   ========================================================================== */

:root{ --sp-ease:cubic-bezier(.16,1,.3,1); }

/* ---- 1. SCROLL REVEAL — unify SSR .sp-reveal to the shared 20px / 0.70s ---- */
html.sp-reveal-ready .sp-reveal{
  transform:translateY(20px) !important;
  transition:opacity .70s var(--sp-ease),transform .70s var(--sp-ease) !important;
}
html.sp-reveal-ready .sp-reveal.in{ transform:none !important; }

/* ---- 2. REACT reveal (data-reveal) — same distance / duration -------------- */
[data-reveal]{
  transition:opacity .70s var(--sp-ease),transform .70s var(--sp-ease) !important;
}
/* React marks revealed items by clearing the transform; normalise the hidden
   offset so it matches the SSR 20px rather than its native 22px. */
[data-reveal]:not(.in):not([data-shown]){ }

/* ---- 3. PAGE-LOAD INTRO — one choreographed hero intro on every page ------
   Both engines now play the SAME staggered hero fade-up on load:
   spIntro .8s cubic-bezier(.16,1,.3,1), delay 0.12 + idx*0.10s per hero child.
   React runs it from app.php's runtime; SSR runs it from sparow-ui.js
   (heroIntro()). This keyframe is the shared definition SSR pages need (React
   already declares an identical one inline). */
@keyframes spIntro{ 0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} }

/* Page-load intro (v2.7.1) — the same three-beat choreography on every page,
   both engines:  1) header settles down from above,  2) the hero bento tiles
   rise in left-to-right,  3) the hero copy staggers up inside the first tile.
   The runtime (initPremium in app.php / heroIntro in sparow-ui.js) adds these
   classes and REMOVES them on animationend so the fill-mode never fights the
   hover tilt's inline transform afterwards. Subtle by design: 24px rise, gentle
   scale, one shared spring easing. */
.sp-intro-nav{ animation:spNavIn .7s cubic-bezier(.16,1,.3,1) both; }
.sp-intro-tile{ animation:spIntroTile .95s cubic-bezier(.16,1,.3,1) both; will-change:transform,opacity; }
@keyframes spNavIn{ 0%{opacity:0;transform:translateY(-12px);} 100%{opacity:1;transform:translateY(0);} }
@keyframes spIntroTile{ 0%{opacity:0;transform:translateY(24px) scale(.985);} 100%{opacity:1;transform:translateY(0) scale(1);} }
@media (prefers-reduced-motion:reduce){ .sp-intro-nav,.sp-intro-tile{ animation:none !important; } }

/* ---- 4. HOVER / TILT — matched transition on both engines ----------------- */
/* The JS tilt (sparow-ui.js on SSR) now uses 3deg/1000px/lift-3px. Give every
   card the same settle transition so React + SSR cards feel identical. */
.sp-card,[data-tilt]{
  transition:box-shadow .40s var(--sp-ease),transform .30s var(--sp-ease) !important;
}
/* touch / coarse pointer / reduced-motion: no tilt anywhere (both engines) */
@media (hover:none),(pointer:coarse){
  .sp-card:hover,[data-tilt]:hover{ transform:none !important; }
}

/* ---- 5. NAV ON SCROLL — identical easing on both headers ------------------ */
#sp-nav, #sp-nav-seo{ transition:background .40s var(--sp-ease),box-shadow .40s var(--sp-ease) !important; }

/* ---- 6. BACKGROUND — one consistent style on every page ------------------
   The two engines diverged: React froze ALL #sp-bg children (app.php:
   #sp-bg *{animation:none !important}), but SSR pages animated caustics + waves
   on desktop. Navigating SSR -> React therefore made the background stop moving.
   Because React's freeze uses !important (which removes the animation, so it
   can't simply be un-paused), the reliable way to make every page match is to
   freeze the SSR background too. Result: one calm, identical, cheap gradient +
   static glow on all pages, all breakpoints. (Mobile was already off above.) */
#sp-bg > *{ animation:none !important; }
#sp-bg .blob{ opacity:.6 !important; }

/* ---- 7. REDUCED MOTION — kill reveal offset everywhere -------------------- */
@media (prefers-reduced-motion:reduce){
  html.sp-reveal-ready .sp-reveal,
  [data-reveal]{ transform:none !important; transition:none !important; }
}


/* ============================================================================
   MARQUEE — shared keyframe for SSR pages (v2.4.0)
   The React design declares spMarquee inline in app.php; SSR-rendered pages
   (Industries pillar, blog, products) need it here so their badge marquee
   animates too. Pauses on hover; disabled for reduced-motion.
   ========================================================================== */
@keyframes spMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.sp-marq-strip:hover [style*="spMarquee"]{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .sp-marq-strip [style*="spMarquee"]{ animation:none !important; }
}


/* ============================================================================
   BLOG INDEX  (v2.7.0 — compact archive, both engines)
   ----------------------------------------------------------------------------
   Blog banners are purpose-designed 1200x630 images with the SPAROW logo and
   headline near the TOP, so every image slot keeps that shape (or, on phones,
   a square thumbnail) and anchors the image to the top so the headline is
   never what gets clipped.

   Layout:  featured post = one split card (image | copy) instead of a
   full-width stacked banner; grid = 3-up on desktop, 2-up on tablet, and a
   compact thumbnail-row list on phones; the grid is paged 9 at a time.
   ========================================================================= */
.sp-clamp-2, .sp-clamp-3{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.sp-clamp-2{ -webkit-line-clamp:2; }
.sp-clamp-3{ -webkit-line-clamp:3; }

.sp-blog-img{
  height:auto !important;
  aspect-ratio:1200 / 630;
  overflow:hidden;
  background:#eef4fb;
}
.sp-blog-img .sp-hzoom,
.sp-blog-featured-img .sp-hzoom{
  background-size:cover !important;
  background-position:top center !important;
  background-repeat:no-repeat !important;
}

/* Featured: image column + copy column, one compact row */
.sp-blog-featured{
  display:grid !important;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:stretch;
}
.sp-blog-featured-img{
  aspect-ratio:1200 / 630;
  min-height:100%;
  width:100%;
  background:#eef4fb;
}
.sp-blog-featured-body p{ max-width:560px; }

/* Category bar: one horizontal row of filter chips in a pill container.
   Desktop shows prev/next arrows only when the row overflows; touch users
   swipe. Edge fades hint at more chips off-screen. */
.sp-catbar{
  position:relative; display:flex; align-items:center; gap:6px;
  background:linear-gradient(152deg,#ffffff,#f7fafe);
  border:1px solid rgba(16,42,82,0.08); border-radius:100px; padding:7px;
  box-shadow:0 22px 48px -34px rgba(18,46,92,0.28),0 8px 24px -16px rgba(42,120,242,0.18),inset 0 1px 0 rgba(255,255,255,0.95);
}
.sp-catbar-track{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  padding:1px 2px; overscroll-behavior-x:contain;
}
.sp-catbar-track::-webkit-scrollbar{ display:none; }
.sp-catbar.has-overflow .sp-catbar-track{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
}
.sp-catbar.has-overflow.is-start .sp-catbar-track{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%); }
.sp-catbar.has-overflow.is-end .sp-catbar-track{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 100%); }
.sp-catbar.has-overflow.is-start.is-end .sp-catbar-track{ -webkit-mask-image:none; mask-image:none; }
.sp-catchip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; scroll-snap-align:start;
  padding:9px 14px; border-radius:100px; white-space:nowrap; cursor:pointer; text-decoration:none;
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:13.5px; line-height:1; color:#1c2e48;
  background:rgba(42,120,242,0.06); border:1px solid rgba(16,42,82,0.08);
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.sp-catchip svg{ flex:0 0 auto; opacity:.75; }
.sp-catchip:hover{ background:rgba(42,120,242,0.12); border-color:rgba(42,120,242,0.22); transform:translateY(-1px); }
.sp-catchip em{ font-style:normal; font-size:11.5px; font-weight:700; line-height:1; padding:4px 7px; border-radius:100px; background:rgba(16,42,82,0.08); color:rgba(28,46,72,0.72); }
.sp-catchip.is-active{ background:linear-gradient(135deg,#4DA6FF,#155fe0); color:#fff; border-color:transparent; box-shadow:0 12px 26px -12px rgba(42,120,242,0.75); }
.sp-catchip.is-active svg{ opacity:1; }
.sp-catchip.is-active em{ background:rgba(255,255,255,0.22); color:#fff; }
.sp-catbar-btn{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:none; align-items:center; justify-content:center;
  border:1px solid rgba(16,42,82,0.10); background:#fff; color:#1c2e48; cursor:pointer; padding:0;
  box-shadow:0 8px 18px -10px rgba(18,46,92,0.35); transition:background .25s ease,opacity .25s ease,transform .25s ease;
}
.sp-catbar-btn:hover{ background:rgba(42,120,242,0.08); transform:translateY(-1px); }
.sp-catbar.has-overflow .sp-catbar-btn{ display:inline-flex; }
.sp-catbar.is-start .sp-catbar-prev, .sp-catbar.is-end .sp-catbar-next{ opacity:.32; pointer-events:none; }
@media (hover:none){ .sp-catbar-btn{ display:none !important; } }
@media (max-width:640px){
  .sp-catbar{ padding:6px; border-radius:100px; }
  .sp-catchip{ padding:8px 12px; font-size:13px; gap:7px; }
  .sp-catchip em{ font-size:11px; padding:3px 6px; }
}

/* Grid cards */
.sp-blog-card{ display:flex; flex-direction:column; }
.sp-blog-card .sp-blog-card-body{ flex:1; }
.sp-blog-toolbar{ border-bottom:1px solid rgba(16,42,82,0.08); padding-bottom:12px !important; }
.sp-blog-list:not(:has(*)){ display:none !important; } /* featured-only archive: no stray gap */

@media (max-width:980px){
  .sp-blog-featured{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sp-blog-featured-body{ padding:22px 24px !important; }
  .sp-blog-featured-body h2{ font-size:22px !important; }
  .sp-blog-featured-body p{ font-size:14.5px !important; -webkit-line-clamp:2; }
}

@media (max-width:640px){
  /* Featured stacks: banner on top (full 1200x630, no crop), copy below */
  .sp-blog-featured{ grid-template-columns:1fr; }
  [data-bento] > .sp-blog-featured.sp-card{ padding:0 !important; border-radius:22px !important; } /* not the phone hero-box padding */
  .sp-blog-featured-img{ min-height:0; aspect-ratio:1200 / 630; }
  .sp-blog-featured-body{ padding:18px 20px 20px !important; }
  .sp-blog-featured-body h2{ font-size:20px !important; }
  .sp-blog-featured-body p{ -webkit-line-clamp:2; margin-bottom:12px !important; }

  /* Grid -> compact rows: square thumbnail left, copy right */
  .sp-blog-grid{ gap:10px !important; }
  .sp-blog-card{
    display:grid !important;
    grid-template-columns:104px minmax(0,1fr);
    align-items:stretch;
    border-radius:18px !important;
  }
  .sp-blog-card .sp-blog-img{ aspect-ratio:auto; height:100% !important; min-height:104px; }
  .sp-blog-card .sp-blog-card-body{ padding:14px 16px 14px 14px !important; display:flex; flex-direction:column; justify-content:center; }
  .sp-blog-card .sp-blog-card-body h3{ font-size:15px !important; line-height:1.3 !important; }
  .sp-blog-card .sp-blog-card-body > div{ font-size:11.5px !important; margin-bottom:5px !important; }
  .sp-blog-toolbar h2{ font-size:19px !important; }
}

/* =====================  FAQ COMPONENT (both engines)  =====================
   One compact list: divider rows (number · question · chevron), answers
   aligned under the question, one open at a time, collapsed by default.
   Client design toggles .is-open; the server-rendered copy is <details>. */
.sp-faq-list{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(16,42,82,0.10);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(18,46,92,0.35),inset 0 1px 0 rgba(255,255,255,0.9);}
.sp-faq-item{display:block;border-top:1px solid rgba(16,42,82,0.08);background:transparent;cursor:pointer;transition:background .25s ease;}
.sp-faq-item:first-child{border-top:0;}
.sp-faq-item:hover{background:rgba(42,120,242,0.035);}
.sp-faq-item.is-open,details.sp-faq-item[open]{background:linear-gradient(90deg,rgba(42,120,242,0.06),rgba(42,120,242,0));}
.sp-faq-row{display:grid;grid-template-columns:26px minmax(0,1fr) 28px;align-items:center;gap:12px;padding:15px 18px;list-style:none;cursor:pointer;user-select:none;}
.sp-faq-row::-webkit-details-marker{display:none;}
.sp-faq-row::marker{content:'';}
.sp-faq-num{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:0.04em;color:var(--sp-accent,#2A78F2);opacity:.75;font-variant-numeric:tabular-nums;}
.sp-faq-q{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;line-height:1.3;color:#0e1726;}
.sp-faq-chev{width:28px;height:28px;border-radius:50%;background:rgba(42,120,242,0.09);color:var(--sp-accent,#2A78F2);display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease;}
.sp-faq-item.is-open .sp-faq-chev,details.sp-faq-item[open] .sp-faq-chev{transform:rotate(180deg);background:var(--sp-accent,#2A78F2);color:#fff;}
/* client design: animate with grid rows (exact height at any width) */
.sp-faq-item:not(details) .sp-faq-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
.sp-faq-item.is-open:not(details) .sp-faq-body{grid-template-rows:1fr;opacity:1;}
.sp-faq-inner{overflow:hidden;min-height:0;}
.sp-faq-a{font-size:14.5px;line-height:1.62;color:rgba(28,46,72,0.82);margin:0;padding:0 18px 16px calc(18px + 26px + 12px);}
/* server copy: sparow-ui.js eases the body height; with no JS <details> just opens */
details.sp-faq-item .sp-faq-body{overflow:hidden;}
/* heading column stays in view while the list scrolls (desktop) */
@media (min-width:981px){ .sp-faq-head{position:sticky;top:132px;} }
@media (max-width:640px){
  .sp-faq-list{border-radius:16px;}
  .sp-faq-row{grid-template-columns:22px minmax(0,1fr) 26px;gap:10px;padding:13px 14px;}
  .sp-faq-q{font-size:14.5px;}
  .sp-faq-chev{width:26px;height:26px;}
  .sp-faq-a{font-size:14px;padding:0 14px 14px calc(14px + 22px + 10px);}
  .sp-faq-head h2{font-size:clamp(22px,6.6vw,28px) !important;margin-bottom:10px !important;}
  .sp-faq-head p{margin-bottom:16px !important;}
}

/* =====================  LAYOUT NORMALISATION (both engines)  ==============
   One rhythm, one button system, one title scale, one card padding — the
   compiled design set these per block with slightly different values. Rules
   carry !important because the design writes inline styles. */

/* --- section rhythm: one vertical gap everywhere ------------------------- */
body section[data-screen-label], body .sp-ssr-main > section, body #sp-seo > section{ gap:clamp(40px,4.6vw,64px) !important; }
@media (max-width:980px){ body section[data-screen-label], body .sp-ssr-main > section, body #sp-seo > section{ gap:44px !important; } }
@media (max-width:600px){ body section[data-screen-label], body .sp-ssr-main > section, body #sp-seo > section{ gap:36px !important; padding-left:16px !important; padding-right:16px !important; } }

/* --- buttons: one CTA system at every width ------------------------------ */
.sp-cta,
a[style*="border-radius: 100px"][style*="padding: 15px 26px"], a[style*="border-radius: 100px"][style*="padding: 16px 30px"],
a[style*="border-radius: 100px"][style*="padding: 14px 26px"], a[style*="border-radius: 100px"][style*="padding: 13px 24px"],
a[style*="border-radius: 100px"][style*="padding: 17px 34px"], a[style*="border-radius: 100px"][style*="padding: 14px 24px"],
a[style*="border-radius: 100px"][style*="padding: 15px 28px"], a[style*="border-radius: 100px"][style*="padding: 13px 22px"],
a[style*="border-radius: 100px"][style*="padding: 16px 22px"], a[style*="border-radius: 100px"][style*="padding: 15px 24px"]{
  box-sizing:border-box; min-height:52px; padding:14px 26px !important;
  font-size:15.5px !important; font-weight:600 !important; line-height:1.2 !important; letter-spacing:-0.005em;
  display:inline-flex !important; align-items:center; justify-content:center; gap:9px; white-space:nowrap; border-radius:100px !important;
}
/* keep tag chips / badges / form submit buttons out of the CTA system */
.sp-chip, .sp-chip.sp-cta{ min-height:0; padding:7px 13px !important; font-size:12.5px !important; }
@media (max-width:640px){
  [data-bento] .sp-cta:not(button[type="submit"]):not(.sp-chip), .sp-cta:not(button[type="submit"]):not(.sp-chip){
    width:auto !important; max-width:100%; min-width:172px; min-height:50px; padding:13px 22px !important; font-size:15px !important; flex:0 1 auto !important; white-space:normal;
  }
}

/* --- titles: one scale per role ---------------------------------------- */
body section[data-screen-label] h2, body .sp-ssr-main section h2, body #sp-seo section h2{ font-size:clamp(28px,3.4vw,46px) !important; line-height:1.06 !important; letter-spacing:-0.02em !important; }
body section h2[style*="color: rgb(255, 255, 255)"], body section [data-full] h2, body section [style*="color: rgb(255, 255, 255)"] > h2, body section [style*="color:#fff"] > h2{ font-size:clamp(30px,3.8vw,54px) !important; }
body section .sp-card h2, body section [data-full] .sp-card h2{ font-size:clamp(24px,2.4vw,32px) !important; line-height:1.12 !important; }
body section [data-full] .sp-faq-head h2, body section .sp-faq-head h2{ font-size:clamp(22px,2.4vw,32px) !important; }
@media (max-width:600px){
  body section[data-screen-label] h2, body .sp-ssr-main section h2, body #sp-seo section h2{ font-size:clamp(26px,7.2vw,34px) !important; }
  body section h2[style*="color: rgb(255, 255, 255)"], body section [data-full] h2, body section [style*="color: rgb(255, 255, 255)"] > h2{ font-size:clamp(26px,7.6vw,36px) !important; }
  body section .sp-card h2, body section [data-full] .sp-card h2{ font-size:24px !important; }
  body section .sp-faq-head h2, body section [data-full] .sp-faq-head h2{ font-size:clamp(22px,6.6vw,28px) !important; }
}

/* --- cards: one padding per role (image-strip and table cards keep their own) --- */
body .sp-card:not(:has(> .sp-hwrap)):not(:has(> .sp-hzoom)):not(:has(> table)):not(:has(> form)):not([style*="padding: 0"]):not([style*="padding:0"]){ padding:26px !important; }
body [data-bento] > .sp-card[style*="span 3"]:not(:has(> .sp-hwrap)):not(:has(> table)):not(:has(> form)),
body [data-bento] > .sp-card[style*="span 4"]:not(:has(> .sp-hwrap)):not(:has(> table)):not(:has(> form)),
body [data-bento] > .sp-card[style*="span 6"]:not(:has(> .sp-hwrap)):not(:has(> table)):not(:has(> form)){ padding:clamp(26px,3vw,40px) !important; }
@media (max-width:640px){
  body .sp-card:not(:has(> .sp-hwrap)):not(:has(> .sp-hzoom)):not(:has(> table)):not(:has(> form)):not([style*="padding: 0"]):not([style*="padding:0"]),
  body [data-bento] > .sp-card[style*="span 3"]:not(:has(> .sp-hwrap)):not(:has(> table)):not(:has(> form)),
  body [data-bento] > .sp-card[style*="span 4"]:not(:has(> .sp-hwrap)):not(:has(> table)):not(:has(> form)),
  body [data-bento] > .sp-card[style*="span 6"]:not(:has(> .sp-hwrap)):not(:has(> table)):not(:has(> form)){ padding:22px !important; }
}

/* --- data tables never escape their card ------------------------------- */
.sp-card table{ width:100%; border-collapse:collapse; }
@media (max-width:980px){
  .sp-card:has(> table){ overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .sp-card table{ min-width:640px !important; }
}

/* --- hero titles: one scale on every page ------------------------------- */
body section[data-screen-label] h1, body .sp-ssr-main section h1, body #sp-seo section h1{ font-size:clamp(32px,4.6vw,64px) !important; line-height:1.02 !important; letter-spacing:-0.025em !important; }
@media (max-width:980px){ body section[data-screen-label] h1, body .sp-ssr-main section h1, body #sp-seo section h1{ font-size:clamp(30px,5.6vw,48px) !important; } }
@media (max-width:600px){ body section[data-screen-label] h1, body .sp-ssr-main section h1, body #sp-seo section h1{ font-size:clamp(28px,7.6vw,40px) !important; line-height:1.07 !important; } }

/* Blog index headings sit outside the section-title scale above: the list
   toolbar is a label, and the featured card title stays compact. */
body section .sp-blog-toolbar h2, body #sp-seo section .sp-blog-toolbar h2{ font-size:clamp(20px,2vw,26px) !important; line-height:1.1 !important; }
body section .sp-card.sp-blog-featured h2, body section [data-full].sp-blog-featured h2, body #sp-seo section .sp-blog-featured h2{ font-size:clamp(21px,2.1vw,30px) !important; line-height:1.15 !important; }
@media (max-width:980px){
  body section .sp-card.sp-blog-featured h2, body section [data-full].sp-blog-featured h2, body #sp-seo section .sp-blog-featured h2{ font-size:22px !important; }
}
@media (max-width:640px){
  body section .sp-blog-toolbar h2, body #sp-seo section .sp-blog-toolbar h2{ font-size:19px !important; }
  body section .sp-card.sp-blog-featured h2, body section [data-full].sp-blog-featured h2, body #sp-seo section .sp-blog-featured h2{ font-size:20px !important; }
}

/* Home hero quote card on tablets: the hero already spans the full width, so
   the card does too — fields in two columns, trust footer as one row. */
@media (min-width:641px) and (max-width:980px){
  [data-bento] > .sp-quote-card[style*="span 2"]{ grid-column:1 / -1 !important; padding:24px 26px !important; }
  .sp-quote-card form{ display:block !important; }
  .sp-quote-head{ margin-bottom:16px !important; }
  .sp-quote-fields{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px 12px !important; }
  .sp-quote-fields > button[type="submit"]{ margin-top:0 !important; }
  .sp-quote-fields > div:last-child{ grid-column:1 / -1; }
  .sp-quote-foot{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; align-items:stretch; padding-top:16px !important; }
  .sp-quote-foot > div:first-child{ grid-column:1 / -1; margin-bottom:4px !important; }
  .sp-quote-wa{ margin-top:0 !important; }
}
/* Landscape tablets / small laptops: the card is ~300px wide next to the hero,
   so keep the stat labels on one line. */
@media (min-width:981px) and (max-width:1180px){
  .sp-quote-stats{ gap:6px !important; }
  .sp-quote-stats > div{ padding:10px 4px !important; }
  .sp-quote-stats > div > div:first-child{ font-size:15px !important; }
  .sp-quote-stats > div > div:last-child{ font-size:10.5px !important; white-space:nowrap; }
  .sp-quote-wa{ font-size:12.5px !important; padding:10px 12px !important; }
}