/* ============================================================
   NORTHFIELD & CO — GLOBAL STYLESHEET
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ---- Design tokens ---- */
:root {
  --primary: #6D3DF5;
  --primary-dark: #5125C7;
  --primary-light: #F0EBFF;
  --accent-pink: #E8399B;
  --accent-pink-dark: #C21F7E;
  --gradient-premium: linear-gradient(120deg, #6D3DF5 0%, #A23DE0 50%, #E8399B 100%);
  --gradient-premium-hover: linear-gradient(120deg, #5125C7 0%, #8B2BC7 50%, #C21F7E 100%);
  --text: #17151F;
  --muted: #6F6A78;
  --border: #E9E5F2;
  --white: #FFFFFF;
  --surface: #FAF9FC;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;

  --shadow-soft: 0 12px 40px rgba(70, 45, 120, 0.08);
  --shadow-hover: 0 24px 70px rgba(70, 45, 120, 0.15);

  --transition: 350ms cubic-bezier(.2,.8,.2,1);

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container-max: 1240px;
  --header-h: 84px;
}

/* ---- Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Scroll smoothing on desktop is handled by Lenis (js/main.js), which
   is deliberately skipped on touch devices — see initSmoothScroll().
   Native CSS smooth-scroll stays "auto" (off) on desktop, since running
   it alongside Lenis causes the scroll to feel laggy/delayed (the
   browser's native smoothing fights Lenis's own animation frame loop).
   On touch devices, native smooth-scroll is turned back on below so
   anchor-link taps still animate, at zero JS cost. */
html { scroll-behavior: auto; }
@media (hover: none), (pointer: coarse) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: linear-gradient(180deg, #F7F1FF 0%, #FDFCFF 18%, #FFFFFF 50%, #FDFBFE 82%, #FCF1F8 100%);
  background-attachment: fixed;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--primary-light); color: var(--primary-dark); }

/* ---- Focus states ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .container { padding: 0 22px; }
}

section { position: relative; }

.section-pad { padding: 128px 0; }
.section-pad-sm { padding: 88px 0; }

@media (max-width: 900px) {
  body { background-attachment: scroll; }
  .section-pad { padding: 88px 0; }
  .section-pad-sm { padding: 64px 0; }
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.hero-heading {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.section-heading {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 700;
  max-width: 720px;
}

.accent {
  background: var(--gradient-premium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

p.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--muted);
  max-width: 540px;
  line-height: 1.7;
}

.body-text {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 62ch;
}

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--gradient-premium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 30px;
  border-radius: 100px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-premium);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(168, 45, 190, 0.32);
}
.btn-primary:hover {
  background: var(--gradient-premium-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(168, 45, 190, 0.42);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-icon {
  transition: transform var(--transition);
}
.btn:hover .btn-icon { transform: translateX(4px); }

/* ---- Header ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition), backdrop-filter var(--transition);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 24px rgba(23, 21, 31, 0.04);
}

/* Low-end devices: backdrop-filter blur is one of the more GPU-expensive
   effects a browser can composite, especially on a fixed, full-width
   element repainted on every scroll frame. Swap to a solid, near-opaque
   background — same visual read (header stands out from content behind
   it) without the blur compositing cost. */
html.perf-lite .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0;
}
.logo-mark {
  width: 60px;
  height: 44px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-2px);
  margin-right: 4px;
}

/* ---- Nav logo letter-reveal: same rise-from-mask concept as the
   hero brand moment, scaled down for the header wordmark. ---- */
.logo-text {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.logo-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.logo-chars {
  display: inline-block;
}
.logo-sky,
.logo-sky .logo-char {
  background: var(--gradient-premium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

[data-logo-reveal]:not(.is-revealing):not(.is-ready) .logo-chars {
  opacity: 0;
}
[data-logo-reveal].is-revealing .logo-chars,
[data-logo-reveal].is-ready .logo-chars {
  opacity: 1;
}

.logo-char {
  display: inline-block;
  opacity: 1;
  transform: translateY(110%);
  will-change: transform;
}
.logo-space {
  display: inline-block;
}
[data-logo-reveal].is-revealing .logo-char {
  animation: logo-char-rise 480ms cubic-bezier(.16,.9,.28,1.22) forwards;
  animation-delay: var(--char-delay, 0ms);
}
@keyframes logo-char-rise {
  0%   { transform: translateY(110%); }
  75%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-char { transform: translateY(0) !important; animation: none !important; }
}

.main-nav {
  display: flex;
  gap: 36px;
}

.main-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding: 4px 0;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1.5px;
  background: var(--primary);
  transition: width var(--transition);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

.main-nav a.active {
  color: var(--primary-dark);
}

.header-cta { display: flex; align-items: center; gap: 20px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  z-index: 1200;
}
.hamburger span {
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .main-nav { display: none; }
  .header-cta .btn-primary { display: none; }
  .hamburger { display: flex; }
}

/* ---- Mobile nav panel ---- */
.mobile-panel {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease;
  pointer-events: none;
}
.mobile-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-panel nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-panel nav a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  transition: color var(--transition), padding-left var(--transition);
}
.mobile-panel nav a:hover,
.mobile-panel nav a:focus-visible {
  color: var(--primary);
  padding-left: 8px;
}
.mobile-panel nav a.active { color: var(--primary); font-weight: 700; }
.mobile-panel .btn-primary {
  margin-top: 36px;
  justify-content: center;
  width: 100%;
}
body.menu-open { overflow: hidden; }

/* ============================================================
   HERO — Scale To Sky, typography-led brand statement
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 32px) 0 40px;
  overflow: hidden;
  background: linear-gradient(170deg, #F5EEFF 0%, #FDFBFF 40%, #FCEEF7 100%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--white));
  pointer-events: none;
}

/* ---- ambient background: near-invisible grid + glow + arc ----
   overflow:hidden here backs up .hero's own overflow:hidden as a
   second containment layer for these decorative absolute elements. */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(23,21,31,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,21,31,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 78%);
}
.hero-glow {
  position: absolute;
  width: min(680px, 100vw); height: min(680px, 100vw);
  top: -20%;
  left: 32%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(109,61,245,0.16), transparent 70%);
  filter: blur(20px);
}
.hero-glow-warm {
  position: absolute;
  width: min(560px, 100vw); height: min(560px, 100vw);
  bottom: -22%;
  right: 6%;
  background: radial-gradient(circle, rgba(217,163,110,0.14), transparent 72%);
  filter: blur(24px);
}
.hero-arc {
  position: absolute;
  /* min(1400px, 100vw) keeps this purely decorative ring from ever
     being wider than the viewport, as extra insurance beyond
     .hero-field's overflow:hidden clipping. */
  width: min(1400px, 100vw);
  height: min(1400px, 100vw);
  border: 1px solid rgba(109,61,245,0.08);
  border-radius: 50%;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* ---- brand mark: the dominant visual ---- */
.hero-brand-block {
  text-align: center;
  margin: 0 auto;
}

.hero-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6.4vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}
.hero-brand-word {
  margin-right: 0.24em;
}
.hero-brand em {
  font-style: normal;
  color: var(--primary);
}

.hero-tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.02em;
  word-spacing: 0.15em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 auto;
  text-align: center;
  max-width: 16ch;
}
.hero-tagline em {
  font-style: normal;
  color: var(--primary);
}

/* ---- supporting copy + CTA, centered under the brand ---- */
.hero-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 26px auto 0;
}

.hero-copy-text {
  max-width: 620px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--muted);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 26px;
}

.btn-ghost {
  padding: 15px 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 1.5px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border);
}

.hero-capabilities {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.75;
}
.hero-capabilities span {
  display: inline-block;
  margin: 0 10px;
  color: var(--primary);
  opacity: 0.6;
}

/* ---- digital ecosystem: subtle floating cards below the fold-line ---- */
.hero-ecosystem {
  position: relative;
  height: 170px;
  max-width: 860px;
  margin: 36px auto 0;
}

.eco-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
  will-change: transform;
  --px: 0px;
  --py: 0px;
  --hover-lift: 0px;
  transform: translate(var(--px), var(--py)) translateY(var(--hover-lift));
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms cubic-bezier(.2,.8,.2,1), border-color 350ms cubic-bezier(.2,.8,.2,1);
}
.eco-card:hover {
  --hover-lift: -5px;
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-light);
}

.eco-web {
  width: 230px;
  top: 0;
  left: 2%;
  z-index: 2;
}
.eco-card-top { display: flex; gap: 5px; margin-bottom: 12px; }
.eco-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.eco-card-body { display: flex; flex-direction: column; gap: 7px; }
.eco-bar { height: 6px; border-radius: 3px; background: var(--surface); }
.eco-block { height: 34px; border-radius: 8px; background: var(--primary-light); margin-top: 4px; }

.eco-app {
  width: 128px;
  top: 34px;
  left: 38%;
  z-index: 3;
}
.eco-app-screen {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 9px;
  border: 1px solid var(--border);
}
.eco-app-notch { width: 26px; height: 4px; border-radius: 3px; background: var(--border); margin: 0 auto 10px; }
.eco-app-row { height: 8px; border-radius: 3px; background: var(--primary-light); margin-bottom: 6px; }
.eco-app-row.short { width: 60%; background: var(--border); }

.eco-growth {
  width: 190px;
  top: 4px;
  right: 4%;
  z-index: 1;
  background: var(--primary);
  color: var(--white);
  border: none;
}
.eco-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 14px;
}
.eco-label-light { color: rgba(255,255,255,0.7); margin-top: 0; }
.eco-growth-figure {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  margin-top: 4px;
}
.eco-sparkline {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  color: rgba(255,255,255,0.85);
}

/* ---- scroll indicator ---- */
.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 28px auto 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.55;
  transition: opacity var(--transition);
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll svg { animation: hero-scroll-bob 2.2s ease-in-out infinite; }

@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---- entrance animation ---- */
.hero-anim {
  opacity: 0;
  animation: hero-fade-in 700ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d, 0ms);
}
/* Elements with no independent transform (brand, tagline, copy, actions, etc.)
   also get a subtle upward settle. Ecosystem cards manage their own transform
   (parallax + hover), so they fade in place without this. */
.hero-anim:not(.eco-card) {
  transform: translateY(16px);
  animation-name: hero-fade-up;
}
@keyframes hero-fade-in {
  to { opacity: 1; }
}
@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim { animation: none; opacity: 1; }
  .hero-anim:not(.eco-card) { transform: none; }
  .hero-scroll svg { animation: none; }
}

/* ---- Hero heading word-reveal (page-load only) ----
   One-time entrance for .hero-tagline, independent of both .hero-anim
   (used by the rest of the Hero block) and --hst-progress (the Hero →
   Services scroll transition — untouched by this). Each word sits in
   an overflow:hidden mask so it can rise from below without affecting
   the heading's own centered text flow/wrapping. Runs automatically on
   page load via CSS animation + delay, no JS required. */
.hero-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Padding-free, no fixed line-height guess: the mask simply sizes to
     its inline-block word content (same box the plain text word would
     have occupied), so it can't accidentally clip glyph ascenders or
     the initial translateY(30px) offset before the animation starts. */
}
.hero-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(30px);
  animation: hero-word-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(150ms + var(--wd, 0ms));
  will-change: transform, opacity, filter;
}
@keyframes hero-word-rise {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  /* Slightly smaller travel/blur on mobile — kept subtle rather than
     removed, per spec ("reduce if necessary", not "remove"). Heading
     font-size/layout itself is untouched (governed elsewhere). */
  .hero-word {
    transform: translateY(18px);
    filter: blur(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word-mask { overflow: visible; }
  .hero-word {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Low-end devices: animating filter:blur() per word is one of the
   pricier entrance effects to composite. Keep the rise/fade (cheap,
   transform+opacity only) but drop the blur step. */
html.perf-lite .hero-word {
  filter: none;
  animation-name: hero-word-rise-lite;
}
@keyframes hero-word-rise-lite {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .hero-ecosystem { height: auto; max-width: 420px; }
  .eco-card { position: relative; width: 100%; top: auto; left: auto; right: auto; }
  .hero-ecosystem { display: flex; flex-direction: column; gap: 16px; }
  .eco-app { display: none; }
}

@media (max-width: 640px) {
  .hero { min-height: unset; padding: calc(var(--header-h) + 36px) 0 48px; }
  .hero-brand { font-size: clamp(1.7rem, 8.6vw, 2.6rem); }
  .hero-grid-lines { background-size: 44px 44px; }
  .hero-glow { width: 380px; height: 380px; }
  .hero-actions { flex-direction: column; gap: 16px; }
  .hero-capabilities { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .hero-capabilities span { margin: 0 6px; }
  .eco-growth { display: none; }
}

/* ============================================================
   HERO → SERVICES SCROLL TRANSITION (Home page only)
   ------------------------------------------------------------
   .hero-scroll-wrapper is the positioning context for a layered
   transition: the Hero becomes a sticky background layer, and the
   Services section (opaque white, higher z-index) rises up over it
   as the user scrolls. Progress is driven by a single CSS custom
   property, --hst-progress (0 → 1), written by
   initHeroServicesTransition() in js/main.js via rAF.

   This is scoped entirely to .hero-scroll-wrapper / .hero-scroll-cover
   so it cannot affect .hero or .services-hero on other pages, which
   reuse the same .hero-field/.hero-grid-lines/etc. base classes.
   ============================================================ */
.hero-scroll-wrapper {
  position: relative;
  /* Default (no-JS / not-yet-initialized) state: plain stacked flow,
     identical to the original markup. JS adds .hst-active once it has
     measured the layout, which is what actually enables the sticky
     layered effect below. */
}

.hero-scroll-wrapper.hst-active {
  --hst-progress: 0;
}

/* Hero acts as the sticky background layer while the wrapper scrolls
   past it. Sticky (not fixed) keeps it participating in normal layout,
   so it never needs manual top/height math and can't strand blank
   space if content length changes.

   Cinematic expansion: instead of shrinking, the Hero pushes gently
   outward as Services rises over it — background expands the most,
   content expands only a hair, creating a layered depth cue without
   any 3D. Values intentionally small per spec (max ~1.08 / 1.02). */
.hero-scroll-wrapper.hst-active .hero {
  position: sticky;
  top: 0;
  z-index: 1;
  transform: scale(calc(1 + (0.05 * var(--hst-progress, 0))));
  opacity: calc(1 - (0.05 * var(--hst-progress, 0)));
  filter: brightness(calc(1 - (0.04 * var(--hst-progress, 0))));
}
/* will-change only while a transition is actually in flight (see
   .hst-transitioning, toggled by main.js). Applying it permanently on
   .hst-active kept these 8 layers GPU-composited for the rest of the
   page's lifetime — including while scrolling through Services and
   everything below it — which is what was making that scrolling feel
   sluggish. */
.hero-scroll-wrapper.hst-active.hst-transitioning .hero {
  will-change: transform, opacity;
}

/* Background decor expands slightly more than the Hero shell itself,
   content expands slightly less — that spread between the two rates
   is what reads as depth/parallax rather than one flat zoom. */
.hero-scroll-wrapper.hst-active .hero-field {
  transform: scale(calc(1 + (0.08 * var(--hst-progress, 0))));
}
.hero-scroll-wrapper.hst-active.hst-transitioning .hero-field {
  will-change: transform;
}
.hero-scroll-wrapper.hst-active .hero-inner {
  transform: scale(calc(1 + (0.02 * var(--hst-progress, 0))));
}
.hero-scroll-wrapper.hst-active.hst-transitioning .hero-inner {
  will-change: transform;
}

/* Individual background elements react a touch differently so the
   field doesn't move as one rigid block. Glow/arc keep their own
   centering transforms (translateX(-50%)), so scale is composed
   alongside them rather than replacing them. */
.hero-scroll-wrapper.hst-active .hero-grid-lines {
  transform: scale(calc(1 + (0.06 * var(--hst-progress, 0))));
}
.hero-scroll-wrapper.hst-active .hero-glow {
  transform: translateX(-50%) scale(calc(1 + (0.10 * var(--hst-progress, 0))));
}
.hero-scroll-wrapper.hst-active .hero-glow-warm {
  transform: scale(calc(1 + (0.09 * var(--hst-progress, 0))));
}
.hero-scroll-wrapper.hst-active .hero-arc {
  transform: translateX(-50%) scale(calc(1 + (0.07 * var(--hst-progress, 0))));
}

/* Services rises from below and covers the Hero. Solid white background
   (already true of the page body) plus a higher z-index is what lets it
   visually take over the screen; translateY does the physical motion.
   Travel distance increased (12vh → 22vh) so the rise reads clearly
   against the now-expanding Hero beneath it. */
.hero-scroll-wrapper.hst-active .hero-scroll-cover {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px rgba(70, 45, 120, 0.10);
  transform: translateY(calc((1 - var(--hst-progress, 0)) * 22vh));
}
.hero-scroll-wrapper.hst-active.hst-transitioning .hero-scroll-cover {
  will-change: transform;
}

/* Progress is calculated with easing already applied in JS, so the CSS
   side stays a plain linear read of the custom property. */

@media (prefers-reduced-motion: reduce) {
  /* Fully disable the layered effect: normal stacked sections, no
     sticky pinning, no transform/opacity animation tied to scroll. */
  .hero-scroll-wrapper.hst-active .hero {
    position: relative;
    transform: none;
    opacity: 1;
    filter: none;
  }
  .hero-scroll-wrapper.hst-active .hero-field,
  .hero-scroll-wrapper.hst-active .hero-inner,
  .hero-scroll-wrapper.hst-active .hero-grid-lines,
  .hero-scroll-wrapper.hst-active .hero-arc {
    transform: none;
  }
  .hero-scroll-wrapper.hst-active .hero-glow {
    transform: translateX(-50%);
  }
  .hero-scroll-wrapper.hst-active .hero-glow-warm {
    transform: none;
  }
  .hero-scroll-wrapper.hst-active .hero-scroll-cover {
    transform: none;
  }
}

/* Low-end devices (see initPerfDetection in main.js): same fallback as
   prefers-reduced-motion above. main.js already skips adding
   .hst-active on .perf-lite, so this is a CSS-only failsafe in case the
   class landed after layout was already read — belt and suspenders,
   costs nothing when unused. */
html.perf-lite .hero-scroll-wrapper.hst-active .hero {
  position: relative;
  transform: none;
  opacity: 1;
  filter: none;
}
html.perf-lite .hero-scroll-wrapper.hst-active .hero-field,
html.perf-lite .hero-scroll-wrapper.hst-active .hero-inner,
html.perf-lite .hero-scroll-wrapper.hst-active .hero-grid-lines,
html.perf-lite .hero-scroll-wrapper.hst-active .hero-arc {
  transform: none;
}
html.perf-lite .hero-scroll-wrapper.hst-active .hero-glow {
  transform: translateX(-50%);
}
html.perf-lite .hero-scroll-wrapper.hst-active .hero-glow-warm {
  transform: none;
}
html.perf-lite .hero-scroll-wrapper.hst-active .hero-scroll-cover {
  transform: none;
}

/* Tablet: keep the concept, reduce travel distance and visual intensity
   so nothing feels heavy on touch/mid-size viewports. */
@media (max-width: 980px) {
  .hero-scroll-wrapper.hst-active .hero {
    transform: scale(calc(1 + (0.025 * var(--hst-progress, 0))));
    opacity: calc(1 - (0.035 * var(--hst-progress, 0)));
    filter: brightness(calc(1 - (0.02 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-field {
    transform: scale(calc(1 + (0.04 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-inner {
    transform: scale(calc(1 + (0.01 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-grid-lines {
    transform: scale(calc(1 + (0.03 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-glow {
    transform: translateX(-50%) scale(calc(1 + (0.05 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-glow-warm {
    transform: scale(calc(1 + (0.045 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-arc {
    transform: translateX(-50%) scale(calc(1 + (0.035 * var(--hst-progress, 0))));
  }
  .hero-scroll-wrapper.hst-active .hero-scroll-cover {
    border-radius: 20px 20px 0 0;
    transform: translateY(calc((1 - var(--hst-progress, 0)) * 14vh));
  }
}

/* Mobile: usability over effect. JS also shortens the scroll distance
   and skips the sticky pin entirely below 640px (see main.js) — these
   rules are a safety net if that width threshold ever changes. */
@media (max-width: 640px) {
  .hero-scroll-wrapper.hst-active .hero {
    transform: none;
    opacity: 1;
    filter: none;
  }
  .hero-scroll-wrapper.hst-active .hero-field,
  .hero-scroll-wrapper.hst-active .hero-inner,
  .hero-scroll-wrapper.hst-active .hero-grid-lines,
  .hero-scroll-wrapper.hst-active .hero-arc {
    transform: none;
  }
  .hero-scroll-wrapper.hst-active .hero-glow {
    transform: translateX(-50%);
  }
  .hero-scroll-wrapper.hst-active .hero-glow-warm {
    transform: none;
  }
  .hero-scroll-wrapper.hst-active .hero-scroll-cover {
    border-radius: 16px 16px 0 0;
    transform: translateY(calc((1 - var(--hst-progress, 0)) * 4vh));
  }
}

/* ---- Trust strip ---- */
.trust-strip {
  padding: 40px 0 96px;
}
.trust-label {
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 28px;
}
.trust-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: center;
}
.trust-marks span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  opacity: 0.32;
  transition: opacity var(--transition);
}
.trust-marks span:hover { opacity: 0.6; }

/* ============================================================
   SERVICES PREVIEW — compact 3x2 capability cards
   ============================================================ */
.services-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at 88% 8%, rgba(109, 61, 245, 0.09), transparent 45%);
  transition: opacity var(--transition);
  pointer-events: none;
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-light);
}
.service-card:hover::before,
.service-card:focus-visible::before {
  opacity: 1;
}
.service-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-card-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
  transition: transform var(--transition), color var(--transition), opacity var(--transition);
}
.service-card:hover .service-card-num {
  color: var(--primary);
  transform: translateY(-2px);
}

.service-card-body {
  margin-top: 14px;
}
.service-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 700;
  transition: transform var(--transition);
}
.service-card:hover .service-card-title {
  transform: translateX(4px);
}
.service-card-desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 32ch;
  line-height: 1.5;
}
.service-card-capabilities {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary-dark);
}

.service-card-visual {
  margin-top: 16px;
  height: 56px;
  display: flex;
  align-items: flex-end;
}

/* Photo slot for each service card (Phase 10 media scaffolding).
   Sits above the existing mini SVG visual; stays invisible/collapsed
   in its empty state so cards render exactly as before until a real
   photo is dropped in. */
.service-card-media {
  margin-top: 16px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}
.service-card-media.media-slot--empty {
  height: 0;
  min-height: 0;
  margin-top: 0;
  aspect-ratio: auto;
  overflow: hidden;
}
.service-card-media.media-slot--empty::after { display: none; }

.service-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform var(--transition), color var(--transition);
}
.service-card:hover .service-card-arrow {
  transform: translate(6px, -6px);
  color: var(--primary);
}
.service-card-arrow svg { width: 100%; height: 100%; }

/* ---- Card 01: mini browser visual ---- */
.sc-browser {
  width: 100%;
  max-width: 220px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--transition);
}
.service-card:hover .sc-browser { transform: translateX(4px); }
.sc-browser-bar {
  display: flex;
  gap: 4px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
}
.sc-browser-bar span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border);
}
.sc-browser-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sc-line { height: 5px; border-radius: 3px; background: var(--border); }
.sc-block { height: 20px; width: 46%; border-radius: 5px; background: var(--primary-light); margin-top: 2px; }

/* ---- Card 02: mini phone visual ---- */
.sc-phone {
  width: 74px;
  padding: 10px 9px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--transition);
}
.service-card:hover .sc-phone { transform: translateX(4px); }
.sc-phone-notch { width: 22px; height: 4px; border-radius: 3px; background: var(--border); margin: 0 auto 2px; }
.sc-phone-row { height: 6px; border-radius: 3px; background: var(--border); }
.sc-phone-row.short { width: 60%; }
.sc-phone-pill { margin-top: 4px; height: 14px; border-radius: 7px; background: var(--primary); opacity: 0.85; }

/* ---- Card 03: mini analytics visual ---- */
.sc-analytics {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 64px;
  color: var(--primary);
  transition: transform var(--transition);
}
.service-card:hover .sc-analytics { transform: translateX(4px); }
.sc-graph { width: 100%; height: 100%; }
.sc-audience-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.5;
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.sc-audience-dot-lg {
  width: 10px; height: 10px;
  opacity: 0.9;
}
.service-card:hover .sc-audience-dot { opacity: 0.85; }

/* ---- Card 04: mini growth composition ---- */
.sc-growth {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 68px;
  color: var(--primary);
  transition: transform var(--transition);
}
.service-card:hover .sc-growth { transform: translateX(4px); }
.sc-growth-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.55;
  transform: translate(-50%, -50%);
}
.sc-dot-lg { width: 9px; height: 9px; opacity: 1; }
.sc-brand-dot-static {
  position: absolute;
  left: 4px; top: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.9;
}

/* ---- Card: brand strategy visual (concentric rings) ---- */
.sc-brand {
  position: relative;
  width: 60px;
  height: 56px;
  transition: transform var(--transition);
}
.service-card:hover .sc-brand { transform: translateX(4px); }
.sc-brand-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  transform: translate(-50%, -50%);
}
.sc-brand-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border);
  transform: translate(-50%, -50%);
}
.sc-brand-ring-sm {
  width: 34px; height: 34px;
  border-color: var(--primary-light);
}

/* ---- Card: development visual (mini code block) ---- */
.sc-code {
  position: relative;
  width: 100%;
  max-width: 200px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--transition);
}
.service-card:hover .sc-code { transform: translateX(4px); }
.sc-code-tag {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
}
.sc-code-line { height: 5px; border-radius: 3px; background: var(--border); }
.sc-code-line-accent { background: var(--primary-light); }

@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; padding: 22px; }
}

/* ============================================================
   WHAT WE CREATE — editorial visual showcase
   Asymmetric composition (one large featured panel + three smaller
   panels) instead of a repeat of the services grid. Purely original
   SVG/CSS compositions per category — no stock imagery, no claims.
   ============================================================ */
.create-section { padding: 8px 0 0; }
.create-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.create-panel {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.create-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.create-panel-featured {
  grid-row: span 2;
  min-height: 552px;
  background: linear-gradient(165deg, #F5EEFF 0%, #FDFBFF 45%, #FCEEF7 100%);
}
.create-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.create-panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 6px;
}
.create-panel-featured .create-panel-title { font-size: 1.7rem; }
.create-panel-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 34ch;
}
.create-panel-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.create-panel-body { position: relative; z-index: 1; }

/* Featured panel: layered brand/social composition */
.create-visual-brand {
  position: absolute;
  top: 32px; left: 32px; right: 32px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.create-social-card {
  width: 128px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 10px;
  transform: rotate(var(--r, 0deg));
}
.create-social-card:nth-child(2) { margin-top: 34px; }
.create-social-card:nth-child(3) { margin-top: 10px; }
.create-social-thumb { height: 92px; border-radius: 9px; background: var(--primary-light); margin-bottom: 8px; }
.create-social-line { height: 5px; border-radius: 3px; background: var(--border); margin-bottom: 5px; }
.create-social-line.short { width: 60%; }

/* Web sub-panel visual */
.create-visual-web { position: absolute; bottom: 22px; right: 22px; width: 140px; opacity: 0.9; }

/* App sub-panel visual */
.create-visual-app { position: absolute; bottom: 22px; right: 26px; width: 58px; opacity: 0.9; }

/* Content sub-panel visual */
.create-visual-content { position: absolute; bottom: 22px; right: 22px; width: 90px; opacity: 0.9; }

/* Full-width Content panel beneath the Web/App pair — horizontal
   layout instead of the bottom-anchored visual used by the other
   panels, since it spans the full grid width. */
.create-panel-wide {
  margin-top: 24px;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  min-height: 0;
  padding: 26px 28px;
}
.create-panel-wide .create-panel-visual {
  position: relative;
  inset: auto;
  width: 110px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .create-panel-wide { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 980px) {
  .create-grid { grid-template-columns: 1fr; }
  .create-panel-featured { grid-row: auto; min-height: 380px; }
}
@media (max-width: 640px) {
  .create-panel { min-height: 220px; padding: 22px; }
  .create-panel-featured { min-height: 320px; }
  .create-social-card { width: 108px; }
}

/* ============================================================
   GROWTH SYSTEM — how the services connect
   ============================================================ */
.growth-system-section { padding: 8px 0 0; }
.growth-system-grid {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 48px;
  flex-wrap: nowrap;
}
.growth-stage {
  flex: 1;
  min-width: 0;
  padding: 24px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.growth-stage:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.growth-stage-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.growth-stage-icon svg { width: 19px; height: 19px; }
.growth-stage-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 6px;
}
.growth-stage-desc {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}
.growth-stage-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
  padding: 0 2px;
}
.growth-system-note {
  margin: 28px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 900px) {
  .growth-system-grid { flex-direction: column; align-items: stretch; gap: 0; }
  .growth-stage { text-align: left; padding: 18px 4px; }
  .growth-stage-icon { margin: 0 0 10px; }
  .growth-stage-arrow { transform: rotate(90deg); padding: 4px 0; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .growth-stage { transition: none !important; }
}

/* ============================================================
   WHY SCALE TO SKY — compact editorial comparison section
   ============================================================ */
.diff-section { position: relative; overflow: hidden; padding: 40px 0 96px; }
@media (max-width: 900px) {
  .diff-section { padding: 32px 0 72px; }
}
@media (max-width: 640px) {
  .diff-section { padding: 24px 0 56px; }
}

.diff-head { text-align: center; }
.diff-heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin: 0;
}
.diff-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.diff-sub-vs {
  color: var(--primary);
  font-weight: 700;
  text-transform: lowercase;
  margin: 0 2px;
}

.diff-panel-wrap {
  position: relative;
  margin: 20px auto 0;
  max-width: 1140px;
  border-radius: 26px;
  animation: diff-halo-breathe 9s ease-in-out infinite;
}

@keyframes diff-halo-breathe {
  0%   { box-shadow: 0 0 70px rgba(109, 61, 245, 0.14); }
  50%  { box-shadow: 0 0 110px rgba(109, 61, 245, 0.22); }
  100% { box-shadow: 0 0 70px rgba(109, 61, 245, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .diff-panel-wrap { animation: none; box-shadow: 0 0 90px rgba(109, 61, 245, 0.16); }
}

.diff-panel {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 10px 32px rgba(70, 45, 120, 0.06);
  overflow: hidden;
}

/* Continuous glowing light behind the Scale To Sky (right) column —
   a soft orb that drifts and breathes, always in motion. */
.diff-panel::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8%;
  width: 420px;
  height: 420px;
  margin-top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 61, 245, 0.22), rgba(109, 61, 245, 0.08) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
  animation: diff-glow-drift 9s ease-in-out infinite;
}

@keyframes diff-glow-drift {
  0%   { transform: translate(0, 0) scale(1);       opacity: 0.75; }
  50%  { transform: translate(-24px, 18px) scale(1.12); opacity: 1; }
  100% { transform: translate(0, 0) scale(1);       opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .diff-panel::after { animation: none; }
}

/* Extremely subtle decorative glow — depth only, never decoration.
   right:-140px deliberately lets most of it hang off the panel edge
   for a soft-corner look; .diff-panel's overflow:hidden clips it.
   min(380px, 60vw) keeps the box itself from ever outgrowing the
   panel on narrow widths, as extra insurance beyond that clipping. */
.diff-panel-glow {
  position: absolute;
  top: -120px;
  right: -140px;
  width: min(380px, 60vw);
  height: min(380px, 60vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 61, 245, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.diff-panel-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
}
.diff-col-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diff-col-label-others { color: var(--muted); text-align: center; }
.diff-col-label-sts {
  color: var(--text);
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.diff-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.diff-vs {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.diff-rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.diff-row {
  position: relative;
  padding: 16px 32px;
  border-bottom: 1px solid rgba(233, 229, 242, 0.7);
  min-height: 72px;
  display: flex;
  align-items: center;
  transition: background 400ms cubic-bezier(.2,.8,.2,1);
}
.diff-rows .diff-row:last-child { border-bottom: none; }
.diff-row:hover { background: var(--surface); }

.diff-row-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  margin-right: 4px;
  transition: color 400ms cubic-bezier(.2,.8,.2,1), border-color 400ms cubic-bezier(.2,.8,.2,1);
}
.diff-row:hover .diff-row-num { color: var(--primary); border-color: var(--primary-light); }

.diff-row-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  align-items: center;
  gap: 12px;
}

.diff-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.35;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), color 400ms cubic-bezier(.2,.8,.2,1);
}

.diff-title-others {
  color: var(--muted);
  font-weight: 500;
}

.diff-title-sts {
  position: relative;
  color: var(--text);
  font-weight: 700;
  padding-left: 16px;
  border-left: 2px solid var(--primary-light);
  transition: border-color 400ms cubic-bezier(.2,.8,.2,1), transform 400ms cubic-bezier(.2,.8,.2,1);
}
.diff-row:hover .diff-title-sts {
  border-color: var(--primary);
  transform: translateX(2px);
}

.diff-mark {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.diff-mark-check {
  color: var(--primary);
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}
.diff-row:hover .diff-mark-check { transform: translate(3px, -1px); }

.diff-arrow {
  justify-self: center;
  color: var(--primary-light);
  font-size: 1rem;
  line-height: 1;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), color 400ms cubic-bezier(.2,.8,.2,1);
}
.diff-row:hover .diff-arrow {
  color: var(--primary);
  transform: translateX(5px);
}

@media (max-width: 860px) {
  .diff-panel-head { padding: 16px 22px; }
  .diff-row { padding: 14px 22px; }
}

/* ---- Mobile: two stacked blocks (all Others, then all Scale To Sky) ---- */
.diff-rows-mobile { display: none; }

@media (max-width: 640px) {
  /* Hide the desktop row-by-row comparison and its top label bar */
  .diff-panel-head,
  .diff-rows-desktop { display: none; }

  .diff-rows-mobile {
    display: block;
    position: relative;
    z-index: 1;
  }

  .diff-block { padding: 22px 20px; }
  .diff-block-others { border-bottom: 1px solid var(--border); }

  .diff-block-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
  }
  .diff-block-label-others {
    color: var(--muted);
    background: var(--surface);
  }
  .diff-block-label-sts {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  }
  .diff-block-label-sts .diff-dot { background: #fff; }

  .diff-block-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .diff-block-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--muted);
    font-weight: 500;
  }
  .diff-block-item-sts {
    color: var(--text);
    font-weight: 700;
  }

  .diff-block-icon {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-top: 1px;
  }
  .diff-block-icon-minus {
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .diff-block-icon-check {
    color: var(--primary);
    background: var(--primary-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  .diff-row, .diff-row-num, .diff-title, .diff-title-sts, .diff-mark-check, .diff-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   PORTFOLIO PREVIEW / GRID CARDS
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.work-card { display: block; }
.work-thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
}
.work-thumb img,
.work-thumb video.project-media {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.work-card:hover .work-thumb img,
.work-card:hover .work-thumb video.project-media { transform: scale(1.03); }

/* ---- Editorial Featured Work layout (Phase 8): first project as a
   large horizontal showcase, remaining projects as two supporting
   cards beside/below it, instead of a uniform 3-up grid. ---- */
.work-grid-editorial {
  display: block;
}
.work-grid-editorial .work-card-primary {
  display: block;
  margin-bottom: 28px;
}
.work-grid-editorial .work-card-primary .work-thumb {
  aspect-ratio: 16/9;
}
.work-grid-editorial .work-card-primary .work-name {
  font-size: 1.5rem;
}
.work-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.work-client {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 4px;
}
.work-view-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-dark);
}
.work-arrow-inline {
  width: 14px; height: 14px;
  transition: transform var(--transition);
}
.work-card:hover .work-arrow-inline { transform: translate(3px, -3px); }

@media (max-width: 980px) {
  .work-grid-editorial .work-card-primary .work-thumb { aspect-ratio: 4/3; }
  .work-secondary-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .work-thumb img, .work-thumb video.project-media,
  .portfolio-thumb img, .portfolio-thumb video.project-media,
  .work-arrow-inline, .portfolio-view-details svg {
    transition: none !important;
    transform: none !important;
  }
}
.work-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(23,21,31,0.35));
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.work-card:hover .work-thumb::after { opacity: 1; }

.work-meta { margin-top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.work-category { font-size: 0.8125rem; color: var(--primary-dark); font-weight: 600; margin-bottom: 6px; }
.work-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.work-desc { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.work-arrow {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform var(--transition);
}
.work-card:hover .work-arrow { transform: translate(4px, -4px); }

@media (max-width: 980px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIAL — single spotlight
   ============================================================ */
.testimonial-spotlight {
  max-width: 780px;
  margin: 64px auto 0;
  text-align: center;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.testimonial-person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.avatar-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.testimonial-person .name { font-weight: 600; font-size: 0.95rem; }
.testimonial-person .role { color: var(--muted); font-size: 0.875rem; }

.testimonial-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.testimonial-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition), transform var(--transition);
}
.testimonial-dot.is-active { background: var(--primary); transform: scale(1.3); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 96px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 32px;
}
.final-cta::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
  top: -160px; right: -100px;
  pointer-events: none;
}
.final-cta h2 { color: var(--white); max-width: 640px; margin: 0 auto; }
.final-cta p { color: rgba(255,255,255,0.75); margin: 20px auto 36px; max-width: 480px; }
.final-cta .btn-primary { background: var(--white); color: var(--primary-dark); box-shadow: none; }
.final-cta .btn-primary:hover { background: var(--surface); }

@media (max-width: 640px) {
  .final-cta { margin: 0 20px; padding: 64px 28px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { padding: 96px 0 40px; border-top: 1px solid var(--border); margin-top: 60px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 64px;
}
.footer-brand p { color: var(--muted); font-size: 0.9375rem; margin-top: 16px; max-width: 280px; }
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.9375rem; color: var(--text); transition: color var(--transition); }
.footer-col a:hover { color: var(--primary); }
.footer-social { display: flex; gap: 14px; margin-top: 4px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), color var(--transition);
}
.footer-social a:hover { border-color: var(--primary); color: var(--primary); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero {
  padding: calc(var(--header-h) + 90px) 0 80px;
}
.page-hero h1 { max-width: 780px; }
.page-hero p.lead { margin-top: 22px; }

/* ============================================================
   PORTFOLIO HERO — content-driven, editorial variant of the
   page-hero pattern (spec: Portfolio Hero dimension/layout pass).
   Reuses .kicker / .hero-heading / .lead / .btn from the existing
   design system; only new layout + spacing rules for this specific
   section live here. The filter bar has been moved out of the Hero
   into the All Projects section (see #portfolio-filter-bar there) —
   it is no longer part of this component.
   ============================================================ */
.portfolio-hero {
  padding: calc(var(--header-h) + 120px) 0 96px;
  text-align: center;
}
.portfolio-hero-inner {
  max-width: 900px;
}
.portfolio-hero .kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.portfolio-hero-heading {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 820px;
  margin: 0 auto;
}
.portfolio-hero-description {
  margin: 24px auto 0;
  max-width: 650px;
  font-size: 1.125rem;
  line-height: 1.6;
}
.portfolio-hero-supporting {
  margin: 18px auto 0;
  max-width: 700px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
}
.portfolio-hero-cta {
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .portfolio-hero {
    padding: calc(var(--header-h) + 96px) 0 80px;
  }
  .portfolio-hero-inner { max-width: 760px; }
}

@media (max-width: 640px) {
  .portfolio-hero {
    padding: calc(var(--header-h) + 72px) 0 64px;
  }
  .portfolio-hero-heading {
    font-size: clamp(2.375rem, 8vw, 2.5rem);
    letter-spacing: -0.025em;
    line-height: 1.05;
  }
  .portfolio-hero-description {
    font-size: 1rem;
    max-width: 100%;
  }
  .portfolio-hero-supporting {
    font-size: 0.8125rem;
  }
  .portfolio-hero-cta {
    margin-top: 24px;
  }
}

/* ============================================================
   SERVICES HERO — premium, compact, editorial variant of the
   page-hero pattern. Reuses .hero-field / .hero-grid-lines / .kicker /
   .hero-heading / .accent / .lead / .btn / .hero-anim / .hero-scroll
   from the existing design system; only new layout + decorative
   rules for this variant live here.
   ============================================================ */
.services-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 64px) 0 56px;
  overflow: hidden;
  background: var(--white);
}

.services-hero-inner {
  position: relative;
  z-index: 1;
}

.services-hero-heading {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  max-width: 640px;
}

.services-hero-lead {
  margin-top: 20px;
  max-width: 650px;
}

.services-hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.services-hero .hero-scroll {
  margin: 44px 0 0;
}

/* ---- decorative field: soft glow + faint ring, right of the heading ---- */
.services-hero-glow {
  position: absolute;
  width: min(520px, 90vw);
  height: min(520px, 90vw);
  top: -18%;
  right: -6%;
  background: radial-gradient(circle, rgba(109,61,245,0.13), transparent 70%);
  filter: blur(18px);
  animation: services-hero-float 11s ease-in-out infinite;
}

.services-hero-ring {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 14%;
  right: 8%;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.6;
  animation: services-hero-float 13s ease-in-out infinite reverse;
}
.services-hero-ring::after {
  content: '';
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  border: 1px solid var(--primary-light);
  pointer-events: none;
}

@keyframes services-hero-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .services-hero-glow,
  .services-hero-ring { animation: none; }
}

@media (max-width: 900px) {
  .services-hero { min-height: unset; padding: calc(var(--header-h) + 40px) 0 44px; }
  .services-hero-glow { width: 360px; height: 360px; opacity: 0.7; }
  .services-hero-ring { width: 180px; height: 180px; top: 8%; right: 2%; }
}

@media (max-width: 640px) {
  .services-hero-heading { max-width: none; }
  .services-hero-lead { max-width: none; }
  .services-hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .services-hero-actions .btn { width: 100%; justify-content: center; }
  .services-hero-actions .btn-ghost { width: auto; justify-content: flex-start; }
  .services-hero-ring { display: none; }
}

/* ============================================================
   ABOUT HERO (company intro — founder story lives further down
   the page / will move to a dedicated Founder/Team section)
   ============================================================ */
.about-hero {
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: 64px;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 52px;
  align-items: center;
}

.about-hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.about-hero-heading {
  margin-top: 4px;
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
  line-height: 1.05;
  max-width: 620px;
}

.about-hero-story {
  margin-top: 20px;
  max-width: 58ch;
}
.about-hero-story .body-text {
  font-size: 1.03125rem;
  line-height: 1.65;
}
.about-hero-story .body-text + .body-text {
  margin-top: 13px;
}

.about-hero-image {
  position: relative;
  padding: 14px;
  max-width: 460px;
}
.about-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  transform: translate(-14px, 14px);
  z-index: 0;
  pointer-events: none;
}
.about-hero-image .about-hero-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 460 / 500;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  display: block;
}

@media (max-width: 900px) {
  .about-hero {
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 40px;
  }
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-hero-image {
    max-width: 380px;
    margin: 0 auto;
    padding: 10px;
  }
  .about-hero-image::before {
    transform: translate(-10px, 10px);
  }
  .about-hero-image .about-hero-visual {
    max-height: 400px;
  }
  .about-hero-heading,
  .about-hero-story {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .about-hero {
    padding-bottom: 32px;
  }
  .about-hero-image {
    max-width: 320px;
  }
  .about-hero-image .about-hero-visual {
    max-height: 340px;
  }
  .about-hero-story {
    margin-top: 16px;
  }
  .about-hero-story .body-text {
    font-size: 1rem;
  }
  .about-hero-story .body-text + .body-text {
    margin-top: 14px;
  }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.story-split {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 80px;
}
.story-split .kicker-block h2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
}
.story-split .body-text { max-width: 620px; }
.story-split .body-text + .body-text { margin-top: 14px; }

.story-traction {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.story-traction-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.story-traction-num-sm {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  color: var(--text);
}
.story-traction-label {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 6px;
}
.story-traction-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

.story-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 24px;
  list-style: none;
}
.story-industries li {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
}

@media (max-width: 900px) {
  .story-split { grid-template-columns: 1fr; gap: 32px; }
  .story-traction { margin-top: 28px; padding-top: 24px; }
}

@media (max-width: 500px) {
  .story-traction { gap: 20px; }
  .story-traction-num { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .story-traction-num-sm { font-size: clamp(1.5rem, 6vw, 1.9rem); }
}

.mission-split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: start;
}
.mission-header .kicker { margin-bottom: 18px; }
.mission-heading {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  max-width: 480px;
}
.mission-content .body-text {
  max-width: 600px;
}
.mission-content .body-text + .body-text {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .mission-split { grid-template-columns: 1fr; gap: 24px; }
}

.founder-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: center;
  gap: 56px;
}
.founder-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 380px;
}
.founder-copy {
  max-width: 620px;
}
.founder-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 14px;
}
.founder-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.founder-name-lg {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 6px;
}
.founder-tagline {
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.founder-bio {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 54ch;
  margin-bottom: 24px;
}
.founder-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.founder-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}
.founder-highlight-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-light);
  position: relative;
}
.founder-highlight-dot::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
}

@media (max-width: 900px) {
  .founder-split {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 32px;
    text-align: center;
  }
  .founder-copy { max-width: 480px; }
  .founder-bio { margin-left: auto; margin-right: auto; }
  .founder-highlights { grid-template-columns: 1fr; text-align: left; }
}
.founder-label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.founder-card {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--white) 0%, var(--surface) 55%, var(--primary-light) 100%);
  box-shadow: var(--shadow-soft);
}
.founder-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.founder-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--transition);
}
.founder-card:hover .founder-card-img { transform: scale(1.015); }

.founder-info-strip {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--radius-sm);
  background: rgba(15, 15, 20, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition), border-color var(--transition);
}
.founder-card:hover .founder-info-strip {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
}
.founder-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.founder-name {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}
.founder-role {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder-instagram {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, background var(--transition), border-color var(--transition), filter 200ms ease;
}
.founder-instagram:hover,
.founder-instagram:focus-visible {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.08);
}
.founder-instagram:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .founder-block { max-width: 300px; }
  .founder-card { padding: 14px; }
  .founder-info-strip {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 8px 8px 8px 14px;
  }
  .founder-name { font-size: 0.875rem; }
  .founder-role { font-size: 0.7rem; }
  .founder-instagram { width: 34px; height: 34px; }
  .founder-instagram svg { width: 15px; height: 15px; }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  align-items: end;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--primary);
}
.stat-label { color: var(--muted); font-size: 0.9375rem; margin-top: 8px; }

@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.team-card { text-align: left; }
.team-photo {
  aspect-ratio: 3/3.5;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}
/* Controlled image container: the uploaded photo is cropped to fill the
   existing fixed aspect ratio via object-fit, so portrait/landscape/square
   uploads never change the card's height or get stretched/distorted. */
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card:hover .team-photo img {
  transform: scale(1.04);
}
.team-initials {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.5;
}
.team-name { font-weight: 700; font-size: 1.02rem; }
.team-role { color: var(--muted); font-size: 0.875rem; margin-top: 2px; }

/* Social strip — subtle, premium, only rendered when at least one social
   link is configured for that member (see js/team-public.js). */
.team-socials {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.team-card:hover .team-socials { opacity: 1; }
.team-social-link {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.team-social-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
}
.team-social-link svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ABOUT PAGE — hero actions
   ============================================================ */
.about-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

@media (max-width: 640px) {
  .about-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .about-hero-actions .btn { justify-content: center; }
}

/* ============================================================
   ABOUT PAGE — What We Believe
   ============================================================ */
.believe-head { text-align: center; margin: 0 auto 56px; max-width: 640px; }
.believe-head .section-heading { margin: 10px auto 0; }
.believe-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.believe-item { padding: 4px; }
.believe-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 16px;
}
.believe-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}
.believe-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {
  .believe-list { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 560px) {
  .believe-list { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   ABOUT PAGE — How We Think
   ============================================================ */
.think-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: start;
}
.think-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  max-width: 480px;
}
.think-lead {
  margin-top: 20px;
  max-width: 46ch;
}
.think-steps {
  list-style: none;
  border-top: 1px solid var(--border);
}
.think-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border);
}
.think-step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary);
  flex-shrink: 0;
  width: 28px;
}
.think-step-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

@media (max-width: 900px) {
  .think-grid { grid-template-columns: 1fr; gap: 32px; }
  .think-head h2 { max-width: none; }
}

/* ============================================================
   ABOUT PAGE — What We Bring To The Table
   ============================================================ */
.bring-head { text-align: center; margin: 0 auto 56px; max-width: 620px; }
.bring-head .section-heading { margin: 10px auto 0; }
.bring-lead { margin: 16px auto 0; max-width: 50ch; }
.bring-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.bring-pillar {
  padding: 32px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.bring-pillar:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}
.bring-pillar-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 16px;
}
.bring-pillar-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}
.bring-pillar-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {
  .bring-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .bring-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT PAGE — Who We Work With (situation-based rows)
   ============================================================ */
.work-with-list {
  max-width: 920px;
  border-top: 1px solid var(--border);
}
.work-with-row {
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  gap: 32px;
  align-items: baseline;
  padding: 28px 4px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.work-with-row:hover { background: var(--surface); }
.work-with-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--text);
}
.work-with-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 768px) {
  .work-with-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   ABOUT PAGE — What Makes Working With Us Different
   ============================================================ */
.connected-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
.connected-item {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.connected-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 14px;
}
.connected-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

@media (max-width: 900px) {
  .connected-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .connected-list { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT PAGE — Connect (post-CTA social strip)
   ============================================================ */
.about-connect-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 780px;
}
.about-connect-section .social-heading { margin-top: 8px; }
.about-connect-section .social-copy { margin-top: 6px; }

@media (max-width: 640px) {
  .about-connect-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SERVICES PAGE — alternating detail sections
   ============================================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.service-detail:last-child { border-bottom: 1px solid var(--border); }
.service-detail.reverse .service-detail-visual { order: 2; }
.service-detail.reverse .service-detail-copy { order: 1; }

.service-detail-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 14px;
}
.service-detail-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
.service-detail-copy .body-text { margin-bottom: 28px; }

.deliverables-list { display: flex; flex-direction: column; gap: 12px; }
.deliverables-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
}
.deliverables-list svg { flex-shrink: 0; color: var(--primary); }

.service-detail-visual {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 5/4;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-detail-visual .big-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 11vw, 6rem);
  color: var(--primary);
  opacity: 0.12;
}

@media (max-width: 900px) {
  .service-detail, .service-detail.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service-detail.reverse .service-detail-visual,
  .service-detail.reverse .service-detail-copy { order: unset; }
}

/* ============================================================
   PORTFOLIO PAGE — filters + grid
   ============================================================ */
#portfolio-allprojects-heading-wrap {
  text-align: center;
}
#portfolio-allprojects-heading-wrap .section-heading,
#portfolio-allprojects-heading-wrap .lead {
  margin-left: auto;
  margin-right: auto;
}
.filter-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 48px;
}
.filter-btn {
  padding: 11px 22px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
}
.filter-btn:active { transform: translateY(0); }
.filter-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.filter-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(109, 61, 245, 0.24);
}
.filter-btn.is-active:hover { transform: none; }

@media (max-width: 640px) {
  .filter-bar { margin-bottom: 36px; }
  .filter-btn { padding: 9px 18px; font-size: 0.8125rem; }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}
.portfolio-item {
  transition: opacity 400ms ease, transform 400ms ease;
}
.portfolio-item.is-hidden {
  display: none;
}
.portfolio-thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
}
.portfolio-thumb img,
.portfolio-thumb video.project-media {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.portfolio-item:hover .portfolio-thumb img,
.portfolio-item:hover .portfolio-thumb video.project-media { transform: scale(1.03); }
.portfolio-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(109,61,245,0.05), rgba(23,21,31,0.4));
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.portfolio-item:hover .portfolio-thumb::after { opacity: 1; }

.portfolio-info { margin-top: 20px; }
.portfolio-cat { font-size: 0.8125rem; color: var(--primary-dark); font-weight: 600; }
.portfolio-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 8px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.portfolio-title svg { transition: transform var(--transition); flex-shrink: 0; }
.portfolio-item:hover .portfolio-title svg { transform: translate(4px,-4px); }
.portfolio-desc { color: var(--muted); font-size: 0.9375rem; }
.portfolio-client { color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }
.portfolio-view-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-dark);
}
.portfolio-view-details svg { width: 14px; height: 14px; transition: transform var(--transition); }
.portfolio-item:hover .portfolio-view-details svg { transform: translate(3px, -3px); }
.portfolio-result {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 5px 12px;
  border-radius: 100px;
}

@media (max-width: 980px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
}
.contact-info-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.contact-info-item:first-child { padding-top: 0; }
.contact-info-item h5 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.contact-info-item a, .contact-info-item p { font-size: 1.05rem; font-weight: 500; }
.contact-info-item a:hover { color: var(--primary); }

.contact-social { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.contact-social a { display: inline-flex; transition: transform 0.2s ease; }
.contact-social a:hover { transform: translateY(-2px); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}
.field textarea { resize: vertical; min-height: 130px; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: #E0524A;
}
.field-error {
  font-size: 0.8125rem;
  color: #E0524A;
  display: none;
}
.field.has-error .field-error { display: block; }

.form-submit { margin-top: 8px; }

.form-success {
  display: none;
  text-align: center;
  padding: 60px 20px;
}
.form-success.is-visible { display: block; }
.form-success-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.form-success h3 { font-size: 1.4rem; margin-bottom: 10px; }
.form-success p { color: var(--muted); }
.contact-form.is-submitted { display: none; }

/* ---- Submit state (Phase 4: live API submission) ---- */
.btn-primary:disabled,
.btn-primary.is-loading {
  opacity: 0.85;
  cursor: not-allowed;
  transform: none !important;
}

.submit-btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  animation: submit-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.btn-primary.is-loading .submit-btn-spinner { display: inline-block; }
.btn-primary.is-loading .btn-icon { display: none; }

@keyframes submit-spin {
  to { transform: rotate(360deg); }
}

.form-submit-error {
  display: none;
  margin-top: 14px;
  font-size: 0.875rem;
  color: #E0524A;
  background: rgba(224, 82, 74, 0.08);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}

.form-submit-error.is-visible { display: block; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  /* 16px floor prevents iOS Safari from auto-zooming the page when
     a field is focused — anything smaller triggers that zoom. */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--stagger-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Section heading wrapper spacing ---- */
.section-head { margin-bottom: 8px; }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

/* ============================================================
   FAQ + SOCIAL MEDIA — Home page final content section
   ============================================================ */
.faq-social-section {
  padding: 72px 0 56px;
}

.faq-social-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  /* minmax(0, ...) on the fr tracks lets this grid actually shrink to
     fit its container — plain `fr` values are floored by their content's
     min-content width, which let the grid (and everything in it) render
     wider than the page at some viewports, inflating horizontal scroll
     even though nothing looked visually "cut off". */
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.75fr);
  gap: 56px;
  align-items: start;
}

.faq-social-divider {
  align-self: start;
  width: 1px;
  height: 100%;
  min-height: 340px;
  background: linear-gradient(to bottom, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

/* ---- FAQ column ---- */
.faq-col .kicker { margin-bottom: 14px; }

.faq-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 36px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-question {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr 24px;
  align-items: center;
  gap: 18px;
  padding: 24px 12px;
  text-align: left;
  background: transparent;
  transition: background var(--transition), padding-left var(--transition);
}

.faq-item:hover .faq-question,
.faq-question:focus-visible {
  background: var(--surface);
}

.faq-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  transition: color var(--transition);
}

.faq-question-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.4;
  transition: transform var(--transition), color var(--transition);
}

.faq-item:hover .faq-question-text {
  transform: translateX(2px);
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  justify-self: end;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--muted);
  transition: background var(--transition), transform var(--transition);
}
.faq-icon::before {
  left: 0; top: 50%;
  width: 100%; height: 1.5px;
  transform: translateY(-50%);
}
.faq-icon::after {
  left: 50%; top: 0;
  width: 1.5px; height: 100%;
  transform: translateX(-50%);
}

.faq-item:hover .faq-icon::before,
.faq-item:hover .faq-icon::after {
  background: var(--primary);
}

.faq-item.is-open .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.faq-item.is-open .faq-icon::before {
  background: var(--primary);
}
.faq-item.is-open .faq-num {
  color: var(--primary);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(.2,.8,.2,1);
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer-inner {
  overflow: hidden;
}
.faq-answer-inner p {
  padding: 0 12px 24px 52px;
  max-width: 56ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 320ms ease 80ms, transform 320ms ease 80ms;
}
.faq-item.is-open .faq-answer-inner p {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-answer-inner p, .faq-question, .faq-question-text, .faq-icon::before, .faq-icon::after {
    transition: none !important;
  }
}

/* ---- Social column ---- */
.social-col {
  position: relative;
  padding-top: 4px;
  /* Contains the decorative ::before glow below, which is intentionally
     positioned partly outside this column's box (right: -60px) — without
     clipping here that glow's box extends past the column and inflates
     the page's horizontal scroll extent at some widths, even though the
     glow itself is invisible padding with nothing to see. */
  overflow: hidden;
}
.social-col::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -60px;
  width: min(260px, 60vw);
  height: min(260px, 60vw);
  background: radial-gradient(circle, rgba(109,61,245,0.07), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.social-col .kicker { margin-bottom: 14px; }

.social-heading {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.social-copy {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 32ch;
  margin-bottom: 28px;
}

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.social-btn svg { color: var(--muted); transition: color var(--transition); }
.social-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  box-shadow: 0 8px 20px rgba(109, 61, 245, 0.14);
  animation: social-btn-bounce 0.6s ease infinite;
}
.social-btn:hover svg { color: var(--primary); }

@keyframes social-btn-bounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-10px) scale(1.05, 0.95); }
  45%  { transform: translateY(0) scale(0.95, 1.05); }
  65%  { transform: translateY(-5px) scale(1.02, 0.98); }
  85%  { transform: translateY(0) scale(0.99, 1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* ---- Responsive: FAQ + Social ---- */
@media (max-width: 900px) {
  .faq-social-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .faq-social-divider { display: none; }
  .social-col::before { display: none; }
}

@media (max-width: 560px) {
  .faq-social-section { padding: 56px 0 40px; }
  .faq-heading { margin-bottom: 24px; }
  .faq-question {
    grid-template-columns: 26px 1fr 20px;
    gap: 12px;
    padding: 20px 4px;
  }
  .faq-question-text { font-size: 0.95rem; }
  .faq-answer-inner p { padding-left: 38px; padding-right: 4px; }
  .social-buttons { gap: 8px; }
}
/* ============================================================
   SERVICES PAGE — service detail modal system
   ============================================================ */

/* Small "View details" affordance under each card, in addition to the
   corner arrow, so it's obvious the card is clickable (not just hover-y). */
.service-card-viewmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--transition), gap var(--transition);
}
.service-card-viewmore svg {
  width: 12px;
  height: 12px;
  transition: transform var(--transition);
}
.service-card:hover .service-card-viewmore,
.service-card:focus-visible .service-card-viewmore {
  color: var(--primary-dark);
}
.service-card:hover .service-card-viewmore svg,
.service-card:focus-visible .service-card-viewmore svg {
  transform: translateX(3px);
}

/* Cards on services.html are buttons (not links) since they only ever
   open the modal — reset button chrome to match the existing anchor card. */
button.service-card {
  width: 100%;
  text-align: left;
  font: inherit;
  appearance: none;
}

/* ---- Card: video visual (play button + frame) ---- */
.sc-video {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}
.service-card:hover .sc-video { transform: translateX(4px); }
.sc-video-play {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-video-play svg { width: 11px; height: 11px; color: var(--white); }
.sc-video-bar { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--border); }
.sc-video-bar::after {
  content: '';
  display: block;
  width: 55%; height: 100%;
  border-radius: 2px;
  background: var(--primary-light);
}

/* ---- Card: ads visual (target + reach dots) ---- */
.sc-ads {
  position: relative;
  width: 60px;
  height: 56px;
  transition: transform var(--transition);
}
.service-card:hover .sc-ads { transform: translateX(4px); }
.sc-ads-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid var(--border);
  transform: translate(-50%, -50%);
}
.sc-ads-ring-lg { width: 56px; height: 56px; }
.sc-ads-ring-md { width: 36px; height: 36px; border-color: var(--primary-light); }
.sc-ads-ring-sm { width: 16px; height: 16px; border: none; background: var(--primary); }

/* ---- Card: UGC visual (creator frame) ---- */
.sc-ugc {
  position: relative;
  width: 44px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform var(--transition);
}
.service-card:hover .sc-ugc { transform: translateX(4px); }
.sc-ugc-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); opacity: 0.85; }
.sc-ugc-line { height: 4px; border-radius: 3px; background: var(--border); }
.sc-ugc-line.short { width: 60%; }

/* ---- Reusable service detail modal ---- */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-modal[hidden] { display: none; }

.service-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 35, 0.55);
  opacity: 0;
  will-change: opacity;
  transition: opacity 200ms ease-out;
}
.service-modal.is-open .service-modal-backdrop { opacity: 1; }

.service-modal-panel {
  position: relative;
  width: min(960px, calc(100vw - 40px));
  max-height: 85vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-hover);
  padding: 48px;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  will-change: opacity, transform;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.service-modal.is-open .service-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.service-modal-close:hover {
  color: var(--primary-dark);
  border-color: var(--primary-light);
  transform: rotate(90deg);
}
.service-modal-close svg { width: 15px; height: 15px; }

.service-modal-header { padding-right: 48px; }
.service-modal-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  display: block;
}
.service-modal-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.service-modal-intro {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text);
  line-height: 1.6;
  max-width: 58ch;
}

.service-modal-section { margin-top: 32px; }
.service-modal-section-label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.service-modal-section p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 60ch;
}

.service-modal-included {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.service-modal-included li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--text);
}
.service-modal-included li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--primary);
}

.service-modal-cta-row {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .service-modal-backdrop,
  .service-modal-panel,
  .service-modal-close { transition: none !important; }
}

@media (max-width: 640px) {
  .service-modal { align-items: flex-end; }
  .service-modal-panel {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;
    padding: 28px 22px 32px;
    transform: translateY(100%);
    transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
  }
  .service-modal.is-open .service-modal-panel { transform: translateY(0); }
  .service-modal-header { padding-right: 40px; }
  .service-modal-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .service-modal-intro { margin-top: 16px; font-size: 1rem; line-height: 1.6; }
  .service-modal-section { margin-top: 24px; }
  .service-modal-section p { font-size: 0.9375rem; line-height: 1.6; }
  .service-modal-included { grid-template-columns: 1fr; }
  .service-modal-close { top: 18px; right: 18px; }
  .service-modal-cta-row .btn { width: 100%; justify-content: center; }
}

/* Body scroll lock while a modal is open */
body.modal-open {
  overflow: hidden;
}

/* ============================================================
   PHASE 3 — Dynamic Portfolio (public site)
   ============================================================ */

.portfolio-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
}

.portfolio-status p {
  margin: 0;
  font-size: 1.0625rem;
}

.portfolio-status p:first-child {
  color: var(--text);
  font-weight: 600;
  font-size: 1.25rem;
}

.portfolio-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: portfolio-spin 800ms linear infinite;
}

@keyframes portfolio-spin {
  to { transform: rotate(360deg); }
}

.portfolio-grid[hidden],
.portfolio-status[hidden] {
  display: none;
}

.portfolio-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* ============================================================
   PROJECT CASE STUDY PAGE — premium editorial redesign
   All rules scoped under .case-study-page (or .cs- prefixed classes
   used only on this page) so nothing here can leak into the
   homepage, portfolio, services, about, or contact pages.
   ============================================================ */

.case-study-status { padding-bottom: 120px; }

/* ---- 01. Hero media: large, full content-width image/video ---- */
.case-study-page .cs-hero {
  padding: calc(var(--header-h) + 72px) 0 0;
}
.case-study-page .cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 32px;
  transition: color var(--transition);
}
.case-study-page .cs-back-link:hover { color: var(--primary-dark); }

.case-study-page .cs-hero-media-wrap {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
  max-height: 680px;
}
.case-study-page .cs-hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .case-study-page .cs-hero { padding: calc(var(--header-h) + 48px) 0 0; }
  .case-study-page .cs-back-link { margin-bottom: 24px; }
  .case-study-page .cs-hero-media-wrap { aspect-ratio: 4/3; max-height: none; border-radius: var(--radius-sm); }
}

/* ---- 02. Project information: title, short description, editorial
   metadata row — sits directly below the hero image ---- */
.case-study-page .cs-info-section {
  padding: 48px 0 96px;
  text-align: left;
}
.case-study-page .cs-info-section .kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--primary-dark);
  margin-bottom: 16px;
}
.case-study-page .cs-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);
  max-width: 900px;
}
.case-study-page .cs-hero-desc {
  margin-top: 20px;
  max-width: 700px;
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--muted);
}
.case-study-page .cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.case-study-page .cs-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-study-page .cs-meta-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.case-study-page .cs-meta-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
}
.case-study-page .cs-hero-live-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary-dark);
  transition: gap var(--transition), color var(--transition);
}
.case-study-page .cs-hero-live-link:hover {
  gap: 12px;
  color: var(--primary);
}

@media (max-width: 768px) {
  .case-study-page .cs-info-section { padding: 36px 0 64px; }
  .case-study-page .cs-hero-title { font-size: clamp(2rem, 8vw, 2.625rem); }
  .case-study-page .cs-hero-meta { gap: 24px 32px; margin-top: 28px; padding-top: 24px; }
}

/* ---- Editorial copy sections (Overview / About / Challenge / What We Did / Outcome) ---- */
.case-study-page .cs-copy-block .body-text + .body-text,
.case-study-page .cs-copy-block .body-text + .cs-inline-kicker {
  margin-top: 16px;
}
.case-study-page .cs-copy-block .cs-inline-kicker {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-dark);
  margin-top: 28px;
  margin-bottom: 4px;
}
.case-study-page .cs-copy-block .cs-inline-kicker + .body-text { margin-top: 4px; }

/* Project Overview / About / Challenge / Outcome text column: wide and
   comfortable to read (target 700-850px), not the cramped ~500px
   column from the previous two-column hero layout. The shared
   .story-split grid (0.7fr/1fr, from the About page) gives too
   narrow a copy column at this page's container width, so widen the
   text track specifically here without touching the shared rule. */
.case-study-page .story-split { grid-template-columns: 0.4fr 1fr; }
.case-study-page .cs-copy-block .body-text {
  max-width: 780px;
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* ---- Services tags ---- */
.case-study-page .cs-services-section { padding: 0 0 88px; }
.case-study-page .cs-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.case-study-page .cs-service-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

/* ---- Gallery (adaptive editorial grid: full / half / full / half...) ---- */
.case-study-page .cs-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.case-study-page .cs-gallery-item-full {
  grid-column: 1 / -1;
}
.case-study-page .cs-gallery-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
}
.case-study-page .cs-gallery-item-half .cs-gallery-media {
  aspect-ratio: 4/3;
}
.case-study-page .cs-gallery-img,
.case-study-page .cs-gallery-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-study-page .cs-gallery-caption {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--muted);
}

@media (max-width: 780px) {
  .case-study-page .cs-gallery { grid-template-columns: 1fr; }
  .case-study-page .cs-gallery-item-half .cs-gallery-media { aspect-ratio: 16/9; }
}

/* ---- Results metrics ---- */
.case-study-page .cs-results-grid { grid-template-columns: repeat(4, 1fr); }
.case-study-page .cs-result-desc {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 6px;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .case-study-page .cs-results-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .case-study-page .cs-results-grid { grid-template-columns: 1fr; }
}

/* ---- Gallery kicker spacing (kicker sits above the grid with no
   heading between, per the editorial "The Work" section) ---- */
.case-study-page #cs-gallery-section .cs-gallery { margin-top: 40px; }

/* ---- Story-split reuse: kicker sits without a heading on this page,
   so give it a touch more top alignment than the About-page variant. ---- */
.case-study-page .story-split .kicker-block { padding-top: 4px; }

@media (max-width: 900px) {
  .case-study-page .story-split { grid-template-columns: 1fr; gap: 20px; }
}
/* SR-only utility: keeps real content in the DOM/accessibility tree and
   crawlable by search engines, while remaining visually hidden. Used to
   surface each service's full modal copy as static page text (SEO), since
   the modal itself only renders that content into the DOM on open. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SERVICE DETAIL PAGES (Phase 8.3 — SEO) — breadcrumb nav and
   the "other services" cross-link grid used on services.html
   and each individual service page.
   ============================================================ */
.stp-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--muted);
  padding-top: calc(var(--header-h) + 28px);
}
.stp-breadcrumb a { color: var(--muted); text-decoration: none; }
.stp-breadcrumb a:hover { color: var(--primary); }
.stp-breadcrumb span[aria-current] { color: var(--text); }

.other-services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 28px;
}
.other-service-link {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 12px; text-decoration: none; color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.other-service-link:hover { border-color: var(--primary); transform: translateY(-2px); }
.other-service-num { font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: 0.875rem; }
.other-service-title { flex: 1; font-size: 0.9375rem; font-weight: 600; }
.other-service-link svg { flex-shrink: 0; color: var(--muted); }

/* ============================================================
   HOMEPAGE — "How We Work" process section (SEO content pass)
   ============================================================ */
.process-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; margin-top: 40px;
}
.process-step { padding: 4px; }
.process-step-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--primary); margin-bottom: 12px;
}
.process-step-title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.process-step-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin: 0; }

/* ============================================================
   TRUST / POSITIONING STRIP
   ============================================================ */
.trust-strip {
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px 0;
  text-align: center;
}
.trust-strip-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 32px;
}
.trust-strip-item-text { align-items: center; }
.trust-strip-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--primary);
  white-space: nowrap;
}
.trust-strip-label {
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}
.trust-strip-label-strong {
  font-weight: 600;
  color: var(--text);
}
.trust-strip-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .trust-strip-inner { gap: 20px 0; }
  .trust-strip-item { padding: 0 16px; }
  .trust-strip-divider { display: none; }
}
@media (max-width: 560px) {
  .trust-strip-inner { flex-direction: column; gap: 16px; }
  .trust-strip-item { padding: 0; }
}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.who-we-are-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}
/* Third column for the about photo (Phase 10 media scaffolding).
   Only applied once a real photo replaces the empty slot, so the
   section keeps its original 2-column layout until then. */
.who-we-are-grid:has(.about-media:not(.media-slot--empty)) {
  grid-template-columns: 0.7fr 1fr 0.9fr;
}
.who-we-are-grid .about-media.media-slot--empty { display: none; }
@media (max-width: 900px) {
  .who-we-are-grid:has(.about-media:not(.media-slot--empty)) {
    grid-template-columns: 1fr;
  }
}
.who-we-are-heading {
  max-width: 360px;
  margin-top: 14px;
}
.who-we-are-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 20px;
}
.who-we-are-body .body-text { margin-bottom: 0; max-width: 56ch; }
.who-we-are-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary-dark);
  transition: gap var(--transition);
}
.who-we-are-link:hover { gap: 12px; }

@media (max-width: 900px) {
  .who-we-are-grid { grid-template-columns: 1fr; gap: 24px; }
  .who-we-are-heading { max-width: 100%; }
}

/* ============================================================
   SOLUTION SELECTOR — "What are you trying to build?"
   ============================================================ */
.solution-selector {
  display: flex;
  flex-direction: column;
  max-width: 880px;
  margin: 56px auto 0;
  border-top: 1px solid var(--border);
}
.solution-option {
  border-bottom: 1px solid var(--border);
}
.solution-option-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 26px 4px;
  background: transparent;
  transition: background var(--transition);
}
.solution-option-trigger:hover,
.solution-option-trigger:focus-visible {
  background: var(--white);
}
.solution-option-need {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--text);
}
.solution-option-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.solution-option-trigger[aria-expanded="true"] .solution-option-icon {
  transform: rotate(90deg);
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.solution-option-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 380ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease;
}
.solution-option-answer-inner { overflow: hidden; min-height: 0; padding: 0 4px; }
.solution-option-trigger[aria-expanded="true"] + .solution-option-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}
.solution-option-solution {
  display: block;
  padding-top: 18px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-dark);
}
.solution-option-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  transition: gap var(--transition), color var(--transition);
}
.solution-option-cta:hover { gap: 12px; color: var(--primary-dark); }

@media (max-width: 640px) {
  .solution-option-trigger { padding: 20px 2px; }
  .solution-option-icon { width: 34px; height: 34px; }
  .solution-option-icon svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-option-answer,
  .solution-option-icon { transition: none !important; }
}

/* ============================================================
   INDUSTRIES — editorial numbered list
   ============================================================ */
.industries-list {
  max-width: 920px;
  margin: 48px auto 0;
  border-top: 1px solid var(--border);
}
.industry-row {
  display: grid;
  grid-template-columns: 64px 1fr 1.4fr 120px;
  align-items: center;
  gap: 24px;
  padding: 30px 4px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.industry-row:hover { background: var(--surface); }
/* Editorial thumbnail (Phase 10 media scaffolding). Collapses out of
   the grid entirely while empty, so rows lay out exactly as before —
   3 columns instead of 4 — until a real photo is added. */
.industry-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  align-self: center;
}
.industry-media.media-slot--empty {
  display: none;
}
.industry-row:has(.industry-media:not(.media-slot--empty)) {
  grid-template-columns: 64px 1fr 1.4fr 120px;
}
.industry-row:not(:has(.industry-media:not(.media-slot--empty))) {
  grid-template-columns: 64px 1fr 1.4fr;
}

.industry-row-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.industry-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.industry-row:hover .industry-row-icon {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}
.industry-row-icon svg { width: 17px; height: 17px; }

@media (max-width: 780px) {
  .industry-row-num { flex-direction: row; align-items: center; gap: 10px; }
}
.industry-row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--text);
}
.industry-row-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 780px) {
  .industry-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "title"
      "desc"
      "media";
    row-gap: 8px;
  }
  .industry-row-num { grid-area: num; }
  .industry-row-title { grid-area: title; }
  .industry-row-desc { grid-area: desc; }
  .industry-media {
    grid-area: media;
    aspect-ratio: 16 / 9;
    margin-top: 6px;
  }
}

.service-fit-section .section-heading,
.services-connect-section .section-heading,
.services-why-section .section-heading {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SERVICES PAGE — "Not sure which service fits?" selector
   Reuses .solution-selector/.solution-option markup + JS
   (initSolutionSelector) but adds a short explanatory note per
   answer, since these recommendations need one line of "why"
   that the homepage's goal-based selector doesn't.
   ============================================================ */
.service-fit-note {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}
.service-fit-footnote {
  margin-top: 28px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
}
.service-fit-footnote a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   SERVICES PAGE — "How our services work together" flow
   Horizontal connected stages on desktop, vertical stack on
   mobile. Deliberately not a card grid — the brief calls for
   visual variety and this section already had a strong "system,
   not a list" idea; this makes that idea visible instead of a
   paragraph describing it.
   ============================================================ */
.services-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  margin-top: 48px;
  flex-wrap: nowrap;
}
.services-flow-stage {
  flex: 1;
  min-width: 0;
  padding: 22px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.services-flow-stage-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--primary-dark);
  margin-bottom: 12px;
}
.services-flow-stage-services {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.services-flow-stage-services li {
  font-size: 0.8125rem;
  color: var(--muted);
}
.services-flow-stage-services a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.services-flow-stage-services a:hover,
.services-flow-stage-services a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.services-flow-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
  padding: 0 2px;
}
.services-flow-note {
  margin: 28px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 900px) {
  .services-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .services-flow-stage { text-align: left; }
  .services-flow-arrow {
    transform: rotate(90deg);
    padding: 6px 0;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-flow-stage-services a { transition: none !important; }
}
/* ============================================================
   SERVICE DETAIL PAGES — page architecture (v2)
   Shared components for the six individual service pages
   (social-media-management, web-development, video-shoot-editing,
   meta-ads, app-development, ugc-videos). Design language reuses
   existing tokens (--primary, --border, --surface, --shadow-soft,
   .kicker, .reveal, .faq-*, .btn) — only new layout/grouping rules
   for this page type live below.
   ============================================================ */

/* ---- Service hero: adds a secondary link + subtle hero meta row
   next to the existing .page-hero / .hero-heading / .lead ---- */
.svc-hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.svc-hero-secondary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 2px;
  transition: border-color var(--transition), color var(--transition);
}
.svc-hero-secondary:hover { color: var(--primary-dark); border-color: var(--primary); }

/* ---- Section shell + eyebrow/heading pattern used across every
   section on the page for a consistent editorial rhythm ---- */
.svc-section { padding: 72px 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 56px); }
.svc-section:first-of-type { border-top: none; }
.svc-section-tight { padding: 56px 0; }
@media (max-width: 900px) {
  .svc-section { padding: 52px 0; }
  .svc-section-tight { padding: 40px 0; }
}

.svc-head { max-width: 680px; margin-bottom: 40px; }
.svc-head .kicker { margin-bottom: 12px; }
.svc-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.svc-head p { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; margin-top: 14px; max-width: 60ch; }

/* ---- 02 Quick overview: three-up "at a glance" strip ---- */
.svc-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.svc-glance-item {
  padding: 32px 28px;
  border-left: 1px solid var(--border);
}
.svc-glance-item:first-child { border-left: none; }
.svc-glance-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 12px;
}
.svc-glance-item p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}
.svc-glance-item ul { display: flex; flex-direction: column; gap: 8px; }
.svc-glance-item li {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.svc-glance-item li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
@media (max-width: 780px) {
  .svc-glance { grid-template-columns: 1fr; }
  .svc-glance-item { border-left: none; border-top: 1px solid var(--border); padding: 26px 24px; }
  .svc-glance-item:first-child { border-top: none; }
}

/* ---- 03 What's included: numbered editorial grid ---- */
.svc-included-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.svc-included-item {
  background: var(--white);
  padding: 26px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: background var(--transition);
}
.svc-included-item:hover { background: var(--surface); }
.svc-included-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
  flex-shrink: 0;
  line-height: 1.4;
}
.svc-included-item span { font-size: 0.9375rem; color: var(--text); line-height: 1.5; font-weight: 500; }
@media (max-width: 780px) {
  .svc-included-grid { grid-template-columns: 1fr; }
}

/* ---- 04 Who it's for: profile cards ---- */
.svc-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.svc-fit-card {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.svc-fit-card:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.svc-fit-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.svc-fit-card p { font-size: 0.9375rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---- 05 Process: horizontal editorial timeline (desktop),
   vertical connected list (mobile). Own class names so this
   doesn't collide with the homepage's static .process-step grid
   or its click-to-highlight JS. ---- */
.svc-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  position: relative;
}
.svc-timeline[data-steps="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-timeline-step {
  position: relative;
  padding: 0 20px 0 0;
}
.svc-timeline-step::before {
  content: '';
  position: absolute;
  top: 21px; left: 0; right: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}
.svc-timeline-step:last-child::before { display: none; }
.svc-timeline-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--primary);
  margin-bottom: 22px;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.svc-timeline-step:hover .svc-timeline-num {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}
.svc-timeline-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
  padding-right: 12px;
}
.svc-timeline-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  padding-right: 20px;
}
@media (max-width: 900px) {
  .svc-timeline, .svc-timeline[data-steps="4"] {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .svc-timeline-step { padding: 0 0 0 56px; }
  .svc-timeline-step::before {
    top: 0; bottom: 0; left: 20px; right: auto;
    width: 1px; height: 100%;
  }
  .svc-timeline-num { margin-bottom: 14px; width: 40px; height: 40px; position: absolute; left: 0; top: 0; }
  .svc-timeline-title, .svc-timeline-desc { padding-left: 0; padding-right: 0; }
}

/* ---- 06 Why it matters: outcome chain ---- */
.svc-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0 8px;
}
.svc-chain-step {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text);
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--white);
}
.svc-chain-arrow { color: var(--primary); flex-shrink: 0; }
@media (max-width: 640px) {
  .svc-chain { flex-direction: column; align-items: flex-start; }
  .svc-chain-arrow { transform: rotate(90deg); margin-left: 22px; }
}

/* ---- 07 Why Scale To Sky: 2x2 reasons grid ---- */
.svc-reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.svc-reason-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.svc-reason-card h3 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--primary-dark);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
.svc-reason-card p { font-size: 0.9375rem; color: var(--text); line-height: 1.6; margin: 0; }
@media (max-width: 780px) {
  .svc-reasons-grid { grid-template-columns: 1fr; }
}

/* ---- 08 Good to know: accordion rows (pricing / industries / tools).
   Content is plain markup in the DOM at all times — accordion only
   affects visual expand/collapse, so it stays crawlable and works
   with JS disabled (rows just read as a stacked list). ---- */
.svc-goodknow { border-top: 1px solid var(--border); }
.svc-goodknow-row { border-bottom: 1px solid var(--border); }
.svc-goodknow-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.svc-goodknow-trigger:hover .svc-goodknow-title { color: var(--primary-dark); }
.svc-goodknow-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.svc-goodknow-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
  transition: color var(--transition);
}
.svc-goodknow-sub { font-size: 0.875rem; color: var(--muted); }
.svc-goodknow-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.svc-goodknow-icon::before, .svc-goodknow-icon::after {
  content: ''; position: absolute; background: var(--muted);
  transition: background var(--transition), transform var(--transition);
}
.svc-goodknow-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.svc-goodknow-icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.svc-goodknow-row.is-open .svc-goodknow-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.svc-goodknow-row.is-open .svc-goodknow-icon::before { background: var(--primary); }
.svc-goodknow-row.is-open .svc-goodknow-title { color: var(--primary-dark); }
.svc-goodknow-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(.2,.8,.2,1);
}
.svc-goodknow-row.is-open .svc-goodknow-body { grid-template-rows: 1fr; }
.svc-goodknow-body-inner { overflow: hidden; }
.svc-goodknow-body-inner > div { padding: 0 4px 26px; max-width: 66ch; }
.svc-goodknow-body-inner p { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; margin: 0 0 10px; }
.svc-goodknow-body-inner p:last-child { margin-bottom: 0; }
.svc-goodknow-body-inner a { color: var(--primary-dark); font-weight: 600; }
.svc-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.svc-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 14px;
}
@media (max-width: 640px) {
  .svc-goodknow-title { font-size: 0.9375rem; }
  .svc-goodknow-sub { display: none; }
}

/* ---- 09 Common mistakes: numbered editorial rows ---- */
.svc-mistakes {
  display: flex;
  flex-direction: column;
}
.svc-mistake {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.svc-mistake:last-child { border-bottom: 1px solid var(--border); }
.svc-mistake-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-light);
  -webkit-text-stroke: 1.5px var(--primary);
}
.svc-mistake h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.svc-mistake p { color: var(--muted); font-size: 0.9375rem; line-height: 1.65; margin: 0; max-width: 62ch; }
@media (max-width: 640px) {
  .svc-mistake { grid-template-columns: 34px 1fr; gap: 14px; }
  .svc-mistake-num { font-size: 1.15rem; }
}

/* ---- Explore more: compact nav strip with "you are here" ---- */
.svc-explore-list { display: flex; flex-direction: column; margin-top: 28px; }
.svc-explore-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: padding-left var(--transition), color var(--transition);
}
.svc-explore-list a.svc-explore-row:hover { padding-left: 10px; color: var(--primary-dark); }
.svc-explore-list a.svc-explore-row:hover .svc-explore-arrow { transform: translateX(4px); color: var(--primary); }
.svc-explore-row:last-child { border-bottom: 1px solid var(--border); }
.svc-explore-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary);
  width: 26px;
  flex-shrink: 0;
}
.svc-explore-title { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.svc-explore-arrow { color: var(--muted); flex-shrink: 0; transition: transform var(--transition), color var(--transition); }
.svc-explore-current {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 5px 12px;
  border-radius: 100px;
  flex-shrink: 0;
}
.svc-explore-row.is-current { cursor: default; }
.svc-explore-row.is-current .svc-explore-title { color: var(--primary-dark); }

/* ---- Optional sticky section nav ---- */
.svc-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.svc-subnav-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 0;
}
.svc-subnav-inner::-webkit-scrollbar { display: none; }
.svc-subnav a {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 100px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.svc-subnav a:hover { background: var(--surface); color: var(--text); }
.svc-subnav a.is-active { background: var(--primary-light); color: var(--primary-dark); }
#faqs.faq-social-section { scroll-margin-top: calc(var(--header-h) + 56px); }
html.perf-lite .svc-subnav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.98); }

@media (prefers-reduced-motion: reduce) {
  .svc-goodknow-body, .svc-goodknow-icon::before, .svc-goodknow-icon::after,
  .svc-timeline-num, .svc-explore-row, .svc-explore-arrow { transition: none !important; }
}

/* ============================================================
   BLOG
   Reuses existing design tokens (--primary, --border, --surface,
   --radius-*, --font-display/--font-body, .kicker, .btn,
   .filter-bar/.filter-btn, .final-cta, .svc-head) rather than
   introducing a separate visual identity for the Blog.
   ============================================================ */

/* ---- Hero ---- */
.blog-hero {
  padding: calc(var(--header-h) + 96px) 0 72px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.blog-hero-inner { max-width: 760px; margin: 0 auto; }
.blog-hero .kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.blog-hero-heading {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 auto;
}
.blog-hero-description {
  margin: 22px auto 0;
  max-width: 600px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .blog-hero { padding: calc(var(--header-h) + 56px) 0 48px; }
}

/* ---- Shared section rhythm ---- */
.blog-section { padding: 56px 0; }
.blog-section:first-of-type { padding-top: 64px; }
@media (max-width: 780px) {
  .blog-section { padding: 40px 0; }
}

/* ---- Featured article ---- */
.blog-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}
.blog-featured-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.blog-featured-media { display: block; background: var(--surface); min-height: 260px; overflow: hidden; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease, ease); }
.blog-featured-card:hover .blog-featured-media img { transform: scale(1.035); }
.blog-featured-media--empty {
  background: linear-gradient(135deg, var(--primary-light), var(--surface));
}
.blog-featured-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-category {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 14px;
}
.blog-featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}
.blog-featured-excerpt {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-top: 14px;
}
.blog-featured-meta {
  display: flex;
  gap: 14px;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 18px;
}
.blog-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary-dark);
  margin-top: 24px;
}
.blog-featured-cta svg { transition: transform var(--transition); }
.blog-featured-card:hover .blog-featured-cta svg { transform: translateX(3px); }
@media (max-width: 860px) {
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-media { min-height: 200px; }
  .blog-featured-body { padding: 28px; }
}

/* ---- Controls: filter bar + search ---- */
.blog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.blog-filter-bar { flex: 1 1 auto; }
.blog-search {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  max-width: 100%;
}
.blog-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.blog-search input[type="search"] {
  width: 100%;
  padding: 11px 16px 11px 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition);
}
.blog-search input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
}
.blog-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.blog-search-reset {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media (max-width: 640px) {
  .blog-controls { flex-direction: column; align-items: stretch; }
  .blog-search { width: 100%; }
}

/* ---- Article grid ---- */
.blog-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.blog-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); border-color: var(--border); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.blog-card-media { display: block; aspect-ratio: 5 / 3; background: var(--surface); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease, ease); }
.blog-card:hover .blog-card-media img { transform: scale(1.045); }
.blog-card-media--empty { background: linear-gradient(135deg, var(--primary-light), var(--surface)); }
.blog-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card-category {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
  margin-top: 10px;
}
.blog-card-excerpt {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 10px;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 16px;
}

.blog-empty {
  color: var(--muted);
  text-align: center;
  padding: 48px 0;
  font-size: 0.95rem;
}

/* ---- Explore by topic ---- */
.blog-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.blog-topic-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--white);
  border: none;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.blog-topic-pill:hover:not(:disabled) { background: var(--surface); }
.blog-topic-pill:disabled { color: var(--muted); cursor: default; opacity: 0.5; }
.blog-topic-pill-count {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--muted);
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 10px;
  flex-shrink: 0;
}
.blog-topic-pill:disabled .blog-topic-pill-count { background: transparent; }

/* ============================================================
   ARTICLE PAGE — Phase 3
   Everything below is generated into #blog-article-root by
   BlogRender.renderArticle() (blog/js/blog.js). Static markup,
   no framework — same reveal/FAQ/CTA-tracking conventions as the
   rest of the site.
   ============================================================ */

/* ---- Reading progress bar (fixed under header) ---- */
.blog-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.blog-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .blog-progress-bar { transition: none; }
}

/* ---- Not-found state ---- */
.blog-article-notfound {
  max-width: 520px;
  margin: 64px auto;
  text-align: center;
}
.blog-article-notfound h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.blog-article-notfound p { color: var(--muted); margin-bottom: 28px; }

/* ---- Breadcrumbs ---- */
.blog-breadcrumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; }
.blog-breadcrumbs a { color: var(--muted); text-decoration: none; }
.blog-breadcrumbs a:hover { color: var(--primary-dark); }
.blog-breadcrumbs span[aria-current] { color: var(--text); }

/* ---- Article header ---- */
.blog-article-category {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.blog-article-title {
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.blog-article-excerpt {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--muted);
  line-height: 1.6;
  max-width: 68ch;
  margin-bottom: 24px;
}
.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 36px;
}
.blog-article-meta .dot { opacity: 0.5; }
.blog-article-meta .updated { color: var(--muted); }

/* ---- Featured image ---- */
.blog-article-hero-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-light), var(--surface));
  margin-bottom: 44px;
}
.blog-article-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- Main layout: content + sticky TOC sidebar ---- */
.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 64px;
  align-items: start;
}
.blog-article-main { min-width: 0; max-width: 720px; }
.blog-article-aside { min-width: 0; }

/* ---- Table of contents ---- */
.blog-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  background: var(--surface);
}
.blog-toc-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: block;
}
.blog-toc-list { display: flex; flex-direction: column; gap: 2px; }
.blog-toc-list a {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  line-height: 1.4;
}
.blog-toc-list a:hover { background: var(--white); color: var(--text); }
.blog-toc-list a.is-active { color: var(--primary-dark); border-left-color: var(--primary); background: var(--white); font-weight: 600; }
.blog-toc-list .blog-toc-sub { padding-left: 22px; font-size: 0.8125rem; }

/* Mobile TOC: collapsible card above the article body */
.blog-toc-mobile-toggle { display: none; }

@media (max-width: 980px) {
  .blog-article-layout { grid-template-columns: 1fr; gap: 0; }
  .blog-article-aside { order: -1; margin-bottom: 32px; }
  .blog-toc {
    position: static;
    padding: 4px 18px;
  }
  .blog-toc-label { display: none; }
  .blog-toc-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text);
  }
  .blog-toc-mobile-toggle svg { transition: transform var(--transition); flex-shrink: 0; }
  .blog-toc.is-open .blog-toc-mobile-toggle svg { transform: rotate(180deg); }
  .blog-toc-list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 380ms cubic-bezier(.2,.8,.2,1);
  }
  .blog-toc-list { overflow: hidden; }
  .blog-toc.is-open .blog-toc-list { grid-template-rows: 1fr; padding-bottom: 14px; }
  .blog-toc-list-inner { overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
}

/* ---- Article content typography ---- */
.blog-article-body { line-height: 1.8; font-size: 1.0625rem; color: var(--text); }
.blog-article-body > *:first-child { margin-top: 0; }
.blog-article-body h2 {
  scroll-margin-top: calc(var(--header-h) + 24px);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: 52px 0 16px;
  padding-top: 4px;
}
.blog-article-body h3 {
  scroll-margin-top: calc(var(--header-h) + 24px);
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  margin: 34px 0 12px;
}
.blog-article-body p { margin: 0 0 18px; }
.blog-article-body p.blog-lead {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 28px;
}
.blog-article-body ul,
.blog-article-body ol { margin: 0 0 18px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.blog-article-body ul { list-style: disc; }
.blog-article-body ol { list-style: decimal; }
.blog-article-body li { padding-left: 4px; }
.blog-article-body li::marker { color: var(--primary); }
.blog-article-body a:not(.btn) { color: var(--primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.blog-article-body a:not(.btn):hover { color: var(--primary); }
.blog-article-body a.btn,
.blog-article-body a.btn:hover { text-decoration: none; }
.blog-article-body strong { font-weight: 700; }
.blog-article-body em { font-style: italic; }
.blog-article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--primary);
  color: var(--muted);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
}
.blog-article-body blockquote p { margin: 0; }

/* ---- Images inside content ---- */
.blog-article-body figure { margin: 32px 0; }
.blog-article-body figure img {
  width: 100%;
  border-radius: var(--radius-sm);
}
.blog-article-body figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Tables ---- */
.blog-table-wrap {
  margin: 28px 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}
.blog-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 480px;
}
.blog-article-body th,
.blog-article-body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.blog-article-body th {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--surface);
  white-space: nowrap;
}
.blog-article-body tr:last-child td { border-bottom: none; }

/* ---- Callouts ---- */
.blog-callout {
  margin: 28px 0;
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  border-left: 3px solid var(--primary);
}
.blog-callout-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.blog-callout p { margin: 0; color: var(--text); font-size: 0.9375rem; }
.blog-callout p + p { margin-top: 10px; }
.blog-callout--warning { border-left-color: #C7433D; background: #FBF2F1; }
.blog-callout--warning .blog-callout-label { color: #C7433D; }

/* ---- Inline CTA (mid-article) ---- */
.blog-inline-cta {
  margin: 40px 0;
  padding: 28px 30px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.blog-inline-cta-text h3 { font-size: 1.1rem; margin-bottom: 4px; }
.blog-inline-cta-text p { margin: 0; color: var(--muted); font-size: 0.9375rem; max-width: 46ch; }
.blog-inline-cta .btn { flex-shrink: 0; }

/* ---- Share row ---- */
.blog-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.blog-share-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-right: 4px; }
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.blog-share-btn:hover { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-light); }
.blog-share-btn.is-copied { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-light); }

/* ---- FAQ section (article) ---- */
.blog-article-faq { margin-top: 64px; }
.blog-article-faq .kicker { margin-bottom: 12px; }
.blog-article-faq h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 24px; }

/* ---- Related articles ---- */
.blog-related { margin-top: 72px; }
.blog-related h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 24px; }
.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) {
  .blog-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-related-grid { grid-template-columns: 1fr; }
}

/* ---- Prev / next article nav ---- */
.blog-article-nav {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.blog-article-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.blog-article-nav-link:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }
.blog-article-nav-link--next { text-align: right; align-items: flex-end; }
.blog-article-nav-direction { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.blog-article-nav-title { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--text); }
@media (max-width: 640px) {
  .blog-article-nav { grid-template-columns: 1fr; }
  .blog-article-nav-link--next { text-align: left; align-items: flex-start; }
}

/* ---- Bottom CTA (article-specific wrapper spacing) ---- */
.blog-article-final-cta { margin-top: 72px; }

@media (max-width: 480px) {
  .blog-index-list { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 10 — REAL MEDIA SLOT SYSTEM (homepage only)
   ------------------------------------------------------------
   Purely additive scaffolding so real photography/video can be
   dropped into the homepage without touching layout code.

   Each slot is a container that:
   - shows a graceful abstract/gradient fallback by default
     (.media-slot--empty), so the page never looks "broken" while
     waiting for a real asset
   - is ready to hold a real <img>/<picture>/<video> the moment one
     is added — just drop the file in assets/home/ and follow the
     instructions in the matching HTML "MEDIA SLOT" comment plus
     assets/home/ATTRIBUTIONS.md
   ============================================================ */

.media-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 16px);
  background: var(--surface);
}
.media-slot img,
.media-slot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Empty-state fallback: soft brand-toned gradient so a slot with no
   asset yet still reads as an intentional, premium panel rather than
   a blank/broken box. Removed automatically once a real <img>/<video>
   child is present and this modifier class is deleted. */
.media-slot--empty {
  background:
    radial-gradient(circle at 30% 20%, rgba(109,61,245,0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(217,163,110,0.12), transparent 55%),
    var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-slot--empty::after {
  content: attr(data-slot-label);
  font-family: var(--font-body, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.55;
  text-align: center;
  padding: 12px;
}

/* ---- Hero media slot ----
   Sits as a background layer behind the existing .hero-field / brand
   copy, independent of the shared .hero-field/.hero-inner classes so
   the scroll-transition system used on other pages is untouched. */
.hero-media-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
}
.hero-media-slot video,
.hero-media-slot img,
.hero-media-slot picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Readability scrim so hero copy stays legible over real photography
   once a hero image/video is activated. Invisible while the slot is
   in its empty state. */
.hero-media-slot:not(.media-slot--empty)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(246,242,255,0.88) 0%, rgba(253,252,250,0.72) 46%, rgba(250,243,236,0.85) 100%);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-media-slot video { display: none; }
}

/* ---- Service / industry / create-panel media slots ----
   Reuses the same .media-slot base; sized per context below. */
.service-card-media,
.industry-media,
.create-media {
  aspect-ratio: 4 / 3;
}
.about-media {
  aspect-ratio: 3 / 4;
}
@media (max-width: 640px) {
  .about-media { aspect-ratio: 16 / 10; }
}

/* Gentle reveal-on-hover treatment for populated media slots, matching
   the site's existing restrained motion language. Disabled for users
   who prefer reduced motion. */
.media-slot:not(.media-slot--empty) img,
.media-slot:not(.media-slot--empty) video {
  transition: transform 0.6s var(--ease, ease);
}
a:hover > .media-slot:not(.media-slot--empty) img,
a:hover > .media-slot:not(.media-slot--empty) video {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .media-slot:not(.media-slot--empty) img,
  .media-slot:not(.media-slot--empty) video {
    transition: none;
  }
  a:hover > .media-slot:not(.media-slot--empty) img,
  a:hover > .media-slot:not(.media-slot--empty) video {
    transform: none;
  }
}