/* =========================================================================
 * SILVER SCINTILLA 2.0 — MAIN STYLES
 * Colors, fonts and timings live in tokens.css. This file only ever
 * references tokens, so re-theming never requires touching it.
 *
 *  1. Font
 *  2. Reset & base
 *  3. Layout helpers
 *  4. Buttons (logo-stripe shape)
 *  5. Logo
 *  6. Header
 *  7. Desktop navigation & dropdowns
 *  8. Mobile navigation
 *  9. Hero
 * 10. Shared section parts (block, eyebrow, h2, lead, scroll reveal)
 * 11. Testimonials (Clutch + video)
 * 12. Strengths (numbers + award spotlight)
 * 13. Shared links & section backgrounds
 * 14. Portfolio (stacking project cards)
 * 15. Services (list + panel / accordion)
 * 16. Why choose us (advantage cards)
 * 17. The standard (comparison table)
 * 18. Clutch awards row (top of client stories)
 * 19. Client reviews wall
 * 20. Call-to-action band
 * 21. FAQ
 * 22. About (office viewer)
 * 23. Engagement models
 * 24. Inner page header + Testimonials page
 * 25. Reduced motion
 * 26. Footer (placed before 25 so reduced motion still wins)
 * 27. Content pages — section blocks (also before 25)
 * 28. Blog, search & 404 (also before 25)
 * 29. Cookie notice (also before 25)
 * 27. Content pages — section blocks (also before 25)
 *
 * PERFORMANCE RULES — every section must follow these so scrolling never lags:
 *  1. Animate only transform and opacity. Never animate width/height/top/
 *     left, box-shadow size, or filter.
 *  2. No live filter: blur(), mix-blend-mode, CSS masks or backdrop-filter
 *     on anything that moves or sits over something that moves (canvas,
 *     video, animated backgrounds). Soft glows = radial-gradient, not blur.
 *  3. Never set CSS variables on a large container on every scroll frame —
 *     set transform/opacity directly on the one element that moves.
 *  4. Below-the-fold sections use .ss-section (content-visibility: auto),
 *     so the browser skips rendering them until they come near the screen.
 *  5. Infinite animations pause when their section is off-screen (.is-paused).
 *  6. Canvas/JS animations measure their own frame cost and step down
 *     automatically (see the lag guard in hero-3d.js).
 * ========================================================================= */

/* 1. FONT ------------------------------------------------------------------ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
}

/* 2. RESET & BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-menu-open { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--text-strong); line-height: var(--lh-snug); letter-spacing: -0.02em; font-weight: 800; }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }

/* 3. LAYOUT HELPERS -------------------------------------------------------- */
/* Below-the-fold sections: skipped by the browser until near the viewport. */
.ss-section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Any section marked .is-paused (off-screen) freezes its looping animations. */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

.ss-container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.ss-nowrap { white-space: nowrap; }
.ss-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ss-skip-link { position: absolute; left: 1rem; top: -100px; z-index: var(--z-overlay); padding: .75rem 1.25rem; background: var(--brand); color: var(--on-brand); font-weight: 700; border-radius: var(--radius-sm); }
.ss-skip-link:focus { top: 1rem; }

/* The logo mark as an inline SVG (badges, separators, favicon). */
.ss-mark { width: auto; height: 1em; fill: currentColor; overflow: visible; }

/* 4. BUTTONS — shaped like one of the logo's stripes ----------------------- */
/*
 * The button is an upright box (crisp text, honest click area); its
 * ::before is the slanted stripe — same angle as the logo — carrying the
 * fill, border and glow. Variants only swap the --btn-* variables.
 * Hover: soft lift, glow grows, a light sheen crosses, the arrow loops.
 */
.ss-btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: transparent;
  --btn-glow: 0 0 0 0 transparent;
  --btn-glow-hover: var(--btn-glow);
  --btn-border-hover: var(--btn-border);
  --btn-h: 3.35rem;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  height: var(--btn-h);
  padding-inline: 2em 1.8em;
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ss-btn::before,
.ss-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 7px;
  transform: skewX(var(--skew));
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), opacity var(--dur);
}
.ss-btn::before {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-glow);
}
/* Sheen that sweeps across on hover */
.ss-btn::after {
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--paper) 30%, transparent) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  opacity: 0;
}
.ss-btn:hover,
.ss-btn:focus-visible { transform: translateY(-2px); }
.ss-btn:hover::before,
.ss-btn:focus-visible::before { border-color: var(--btn-border-hover); box-shadow: var(--btn-glow-hover); filter: brightness(1.08); }
.ss-btn:hover::after,
.ss-btn:focus-visible::after { opacity: 1; animation: ss-btn-sheen 1s var(--ease-out); }
.ss-btn:active { transform: translateY(0) scale(.98); }
.ss-btn:focus-visible { outline: none; }
.ss-btn:focus-visible::before { outline: 2px solid var(--brand-bright); outline-offset: 3px; }
@keyframes ss-btn-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.ss-btn__label { position: relative; }
/* Arrow slides out to the right and returns from the left */
.ss-btn__arrow { display: inline-grid; flex-shrink: 0; width: 1.1em; height: 1.1em; overflow: hidden; }
.ss-btn__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ss-btn:hover .ss-btn__arrow svg,
.ss-btn:focus-visible .ss-btn__arrow svg { animation: ss-arrow-loop .6s var(--ease-out); }
@keyframes ss-arrow-loop {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(120%); }
  46%  { transform: translateX(-120%); }
  100% { transform: translateX(0); }
}

.ss-btn--primary {
  --btn-bg: linear-gradient(100deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 78%, var(--paper)) 100%);
  --btn-fg: var(--on-brand);
  --btn-border: color-mix(in srgb, var(--paper) 18%, transparent);
  --btn-glow: 0 10px 28px -12px var(--brand-glow);
  --btn-glow-hover: 0 16px 42px -12px var(--brand-glow), 0 0 0 4px var(--brand-soft);
}
/* Ghost: dark glass that adapts to the text color around it */
.ss-btn--ghost {
  --btn-bg: color-mix(in srgb, currentColor 5%, transparent);
  --btn-border: color-mix(in srgb, currentColor 20%, transparent);
  --btn-border-hover: color-mix(in srgb, currentColor 45%, transparent);
  --btn-glow-hover: 0 12px 34px -16px color-mix(in srgb, currentColor 40%, transparent);
}
.ss-btn--sm { --btn-h: 2.75rem; font-size: var(--fs-xs); padding-inline: 1.5em 1.35em; }
.ss-btn--lg { --btn-h: 3.6rem; font-size: var(--fs-base); padding-inline: 2.2em 2em; }

/* 5. LOGO ------------------------------------------------------------------ */
/*
 * Faceted mark (inline SVG, colors from --mark-1…4 in tokens.css) + the
 * company name as real text, so it follows the surrounding text color and
 * stays crisp at any size. On hover the facets ripple (opacity only).
 */
.ss-logo { display: inline-flex; align-items: center; gap: .65rem; flex-shrink: 0; color: inherit; line-height: 1; }
.ss-logo__mark { height: 36px; width: auto; flex-shrink: 0; overflow: visible; }
.ss-logo__mark .m1 { fill: var(--mark-1); }
.ss-logo__mark .m2 { fill: var(--mark-2); }
.ss-logo__mark .m3 { fill: var(--mark-3); }
.ss-logo__mark .m4 { fill: var(--mark-4); }
.ss-logo:hover .ss-logo__mark path { animation: ss-facet .9s var(--ease-out); animation-delay: calc(var(--n) * 28ms); }
@keyframes ss-facet { 45% { opacity: .45; } }
.ss-logo__text { font-size: 1.4rem; letter-spacing: -.02em; white-space: nowrap; }
.ss-logo__text span { font-weight: 500; }
.ss-logo__text b { font-weight: 800; margin-left: .22em; }
@media (max-width: 560px) {
  .ss-logo { gap: .55rem; }
  .ss-logo__mark { height: 30px; }
  .ss-logo__text { font-size: 1.2rem; }
}

/* 6. HEADER ---------------------------------------------------------------- */
/* Tone "dark" = sits over a dark section (white text). "light" = over white. */
.ss-header {
  --hdr-fg: var(--text-on-dark);
  --hdr-fg-muted: var(--text-on-dark-muted);
  --hdr-bg: color-mix(in srgb, var(--ink) 72%, transparent);
  --hdr-line: var(--line-dark);
  --panel-bg: color-mix(in srgb, var(--ink-2) 94%, transparent);
  --panel-fg: var(--text-on-dark);
  --panel-muted: var(--text-on-dark-muted);
  --panel-line: var(--line-dark);
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--hdr-fg);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.ss-header[data-tone="light"] {
  --hdr-fg: var(--text-strong);
  --hdr-fg-muted: var(--text-muted);
  --hdr-bg: var(--glass-light);
  --hdr-line: var(--line);
  --panel-bg: color-mix(in srgb, var(--paper) 97%, transparent);
  --panel-fg: var(--text-strong);
  --panel-muted: var(--text-muted);
  --panel-line: var(--line);
}
.ss-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-line);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), background-color var(--dur);
}
.ss-header.is-scrolled::before { opacity: 1; }
.ss-header.is-hidden { transform: translateY(-100%); }
.ss-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  height: var(--header-h);
  transition: height var(--dur) var(--ease-out);
}
.ss-header.is-scrolled .ss-header__inner { height: var(--header-h-scrolled); }
.ss-header__actions { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
/* Scroll progress line — a thin brand stripe under the header. */
.ss-header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-bright));
  transform-origin: 0 50%;
  transform: scaleX(0); /* set directly by main.js */
}

/* 7. DESKTOP NAVIGATION ---------------------------------------------------- */
.ss-nav { margin-left: auto; }
.ss-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.ss-nav__list > li { position: relative; }
.ss-nav__list > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .7rem .8rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hdr-fg);
  transition: color var(--dur-fast);
}
/* Hover underline is a mini logo stripe that slides in. */
.ss-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .35rem;
  height: 3px;
  background: var(--brand);
  transform: skewX(var(--skew)) scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
.ss-nav__list > li:hover > a::after,
.ss-nav__list > li:focus-within > a::after,
.ss-nav__list > li.current-menu-item > a::after { transform: skewX(var(--skew)) scaleX(1); }
.ss-nav__list > .menu-item-has-children > a { padding-right: 1.6rem; }
.ss-nav__list > .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: .7rem;
  top: 50%;
  width: .42rem;
  height: .42rem;
  margin-top: -.3rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform var(--dur) var(--ease-out), margin var(--dur) var(--ease-out);
}
.ss-nav__list > .menu-item-has-children:hover > a::before,
.ss-nav__list > .menu-item-has-children:focus-within > a::before { transform: rotate(225deg); margin-top: -.05rem; }

.ss-nav .sub-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  min-width: 270px;
  margin: 0;
  padding: .55rem;
  list-style: none;
  color: var(--panel-fg);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px) scale(.98);
  transform-origin: 50% 0;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
/* Invisible bridge so the pointer can travel from link to panel. */
.ss-nav .sub-menu::before { content: ""; position: absolute; inset: -.9rem 0 auto; height: .9rem; }
.ss-nav li:hover > .sub-menu,
.ss-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
.ss-nav .sub-menu a {
  position: relative;
  display: block;
  padding: .7rem 1.1rem .7rem 1.1rem;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--panel-muted);
  border-radius: 9px;
  transition: color var(--dur-fast), background-color var(--dur-fast), padding var(--dur) var(--ease-out);
}
.ss-nav .sub-menu a::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 50%;
  width: 10px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--brand);
  transform: skewX(var(--skew)) scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
.ss-nav .sub-menu a:hover,
.ss-nav .sub-menu a:focus-visible { color: var(--panel-fg); background: var(--brand-soft); padding-left: 1.9rem; }
.ss-nav .sub-menu a:hover::before,
.ss-nav .sub-menu a:focus-visible::before { transform: skewX(var(--skew)) scaleX(1); }

/* Mega menus (Services, AI, Industries, Hire Developers) --------------------
   A white panel under the header: category rail · links · call-to-action
   card, with Clutch badges along the bottom. The active category carries the
   logo stripe; switching fades the links in. Opacity/transform only. */
.ss-header__inner { position: relative; }
.ss-nav__list > li.is-mega { position: static; }
/* The outer layer is transparent and starts a little higher, bridging the
   gap between the menu word and the panel so it doesn't close on the way. */
.ss-mega {
  position: absolute;
  top: calc(100% - 1rem);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 5;
  padding-top: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  /* Closing waits a moment, so passing the pointer over the bar never flickers. */
  transition: opacity .38s var(--ease-out) .12s, transform .55s var(--ease-out) .12s, visibility 0s linear .5s;
}
.ss-nav__list > li.is-mega:hover > .ss-mega,
.ss-nav__list > li.is-mega:focus-within > .ss-mega,
.ss-nav__list > li.is-mega.is-open > .ss-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .42s var(--ease-out) .06s, transform .6s var(--ease-out) .06s, visibility 0s linear 0s; }
/* Categories, links and the CTA card follow in a soft cascade. */
.ss-mega__rail > li, .ss-mega__panes, .ss-mega__cta { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.ss-nav__list > li.is-mega:is(:hover, :focus-within, .is-open) :is(.ss-mega__rail > li, .ss-mega__panes, .ss-mega__cta) { opacity: 1; transform: none; }
.ss-mega__rail > li:nth-child(2) { transition-delay: .03s; }
.ss-mega__rail > li:nth-child(3) { transition-delay: .06s; }
.ss-mega__rail > li:nth-child(4) { transition-delay: .09s; }
.ss-mega__rail > li:nth-child(n+5) { transition-delay: .12s; }
.ss-mega__panes { transition-delay: .08s; }
.ss-mega__cta { transition-delay: .14s; }
.ss-mega__box {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h) - 1.25rem);
  overflow: hidden;
  color: var(--text);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--text-strong) 8%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 80px -34px color-mix(in srgb, var(--ink) 60%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}
.ss-mega__body { display: grid; grid-template-columns: 19rem minmax(0, 1fr) 17.5rem; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.ss-mega__rail { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: 1rem .75rem; list-style: none; position: relative; background: var(--paper); border-right: 1px solid var(--line); }
.ss-mega__cat { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem .6rem .8rem; color: var(--text); border-radius: 12px; }
.ss-mega__cat-icon { flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--brand); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out); }
.ss-mega__cat-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-mega__cat-text { display: grid; flex: 1; min-width: 0; }
.ss-mega__cat-text b { font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.ss-mega__cat-text small { overflow: hidden; font-size: .74rem; line-height: 1.35; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ss-mega__cat .ss-btn__arrow { color: var(--brand); opacity: 0; transform: translateX(-4px); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
/* The highlight behind the active category glides between them (main.js). */
.ss-mega__glide { position: absolute; left: .75rem; right: .75rem; top: 0; height: 0; z-index: 0; background: var(--paper-2); border-radius: 12px; pointer-events: none; opacity: 0; transition: transform .45s var(--ease-out), height .45s var(--ease-out), opacity .3s; }
.ss-mega__glide.is-ready { opacity: 1; }
.ss-mega__cat.is-active .ss-mega__cat-icon { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ss-mega__cat.is-active .ss-btn__arrow { opacity: 1; transform: none; }
.ss-mega__cat:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Long rails (e.g. 11 industries): tighter rows, no second line. */
.is-compact .ss-mega__cat { padding-block: .4rem; }
.is-compact .ss-mega__cat-icon { width: 1.9rem; height: 1.9rem; border-radius: 8px; }
.is-compact .ss-mega__cat-icon svg { width: 1rem; height: 1rem; }

.ss-mega__panes { min-width: 0; padding: 1.4rem 1.6rem 1.5rem; }
.ss-mega__pane { display: none; }
.ss-mega__pane.is-active { display: block; animation: ss-mega-in .45s var(--ease-out); }
@keyframes ss-mega-in { from { opacity: 0; transform: translateY(6px); } }
.ss-mega__pane-title { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem .9rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-deep); }
.ss-mega__pane-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ss-mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; margin: 0; padding: 0; list-style: none; }
.ss-mega__links a { position: relative; display: block; padding: .6rem .75rem .6rem .9rem; border-radius: 10px; transition: background-color var(--dur-fast), padding var(--dur) var(--ease-out); }
.ss-mega__links a::before { content: ""; position: absolute; left: .45rem; top: 1.08rem; width: 8px; height: 3px; background: var(--brand); transform: skewX(var(--skew)) scaleX(0); transform-origin: 0 50%; transition: transform var(--dur) var(--ease-out); }
.ss-mega__links b { display: block; font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--text-strong); transition: color var(--dur-fast); }
.ss-mega__links small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.45; color: var(--text-muted); }
.ss-mega__links a:hover, .ss-mega__links a:focus-visible { padding-left: 1.4rem; background: var(--brand-tint); }
.ss-mega__links a:hover::before, .ss-mega__links a:focus-visible::before { transform: skewX(var(--skew)) scaleX(1); }
.ss-mega__links a:hover b, .ss-mega__links a:focus-visible b { color: var(--brand-deep); }
.ss-mega__links a:focus-visible { outline: none; }
.ss-mega__all { margin: .9rem 0 0 .9rem; font-size: .86rem; }

.ss-mega__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin: 1rem 1rem 1rem 0;
  padding: 1.5rem 1.3rem;
  color: var(--text-on-dark);
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
    var(--ink);
  border-radius: var(--radius);
}
.ss-mega__mark { position: absolute; right: -1.6rem; bottom: -2.2rem; z-index: -1; width: auto; height: 9.5rem; opacity: .16; }
.ss-mega__cta-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-bright); }
.ss-mega__cta-title { font-size: 1.15rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--text-on-dark); }
.ss-mega__cta-text { font-size: .84rem; line-height: 1.6; color: var(--text-on-dark-muted); }
.ss-mega__cta .ss-btn { align-self: stretch; height: auto; min-height: var(--btn-h); margin: .5rem .5rem 0; padding: .6rem .9em; font-size: .8rem; line-height: 1.25; white-space: normal; text-align: center; }
.ss-mega__proof { display: grid; gap: .35rem; margin: auto 0 0; padding: 1rem 0 0; list-style: none; }
.ss-mega__proof li { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 600; color: var(--text-on-dark-muted); }
.ss-mega__proof svg { width: .9rem; height: .9rem; fill: none; stroke: var(--brand-bright); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.ss-mega__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 2rem; padding: .7rem 1.5rem; background: var(--paper); border-top: 1px solid var(--line); }
.ss-mega__awards { display: flex; align-items: center; gap: 1rem; }
.ss-mega__foot-label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.ss-mega__awards ul { display: flex; align-items: center; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.ss-mega__awards img { width: auto; height: 2.1rem; transition: transform var(--dur) var(--ease-spring); }
.ss-mega__awards li:hover img { transform: translateY(-2px) scale(1.12); }
.ss-mega__rating { display: flex; align-items: center; gap: .55rem; font-size: .8rem; }
.ss-mega__clutch { width: auto; height: 1rem; color: var(--text-strong); }
.ss-mega__rating b { font-size: 1rem; font-weight: 800; color: var(--text-strong); }
.ss-mega__stars { display: inline-flex; gap: 1px; color: var(--rating); }
.ss-mega__stars svg { width: .8rem; height: .8rem; fill: currentColor; }
.ss-mega__count { color: var(--text-muted); }
.ss-mega__rating .ss-link { margin-left: .4rem; }
/* Narrower desktops: the call-to-action card moves under the links. */
@media (max-width: 1320px) {
  .ss-mega__body { grid-template-columns: 19rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ss-mega__rail { grid-row: 1 / span 2; }
  .ss-mega__cta { grid-column: 2; align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 1.6rem 1.25rem; padding: 1.1rem 1.25rem; }
  .ss-mega__cta-text { flex: 1 1 18rem; }
  .ss-mega__cta .ss-btn { align-self: center; margin: 0 .5rem; }
  .ss-mega__proof { display: none; }
}

/* Burger (hidden on desktop) */
.ss-burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; }
.ss-burger span, .ss-burger span::before {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.ss-burger span { top: 17px; }
.ss-burger span::before { content: ""; left: 0; top: 8px; width: 14px; }
.ss-burger:hover span::before { width: 22px; }
.is-menu-open .ss-burger span { top: 21px; transform: rotate(45deg); }
.is-menu-open .ss-burger span::before { top: 0; width: 22px; transform: rotate(-90deg); }

/* Smaller desktops: tighter menu items; the secondary header button hides. */
@media (max-width: 1360px) {
  .ss-header__cta-secondary { display: none; }
  .ss-nav__list > li > a { padding-inline: .62rem; }
  .ss-nav__list > .menu-item-has-children > a { padding-right: 1.4rem; }
  .ss-nav__list > .menu-item-has-children > a::before { right: .55rem; }
  .ss-nav__list > li > a::after { left: .62rem; right: .62rem; }
}
@media (max-width: 1180px) {
  .ss-nav { display: none; }
  .ss-burger { display: block; }
  .ss-header__cta-secondary { display: none; }
}
@media (max-width: 560px) {
  .ss-header__cta-primary { display: none; }
}

/* 8. MOBILE NAVIGATION ----------------------------------------------------- */
.ss-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  overflow-y: auto;
  color: var(--text-on-dark);
  background:
    radial-gradient(120% 60% at 100% 0%, var(--brand-soft), transparent 60%),
    var(--ink);
  /* Opens as a circle expanding from the burger button. */
  clip-path: circle(0 at calc(100% - var(--gutter) - 14px) calc(var(--header-h) / 2));
  visibility: hidden;
  transition: clip-path .7s var(--ease-in-out), visibility 0s linear .7s;
}
.is-menu-open .ss-mobile-nav {
  clip-path: circle(150% at calc(100% - var(--gutter) - 14px) calc(var(--header-h) / 2));
  visibility: visible;
  transition-delay: 0s;
}
.ss-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.ss-mobile-nav__list > li {
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.is-menu-open .ss-mobile-nav__list > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(.25s + var(--i, 0) * 60ms);
}
.ss-mobile-nav__row { display: flex; align-items: center; }
.ss-mobile-nav__list > li > a,
.ss-mobile-nav__row > a {
  flex: 1;
  display: block;
  padding: 1.05rem 0;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ss-subtoggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur), border-color var(--dur);
}
.ss-subtoggle::before { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ss-subtoggle[aria-expanded="true"] { transform: rotate(180deg); background: var(--brand); border-color: var(--brand); }
.ss-mobile-nav .sub-menu { display: none; list-style: none; margin: 0; padding: 0 0 1rem .25rem; }
.ss-mobile-nav .is-open > .sub-menu { display: block; animation: ss-rise .45s var(--ease-out); }
.ss-mobile-nav .sub-menu a { display: block; padding: .55rem 0; color: var(--text-on-dark-muted); font-weight: 600; }
.ss-mobile-nav .sub-menu a:hover { color: var(--text-on-dark); }
.ss-mobile-nav__cta { margin-top: 2rem; align-self: flex-start; }

/* Categories inside the phone menu (mega menus become nested accordions). */
.ss-mobile-nav .sub-menu .ss-mobile-nav__row > a { display: flex; align-items: center; gap: .65rem; padding: .6rem 0; font-size: 1rem; font-weight: 700; color: var(--text-on-dark); }
.ss-mobile-nav .sub-menu .ss-subtoggle { width: 34px; height: 34px; }
.ss-mobile-nav .sub-menu .ss-subtoggle::before { width: 7px; height: 7px; margin-top: -3px; }
.ss-mobile-nav .sub-menu .sub-menu { padding: 0 0 .6rem 2.55rem; }
.ss-mobile-nav .sub-menu .sub-menu a { padding: .45rem 0; font-size: .95rem; }
.ss-mobile-nav__icon { flex-shrink: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: var(--brand-bright); background: color-mix(in srgb, var(--paper) 7%, transparent); border-radius: 8px; }
.ss-mobile-nav__icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-mobile-nav__awards { margin-top: 1.75rem; }
.ss-mobile-nav__awards span { display: block; margin-bottom: .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-dark-faint); }
.ss-mobile-nav__awards ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ss-mobile-nav__awards img { width: auto; height: 2.4rem; }

/* 9. HERO ------------------------------------------------------------------ */
/*
 * Fits one screen on desktop. Two calm background styles, chosen in
 * Appearance → Customize → Homepage Hero → "Background style":
 *   data-hero-style="dark"  — soft graphite with a slow rose/silver aurora
 *   data-hero-style="light" — pearl white with soft rose light
 * Everything inside the hero reads the local --h-* variables below, so a
 * style only has to redefine those.
 */
.ss-hero {
  /* Dark (default) */
  --h-fg:        var(--text-on-dark);
  --h-fg-2:      color-mix(in srgb, var(--paper) 88%, transparent);
  --h-muted:     var(--text-on-dark-muted);
  --h-glass:     color-mix(in srgb, var(--paper) 6%, transparent);
  --h-glass-hover: color-mix(in srgb, var(--paper) 9%, transparent);
  --h-line:      color-mix(in srgb, var(--paper) 10%, transparent);
  --h-shadow:    0 4px 30px color-mix(in srgb, var(--ink) 70%, transparent);
  --h-text-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 80%, transparent), 0 2px 16px var(--ink);
  --h-base-1:    var(--ink);                                          /* deep black */
  --h-base-2:    color-mix(in srgb, var(--ink) 70%, black);
  --h-base-3:    color-mix(in srgb, var(--ink) 40%, black);           /* edges: true black */
  --h-center-glow: color-mix(in srgb, var(--brand) 40%, transparent); /* rich red in the middle */
  --h-grid-line: color-mix(in srgb, var(--paper) 4%, transparent);
  --h-aurora-1:  var(--brand);
  --h-aurora-2:  var(--brand-deep);  /* no silver haze — keeps the black clean */
  --h-aurora-3:  var(--brand-deep);
  --h-aurora-strength: .2;
  --h-blend:     lighter;   /* read by hero-3d.js */
  --h-ribbon-alpha: .85;    /* read by hero-3d.js */
  --h-bloom:     .45;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + clamp(.5rem, 2.5vh, 2rem)) 0 clamp(1.25rem, 3.5vh, 2.75rem);
  overflow: hidden;
  color: var(--h-fg);
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%, var(--h-center-glow), transparent 70%),
    radial-gradient(ellipse 110% 85% at 50% 42%, var(--h-base-1) 0%, var(--h-base-2) 55%, var(--h-base-3) 100%);
}
.ss-hero[data-hero-style="light"] {
  --h-fg:        var(--text-strong);
  --h-fg-2:      color-mix(in srgb, var(--text-strong) 82%, transparent);
  --h-muted:     var(--text-muted);
  --h-glass:     color-mix(in srgb, var(--paper) 70%, transparent);
  --h-glass-hover: var(--paper);
  --h-line:      color-mix(in srgb, var(--text-strong) 9%, transparent);
  --h-shadow:    0 2px 24px color-mix(in srgb, var(--paper) 90%, transparent);
  --h-text-shadow: none;
  --h-base-1:    var(--paper);
  --h-base-2:    color-mix(in srgb, var(--paper) 97%, var(--brand));
  --h-base-3:    color-mix(in srgb, var(--paper) 93%, var(--silver));
  --h-center-glow: color-mix(in srgb, var(--brand) 8%, transparent);
  --h-grid-line: color-mix(in srgb, var(--text-strong) 4%, transparent);
  --h-aurora-1:  color-mix(in srgb, var(--brand) 45%, var(--paper));
  --h-aurora-2:  color-mix(in srgb, var(--silver) 80%, #9aa6c8);
  --h-aurora-3:  var(--brand-pale);
  --h-aurora-strength: .38;
  --h-blend:     source-over;
  --h-ribbon-alpha: .55;
  --h-bloom:     0;
  /* Ribbons need darker tones to show on white */
  --ribbon-2:    color-mix(in srgb, var(--silver) 55%, var(--text-strong));
  --ribbon-4:    color-mix(in srgb, var(--silver) 70%, var(--text-strong));
  --ribbon-5:    var(--brand-pale);
}
.ss-hero h1, .ss-hero h2, .ss-hero h3 { color: var(--h-fg); }

/* --- Background layers --- */
.ss-hero__bg { position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none; }

/* Aurora: three large, very soft light pools drifting slowly — no hard edges */
/* Faint blueprint grid, strongest in the middle. Static: painted once. */
.ss-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--h-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--h-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 80%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.ss-hero__aurora { position: absolute; inset: -20%; opacity: var(--h-aurora-strength); }
/* Soft light pools drawn as radial gradients: same softness as a big blur,
   but free to animate (a live filter: blur() re-renders every frame). */
.ss-hero__aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.ss-hero__aurora i:nth-child(1) { width: 46%; height: 42%; left: 27%; top: 30%; background: radial-gradient(closest-side, var(--h-aurora-1), transparent); animation: ss-aurora-1 38s var(--ease-in-out) infinite alternate; }
.ss-hero__aurora i:nth-child(2) { width: 50%; height: 30%; left: 25%; top: 0%; background: radial-gradient(closest-side, var(--h-aurora-2), transparent); opacity: .7; animation: ss-aurora-2 46s var(--ease-in-out) infinite alternate; }
.ss-hero__aurora i:nth-child(3) { width: 36%; height: 34%; right: 12%; bottom: 14%; background: radial-gradient(closest-side, var(--h-aurora-3), transparent); animation: ss-aurora-3 52s var(--ease-in-out) infinite alternate; }
@keyframes ss-aurora-1 { to { transform: translate(6%, -5%) scale(1.12); } }
@keyframes ss-aurora-2 { to { transform: translate(14%, 10%) scale(.9); } }
@keyframes ss-aurora-3 { to { transform: translate(-12%, -8%) scale(1.15); } }

/* 3D ribbons — glow and centre fade are drawn inside the canvas (hero-3d.js),
   so no CSS filter, mask or blend mode has to be recomposited while scrolling. */
.ss-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s var(--ease-out);
}
.ss-hero.is-3d-ready .ss-hero__canvas { opacity: 1; }

/* Soft edges so the eye rests on the centre */
.ss-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 38% 32% at 50% 46%, color-mix(in srgb, var(--h-base-3) 30%, transparent), transparent 80%),
    linear-gradient(to bottom, color-mix(in srgb, var(--h-base-3) 50%, transparent), transparent 16%, transparent 84%, color-mix(in srgb, var(--h-base-3) 80%, transparent));
}
.ss-hero__noise {
  position: absolute;
  inset: 0;
  opacity: .015;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Content --- */
.ss-hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform, opacity; /* parallax set by main.js */
}

/* Kicker pill: ● WE HELP YOU  [INNOVATE ↻] */
.ss-kicker {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .4rem 1.25rem .4rem .4rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--h-muted);
  background: var(--h-glass);
  border: 1px solid var(--h-line);
  border-radius: 999px;
  animation: ss-rise .9s var(--ease-out) .05s both;
}
.ss-kicker__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand-soft);
}
.ss-kicker__dot::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--brand);
}
.ss-kicker__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin: -.25rem;
  border-radius: 50%;
  background: var(--brand);
  animation: ss-ping 2.2s var(--ease-out) infinite;
}
@keyframes ss-ping {
  from { transform: scale(1); opacity: .7; }
  to   { transform: scale(3.4); opacity: 0; }
}
.ss-rotator { display: inline-grid; overflow: hidden; padding-block: .15em; color: var(--h-fg); font-weight: 800; }
.ss-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(80%);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.ss-rotator > .is-active { opacity: 1; transform: none; }
.ss-rotator > .is-leaving { opacity: 0; transform: translateY(-80%); }

/* Headline — two uppercase lines, words rise in one by one */
.ss-hero__title {
  margin-top: clamp(1rem, 2.6vh, 1.75rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  filter: drop-shadow(var(--h-shadow));
}
.ss-hero__line { display: block; }
.ss-w {
  display: inline-block;
  overflow: hidden;
  padding: .05em .02em .1em;
  margin-bottom: -.1em;
  vertical-align: top;
  perspective: 600px;
}
.ss-w > span {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: ss-word-in 1s var(--ease-out) both;
  animation-delay: calc(.2s + var(--i) * 90ms);
}
@keyframes ss-word-in {
  from { transform: translateY(100%) rotateX(-35deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Highlighted word — slow red gradient drift */
.ss-w.is-hl > span {
  background: linear-gradient(95deg, var(--brand) 0%, var(--brand-bright) 45%, var(--brand) 90%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ss-word-in 1s var(--ease-out) both, ss-grad-drift 7s ease-in-out 1.5s 2 alternate;
  animation-delay: calc(.2s + var(--i) * 90ms), 1.5s;
}
@keyframes ss-grad-drift { to { background-position: 100% 0; } }

.ss-hero__sub {
  max-width: 44ch;
  margin-top: clamp(.9rem, 2.4vh, 1.5rem);
  font-size: clamp(1.1rem, .85rem + .75vw, 1.55rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--h-fg-2);
  text-shadow: var(--h-text-shadow);
  text-wrap: balance;
  animation: ss-rise 1s var(--ease-out) .55s both;
}
.ss-hero__lead {
  max-width: 60ch;
  text-wrap: balance;
  margin-top: clamp(.6rem, 1.6vh, 1rem);
  font-size: clamp(.95rem, .88rem + .22vw, 1.075rem);
  line-height: 1.75;
  color: var(--h-muted);
  text-shadow: var(--h-text-shadow);
  animation: ss-rise 1s var(--ease-out) .7s both;
}

.ss-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: clamp(1.25rem, 3.2vh, 2rem);
  animation: ss-rise 1s var(--ease-out) .85s both;
}

/* --- Social proof: animated score + Clutch + Google widgets --- */
.ss-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: clamp(1rem, 2.6vh, 1.6rem);
  animation: ss-rise 1s var(--ease-out) 1s both;
}
.ss-proof__item { position: relative; display: flex; align-items: center; min-height: 45px; }
/* Dividers: drawn as separate lines of one fixed height, centred, so they
   are identical no matter how tall the item next to them is. */
.ss-proof__item + .ss-proof__item { padding-left: 1.5rem; }
.ss-proof__item + .ss-proof__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 44px;
  margin-top: -22px;
  background: var(--h-line);
}
.ss-proof__clutch { width: 212px; } /* 24px divider gap + the widget's visible width */
.ss-proof__clutch .clutch-widget { width: 100%; }

/* Award badges — pop in one by one, lift and tilt slightly on hover */
.ss-badges { gap: .7rem; margin: 0; padding: 0; list-style: none; }
.ss-badges li { flex-shrink: 0; animation: ss-badge-in .7s var(--ease-spring) both; animation-delay: calc(1.5s + var(--n) * 120ms); }
.ss-badges img { display: block; height: 64px; width: auto; max-width: none; transition: transform var(--dur) var(--ease-spring); }
.ss-badges li:hover img { transform: translateY(-4px) scale(1.08) rotate(-3deg); }
@keyframes ss-badge-in { from { opacity: 0; transform: translateY(14px) scale(.7); } }

.ss-score { gap: .75rem; text-align: left; }
.ss-score__num { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--h-fg); font-variant-numeric: tabular-nums; }
.ss-score__meta { display: flex; flex-direction: column; gap: .3rem; }
.ss-score__label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--h-muted); }

/*
 * Stars: each one spins in, fills with gold from left to right, throws
 * off a burst of sparks — one after another — then the row keeps a gentle
 * twinkle wave running across it.
 */
.ss-stars { --stars-at: 1.15s; display: flex; gap: 4px; } /* --stars-at: when the star sequence starts */
.ss-star {
  position: relative;
  width: 19px;
  height: 19px;
  animation: ss-star-land .7s var(--ease-spring) both;
  animation-delay: calc(var(--stars-at) + var(--n) * 160ms);
}
.ss-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-star__base { fill: color-mix(in srgb, var(--h-fg) 14%, transparent); }
.ss-star__fill {
  fill: var(--rating);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rating) 50%, transparent));
  clip-path: inset(0 100% 0 0);
  animation:
    ss-star-fill .5s var(--ease-out) forwards,
    ss-star-twinkle 6s ease-in-out infinite;
  animation-delay: calc(var(--stars-at) + .3s + var(--n) * 160ms), calc(var(--stars-at) + 2.05s + var(--n) * 140ms);
}
.ss-star i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: var(--rating);
  animation: ss-spark .75s var(--ease-out) both;
  animation-delay: calc(var(--stars-at) + .65s + var(--n) * 160ms);
}
.ss-star i:nth-of-type(1) { --dx: 0px;   --dy: -15px; }
.ss-star i:nth-of-type(2) { --dx: 14px;  --dy: -5px; }
.ss-star i:nth-of-type(3) { --dx: 9px;   --dy: 13px; }
.ss-star i:nth-of-type(4) { --dx: -9px;  --dy: 13px; }
.ss-star i:nth-of-type(5) { --dx: -14px; --dy: -5px; }
@keyframes ss-star-land {
  from { transform: scale(0) rotate(-140deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes ss-star-fill { to { clip-path: inset(0 0 0 0); } }
@keyframes ss-spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@keyframes ss-star-twinkle {
  0%, 82%, 100% { transform: none; }
  90%           { transform: scale(1.25) rotate(10deg); }
}

/* Feature chips */
.ss-hero__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: clamp(1.5rem, 4.2vh, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1.2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--h-fg-2);
  background: var(--h-glass);
  border: 1px solid var(--h-line);
  border-radius: 12px;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), background-color var(--dur), box-shadow var(--dur), color var(--dur);
  animation: ss-rise .9s var(--ease-out) backwards;
  animation-delay: calc(1.1s + var(--n) * 90ms);
}
.ss-chip svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-chip:hover {
  transform: translateY(-3px);
  color: var(--h-fg);
  background: var(--h-glass-hover);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 12px 30px -14px var(--brand-glow);
}
.ss-chip:hover svg * { animation: ss-draw .9s var(--ease-out); }
@keyframes ss-draw { from { stroke-dasharray: 60; stroke-dashoffset: 60; } to { stroke-dasharray: 60; stroke-dashoffset: 0; } }

@keyframes ss-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Hero — short desktop screens: tighten so it still fits */
@media (min-width: 900px) and (max-height: 800px) {
  .ss-hero { --fs-hero: clamp(2.1rem, 0.6rem + 3.4vw, 3.4rem); }
  .ss-hero__sub { font-size: 1.2rem; }
  .ss-hero__lead { line-height: 1.6; }
  .ss-hero__features { margin-top: 1.25rem; }
  .ss-chip { padding-block: .6rem; }
}

/* Hero — tablets: the proof row wraps, so dividers are dropped */
@media (max-width: 980px) {
  .ss-proof { gap: 1rem 2rem; }
  .ss-proof__item + .ss-proof__item { padding-left: 0; }
  .ss-proof__item + .ss-proof__item::before { display: none; }
  /* 2 × 2 chips instead of an unbalanced 3 + 1 */
  .ss-hero__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 560px); }
}

/* Hero — phones */
@media (max-width: 640px) {
  .ss-kicker { font-size: .68rem; letter-spacing: .14em; gap: .6rem; padding-right: 1rem; }
  .ss-hero__actions { flex-direction: column; gap: .85rem; }
  .ss-hero__actions .ss-btn { width: min(100%, 300px); }
  .ss-proof { flex-direction: column; gap: .9rem; }
  .ss-badges img { height: 58px; }
  .ss-hero__features { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
  .ss-chip { padding: .7rem .8rem; font-size: .8125rem; text-align: left; }
}

/* Optional logo mark in the background (Customizer: "Logo mark in the
   background"). A static SVG of the faceted mark; the only motion is a very
   slow scale "breath" — transform only, so it costs nothing while scrolling. */
.ss-bgmark { position: absolute; pointer-events: none; will-change: transform; transform: var(--bm-t, translate(0, 0)); animation: ss-breathe 16s var(--ease-in-out) infinite alternate; }
.ss-bgmark__svg { display: block; width: auto; height: 100%; overflow: visible; }
.ss-bgmark__svg .m1, .ss-std__mark .m1, .ss-svc__mark-svg .m1, .ss-cta__mark .m1, .ss-mega__mark .m1 { fill: var(--mark-1); }
.ss-bgmark__svg .m2, .ss-std__mark .m2, .ss-svc__mark-svg .m2, .ss-cta__mark .m2, .ss-mega__mark .m2 { fill: var(--mark-2); }
.ss-bgmark__svg .m3, .ss-std__mark .m3, .ss-svc__mark-svg .m3, .ss-cta__mark .m3, .ss-mega__mark .m3 { fill: var(--mark-3); }
.ss-bgmark__svg .m4, .ss-std__mark .m4, .ss-svc__mark-svg .m4, .ss-cta__mark .m4, .ss-mega__mark .m4 { fill: var(--mark-4); }
@keyframes ss-breathe { to { transform: var(--bm-t, translate(0, 0)) scale(1.04); } }

.ss-hero[data-mark="off"] .ss-hero__mark,
.ss-hero[data-mark="side"] .ss-hero__mark--centre,
.ss-hero[data-mark="centre"] .ss-hero__mark--side,
.ss-testi[data-mark="off"] .ss-testi__mark { display: none; }

/* Hero · Glass mark: huge faceted mark bleeding off the right edge */
.ss-hero__mark--side {
  --bm-t: translateY(-50%);
  right: -8vw;
  top: 52%;
  height: min(120vh, 1150px);
  opacity: .14;
}
/* Hero · Wireframe mark: facet outlines only, centred like a blueprint */
.ss-hero__mark--centre {
  --bm-t: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  height: min(96vh, 900px);
}
.ss-hero__mark--centre .ss-bgmark__svg path {
  fill: color-mix(in srgb, var(--brand) 5%, transparent);
  stroke: color-mix(in srgb, var(--silver) 22%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 760px) {
  .ss-hero__mark--side { right: -40vw; opacity: .1; }
  .ss-hero__mark--centre { height: 70vh; }
}

/* Section watermarks — a mirrored pair: identical size, offset from the
   section top and bleed off the edge; testimonials on the left, strengths on
   the right, both upright. Sized independently of section height so the
   two always match. (The mark itself is never flipped, so it reads correctly.) */
.ss-testi__mark,
.ss-strengths__mark {
  --wm-size: clamp(360px, 36vw, 560px);
  --wm-bleed: -7vw;
  top: clamp(2.5rem, 6vw, 6rem);
  z-index: -1;
  height: var(--wm-size);
}
.ss-testi__mark     { left: var(--wm-bleed);  opacity: .05; } /* on white */
.ss-strengths__mark { right: var(--wm-bleed); opacity: .08; } /* on dark: a touch stronger so both read the same */

/* 10. SHARED SECTION PARTS ------------------------------------------------- */
/* Reused by every content section so they all feel like one system. */
.ss-block {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  overflow: hidden;
  background: var(--paper);
  color: var(--text);
}
.ss-block__head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }

/* Eyebrow pill — the light-surface sibling of the hero's kicker */
.ss-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 1rem .4rem .45rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 999px;
}
.ss-eyebrow::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand) 0 .22rem, var(--brand-soft) .24rem);
}
.ss-h2 {
  margin-top: 1.1rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--text-strong);
  text-wrap: balance;
}
.ss-h2 .is-hl { color: var(--brand); }
/* Dark variant — any section can use class="ss-block ss-block--dark" + data-tone="dark". */
.ss-block--dark {
  color: var(--text-on-dark);
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    var(--ink);
}
.ss-block--dark .ss-h2 { color: var(--text-on-dark); }
.ss-block--dark .ss-lead { color: var(--text-on-dark-muted); }
.ss-block--dark .ss-eyebrow { color: var(--text-on-dark-muted); background: color-mix(in srgb, var(--paper) 5%, transparent); border-color: var(--line-dark); }
.ss-lead { margin-top: 1.1rem; font-size: var(--fs-lg); line-height: 1.7; color: var(--text-muted); text-wrap: pretty; }

/* Scroll reveal: elements with [data-reveal] fade + rise in once, when they
   enter the screen (main.js adds .is-in). Opacity/transform only. Before JS
   runs, or without JS, everything is simply visible. */
.js-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.js-reveal [data-reveal] {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* Looping/entrance animations inside a block wait until it is revealed. */
.js-reveal [data-reveal]:not(.is-in) *,
.js-reveal [data-reveal]:not(.is-in) *::before,
.js-reveal [data-reveal]:not(.is-in) *::after { animation-play-state: paused !important; }

/* 11. TESTIMONIALS (Clutch + video) -------------------------------------- */
.ss-testi__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Same faint "checks" as the hero, in ink on white — static, painted once. */
.ss-testi__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-strong) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-strong) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.ss-testi__bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18%;
  width: 70vw;
  height: 46vw;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 9%, transparent), transparent);
}

/* Video + story row */
.ss-testi__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

/* Video card */
.ss-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ink) 55%, transparent), 0 0 0 1px var(--line);
  isolation: isolate;
}
.ss-video video,
.ss-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-video__poster { transition: transform 1.2s var(--ease-out); }
.ss-video:hover .ss-video__poster { transform: scale(1.04); }
.ss-video__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 80%, transparent) 0%, transparent 45%);
  pointer-events: none;
  transition: opacity var(--dur);
}
.ss-video__caption {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-on-dark);
  pointer-events: none;
  transition: opacity var(--dur);
}
.ss-video__who { display: flex; flex-direction: column; gap: .2rem; }
.ss-video__name { font-weight: 800; font-size: var(--fs-base); }
.ss-video__role { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.ss-video__time {
  flex-shrink: 0;
  padding: .3rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  border-radius: 6px;
}
/* Play button — a slanted stripe like the logo, with a soft pulse */
.ss-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  height: 4rem;
  padding: 0 1.9rem 0 1.6rem;
  color: var(--on-brand);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap; /* a centred absolute box is capped at half the card width — keep one line */
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-spring);
}
.ss-video__play::before,
.ss-video__play::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
  transform: skewX(var(--skew));
}
.ss-video__play::before { background: var(--brand); box-shadow: 0 16px 40px -12px var(--brand-glow); }
.ss-video__play::after { background: var(--brand); animation: ss-play-pulse 2.4s var(--ease-out) infinite; }
@keyframes ss-play-pulse {
  from { opacity: .55; transform: skewX(var(--skew)) scale(1); }
  to   { opacity: 0;   transform: skewX(var(--skew)) scale(1.35, 1.6); }
}
.ss-video__play svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.ss-video__play:hover,
.ss-video__play:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.ss-video__play:focus-visible { outline: none; }
.ss-video__play:focus-visible::before { outline: 2px solid var(--paper); outline-offset: 4px; }
/* Playing: hide the overlay, show the native controls */
.ss-video.is-playing .ss-video__play,
.ss-video.is-playing .ss-video__poster,
.ss-video.is-playing .ss-video__shade,
.ss-video.is-playing .ss-video__caption { opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility 0s linear var(--dur); }

/* Story + stats */
.ss-testi__story .ss-eyebrow { margin-bottom: 1rem; }
.ss-testi__story h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--text-strong); }
.ss-testi__story p { margin-top: .9rem; color: var(--text-muted); line-height: 1.7; }
.ss-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Button + compact Clutch rating side by side: the action, then the proof.
   The widget's box is reserved (188 × 45) so nothing shifts when it loads.
   In a narrow column they stack and the divider is dropped. */
.ss-testi__cta { container-type: inline-size; }
.ss-testi__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ss-testi__clutch { position: relative; display: flex; align-items: center; width: 212px; min-height: 45px; padding-left: 1.5rem; }
.ss-testi__clutch::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 44px; margin-top: -22px; background: var(--line); }
.ss-testi__clutch .clutch-widget { width: 100%; min-height: 45px; }
@container (max-width: 479px) {
  .ss-testi__clutch { padding-left: 0; }
  .ss-testi__clutch::before { display: none; }
}
.ss-stats li { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1rem; background: var(--paper); }
.ss-stats b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ss-stats b em { font-style: normal; color: var(--brand); }
.ss-stats li > span:not(.ss-stars) { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted); } /* labels only, not the numbers */
.ss-stats .ss-stars { --stars-at: .35s; margin-top: .1rem; }
.ss-stats .ss-star { width: 14px; height: 14px; }

/* "More client stories" — extra videos from WP admin → Video Testimonials.
   Clicking one loads it into the big player above. Only cover images load. */
.ss-vlist { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ss-vlist__head { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-strong); }
.ss-vlist__head span { color: var(--text-muted); font-weight: 600; }
.ss-vlist__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.ss-vthumb { display: flex; flex-direction: column; gap: .3rem; width: 100%; text-align: left; }
.ss-vthumb__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: .45rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ink-2), var(--brand-deep));
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: box-shadow var(--dur), transform var(--dur) var(--ease-out);
}
.ss-vthumb__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ss-vthumb:hover .ss-vthumb__img { transform: translateY(-3px); }
.ss-vthumb:hover .ss-vthumb__img img { transform: scale(1.06); }
.ss-vthumb:focus-visible { outline: none; }
.ss-vthumb:focus-visible .ss-vthumb__img { box-shadow: 0 0 0 3px var(--brand-bright); }
.ss-vthumb.is-current .ss-vthumb__img { box-shadow: 0 0 0 2px var(--brand), 0 14px 30px -18px var(--brand-glow); }
/* Mini play button — same slanted logo stripe as the big one */
.ss-vthumb__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 2.2rem;
  color: var(--on-brand);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-spring);
}
.ss-vthumb__play::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--brand); transform: skewX(var(--skew)); box-shadow: 0 8px 20px -8px var(--brand-glow); }
.ss-vthumb__play svg { width: .9rem; height: .9rem; fill: currentColor; }
.ss-vthumb:hover .ss-vthumb__play { transform: translate(-50%, -50%) scale(1.12); }
.ss-vthumb__time,
.ss-vthumb__now {
  position: absolute;
  padding: .2rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  border-radius: 5px;
}
.ss-vthumb__time { right: .5rem; bottom: .5rem; color: var(--text-on-dark); background: color-mix(in srgb, var(--ink) 65%, transparent); font-variant-numeric: tabular-nums; }
.ss-vthumb__now { left: .5rem; top: .5rem; color: var(--on-brand); background: var(--brand); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity var(--dur); }
.ss-vthumb.is-current .ss-vthumb__now { opacity: 1; }
.ss-vthumb.is-current .ss-vthumb__play { opacity: 0; }
.ss-vthumb__name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-strong); }
.ss-vthumb__role { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
/* Phones: a swipeable row */
@media (max-width: 640px) {
  .ss-vlist__items {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 3px .5rem; /* room so the red "now showing" outline isn't clipped */
  }
  .ss-vlist__items::-webkit-scrollbar { display: none; }
  .ss-vlist__items > li { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Clutch reviews widget — centred at the width it is designed for */
.ss-testi__reviews { max-width: 960px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.ss-testi__reviews-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ss-testi__reviews-head::before,
.ss-testi__reviews-head::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: var(--line-strong); }
/* Space reserved for the Clutch widget before it loads = its measured settled
   height at each width, so nothing below it jumps when it appears. */
.ss-testi__widget { min-height: 549px; }
@media (max-width: 820px) { .ss-testi__widget { min-height: 615px; } }
@media (max-width: 600px) { .ss-testi__widget { min-height: 655px; } }
@media (max-width: 420px) { .ss-testi__widget { min-height: 683px; } }

@media (max-width: 980px) {
  .ss-testi__feature { grid-template-columns: 1fr; }
  .ss-testi__story { max-width: 640px; }
}
@media (max-width: 560px) {
  .ss-stats { grid-template-columns: 1fr; }
  .ss-stats li { flex-direction: row; align-items: center; gap: .9rem; }
  .ss-stats li > span:last-child { margin-left: auto; text-align: right; }
  .ss-video__play { height: 3.4rem; padding: 0 1.4rem 0 1.2rem; }
}
/* Very small phones: the video is ~160px tall, so keep only the length badge
   in the caption and a slightly shorter button — nothing overlaps. */
@media (max-width: 420px) {
  .ss-video__who { display: none; }
  .ss-video__caption { justify-content: flex-end; }
  .ss-video__play { height: 3rem; }
}

/* 12. STRENGTHS (numbers + award spotlight) ------------------------------- */
.ss-strengths__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Same faint "checks" as the hero — static, painted once. */
.ss-strengths__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 50%, #000 15%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 70% at 70% 50%, #000 15%, transparent 80%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.ss-strengths__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.ss-strengths__intro .ss-lead { max-width: 46ch; }

/* Numbers as clean typography: thin rules, a red logo-stripe accent */
.ss-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}
.ss-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.35rem 1.25rem 1.35rem 0;
  border-top: 1px solid var(--line-dark);
}
.ss-figure:nth-child(2n) { padding-left: 1.5rem; border-left: 1px solid var(--line-dark); }
.ss-figure::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--brand);
  transform: skewX(var(--skew));
  transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.ss-figure:nth-child(2n)::before { left: 1.5rem; }
.ss-figure:hover::before { transform: skewX(var(--skew)) scaleX(2.4); }
.ss-figure__num {
  font-size: clamp(2.5rem, 1.7rem + 2.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}
.ss-figure__num em { font-style: normal; color: var(--brand); }
.ss-figure__label { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark-muted); }
.ss-figure__label svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; fill: none; stroke: var(--brand-bright); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Award spotlight panel */
.ss-spot {
  container-type: inline-size;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: color-mix(in srgb, var(--paper) 4%, transparent);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
}
.ss-spot__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-dark); }
.ss-spot__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark); }
.ss-spot__title span { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-left: .35rem; padding: 0 .4rem; font-size: .7rem; letter-spacing: 0; color: var(--on-brand); background: var(--brand); border-radius: 999px; }
.ss-spot__note { font-size: var(--fs-xs); color: var(--text-on-dark-faint); }
.ss-spot__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; margin-top: 1.25rem; align-items: center; }

/* Stage: one badge at a time, sliding vertically */
.ss-spot__stage { position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; }
.ss-spot__glow { position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 32%, transparent), transparent); }
/* Slow orbit ring with a red dot — rotation only (compositor) */
.ss-spot__ring {
  position: absolute;
  width: min(86%, 300px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
  border-radius: 50%;
  animation: ss-orbit 18s linear infinite;
}
.ss-spot__ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
@keyframes ss-orbit { to { transform: rotate(360deg); } }
.ss-spot__badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(38%) scale(.88);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out);
}
.ss-spot__badge.is-active { opacity: 1; transform: none; }
.ss-spot__badge.is-leaving { opacity: 0; transform: translateY(-38%) scale(.88); }
.ss-spot__badge img { display: block; width: auto; max-width: 78%; height: clamp(150px, 8vw + 90px, 215px); object-fit: contain; }

/* List: every award once */
.ss-spot__list { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ss-spot__list li { display: flex; } /* items in the same row share one height */
.ss-spot__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: .1rem;
  width: 100%;
  height: 100%;
  align-content: center;
  padding: .7rem .9rem .75rem;
  text-align: left;
  border-radius: 12px;
  transition: background-color var(--dur);
}
.ss-spot__item:hover { background: color-mix(in srgb, var(--paper) 4%, transparent); }
.ss-spot__item.is-active { background: color-mix(in srgb, var(--paper) 6%, transparent); }
.ss-spot__name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-on-dark-muted); transition: color var(--dur); }
.ss-spot__place { font-size: .75rem; color: var(--text-on-dark-faint); }
.ss-spot__item.is-active .ss-spot__name { color: var(--text-on-dark); }
/* Progress line: when it fills, the next award slides in (main.js) */
.ss-spot__bar { position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.ss-spot__item.is-active .ss-spot__bar { animation: ss-spot-progress 3.8s linear forwards; }
@keyframes ss-spot-progress { to { transform: scaleX(1); } }
.ss-spot__item:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }

/* Narrow panel (container query): stage on top, list below in two columns */
@container (max-width: 560px) {
  .ss-spot__body { grid-template-columns: 1fr; }
  .ss-spot__stage { min-height: 250px; }
  .ss-spot__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ss-strengths__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ss-figure { padding-right: .75rem; }
  .ss-figure:nth-child(2n) { padding-left: 1rem; }
  .ss-figure:nth-child(2n)::before { left: 1rem; }
}

/* 13. SHARED LINKS & BACKGROUNDS ------------------------------------------ */
/* Text link with the looping button arrow and a line that draws in. */
.ss-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 700;
  color: var(--brand-deep);
}
.ss-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.6em;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.ss-link:hover::after, .ss-link:focus-visible::after { transform: scaleX(1); }
.ss-link:hover .ss-btn__arrow svg, .ss-link:focus-visible .ss-btn__arrow svg { animation: ss-arrow-loop .6s var(--ease-out); }

/* Faint "checks" on light sections (same as testimonials) — static. */
.ss-work__bg, .ss-rev__bg, .ss-svc__bg, .ss-std__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ss-work__bg::before, .ss-rev__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-strong) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-strong) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Dark sections: soft red light in one corner + the same checks in white. */
.ss-svc__bg::before, .ss-std__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 80%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.ss-svc__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
}

/* 14. PORTFOLIO — project cards that stack while you scroll --------------- */
/* overflow: clip (not hidden) so the sticky cards can stick. */
.ss-work { overflow: clip; content-visibility: visible; }
.ss-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.ss-work__head > div { max-width: 720px; }
.ss-work__head .ss-btn { flex-shrink: 0; }
.ss-work__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
/* The card fills its row, so a short card never leaves a gap under itself. */
.ss-work__item { display: grid; }
.ss-case { height: 100%; }
/* The pair in a row arrives together, the right one a beat later. */
.ss-work__item {
  --d: calc(var(--i) * .04s);
  display: grid;
  /* No content-visibility here. It implies PAINT containment, which clips a
     descendant to this box — so the card's 4px hover lift and its drop
     shadow were both sliced off at the edge, leaving a hard grey rectangle
     under every hovered card. The section keeps its own .ss-section
     containment, and three-up already halved the page height. */
}
/* The cards do not fade in. Two reasons: eighteen tall cards fading past as
   you scroll is what made the page feel heavy, and [data-reveal] sits on
   .ss-case — a child of the element above. A child of a skipped subtree has
   a zero-size box, so the observer's 12% threshold would depend on exactly
   when the browser un-skips it. Painting them outright removes both. */
.js-reveal .ss-work__item [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.js-reveal .ss-work__item [data-reveal]:not(.is-in) *,
.js-reveal .ss-work__item [data-reveal]:not(.is-in) *::before,
.js-reveal .ss-work__item [data-reveal]:not(.is-in) *::after { animation-play-state: running !important; }

.ss-case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 -1px 0 var(--line), var(--shadow-sm);
}
/* Logo panel: tinted with the project's own color (--acc), slanted stripes
   and a white plate at the logo angle. */
.ss-case__media {
  --tint: var(--acc, var(--brand));
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, color-mix(in srgb, var(--tint) 28%, transparent), transparent 60%),
    color-mix(in srgb, var(--tint) 10%, var(--paper));
}
.ss-case__media::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  z-index: -1;
  background: repeating-linear-gradient(109deg, transparent 0 26px, color-mix(in srgb, var(--tint) 12%, transparent) 26px 28px);
  transition: transform 1.2s var(--ease-out);
}
.ss-case__media::after {
  content: "";
  position: absolute;
  inset: 26% 20%;
  z-index: -1;
  background: var(--paper);
  border-radius: 18px;
  transform: skewX(var(--skew));
  box-shadow: var(--shadow);
  transition: transform .8s var(--ease-out);
}
.ss-case__media.has-cover::after { display: none; }
.ss-case__logo { width: min(56%, 240px); height: auto; transition: transform .8s var(--ease-out); }
.ss-case__name { max-width: 78%; font-size: clamp(1.15rem, 1rem + .9vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-align: center; text-wrap: balance; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.ss-case__cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ss-case__num {
  position: absolute;
  left: 1.4rem;
  top: 1.2rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: color-mix(in srgb, var(--tint) 55%, var(--text-strong));
}
/* Hover follows the same shape as .ss-feat__card and .ss-adv__card: a lift, a
   brand-tinted border and a shadow. No rule across the top — the whole card is
   the target here, so it does not need one. */
.ss-work__item:hover .ss-case,
.ss-work__item:focus-within .ss-case {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  /* var(--shadow) hugs the card. The old value dropped 30px below it, which
     the lift pushed into the gap between rows as a grey smudge. The top
     hairline keeps its resting colour so the top edge does not change. */
  box-shadow: 0 -1px 0 var(--line), var(--shadow);
}
.ss-case__media::after { transition: transform .8s var(--ease-out); }
.ss-work__item:hover .ss-case__media::before { transform: translateX(28px); }
.ss-work__item:hover .ss-case__media::after { transform: skewX(var(--skew)) scale(1.04); }
.ss-work__item:hover .ss-case__logo { transform: scale(1.07); }
.ss-work__item:hover .ss-case__cover { transform: scale(1.04); }
.ss-work__item:hover .ss-case__name { color: color-mix(in srgb, var(--ink) 92%, transparent); }


/* The arrow on "View case study" moves with the card. */
.ss-work__item:hover .ss-case__body .ss-link svg { transform: translateX(5px); }

/* The whole tile is clickable. ::after is already the link's underline, so
   the hit area is ::before, and the link is unpositioned here so inset:0
   resolves against the card rather than against the link itself. The
   underline is dropped here because the card itself is the hover cue. */
.ss-case__body .ss-link { position: static; }
.ss-case__body .ss-link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.ss-case__body .ss-link::after { display: none; } /* the card itself is the hover affordance */

.ss-case__body { /* a column, so the figures line up at the foot of every card */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.ss-case__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ss-case__tags li {
  padding: .35rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ss-case__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--text-strong); }
.ss-case__text { max-width: 48ch; line-height: 1.7; color: var(--text-muted); }
.ss-case__quote { display: none; /* shown in full on the case study page */
  margin: 0;
  padding: .85rem 1.1rem;
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ss-case__quote p { font-style: italic; line-height: 1.6; color: var(--text); }
.ss-case__quote cite { display: block; margin-top: .35rem; font-size: var(--fs-xs); font-style: normal; font-weight: 700; color: var(--text-muted); }
.ss-case__body .ss-link { margin-top: .25rem; }

/* The media is a banner above the content at every width, because a card
   half the page wide is too narrow for the old side-by-side split. */
.ss-case__media { aspect-ratio: 16 / 7; }
.ss-case__media::after { inset: 20% 24%; }
@media (max-width: 1280px) {
  .ss-work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ss-work__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .ss-work__head { flex-direction: column; align-items: flex-start; }
  .ss-case__media { aspect-ratio: 16 / 9; }
  .ss-case__media::after { inset: 24% 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-case, .ss-case__logo, .ss-case__cover { transition: none; }
  .ss-work__item:hover .ss-case { transform: none; }
}

/* 15. SERVICES — list + panel (desktop), accordion (phones) ------------- */
.ss-svc { overflow: clip; }
.ss-svc__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: repeat(var(--n, 12), auto);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.ss-svc__tab {
  grid-column: 1;
  grid-row: var(--r);
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 1rem 1rem 1rem 1.1rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  color: var(--text-on-dark-muted);
  border-bottom: 1px solid var(--line-dark);
  scroll-margin-top: calc(var(--header-h-scrolled) + 1rem);
  transition: color var(--dur) var(--ease-out);
}
/* Soft highlight behind the row */
.ss-svc__tab::before {
  content: "";
  position: absolute;
  inset: .35rem 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  border-radius: 10px;
  opacity: 0;
  transform: scaleX(.97);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.ss-svc__num { font-size: .78rem; letter-spacing: .12em; color: var(--text-on-dark-faint); font-variant-numeric: tabular-nums; transition: color var(--dur); }
.ss-svc__tab .ss-btn__arrow { opacity: 0; transform: translateX(-6px); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.ss-svc__tab:hover { color: var(--text-on-dark); }
.ss-svc__tab:hover::before { opacity: .6; transform: none; }
.ss-svc__tab.is-active { color: var(--text-on-dark); }
.ss-svc__tab.is-active::before { opacity: 1; transform: none; }
.ss-svc__tab.is-active .ss-svc__num { color: var(--brand-bright); }
.ss-svc__tab.is-active .ss-btn__arrow, .ss-svc__tab:hover .ss-btn__arrow { opacity: 1; transform: none; }
.ss-svc__tab:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; border-radius: 10px; }

/* All panels share one cell in column 2; only the active one shows. It
   stays in view (sticky) while the list scrolls past. */
.ss-svc__panel {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h-scrolled) + 1.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .4s;
}
.ss-svc__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ss-svc__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 8%, transparent), color-mix(in srgb, var(--paper) 2%, transparent));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ss-svc__mark { position: absolute; right: -3rem; bottom: -4.5rem; z-index: -1; height: 19rem; opacity: .07; pointer-events: none; }
.ss-svc__mark svg { width: auto; height: 100%; }
.ss-svc__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ss-svc__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: 16px;
  box-shadow: var(--shadow-brand);
}
.ss-svc__icon svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ss-svc__panel.is-active .ss-svc__icon svg * { animation: ss-draw 1.1s var(--ease-out) both; }
.ss-svc__count { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--text-on-dark-faint); font-variant-numeric: tabular-nums; }
.ss-svc__title { margin-top: 1.5rem; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--text-on-dark); text-wrap: balance; }
.ss-svc__text { margin-top: 1rem; line-height: 1.7; color: var(--text-on-dark-muted); }
.ss-svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ss-svc__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--text-on-dark); }
.ss-svc__list svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .08rem; fill: none; stroke: var(--brand-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-svc__panel.is-active .ss-svc__list li { animation: ss-rise .6s var(--ease-out) both; }
.ss-svc__panel.is-active .ss-svc__list li:nth-child(2) { animation-delay: .06s; }
.ss-svc__panel.is-active .ss-svc__list li:nth-child(3) { animation-delay: .12s; }
.ss-svc__panel.is-active .ss-svc__list li:nth-child(n+4) { animation-delay: .18s; }
.ss-svc__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; margin-top: 2rem; }

/* Phones & small tablets: an accordion — the panel opens under its name. */
@media (max-width: 899px) {
  .ss-svc__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ss-svc__tab { grid-row: auto; }
  .ss-svc__tab.is-active .ss-btn__arrow { transform: rotate(90deg); }
  .ss-svc__panel { grid-column: 1; grid-row: auto; position: static; display: none; }
  .ss-svc__panel.is-active { display: block; padding: .75rem 0 1.25rem; }
  .ss-svc__title { margin-top: 1.1rem; }
}
@media (max-width: 480px) {
  .ss-svc__list { grid-template-columns: minmax(0, 1fr); }
  .ss-svc__tab { font-size: .97rem; padding-inline: .9rem .6rem; }
}

/* 16. WHY CHOOSE US — advantage cards ------------------------------------- */
.ss-adv { background: var(--paper-2); }
.ss-adv__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.ss-adv__item { display: flex; }
.ss-adv__card {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1.1rem;
  row-gap: .35rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
/* A logo stripe slides in at the top edge on hover */
.ss-adv__card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1.4rem;
  width: 2.4rem;
  height: 5px;
  background: var(--brand);
  border-radius: 0 0 3px 3px;
  transform: skewX(var(--skew)) scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.ss-adv__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 14px;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.ss-adv__icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ss-adv__title { align-self: center; font-size: 1.08rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--text-strong); }
.ss-adv__text { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.ss-adv__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.ss-adv__card:hover::after { transform: skewX(var(--skew)) scaleX(1); }
.ss-adv__card:hover .ss-adv__icon { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ss-adv__card:hover .ss-adv__icon svg * { animation: ss-draw .9s var(--ease-out); }
.ss-adv__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 1023px) { .ss-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ss-adv__grid { grid-template-columns: minmax(0, 1fr); }
  .ss-adv__card { padding: 1.25rem; }
}

/* 17. THE STANDARD — comparison table ------------------------------------- */
.ss-std__wrap {
  max-width: 1120px;
  margin-inline: auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 3%, transparent);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
}
.ss-std__table { width: 100%; border-collapse: collapse; }
.ss-std__table th, .ss-std__table td { padding: 1.05rem 1.4rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-dark); transition: background-color var(--dur-fast); }
.ss-std__table tbody tr:last-child > * { border-bottom: 0; }
.ss-std__table thead th { padding-block: 1.2rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-dark-faint); }
.ss-std__table thead th:first-child { width: 32%; }
.ss-std__table thead th:nth-child(2) { width: 25%; }
.ss-std__table tbody th { font-weight: 700; color: var(--text-on-dark); }
.ss-std__table .is-us {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border-inline: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
.ss-std__table thead .is-us { color: var(--text-on-dark); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.ss-std__brand { display: inline-flex; align-items: center; gap: .6rem; }
.ss-std__mark { width: auto; height: 1.5rem; }
.ss-std__table tbody tr:hover > * { background-color: color-mix(in srgb, var(--paper) 3%, transparent); }
.ss-std__table tbody tr:hover > .is-us { background-color: color-mix(in srgb, var(--brand) 15%, transparent); }
.ss-std__state { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--text-on-dark-muted); }
.ss-std__state svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--text-on-dark-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-std__yes { display: flex; align-items: flex-start; gap: .75rem; }
.ss-std__yes > svg { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: .05rem; fill: none; stroke: var(--brand-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-std__yes b { display: block; font-weight: 800; color: var(--text-on-dark); }
.ss-std__yes small { display: block; margin-top: .2rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-on-dark-muted); }
/* Rows slide in one by one when the table is revealed; the ticks draw. */
.ss-std__wrap.is-in tbody tr { animation: ss-row-in .7s var(--ease-out) both; animation-delay: calc(.2s + var(--r, 0) * 60ms); }
.ss-std__wrap.is-in .ss-std__yes > svg * { animation: ss-draw 1s var(--ease-out) both; animation-delay: calc(.45s + var(--r, 0) * 60ms); }
@keyframes ss-row-in { from { opacity: 0; transform: translateX(-14px); } }

/* Phones: every row becomes a small card with labelled lines. */
@media (max-width: 760px) {
  .ss-std__table, .ss-std__table tbody, .ss-std__table tr, .ss-std__table th, .ss-std__table td { display: block; width: auto; }
  .ss-std__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ss-std__table tbody tr { padding: 1.1rem 1rem 1.15rem; border-bottom: 1px solid var(--line-dark); }
  .ss-std__table tbody tr:last-child { border-bottom: 0; }
  .ss-std__table tbody th { padding: 0 0 .4rem; border: 0; font-size: 1.05rem; }
  .ss-std__table td { display: grid; gap: .3rem; padding: .5rem .85rem; border: 0; border-radius: 10px; }
  .ss-std__table td::before { content: attr(data-label); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-faint); }
  .ss-std__table td.is-us { margin-top: .35rem; padding-block: .7rem; border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
  .ss-std__table tbody tr:hover > * { background-color: transparent; }
  .ss-std__table tbody tr:hover > .is-us { background-color: color-mix(in srgb, var(--brand) 9%, transparent); }
}

/* 18. CLUTCH AWARDS ROW — top of the client-stories section ------------- */
/* A title and one-line intro, then a calm row of the Clutch awards with
   fine dividers. Badges rise in one by one and lift on hover. */
.ss-awards { margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.ss-awards__head { max-width: 1000px; margin-inline: auto; text-align: center; }
.ss-awards__title { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--text-strong); text-wrap: balance; }
.ss-awards__title .is-hl { color: var(--brand); }
.ss-awards__text { margin-top: .75rem; font-size: var(--fs-lg); line-height: 1.6; color: var(--text-muted); text-wrap: balance; }
/* At most 6 places, one row on desktop (--per-desk / --per-tab come from
   the template). Extra awards share a place and take turns (see below). */
.ss-awards__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
/* The awards in one place are stacked in the same grid cell; only the
   active one shows. The place is as tall as its tallest award, so nothing
   moves when they swap. */
.ss-awards__list li { display: grid; }
.ss-awards__item { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .25rem .75rem; text-align: center; color: inherit; }
.ss-awards__list li { position: relative; flex: 0 0 calc(100% / var(--per-desk, 6)); min-width: 0; }
.ss-awards__list li::before { content: ""; position: absolute; left: 0; top: 12%; height: 52%; width: 1px; background: var(--line); }
.ss-awards__list li.is-row-desk::before { display: none; }
.ss-awards__item img { width: auto; height: 104px; margin-bottom: .75rem; transition: transform var(--dur) var(--ease-spring); }
.ss-awards__item:hover img, .ss-awards__item:focus-visible img { transform: translateY(-6px) scale(1.05); }
.ss-awards__item b { font-size: .88rem; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.ss-awards__item span { font-size: .74rem; color: var(--text-muted); }
.ss-awards__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.ss-awards__item:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(28%); }
.ss-awards__item.is-leaving { visibility: visible; opacity: 0; transform: translateY(-28%); }
.ss-awards__item { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), visibility 0s linear .6s; }
.ss-awards__item.is-active, .ss-awards__item.is-leaving { transition-delay: 0s; }
@media (max-width: 900px) {
  .ss-awards__list li { flex-basis: calc(100% / var(--per-tab, 3)); }
  .ss-awards__list li.is-row-desk::before { display: block; }
  .ss-awards__list li.is-row-tab::before { display: none; }
}
@media (max-width: 480px) {
  .ss-awards__list li { flex-basis: 50%; }
  .ss-awards__list li::before, .ss-awards__list li.is-row-desk::before { display: none; }
  .ss-awards__item img { height: 88px; }
}

/* 19. CLIENT REVIEWS WALL ------------------------------------------------- */
.ss-rev__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ss-rev__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ss-rev__score {
  display: grid;
  grid-template-areas: "logo logo" "num stars" "num count";
  grid-template-columns: auto auto;
  column-gap: .75rem;
  row-gap: .15rem;
  align-items: center;
  justify-content: start;
}
.ss-rev__clutch { grid-area: logo; width: auto; height: 1.4rem; margin-bottom: .4rem; color: var(--text-strong); }
.ss-rev__score > b { grid-area: num; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--text-strong); }
.ss-rev__score > .ss-rev__stars { grid-area: stars; }
.ss-rev__count { grid-area: count; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.ss-rev__stars { display: inline-flex; gap: 2px; color: var(--rating); }
.ss-rev__stars svg { width: 1rem; height: 1rem; fill: currentColor; }
/* Part ratings (e.g. 4.5): the stars past the score are faded. */
.ss-rev__stars[style*="--fill"] { -webkit-mask-image: linear-gradient(90deg, #000 var(--fill), rgb(0 0 0 / .22) var(--fill)); mask-image: linear-gradient(90deg, #000 var(--fill), rgb(0 0 0 / .22) var(--fill)); }

.ss-rev__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
/* A case study shows only its own client's review: one card alone in a
   3-column grid looks stranded, so it takes the width of two instead. */
.ss-rev__grid:has(> li:only-child) { grid-template-columns: minmax(0, 40rem); }
.ss-rev__item { display: flex; }
.ss-review {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .9rem;
  margin: 0;
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
/* Big quote mark in the corner */
.ss-review::before {
  content: "\201C";
  position: absolute;
  top: -1.4rem;
  right: 1rem;
  z-index: -1;
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--brand) 9%, transparent);
  transition: transform .8s var(--ease-out);
}
.ss-review:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.ss-review:hover::before { transform: translateY(6px) rotate(-6deg); }
/* Rating, then the service tag on its own line — identical in every card. */
.ss-review__top { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.ss-review__rating { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .65rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.ss-review__rating b { font-size: .82rem; font-weight: 800; color: var(--text-strong); }
.ss-review__rating .ss-rev__stars svg { width: .85rem; height: .85rem; }
.ss-review__tag { padding: .35rem .65rem; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); background: var(--brand-tint); border-radius: 999px; }
.ss-review__project { font-size: 1.05rem; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--text-strong); }
.ss-review__quote { flex: 1; margin: 0; }
.ss-review__quote p { font-size: 1.02rem; font-weight: 500; line-height: 1.65; color: var(--text); }
.ss-review__who { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ss-review__who > span { display: grid; gap: .1rem; min-width: 0; }
.ss-review__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: 50%;
  object-fit: cover;
}
.ss-review__name { font-size: .98rem; font-weight: 800; color: var(--text-strong); }
.ss-review__role { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
.ss-review__period { font-size: .72rem; color: var(--text-muted); }
.ss-review__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 999px;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.ss-review__link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-review__link svg:last-child { width: .85rem; height: .85rem; opacity: .75; }
.ss-review__link:hover, .ss-review__link:focus-visible { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ss-rev__actions { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 1023px) {
  .ss-rev__head { grid-template-columns: minmax(0, 1fr); }
  .ss-rev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ss-rev__grid { grid-template-columns: minmax(0, 1fr); }
  .ss-rev__summary { padding: 1.1rem 1.15rem; }
}

/* 20. CALL-TO-ACTION BAND ------------------------------------------------- */
/* The dark panel sits on the same light grey as the FAQ below, with its own
   space above, so it never touches the section before it. */
.ss-cta { position: relative; padding-block: clamp(3rem, 6vw, 5rem); background: var(--paper-2); }
.ss-cta + .ss-faq { padding-top: 0; }
.ss-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4.5vw, 3.75rem);
  color: var(--text-on-dark);
  background:
    radial-gradient(ellipse 60% 90% at 100% 100%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 70% at 0% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ss-cta__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ss-cta__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 10%, transparent 75%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.ss-cta__mark { position: absolute; right: 3%; top: 50%; width: auto; height: 150%; opacity: .1; transform: translateY(-50%); }
/* A soft band of light crosses the panel every few seconds (transform only). */
.ss-cta__sweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 7%, transparent), transparent);
  transform: translateX(-150%) skewX(var(--skew));
  animation: ss-sweep 7s var(--ease-in-out) 1s infinite;
}
@keyframes ss-sweep {
  0%       { transform: translateX(-150%) skewX(var(--skew)); }
  55%, 100% { transform: translateX(480%) skewX(var(--skew)); }
}
.ss-cta__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-bright); }
.ss-cta__eyebrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-cta__title { max-width: 22ch; margin-top: .9rem; font-size: clamp(1.75rem, 1.15rem + 2vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--text-on-dark); text-wrap: balance; }
.ss-cta__title .is-hl { color: var(--brand-bright); }
.ss-cta__text { max-width: 58ch; margin-top: .9rem; line-height: 1.7; color: var(--text-on-dark-muted); }
.ss-cta__points { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ss-cta__points li { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark); }
.ss-cta__points svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--brand-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; }
.ss-cta__mail svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .ss-cta__panel { grid-template-columns: minmax(0, 1fr); }
  .ss-cta__actions { flex-direction: row; flex-wrap: wrap; }
  .ss-cta__mark { right: -8%; height: 110%; }
}
@media (max-width: 480px) {
  .ss-cta__actions { flex-direction: column; }
  .ss-cta__actions .ss-btn { width: 100%; padding-inline: 1.25em; }
}

/* 21. FAQ ---------------------------------------------------------------- */
.ss-faq { overflow: clip; background: var(--paper-2); }
.ss-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.ss-faq__help { margin-top: 2rem; padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ss-faq__help h3 { font-size: 1.1rem; font-weight: 800; color: var(--text-strong); }
.ss-faq__help p { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.ss-faq__help .ss-btn { margin-top: 1.25rem; }
.ss-faq__list { display: grid; gap: .8rem; }
.ss-faq__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur), box-shadow var(--dur); }
.ss-faq__item[open] { border-color: color-mix(in srgb, var(--brand) 30%, transparent); box-shadow: var(--shadow-sm); }
.ss-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
}
.ss-faq__item summary::-webkit-details-marker { display: none; }
.ss-faq__item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ss-faq__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--text-strong);
  background: var(--paper-2);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur), color var(--dur);
}
.ss-faq__icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ss-faq__item summary:hover .ss-faq__icon { background: var(--brand-tint); color: var(--brand); }
.ss-faq__item[open] .ss-faq__icon { color: var(--on-brand); background: var(--brand); transform: rotate(45deg); }
.ss-faq__answer { padding: 0 1.35rem 1.3rem; }
.ss-faq__answer p { line-height: 1.75; color: var(--text-muted); }
.ss-faq__item[open] .ss-faq__answer { animation: ss-faq-in .5s var(--ease-out); }
@keyframes ss-faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 900px) and (min-height: 640px) {
  .ss-faq__intro { position: sticky; top: calc(var(--header-h-scrolled) + 2rem); }
}
@media (max-width: 899px) {
  .ss-faq__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 22. ABOUT — story, values and a compact office viewer ------------------- */
.ss-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.ss-about__copy .ss-lead { margin-top: 1rem; }
.ss-about__text { margin-top: .9rem; line-height: 1.75; color: var(--text-muted); }
.ss-about__values { display: grid; gap: .55rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.ss-about__values li { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.ss-about__value-icon { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--brand); background: var(--brand-tint); border-radius: 9px; }
.ss-about__value-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-about__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 1.75rem; }
/* The viewer: photos stacked in one frame, crossfading (opacity/transform). */
.ss-about__frame { position: relative; display: grid; overflow: hidden; aspect-ratio: 16 / 10.5; background: var(--paper-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ss-about__slide { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease-out), transform 6s var(--ease-out); }
.ss-about__slide.is-active { opacity: 1; transform: scale(1); }
.ss-about__caption {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem .45rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 999px;
}
.ss-about__caption::before { content: ""; width: .5rem; height: .5rem; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 3px var(--brand-soft); }
.ss-about__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--paper) 25%, transparent); }
.ss-about__progress i { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.ss-about__progress i.is-running { animation: ss-about-progress var(--about-time, 4.5s) linear forwards; }
@keyframes ss-about-progress { to { transform: scaleX(1); } }
.ss-about__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.ss-about__thumb { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 10px; opacity: .55; transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.ss-about__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-about__thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur) var(--ease-out); }
.ss-about__thumb:hover { opacity: .85; transform: translateY(-2px); }
.ss-about__thumb.is-active { opacity: 1; }
.ss-about__thumb.is-active::after { transform: scaleX(1); }
.ss-about__thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 900px) {
  .ss-about__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ss-about__thumbs { gap: .4rem; }
  .ss-about__thumb { border-radius: 7px; }
}

/* 23. ENGAGEMENT MODELS ---------------------------------------------------- */
.ss-eng__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%); }
.ss-eng__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-items: stretch; gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.ss-eng__item { display: flex; }
.ss-eng__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.9rem 1.5rem 1.5rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 7%, transparent), color-mix(in srgb, var(--paper) 2%, transparent));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
/* Facet cap: a slanted stripe in one of the logo's shades; it stretches on hover. */
.ss-eng__card::before { content: ""; position: absolute; top: 0; left: 1.5rem; width: 2.8rem; height: 5px; background: var(--cap, var(--brand)); border-radius: 0 0 3px 3px; transform: skewX(var(--skew)); transform-origin: 0 0; transition: transform .5s var(--ease-out); }
.ss-eng__card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: 0 30px 60px -32px var(--brand-glow); }
.ss-eng__card:hover::before { transform: skewX(var(--skew)) scaleX(1.8); }
.ss-eng__card.is-featured {
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--paper) 8%, transparent), color-mix(in srgb, var(--paper) 2%, transparent));
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 30px 70px -36px var(--brand-glow);
}
.ss-eng__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ss-eng__icon { display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--brand-bright); background: color-mix(in srgb, var(--paper) 7%, transparent); border: 1px solid var(--line-dark); border-radius: 14px; }
.ss-eng__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.is-featured .ss-eng__icon { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ss-eng__card:hover .ss-eng__icon svg * { animation: ss-draw .9s var(--ease-out); }
.ss-eng__badge { padding: .35rem .7rem; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--on-brand); background: var(--brand); border-radius: 999px; }
.ss-eng__title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-on-dark); }
.ss-eng__best { font-size: .88rem; line-height: 1.55; color: var(--text-on-dark-muted); }
.ss-eng__best span { display: block; margin-bottom: .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-bright); }
.ss-eng__points { display: grid; gap: .6rem; margin: .3rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--line-dark); }
.ss-eng__points li { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; line-height: 1.45; color: var(--text-on-dark); }
.ss-eng__points svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .12rem; fill: none; stroke: var(--brand-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-eng .ss-link { color: var(--brand-bright); }
.ss-eng__link { margin-top: auto; padding-top: .75rem; }
.ss-eng__note { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; color: var(--text-on-dark-muted); }
.ss-eng__note .ss-link { margin-left: .35rem; }
@media (max-width: 1100px) { .ss-eng__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ss-eng__grid { grid-template-columns: minmax(0, 1fr); } }

/* 24. INNER PAGE HEADER + TESTIMONIALS PAGE -------------------------------- */
.ss-page-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.ss-page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.ss-page-hero__copy { min-width: 0; }
/* Featured quote card: quotes take turns (fade), with a thin progress line. */
.ss-page-hero__quote {
  position: relative;
  padding: 2.25rem 2rem 2rem;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 9%, transparent), color-mix(in srgb, var(--paper) 3%, transparent));
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ss-page-hero__quote-mark { position: absolute; top: -1.6rem; right: 1.25rem; font-size: 8rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--brand) 38%, transparent); pointer-events: none; }
.ss-page-hero__quotes { display: grid; }
.ss-page-hero__q { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .6s; }
.ss-page-hero__q.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ss-page-hero__q blockquote { margin: .9rem 0 0; }
.ss-page-hero__q blockquote p { font-size: clamp(1.1rem, .95rem + .5vw, 1.35rem); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: var(--text-on-dark); }
.ss-page-hero__q figcaption { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); }
.ss-page-hero__q img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--brand); }
.ss-page-hero__q figcaption span { display: grid; gap: .1rem; }
.ss-page-hero__q figcaption b { font-size: .98rem; font-weight: 800; color: var(--text-on-dark); }
.ss-page-hero__q figcaption small { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.ss-page-hero__qbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--paper) 8%, transparent); }
.ss-page-hero__qbar i { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.ss-page-hero__qbar i.is-running { animation: ss-about-progress 6s linear forwards; }
@media (max-width: 1023px) {
  .ss-page-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .ss-page-hero__quote { max-width: 640px; }
}
.ss-page-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ss-page-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 10%, transparent 75%);
  -webkit-mask-repeat: no-repeat;
          mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 10%, transparent 75%);
          mask-repeat: no-repeat;
}
.ss-page-hero__mark { --wm-size: clamp(300px, 34vw, 520px); right: -5vw; top: 50%; height: var(--wm-size); opacity: .1; --bm-t: translateY(-50%); }
.ss-crumbs { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-on-dark-faint); }
.ss-crumbs a { color: var(--text-on-dark-muted); transition: color var(--dur-fast); }
.ss-crumbs a:hover { color: var(--brand-bright); }
.ss-crumbs [aria-current] { color: var(--text-on-dark); }
.ss-page-hero__title { margin-top: 1.1rem; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: var(--text-on-dark); text-wrap: balance; max-width: 20ch; }
.ss-page-hero__title .is-hl { color: var(--brand); }
.ss-page-hero .ss-lead { max-width: 62ch; }
.ss-page-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; }
.ss-page-hero__clutch::before { content: ""; position: absolute; left: -1rem; top: 50%; width: 1px; height: 2.6rem; margin-top: -1.3rem; background: var(--line-dark-strong); }
.ss-page-hero__proof > * { position: relative; }
.ss-page-hero__score { display: flex; align-items: center; gap: .75rem; }
.ss-page-hero__score > b { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--text-on-dark); }
.ss-page-hero__score > span { display: grid; gap: .25rem; }
.ss-page-hero__score small { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.ss-page-hero__faces { display: flex; flex-basis: 100%; align-items: center; gap: .85rem; }
.ss-page-hero__faces ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ss-page-hero__faces li { margin-left: -.7rem; animation: ss-rise .7s var(--ease-out) both; animation-delay: calc(.3s + var(--n) * 80ms); }
.ss-page-hero__faces li:first-child { margin-left: 0; }
.ss-page-hero__faces img { width: 2.9rem; height: 2.9rem; object-fit: cover; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-dark-strong); transition: transform var(--dur) var(--ease-spring); }
.ss-page-hero__faces li:hover img { transform: translateY(-4px) scale(1.08); }
.ss-page-hero__faces small { max-width: 13rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--text-on-dark-muted); }
.ss-page-hero__clutch { width: 212px; min-height: 45px; }
.ss-page-hero__clutch .clutch-widget { width: 100%; min-height: 45px; }
@media (max-width: 700px) {
  .ss-page-hero__clutch::before { display: none; }
}

/* Review wall filters */
.ss-rev__filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.ss-rev__filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out);
}
.ss-rev__filter span { min-width: 1.5rem; padding: .1rem .4rem; font-size: .72rem; text-align: center; color: var(--text-muted); background: var(--paper-2); border-radius: 999px; }
.ss-rev__filter:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); transform: translateY(-2px); }
.ss-rev__filter.is-active { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.ss-rev__filter.is-active span { color: var(--brand-deep); background: var(--paper); }
.ss-rev__filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Phones: the filters become one swipeable row. */
@media (max-width: 640px) {
  .ss-rev__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: .2rem var(--gutter) .4rem; scrollbar-width: none; }
  .ss-rev__filters::-webkit-scrollbar { display: none; }
  .ss-rev__filter { flex-shrink: 0; }
}
/* Testimonials page: the review wall follows the white video section, so it
   takes the light grey to stay distinct, and flows into the call-to-action. */
.ss-testi + .ss-rev { background: var(--paper-2); }
.ss-testi + .ss-rev + .ss-cta { padding-top: 0; }
.ss-rev__item[hidden] { display: none; }
.ss-rev__item.is-pop { animation: ss-rise .5s var(--ease-out) both; }
.ss-rev__actions { gap: 1rem 1.25rem; flex-wrap: wrap; }

/* 26. FOOTER --------------------------------------------------------------- */
/* Dark, like the hero: brand + project card, link columns (accordions on
   phones), Clutch badges, then the legal bar. Column headings carry a small
   logo stripe; the logo mark rests faintly in the corner. */
.ss-foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
  background:
    radial-gradient(ellipse 50% 40% at 0% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 55% at 100% 100%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    var(--ink);
}
.ss-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand) 25%, var(--mark-4) 50%, var(--brand) 75%, transparent);
  opacity: .7;
}
.ss-foot__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ss-foot__mark { right: -4%; bottom: -14%; height: 95%; opacity: .05; }
.ss-foot a { transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur) var(--ease-out); }
.ss-foot__ic { display: inline-flex; flex-shrink: 0; color: var(--brand-bright); }
.ss-foot__ic svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Brand + project card */
.ss-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-dark);
}
.ss-foot .ss-logo { color: var(--text-on-dark); }
.ss-foot__about { max-width: 54ch; margin-top: 1.25rem; line-height: 1.7; }
.ss-foot__contact { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.ss-foot__contact li > * {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .95rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--paper) 4%, transparent);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
}
.ss-foot__contact li > span { color: var(--text-on-dark-muted); font-weight: 500; }
.ss-foot__contact button { cursor: pointer; }
.ss-foot__contact a:hover, .ss-foot__contact a:focus-visible, .ss-foot__contact button:hover, .ss-foot__contact button:focus-visible { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }

.ss-foot__card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 7%, transparent), color-mix(in srgb, var(--paper) 2%, transparent));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
}
.ss-foot__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.5rem, 3vw, 2.25rem);
  width: 3.25rem;
  height: 4px;
  background: var(--brand);
  transform: skewX(var(--skew));
}
.ss-foot__card-title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--text-on-dark); }
.ss-foot__card-text { margin-top: .6rem; line-height: 1.65; }
.ss-foot__card .ss-btn { margin-top: 1.4rem; }
.ss-foot__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  font-size: .8125rem;
  border-top: 1px solid var(--line-dark);
}
.ss-foot__clutch { width: auto; height: 1rem; color: var(--text-on-dark); }
.ss-foot__rating b { font-size: 1rem; font-weight: 800; color: var(--text-on-dark); }
.ss-foot__stars { display: inline-flex; gap: 1px; color: var(--rating); }
.ss-foot__stars svg { width: .85rem; height: .85rem; fill: currentColor; }
.ss-foot__rating:hover span:last-of-type { color: var(--text-on-dark); }

/* Link columns */
.ss-foot__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.ss-foot__col summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
.ss-foot__col summary::-webkit-details-marker { display: none; }
.ss-foot__title { display: flex; align-items: center; gap: .65rem; font-size: .75rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-on-dark); }
.ss-foot__title::before { content: ""; width: 1rem; height: 3px; background: var(--brand); transform: skewX(var(--skew)); }
.ss-foot__chev { display: none; }
.ss-foot__links { display: grid; gap: .7rem; margin-top: 1.2rem; }
.ss-foot__links a { display: inline-block; color: var(--text-on-dark-muted); }
.ss-foot__links a:hover, .ss-foot__links a:focus-visible { color: var(--text-on-dark); transform: translateX(3px); }
.ss-foot__more { margin-top: 1.1rem; font-size: .875rem; color: var(--brand-bright); }

/* Awards + profiles */
.ss-foot__proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; border-top: 1px solid var(--line-dark); }
.ss-foot__awards { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; }
.ss-foot__label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-dark-faint); }
.ss-foot__awards ul { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.ss-foot__awards img { width: auto; height: 2.5rem; transition: transform var(--dur) var(--ease-spring); }
.ss-foot__awards li:hover img { transform: translateY(-2px) scale(1.1); }
.ss-foot__social { display: flex; flex-wrap: wrap; gap: .5rem; }
.ss-foot__social a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; font-size: .8125rem; font-weight: 600; color: var(--text-on-dark); border: 1px solid var(--line-dark); border-radius: 999px; }
.ss-foot__social svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.ss-foot__social a:hover, .ss-foot__social a:focus-visible { border-color: color-mix(in srgb, var(--brand) 60%, transparent); background: var(--brand-soft); }

/* Bottom bar */
.ss-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 2rem;
  padding-block: 1.4rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  font-size: .8125rem;
  color: var(--text-on-dark-faint);
  border-top: 1px solid var(--line-dark);
}
.ss-foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ss-foot__legal a:hover, .ss-foot__legal a:focus-visible { color: var(--text-on-dark); }
.ss-foot__top-link { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; font-weight: 600; color: var(--text-on-dark-muted); }
.ss-foot__top-link .ss-foot__ic { align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line-dark); border-radius: 50%; transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast); }
.ss-foot__top-link:hover { color: var(--text-on-dark); }
.ss-foot__top-link:hover .ss-foot__ic { transform: translateY(-3px); border-color: var(--brand); }

@media (max-width: 899px) {
  .ss-foot__top { grid-template-columns: minmax(0, 1fr); }
  .ss-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}
/* Phones: each column is an accordion (closed by main.js on load). */
@media (max-width: 639px) {
  .ss-foot__nav { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: .5rem 0; }
  .ss-foot__col { border-bottom: 1px solid var(--line-dark); }
  .ss-foot__col summary { padding-block: 1.1rem; cursor: pointer; }
  .ss-foot__chev { display: inline-flex; color: var(--text-on-dark-muted); transition: transform var(--dur) var(--ease-out); }
  .ss-foot__chev svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ss-foot__col[open] .ss-foot__chev { transform: rotate(180deg); }
  .ss-foot__links { margin-top: 0; padding-bottom: 1.25rem; }
  .ss-foot__more { margin: -.25rem 0 1.25rem; }
  .ss-foot__proof { flex-direction: column; align-items: flex-start; padding-top: 1.75rem; border-top: 0; }
  .ss-foot__awards img { height: 2.2rem; }
  .ss-foot__top-link { margin-left: 0; }
}

/* 27. CONTENT PAGES — section blocks (template-parts/blocks) -------------- */
/* Every inner page is built from these, on the same tokens, shapes and
   tones as the homepage: white, light grey (--paper) or dark. */
.ss-block--paper { background: var(--paper-2); }
.ss-faq + .ss-cta, .ss-adv + .ss-cta, .ss-block--paper + .ss-cta { padding-top: 0; }
.ss-block--dark .ss-block__head .ss-lead { color: var(--text-on-dark-muted); }

/* Page header (extends 24) */
.ss-page-hero__inner.is-solo { grid-template-columns: minmax(0, 1fr); }
.ss-page-hero__inner.is-solo .ss-page-hero__title { max-width: 24ch; }
.ss-phero__points { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.5rem; }
.ss-phero__points li { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark); }
.ss-phero__points svg, .ss-phero__list-ic svg, .ss-split__points svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; fill: none; stroke: var(--brand-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-phero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 2rem; }
.ss-phero__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.6rem; font-size: var(--fs-xs); color: var(--text-on-dark-muted); transition: color var(--dur-fast); }
.ss-phero__rating b { font-size: .95rem; font-weight: 800; color: var(--text-on-dark); }
.ss-phero__rating .ss-rev__stars svg { width: .9rem; height: .9rem; }
.ss-phero__rating:hover { color: var(--text-on-dark); }
.ss-phero__aside {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 9%, transparent), color-mix(in srgb, var(--paper) 3%, transparent));
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ss-phero__aside::before { content: ""; position: absolute; top: -1px; left: clamp(1.5rem, 3vw, 2.25rem); width: 3.25rem; height: 4px; background: var(--brand); transform: skewX(var(--skew)); }
.ss-phero__aside--image { padding: 0; overflow: hidden; }
.ss-phero__aside--image::before { z-index: 1; }
.ss-phero__aside--image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ss-phero__aside-title { margin-bottom: 1.25rem; font-size: .75rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-on-dark-muted); }
.ss-phero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line-dark); border-radius: var(--radius); }
.ss-phero__stats li { display: grid; gap: .3rem; padding: 1.25rem 1.1rem; background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.ss-phero__stats b { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--text-on-dark); }
.ss-phero__stats b em { font-style: normal; color: var(--brand-bright); }
.ss-phero__stats li > span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.ss-phero__list { display: grid; gap: .85rem; }
.ss-phero__list li { display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--text-on-dark); }
.ss-phero__list-ic { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; background: var(--brand-soft); border-radius: 50%; }

/* Readable editor text (page content, legal pages) */
.ss-prose-block { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ss-prose { max-width: 72ch; margin-inline: auto; font-size: var(--fs-base); line-height: 1.8; }
.ss-prose > * + * { margin-top: 1.1em; }
.ss-prose h2 { margin-top: 2em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.ss-prose h3 { margin-top: 1.6em; font-size: 1.2rem; }
.ss-prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.ss-prose ul, .ss-prose ol { padding-left: 1.3em; }
.ss-prose li + li { margin-top: .4em; }
.ss-prose.is-wide { max-width: 1040px; }
.ss-prose h2:first-child { margin-top: 0; }
.ss-prose__links { columns: 3 15rem; column-gap: 2rem; padding-left: 0 !important; list-style: none; }
.ss-prose__links li { break-inside: avoid; margin: 0 0 .5em !important; }
.ss-prose .ss-prose__links a { text-decoration: none; font-weight: 600; color: var(--text); }
.ss-prose .ss-prose__links a:hover { color: var(--brand-deep); text-decoration: underline; }

/* Cards grid */
.ss-feat__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.25rem; }
.ss-feat__grid > li { display: flex; }
.ss-feat__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur) var(--ease-out);
}
.ss-block--paper .ss-feat__card { box-shadow: var(--shadow-sm); }
.ss-feat__card::after { content: ""; position: absolute; top: -1px; left: 1.75rem; width: 2.5rem; height: 3px; background: var(--brand); transform: skewX(var(--skew)) scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.ss-feat__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 30%, transparent); box-shadow: var(--shadow); }
.ss-feat__card:hover::after { transform: skewX(var(--skew)) scaleX(1); }
.ss-feat__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.2rem; color: var(--brand); background: var(--brand-tint); border-radius: 14px; }
.ss-feat__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ss-feat__title { font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: var(--text-strong); }
.ss-feat__text { margin-top: .55rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.ss-feat__more { margin-top: auto; padding-top: 1.1rem; font-size: var(--fs-sm); }
.ss-block--dark .ss-feat__card { background: color-mix(in srgb, var(--paper) 4%, transparent); border-color: var(--line-dark); }
.ss-block--dark .ss-feat__card:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); box-shadow: none; }
.ss-block--dark .ss-feat__icon { color: var(--brand-bright); background: var(--brand-soft); }
.ss-block--dark .ss-feat__title { color: var(--text-on-dark); }
.ss-block--dark .ss-feat__text { color: var(--text-on-dark-muted); }
.ss-block--dark .ss-feat__more { color: var(--brand-bright); }

/* Text beside a visual */
.ss-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.ss-split.is-reverse .ss-split__visual { order: -1; }
.ss-split__text { margin-top: 1rem; line-height: 1.75; color: var(--text-muted); }
.ss-split__points { display: grid; gap: .75rem; margin-top: 1.5rem; }
.ss-split__points li { display: flex; gap: .65rem; font-weight: 600; color: var(--text-strong); }
.ss-split__points svg { margin-top: .25em; stroke: var(--brand); }
.ss-split__actions { margin-top: 2rem; }
.ss-split__visual--image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ss-split__card { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); color: var(--text-on-dark); background: radial-gradient(ellipse 80% 70% at 100% 100%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%), var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ss-split__card::before { content: ""; position: absolute; top: 0; left: clamp(1.5rem, 3vw, 2.25rem); width: 3.25rem; height: 4px; background: var(--brand); transform: skewX(var(--skew)); }
.ss-split__card-title { margin-bottom: 1.25rem; font-size: .75rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-on-dark-muted); }
.ss-split__list { display: grid; }
.ss-split__list li { display: flex; gap: 1rem; padding-block: .95rem; border-top: 1px solid var(--line-dark); }
.ss-split__list li:first-child { border-top: 0; padding-top: 0; }
.ss-split__num { font-size: .8rem; font-weight: 800; color: var(--brand-bright); }
.ss-split__list b { display: block; font-weight: 700; color: var(--text-on-dark); }
.ss-split__list small { display: block; margin-top: .2rem; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-on-dark-muted); }
.ss-split__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
.ss-split__stats b { display: block; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.ss-split__stats b em { font-style: normal; color: var(--brand-bright); }
.ss-split__stats li > span { display: block; margin-top: .4rem; font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.ss-block--dark .ss-split__text { color: var(--text-on-dark-muted); }
.ss-block--dark .ss-split__points li { color: var(--text-on-dark); }
.ss-block--dark .ss-split__points svg { stroke: var(--brand-bright); }
.ss-block--dark .ss-split__card { background: color-mix(in srgb, var(--paper) 5%, transparent); border: 1px solid var(--line-dark); box-shadow: none; }

/* Numbered process */
.ss-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: step; }
.ss-steps__item { position: relative; padding: 1.75rem 1.6rem 1.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ss-steps__num { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brand) 70%, transparent); }
.ss-steps__meta { display: inline-block; margin-top: 1rem; padding: .25rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep); background: var(--brand-tint); border-radius: 999px; }
.ss-steps__title { margin-top: 1rem; font-size: 1.15rem; font-weight: 800; color: var(--text-strong); }
.ss-steps__text { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.ss-steps__item::after { content: ""; position: absolute; top: 2.35rem; right: -1.25rem; width: 1.25rem; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); }
.ss-steps__item:nth-child(3n)::after, .ss-steps__item:last-child::after { display: none; }
.ss-block--dark .ss-steps__item { background: color-mix(in srgb, var(--paper) 4%, transparent); border-color: var(--line-dark); }
.ss-block--dark .ss-steps__title { color: var(--text-on-dark); }
.ss-block--dark .ss-steps__text { color: var(--text-on-dark-muted); }
.ss-block--dark .ss-steps__meta { color: var(--brand-bright); background: var(--brand-soft); }

/* Technology chips */
.ss-stack__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ss-stack__group { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ss-block--paper .ss-stack__group { box-shadow: var(--shadow-sm); }
.ss-stack__title { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 800; color: var(--text-strong); }
.ss-stack__title::before { content: ""; width: 1rem; height: 3px; background: var(--brand); transform: skewX(var(--skew)); }
.ss-stack__icon { display: none; }
.ss-stack__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ss-stack__chips li { padding: .4rem .8rem; font-size: .8125rem; font-weight: 600; color: var(--text); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-out); }
.ss-stack__chips li:hover { color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-2px); }

/* Number band */
.ss-statband { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ss-statband__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-statband__list li { display: grid; justify-items: center; gap: .4rem; padding: .5rem 1rem; text-align: center; border-left: 1px solid var(--line-strong); }
.ss-statband__list li:first-child { border-left: 0; }
.ss-statband__list b { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--text-strong); }
.ss-statband__list b em { font-style: normal; color: var(--brand); }
.ss-statband__list li > span { font-size: var(--fs-sm); color: var(--text-muted); }
.ss-block--dark .ss-statband__list li { border-color: var(--line-dark); }
.ss-block--dark .ss-statband__list b { color: var(--text-on-dark); }
.ss-block--dark .ss-statband__list li > span { color: var(--text-on-dark-muted); }

/* Job openings */
.ss-jobs__list { display: grid; gap: .9rem; max-width: 1040px; margin-inline: auto; }
.ss-jobs__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 1.75rem; padding: 1.4rem 1.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color var(--dur-fast), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ss-jobs__item:hover { border-color: color-mix(in srgb, var(--brand) 35%, transparent); box-shadow: var(--shadow); transform: translateY(-2px); }
.ss-jobs__num { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--brand) 70%, transparent); }
.ss-jobs__dept { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); }
.ss-jobs__title { margin-top: .2rem; font-size: 1.15rem; font-weight: 800; color: var(--text-strong); }
.ss-jobs__text { margin-top: .25rem; font-size: var(--fs-sm); color: var(--text-muted); }
.ss-jobs__tags { display: flex; flex-direction: column; gap: .35rem; }
.ss-jobs__tags li { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.ss-jobs__tags svg { width: .95rem; height: .95rem; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Photo mosaic */
.ss-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 16vw, 15rem); gap: 1rem; }
.ss-gallery__grid li { overflow: hidden; border-radius: var(--radius-lg); }
.ss-gallery__grid li:first-child { grid-column: span 2; grid-row: span 2; }
.ss-gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ss-gallery__grid li:hover img { transform: scale(1.05); }

/* Awards row as its own section (Awards, Why Choose Us) */
.ss-awardsec .ss-awards { margin-bottom: 0; }

/* Contact form */
.ss-contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.ss-contact__details { display: grid; gap: 1rem; margin-top: 2rem; }
.ss-contact__details li { display: flex; align-items: center; gap: .9rem; }
.ss-contact__details li > span:last-child { display: grid; font-weight: 700; color: var(--text-strong); }
.ss-contact__details small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.ss-contact__details a:hover, .ss-contact__chat:hover { color: var(--brand-deep); }
.ss-contact__chat { padding: 0; font: inherit; font-weight: 700; color: var(--text-strong); text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); text-underline-offset: 3px; cursor: pointer; }
.ss-contact__ic { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; color: var(--brand); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.ss-contact__ic svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-contact__next { margin-top: 2rem; padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ss-contact__next-title { font-weight: 800; color: var(--text-strong); }
.ss-contact__next ol { display: grid; gap: .75rem; margin-top: 1rem; }
.ss-contact__next li { display: flex; gap: .75rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); }
.ss-contact__next li span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex-shrink: 0; font-size: .75rem; font-weight: 800; color: var(--on-brand); background: var(--brand); border-radius: 50%; }
.ss-contact__card { position: relative; scroll-margin-top: calc(var(--header-h) + 1rem); padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ss-contact__card::before { content: ""; position: absolute; top: -1px; left: clamp(1.5rem, 3.5vw, 2.5rem); width: 3.25rem; height: 4px; background: var(--brand); transform: skewX(var(--skew)); }
.ss-contact__form-title { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); }
.ss-contact__error { margin-top: 1rem; padding: .8rem 1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-deep); background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: var(--radius-sm); }
.ss-contact__done { display: grid; justify-items: start; gap: .75rem; }
.ss-contact__done-ic { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; color: var(--on-brand); background: var(--brand); border-radius: 50%; }
.ss-contact__done-ic svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.ss-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.ss-form__field { display: grid; gap: .45rem; }
.ss-form__field > span { font-size: .8125rem; font-weight: 700; color: var(--text-strong); }
.ss-form__field em { font-style: normal; color: var(--brand); }
.ss-form input, .ss-form select, .ss-form textarea {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .95rem;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ss-form select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1rem; }
.ss-form textarea { min-height: 8rem; resize: vertical; }
.ss-form input:focus, .ss-form select:focus, .ss-form textarea:focus { outline: none; background-color: var(--paper); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.ss-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .4rem; }
.ss-form__note { display: flex; align-items: center; gap: .45rem; flex: 1 1 14rem; font-size: var(--fs-xs); color: var(--text-muted); }
.ss-form__note svg { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1023px) {
  .ss-feat__grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .ss-steps__list, .ss-stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-steps__item::after { display: none; }
  .ss-split__grid, .ss-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .ss-split.is-reverse .ss-split__visual { order: 0; }
  .ss-statband__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .ss-statband__list li:nth-child(3) { border-left: 0; }
  .ss-jobs__item { grid-template-columns: auto minmax(0, 1fr); }
  .ss-jobs__tags { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; grid-column: 2; }
  .ss-jobs__apply { grid-column: 2; justify-self: start; }
  .ss-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-gallery__grid li:last-child:nth-child(even) { grid-column: span 2; }
}
@media (max-width: 639px) {
  .ss-feat__grid, .ss-steps__list, .ss-stack__grid { grid-template-columns: minmax(0, 1fr); }
  .ss-phero__stats li { padding: 1rem .9rem; }
  .ss-form__row { grid-template-columns: minmax(0, 1fr); }
  .ss-form__foot .ss-btn { width: 100%; }
  .ss-jobs__item { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .ss-jobs__num { display: none; }
  .ss-jobs__tags, .ss-jobs__apply { grid-column: 1; }
  .ss-gallery__grid { grid-auto-rows: 8rem; gap: .6rem; }
  .ss-statband__list b { font-size: 2.2rem; }
}

/* 28. BLOG, SEARCH & 404 -------------------------------------------------- */
.ss-posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ss-posts__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast); }
.ss-posts__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 30%, transparent); box-shadow: var(--shadow); }
.ss-posts__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.ss-posts__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ss-posts__card:hover .ss-posts__thumb img { transform: scale(1.05); }
.ss-posts__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.ss-posts__meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.ss-posts__title { margin-top: .5rem; font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: var(--text-strong); }
.ss-posts__title a:hover { color: var(--brand-deep); }
.ss-posts__text { margin-top: .6rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.ss-posts__more { margin-top: auto; padding-top: 1.1rem; font-size: var(--fs-sm); }
.ss-posts__empty { display: grid; justify-items: center; gap: 1.5rem; max-width: 46rem; margin-inline: auto; text-align: center; }
.ss-posts__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.ss-posts__empty form { display: flex; gap: .5rem; width: min(100%, 26rem); }
.ss-posts__empty input[type="search"] { flex: 1; min-height: 3rem; padding: .75rem 1rem; font: inherit; font-size: var(--fs-sm); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; }
.ss-posts__empty input[type="search"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.ss-posts__empty button { padding: .75rem 1.25rem; font-weight: 700; color: var(--on-brand); background: var(--brand); border-radius: 10px; }
/* Pagination */
.ss-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.ss-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ss-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: .75rem; font-size: var(--fs-sm); font-weight: 700; color: var(--text); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); }
.ss-pagination .page-numbers:hover { color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.ss-pagination .page-numbers.current { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
/* Single post */
.ss-post { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ss-post__image { margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 72rem; }
.ss-post__image img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.ss-post .ss-prose img { height: auto; border-radius: var(--radius); }
.ss-post__tags { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 72ch; margin: 2rem auto 0; padding: 0; list-style: none; }
.ss-post__tags a { display: inline-block; padding: .35rem .8rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text); background: var(--paper-2); border-radius: 999px; }
.ss-post__tags a:hover { color: var(--brand-deep); }
/* Previous / next */
.ss-postnav { padding-block: 0 clamp(2rem, 4vw, 3rem); background: var(--paper); }
.ss-postnav__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ss-postnav__link { display: grid; gap: .3rem; padding: 1.1rem 1.3rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur-fast), transform var(--dur) var(--ease-out); }
.ss-postnav__link:hover { border-color: color-mix(in srgb, var(--brand) 35%, transparent); transform: translateY(-2px); }
.ss-postnav__link:last-child:nth-child(2) { text-align: right; }
.ss-postnav__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.ss-postnav__title { font-weight: 700; color: var(--text-strong); }
@media (max-width: 1023px) { .ss-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ss-posts__grid, .ss-postnav__grid { grid-template-columns: minmax(0, 1fr); } .ss-postnav__link:last-child:nth-child(2) { text-align: left; } }

/* 29. COOKIE NOTICE ------------------------------------------------------- */
.ss-cookie {
  position: fixed;
  left: 50%;
  bottom: clamp(.75rem, 2vw, 1.25rem);
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
  width: min(100% - 1.5rem, 54rem);
  padding: 1rem 1.25rem;
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.ss-cookie.is-in { opacity: 1; transform: translate(-50%, 0); }
.ss-cookie__text { flex: 1 1 22rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-on-dark-muted); }
.ss-cookie__text a { font-weight: 700; color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }
.ss-cookie__actions { display: flex; gap: .6rem; margin-left: auto; }
@media (max-width: 520px) { .ss-cookie__actions { width: 100%; } .ss-cookie__actions .ss-btn { flex: 1; } }

/* 25. REDUCED MOTION
 ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  /* Award spotlight: no timed rotation (click to browse) */
  .ss-spot__bar { display: none; }
  /* CTA band: no light sweep */
  .ss-cta__sweep { display: none; }
  /* About: photos change instantly, no progress line */
  .ss-about__progress { display: none; }
  .ss-page-hero__qbar { display: none; }
}

/* ===========================================================================
 * 30. CASE STUDY BLOCKS
 * Engagement parameters, outcome metrics, context, engineering problems,
 * architecture layers, the capability table and the integration flow.
 * ------------------------------------------------------------------------ */

/* --- 30.1 Engagement parameters ---------------------------------------- */
.ss-params { padding-block: clamp(2rem, 4vw, 3rem); }
.ss-params__head { margin-bottom: 1.25rem; }
.ss-params__title { margin: .4rem 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ss-params__grid {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.ss-params__item { padding: 1rem 1.1rem; background: var(--paper); }
.ss-params__grid dt { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ss-params__grid dd { margin: .3rem 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); line-height: 1.35; }

/* --- 30.2 Outcome metrics ---------------------------------------------- */
.ss-metrics__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin: 2.5rem 0 0; padding: 0; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.ss-metrics__item {
  display: grid; align-content: start; gap: .5rem; padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
}
.ss-block--dark .ss-metrics__item { color: var(--text-on-dark); }
.ss-metrics__value { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(135deg, var(--brand-bright), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss-metrics__label { font-size: var(--fs-sm); font-weight: 800; line-height: 1.3; }
.ss-metrics__text { margin: .25rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-on-dark-muted); }
.ss-block:not(.ss-block--dark) .ss-metrics__text { color: var(--text-muted); }
.ss-metrics__note { margin: .6rem 0 0; padding-top: .6rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: var(--text-on-dark-faint); border-top: 1px solid var(--line-dark); }
.ss-block:not(.ss-block--dark) .ss-metrics__note { color: var(--text-muted); border-top-color: var(--line); }
@media (max-width: 900px) { .ss-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ss-metrics__grid { grid-template-columns: minmax(0, 1fr); } }

/* --- 30.3 Context -------------------------------------------------------- */
.ss-context__grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ss-context__item { padding: clamp(1.15rem, 2vw, 1.6rem); background: var(--paper-2); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.ss-context__item.is-wide { grid-column: 1 / -1; }
.ss-context__label { margin: 0 0 .5rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); }
.ss-context__text { margin: 0; line-height: 1.65; color: var(--text); }

/* --- 30.4 Engineering problems ------------------------------------------ */
.ss-probs__list { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin: 2.5rem 0 0; padding: 0; }
.ss-probs__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ss-probs__num { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: color-mix(in srgb, var(--brand) 32%, transparent); font-variant-numeric: tabular-nums; }
.ss-probs__title { margin: 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--text-strong); }
.ss-probs__text { margin: .6rem 0 0; line-height: 1.7; color: var(--text); }
.ss-probs__did { margin-top: 1.1rem; padding: .9rem 1.1rem; background: var(--brand-tint); border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; }
.ss-probs__did p { margin: 0; line-height: 1.65; color: var(--text); }
.ss-probs__did-label { margin: 0 0 .3rem !important; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep) !important; }
@media (max-width: 560px) { .ss-probs__item { grid-template-columns: 1fr; gap: .5rem; } }

/* --- 30.5 Architecture layers ------------------------------------------- */
.ss-arch__list { display: grid; gap: 1rem; margin: 2.5rem 0 0; padding: 0; }
.ss-arch__layer { padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ss-arch__head { display: flex; align-items: baseline; gap: .8rem; }
.ss-arch__num { font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: color-mix(in srgb, var(--brand) 55%, transparent); font-variant-numeric: tabular-nums; }
.ss-arch__label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); }
.ss-arch__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.ss-arch__chips li { padding: .3rem .65rem; font-size: .74rem; font-weight: 700; color: var(--text-strong); background: var(--paper-3); border-radius: 999px; }
.ss-arch__text { margin: .75rem 0 0; line-height: 1.65; color: var(--text); }
.ss-arch__note { margin: 1.5rem 0 0; padding: 1rem 1.2rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text); background: var(--brand-tint); border-radius: var(--radius-lg); }

/* --- 30.6 Capability table ---------------------------------------------- */
.ss-caps__wrap { margin-top: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ss-caps__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ss-caps__table th, .ss-caps__table td { padding: .9rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ss-caps__table thead th { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); background: var(--paper-2); }
.ss-caps__table tbody th { font-weight: 800; color: var(--text-strong); }
.ss-caps__table tbody td { color: var(--text); line-height: 1.6; }
.ss-caps__table tbody tr:last-child th, .ss-caps__table tbody tr:last-child td { border-bottom: 0; }
.ss-caps__table tbody td:nth-child(2), .ss-caps__table tbody td:nth-child(3) { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); white-space: nowrap; }
@media (max-width: 760px) {
  .ss-caps__table, .ss-caps__table tbody, .ss-caps__table tr, .ss-caps__table th, .ss-caps__table td { display: block; }
  .ss-caps__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-caps__table tbody tr { padding: .4rem 0; border-bottom: 1px solid var(--line); }
  .ss-caps__table tbody tr:last-child { border-bottom: 0; }
  .ss-caps__table th, .ss-caps__table td { border-bottom: 0; padding: .35rem 1.1rem; }
  .ss-caps__table tbody th { padding-top: .9rem; font-size: 1rem; }
  .ss-caps__table td::before { content: attr(data-label) " · "; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
  .ss-caps__table tbody td:nth-child(2), .ss-caps__table tbody td:nth-child(3) { white-space: normal; }
}

/* --- 30.7 Integration flow ---------------------------------------------- */
.ss-flow__stack { display: grid; gap: .6rem; margin-top: 2.5rem; }
.ss-flow__group { padding: clamp(1.1rem, 2vw, 1.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ss-flow__label { margin: 0 0 .9rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); }
.ss-flow__items { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.ss-flow__items li { display: grid; gap: .15rem; padding: .7rem .85rem; background: var(--paper-2); border-radius: 10px; }
.ss-flow__items b { font-size: var(--fs-sm); font-weight: 800; color: var(--text-strong); }
.ss-flow__items span { font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
.ss-flow__arrow { margin: 0; text-align: center; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.ss-flow__note { margin: 1.5rem 0 0; padding: 1rem 1.2rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text); background: var(--brand-tint); border-radius: var(--radius-lg); }

/* --- 30.8 Portfolio card: parameters and headline figures ---------------- */
.ss-case__params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; align-self: stretch; gap: .35rem .9rem; margin: .7rem 0 0; }
.ss-case__params > div { display: grid; gap: .1rem; }
.ss-case__params dt { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ss-case__params dd { margin: 0; font-size: .82rem; font-weight: 700; color: var(--text-strong); }
.ss-case__metrics { display: grid; gap: .6rem .8rem; width: 100%; align-self: stretch; margin: auto 0 0; padding: .9rem 0 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ss-case__metrics li { display: grid; gap: .15rem; align-content: start; }
.ss-case__metrics b { font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; color: var(--brand); font-variant-numeric: tabular-nums; }
.ss-case__metrics li > span { font-size: .68rem; line-height: 1.35; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(3 * 1.35 * .68rem); }
/* Every card the same height: the summary and the figure labels are clamped
   so a long description cannot make one card taller than its neighbours. */
.ss-case__text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(3 * 1.65em);
}
.ss-case__metrics b span, .ss-case__metrics b em { font-size: inherit; font-style: normal; }
@media (max-width: 900px) { .ss-case__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- 30.9 Banner under the homepage project cards ------------------------ */
.ss-work__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* The same short skewed tab the other panels on the site use. */
.ss-work__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 3.5vw, 2.75rem);
  width: 3.25rem;
  height: 4px;
  background: var(--brand);
  transform: skewX(var(--skew));
}
/* The copy takes the room the buttons leave, rather than a fixed width that
   happens to fit at one viewport and wraps at the next. */
.ss-work__cta-copy { flex: 1 1 22rem; min-width: 0; max-width: 42rem; }
.ss-work__cta-title {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text-strong);
  text-wrap: balance;
}
.ss-work__cta-text { margin: .5rem 0 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.ss-work__cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }
@media (max-width: 720px) {
  .ss-work__cta { flex-direction: column; align-items: flex-start; }
  .ss-work__cta-actions { width: 100%; }
  .ss-work__cta-actions > * { flex: 1 1 12rem; justify-content: center; }
}

/* --- 30.10 Project filters ----------------------------------------------- */
.ss-work__filters {
  display: grid;
  gap: .9rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.ss-work__filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.ss-work__chips { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.ss-work__filter-label {
  flex: 0 0 auto; margin-right: .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.ss-work__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  font: inherit; font-size: .8125rem; font-weight: 700;
  color: var(--text); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast);
}
.ss-work__chip span {
  font-size: .68rem; font-weight: 800; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ss-work__chip:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-deep); }
.ss-work__chip.is-on {
  color: var(--on-brand); background: var(--brand); border-color: var(--brand);
}
.ss-work__chip.is-on span { color: color-mix(in srgb, var(--on-brand) 75%, transparent); }
.ss-work__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ss-work__chip[hidden] { display: none; }
.ss-work__filter-count { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ss-work__filter-count:empty { display: none; }
/* A filtered-out card is removed from the grid so no gap is left behind. */
.ss-work__item[hidden] { display: none; }
.ss-work__empty { margin: 0; padding: 2.5rem 0; text-align: center; color: var(--text-muted); }
/* Twenty industry chips wrapping pushed the first card ~870px down the page
   on a phone, so each group becomes one horizontally scrollable row. Every
   chip is still above the cards, which is the point of the bar. */
@media (max-width: 560px) {
  .ss-work__filter-label { flex: 1 0 100%; margin-bottom: .1rem; }
  .ss-work__chips {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Bleed to the panel edges so the row reads as scrollable. */
    margin-inline: calc(-1 * clamp(1.1rem, 2.2vw, 1.75rem));
    padding-inline: clamp(1.1rem, 2.2vw, 1.75rem);
    padding-block: .15rem;
  }
  .ss-work__chips::-webkit-scrollbar { display: none; }
  .ss-work__chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ─────────────────────────────────────────────────────────────────────────
   31. WHO WE BUILD FOR
   Four tinted panels running from the lightest logo tone to the deepest, so
   the row reads as a spectrum from a first release to an enterprise estate.
   The bottom scrim is what makes white text safe on the lighter tones.
   ───────────────────────────────────────────────────────────────────────── */
.ss-aud__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.35rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ss-aud__item { --d: 0s; display: grid; }
.ss-aud__card {
  /* One ramp across the row: brand red for a first release, deepening to
     near-ink for an enterprise estate. --step comes from the template. */
  --tint: color-mix(in srgb, var(--brand) calc(100% - var(--step, 0) * 24%), var(--ink));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(20rem, 27vw, 24rem);
  padding: clamp(1.25rem, 1.8vw, 1.6rem);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 10%, color-mix(in srgb, white 16%, transparent), transparent 55%),
    var(--tint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* Logo stripes, at the mark's own angle. */
.ss-aud__stripes {
  position: absolute;
  inset: -12% -22%;
  z-index: -2;
  background: repeating-linear-gradient(109deg, transparent 0 30px, rgb(255 255 255 / .09) 30px 33px);
  transition: transform 1.2s var(--ease-out);
}
/* Darkens the lower half so white text clears contrast on every tone. */
.ss-aud__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ink) 58%, transparent) 0%,
    color-mix(in srgb, var(--ink) 24%, transparent) 42%,
    transparent 72%);
}
.ss-aud__ghost {
  position: absolute;
  top: clamp(.9rem, 1.6vw, 1.4rem);
  right: clamp(.6rem, 1.4vw, 1.1rem);
  z-index: -1;
  display: block;
  width: clamp(5.5rem, 8vw, 7.5rem);
  color: rgb(255 255 255 / .22);
  transition: transform var(--dur-slow, .6s) var(--ease-out), color var(--dur) var(--ease-out);
}
.ss-aud__ghost svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.25; }
.ss-aud__body { display: grid; gap: .5rem; }
.ss-aud__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .15rem;
  color: #fff;
  background: rgb(255 255 255 / .16);
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: .7rem;
  backdrop-filter: blur(4px);
}
.ss-aud__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ss-aud__title { margin: 0; color: #fff; font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 800; letter-spacing: -.01em; }
.ss-aud__best {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .85);
}
.ss-aud__text { margin: .15rem 0 0; font-size: var(--fs-sm); line-height: 1.55; color: rgb(255 255 255 / .88); }
/* Inherits .ss-link for the arrow loop, but .ss-link is position:relative and
   its ::after is the sweeping underline. Both fight the stretched hit area,
   so — as on the portfolio cards — go static, drop ::after, stretch ::before. */
.ss-aud__link {
  position: static;
  margin-top: .5rem;
  align-self: flex-start;
  font-size: var(--fs-sm);
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 2px;
  text-decoration-color: rgb(255 255 255 / .4);
  transition: text-decoration-color var(--dur) var(--ease-out);
}
.ss-aud__link::after { display: none; }
.ss-aud__card:hover .ss-aud__link,
.ss-aud__card:focus-within .ss-aud__link { text-decoration-color: #fff; }
/* The whole card is the hit area; the link stays the accessible name. */
.ss-aud__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.ss-aud__card:hover,
.ss-aud__card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow); }
.ss-aud__card:hover .ss-aud__stripes,
.ss-aud__card:focus-within .ss-aud__stripes { transform: translateX(-22px); }
.ss-aud__card:hover .ss-aud__ghost,
.ss-aud__card:focus-within .ss-aud__ghost { transform: scale(1.06) rotate(-3deg); color: rgb(255 255 255 / .3); }
.ss-aud__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1080px) {
  .ss-aud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-aud__card { min-height: 19rem; }
}
@media (max-width: 560px) {
  .ss-aud__grid { grid-template-columns: 1fr; }
  .ss-aud__card { min-height: 15.5rem; }
  .ss-aud__ghost { width: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-aud__card,
  .ss-aud__stripes,
  .ss-aud__ghost { transition: none; }
  .ss-aud__card:hover { transform: none; }
  .ss-aud__card:hover .ss-aud__stripes { transform: none; }
  .ss-aud__card:hover .ss-aud__ghost { transform: none; }
}