/* ==========================================================================
   Seventh Sense — front-end layer.
   theme.json owns colour, type and spacing tokens. This file owns layout,
   components and motion. Every value below references a preset variable so
   the client can retune the palette from the editor without touching CSS.
   ========================================================================== */

:root{
  --svs-ease:cubic-bezier(.22,.61,.36,1);
  --svs-ring:0 0 0 1px var(--wp--preset--color--line);
  --svs-glow:0 0 24px -6px color-mix(in srgb, var(--wp--preset--color--glow) 55%, transparent);
  --svs-shell:min(1280px, 100% - 2 * var(--wp--preset--spacing--30));
}

*,*::before,*::after{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p{text-wrap:pretty}
:where(h1,h2,h3){text-wrap:balance}
img,video,canvas{max-width:100%;height:auto}

/* Keyboard users must never lose the focus ring. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wp--preset--color--glow);
  outline-offset:2px;border-radius:3px;
}
.svs-skip{position:absolute;left:-9999px;top:0;z-index:999}
.svs-skip:focus{left:1rem;top:1rem}

/* ---------- Header ---------- */
.svs-header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--wp--preset--color--background) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s var(--svs-ease);}
.svs-header.is-scrolled{border-bottom-color:var(--wp--preset--color--line)}
.svs-header__bar{padding-block:.9rem;gap:var(--wp--preset--spacing--30)}
.svs-brand a,.svs-brand{
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  letter-spacing:-.02em;color:var(--wp--preset--color--text);text-decoration:none;}
.svs-header__nav{gap:var(--wp--preset--spacing--30);align-items:center}

/* ---------- Utility ---------- */
.svs-muted{color:var(--wp--preset--color--muted)}
.svs-muted a{color:inherit;text-decoration:none}
.svs-muted a:hover{color:var(--wp--preset--color--glow)}
.svs-rule{border:0;border-top:1px solid var(--wp--preset--color--line);margin-block:var(--wp--preset--spacing--40)}
.svs-eyebrow{
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--glow);}

/* ---------- Surface card ---------- */
.svs-card{
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--line);
  border-radius:10px;overflow:hidden;
  transition:transform .3s var(--svs-ease), border-color .3s var(--svs-ease), box-shadow .3s var(--svs-ease);}
.svs-card:hover,.svs-card:focus-within{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--line));
  box-shadow:var(--svs-glow);}

/* ---------- Hero + binary rain ---------- */
.svs-hero{position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--wp--preset--spacing--70);}
/* The canvas is decoration only: it sits behind content, ignores pointers,
   and is removed outright for reduced-motion users (see app.js). */
.svs-rain{position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.32;
  mask-image:radial-gradient(120% 85% at 70% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 85% at 70% 30%, #000 30%, transparent 78%);}

/* ---------- Reveal on scroll ---------- */
.svs-reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--svs-ease), transform .6s var(--svs-ease);}
.svs-reveal.is-in{opacity:1;transform:none}

/* ---------- Footer ---------- */
.svs-footer__head{font-family:var(--wp--preset--font-family--display);letter-spacing:.02em;margin-bottom:.6rem}
.svs-footer__cols{gap:var(--wp--preset--spacing--40)}

/* ---------- Motion preferences win over every effect above ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .svs-reveal{opacity:1;transform:none}
  .svs-rain{display:none}
  .svs-card:hover,.svs-card:focus-within{transform:none}
}

/* ==========================================================================
   Phase 3 — component layer
   ========================================================================== */

/* ---------- Buttons ---------- */
.svs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--small);font-weight:600;letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:6px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .22s var(--svs-ease), border-color .22s var(--svs-ease),
             color .22s var(--svs-ease), transform .22s var(--svs-ease);}
.svs-btn:hover{transform:translateY(-1px);text-decoration:none}
.svs-btn--primary{background:var(--wp--preset--color--primary);color:#fff}
.svs-btn--primary:hover{background:#4A8FFF;color:#fff}
.svs-btn--ghost{background:transparent;color:var(--wp--preset--color--text);
  border-color:color-mix(in srgb, var(--wp--preset--color--text) 26%, transparent);}
.svs-btn--ghost:hover{border-color:var(--wp--preset--color--glow);color:var(--wp--preset--color--glow)}
.svs-btn--wa .svs-ico{width:18px;height:18px}

/* ---------- Hero ---------- */
.svs-hero{position:relative;isolation:isolate;overflow:clip;
  min-height:clamp(30rem,74vh,46rem);display:grid;align-items:center;
  padding-block:var(--wp--preset--spacing--70);
  border-bottom:1px solid var(--wp--preset--color--line);}
.svs-hero__inner{width:var(--svs-shell);margin-inline:auto;position:relative;z-index:1;max-width:1280px}
.svs-hero__title{
  font-size:var(--wp--preset--font-size--display);
  letter-spacing:-.04em;line-height:1.02;margin:.6rem 0 0;max-width:18ch;}
.svs-hero__sub{
  color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--large);
  max-width:52ch;margin:1.15rem 0 0;line-height:1.55;}
.svs-hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* A blue wash anchors the headline against the moving canvas so text contrast
   never depends on which glyphs happen to be falling behind it. */
.svs-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 60% at 12% 40%, color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent) 0%, transparent 62%),
    linear-gradient(90deg, var(--wp--preset--color--background) 8%, color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent) 62%, transparent 100%);}

/* ---------- Socials ---------- */
.svs-socials{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}
.svs-social{display:inline-flex;align-items:center;gap:.5rem;
  color:var(--wp--preset--color--muted);text-decoration:none;
  padding:.5rem;border-radius:6px;line-height:0;
  transition:color .2s var(--svs-ease), background-color .2s var(--svs-ease);}
.svs-social:hover{color:var(--wp--preset--color--glow);
  background:color-mix(in srgb, var(--wp--preset--color--glow) 10%, transparent);text-decoration:none}
.svs-social span:not(.screen-reader-text){font-size:var(--wp--preset--font-size--small);line-height:1}

/* ---------- Sticky WhatsApp ---------- */
.svs-wa-sticky{
  position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);z-index:80;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#062812;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.7);
  transition:transform .22s var(--svs-ease), box-shadow .22s var(--svs-ease);}
.svs-wa-sticky:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px -8px rgba(0,0,0,.8)}
.svs-wa-sticky .svs-ico{width:26px;height:26px}

/* ---------- Header ---------- */
.svs-header__bar{align-items:center}
.svs-brand .tag{display:block;font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp--preset--color--muted);margin-top:.25rem;font-weight:400}
.svs-header .wp-block-navigation{gap:clamp(1rem,2vw,1.75rem)}
.svs-header .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--small);font-weight:500;
  color:var(--wp--preset--color--muted);text-decoration:none;
  transition:color .2s var(--svs-ease);}
.svs-header .wp-block-navigation-item__content:hover,
.svs-header .current-menu-item .wp-block-navigation-item__content{
  color:var(--wp--preset--color--text);text-decoration:none}

/* ---------- Footer ---------- */
.svs-footer{border-top:1px solid var(--wp--preset--color--line)}
.svs-footer a{text-decoration:none}
.svs-footer a:hover{text-decoration:underline}
.svs-footer .svs-brand{font-size:var(--wp--preset--font-size--large)}

/* ---------- Screen-reader helper (core provides one, but block themes
              do not always load it before our markup needs it) ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Responsive ---------- */
@media (max-width:781px){
  .svs-hero{min-height:auto;padding-block:var(--wp--preset--spacing--60)}
  .svs-hero__title{max-width:none}
  .svs-hero__ctas .svs-btn{flex:1 1 auto;justify-content:center}
  .svs-wa-sticky{width:48px;height:48px}
}
@media (max-width:480px){
  .svs-hero__ctas{flex-direction:column;align-items:stretch}
}

/* The header CTA must never wrap: a two-line "Get a quot / e" reads as broken. */
.svs-header__cta .wp-block-button__link{white-space:nowrap}
.svs-header__nav{gap:clamp(.75rem,1.6vw,1.5rem)}
.svs-header__nav .wp-block-navigation{flex:0 1 auto}

/* --svs-shell already subtracts the gutter, so no extra padding here — that
   was pushing the headline 24px off the rail the header brand sits on. */

/* A page must never scroll sideways. `clip` (not `hidden`) keeps position:
   sticky working on the header, which `hidden` would silently break. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* ==========================================================================
   Phase 4 — templates
   ========================================================================== */

/* ---------- Page heads ---------- */
.svs-pagehead h1{margin:.35rem 0 0}
.svs-pagehead .svs-muted{margin-top:.9rem;max-width:56ch}
.svs-pagehead .svs-eyebrow a{color:inherit;text-decoration:none}
.svs-pagehead .svs-eyebrow a:hover{color:var(--wp--preset--color--text)}

/* ---------- Grid ---------- */
.svs-grid{display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));}
@media (min-width:900px){
  .svs-grid{grid-template-columns:repeat(var(--svs-cols,3),1fr)}
}

/* ---------- Filter chips ---------- */
.svs-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.4rem,2.5vw,2rem)}
.svs-chip{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--small);font-weight:500;
  padding:.5rem 1rem;border-radius:999px;text-decoration:none;
  color:var(--wp--preset--color--muted);
  border:1px solid var(--wp--preset--color--line);
  background:var(--wp--preset--color--surface);
  transition:color .2s var(--svs-ease), border-color .2s var(--svs-ease), background-color .2s var(--svs-ease);}
.svs-chip:hover{color:var(--wp--preset--color--text);border-color:var(--wp--preset--color--primary);text-decoration:none}
.svs-chip.is-on{background:var(--wp--preset--color--primary-solid);
  border-color:var(--wp--preset--color--primary-solid);color:#fff}

/* ---------- Project card ---------- */
.svs-pcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.svs-pcard__link:hover{text-decoration:none}
.svs-pcard__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--wp--preset--color--surface-2)}
.svs-pcard__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--svs-ease)}
.svs-card:hover .svs-pcard__media img{transform:scale(1.04)}
.svs-pcard__placeholder{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--wp--preset--color--surface-2),var(--wp--preset--color--surface));}
.svs-pcard__body{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.15rem 1.3rem;flex:1}
.svs-pcard__meta{font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--wp--preset--color--glow)}
.svs-pcard__title{font-family:var(--wp--preset--font-family--display);font-weight:600;
  font-size:var(--wp--preset--font-size--large);letter-spacing:-.02em;line-height:1.25}
.svs-pcard__sum{color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--small);line-height:1.55;margin-top:.15rem}

/* ---------- Service card ---------- */
.svs-scard__link{display:flex;flex-direction:column;gap:.7rem;height:100%;
  padding:1.4rem 1.35rem 1.25rem;text-decoration:none;color:inherit}
.svs-scard__link:hover{text-decoration:none}
.svs-scard__icon{color:var(--wp--preset--color--primary);line-height:0}
.svs-scard__title{font-size:var(--wp--preset--font-size--large);margin:0;letter-spacing:-.02em}
.svs-scard__pitch{color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--small);line-height:1.55;margin:0}
.svs-scard__foot{display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--wp--preset--color--line)}
.svs-scard__price{font-family:var(--wp--preset--font-family--display);font-weight:600;
  font-size:var(--wp--preset--font-size--small)}
.svs-scard__go{color:var(--wp--preset--color--primary);line-height:0;
  transition:transform .25s var(--svs-ease)}
.svs-card:hover .svs-scard__go{transform:translateX(4px)}

/* ---------- Case study ---------- */
.svs-case{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.25rem)}
.svs-case__facts{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);margin:0;
  padding-bottom:1.5rem;border-bottom:1px solid var(--wp--preset--color--line)}
.svs-case__facts dt{font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--wp--preset--color--muted);margin-bottom:.3rem}
.svs-case__facts dd{margin:0;font-family:var(--wp--preset--font-family--display);font-weight:500}
.svs-case__cols{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:820px){.svs-case__cols{grid-template-columns:1fr 1fr}}
.svs-case__h{font-size:var(--wp--preset--font-size--x-large);margin:0 0 .7rem}
.svs-case__cols p{color:var(--wp--preset--color--muted);margin:0;line-height:1.65}
.svs-case__gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.svs-case__gallery figure{margin:0}
.svs-case__gallery img{width:100%;height:auto;border-radius:8px;display:block}
.svs-case__video :is(iframe,video){width:100%;aspect-ratio:16/9;height:auto;border-radius:8px;border:0}

/* ---------- Metrics ---------- */
.svs-metrics{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  padding:clamp(1.4rem,3vw,2.25rem);border-radius:12px;
  background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line)}
.svs-metric{display:flex;flex-direction:column;gap:.35rem}
.svs-metric__n{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:var(--wp--preset--font-size--xx-large);letter-spacing:-.035em;line-height:1;
  color:var(--wp--preset--color--glow)}
.svs-metric__l{color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--small);line-height:1.4}

/* ---------- Quote ---------- */
.svs-quote{margin:0;padding:clamp(1.5rem,3vw,2.25rem);border-radius:12px;
  background:var(--wp--preset--color--surface);
  border-left:3px solid var(--wp--preset--color--primary)}
.svs-quote blockquote{margin:0;font-size:var(--wp--preset--font-size--large);line-height:1.5}
.svs-quote blockquote p{margin:0 0 .6rem}
.svs-quote figcaption{margin-top:.9rem;color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--small)}

/* ---------- Service body ---------- */
.svs-service{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.25rem)}
.svs-h2{font-size:var(--wp--preset--font-size--x-large);margin:0 0 1.1rem}
.svs-service__buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(1.2rem,2.5vw,1.6rem);border-radius:12px;
  background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line)}
.svs-service__price{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:var(--wp--preset--font-size--x-large);letter-spacing:-.03em}
.svs-service__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.svs-ticks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.svs-ticks li{position:relative;padding-left:1.75rem;color:var(--wp--preset--color--muted);line-height:1.5}
.svs-ticks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;
  border-left:2px solid var(--wp--preset--color--glow);border-bottom:2px solid var(--wp--preset--color--glow);
  transform:rotate(-45deg)}
.svs-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.svs-steps li{display:flex;gap:1.1rem;align-items:flex-start}
.svs-steps__n{font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--primary);
  padding-top:.15rem;flex:none}
.svs-steps__t{font-size:var(--wp--preset--font-size--large);margin:0 0 .3rem}
.svs-steps li p{margin:0;color:var(--wp--preset--color--muted);line-height:1.6}

/* ---------- FAQs ---------- */
.svs-faqs{display:flex;flex-direction:column;border-top:1px solid var(--wp--preset--color--line)}
.svs-faq{border-bottom:1px solid var(--wp--preset--color--line)}
.svs-faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;position:relative;
  font-family:var(--wp--preset--font-family--display);font-weight:500;
  font-size:var(--wp--preset--font-size--large);letter-spacing:-.015em}
.svs-faq summary::-webkit-details-marker{display:none}
.svs-faq summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;
  width:9px;height:9px;border-right:2px solid var(--wp--preset--color--muted);
  border-bottom:2px solid var(--wp--preset--color--muted);transform:rotate(45deg);
  transition:transform .25s var(--svs-ease)}
.svs-faq[open] summary::after{transform:rotate(225deg)}
.svs-faq__a{padding:0 0 1.2rem;color:var(--wp--preset--color--muted);line-height:1.65;max-width:70ch}

/* ---------- CTA banner ---------- */
.svs-cta{background:var(--wp--preset--color--surface);
  border-block:1px solid var(--wp--preset--color--line);
  padding-block:clamp(3rem,6vw,5rem);margin-top:clamp(2rem,5vw,4rem)}
.svs-cta__inner{width:var(--svs-shell);margin-inline:auto;max-width:1280px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem}
.svs-cta__title{font-size:var(--wp--preset--font-size--xx-large);margin:0;max-width:20ch}
.svs-cta__body{color:var(--wp--preset--color--muted);margin:0;max-width:56ch;line-height:1.6}
.svs-cta__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.5rem}
.svs-cta__note{color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--small);margin:.4rem 0 0}

/* ---------- Empty state ---------- */
.svs-empty{text-align:center;padding:clamp(2.5rem,6vw,4.5rem) 1rem;
  border:1px dashed var(--wp--preset--color--line);border-radius:12px}
.svs-empty p{color:var(--wp--preset--color--muted);margin:0 0 1.2rem;max-width:48ch;
  margin-inline:auto}

/* ---------- Insights ---------- */
.svs-posts .wp-block-post-title a{text-decoration:none}
.svs-posts .wp-block-post-title a:hover{color:var(--wp--preset--color--glow)}
.svs-posts .wp-block-post-featured-image img{border-radius:8px;aspect-ratio:4/3;object-fit:cover}
.svs-posts .wp-block-post-date{margin-block:.6rem .2rem}

/* ---------- Featured image on a case study ---------- */
.svs-featured img{width:100%;border-radius:12px;display:block}

/* WordPress centres constrained children between the wide rails. This design
   is left-aligned throughout — the hero, every heading, the card grids — so a
   centred paragraph under a left-aligned headline reads as a mistake.
   Prose keeps its measure; it just starts on the same rail as everything else.
   Deliberately centred things (the CTA banner) centre via their own inner
   wrapper and are untouched by this. */
/* Putting prose on the same rail as the headline.
   The 80px rail is produced by CENTRING a 1280 box in the viewport, so a
   child that is narrower than 1280 gets centred too — which is why the
   excerpt sat 290px in from the headline. Fix: make the section itself the
   1280 box (via the same shell calculation the hero uses), then let children
   fill it and align left, capping only the line length.
   The !important is unavoidable: WordPress writes `margin-left:auto !important`
   into its generated layout rules, so specificity cannot win. */
.svs-pagehead,
main > .wp-block-group > .wp-block-post-content{
  width:var(--svs-shell);
  max-width:1280px;
  margin-inline:auto;
  padding-inline:0;
}
.svs-pagehead.is-layout-constrained > *,
main .wp-block-post-content.is-layout-constrained > :not(.alignfull){
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* Line length still matters — cap the measure, keep the left edge.
   These need !important too, because the reset above uses it. */
.svs-pagehead .svs-muted,
.svs-pagehead .wp-block-post-excerpt,
main .wp-block-post-content.is-layout-constrained > :is(p,ul,ol,blockquote){
  max-width:68ch !important;
}

/* ==========================================================================
   Phase 5 — forms, booking
   ========================================================================== */

.svs-form{display:flex;flex-direction:column;gap:1.15rem;max-width:760px}
.svs-form__row{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media (min-width:640px){.svs-form__row{grid-template-columns:1fr 1fr}}

.svs-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.svs-field__label{font-family:var(--wp--preset--font-family--display);font-weight:500;
  font-size:var(--wp--preset--font-size--small)}
.svs-field__label span[aria-hidden]{color:var(--wp--preset--color--primary)}
.svs-field__opt{color:var(--wp--preset--color--muted);font-weight:400;font-size:.85em}
.svs-field__hint{color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--micro)}
.svs-field__err{color:#FF7A7A;font-size:var(--wp--preset--font-size--micro);min-height:0}
.svs-field__err:empty{display:none}

.svs-form :is(input,select,textarea){
  width:100%;font:inherit;font-size:var(--wp--preset--font-size--medium);
  color:var(--wp--preset--color--text);
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--line);
  border-radius:8px;padding:.7rem .85rem;
  transition:border-color .18s var(--svs-ease), box-shadow .18s var(--svs-ease);}
.svs-form textarea{resize:vertical;min-height:7rem}
.svs-form :is(input,select,textarea):focus{
  outline:none;border-color:var(--wp--preset--color--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent);}
.svs-form :is(input,select,textarea):focus-visible{outline:2px solid var(--wp--preset--color--glow);outline-offset:1px}
.svs-form ::placeholder{color:color-mix(in srgb, var(--wp--preset--color--muted) 72%, transparent)}
/* Date pickers render a dark-on-dark icon otherwise. */
.svs-form input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}

.svs-field.has-error :is(input,select,textarea){border-color:#FF7A7A}

/* The honeypot must be unreachable by people — including keyboard and
   screen-reader users — while staying a real, fillable field for bots.
   display:none would let some bots detect and skip it. */
.svs-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.svs-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.svs-form__note{color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--small)}
.svs-form__status{margin:0;font-size:var(--wp--preset--font-size--small)}
.svs-form__status:empty{display:none}
.svs-form__status.is-error{color:#FF7A7A}
.svs-form__done{padding:clamp(1.5rem,4vw,2.5rem);border-radius:12px;
  background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line)}
.svs-form__done h3{margin:0 0 .5rem;font-size:var(--wp--preset--font-size--x-large)}
.svs-form__done h3:focus{outline:none}
.svs-form__done p{margin:0;color:var(--wp--preset--color--muted)}

/* ---------- Booking slots ---------- */
.svs-slots{display:flex;flex-wrap:wrap;gap:.45rem;align-content:flex-start;min-height:2.9rem}
.svs-slot{
  font-family:var(--wp--preset--font-family--display);font-weight:500;
  font-size:var(--wp--preset--font-size--small);
  padding:.55rem .85rem;border-radius:8px;cursor:pointer;
  color:var(--wp--preset--color--text);
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--line);
  transition:border-color .18s var(--svs-ease), background-color .18s var(--svs-ease);}
.svs-slot:hover:not(:disabled){border-color:var(--wp--preset--color--primary)}
.svs-slot[aria-pressed="true"]{background:var(--wp--preset--color--primary-solid);
  border-color:var(--wp--preset--color--primary-solid);color:#fff}
/* A taken slot stays visible and struck through: hiding it reads as
   "the studio does not work afternoons" rather than "that one is gone". */
.svs-slot:disabled{opacity:.42;cursor:not-allowed;text-decoration:line-through}

/* ---------- Quote ---------- */
.svs-quote{border:1px solid var(--wp--preset--color--line);border-radius:12px;
  background:var(--wp--preset--color--surface);padding:1.1rem 1.2rem;display:flex;
  flex-direction:column;gap:.5rem}
.svs-quote__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--muted)}
.svs-quote__row strong{font-family:var(--wp--preset--font-family--display);
  color:var(--wp--preset--color--text);font-size:var(--wp--preset--font-size--medium)}
.svs-quote__row--due strong{color:var(--wp--preset--color--glow);
  font-size:var(--wp--preset--font-size--large)}
.svs-quote__note{margin:.2rem 0 0;color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--micro);line-height:1.5}

/* ==========================================================================
   Phase 6 — accessibility corrections
   ========================================================================== */

/* The brand blue #2D7DFF carries white text at only 3.83:1, under the 4.5:1
   AA threshold for body-sized text. Filled buttons therefore use a slightly
   deeper blue (5.21:1); #2D7DFF stays the accent for links, icons and borders,
   where it sits on the dark ground and has plenty of contrast. */
.svs-btn--primary{background:var(--wp--preset--color--primary-solid)}
.svs-btn--primary:hover{background:var(--wp--preset--color--primary)}

/* ==========================================================================
   Phase 7 — premium pass
   Unbounded carries every display line (uppercase, heavy); Space Grotesk
   carries the UI. Proof, motion and texture sit on top of the dark ground.
   ========================================================================== */

/* ---------- Type roles ---------- */
.svs-btn,.wp-element-button,.wp-block-button__link,.svs-chip,.svs-slot,.svs-field__label,
.svs-header .wp-block-navigation-item__content,.svs-scard__price,.svs-service__price,
.svs-quote__row strong,.svs-case__facts dd,.svs-faq summary,.svs-steps__t,.svs-work__all{
  font-family:var(--wp--preset--font-family--ui)}
.svs-btn,.wp-element-button,.wp-block-button__link{
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;border-radius:4px;padding:1rem 1.75rem}
.svs-btn .svs-ico{width:16px;height:16px}
.svs-btn--primary{box-shadow:0 12px 32px -14px color-mix(in srgb,var(--wp--preset--color--primary) 90%,transparent)}
/* Darker on hover, never the lighter brand blue: white on #2D7DFF is 3.83:1. */
.svs-btn--primary:hover{background:var(--wp--preset--color--primary);color:var(--wp--preset--color--background);box-shadow:0 16px 38px -12px color-mix(in srgb,var(--wp--preset--color--glow) 45%,transparent)}
.svs-header .wp-block-navigation-item__content{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.svs-brand,.svs-brand a{font-family:var(--wp--preset--font-family--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;font-size:.95rem}

.svs-accent{color:var(--wp--preset--color--glow)}
/* Outline text keeps a real `color` so contrast tools and forced-colours mode
   still see readable text; only the fill is removed visually. */
.svs-outline{color:var(--wp--preset--color--text);-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--wp--preset--color--text) 70%,transparent)}
@media (forced-colors:active){.svs-outline{-webkit-text-fill-color:currentColor}}

.svs-eyebrow::before{content:"";display:inline-block;width:24px;height:1px;background:currentColor;
  margin-right:.75rem;vertical-align:middle}
.svs-sample{display:inline-flex;align-items:center;font-family:var(--wp--preset--font-family--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .5rem;border-radius:3px;
  border:1px dashed #FFB547;color:#FFB547;vertical-align:middle;line-height:1;white-space:nowrap;
  -webkit-text-fill-color:#FFB547}

/* ---------- Film grain: breaks up the flat digital black ---------- */
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Shared section frame ---------- */
.svs-shell{width:var(--svs-shell);max-width:1280px;margin-inline:auto}
main .wp-block-post-content > .alignfull{margin-block:0}
.svs-section{padding-block:clamp(5rem,10vw,8.5rem);border-top:1px solid var(--wp--preset--color--line)}
.svs-sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1.5rem 3rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.svs-sechead h2,.svs-logos__head h2,.svs-work__head h2{
  font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.015em;margin:.9rem 0 0;max-width:15ch}
.svs-sechead > p{color:var(--wp--preset--color--muted);max-width:42ch;margin:0;line-height:1.6}

/* ---------- Hero ---------- */
.svs-hero{min-height:clamp(38rem,94vh,58rem);padding-block:clamp(7rem,15vh,10rem) clamp(4rem,9vh,6rem)}
.svs-hero .svs-rain{opacity:.5}
.svs-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(to right,var(--wp--preset--color--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--wp--preset--color--line) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(75% 70% at 72% 35%,#000 15%,transparent 72%);
  mask-image:radial-gradient(75% 70% at 72% 35%,#000 15%,transparent 72%)}
.svs-hero__title{font-size:clamp(2.3rem,6.4vw,6rem);font-weight:800;line-height:.98;
  letter-spacing:-.018em;text-transform:uppercase;max-width:none;margin:1.3rem 0 0}
.svs-hero__line{display:block;animation:svsRise .95s var(--svs-ease) both}
.svs-hero__line:nth-child(2){animation-delay:.1s}
.svs-hero__line:nth-child(3){animation-delay:.2s}
.svs-hero__sub{max-width:46ch;font-size:clamp(1.05rem,1.35vw,1.28rem);margin-top:1.8rem;
  animation:svsRise .95s .3s var(--svs-ease) both}
.svs-hero__ctas{animation:svsRise .95s .4s var(--svs-ease) both;margin-top:2.2rem}
.svs-hero__trust{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:3rem 0 0;padding-top:1.5rem;
  border-top:1px solid var(--wp--preset--color--line);max-width:780px;
  font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.svs-hero__trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--wp--preset--color--glow);box-shadow:0 0 10px var(--wp--preset--color--glow);
  margin-right:.6rem;vertical-align:middle}
.svs-hero__scroll{position:absolute;left:50%;bottom:1.6rem;z-index:1;width:1px;height:54px;
  background:linear-gradient(var(--wp--preset--color--line),transparent);overflow:hidden}
.svs-hero__scroll::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--wp--preset--color--glow);animation:svsDrop 2.2s ease-in-out infinite}
@keyframes svsRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes svsDrop{to{top:110%}}

/* ---------- Client marquee ---------- */
.svs-logos{padding-block:clamp(4.5rem,8vw,6.5rem) 0;border-top:1px solid var(--wp--preset--color--line);
  background:var(--wp--preset--color--surface);overflow:hidden}
.svs-logos__head{width:var(--svs-shell);max-width:1280px;margin:0 auto clamp(2.2rem,4vw,3rem);text-align:center}
.svs-logos__head h2{margin-inline:auto;max-width:18ch;font-size:clamp(1.6rem,3.6vw,2.9rem)}
.svs-marquee{display:flex;overflow:hidden;border-top:1px solid var(--wp--preset--color--line);padding-block:1.1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.svs-marquee__track{display:flex;flex:none;list-style:none;margin:0;padding:0;animation:svsMarquee 42s linear infinite}
.svs-marquee--rev .svs-marquee__track{animation-direction:reverse;animation-duration:52s}
.svs-marquee:hover .svs-marquee__track{animation-play-state:paused}
.svs-marquee__track li{display:flex;align-items:center;white-space:nowrap;padding-inline:1.7rem;
  font-family:var(--wp--preset--font-family--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.4rem);letter-spacing:.02em;color:var(--wp--preset--color--text)}
.svs-marquee__track li::after{content:"";width:6px;height:6px;border-radius:50%;margin-left:3.4rem;
  background:var(--wp--preset--color--primary)}
.svs-marquee--rev .svs-marquee__track li{color:var(--wp--preset--color--muted)}
@keyframes svsMarquee{to{transform:translateX(-100%)}}

/* ---------- Metric strip ---------- */
.svs-stats{border-block:1px solid var(--wp--preset--color--line);background:var(--wp--preset--color--background)}
.svs-stats__grid{width:var(--svs-shell);max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.svs-stats__grid{grid-template-columns:repeat(4,1fr)}}
.svs-stat{position:relative;padding:clamp(2.2rem,4.5vw,3.4rem) clamp(1rem,2vw,1.8rem);
  border-left:1px solid var(--wp--preset--color--line)}
.svs-stat::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:46%;
  background:linear-gradient(var(--wp--preset--color--glow),transparent)}
.svs-stat__n{display:block;font-family:var(--wp--preset--font-family--display);font-weight:800;
  font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;letter-spacing:-.02em}
.svs-stat__n em{font-style:normal;color:var(--wp--preset--color--glow)}
.svs-stat__l{display:block;margin-top:.9rem;font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp--preset--color--muted)}
.svs-stats__note{width:var(--svs-shell);max-width:1280px;margin:0 auto;padding-block:1rem;
  color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--micro)}

/* ---------- Featured work ---------- */
.svs-work{padding-block:clamp(5rem,10vw,8.5rem);overflow:hidden}
.svs-work__head{width:var(--svs-shell);max-width:1280px;margin:0 auto clamp(2.2rem,4vw,3.2rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.svs-work__nav{display:flex;align-items:center;gap:.7rem}
.svs-work__btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--wp--preset--color--text);border:1px solid var(--wp--preset--color--line);
  transition:border-color .2s var(--svs-ease),color .2s var(--svs-ease),background-color .2s var(--svs-ease)}
.svs-work__btn:hover{border-color:var(--wp--preset--color--glow);color:var(--wp--preset--color--glow)}
.svs-work__count{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--small);
  color:var(--wp--preset--color--muted);min-width:7ch;text-align:center}
.svs-work__all{margin-left:.8rem;font-size:var(--wp--preset--font-size--small);text-transform:uppercase;
  letter-spacing:.1em;color:var(--wp--preset--color--text);text-decoration:none;
  border-bottom:1px solid var(--wp--preset--color--glow);padding-bottom:.2rem}
.svs-work__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,780px);
  gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--wp--preset--spacing--30),calc((100vw - 1280px) / 2));
  scroll-padding-inline:max(var(--wp--preset--spacing--30),calc((100vw - 1280px) / 2))}
.svs-work__track::-webkit-scrollbar{display:none}
.svs-work__track:focus-visible{outline:2px solid var(--wp--preset--color--glow);outline-offset:4px}
.svs-work__card{scroll-snap-align:start;position:relative;display:block;aspect-ratio:16/10;border-radius:14px;
  overflow:hidden;background:var(--wp--preset--color--surface-2);color:var(--wp--preset--color--text);
  text-decoration:none;border:1px solid var(--wp--preset--color--line)}
.svs-work__card img,.svs-work__card .svs-pcard__placeholder{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .9s var(--svs-ease)}
.svs-work__card:hover img{transform:scale(1.05)}
.svs-work__card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(2,8,18,.93))}
.svs-work__meta{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;justify-content:space-between;
  align-items:flex-end;gap:1rem;padding:clamp(1.3rem,3vw,2.2rem)}
.svs-work__type{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--glow)}
.svs-work__title{display:block;margin-top:.55rem;font-family:var(--wp--preset--font-family--display);
  font-weight:700;text-transform:uppercase;font-size:clamp(1.15rem,2.3vw,1.9rem);line-height:1.05}
.svs-work__idx{font-family:var(--wp--preset--font-family--display);font-weight:800;line-height:1;
  font-size:clamp(2.2rem,5vw,3.8rem);color:var(--wp--preset--color--text);-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--wp--preset--color--text) 45%,transparent)}

/* ---------- Service cards: numbered, uppercase ---------- */
.svs-services .svs-grid{counter-reset:svc}
.svs-scard{counter-increment:svc}
.svs-scard__link{position:relative;padding:clamp(1.7rem,3vw,2.3rem);min-height:18rem}
.svs-scard__link::before{content:counter(svc,decimal-leading-zero);position:absolute;top:1.2rem;right:1.4rem;
  font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--wp--preset--color--line)}
.svs-scard__title{text-transform:uppercase;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:700;
  line-height:1.1;margin-top:auto;max-width:14ch}
.svs-scard__icon{margin-bottom:auto}
.svs-pcard__title{text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.1}

/* ---------- Pointer spotlight on cards (hover devices only, set by app.js) ---------- */
.svs-card,.svs-pick{--mx:50%;--my:0%}
.svs-card{position:relative}
.svs-card::before,.svs-pick::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--wp--preset--color--glow) 12%,transparent),transparent 60%);
  transition:opacity .3s var(--svs-ease)}
.svs-card:hover::before,.svs-pick:hover::before{opacity:1}
.svs-card > *{position:relative;z-index:1}

/* ---------- Service picker ---------- */
.svs-picker__grid{display:grid;gap:1px;margin:0;padding:0;border:1px solid var(--wp--preset--color--line);
  border-radius:14px;overflow:hidden;background:var(--wp--preset--color--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.svs-pick{position:relative;display:flex;flex-direction:column;gap:.6rem;min-height:15rem;cursor:pointer;
  padding:clamp(1.6rem,3vw,2.2rem);background:var(--wp--preset--color--background);
  transition:background-color .25s var(--svs-ease)}
.svs-pick > *{position:relative;z-index:1}
.svs-pick:hover{background:var(--wp--preset--color--surface)}
.svs-pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.svs-pick__n{position:absolute;top:1.2rem;right:1.4rem;font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:var(--wp--preset--color--muted);
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px var(--wp--preset--color--line)}
.svs-pick__icon{color:var(--wp--preset--color--primary);line-height:0}
.svs-pick__t{margin-top:auto;font-family:var(--wp--preset--font-family--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.1;max-width:15ch}
.svs-pick__p{color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--small);
  line-height:1.55;max-width:34ch;padding-right:2.5rem}
.svs-pick__check{position:absolute;right:1.4rem;bottom:1.4rem;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--wp--preset--color--line);
  transition:background-color .2s var(--svs-ease),border-color .2s var(--svs-ease)}
.svs-pick:has(input:checked){background:color-mix(in srgb,var(--wp--preset--color--primary) 13%,var(--wp--preset--color--background))}
.svs-pick:has(input:checked) .svs-pick__check{background:var(--wp--preset--color--primary-solid);
  border-color:var(--wp--preset--color--primary-solid)}
.svs-pick:has(input:checked) .svs-pick__check::after{content:"";width:10px;height:5px;margin-top:-2px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.svs-pick:has(input:focus-visible){outline:2px solid var(--wp--preset--color--glow);outline-offset:-3px}
.svs-picker__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.6rem}
.svs-picker__count{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--small);
  color:var(--wp--preset--color--muted)}

/* ---------- Process ---------- */
.svs-process__grid{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));border-top:1px solid var(--wp--preset--color--line)}
.svs-process__step{position:relative;padding-top:2rem}
.svs-process__step::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;
  background:var(--wp--preset--color--glow);box-shadow:0 0 12px var(--wp--preset--color--glow)}
.svs-process__n{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--small);
  letter-spacing:.14em;color:var(--wp--preset--color--glow)}
.svs-process__t{font-size:clamp(1.1rem,1.6vw,1.35rem);margin:1.1rem 0 .7rem}
.svs-process__b{color:var(--wp--preset--color--muted);margin:0;line-height:1.65;max-width:32ch}

/* ---------- Testimonials ---------- */
.svs-reviews{background:var(--wp--preset--color--surface)}
.svs-reviews .svs-card{background:var(--wp--preset--color--background)}
.svs-reviews__grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.svs-review{margin:0;padding:clamp(1.7rem,3vw,2.3rem);display:flex;flex-direction:column;gap:1.1rem}
.svs-review__mark{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:4.2rem;
  line-height:.7;height:2.2rem;color:var(--wp--preset--color--primary)}
.svs-review__stars{color:#FFC94D;letter-spacing:.18em}
.svs-review blockquote{margin:0;font-size:var(--wp--preset--font-size--large);line-height:1.55}
.svs-review figcaption{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:1.2rem;
  border-top:1px solid var(--wp--preset--color--line)}
.svs-review__av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--wp--preset--font-family--display);font-weight:800;color:#020812;
  background:linear-gradient(135deg,var(--wp--preset--color--primary),var(--wp--preset--color--glow))}
.svs-review__who{font-weight:600}
.svs-review__role{display:block;font-weight:400;color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--small)}

/* ---------- Closing CTA ---------- */
.svs-cta{position:relative;overflow:hidden;margin-top:0;padding-block:clamp(5.5rem,11vw,9rem);
  background:radial-gradient(55% 120% at 50% 125%,color-mix(in srgb,var(--wp--preset--color--primary) 38%,transparent),transparent 70%),
    var(--wp--preset--color--surface)}
.svs-cta__title{font-size:clamp(2.2rem,6vw,5.2rem);line-height:.98;max-width:14ch;text-transform:uppercase}

/* ---------- Motion off: everything readable, nothing moving ---------- */
@media (prefers-reduced-motion:reduce){
  .svs-marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}
  .svs-marquee__track{animation:none;flex-wrap:wrap;justify-content:center}
  .svs-marquee__track[aria-hidden="true"]{display:none}
  .svs-hero__scroll{display:none}
}
@media (max-width:781px){
  .svs-work__all{display:none}
  .svs-hero__scroll{display:none}
}


/* ==========================================================================
   Phase 7 fixes from the side-by-side review
   ========================================================================== */

/* Full-bleed sections reach both edges again (the rail reset above now skips
   .alignfull, so WordPress's own breakout margins apply). */
main .wp-block-post-content > .alignfull{max-width:none;width:auto}

/* Picker: a 1px-gap grid painted the empty cells slate when the service count
   did not fill the last row. Hairlines now come from each card's own border,
   so an unfilled row simply shows the page. */
.svs-picker__grid{gap:0;background:none;border:0;border-radius:0;overflow:visible;
  border-top:1px solid var(--wp--preset--color--line);border-left:1px solid var(--wp--preset--color--line)}
.svs-pick{border-right:1px solid var(--wp--preset--color--line);border-bottom:1px solid var(--wp--preset--color--line)}
@media (min-width:1000px){.svs-picker__grid{grid-template-columns:repeat(3,1fr)}}

/* Testimonial copy was set at the large size; quotes read better smaller. */
.svs-review blockquote{font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.6}

/* Mobile header: the wide display face wrapped the brand onto two lines and
   pushed the quote button off-screen. The drawer already carries navigation,
   and the sticky WhatsApp button covers the quick-contact job. */
@media (max-width:600px){
  .svs-brand,.svs-brand a{font-size:.8rem;letter-spacing:0}
}
/* Only the narrowest phones lose the header button. The selector needs two
   classes to beat WordPress's `.wp-block-buttons.is-layout-flex{display:flex}`. */
@media (max-width:420px){
  .svs-header .svs-header__cta{display:none}
}

/* ==========================================================================
   Content migration: logo, team, contact details, wide pages
   ========================================================================== */
/* The wordmark is only legible above ~60px tall — the file is 300x251, so a
   52px cap left it 62px wide and unreadable. */
.svs-logo img{display:block;height:auto;max-height:70px;width:auto}
.svs-footer .svs-logo img{max-height:120px}
@media (max-width:600px){.svs-logo img{max-height:52px}}

/* Wide pages: prose on the rail, full-bleed sections still break out. */
.svs-wide .wp-block-post-content > :not(.alignfull){
  margin-left:max(var(--wp--preset--spacing--30),calc((100% - 1280px) / 2)) !important;
  margin-right:var(--wp--preset--spacing--30) !important;max-width:68ch !important}
.svs-wide .wp-block-post-content > .wp-block-columns{max-width:1280px !important;gap:clamp(1.5rem,4vw,4rem);
  margin-block:clamp(2.5rem,5vw,4rem)}
.svs-lead{font-size:var(--wp--preset--font-size--large);line-height:1.55;color:var(--wp--preset--color--text)}
.svs-wide .wp-block-post-content > p{color:var(--wp--preset--color--muted)}
.svs-wide .wp-block-columns h2{font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 .8rem}
.svs-wide .wp-block-columns p{color:var(--wp--preset--color--muted);line-height:1.65}

/* Team */
.svs-team__grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.svs-member{margin:0}
.svs-member__photo{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:var(--wp--preset--color--surface-2);border:1px solid var(--wp--preset--color--line)}
.svs-member__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25);
  transition:filter .4s var(--svs-ease),transform .7s var(--svs-ease)}
.svs-member:hover .svs-member__photo img{filter:none;transform:scale(1.04)}
.svs-member__initial{display:grid;place-items:center;height:100%;font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:3rem;color:var(--wp--preset--color--muted)}
.svs-member figcaption{padding-top:.9rem}
.svs-member__name{display:block;font-family:var(--wp--preset--font-family--display);font-weight:700;
  text-transform:uppercase;font-size:.98rem;line-height:1.2}
.svs-member__role{display:block;margin-top:.4rem;font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--glow)}

/* Contact */
.svs-contact-cols{gap:clamp(1.5rem,4vw,3.5rem)}
.svs-cdetails{padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--wp--preset--color--line);border-radius:14px;
  background:var(--wp--preset--color--surface)}
.svs-cdetails dl{margin:0 0 1.6rem;display:flex;flex-direction:column;gap:1.4rem}
.svs-cdetails dt{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.svs-cdetails dd{margin:.35rem 0 0;font-family:var(--wp--preset--font-family--ui);font-size:var(--wp--preset--font-size--large);line-height:1.45}
.svs-cdetails a{color:var(--wp--preset--color--text);text-decoration:none}
.svs-cdetails a:hover{color:var(--wp--preset--color--glow)}
.svs-cdetails__dir{font-size:var(--wp--preset--font-size--small)!important}
.svs-cdetails__dir a{color:var(--wp--preset--color--glow)}

/* ==========================================================================
   Client website guide (Sep 2026)
   Manrope headings + Inter body/UI. "Keep headings strong but not oversized;
   use whitespace, not huge type, to create the premium feel."
   Colours are unchanged.
   ========================================================================== */
h1,h2,h3,h4,.svs-hero__title,.svs-sechead h2,.svs-logos__head h2,.svs-work__head h2,.svs-cta__title,
.svs-pagehead h1,.svs-scard__title,.svs-pcard__title,.svs-work__title,.svs-pick__t,.svs-process__t,
.svs-member__name,.svs-stat__n,.svs-metric__n,.svs-marquee__track li,.svs-work__idx,.svs-pick__n,
.svs-review__mark,.svs-footer__head{
  font-family:var(--wp--preset--font-family--display);text-transform:none}
.svs-btn,.wp-element-button,.wp-block-button__link,.svs-work__all,
.svs-header .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--ui);text-transform:none;letter-spacing:0}
.svs-btn,.wp-element-button,.wp-block-button__link{font-weight:600;font-size:.95rem;padding:.9rem 1.5rem;border-radius:8px}
.svs-header .wp-block-navigation-item__content{font-size:.95rem;font-weight:500}

/* Scale: strong, never shouting */
.svs-hero__title{font-size:clamp(2.3rem,4.8vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.svs-hero__sub{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.svs-pagehead h1{font-size:clamp(2.2rem,4.2vw,3.6rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;max-width:24ch}
.svs-sechead h2,.svs-work__head h2{font-size:clamp(1.8rem,3.2vw,2.75rem);font-weight:700;line-height:1.14;letter-spacing:-.025em;max-width:22ch}
.svs-logos__head h2{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;max-width:26ch}
.svs-cta__title{font-size:clamp(2rem,3.8vw,3.2rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;max-width:18ch}
.svs-scard__title,.svs-pcard__title,.svs-pick__t{font-size:clamp(1.1rem,1.4vw,1.3rem);font-weight:700;letter-spacing:-.015em;line-height:1.25;max-width:none}
.svs-work__title{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.svs-process__t{font-size:1.2rem;font-weight:700}
.svs-member__name{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.svs-marquee__track li{font-weight:700;letter-spacing:-.01em}
.svs-stat__n{font-weight:800;letter-spacing:-.03em}
.svs-outline{-webkit-text-stroke:1.2px color-mix(in srgb,var(--wp--preset--color--text) 60%,transparent)}

/* Premium feel from space, not size */
.svs-section{padding-block:clamp(5.5rem,10vw,9rem)}
.svs-sechead{margin-bottom:clamp(3rem,5vw,4.5rem)}

/* About page long-form */
.svs-wide .wp-block-post-content > h2.wp-block-heading{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-top:clamp(3.5rem,6vw,5rem);margin-bottom:1rem;max-width:28ch !important}
.svs-wide .wp-block-post-content > .svs-quote-lead{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--wp--preset--color--text);max-width:30ch !important}
.svs-list-2col{columns:2;column-gap:3rem}
@media (max-width:640px){.svs-list-2col{columns:1}}
.svs-wide .wp-block-post-content ul li{margin-bottom:.55rem;color:var(--wp--preset--color--muted)}
.svs-wide .wp-block-post-content ul li strong{color:var(--wp--preset--color--text)}
.svs-mv .svs-eyebrow{margin-bottom:.6rem}
.svs-mv h2{font-size:clamp(1.35rem,2.2vw,1.75rem) !important;line-height:1.25}

/* Footer (client guide: brand / explore / services / contact + bottom bar) */
.svs-sitefoot{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:720px){.svs-sitefoot{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.svs-footer__lede{color:var(--wp--preset--color--text);font-weight:600;margin:1.1rem 0 .45rem}
.svs-footer__about{color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--small);line-height:1.6;max-width:36ch;margin:0}
.svs-footer__head{font-size:1rem;font-weight:700;letter-spacing:0;margin:0 0 1.1rem}
.svs-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.svs-footer__links a{color:var(--wp--preset--color--muted);text-decoration:none;font-size:var(--wp--preset--font-size--small)}
.svs-footer__links a:hover{color:var(--wp--preset--color--glow)}
.svs-footer__links .is-all a{color:var(--wp--preset--color--glow)}
.svs-footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  padding-top:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--wp--preset--color--line)}
.svs-footer__legal{color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--micro);margin:0}
.svs-footer__legal a{color:inherit;text-decoration:none}
.svs-footer__legal a:hover{color:var(--wp--preset--color--glow)}
.svs-footer__legal .sep{margin-inline:.5rem;opacity:.5}
.svs-cdetails--compact{padding:0;border:0;background:none;border-radius:0}
.svs-cdetails--compact dl{gap:.9rem;margin:0}
.svs-cdetails--compact dt{font-size:.66rem}
.svs-cdetails--compact dd{font-size:var(--wp--preset--font-size--small);font-family:var(--wp--preset--font-family--body);margin-top:.2rem}
.svs-cdetails--compact dd a{color:var(--wp--preset--color--muted)}
.svs-cdetails--compact dd a:hover{color:var(--wp--preset--color--glow)}

/* Wide pages (About): the Phase 4 rail reset is `main .wp-block-post-content
   .is-layout-constrained > :not(.alignfull)` at specificity 0,3,1 with
   !important, which beat the 0,3,0 wide-page rule and pinned the prose to the
   padding edge at full width. Matching the element + an extra class wins. */
main.svs-wide .wp-block-post-content.is-layout-constrained > :not(.alignfull){
  margin-left:max(var(--wp--preset--spacing--30),calc((100% - 1280px) / 2)) !important;
  margin-right:var(--wp--preset--spacing--30) !important;
  max-width:68ch !important}
main.svs-wide .wp-block-post-content.is-layout-constrained > .wp-block-columns{max-width:1280px !important}
main.svs-wide .wp-block-post-content > .svs-stats{margin-block:clamp(3rem,6vw,4.5rem)}

/* Footer logo: the footer block prints get_custom_logo(), not the site-logo
   block, so the .svs-logo size cap never applied. */
.svs-sitefoot .custom-logo-link{display:inline-block;line-height:0}
.svs-sitefoot .custom-logo{max-height:96px;width:auto;height:auto}

/* Hero second line: with the lighter Manrope stroke, the hero grid showed
   through the hollow letters and read as a strikethrough. Solid muted fill
   keeps the two-tone headline without the see-through glyphs. */
.svs-outline{-webkit-text-stroke:0;-webkit-text-fill-color:var(--wp--preset--color--muted);color:var(--wp--preset--color--muted)}

/* About highlights: bold phrases step up to full text colour so they read as
   highlights inside the muted body copy, without shouting. */
.svs-wide .wp-block-post-content :is(p,li) strong{color:var(--wp--preset--color--text);font-weight:600}


/* ==========================================================================
   Client brand palette (Sep 2026): #020812 background · #02528A deep blue ·
   #06A0DF primary blue · #17C1ED neon cyan · #FFFFFF white.
   Filled buttons use deep blue (white text 8.15:1). White on #06A0DF is only
   2.96:1, so hovers flip to dark text on the lighter blue (6.79:1).
   ========================================================================== */
.svs-btn--primary,.wp-element-button,.wp-block-button__link{background:var(--wp--preset--color--primary-solid);color:#fff}
.svs-btn--primary:hover,.wp-element-button:hover,.wp-block-button__link:hover{
  background:var(--wp--preset--color--primary);color:var(--wp--preset--color--background)}
.svs-btn--primary{box-shadow:0 12px 32px -14px color-mix(in srgb,var(--wp--preset--color--primary) 70%,transparent)}
/* Hero and CTA glows built from the deep blue → cyan range, per the brand notes */
.svs-hero::before{background:
  radial-gradient(70% 60% at 12% 40%, color-mix(in srgb,var(--wp--preset--color--primary-solid) 34%,transparent) 0%, transparent 64%),
  radial-gradient(40% 40% at 85% 20%, color-mix(in srgb,var(--wp--preset--color--glow) 8%,transparent) 0%, transparent 70%),
  linear-gradient(90deg,var(--wp--preset--color--background) 8%,color-mix(in srgb,var(--wp--preset--color--background) 55%,transparent) 62%,transparent 100%)}
.svs-cta{background:
  radial-gradient(55% 120% at 50% 125%,color-mix(in srgb,var(--wp--preset--color--primary-solid) 60%,transparent),transparent 70%),
  radial-gradient(35% 60% at 50% 120%,color-mix(in srgb,var(--wp--preset--color--glow) 18%,transparent),transparent 70%),
  var(--wp--preset--color--surface)}
.svs-review__av{color:#020812}

/* ---------- Newsletter (Insights) ---------- */
.svs-newsletter{margin-top:clamp(3rem,6vw,5rem);padding:clamp(2rem,4vw,3rem);border-radius:16px;
  border:1px solid var(--wp--preset--color--line);display:grid;gap:1.5rem 3rem;align-items:center;
  background:radial-gradient(80% 140% at 100% 0%,color-mix(in srgb,var(--wp--preset--color--primary-solid) 40%,transparent),transparent 62%),
    var(--wp--preset--color--surface)}
@media (min-width:860px){.svs-newsletter{grid-template-columns:1.1fr 1fr}}
.svs-newsletter h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:.7rem 0 .6rem}
.svs-newsletter__copy p{color:var(--wp--preset--color--muted);margin:0;line-height:1.6;max-width:44ch}
.svs-form.svs-newsletter__form{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:.75rem;max-width:none}
.svs-newsletter__form .svs-field{flex:1 1 240px}
.svs-newsletter__form .svs-btn{flex:none}
.svs-newsletter__note{width:100%;margin:0;color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--micro)}
.svs-newsletter .svs-form__done{padding:1.4rem 1.5rem}

/* ==========================================================================
   Brand typography (Sep 2026): Montserrat Bold + Light, taken from the logo.
   Bold carries headings; Light carries the supporting line beside it.
   Body copy stays at 400 so long text is still easy to read on the dark ground.
   ========================================================================== */
body{font-weight:400;letter-spacing:0}
h1,h2,h3,h4,.svs-hero__title,.svs-sechead h2,.svs-logos__head h2,.svs-work__head h2,.svs-cta__title,
.svs-banner__title,.svs-scard__title,.svs-pcard__title,.svs-work__title,.svs-pick__t,.svs-process__t,
.svs-member__name,.svs-stat__n,.svs-metric__n,.svs-newsletter h2{font-weight:700;letter-spacing:-.01em}
.svs-hero__title{font-size:clamp(2.1rem,5.4vw,5rem);letter-spacing:-.015em;line-height:1.02}
.svs-hero__title .svs-outline,.svs-outline{font-weight:300;-webkit-text-stroke:0}
.svs-cta__title{letter-spacing:-.015em}
.svs-hero__sub,.svs-lead,.svs-banner__text,.svs-sechead p,.svs-cta__body{font-weight:300}
.svs-stat__n{letter-spacing:-.02em}
.svs-eyebrow{font-weight:600;letter-spacing:.16em}
.svs-scard__title,.svs-pcard__title{text-transform:none}
.svs-btn,.wp-element-button,.wp-block-button__link{font-weight:600;letter-spacing:.01em}

/* ---------- Page banner: the same opening on every inner page ---------- */
.svs-banner{position:relative;isolation:isolate;overflow:clip;
  display:flex;align-items:flex-end;min-height:clamp(20rem,52vh,30rem);
  padding-block:clamp(5rem,11vw,8rem) clamp(2.75rem,5vw,4rem);
  border-bottom:1px solid var(--wp--preset--color--line);
  background:
    radial-gradient(60% 90% at 8% 100%,color-mix(in srgb,var(--wp--preset--color--primary-solid) 45%,transparent),transparent 70%),
    radial-gradient(40% 60% at 92% 10%,color-mix(in srgb,var(--wp--preset--color--glow) 12%,transparent),transparent 70%),
    var(--wp--preset--color--background)}
.svs-banner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(to right,var(--wp--preset--color--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--wp--preset--color--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(70% 90% at 80% 20%,#000 10%,transparent 70%);
  mask-image:radial-gradient(70% 90% at 80% 20%,#000 10%,transparent 70%)}
.svs-banner .svs-banner__rain{opacity:.28;
  -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%);
  mask-image:linear-gradient(100deg,transparent 35%,#000 85%)}
.svs-banner__inner{position:relative;z-index:1;width:var(--svs-shell);max-width:1280px;margin-inline:auto}
.svs-banner__title{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.12;margin:.9rem 0 0;max-width:22ch;
  animation:svsRise .9s var(--svs-ease) both}
.svs-banner__text{color:var(--wp--preset--color--muted);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;
  max-width:62ch;margin:1rem 0 0;animation:svsRise .9s .12s var(--svs-ease) both}
.svs-banner__text + .svs-banner__text{margin-top:.5rem}
.svs-banner__back a{color:inherit;text-decoration:none}
.svs-banner__back a:hover{color:var(--wp--preset--color--text)}
main > .svs-banner + *{margin-top:clamp(2.5rem,5vw,4rem)}
main.svs-wide > .svs-banner + .wp-block-post-content{padding-top:clamp(2.5rem,5vw,4rem);margin-top:0}
@media (prefers-reduced-motion:reduce){.svs-banner__title,.svs-banner__text{animation:none}}

/* ---------- Portfolio: image-led cards, two large openers ---------- */
.svs-portfolio .svs-chip{font-family:var(--wp--preset--font-family--ui)}
@media (min-width:900px){
  .svs-portfolio .svs-grid{grid-template-columns:repeat(6,1fr);gap:1.5rem}
  .svs-portfolio .svs-grid > .svs-pcard{grid-column:span 2}
  .svs-portfolio .svs-grid > .svs-pcard:nth-child(-n+2){grid-column:span 3}
  .svs-portfolio .svs-grid > .svs-pcard:nth-child(-n+2) .svs-pcard__media{aspect-ratio:16/10}
  .svs-portfolio .svs-grid > .svs-pcard:nth-child(-n+2) .svs-pcard__title{font-size:clamp(1.3rem,1.8vw,1.6rem)}
}
.svs-pcard{border-radius:16px;background:linear-gradient(180deg,var(--wp--preset--color--surface),var(--wp--preset--color--background))}
.svs-pcard:hover,.svs-pcard:focus-within{border-color:color-mix(in srgb,var(--wp--preset--color--glow) 55%,transparent);
  box-shadow:0 24px 60px -30px color-mix(in srgb,var(--wp--preset--color--primary) 80%,transparent)}
.svs-pcard__media{position:relative;margin:.6rem .6rem 0;border-radius:11px;background:var(--wp--preset--color--surface-2)}
.svs-pcard__media img{transition:transform .7s var(--svs-ease),filter .7s var(--svs-ease);filter:saturate(.92)}
.svs-pcard:hover .svs-pcard__media img{transform:scale(1.06);filter:saturate(1.05)}
.svs-pcard__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--wp--preset--color--background) 55%,transparent))}
.svs-pcard__tag{position:absolute;left:.75rem;top:.75rem;z-index:2;padding:.35rem .7rem;border-radius:999px;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:color-mix(in srgb,var(--wp--preset--color--background) 65%,transparent);
  border:1px solid color-mix(in srgb,#fff 16%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.svs-pcard__go{position:absolute;right:.75rem;bottom:.75rem;z-index:2;display:grid;place-items:center;
  width:2.6rem;height:2.6rem;border-radius:50%;color:var(--wp--preset--color--background);
  background:var(--wp--preset--color--glow);opacity:0;transform:translateY(8px) scale(.9);
  transition:opacity .35s var(--svs-ease),transform .35s var(--svs-ease)}
.svs-pcard:hover .svs-pcard__go,.svs-pcard:focus-within .svs-pcard__go{opacity:1;transform:none}
.svs-pcard__body{padding:1rem 1.2rem 1.25rem;gap:.3rem}
.svs-pcard__meta{font-family:var(--wp--preset--font-family--ui);font-size:.8rem;font-weight:300;
  letter-spacing:.02em;text-transform:none;color:var(--wp--preset--color--muted)}
.svs-pcard__title{order:-1;line-height:1.25;transition:color .25s var(--svs-ease)}
.svs-pcard:hover .svs-pcard__title{color:var(--wp--preset--color--glow)}
.svs-portfolio .svs-pcard__sum{display:none}
/* No image yet: a branded cover in the logo's Bold + Light, never an empty box */
.svs-pcard__cover{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.2rem 1.3rem 1.4rem;overflow:hidden;
  background:
    radial-gradient(90% 90% at 100% 0%,color-mix(in srgb,var(--wp--preset--color--glow) 30%,transparent),transparent 60%),
    linear-gradient(135deg,var(--wp--preset--color--primary-solid),var(--wp--preset--color--background) 85%)}
.svs-pcard__cover::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(to right,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:36px 36px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}
.svs-pcard__cover-name{position:relative;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.05;font-weight:300;color:#fff;
  letter-spacing:-.01em;transition:transform .7s var(--svs-ease)}
.svs-pcard__cover-name b{font-weight:700;display:block}
.svs-pcard:hover .svs-pcard__cover-name{transform:translateY(-4px)}
.svs-pcard__cover ~ .svs-pcard__tag{background:color-mix(in srgb,#000 30%,transparent)}
.svs-pcard__cover{z-index:1}
.svs-pcard__cover-name{text-shadow:0 2px 24px rgba(2,8,18,.35)}
.svs-pcard:nth-child(3n+2) .svs-pcard__cover{background:
  radial-gradient(90% 90% at 0% 0%,color-mix(in srgb,var(--wp--preset--color--primary) 38%,transparent),transparent 60%),
  linear-gradient(200deg,var(--wp--preset--color--primary-solid),var(--wp--preset--color--background) 85%)}
.svs-pcard:nth-child(3n) .svs-pcard__cover{background:
  radial-gradient(80% 80% at 50% 110%,color-mix(in srgb,var(--wp--preset--color--glow) 34%,transparent),transparent 65%),
  linear-gradient(160deg,var(--wp--preset--color--surface-2),var(--wp--preset--color--primary-solid))}
.svs-banner__title{max-width:24ch}

/* Homepage hero: back to the original uppercase scale, now in Montserrat Bold + Light */
.svs-hero__title{font-size:clamp(2.2rem,6vw,5.6rem);font-weight:700;line-height:1;letter-spacing:-.01em;text-transform:uppercase;max-width:none}
.svs-hero__title .svs-outline{font-weight:300;letter-spacing:0}

/* ==========================================================================
   About page, rebuilt as aligned sections (client review, Sep 2026).
   One content width, one body size, headings on the left and details on the
   right, partner names and highlights in bold white.
   ========================================================================== */
main.svs-wide .wp-block-post-content.is-layout-constrained > .svs-ab{
  width:var(--svs-shell);max-width:1280px !important;margin-left:auto !important;margin-right:auto !important}
.svs-ab{padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--wp--preset--color--line)}
.svs-ab > *{margin-block:0}
.svs-ab p{margin:0;font-size:1.05rem;line-height:1.75;color:var(--wp--preset--color--muted)}
.svs-ab p + p{margin-top:1.1rem}
.svs-ab h2{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.2;margin:.9rem 0 0;max-width:22ch}
.svs-ab .svs-eyebrow{font-size:var(--wp--preset--font-size--micro);color:var(--wp--preset--color--glow)}

.svs-ab--intro{border-top:0;padding-top:0;display:grid;gap:clamp(1.5rem,5vw,5rem);align-items:end}
.svs-ab p.svs-ab__big{font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.5;font-weight:300;color:var(--wp--preset--color--text)}
.svs-ab__big strong{font-weight:700 !important;color:var(--wp--preset--color--glow) !important}
.svs-ab p.svs-ab__side{margin:0;padding-left:1.4rem;border-left:2px solid var(--wp--preset--color--primary)}

.svs-ab--split{display:grid;gap:clamp(1.5rem,6vw,6rem)}
.svs-ab__body > p:first-child{margin-top:0}
.svs-ab__tags{display:flex;flex-wrap:wrap;gap:.65rem}
.svs-ab p.svs-ab__tag{margin:0;padding:.7rem 1.15rem;border-radius:999px;font-size:.95rem;line-height:1.2;font-weight:500;
  color:var(--wp--preset--color--text);background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line);
  transition:border-color .25s var(--svs-ease),color .25s var(--svs-ease)}
.svs-ab p.svs-ab__tag:hover{border-color:var(--wp--preset--color--glow);color:var(--wp--preset--color--glow)}

.svs-ab__head--row{display:grid;gap:0 clamp(1.5rem,6vw,6rem);margin-bottom:clamp(2rem,4vw,3rem)}
.svs-ab__head--row .svs-eyebrow{grid-column:1/-1}
.svs-ab p.svs-ab__intro{align-self:end;max-width:52ch}
.svs-ab__cards{display:grid;gap:1.25rem}
.svs-ab__card{margin:0;padding:clamp(1.4rem,2.5vw,2rem);border-radius:16px;border:1px solid var(--wp--preset--color--line);
  background:linear-gradient(180deg,var(--wp--preset--color--surface),var(--wp--preset--color--background));
  transition:border-color .3s var(--svs-ease),transform .3s var(--svs-ease)}
.svs-ab__card:hover{border-color:color-mix(in srgb,var(--wp--preset--color--glow) 45%,transparent);transform:translateY(-3px)}
.svs-ab p.svs-ab__partner{font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25;margin-bottom:.75rem}
.svs-ab p.svs-ab__partner strong{font-weight:700;color:var(--wp--preset--color--text)}
.svs-ab__partner::before{content:"";display:block;width:2.2rem;height:3px;border-radius:3px;margin-bottom:1.1rem;
  background:linear-gradient(90deg,var(--wp--preset--color--primary),var(--wp--preset--color--glow))}

.svs-ab--mv{display:grid;gap:1.25rem;border-top:0;padding-top:0}
.svs-ab__card--mv h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:.8rem 0 1rem}
.svs-ab__card--mv{padding:clamp(1.8rem,3.5vw,2.8rem)}

.svs-ab p.svs-ab__num{font-size:.85rem;font-weight:700;letter-spacing:.08em;color:var(--wp--preset--color--glow);margin-bottom:1.4rem}
.svs-ab__card--why p + p{margin-top:0}
.svs-ab__card--why p:last-child{font-size:1rem;line-height:1.6}

@media (min-width:860px){
  .svs-ab--intro{grid-template-columns:1.55fr 1fr}
  .svs-ab--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .svs-ab__head--row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .svs-ab__cards{grid-template-columns:repeat(3,1fr)}
  .svs-ab__cards--why{grid-template-columns:repeat(5,1fr)}
  .svs-ab--mv{grid-template-columns:1fr 1fr}
}
@media (min-width:600px) and (max-width:859px){
  .svs-ab__cards--why{grid-template-columns:1fr 1fr}
}
main.svs-wide .wp-block-post-content > .svs-stats{margin-block:clamp(1rem,3vw,2rem) 0}

/* WordPress adds the global block gap between header, main and footer; the
   sections already carry their own spacing, so it only showed as a dark strip. */
.wp-site-blocks > main,.wp-site-blocks > footer,.wp-site-blocks > .wp-block-template-part + *{margin-block-start:0}

/* ==========================================================================
   Client changes (Sep 17, 2026)
   ========================================================================== */

/* Mobile menu: the header's backdrop blur made it the containing block for the
   fixed overlay, so the open menu was clipped to the header's 80px and only
   "Home" showed. The blur is dropped while the menu is open and the overlay is
   styled to match the site. */
.svs-header:has(.wp-block-navigation__responsive-container.is-menu-open){backdrop-filter:none;-webkit-backdrop-filter:none}
.svs-header .wp-block-navigation__responsive-container.is-menu-open{
  position:fixed;inset:0;height:100dvh;padding:1.25rem var(--wp--preset--spacing--30) 2rem;
  background:var(--wp--preset--color--background) !important;color:var(--wp--preset--color--text) !important;z-index:100000}
.svs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:4.5rem;align-items:flex-start;gap:0}
.svs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  flex-direction:column;align-items:flex-start;gap:0;width:100%}
.svs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%}
.svs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:block;width:100%;padding:1rem 0;font-size:1.35rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--wp--preset--color--text) !important;border-bottom:1px solid var(--wp--preset--color--line);border-radius:0}
.svs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--glow) !important}
.svs-header .wp-block-navigation__responsive-container-close{top:1.4rem;right:var(--wp--preset--spacing--30);color:var(--wp--preset--color--text)}
.svs-header .wp-block-navigation__responsive-container-close svg{width:30px;height:30px}
.svs-header .wp-block-navigation__responsive-container-open{color:var(--wp--preset--color--text)}
.svs-header .wp-block-navigation__responsive-container-open svg{width:30px;height:30px}

/* Services: no numbering on the cards. */
.svs-services .svs-grid{counter-reset:none}
.svs-scard{counter-increment:none}
.svs-scard__link::before{content:none !important;display:none !important}

/* Montserrat Light for supporting and body text, Bold for headings. */
body,.svs-ab p,.svs-banner__text,.svs-muted,.wp-block-post-content p,.wp-block-post-content li{font-weight:300}
body strong,body b{font-weight:700}

/* Service detail sections written from the client brief. */
.svs-svc-sec{margin-block:clamp(2rem,4vw,3rem)}
.svs-svc-sec h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 .9rem}
.svs-svc-sec ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem}
.svs-svc-sec li{color:var(--wp--preset--color--muted);line-height:1.6}
.svs-svc-sec li strong{color:var(--wp--preset--color--text)}

/* Project cards: brand logo instead of a mockup, and the services delivered. */
.svs-pcard__logo{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(80% 80% at 50% 0%,color-mix(in srgb,var(--wp--preset--color--primary) 22%,transparent),transparent 70%),var(--wp--preset--color--surface)}
.svs-pcard__logo img{max-width:70%;max-height:70%;width:auto !important;height:auto !important;object-fit:contain;filter:none !important;transform:none !important}
.svs-pcard__services{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.svs-pcard__services span{font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:.25rem .55rem;border-radius:999px;
  color:var(--wp--preset--color--glow);background:color-mix(in srgb,var(--wp--preset--color--primary) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--wp--preset--color--primary) 30%,transparent)}

/* Insights categories */
.svs-insight-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.svs-work__card .svs-pcard__cover,.svs-work__card .svs-pcard__logo{position:absolute;inset:0}
.svs-work__card .svs-pcard__cover-name{font-size:clamp(2rem,4vw,3.4rem)}

/* ---------- Sep 18: client content round ---------- */
/* Work slider: the card already shows the project name at the bottom, so the large brand
   wordmark on logo-less covers is dropped there — the two used to overlap on phones. */
.svs-work__card .svs-pcard__cover-name{display:none}
/* Logo cards: the logo sits on a white tile in the top part of the card, clear of the
   name and services printed along the bottom. */
.svs-work__card .svs-pcard__logo{inset:0 0 auto 0;height:60%;padding:clamp(.9rem,2.5vw,1.6rem);
  display:flex;align-items:center;justify-content:flex-start;background:none;z-index:1}
.svs-work__card .svs-pcard__logo img{position:static;width:auto !important;height:auto !important;
  max-width:min(62%,320px);max-height:100%;object-fit:contain;background:#fff;border-radius:12px;
  padding:clamp(.4rem,1.2vw,.8rem);box-sizing:border-box}
@media (max-width:640px){
  .svs-work__card{aspect-ratio:4/3}
  .svs-work__type{display:block;line-height:1.5}
}

/* Case study: deliverables, campaign focus, results */
.svs-case__sec{margin-top:clamp(2rem,4vw,3rem)}
.svs-case__list{grid-template-columns:1fr}
@media (min-width:720px){.svs-case__list{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.svs-case__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.svs-case__chips li{font-size:.85rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;color:var(--wp--preset--color--glow);
  background:color-mix(in srgb,var(--wp--preset--color--primary) 14%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--primary) 30%,transparent)}
.svs-case__cols + .svs-case__sec,.svs-case__sec + .svs-case__cols{margin-top:clamp(2rem,4vw,3rem)}

/* Service page: included items in groups, and who it is for */
.svs-groups{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:1fr}
@media (min-width:720px){.svs-groups{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.svs-groups{grid-template-columns:repeat(3,1fr)}}
.svs-group{padding:clamp(1.2rem,2.5vw,1.6rem);border:1px solid var(--wp--preset--color--line);border-radius:14px;
  background:var(--wp--preset--color--surface)}
.svs-group__t{font-size:var(--wp--preset--font-size--large);margin:0 0 1rem}
.svs-service__who{margin:0;color:var(--wp--preset--color--muted);line-height:1.7;max-width:68ch}

/* Footer call to action */
.svs-footcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
  padding-bottom:clamp(2rem,4vw,3rem);margin-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--wp--preset--color--line)}
.svs-footcta__h{margin:0;font-family:var(--wp--preset--font-family--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;max-width:22ch;color:var(--wp--preset--color--text)}

/* Brands strip: client logos on light tiles, text names in between */
.svs-marquee__track li.has-logo{padding-inline:.9rem}
.svs-marquee__track li.has-logo img{display:block;height:64px;width:auto;max-width:150px;object-fit:contain;
  background:#fff;border-radius:10px;padding:.45rem .7rem;box-sizing:content-box}

/* Services page FAQs */
.svs-faqblock{margin-top:clamp(3rem,6vw,5rem)}