/* ==========================================================================
   ADVANCED MARKETERS — brutalist design system
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-Thin.ttf') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-ThinItalic.ttf') format('truetype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist/Geist-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/bebas-neue/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --black: #0a0a0a;
  --white: #fafafa;
  --off-white: #efeeea;
  --accent: #271b6d;
  --accent-soft: #7475ec;
  --accent-deep: #161617;
  --accent-gradient: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 55%, var(--accent-soft) 100%);
  --line: rgba(10,10,10,0.14);
  --line-invert: rgba(250,250,250,0.18);

  --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Geist', 'Helvetica Neue', Arial, sans-serif;

  --edge: clamp(20px, 5vw, 64px);
  --nav-h: 84px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-x: hidden;
  cursor: none;
}

/* Regular weight is reserved for emphasis inside a paragraph — everything
   else on the site runs on the lighter 300 weight (see body, above), so
   <strong>/<b> get an explicit 400 rather than the browser's default
   bolder-than-anything-around-it bold. */
strong, b { font-weight: 400; }

/* Single shared backdrop behind every section. Sections themselves carry no
   solid background (aside from the video-backed hero), so as the centered
   section's theme changes on scroll, this one layer crossfades underneath
   rather than the page cutting hard from one flat color block to the next. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-color: var(--white);
  transition: background-color 0.7s var(--ease);
  pointer-events: none;
}
body[data-theme="dark"] .page-bg { background-color: var(--black); }

.scroll-wrapper.is-smooth {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

/* Chrome/Safari render a native pointer/hand cursor over <a>/<button>
   regardless of the inherited `cursor` value (it's not a simple CSS
   inheritance case), which was showing the OS pointer on top of the
   custom dot on every link and button. Forcing inherit here routes them
   through the same body rule (none on desktop, auto once :hover isn't
   available) instead of the browser's own default. */
a, button { cursor: inherit; }

@media (hover: none) {
  body { cursor: auto; }
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
}

.kicker, .section-num, .cs-tile__kicker, .stat-card__label,
.dept-item__index, .industry-card__index, .primary-nav__link,
.site-footer__label, .hero__scroll-cue, .cs-tile__tag {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------ topo contours ------------------------------ */
/* Canvas-drawn, animated topographic contour lines. One fixed, viewport-sized
   layer sits just above the shared page background and fades in/out with it
   — visible only while body[data-theme="dark"], so the lines crossfade in
   lockstep with the black background rather than living inside any one
   section. */
.topo-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
body[data-theme="dark"] .topo-canvas { opacity: 1; }

/* ---------------------------- custom cursor ---------------------------- */

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  will-change: transform;
  width: 14px; height: 14px;
  background: #fff;
  mix-blend-mode: difference;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.25s var(--ease);
}

.cursor-dot.is-hover {
  width: 26px; height: 26px;
}

@media (hover: none) {
  .cursor-dot { display: none; }
}

.cursor-dot.is-hidden { opacity: 0; }

.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 999;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 20px;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
  will-change: transform;
}
.cursor-label.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (hover: none) {
  .cursor-label { display: none; }
}

/* --------------------------------- loader --------------------------------- */
/* Doubles as the page-transition overlay: every page mounts this on load
   (entry) and script.js re-shows it right before an internal link navigates
   away (exit), so moving between pages reads as one continuous fade instead
   of a hard cut. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.loader.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Minimal centered pill badge — modeled on agustinburgos.com's splash
   screen (just the wordmark in a rounded-outline pill on black, no
   percentage counter or progress bar), with a slow pulse standing in for
   a determinate loading indicator. */
.loader__badge {
  display: inline-flex;
  align-items: center;
  padding: 18px 32px;
  border: 1px solid rgba(250,250,250,0.4);
  border-radius: 999px;
  animation: loaderPulse 1.8s ease-in-out infinite;
}

.loader__badge-mark { height: clamp(16px, 2.4vw, 22px); width: auto; }

@keyframes loaderPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

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

/* ------------------------------ glow-on-hover ---------------------------- */
/* --angle is driven continuously from JS (see script.js) rather than a CSS
   animation, so the rotation doesn't depend on @property support. */

:root { --angle: 0deg; }

.btn,
.stat-card,
.industry-card,
.cs-tile,
.quote-card,
.dept-item,
.partner-badge-item {
  position: relative;
}

.btn::before,
.stat-card::before,
.industry-card::before,
.cs-tile::before,
.quote-card::before,
.dept-item::before,
.partner-badge-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--accent-soft) 12%, var(--accent) 24%, transparent 36%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  z-index: 5;
}

.btn:hover::before, .btn:focus-visible::before,
.stat-card:hover::before,
.industry-card:hover::before, .industry-card:focus-visible::before, .industry-card.is-open::before,
.cs-tile:hover::before,
.quote-card:hover::before,
.dept-item:hover::before, .dept-item:focus-visible::before, .dept-item.is-open::before,
.partner-badge-item:hover::before {
  opacity: 1;
}

/* buttons get a brighter, comet-style ring so it reads on any background
   (transparent hero, solid accent CTA section, black footer) */
.btn::before {
  padding: 2px;
  background: conic-gradient(from var(--angle, 0deg),
    transparent 0%, #fff 8%, var(--accent-soft) 22%, var(--accent) 34%, transparent 48%);
}

/* always-on loop for the primary nav CTA so it stands out unprompted */
.btn--nav::before,
.hero__cta::before { opacity: 1; }

/* ---------------------------- scroll progress --------------------------- */

.progress-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 1000;
}
.progress-rail__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
}

/* -------------------------------- header -------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 900;
  background: rgba(250,250,250,0.0);
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background 0.6s var(--ease), color 0.6s var(--ease),
              border-color 0.6s var(--ease), height 0.5s var(--ease),
              backdrop-filter 0.6s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(250,250,250,0.55);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  color: var(--black);
  border-bottom: none;
  height: 76px;
}

body[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  color: var(--white);
}
body[data-theme="dark"] .site-header.is-scrolled .brand img { filter: invert(1); }

/* .site-header's unscrolled default (white text, inverted-to-white logo)
   assumes a dark hero sits behind it — true on dark-theme pages, but on
   light-theme subpages (About, Specialties, Case Studies, Partners) the
   intro section is a light background, so white-on-white made the nav
   links, burger icon, and logo invisible before the first scroll. */
body[data-theme="light"] .site-header:not(.is-scrolled) { color: var(--black); }
body[data-theme="light"] .site-header:not(.is-scrolled) .brand img { filter: none; }

.brand {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  margin: -10px -14px;
}

.brand img {
  filter: invert(1);
  transition: filter 0.6s var(--ease);
}
.site-header.is-scrolled .brand img { filter: none; }

.site-header__inner {
  height: 100%;
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand img { height: 28px; width: auto; }

.primary-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  flex: 1;
  justify-content: center;
}

.primary-nav__link {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
  color: inherit;
}

.primary-nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%; height: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.primary-nav__link:hover::after,
.primary-nav__link.is-active::after {
  width: 100%;
}

.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1.5px solid var(--black);
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}

/* On dark-theme pages the default black-on-black pill (.btn's resting
   state) disappears against the black page/header background — everywhere
   except .btn--primary (its own accent gradient) and .btn--footer (already
   built dark-safe), give it .btn--footer's outline treatment instead. */
body[data-theme="dark"] .btn:not(.btn--primary):not(.btn--footer) {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn--nav { white-space: nowrap; }

.btn--primary {
  background: var(--accent-gradient);
  border-color: var(--accent);
  padding: 18px 34px;
  font-size: 13px;
}
.btn--primary:hover { background: var(--black); border-color: var(--black); }

.btn--xl { padding: 26px 44px; font-size: 15px; }

.btn--footer {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--footer:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Clickable box is 44x44 (WCAG's minimum touch target) even though the
   icon itself still reads as the original 32x22 glyph — padding grows the
   hit area without changing how it looks. */
.burger {
  display: none;
  width: 44px; height: 44px;
  padding: 11px 6px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 24px) var(--edge) 32px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); }

.mobile-menu__nav { display: flex; flex-direction: column; }

.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-invert);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.mobile-menu__link[aria-current] { color: var(--accent-soft); }
.mobile-menu__link:hover { color: var(--accent-soft); }

/* Case Studies is both a page of its own and a jump-off to five client
   anchors + Our Network — nesting the sub-links under it (rather than the
   old plain <p> label with no link of its own) keeps that hierarchy clear
   and makes "CASE STUDIES" itself tappable, which it wasn't before. */
.mobile-menu__group { border-bottom: 1px solid var(--line-invert); }
.mobile-menu__group .mobile-menu__link { border-bottom: none; }

.mobile-menu__subgroup {
  display: flex;
  flex-direction: column;
  padding: 0 0 16px 20px;
  margin-left: 4px;
  border-left: 1px solid var(--line-invert);
}

.mobile-menu__sub {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 2px 16px;
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(250,250,250,0.62);
  transition: color 0.3s var(--ease);
}
.mobile-menu__sub[aria-current] { color: var(--accent-soft); }
.mobile-menu__sub:hover { color: var(--white); }

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.mobile-menu__cta { width: 100%; }

.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(250,250,250,0.6);
  transition: color 0.3s var(--ease);
}
.mobile-menu__phone:hover { color: var(--accent-soft); }

/* On shorter phones (iPhone SE etc.) the full 14-link menu plus footer CTA
   is taller than the viewport — .mobile-menu already scrolls, but tighten
   the rhythm so the CTA is reachable with little or no scrolling instead
   of sitting entirely below the fold on first open. */
@media (max-height: 700px) {
  .mobile-menu { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 20px; }
  .mobile-menu__link { min-height: 44px; padding: 8px 0; }
  .mobile-menu__subgroup { padding-bottom: 8px; }
  .mobile-menu__sub { min-height: 36px; }
  .mobile-menu__footer { padding-top: 16px; gap: 12px; }
}

/* -------------------------------- hero ---------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  display: flex;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.35) 40%, rgba(10,10,10,0.92) 100%);
}

.hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2vh, 20px);
  padding: calc(var(--nav-h) + 16px) var(--edge) clamp(40px, 7vh, 88px);
}

.hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* Homepage-only variant: no kicker/CTA, just the headline, centered. */
.hero--centered .hero__grid { align-items: center; text-align: center; }
.hero--centered .hero__main { align-items: center; }

/* Homepage headline reads as one line (rather than the per-word stacked
   lines used elsewhere), so it needs a smaller, nowrap-safe size instead
   of .hero__headline's default — and its line-wraps need to sit inline
   with a space between them instead of stacking as blocks. */
.hero--centered .hero__headline {
  font-size: clamp(1.9rem, 7.2vw, 6.6rem);
  white-space: nowrap;
}
.hero--centered .hero__line-wrap { display: inline-block; }
.hero--centered .hero__line-wrap:not(:last-child) { margin-right: 0.28em; }

.kicker {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--off-white);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(3rem, min(13vw, 14vh), 10rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.hero__line-wrap { display: block; overflow: hidden; }

.hero__line {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}

.hero__headline .hero__line-wrap:nth-child(2) .hero__line { transition-delay: 0.08s; }
.hero__headline .hero__line-wrap:nth-child(3) .hero__line { transition-delay: 0.16s; }

.hero__line--accent { color: var(--white); }

.hero__cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease) 0.2s, transform 0.7s var(--ease) 0.2s;
}

.hero__scroll-cue {
  position: absolute;
  bottom: 28px;
  right: var(--edge);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--off-white);
}

.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: var(--off-white);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--accent-soft);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { top: -100%; }
  50% { top: 0%; }
  100% { top: 100%; }
}

/* reveal states, applied once IntersectionObserver fires */
.hero.is-loaded .kicker,
.hero.is-loaded .hero__line,
.hero.is-loaded .hero__cta {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------- generic section head ------------------------ */

section { position: relative; padding: clamp(70px, 10vw, 140px) var(--edge); }

.section-head { position: relative; max-width: 900px; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head > * { position: relative; z-index: 1; }

.section-head[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: -0.5em;
  left: -0.04em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(6rem, 18vw, 15rem);
  line-height: 1;
  color: currentColor;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* Title on the left, intro copy on the right — spans the full content
   width (not the 900px reading-width cap below) so both edges line up
   with the fixed header's logo/nav bounds above it. */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 64px);
  max-width: none;
}
.section-head--split .section-title { flex: none; }
.section-head--split .section-sub {
  flex: none;
  width: min(480px, 100%);
  margin-top: 0.4em;
}

/* Centered mission-statement treatment — About page's hero headline. */
.section-head--center {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 0;
}

.section-num {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.section-title .word { display: inline-block; overflow: hidden; vertical-align: top; }
.section-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease);
}
.section-title.is-visible .word > span { transform: translateY(0); }

/* Shared body-copy treatment — sized between the About lead paragraph
   (bigger) and small card copy like the leader-spotlight bio (smaller):
   reused everywhere a card or section needs a longer descriptive sentence
   rather than a caption-sized one. */
.section-sub,
.differentiator__desc,
.industry-card__body p,
.dept-item__desc {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.section-sub {
  margin-top: 20px;
  max-width: 520px;
  color: rgba(10,10,10,0.68);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].is-visible,
.section-num.is-visible,
.section-sub.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------- about --------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  padding-top: 48px;
}

.lead-copy {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.lead-copy__brand { color: var(--black); }
.lead-copy__highlight { color: var(--accent); }

.about__cta { display: inline-block; margin-top: 32px; }

.about__stats {
  display: grid;
  gap: 28px;
}

.stat-card {
  border: 1.5px solid var(--black);
  padding: 26px 24px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.stat-card:hover {
  box-shadow: 8px 8px 0 var(--accent);
  transform: translate(-4px, -4px);
}

.stat-card__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-card__unit {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--accent);
}

.stat-card__label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 500;
  color: rgba(10,10,10,0.55);
}

/* ------------------------------ about page ------------------------------ */
/* About page's intro paragraph and metrics grid — standalone sections
   (inspired by wearebou.com/about's headline -> intro -> stats stack)
   rather than the paired copy+stats layout the homepage's about section
   still uses. */

.about-intro__copy {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-align: center;
}

.about-metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 28px);
}

.trust-strip {
  padding: 0 var(--edge);
}

.partner-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(28px, 4.5vw, 48px) 0;
}

.partner-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 12px;
}

.partner-badge-item__mark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.partner-badge-item__caption {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(10,10,10,0.55);
}

/* ------------------------------- industries -------------------------------- */

.industries, .different { color: var(--white); }
.industries .section-sub, .different .section-sub { color: rgba(250,250,250,0.62); }

.industries .stat-card { border-color: var(--white); }
.industries .stat-card__label { color: rgba(250,250,250,0.55); }
.industries .stat-card__unit { color: var(--accent-soft); }
.industries .section-num, .packages .section-num, .different .section-num { color: var(--accent-soft); }

.local-impact { margin-bottom: clamp(56px, 8vw, 100px); }

.local-impact__eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
  margin-bottom: 28px;
}

.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.local-impact__closing {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(250,250,250,0.72);
  max-width: 620px;
  border-top: 1px solid var(--line-invert);
  padding-top: 32px;
}

.industry-rail {
  display: flex;
  border-top: 1px solid var(--line-invert);
  border-left: 1px solid var(--line-invert);
  min-height: 460px;
}

.service-list__cta {
  margin-top: 40px;
  text-align: center;
}
/* Local Services page only — the homepage's identical .service-list__cta
   keeps its smaller "Learn More" so it doesn't duplicate the "Work With
   Us" primary CTA already further down that page. */
.service-list__cta--big .btn {
  padding: 34px 64px;
  font-size: 18px;
  letter-spacing: 0.06em;
}

.industry-card {
  position: relative;
  flex: 1;
  background: var(--black);
  border-right: 1px solid var(--line-invert);
  border-bottom: 1px solid var(--line-invert);
  padding: 40px 32px;
  overflow: hidden;
  transition: flex 0.5s var(--ease);
}

.industry-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--ease);
}
.industry-card:hover .industry-card__media,
.industry-card:focus-visible .industry-card__media,
.industry-card.is-open .industry-card__media { transform: scale(1.06); }

/* Multiply tint — darkens the photo proportionally (keeps its contrast/
   detail, unlike a flat opacity fade which just washes it toward the
   card's plain black background), pulls it toward the brand's dark
   purple so it reads as a moody backdrop rather than a loud stock photo,
   and is bottom-heavy (gradient within the tint itself) so index/title/
   body stay legible against whatever the photo is doing there. Hovering
   (or being the open one) darkens it further still, since that's also
   when the full paragraph + list appear and need the most protection.
   (Deliberately uses ::after, not ::before — ::before on this class is
   already the shared glow-ring hover effect defined earlier, shared with
   .btn/.stat-card/.cs-tile/etc.) */
.industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,22,23,0.55) 0%, rgba(22,22,23,0.72) 45%, rgba(10,8,14,0.96) 100%);
  mix-blend-mode: multiply;
  opacity: 0.75;
  transition: opacity 0.5s var(--ease);
}
.industry-card:hover::after,
.industry-card:focus-visible::after,
.industry-card.is-open::after { opacity: 0.92; }

.industry-card__index,
.industry-card__title,
.industry-card__body {
  position: relative;
  z-index: 3;
}

.industry-card:hover,
.industry-card:focus-visible,
.industry-card.is-open {
  flex: 2.4;
  outline: none;
}

.industry-card__index {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-soft);
}

.industry-card__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.01em;
  margin-top: 90px;
  writing-mode: horizontal-tb;
}

.industry-card__body {
  margin-top: 24px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
}

.industry-card:hover .industry-card__body,
.industry-card:focus-visible .industry-card__body,
.industry-card.is-open .industry-card__body { opacity: 1; transform: translateY(0); }

.industry-card__body p {
  color: rgba(250,250,250,0.85);
}

.industry-card__list { margin-top: 18px; display: grid; gap: 8px; }
.industry-card__list li {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding-left: 30px;
  position: relative;
  color: rgba(250,250,250,0.7);
}
.industry-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 18px;
  background: var(--accent-soft);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.industry-card__cta {
  margin-top: 22px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.industry-card__cta a { color: var(--accent-soft); }
.industry-card__cta a:hover { color: var(--white); }

/* --------------------- local services: row-list layout ---------------------
   Structural reference: agustinburgos.com/services (thin-divider list rows,
   index/name/tag/description columns, no card boxes). Typographic reference:
   the old advancedmarketers.co/local-services page (condensed black display
   headline per row + "INDUSTRY 01 /" incrementing-slash eyebrow + a short
   bold all-caps tagline). Reuses the .industry-card markup/JS (data-href
   nav, Restoration's hover/click toggle) so nothing in script.js changes —
   the --list modifier just re-lays the same elements out as a row. */
.service-list__kicker {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(10,10,10,0.4);
  margin-bottom: 8px;
}

.industry-rail--list {
  display: block;
  border: none;
  min-height: 0;
}

.industry-rail--list .industry-card {
  flex: none;
  display: grid;
  grid-template-columns: 48px minmax(180px,1.1fr) 150px minmax(220px,1fr);
  align-items: center;
  column-gap: clamp(16px, 3vw, 32px);
  padding: clamp(24px, 3.4vw, 34px) 4px;
  border: none;
  border-top: 1px solid var(--line);
  background: transparent;
  overflow: visible;
  transition: background 0.4s var(--ease);
}
.industry-rail--list .industry-card:last-child { border-bottom: 1px solid var(--line); }

.industry-rail--list .industry-card:hover,
.industry-rail--list .industry-card:focus-visible,
.industry-rail--list .industry-card.is-open {
  flex: none;
  background: rgba(10,10,10,0.03);
}

.industry-rail--list .industry-card::after { content: none; }

.industry-rail--list .industry-card__index {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  color: rgba(10,10,10,0.4);
}

.industry-rail--list .industry-card__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-top: 0;
  color: var(--black);
}

.industry-card__tag {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
}

.industry-card__desc {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: rgba(10,10,10,0.72);
}

@media (max-width: 860px) {
  .industry-rail--list .industry-card {
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "index title"
      "tag   tag"
      "desc  desc";
    row-gap: 10px;
  }
  .industry-rail--list .industry-card__index { grid-area: index; }
  .industry-rail--list .industry-card__title { grid-area: title; }
  .industry-card__tag { grid-area: tag; }
  .industry-card__desc { grid-area: desc; }
}

/* --------------------------- what makes us different ------------------------- */

.differentiators {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.differentiator {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 40px);
  transition: background 0.4s var(--ease);
}
.differentiator:hover { background: linear-gradient(135deg, rgba(39,27,109,0.05), rgba(116,117,236,0.03)); }

.differentiator__mark {
  width: 30px; height: 22px;
  margin-bottom: 24px;
  background: var(--accent);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;
}

.differentiator__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 24px;
}

.differentiator__logo-spacer { height: 34px; margin-bottom: 24px; }

.differentiator__logo--square {
  height: 100px;
  max-width: 100px;
  margin-bottom: 8px;
}

.differentiator__logo--raw {
  height: 64px;
  max-width: 200px;
  margin-bottom: 16px;
}

.differentiator__title {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin-bottom: 12px;
}

.differentiator__title.differentiator__title--bebas {
  font-family: 'Bebas Neue', var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

.differentiator__title.differentiator__title--logo {
  font-size: clamp(2.6rem, 4.2vw, 3.4rem);
  line-height: 1;
  margin-bottom: 20px;
}

.differentiator__desc {
  color: rgba(10,10,10,0.68);
}

/* -------------------------- partners page (subpage) --------------------------- */


.trust-strip__eyebrow { margin: 0 0 24px; }

.differentiators--dark { border-top-color: var(--line-invert); border-left-color: var(--line-invert); }
.differentiators--dark .differentiator {
  background: var(--black);
  border-color: var(--line-invert);
  display: block;
  text-decoration: none;
}
.differentiators--dark .differentiator:hover { background: linear-gradient(135deg, rgba(39,27,109,0.15), rgba(116,117,236,0.08)), var(--black); }
.differentiators--dark .differentiator__title { color: var(--white); }
.differentiators--dark .differentiator__desc { color: rgba(250,250,250,0.65); }
.differentiators--dark .differentiator__mark { background: var(--accent-soft); }

/* ------------------------------ case studies -------------------------------- */

/* One client shown at a time, scroll-snapped so trackpad/touch swipe and
   the arrow/dot controls all move it the same way; JS drives auto-rotation
   and keeps the dots in sync via scrollIntoView. */
.cs-carousel { position: relative; }

.cs-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cs-carousel__track::-webkit-scrollbar { display: none; }

.cs-carousel__track .cs-tile--feature {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.cs-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.cs-carousel__arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--black);
  background: transparent;
  color: var(--black);
  font-size: 16px;
  line-height: 1;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.cs-carousel__arrow:hover { background: var(--black); color: var(--white); transform: scale(1.08); }

.cs-carousel__dots { display: flex; align-items: center; gap: 8px; }

.cs-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--line);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.cs-carousel__dot.is-active { background: var(--accent); transform: scale(1.35); }

.cs-tile {
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease);
}
.cs-tile:hover { background: linear-gradient(135deg, rgba(39,27,109,0.045), rgba(116,117,236,0.025)); }

.cs-tile--feature { flex-direction: row; height: clamp(340px, 38vw, 440px); }

.cs-tile__media {
  aspect-ratio: 16/10;
  background: #000;
  overflow: hidden;
  position: relative;
}
.cs-tile--feature .cs-tile__media { flex: 1; aspect-ratio: auto; height: 100%; }

.cs-tile__video,
.cs-tile__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.cs-tile:hover .cs-tile__video,
.cs-tile:hover .cs-tile__image { transform: scale(1.045); }

/* portrait/square source clips (Rosewood, NUVE) letterbox instead of cropping */
.cs-tile__video--fit { object-fit: contain; }
.cs-tile:hover .cs-tile__video--fit { transform: scale(1); }

.img-placeholder {
  width: 100%; height: 100%;
  min-height: 220px;
  background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #222 10px, #222 20px);
  color: rgba(250,250,250,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 20px;
}

.cs-tile__body { padding: clamp(32px, 4vw, 56px); flex: 1; }
.cs-tile--feature .cs-tile__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.cs-tile__kicker { font-size: 11px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
.cs-tile__kicker::before {
  content: '';
  display: inline-block;
  width: 14px; height: 10px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--accent);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.cs-tile__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.cs-tile__copy { font-size: 15px; font-weight: 300; line-height: 1.55; color: rgba(10,10,10,0.72); max-width: 480px; }

.cs-tile__tag {
  display: inline-block;
  margin-top: 20px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(10,10,10,0.45);
}

/* contractor spotlight */

.spotlight { margin-top: clamp(70px, 10vw, 140px); }

.quote-rail {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  border: 1px solid var(--line);
}

.quote-card {
  border: 1px solid var(--line);
  margin: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #eee;
}
.quote-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%) contrast(1.08) brightness(0.98);
}
.quote-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.quote-card__photo .img-placeholder { font-size: 10px; }

.quote-card blockquote {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(10,10,10,0.8);
  flex: 1;
}

.quote-card blockquote::before {
  content: '';
  display: block;
  width: 40px; height: 30px;
  margin-bottom: 14px;
  background: var(--accent);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;
}

.quote-card figcaption {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* ------------------------------ leader spotlight ------------------------------ */

.leader-spotlight {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  border: 1.5px solid var(--line);
  padding: clamp(32px, 4vw, 48px);
}

.leader-spotlight__photo {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #eee;
}
.leader-spotlight__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%) contrast(1.08) brightness(0.98);
}
.leader-spotlight__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.leader-spotlight__eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.leader-spotlight__name {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 16px;
}

.leader-spotlight__bio {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(10,10,10,0.72);
  max-width: 640px;
}

.spotlight__partners-link {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spotlight__partners-link a:not(.btn) { border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; }
.spotlight__partners-link a:not(.btn):hover { color: var(--accent); }

/* --------------------------------- leader grid -------------------------------- */
/* Case Studies' Industry Leaders section: a 4-column portrait grid (Basic
   Agency's team-page orientation) instead of the homepage's single feature
   + quote-rail — same photos, same tint treatment as quote-card/leader-spotlight
   above for visual consistency. */

.leader-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.leader-grid__item { margin: 0; }

.leader-grid__photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #eee;
}
.leader-grid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%) contrast(1.08) brightness(0.98);
  transition: transform 0.6s var(--ease);
}
.leader-grid__item:hover .leader-grid__photo img { transform: scale(1.045); }
.leader-grid__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.leader-grid__name {
  margin-top: 18px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.leader-grid__item:hover .leader-grid__name { border-color: currentColor; color: var(--accent); }

.leader-grid__title {
  margin-top: 4px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------- departments -------------------------------- */

/* Vertical hover accordion: five rows share a fixed-height column, and the
   hovered/focused/opened one grows via flex while the rest stay narrow —
   same mechanic as a horizontal flex accordion, just turned 90 degrees. */
.dept-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: clamp(560px, 78vh, 820px);
  overflow: hidden;
}

.dept-item {
  flex: 1;
  overflow: hidden;
  transition: flex 0.65s cubic-bezier(0.5, 0, 0.1, 1);
}
.dept-item:hover, .dept-item:focus-visible, .dept-item.is-open { flex: 5; }

.dept-item__media { position: absolute; inset: 0; }
.dept-item__media .img-placeholder { position: absolute; inset: 0; height: 100%; }
.dept-item__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.6s var(--ease);
}
.dept-item:hover .dept-item__media video,
.dept-item:focus-visible .dept-item__media video,
.dept-item.is-open .dept-item__media video { filter: grayscale(0%); }

.dept-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
}

.dept-item__collapsed {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px);
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}
.dept-item:hover .dept-item__collapsed,
.dept-item:focus-visible .dept-item__collapsed,
.dept-item.is-open .dept-item__collapsed { opacity: 0; }

.dept-item__index {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-soft);
}

.dept-item__name {
  font-family: var(--font-display);
  font-weight: 350;
  color: var(--white);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.dept-item__expanded {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  max-width: 640px;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 48px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
}
.dept-item:hover .dept-item__expanded,
.dept-item:focus-visible .dept-item__expanded,
.dept-item.is-open .dept-item__expanded { opacity: 1; transform: translateY(0); }

/* The collapsed name fades to opacity:0 on hover/open so it doesn't
   overlap the description — this repeats it inside the expanded panel
   itself so the row's identity never disappears mid-hover. */
.dept-item__expanded-name {
  font-family: var(--font-display);
  font-weight: 350;
  color: var(--white);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.dept-item__eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}
.dept-item__eyebrow::before {
  content: '';
  flex: none;
  width: 16px; height: 12px;
  margin-right: 8px;
  background: var(--accent-soft);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.dept-item__desc {
  color: rgba(250,250,250,0.85);
}

/* --------------------------- specialties (row layout) -------------------------- */
/* A sticky category rail down the left (bou.com/services-style) paired with a
   full vertical stack of self-contained rows on the right — each row is its
   own anchor target so the rail can scrollspy + jump-link to it. Every row
   carries its own name/eyebrow, description, a compact "included" checklist,
   and a large, always-visible video — no hover/open state hiding anything. */

.sp-layout {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.sp-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-sidebar__label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.sp-sidebar__link {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(10,10,10,0.32);
  transition: color 0.3s var(--ease);
}
.sp-sidebar__link:hover { color: var(--accent); }
.sp-sidebar__link.is-active { color: var(--black); }

.sp-stack { display: flex; flex-direction: column; }

.sp-row {
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.sp-row:last-child { border-bottom: 1px solid var(--line); }

.sp-row__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

.sp-row__index {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  flex: none;
}

.sp-row__eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.sp-row__name {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 28px;
}

.sp-row__body { display: flex; flex-direction: column; gap: 28px; }

.sp-row__desc {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(10,10,10,0.7);
  max-width: 720px;
}

.sp-row__media {
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}
.sp-row__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.sp-row:hover .sp-row__media video { transform: scale(1.035); }

.sp-row__list-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.sp-row__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 32px;
}
.sp-row__list-item {
  padding-top: 16px;
  padding-left: 28px;
  position: relative;
  border-top: 1px solid var(--line);
}
.sp-row__list-item::before {
  content: '';
  position: absolute;
  left: 0; top: 20px;
  width: 18px; height: 13px;
  background: var(--accent);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.sp-row__list-item h3 {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 8px;
}
.sp-row__list-item p {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
}

/* ------------------------ specialties stacked-card scroll (JS-driven) ---------------------- */
/* Purely additive on top of the .sp-row markup/layout above — no wrapper
   elements, no markup changes. js/specialties-scroll.js sets each row's own
   `top` (0, or a negative offset for rows taller than the viewport so they
   finish scrolling past before they lock) and z-index inline, then reads
   scroll position every frame to scale/darken whichever row is in the
   process of being covered by the next one sliding over it. The rows never
   fade — position: sticky + an opaque background (an existing color token,
   not a new one) is what makes the overlap read as a physical stack. */

body.sp-scroll-active .sp-row {
  position: sticky;
  background: var(--white);
  transform-origin: center top;
}

/* Each card's own "header" (index/eyebrow + name) gets a nested sticky so it
   stays pinned to the top of the viewport for the card's whole time on
   screen — including while a taller card is still scrolling its body/media
   past underneath, before the card itself locks. js/specialties-scroll.js
   sets the exact `top` offsets (the second stacks right below the first). */
body.sp-scroll-active .sp-row__top,
body.sp-scroll-active .sp-row__name {
  position: sticky;
  z-index: 2;
  width: 100%;
  background: var(--white);
}

.sp-scroll-progress {
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  bottom: 28px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.sp-scroll-progress.is-visible { opacity: 1; }
.sp-scroll-progress__track { position: relative; width: 64px; height: 2px; background: var(--line); }
.sp-scroll-progress__fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}

/* Mobile fallback: no pinning, just a simple one-time fade+rise per row */
body.sp-scroll-mobile .sp-row {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.sp-scroll-mobile .sp-row.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the sticky stacking itself (it's driven directly by the user's own
     scroll, not an autonomous animation) but drop the scale/darken flourish. */
  body.sp-scroll-active .sp-row { transform: none !important; filter: none !important; }
  body.sp-scroll-mobile .sp-row { transition: opacity 0.01s linear !important; transform: none !important; }
}

@media (max-width: 767px) {
  body.sp-scroll-active .sp-row {
    position: static !important;
    top: auto !important;
    transform: none !important;
    filter: none !important;
  }
  body.sp-scroll-active .sp-row__top,
  body.sp-scroll-active .sp-row__name {
    position: static !important;
    top: auto !important;
  }
  .sp-scroll-progress { display: none; }
}

/* ---------------------------------- packages ---------------------------------- */

.packages { color: var(--white); }
.packages .section-sub { color: rgba(250,250,250,0.62); }

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.package-card {
  position: relative;
  border: 1.5px solid var(--line-invert);
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.package-card:hover { transform: translate(-4px, -4px); border-color: var(--accent-soft); }

.package-card--recommended { border-color: var(--accent-soft); }

.package-card__badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--accent-gradient);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
}

.package-card__name {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  margin-bottom: 10px;
}

.package-card__tagline {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(250,250,250,0.62);
  margin-bottom: 20px;
}

/* Was display:grid, which under CSS Grid's default align-content:normal
   (behaves as stretch) let the implicit rows expand to fill whatever
   height the flex:1 parent gave it — since .package-grid stretches every
   card to match the tallest one, Accelerator/Empire's short 3-item lists
   were stretching into huge gaps between items instead of just leaving
   space at the end. Flexbox doesn't have that failure mode: items keep
   their natural size and any extra height just sits below the list. */
.package-card__list { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.package-card__list li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250,250,250,0.85);
  padding-left: 28px;
  position: relative;
}
.package-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 17px; height: 13px;
  background: var(--accent-soft);
  -webkit-mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-black.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.package-card__list li.is-inherited { color: rgba(250,250,250,0.5); }

.package-card__note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-invert);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250,250,250,0.68);
}

.package-addons { margin-top: 72px; }

.package-addons__label {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 28px;
}

.package-addons__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.package-card__incentive {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--accent-soft);
  margin-bottom: 26px;
}

.package-addon__name {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 10px;
}

.package-addon__desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250,250,250,0.72);
}

.package-proof { margin-top: 72px; }

.package-proof__label {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 28px;
}

.package-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.package-proof__card {
  border: 1px solid var(--line-invert);
  padding: clamp(24px, 3vw, 32px);
}

.package-proof__stat {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 12px;
}

.package-proof__copy {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250,250,250,0.75);
  margin-bottom: 16px;
}

.package-proof__meta {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* --------------------------------- reviews ------------------------------------ */

.testimonial-sources {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
}

.review-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.review-source__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: none;
}
.review-source__icon svg { width: 100%; height: 100%; }
.review-source__name {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: 1.4rem;
  transition: color 0.3s var(--ease);
}
.review-source__name:hover { color: var(--accent); }
.review-source__rating {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(10,10,10,0.5);
}

/* Infinite horizontal marquee: the track holds two back-to-back copies of
   the card set (duplicated in JS) and animates translateX 0 -> -50%, which
   loops seamlessly since both halves are identical. JS continuously scores
   each card by how close its center is to the marquee's center and scales
   it up (bigger shadow too) accordingly, so whichever card is passing
   through the middle reads as "focused" without any discrete step logic. */
/* Fixed, generous height (rather than padding) so the focused card's 1.15x
   scale plus its intensified shadow always has room to breathe within the
   overflow:hidden box — nothing bleeds past the container's own edges, so
   nothing gets clipped despite the horizontal clip being necessary (the
   duplicated track is 2x width and would otherwise widen the whole page). */
.testimonial-marquee {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.testimonial-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testimonialScroll var(--marquee-duration, 30s) linear infinite;
}
.testimonial-track[data-reverse="true"] { animation-name: testimonialScrollReverse; }
/* Only a card itself should pause the scroll — not the surrounding
   container padding/gaps, which is what :hover on .testimonial-marquee
   was matching before. */
.testimonial-track:has(.testimonial-card:hover) { animation-play-state: paused; }

@keyframes testimonialScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes testimonialScrollReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
}

.testimonial-card {
  position: relative;
  flex: 0 0 300px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 20px rgba(10,10,10,0.08);
  transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1), box-shadow 0.8s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: transform;
  overflow: hidden;
}

/* Binary state, not a continuous per-card scale: JS toggles this on
   whichever single card's center is currently within the marquee's
   center zone. Every other card just sits at the resting size above. */
.testimonial-card.is-focused {
  transform: scale(1.15);
  box-shadow: 0 16px 36px rgba(10,10,10,0.2);
  z-index: 2;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -18px; left: 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 100px;
  line-height: 1;
  color: rgba(10,10,10,0.05);
  z-index: 0;
}

.testimonial-card__avatar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: var(--white);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}

.testimonial-card__quote {
  position: relative;
  z-index: 1;
  flex: 1;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(10,10,10,0.75);
  margin-bottom: 16px;
}

.testimonial-card__name {
  position: relative;
  z-index: 1;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.45);
}

/* -------------------------------- final CTA ---------------------------------- */

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.final-cta > * {
  position: relative;
  z-index: 1;
}

.final-cta__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.final-cta .btn--primary { background: var(--white); border-color: var(--white); color: var(--black); }
.final-cta .btn--primary:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ---------------------------------- footer ------------------------------------ */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  padding: clamp(50px, 8vw, 90px) var(--edge) 32px;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.site-footer::after {
  content: '';
  position: absolute;
  right: -4%;
  bottom: -14%;
  width: 34vw;
  max-width: 480px;
  aspect-ratio: 800 / 584;
  background-image: url('../assets/AM_BrandKit_2026/AM%20LOGOS/icon-mark-white.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
  margin-bottom: 40px;
}

.site-footer__logo { height: 44px; width: auto; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
}

.site-footer__label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
  margin-bottom: 14px;
}

.site-footer__col p { font-size: 14px; margin-bottom: 8px; line-height: 1.5; color: rgba(250,250,250,0.8); }
.site-footer__col a:hover { color: var(--accent-soft); }
.site-footer__address { margin-bottom: 18px; }
.site-footer__address strong { color: var(--white); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(250,250,250,0.5);
}

/* ================================ responsive ================================= */

@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .btn--nav { display: none; }
  .burger { display: flex; }

  .partner-badges { grid-template-columns: 1fr; }

  .about__grid { grid-template-columns: 1fr; }
  .quote-rail { grid-template-columns: repeat(2, 1fr); }
  .cs-tile--feature { flex-direction: column; height: auto; }
  .cs-tile--feature .cs-tile__media { height: 240px; }
  .impact-stats { grid-template-columns: 1fr; }

  .industry-rail { flex-direction: column; min-height: auto; }
  .industry-card { flex: none !important; }
  .industry-card__title { margin-top: 0; }

  .differentiators { grid-template-columns: repeat(2, 1fr); }
  .leader-spotlight { grid-template-columns: 1fr; }
  .leader-spotlight__photo { max-width: 200px; }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .about-metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .package-grid { grid-template-columns: 1fr; }
  .package-addons__grid { grid-template-columns: 1fr; }
  .package-proof__grid { grid-template-columns: 1fr; }

  /* No hover on touch, so the accordion just becomes a stack of cards with
     everything already expanded instead of an interaction nobody can reach. */
  .dept-stack { height: auto; gap: 16px; }
  .dept-item { flex: none !important; display: flex; flex-direction: column; }
  .dept-item::after { content: none; }
  .dept-item__media { position: relative; height: 200px; }
  .dept-item__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.55) 100%);
  }
  .dept-item__collapsed {
    position: relative;
    opacity: 1;
    background: var(--black);
    padding: 20px clamp(20px, 4vw, 32px);
  }
  .dept-item__expanded {
    position: relative;
    opacity: 1;
    transform: none;
    max-width: none;
    background: var(--black);
    padding: 0 clamp(20px, 4vw, 32px) 28px;
  }

  .sp-layout { grid-template-columns: 1fr; }
  .sp-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .sp-sidebar__label { display: none; }
}

@media (max-width: 640px) {
  .testimonial-card { flex: 0 0 240px; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .quote-rail { grid-template-columns: 1fr; }
  .leader-grid { grid-template-columns: 1fr; }
  .about-metrics__grid { grid-template-columns: 1fr; }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .differentiators { grid-template-columns: 1fr; }
  .sp-row__list { grid-template-columns: 1fr; }

  /* .hero--centered's headline is deliberately forced onto one line via
     white-space:nowrap, but its font-size clamp bottoms out at 1.9rem —
     on phones narrower than ~480px that floor no longer scales down with
     the viewport, so "Revenue First. Always." silently overflows/clips
     since .hero has overflow:hidden. Letting it wrap here keeps the
     one-line treatment everywhere it actually fits. */
  .hero--centered .hero__headline { white-space: normal; }
}

/* ============================================================================
   SUBPAGE TEMPLATE — shared by Industries, Local Services, Specialties,
   Case Studies, About, and Contact
   ============================================================================ */

/* First section of a subpage that has no full-height hero — just enough
   top padding to clear the fixed header. */
.subpage-intro { padding-top: calc(var(--nav-h) + 64px); }

.client-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(40px, 6vw, 72px) 0;
}
.client-reels__item {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(250, 250, 250, 0.04);
}
.client-reels__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .client-reels {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------- offices grid ------------------------------ */

.offices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.office-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 40px);
}
.office-card__name {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  margin-bottom: 14px;
}
.office-card__address { color: rgba(10,10,10,0.68); line-height: 1.65; }
.office-card__address strong { color: var(--black); display: block; margin-bottom: 6px; }

/* ------------------------------- contact page ------------------------------ */

.final-cta__actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.final-cta__meta { font-size: 14px; color: rgba(250,250,250,0.55); }

.contact-page__follow-label { margin-top: 56px; }
.social-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.social-links a {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
}
.social-links a:hover { color: var(--accent); }

/* ------------------------------ local services nav dropdown ---------------- */

.primary-nav__item { position: relative; display: flex; align-items: center; }

.primary-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  padding-top: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.primary-nav__item:hover .primary-nav__dropdown,
.primary-nav__item:focus-within .primary-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.primary-nav__dropdown-inner {
  display: flex;
  flex-direction: column;
  min-width: 170px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(10,10,10,0.16);
}
.primary-nav__dropdown-inner a {
  padding: 13px 18px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
}
.primary-nav__dropdown-inner a:hover,
.primary-nav__dropdown-inner a[aria-current] { background: var(--off-white); color: var(--accent); }


/* --------------------------------- FAQ ------------------------------------- */

.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 820px; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ''; }

.faq-item__icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--black);
  transition: transform 0.3s var(--ease);
}
.faq-item__icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-item__icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

.faq-item__a {
  padding: 0 4px 26px;
  max-width: 640px;
  color: rgba(10,10,10,0.68);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

/* ------------------------------ industry hero ------------------------------ */

.industry-hero__eyebrow { margin-bottom: 22px; }

.industry-hero__sub {
  max-width: 620px;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250,250,250,0.8);
}

@media (max-width: 1024px) {
  .primary-nav__dropdown { display: none; }
  .offices-grid { grid-template-columns: 1fr; }
}