/*
 * Equals Agency — Refresh styles
 * ADDITIVE ONLY. No existing class in styles.css is overridden here.
 * All colour / type / spacing values come from the design-system token files.
 */

/* ── Design-system tokens ───────────────────────────────────────────────── */
:root {
  /* Colours */
  --indigo-900: #1b1a3f;
  --indigo-700: #29285f;
  --indigo-500: #4a4980;
  --indigo-300: #9493af;
  --navy-950:   #03031b;
  --navy-900:   #040426;
  --navy-overlay: rgba(4,4,38,0.30);
  --amber-500: #ffa101;
  --gold-400:  #f7b01a;
  --amber-600: #e08e00;
  --white:   #ffffff;
  --paper:   #f3f3f3;
  --paper-2: #f8f8f8;
  --line-100: #f4f4f4;
  --line-200: #e1e1e1;
  --stone-200: #d9d9da;
  --ink:     #000000;

  /* Semantic */
  --surface-page:    var(--white);
  --surface-dark:    var(--navy-900);
  --surface-darkest: var(--navy-950);
  --surface-field:   var(--paper);
  --surface-muted:   var(--paper-2);
  --text-strong:     var(--indigo-700);
  --text-body:       var(--indigo-700);
  --text-muted:      var(--indigo-300);
  --text-on-dark:    #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.74);
  --accent:          var(--amber-500);
  --accent-hover:    var(--amber-600);
  --line-soft:       var(--line-100);
  --line:            var(--line-200);
  --line-on-dark:    rgba(255,255,255,0.16);
  --overlay-amber:   rgba(255,161,1,0.80);
  --overlay-navy:    var(--navy-overlay);
  --overlay-dark:    rgba(28,28,28,0.40);
  --focus-ring:      0 0 0 3px rgba(255,161,1,0.45);

  /* Typography */
  --font-sans:    'Sofia Pro', 'Poppins', system-ui, -apple-system, sans-serif;
  --font-display: 'Sofia Pro', 'Poppins', system-ui, sans-serif;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;
  --fs-hero:   clamp(2.75rem, 6vw, 4.375rem);
  --fs-h1:     clamp(2.25rem, 4.5vw, 3.125rem);
  --fs-h2:     clamp(1.875rem, 3.4vw, 2.625rem);
  --fs-h3:     clamp(1.5rem, 2.4vw, 1.8125rem);
  --fs-h4:     1.375rem;
  --fs-lead:   1.375rem;
  --fs-body:   1.25rem;
  --fs-small:  1.125rem;
  --fs-label:  0.95rem;
  --fs-micro:  0.8125rem;
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-body:   1.6;
  --ls-button: 0.09em;
  --ls-label:  0.16em;
  --ls-wide:   0.4em;

  /* Spacing & layout */
  --container:  1170px;
  --gutter:     clamp(1.5rem, 4vw, 3.125rem);
  --section-y:  clamp(2rem, 4vw, 3.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape & motion */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-card: var(--radius-md);
  /* Tall media tiles: plain rounded rectangle. Replaced the old "church
     window" arch (100px 100px 0 0) sitewide 2026-08-02 at client request.
     --radius-arch is kept as an alias so any stray reference still resolves. */
  --radius-tile:  24px;
  --radius-tile-sm: 18px;
  --radius-arch: var(--radius-tile);
  --radius-blob: 100% 100% 10px 100%;
  --shadow-card: 0 18px 48px -18px rgba(4,4,38,0.35);
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --ease: ease;
  --z-header: 1000;
}

/* 404 page */
.eq-404 { position:relative;display:grid;min-height:calc(100vh - 53px);overflow:hidden;color:var(--text-on-dark);background:radial-gradient(circle at 11% 83%,rgba(255,161,1,.11),transparent 26rem),var(--navy-900); }
.eq-404::before { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;content:"";pointer-events:none;mask-image:linear-gradient(90deg,#000,transparent 72%); }
.eq-404__inner { position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,.92fr) minmax(420px,1.08fr);align-items:center;gap:clamp(3rem,7vw,8rem);width:min(100%,1440px);margin:0 auto;padding:clamp(5rem,9vw,9rem) var(--gutter); }
.eq-404__number { display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-display);font-size:clamp(8rem,18vw,17rem);font-weight:var(--fw-black);letter-spacing:-.095em;line-height:.72; }
.eq-404__zero { width:.57em;height:.75em;margin:0 .04em 0 .08em;border:.09em solid var(--amber-500);border-radius:50%;transform:rotate(12deg); }
.eq-404__content { max-width:660px; }
.eq-404__eyebrow { margin:0 0 1.5rem;color:var(--amber-500);font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase; }
.eq-404 h1 { margin:0;color:var(--white);font-family:var(--font-display);font-size:clamp(3.2rem,6.2vw,6.25rem);font-weight:var(--fw-bold);letter-spacing:-.045em;line-height:.92; }
.eq-404 h1 em { color:var(--amber-500);font-style:normal; }
.eq-404__intro { max-width:600px;margin:2rem 0 0;color:var(--text-on-dark-muted);font-family:var(--font-sans);font-size:clamp(1.05rem,1.45vw,1.25rem);font-weight:var(--fw-light);line-height:1.65; }
.eq-404__actions { display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem; }
.eq-404__search { max-width:520px;margin-top:2.5rem; }
.eq-404__search label { display:block;margin-bottom:.7rem;color:rgba(255,255,255,.62);font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase; }
.eq-404__search-row { display:flex;border-bottom:1px solid rgba(255,255,255,.35); }
.eq-404__search input { min-width:0;flex:1;padding:.85rem 0;border:0;outline:0;color:var(--white);background:transparent;font-family:var(--font-sans);font-size:1rem; }
.eq-404__search input::placeholder { color:rgba(255,255,255,.42); }
.eq-404__search-row:focus-within { border-color:var(--amber-500);box-shadow:0 2px 0 var(--amber-500); }
.eq-404__search button { width:54px;border:0;color:var(--amber-500);background:transparent;font-size:1.8rem;transition:color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease); }
.eq-404__search button:hover,.eq-404__search button:focus-visible { color:var(--white);transform:translateX(4px); }
.eq-404__accent { position:absolute;top:clamp(2rem,6vw,5rem);right:clamp(1.5rem,5vw,5rem);display:grid;gap:7px; }
.eq-404__accent span { display:block;width:58px;height:7px;background:var(--amber-500); }
@media (max-width:960px) {
  .eq-404__inner { grid-template-columns:1fr;gap:3.5rem;padding-top:7rem; }
  .eq-404__number { justify-content:flex-start;font-size:clamp(8rem,30vw,14rem); }
  .eq-404__content { max-width:720px; }
}
@media (max-width:620px) {
  .eq-404__inner { gap:2.5rem;padding:5.5rem 22px 4.5rem; }
  .eq-404__number { font-size:clamp(7rem,38vw,10rem); }
  .eq-404 h1 { font-size:clamp(2.8rem,14vw,4.25rem); }
  .eq-404__actions { align-items:stretch;flex-direction:column; }
  .eq-404__actions .eq-btn { width:100%;padding-right:18px;padding-left:18px; }
  .eq-404__accent span { width:42px;height:5px; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   Theme has no get_header()/wp_head core stylesheet on the front
   page, so WP core's .screen-reader-text rule (used in
   inc/template-tags.php and template-parts/block-testimonials.php)
   is otherwise undefined and renders as visible text.
   ═══════════════════════════════════════════════════════════════ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ═══════════════════════════════════════════════════════════════
   SITE HEADER (eq-site-header)
   ═══════════════════════════════════════════════════════════════ */
.eq-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-200);
  transition: box-shadow var(--dur-base) var(--ease);
  padding: 0; /* cancel styles.css: header { padding: 40px 50px 80px } */
}
.eq-site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(4,4,38,0.12);
}
/* Keep sticky nav below the WP admin bar when logged in */
.admin-bar .eq-site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .eq-site-header { top: 46px; }
}
.eq-site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: 52px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.eq-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.eq-logo__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eq-logo__bars span {
  display: block;
  width: 34px;
  height: 7px;
  background: var(--amber-500);
}
.eq-logo__wordmark {
  display: block;
  width: 160px;
  height: 28px;
  background: url('../images/logo-black.png') no-repeat left center;
  background-size: contain;
}

/* Nav */
.eq-site-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eq-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eq-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--indigo-700);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.eq-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--amber-500);
  transition: width var(--dur-base) var(--ease);
}
.eq-navlink:hover,
.eq-navlink:focus { color: var(--amber-500); }
.eq-navlink:hover::after,
.eq-navlink:focus::after { width: 100%; }
.eq-navlink.is-active { color: var(--amber-500); }
.eq-navlink.is-active::after { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   NAV — SERVICES 3-LEVEL DROPDOWN (hover mega-menu)
   ═══════════════════════════════════════════════════════════════ */
.eq-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.eq-navlink--caret {
  gap: 6px;
}
.eq-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
  margin-top: -3px;
}
.eq-nav-item--dropdown:hover .eq-caret,
.eq-nav-item--dropdown:focus-within .eq-caret {
  transform: rotate(225deg);
  margin-top: 3px;
}

.eq-mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 24px 48px -16px rgba(4,4,38,0.22), 0 2px 8px rgba(4,4,38,0.06);
  border-top: 2px solid var(--amber-500);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
  transition-delay: 50ms;
  padding: 10px;
  z-index: 60;
}
.eq-nav-item--dropdown:hover > .eq-mega,
.eq-nav-item--dropdown:focus-within > .eq-mega,
.eq-mega:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.eq-nav-item--dropdown:hover > .eq-mega,
.eq-nav-item--dropdown:focus-within > .eq-mega {
  transition-delay: 150ms;
}

.eq-mega__row {
  position: relative;
}
.eq-mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--indigo-700);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.eq-mega__link:hover,
.eq-mega__row:hover > .eq-mega__link,
.eq-mega__row:focus-within > .eq-mega__link {
  background: var(--paper);
  color: var(--amber-600);
}
.eq-subcaret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--indigo-300);
  border-bottom: 1.5px solid var(--indigo-300);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.eq-submega {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 260px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -16px rgba(4,4,38,0.22), 0 2px 8px rgba(4,4,38,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  transition-delay: 50ms;
  padding: 10px;
  margin-left: 6px;
  z-index: 61;
}
.eq-mega__row:hover > .eq-submega,
.eq-mega__row:focus-within > .eq-submega {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 120ms;
}
.eq-submega__link {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--indigo-300);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.86rem;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.eq-submega__link:hover { background: var(--paper); color: var(--amber-600); }

/* Social icon squares */
.eq-soc-list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eq-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-200);
  border-radius: 4px;
  color: var(--indigo-700);
  text-decoration: none;
  font-size: 12px;
  transition: all var(--dur-base) var(--ease);
}
.eq-soc:hover,
.eq-soc:focus {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: #fff;
}

/* Mobile hamburger */
.eq-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-left: 8px;
}
.eq-hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--indigo-700);
  transition: all var(--dur-base) var(--ease);
}

/* Mobile menu drawer — accordion, same real menu/depth as the desktop mega-menu */
.eq-mobile-menu {
  display: none;
  background: #fff;
  border-top: 1px solid var(--line-200);
  padding: 8px var(--gutter) 28px;
  max-height: calc(100vh - 53px);
  overflow-y: auto;
}
.eq-mobile-menu.is-open { display: block; }
body.eq-menu-open { overflow: hidden; }
.eq-mnav-list,
.eq-mnav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eq-mnav-item { border-bottom: 1px solid var(--line-100); }
.eq-mnav-list > .eq-mnav-item:last-child { border-bottom: none; }
.eq-mnav-row {
  display: flex;
  align-items: center;
}
.eq-mnav-link {
  display: block;
  flex: 1;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--indigo-700);
  text-decoration: none;
}
.eq-mnav-link:hover,
.eq-mnav-link.is-active { color: var(--amber-500); }

/* Toggle button (chevron) — separate hit target from the link, so tapping
   the link still navigates while tapping the chevron expands/collapses. */
.eq-mnav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.eq-mnav-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--indigo-700);
  border-bottom: 1.5px solid var(--indigo-700);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
}
.eq-mnav-item.is-open > .eq-mnav-row .eq-mnav-chevron {
  transform: rotate(-135deg);
}

/* Nested levels: collapsed by default, indented, progressively lighter */
.eq-mnav-sub {
  display: none;
  padding-left: 16px;
}
.eq-mnav-item.is-open > .eq-mnav-sub { display: block; }
.eq-mnav-sub .eq-mnav-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.eq-mnav-sub .eq-mnav-sub .eq-mnav-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--indigo-300);
}
.eq-mnav-sub .eq-mnav-item { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   SHARED DESIGN-SYSTEM UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.eq-on-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.eq-on-dark h1, .eq-on-dark h2, .eq-on-dark h3,
.eq-on-dark h4, .eq-on-dark p { color: var(--text-on-dark); }

/* "=" bars beside heading */
.eq-head-eq {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.eq-head-eq > :first-child { margin: 0; }
.eq-eqbars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.eq-eqbars span {
  display: block;
  width: 42px;
  height: 8px;
  background: var(--amber-500);
}

/* Statement paragraph with amber rule below */
.eq-statement {
  display: block;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--amber-500);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--indigo-300);
}
.eq-statement strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h4);
  color: var(--indigo-700);
  margin-bottom: 8px;
}

/* "Find out more →" style link */
.eq-textlink {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--indigo-700);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--amber-500);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.eq-textlink:hover { color: var(--amber-500); }
/* On dark backgrounds: amber at rest, white on hover */
.eq-on-dark .eq-textlink,
.hp-about .eq-textlink,
.hp-work .eq-textlink,
.hp-sus .eq-textlink { color: var(--amber-500); }
.eq-on-dark .eq-textlink:hover,
.hp-about .eq-textlink:hover,
.hp-work .eq-textlink:hover,
.hp-sus .eq-textlink:hover { color: #fff; }

/* Eyebrow label — block so it stacks above a following .eq-head-eq (inline-flex) instead of sitting beside it */
.eq-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amber-500);
  margin-bottom: 14px;
}

/* Pills */
.eq-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--amber-500);
  padding: 7px 13px;
  border-radius: 999px;
}
.eq-pill-out {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo-700);
  border: 1.5px solid var(--line);
  padding: 7px 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 300ms var(--ease);
}
.eq-pill-out:hover {
  background: var(--indigo-700);
  color: #fff;
  border-color: var(--indigo-700);
}

/* Buttons */
.eq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 0;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.eq-btn--primary {
  background: var(--amber-500);
  color: #fff;
  border-color: var(--amber-500);
}
.eq-btn--primary:hover,
.eq-btn--primary:focus {
  background: var(--indigo-700);
  border-color: var(--indigo-700);
  color: #fff;
}
.eq-btn--outline-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.eq-btn--outline-dark:hover,
.eq-btn--outline-dark:focus {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}
.eq-btn--outline-light {
  background: transparent;
  color: var(--indigo-700);
  border-color: var(--indigo-700);
}
.eq-btn--outline-light:hover,
.eq-btn--outline-light:focus {
  background: var(--indigo-700);
  color: #fff;
}
.eq-btn--lg { padding: 18px 36px; font-size: var(--fs-body); }
.eq-btn--sm { padding: 10px 20px; font-size: var(--fs-label); }

/* ═══════════════════════════════════════════════════════════════
   SECTION WRAPPER HELPERS
   ═══════════════════════════════════════════════════════════════ */
.eq-section { padding: var(--section-y) 0; }
.eq-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — HERO
   ═══════════════════════════════════════════════════════════════ */
.hp-hero {
  position: relative;
  height: 82vh;
  min-height: 560px;
  background: var(--navy-900);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0; /* cancel styles.css: section { padding-top: 200px } */
  justify-content: center;
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
/* Hero crossfade slider.
   Every slide is stacked in the same box and only .is-active is opaque.
   Slide 1 is rendered with .is-active server-side, so the hero still
   paints correctly with one slide, or with JS disabled/failed. */
.hp-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1100ms var(--ease);
}
.hp-hero__slide.is-active { opacity: 1; }
.hp-hero__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Neutral black rather than the old navy tint — the client asked for
     black over dark blue to sit with the new logo. Same alphas. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.28) 40%,
    rgba(0,0,0,0.65) 100%);
}
.hp-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.hp-hero__kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin: 0 0 18px;
}
.hp-hero__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(4.5rem, 16vw, 12rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.hp-hero__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.88);
  max-width: 54ch;
  margin: 22px auto 32px;
}
.hp-hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Scroll bar divider beneath hero */
.hp-scroll {
  background: #fff;
  border-bottom: 1px solid var(--line-100);
}
.hp-scroll__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.hp-scroll b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo-700);
  text-align: center;
  line-height: 1.8;
}
.hp-scroll b span { white-space: nowrap; }
.hp-scroll__bars {
  display: flex;
  gap: 5px;
}
.hp-scroll__bars i {
  display: block;
  width: 16px;
  height: 4px;
  background: var(--amber-500);
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — ABOUT (navy)
   ═══════════════════════════════════════════════════════════════ */
.hp-about {
  background: var(--navy-900);
  padding: var(--section-y) 0;
}
.hp-about__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.hp-about__inner--no-clients {
  grid-template-columns: minmax(0, 760px);
}
.hp-about__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, #fff);
  margin: 0;
}
.hp-about__statements {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 28px;
}
.hp-about__statement,
.hp-about__statements p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, #fff);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--amber-500);
}
.hp-about__cta { margin-top: 8px; }

/* Client logo wall
   ────────────────────────────────────────────────────────────────
   auto-fill/minmax rather than a fixed column count: the repeater is
   unlimited, so the wall flows onto as many rows as it needs and the
   column count falls out of the available width. No breakpoint has to
   know how many logos there are. The 1px gap over a tinted background
   is what draws the hairline grid — cells paint their own surface. */
.hp-about__client-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sec-muted, rgba(255,255,255,0.45));
  margin-bottom: 22px;
  display: block;
}
/* Grid lines come from the CELLS, not from a 1px gap over a coloured wall.
 * The old approach painted the wall in the line colour and let a 1px gap show
 * through — which also meant any EMPTY cell in the final row showed as a solid
 * grey block. Bordering the cells instead leaves empty grid areas genuinely
 * empty, so they take the section background and disappear. */
.hp-about__client-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sec-line, rgba(255,255,255,0.12));
  border-left: 1px solid var(--sec-line, rgba(255,255,255,0.12));
}
.hp-about__client-cell {
  background: var(--sec-card, var(--navy-900));
  border-right: 1px solid var(--sec-line, rgba(255,255,255,0.12));
  border-bottom: 1px solid var(--sec-line, rgba(255,255,255,0.12));
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
}
.hp-about__client-cell img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Monochrome treatment keeps a mixed bag of client logos looking like
     one wall; flips to white-out on a black section. */
  filter: var(--sec-logo-filter, brightness(0) invert(1));
  opacity: var(--sec-logo-opacity, 0.75);
  transition: opacity var(--dur-base) var(--ease);
}
.hp-about__client-cell:hover img { opacity: 1; }
.hp-about__client-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-align: center;
  color: var(--sec-body, rgba(255,255,255,0.75));
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — SERVICES (white)
   ═══════════════════════════════════════════════════════════════ */
.hp-services {
  padding: var(--section-y) 0;
  background: var(--white);
}
.hp-services__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.hp-services__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, var(--indigo-700));
  margin: 0 0 16px;
}
.hp-services__intro {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
  max-width: 60ch;
  margin: 0 auto;
}
.hp-services__cta { margin-top: 48px; }

/* Arch-top service card grid — flexbox, not CSS grid: with heterogeneous
   card heights (tall/short alternating), flex's align-items:flex-end
   bottom-aligns every item's own box within the shared flex line
   unambiguously; each card gets an explicit height (not min-height) so
   there's no implicit-row-track-sizing step for a browser to get wrong. */
.eq-svc-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-top: 36px;
}
.eq-svc {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--navy-900);
  flex: 1 1 calc((100% - 5 * 14px) / 6);
  height: 260px;
}
.eq-svc--tall { height: 360px; }
.eq-svc__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.38);
  transition: background var(--dur-base) var(--ease);
}
.eq-svc:hover .eq-svc__scrim { background: rgba(0,0,0,0.16); }
.eq-svc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eq-svc__lbl {
  position: absolute;
  left: 52px;
  bottom: 20px;
  z-index: 2;
  max-height: calc(100% - 40px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.eq-svc__num {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--amber-500);
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — OUR WORK (navy)
   ═══════════════════════════════════════════════════════════════ */
.hp-work {
  background: var(--navy-900);
  padding: var(--section-y) 0;
}
.hp-work__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hp-work__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hp-work__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, #fff);
  margin: 0 0 12px;
}
.hp-work__intro {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, rgba(255,255,255,0.82));
  margin: 0;
  max-width: 46ch;
}
.hp-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Work card — dark */
.eq-wcard {
  display: block;
  background: var(--sec-card, var(--navy-950));
  border: 1px solid var(--sec-card-line, rgba(255,255,255,0.10));
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.eq-wcard:hover {
  transform: translateY(-6px);
  border-color: var(--amber-500);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7);
}
.eq-wcard__ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sec-card, var(--navy-900));
  overflow: hidden;
}
.eq-wcard__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eq-wcard__body { padding: 22px 22px 24px; }
.eq-wcard__meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sec-muted, rgba(255,255,255,0.45));
  margin-bottom: 8px;
}
.eq-wcard__title {
  color: var(--sec-fg, #fff);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.eq-wcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-500);
  transition: gap 300ms var(--ease);
}
.eq-wcard:hover .eq-wcard__more { gap: 14px; }
.eq-wcard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

/* Light variant */
.eq-wcard--light {
  background: #fff;
  border-color: var(--line-200);
}
.eq-wcard--light:hover {
  box-shadow: 0 26px 50px -26px rgba(4,4,38,0.4);
}
.eq-wcard--light .eq-wcard__meta { color: var(--indigo-300); }
.eq-wcard--light .eq-wcard__title { color: var(--indigo-700); }
.eq-wcard--light .eq-wcard__more { color: var(--amber-600); }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — INSIGHTS (white)
   ═══════════════════════════════════════════════════════════════ */
.hp-insights {
  background: var(--white);
  padding: var(--section-y) 0;
}
.hp-insights__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hp-insights__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.hp-insights__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, var(--indigo-700));
  margin: 0 0 12px;
}
.hp-insights__intro {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--indigo-700);
  margin: 0;
  max-width: 50ch;
}
.hp-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Article / insight card */
.eq-acard {
  display: flex;
  flex-direction: column;
  background: var(--sec-card, #fff);
  border: 1px solid var(--sec-card-line, var(--line-200));
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.eq-acard:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -26px rgba(4,4,38,0.4);
  border-color: var(--amber-500);
}
.eq-acard__ph {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.eq-acard__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eq-acard__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.eq-acard__meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eq-acard__meta b { color: var(--amber-600); }
.eq-acard__meta span { color: var(--indigo-300); }
.eq-acard__title {
  color: var(--indigo-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
}
.eq-acard__excerpt {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--indigo-700);
  margin: 0;
}
.eq-acard__more {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-600);
  transition: gap 300ms var(--ease);
}
.eq-acard:hover .eq-acard__more { gap: 14px; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — SUSTAINABLE (navy)
   ═══════════════════════════════════════════════════════════════ */
.hp-sus {
  background: var(--navy-900);
  padding: var(--section-y) 0;
  overflow: hidden;
}
.hp-sus__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hp-sus__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, #fff);
  margin: 0 0 16px;
}
.hp-sus__intro {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, rgba(255,255,255,0.82));
  margin: 0 0 24px;
  max-width: 50ch;
}
/* Numbered list (current design) */
.hp-sus__list {
  list-style: none;
  margin: 28px 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hp-sus__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sec-line, rgba(255,255,255,0.10));
}
.hp-sus__item:first-child { padding-top: 0; }
.hp-sus__item:last-child  { border-bottom: none; padding-bottom: 0; }
.hp-sus__item-num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--amber-500);
  padding-top: 4px;
}
.hp-sus__item-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  color: var(--sec-fg, #fff);
  margin: 0 0 6px;
  line-height: 1.2;
}
.hp-sus__item-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sec-muted, rgba(255,255,255,0.50));
  margin: 0;
}

/* Legacy bullet style (kept for safety) */
.hp-sus__bullets {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-sus__bullet {
  display: flex;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, #fff);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--amber-500);
}
.hp-sus__bullet::before {
  content: "=";
  color: var(--amber-500);
  font-weight: var(--fw-black);
  flex-shrink: 0;
  font-size: 1.25em;
}
/* Tall media composition (single tall photo, amber stat card) */
.hp-sus__media {
  position: relative;
  height: 560px;
}
.hp-sus__fig {
  position: absolute;
  inset: 0 8%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--navy-950);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
}
.hp-sus__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.hp-sus__fig:hover img { transform: scale(1.05); }
.hp-sus__card {
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 3;
  width: 190px;
  background: var(--amber-500);
  color: var(--navy-950);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5);
}
.hp-sus__card .eq-eqbars span { background: var(--navy-950); }
.hp-sus__card-num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.hp-sus__card-lbl {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 0.875rem;
  line-height: 1.35;
  margin-top: 8px;
}

/* Legacy image stack (kept for safety) */
.hp-sus__imgs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Parallelogram-clipped images */
.eq-skew {
  overflow: hidden;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}
.eq-skew img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — CONTACT (paper-2)
   ═══════════════════════════════════════════════════════════════ */
.hp-contact {
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 7.5rem) 0 var(--section-y);
}
.hp-contact__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.hp-contact__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
  margin: 0 0 14px;
}
.hp-contact__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-style: normal;
  margin-top: 28px;
}

/* Contact detail rows */
.eq-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.eq-detail__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.eq-detail__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--indigo-700);
  margin-bottom: 4px;
}
.eq-detail__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--indigo-300);
  margin: 0;
  text-decoration: none;
  display: block;
}
a.eq-detail__value:hover { color: var(--amber-500); }

/* Map blob */
.eq-map {
  aspect-ratio: 1;
  border-radius: var(--radius-blob);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-200);
  min-height: 300px;
}
.eq-map iframe,
.eq-map > div {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS BLOCK
   ═══════════════════════════════════════════════════════════════ */
.eq-testimonials {
  background: var(--sec-bg, var(--paper-2));
  padding: var(--section-y) 0;
}
.eq-testimonials--single {
  background: var(--sec-bg, var(--stone-200));
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.eq-testimonials--single .eq-testimonials__inner { width: 100%; }
.eq-testimonials__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.eq-testimonials__header { margin-bottom: 52px; }
.eq-testimonials__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
  margin: 0;
}

/* Single featured quote */
.eq-tquote-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5.5rem) 0;
  text-align: center;
}
.eq-tquote-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--amber-500);
  margin-bottom: 20px;
}
.eq-tquote-stars {
  color: var(--amber-500);
  letter-spacing: 3px;
  font-size: 1rem;
  margin-bottom: 24px;
}
.eq-tquote {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--sec-fg, var(--indigo-700));
  margin: 0;
}
.eq-tquote em {
  color: var(--amber-500);
  font-style: normal;
}
.eq-tauthor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  justify-content: center;
}
.eq-tauthor__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--amber-500);
  flex-shrink: 0;
}
.eq-tauthor__initials {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  flex-shrink: 0;
}
.eq-tauthor__name {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  color: var(--sec-fg, var(--indigo-700));
  margin: 0;
  text-align: left;
}
.eq-tauthor__role {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--sec-muted, var(--indigo-300));
  margin: 2px 0 0;
  text-align: left;
}

/* Grid of testimonial cards */
.eq-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.eq-tcard {
  background: var(--sec-card, #fff);
  border: 1px solid var(--sec-card-line, var(--line-200));
  border-radius: var(--radius-md);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.eq-tcard__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 2.5rem;
  line-height: 0.7;
  color: var(--amber-500);
}
.eq-tcard__quote {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--indigo-700);
  flex: 1;
  margin: 0;
}
.eq-tcard__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line-100);
}
.eq-tcard__author-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--amber-500);
  flex-shrink: 0;
}
.eq-tcard__author-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  color: var(--indigo-700);
  margin: 0;
}
.eq-tcard__author-role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-300);
  margin: 3px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   CTA CALLOUT (above footer)
   ═══════════════════════════════════════════════════════════════ */
.eq-callout {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
  padding: var(--section-y) 0;
}
.eq-callout--navy  { background: var(--navy-900); }
.eq-callout--black { background: var(--ink); }
.eq-callout--grey  { background: var(--paper); }
.eq-callout--white { background: var(--white); }
.eq-callout--grey .eq-callout__title,
.eq-callout--white .eq-callout__title { color: var(--ink); }
.eq-callout--grey .eq-callout__sub,
.eq-callout--white .eq-callout__sub { color: var(--text-body); }
.eq-callout__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.eq-callout__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amber-500);
  margin-bottom: 16px;
}
.eq-callout__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
}
.eq-callout__title em {
  color: var(--amber-500);
  font-style: normal;
}
.eq-callout__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.82);
  max-width: 52ch;
  margin: 0 auto 34px;
}
.eq-callout__ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER (navy-950)
   ═══════════════════════════════════════════════════════════════ */
.eq-footer {
  background: var(--ink);
  color: #fff;
}
.eq-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter) 32px;
}
.eq-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.eq-footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  text-decoration: none;
}
.eq-footer__logo img { height: 26px; width: auto; }
.eq-footer__tagline {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.6);
  margin: 0 0 22px;
  max-width: 32ch;
}
.eq-footer__soc-list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eq-foot-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: all 350ms var(--ease);
}
.eq-foot-soc:hover,
.eq-foot-soc:focus {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: #fff;
}
.eq-foot-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}
/* Company column is driven by wp_nav_menu(), which always wraps each item
   in a bare <li> regardless of items_wrap — reset it like a plain link list. */
.eq-foot-col li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eq-foot-link {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1rem;
  color: rgba(255,255,255,0.60);
  padding: 5px 0;
  text-decoration: none;
  transition: color 300ms var(--ease);
}
.eq-foot-link:hover,
.eq-foot-link:focus { color: var(--amber-500); }
.eq-foot-link--accent { color: var(--amber-500); }
.eq-foot-link--strong { color: rgba(255,255,255,0.88); font-weight: 600; }
.eq-footer__col-address {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.6);
  margin: 0 0 12px;
  font-style: normal;
}
.eq-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.eq-footer__copy {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.eq-footer__legal {
  display: flex;
  gap: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — BREADCRUMB
   ═══════════════════════════════════════════════════════════════ */
.eq-crumb {
  background: var(--white);
  border-bottom: 1px solid var(--line-100);
}
.eq-crumb__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.eq-crumb a, .eq-crumb span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo-300);
  text-decoration: none;
}
.eq-crumb a:hover { color: var(--amber-500); }
.eq-crumb b { color: var(--indigo-700); }
.eq-crumb__sep { color: var(--line-200); }

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — STICKY ANCHOR NAV
   ═══════════════════════════════════════════════════════════════ */
.eq-jump {
  position: sticky;
  top: 53px; /* matches .eq-site-header's real rendered height (52px inner + 1px border) */
  z-index: 900;
  background: var(--navy-900);
}
.admin-bar .eq-jump { top: 85px; }
@media screen and (max-width: 782px) {
  .admin-bar .eq-jump { top: 99px; }
}
.eq-jump__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.eq-jump__links {
  display: flex;
  min-width: 0;
  gap: 24px;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.eq-jump__links::-webkit-scrollbar { display: none; }
.eq-jump__links a {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  padding: 6px 0;
  text-decoration: none;
  transition: color 300ms var(--ease);
}
.eq-jump__links a:hover { color: var(--amber-500); }

/* ── Jump nav on phones ─────────────────────────────────────────────
 * Six links could not fit beside the CTA at 360px, so the row clipped and fell
 * back to a horizontal scroll whose scrollbar is deliberately hidden — no
 * affordance, effectively broken. Below 768px only the conversion links remain
 * (Why Equals, FAQs), "Why Equals" shortens to "Why us" to buy ~25px, and the
 * gap tightens. Desktop is unchanged. */
@media (max-width: 767px) {
  .eq-jump__item--desk { display: none; }
  .eq-jump__links { gap: 16px; }
  .eq-jump__inner { gap: 16px; }
  /* no links survive on this service — don't show a lone button in a sticky bar */
  .eq-jump--no-mobile { display: none; }
  .eq-jump__label-full  { display: none; }
  .eq-jump__label-short { display: inline; }
}
.eq-jump__label-short { display: none; }

/* Keep anchored headings clear of the fixed header and sticky jump nav. */
.eq-jump ~ section[id] { scroll-margin-top: 128px; }
.home section[id] { scroll-margin-top: 72px; }

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════ */
.eq-faq details {
  border-bottom: 1px solid var(--line-200);
}
.eq-faq details:first-child { border-top: 1px solid var(--line-200); }
.eq-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--indigo-700);
  transition: color var(--dur-base) var(--ease);
  user-select: none;
}
.eq-faq summary::-webkit-details-marker { display: none; }
.eq-faq .eq-faq__pm {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  position: relative;
}
.eq-faq .eq-faq__pm::before,
.eq-faq .eq-faq__pm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--amber-500);
  transform: translate(-50%, -50%);
  transition: transform 350ms var(--ease);
}
.eq-faq .eq-faq__pm::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.eq-faq details[open] .eq-faq__pm::after {
  transform: translate(-50%, -50%) rotate(0);
}
.eq-faq details[open] summary { color: var(--amber-600); }
.eq-faq__ans {
  padding: 0 48px 24px 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--indigo-700);
  max-width: 80ch;
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY — FACTS STRIP
   ═══════════════════════════════════════════════════════════════ */
.eq-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-200);
  border: 1px solid var(--line-200);
  box-shadow: 0 30px 60px -30px rgba(4,4,38,0.4);
}
.eq-facts__cell { background: #fff; padding: 24px 20px; }
.eq-facts__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo-300);
  margin-bottom: 8px;
}
.eq-facts__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--indigo-700);
  line-height: 1.3;
}

/* Stats 2×2 grid */
.eq-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
}
.eq-stat-cell { background: var(--navy-900); padding: 36px 28px; }
.eq-stat-cell__val {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 3rem;
  color: var(--amber-500);
  line-height: 1;
}
.eq-stat-cell__lbl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BACKGROUND CONTROL  (ACF: white / light grey / black)
   ───────────────────────────────────────────────────────────────
   Each homepage section takes an `eq-sec eq-sec--{white|grey|black}`
   class from its ACF "Section Background" field. The modifier sets a
   small set of --sec-* custom properties; the section's own rules read
   those with their pre-existing colour as the var() fallback, so a
   section with no modifier class renders exactly as it always did.

   Dark blue (--navy-900) is deliberately NOT one of the choices — the
   client asked for black to match the new logo, used sparingly. Navy is
   still the fallback value in the var() calls below purely so nothing
   breaks if a section ever renders without a modifier class.

   Placed before RESPONSIVE so these single-class rules land after the
   section rules they override (equal specificity → source order wins).
   ═══════════════════════════════════════════════════════════════ */
.eq-sec--white,
.eq-sec--grey {
  --sec-fg:           var(--ink);
  --sec-body:         var(--indigo-700);
  --sec-muted:        var(--indigo-300);
  --sec-line:         var(--line-200);
  --sec-card-line:    var(--line-200);
  --sec-logo-filter:  brightness(0);
  --sec-logo-opacity: 0.55;
}
.eq-sec--white {
  --sec-bg:   var(--white);
  --sec-card: var(--white);
}
.eq-sec--grey {
  --sec-bg:   var(--paper-2);
  --sec-card: var(--white);
}
.eq-sec--black {
  --sec-bg:           var(--ink);
  /* Cards sit fractionally above pure black so they read as surfaces. */
  --sec-card:         #0c0c0c;
  --sec-card-line:    rgba(255,255,255,0.13);
  --sec-fg:           #ffffff;
  --sec-body:         rgba(255,255,255,0.88);
  --sec-muted:        rgba(255,255,255,0.55);
  --sec-line:         rgba(255,255,255,0.14);
  --sec-logo-filter:  brightness(0) invert(1);
  --sec-logo-opacity: 0.75;
}
.eq-sec--white,
.eq-sec--grey,
.eq-sec--black { background: var(--sec-bg); }

/* Buttons/links that were authored for a dark section need to flip too. */
.eq-sec--white .eq-btn--outline,
.eq-sec--grey  .eq-btn--outline {
  border-color: var(--indigo-700);
  color: var(--indigo-700);
}
.eq-sec--white .eq-btn--outline:hover,
.eq-sec--grey  .eq-btn--outline:hover {
  background: var(--indigo-700);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hp-about__inner      { grid-template-columns: 1fr; gap: 48px; }
  .hp-sus__inner        { grid-template-columns: 1fr; gap: 48px; }
  .hp-sus__media        { max-width: 560px; }
  .hp-contact__inner    { grid-template-columns: 1fr; gap: 48px; }
  .eq-footer__grid      { grid-template-columns: 1fr 1fr; gap: 32px; }
  .eq-footer__brand     { grid-column: span 2; }
  .eq-svc                { flex-basis: calc((100% - 2 * 14px) / 3); }
  .eq-facts             { grid-template-columns: repeat(3, 1fr); }
  .eq-stat-grid         { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .eq-nav-links         { display: none; }
  .eq-soc-list          { display: none; }
  .eq-hamburger         { display: flex; }
  .hp-work__grid        { grid-template-columns: 1fr; }
  .hp-insights__grid    { grid-template-columns: 1fr; }
  .eq-svc                { flex-basis: calc((100% - 14px) / 2); }
  /* Tighter cells rather than fewer columns: with an unlimited logo list,
     dropping to 2-across turns a long wall into a very tall scroll. This
     keeps ~3 across on a phone and shortens the block instead. */
  .hp-about__client-wall { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .hp-about__client-cell { min-height: 86px; padding: 11px 12px; }
  .hp-about__client-cell img { max-height: 46px; }
  .hp-about__client-name { font-size: 11px; }
  .eq-testimonials__grid { grid-template-columns: 1fr; }
  .eq-footer__grid      { grid-template-columns: 1fr; }
  .eq-footer__brand     { grid-column: auto; }
  .eq-facts             { grid-template-columns: repeat(2, 1fr); }
  .hp-work__header      { flex-direction: column; align-items: flex-start; }
  .hp-insights__header  { flex-direction: column; align-items: flex-start; }
  .hp-sus__media        { height: 460px; }
  .hp-sus__fig          { inset: 0 4%; border-radius: var(--radius-tile); }
  .hp-sus__card         { top: -14px; width: 150px; padding: 16px; }
  .hp-sus__card-num     { font-size: 1.9rem; }
  .eq-testimonials--single { min-height: 0; }
}

/* Phones: the alternating tall/short stagger only reads as a rhythm across
   3+ columns — at 2-up it just leaves holes. Cards go uniform (still
   portrait, per the client's tall-tile direction), and a lone last card
   keeps its half width, centred, instead of stretching full-bleed. */
@media (max-width: 600px) {
  .eq-svc-grid          { justify-content: center; }
  .eq-svc,
  .eq-svc--tall         { flex: 0 0 calc((100% - 14px) / 2); height: auto; aspect-ratio: 2 / 3; }
  .eq-svc__lbl          { left: 42px; bottom: 16px; max-height: calc(100% - 32px); font-size: 13px; letter-spacing: 0.05em; }
  .eq-svc__num          { left: 16px; bottom: 16px; font-size: 13px; }
  /* Descriptor bar: the side marks squeeze the copy into three ragged
     lines; without them it centres over two, breaking between phrases. */
  .hp-scroll__inner     { padding: 14px var(--gutter); }
  .hp-scroll__bars      { display: none; }
  .hp-scroll b          { font-size: 11px; letter-spacing: 0.18em; }
}

@media (max-width: 520px) {
  .hp-hero__mark        { font-size: clamp(3rem, 18vw, 5rem); }
  .eq-stat-grid         { grid-template-columns: 1fr 1fr; }
  .eq-stat-cell         { min-width: 0; padding: 24px 16px; }
  .eq-stat-cell__val    { font-size: clamp(2rem, 10vw, 2.5rem); overflow-wrap: anywhere; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — HERO (split layout, white bg)
   ═══════════════════════════════════════════════════════════════ */
.svc-hero {
  background: var(--white);
  padding: 40px 0 56px;
}
.svc-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: center;
}
.svc-hero__h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 16ch;
}
.svc-hero__h1 em {
  color: var(--amber-500);
  font-style: normal;
}
.svc-hero__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--indigo-700);
  max-width: 52ch;
  margin: 0 0 36px;
}
.svc-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.svc-hero__trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-300);
}
.svc-hero__img {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--navy-900);
}
.svc-hero__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0 2px,
    transparent 2px 18px
  );
  z-index: 1;
}
.svc-hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-hero__img-bars {
  position: absolute;
  bottom: 28px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.svc-hero__img-bars span {
  display: block;
  width: 80px;
  height: 14px;
  background: var(--amber-500);
  opacity: 0.88;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES ARCHIVE
   ═══════════════════════════════════════════════════════════════ */
.svc-archive-hero {
  background: var(--sec-bg, var(--white));
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.services-archive-refresh,
.svc-archive-hero,
.svc-archive,
.svc-archive-hero__inner,
.svc-archive__inner,
.svc-archive__head,
.svc-archive__head > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.svc-archive-hero__inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.svc-archive-hero__eyebrow,
.svc-archive__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amber-600);
}
.svc-archive-hero__h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
  margin: 0;
}
.svc-archive-hero__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
  max-width: 58ch;
  margin: 24px auto 0;
}

.svc-archive {
  background: var(--sec-bg, var(--paper-2));
  padding: var(--section-y) 0;
}
.svc-archive__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.svc-archive__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* A cached Services template briefly rendered this component as a semantic
   <header>. Legacy styles.css fixes every header to the viewport, so reset all
   of that leakage here while remaining harmless for the current div markup. */
.services-archive-refresh .svc-archive__head {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  clear: none;
  width: auto;
  padding: 0;
}
.svc-archive__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
}
.svc-archive__intro {
  max-width: 48ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
}
.svc-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.svc-archive-card {
  min-width: 0;
  background: var(--sec-card, var(--white));
  border-color: var(--sec-card-line, var(--line-200));
}
.svc-archive-card__media {
  background: var(--paper-3);
}
.svc-archive-card__media img {
  transition: transform var(--dur-slow) var(--ease);
}
.svc-archive-card:hover .svc-archive-card__media img {
  transform: scale(1.04);
}
.svc-archive-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255,161,1,0.22) 46% 54%, transparent 54%),
    var(--paper-3);
}
.svc-archive-card .eq-acard__meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.svc-archive-card .eq-acard__meta span {
  color: var(--sec-muted, var(--indigo-300));
}
.svc-archive-card .eq-acard__title {
  color: var(--sec-fg, var(--indigo-700));
}
.svc-archive-card .eq-acard__excerpt {
  color: var(--sec-body, var(--indigo-700));
}
.svc-archive-card .eq-acard__more {
  color: var(--amber-600);
}

@media (max-width: 900px) {
  .svc-archive__head { grid-template-columns: 1fr; gap: 20px; }
  .svc-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .svc-archive-hero { padding: clamp(3rem, 14vw, 4.5rem) 0; }
  .svc-archive-hero__inner,
  .svc-archive__inner {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }
  .svc-archive-hero__h1 {
    font-size: clamp(2.25rem, 12vw, 3rem);
    overflow-wrap: anywhere;
  }
  .svc-archive__heading {
    font-size: clamp(1.85rem, 9vw, 2.35rem);
    overflow-wrap: anywhere;
  }
  .svc-archive-hero__sub,
  .svc-archive__intro {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .svc-archive__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — WHAT IS (definition + in-short box)
   ═══════════════════════════════════════════════════════════════ */
.svc-what {
  background: var(--sec-bg, var(--white));
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line-100);
}
.svc-what__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.svc-what__inner > *:only-child {
  grid-column: 1 / -1;
}
.svc-what__content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, var(--indigo-700));
  margin: 0;
}
.svc-what__content p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
  margin: 0 0 18px;
}
.svc-what__content p:first-of-type {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* "In Short" amber-bordered sidebar */
.svc-inshort {
  background: var(--paper);
  border-left: 4px solid var(--amber-500);
  padding: 40px;
}
.svc-inshort__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--indigo-300);
  margin: 0 0 20px;
}
.svc-inshort__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--indigo-700);
}
.svc-inshort__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svc-inshort__body li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.svc-inshort__body li::before {
  content: "=";
  color: var(--amber-500);
  font-weight: var(--fw-black);
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — APPROACH (5-step process, navy bg)
   ═══════════════════════════════════════════════════════════════ */
.svc-approach {
  background: var(--sec-bg, var(--navy-900));
  padding: var(--section-y) 0;
}
.svc-approach__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.svc-approach__head { margin-bottom: 36px; }
.svc-approach__head .eq-head-eq { margin-bottom: 18px; }
.svc-approach__lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, rgba(255,255,255,0.82));
  max-width: 60ch;
  margin: 0;
}
.svc-steps {
  display: grid;
  grid-template-columns: repeat(var(--svc-steps-count, 5), 1fr);
  gap: 22px;
}

/* Process step card */
.eq-step {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-card);
  padding: 28px 22px;
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
  isolation: isolate;
  overflow: hidden;
}
.eq-step::after {
  content: "";
  position: absolute;
  inset: auto 22px 0;
  height: 3px;
  z-index: 1;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.svc-approach:not(.eq-sec--black) .eq-step {
  background: var(--sec-card);
  border-color: var(--sec-card-line);
}
.svc-approach:not(.eq-sec--black) .eq-step h3 { color: var(--sec-fg); }
.svc-approach:not(.eq-sec--black) .eq-step p { color: var(--sec-body); }
.eq-step:hover {
  border-color: var(--amber-500);
  background: var(--sec-card, rgba(255,255,255,0.05));
  transform: translateY(-6px);
  box-shadow: 0 20px 42px -28px rgba(4,4,38,0.48);
}
.eq-step:hover::after {
  transform: scaleX(1);
}
.eq-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amber-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 15px;
  margin-bottom: 14px;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.eq-step:hover .eq-step__n {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 24px -14px rgba(255,161,1,0.9);
}
.eq-step h3 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.1875rem;
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: var(--lh-snug);
}
.eq-step p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — FULL-BLEED IMAGE BREAK (statement over photo)
   Sits after Our Approach to break up the runs of card grids.
   Deliberately does NOT use the --sec-* background system: the
   background here is the photograph, and the text is always white
   over a dark scrim, so the White/Grey/Black control has no meaning.
   ═══════════════════════════════════════════════════════════════ */
.svc-break {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(340px, 46vw, 480px);
  background: var(--ink);
  /* Cancel legacy styles.css `section, .d { padding-top: 200px }` — without
     this the flex centring happens inside a content box that starts 200px
     down, so the overlay text sits low instead of vertically centred. */
  padding: 0;
}
.svc-break__media {
  position: absolute;
  inset: 0;
}
/* wp_get_attachment_image() emits a plain <img>; stretch it to the section.
 *
 * object-position is biased UP rather than centred. Six of the nine image-break
 * photos are portrait (0.67-0.75) being cropped into a ~4:1 letterbox, so a
 * centred crop takes a band from the vertical middle of a tall frame - torso
 * height on a photo of standing people, cutting every head off. 30% lands on
 * faces for portrait sources and is near-neutral for the landscape ones.
 *
 * Per-page override: set --svc-break-focus on the section, e.g. style="--svc-break-focus: 15%". */
.svc-break__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--svc-break-focus, 30%);
}
.svc-break__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--svc-break-alpha, 0.5));
}
.svc-break__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  text-align: center;
}
.svc-break__h2 {
  max-width: 20ch;
  margin: 0 auto;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.9rem, 4.2vw, 3.125rem);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  text-wrap: balance;
}
.svc-break__sub {
  max-width: 46ch;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — SECTORS (tall image cards, white bg)
   ═══════════════════════════════════════════════════════════════ */
.svc-sectors {
  background: var(--sec-bg, var(--white));
  padding: var(--section-y) 0;
}
.svc-sectors__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.svc-sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tall sector card */
.eq-sector {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--navy-900);
  text-decoration: none;
}
.eq-sector::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0 2px,
    transparent 2px 18px
  );
}
.eq-sector__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eq-sector__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,38,0.22) 0%, rgba(4,4,38,0.82) 100%);
  transition: background var(--dur-base) var(--ease);
}
.eq-sector:hover .eq-sector__scrim {
  background: linear-gradient(180deg, rgba(255,161,1,0.14) 0%, rgba(4,4,38,0.90) 100%);
}
.eq-sector__body {
  position: relative;
  z-index: 1;
}
.eq-sector__cap {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0 0 10px;
}
.eq-sector__title {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.625rem;
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: var(--lh-tight);
}
.eq-sector__desc {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — RELATED WORK (navy-950 bg)
   ═══════════════════════════════════════════════════════════════ */
.svc-work {
  background: var(--sec-bg, var(--navy-950));
  padding: var(--section-y) 0;
}
.svc-work__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Heading left, "view all" link right — same pattern as .hp-work__header. */
.svc-work__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.svc-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — WHY EQUALS (statements + stats, white bg)
   ═══════════════════════════════════════════════════════════════ */
.svc-why {
  background: var(--sec-bg, var(--white));
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  overflow: clip;
}
.svc-why__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* The spacing below the block now lives on the wrapper, so an optional
   description can sit tight under the heading rather than a screen away. */
.svc-why__head {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.svc-why__heading {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.svc-why__head .svc-why__heading {
  margin-bottom: 0;
}
.svc-why__heading h2 {
  color: var(--sec-fg, var(--ink));
}
.svc-why__intro {
  max-width: 62ch;
  margin: 20px 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--text-body));
}
.svc-why__experience {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(4rem, 9vw, 8rem);
  align-items: start;
}
.svc-why__statements {
  min-width: 0;
}
.svc-why__statement {
  position: relative;
  min-height: clamp(340px, 54vh, 520px);
  padding: clamp(3rem, 7vh, 5rem) 0 clamp(3rem, 7vh, 5rem) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--sec-line, var(--line-200));
  color: var(--sec-muted, var(--indigo-300));
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(.16, 1, .3, 1),
              transform 600ms cubic-bezier(.16, 1, .3, 1),
              color 450ms ease;
}
.svc-why__statement:first-child { padding-top: 0; }
.svc-why__statement:last-child { border-bottom: 0; }
.svc-why.is-enhanced .svc-why__statement {
  opacity: 0.16;
  transform: translateY(32px);
}
.svc-why.is-enhanced .svc-why__statement.is-revealed {
  opacity: 0.38;
  transform: none;
}
.svc-why.is-enhanced .svc-why__statement.is-active {
  opacity: 1;
  color: var(--sec-fg, var(--ink));
}
.svc-why__index {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--amber-500);
}
.svc-why__statement h3 {
  max-width: 18ch;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight: var(--fw-black);
  line-height: 1.12;
  text-transform: uppercase;
  color: currentColor;
  transition: color 450ms ease;
}
.svc-why__statement p {
  max-width: 42ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: currentColor;
}
.svc-why__mobile-stat { display: none; }
.svc-why__stage {
  position: sticky;
  top: clamp(170px, 24vh, 230px);
  height: min(62vh, 540px);
  display: flex;
  align-items: center;
}
.svc-why__stage-card {
  position: relative;
  /* Size container so the stat can scale to the CARD rather than the viewport. */
  container-type: inline-size;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  background: var(--sec-card, var(--white));
  border: 1px solid var(--sec-card-line, var(--line-200));
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px -42px rgba(4, 4, 38, 0.34);
}
.svc-why__stage-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--amber-500);
}
.svc-why__stage-kicker {
  position: absolute;
  top: 34px;
  left: 42px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sec-muted, var(--indigo-300));
}
.svc-why__stat {
  position: absolute;
  inset: 0;
  padding: 82px 42px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(34px) scale(0.97);
  visibility: hidden;
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1),
              transform 520ms cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear 520ms;
}
.svc-why__stat.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 80ms, 80ms, 0s;
}
.svc-why__stat strong,
.svc-why__mobile-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--amber-500);
}
/* The card sits in a two-column grid, so 8vw bore no relation to how much room
   the number actually had — a 7-character value like "318,000" needed ~450px of
   a ~360px content box and ran into the edge. cqi is a percentage of the CARD's
   width, so the figure now scales with the box that contains it. The max is kept
   generous for short values like "85%". */
.svc-why__stat strong {
  font-size: clamp(2.75rem, 18cqi, 7.25rem);
  max-width: 100%;
  overflow-wrap: break-word;
}
/* The mobile stat is not inside the card, so it keeps viewport-based sizing. */
.svc-why__mobile-stat strong {
  font-size: clamp(2.75rem, 11vw, 4.5rem);
}
.svc-why__stat > span,
.svc-why__mobile-stat > span {
  display: block;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  line-height: 1.45;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sec-muted, var(--indigo-300));
}
.svc-why__progress {
  position: absolute;
  left: 42px;
  bottom: 34px;
  z-index: 2;
  display: flex;
  gap: 9px;
}
.svc-why__progress span {
  width: 24px;
  height: 3px;
  background: var(--sec-line, var(--line-200));
  transition: width 350ms ease, background 350ms ease;
}
.svc-why__progress span.is-active {
  width: 42px;
  background: var(--amber-500);
}
.svc-why__stage-mark {
  position: absolute;
  right: -8px;
  bottom: -42px;
  font-family: var(--font-display);
  font-size: 11rem;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--sec-line, var(--line-100));
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — FAQ (paper-2 bg)
   ═══════════════════════════════════════════════════════════════ */
.svc-faq {
  background: var(--sec-bg, var(--paper-2));
  /* Generous bottom space so the FAQ breathes before the global CTA slab.
     Padding rather than margin deliberately: the CTA defaults to dark navy,
     so a margin would expose a band of page background between two blocks
     and read as a gap bug. This extends the FAQ's own background instead. */
  padding: var(--section-y) 0 clamp(7rem, 12vw, 12rem);
}
/* Two-column FAQ: heading + CTA on the left, accordion on the right.
   Mirrors the design's 12-column 4/8 split. */
.svc-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.svc-faq__aside .eq-head-eq { margin-bottom: 28px; }
/* This h2 previously had no explicit size and fell through to the legacy
   base styles, rendering smaller than every other section heading. */
.svc-faq__aside h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--sec-fg, var(--indigo-700));
}
.svc-faq__cta { align-self: start; }
.svc-faq .eq-faq summary { color: var(--sec-fg, var(--indigo-700)); }
.svc-faq .eq-faq details { border-color: var(--sec-line, var(--line-200)); }
.svc-faq .eq-faq__ans { color: var(--sec-body, var(--indigo-700)); }

/* Client palette update: section headlines use black on light backgrounds.
   Section modifiers still supply white through --sec-fg on black sections. */
.svc-what__content h2,
.svc-approach__head h2,
.svc-sectors__inner > .eq-head-eq h2,
.svc-work__header h2,
.svc-why__heading h2,
.svc-faq__aside h2 {
  color: var(--sec-fg, var(--ink));
}
/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .svc-hero__inner      { grid-template-columns: 1fr; gap: 0; }
  .svc-hero__img        { display: none; }
  .svc-what__inner      { grid-template-columns: 1fr; gap: 40px; }
  .svc-steps            { grid-template-columns: repeat(min(var(--svc-steps-count, 5), 3), 1fr); }
  .svc-why__experience  { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr); gap: 48px; }
  .svc-why__statement   { min-height: clamp(320px, 50vh, 440px); }
}

@media (max-width: 820px) {
  .svc-why              { padding: clamp(3.5rem, 12vw, 5rem) 0; }
  .svc-why__heading     { margin-bottom: 2.5rem; }
  .svc-why__head        { margin-bottom: 2.5rem; }
  .svc-why__head .svc-why__heading { margin-bottom: 0; }
  .svc-why__experience  { display: block; }
  .svc-why__stage       { display: none; }
  .svc-why__statements  { display: grid; gap: 18px; }
  .svc-why__statement,
  .svc-why__statement:first-child {
    min-height: 0;
    padding: 34px 28px;
    border: 1px solid var(--sec-card-line, var(--line-200));
    border-radius: var(--radius-md);
    background: var(--sec-card, var(--white));
  }
  .svc-why.is-enhanced .svc-why__statement { opacity: 0.2; transform: translateY(24px); }
  .svc-why.is-enhanced .svc-why__statement.is-revealed { opacity: 0.54; transform: none; }
  .svc-why.is-enhanced .svc-why__statement.is-active { opacity: 1; }
  .svc-why__index {
    position: static;
    display: block;
    transform: none;
    margin-bottom: 22px;
  }
  .svc-why__statement h3 { font-size: clamp(1.45rem, 7vw, 2rem); }
  .svc-why__statement p { font-size: 1rem; line-height: 1.65; }
  .svc-why__mobile-stat {
    display: block;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--sec-line, var(--line-200));
  }
  .svc-why__mobile-stat strong { font-size: clamp(3.25rem, 17vw, 5rem); }
  .svc-why__mobile-stat > span { margin-top: 12px; }
}

@media (max-width: 768px) {
  .svc-steps            { grid-template-columns: repeat(min(var(--svc-steps-count, 5), 2), 1fr); }
  .svc-sectors__grid    { grid-template-columns: 1fr; }
  .svc-work__grid       { grid-template-columns: 1fr; }
  .svc-inshort          { padding: 28px; }
  /* Stack the FAQ split: heading + CTA above the accordion. */
  .svc-faq__inner       { grid-template-columns: 1fr; }
  .svc-faq__aside .eq-head-eq { margin-bottom: 20px; }
  .svc-faq__cta         { margin-bottom: 8px; }
}

@media (max-width: 768px) {
  .svc-break            { min-height: clamp(300px, 62vw, 400px); }
  .svc-break__sub       { font-size: 1.0625rem; }
}

@media (max-width: 520px) {
  .svc-steps            { grid-template-columns: 1fr; }
  .svc-hero__h1         { font-size: clamp(2.25rem, 10vw, 3rem); }
  .svc-break__h2        { max-width: 100%; overflow-wrap: anywhere; }
}


/* ═══════════════════════════════════════════════════════════════
   WORK / CASE STUDY PAGE  (single-work.php)
   ═══════════════════════════════════════════════════════════════ */

/* ── Extra button variants (amber-bg context) ─────────────────── */
.eq-btn--solid-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-900);
  color: #fff;
  border: 2px solid var(--navy-900);
  border-radius: 4px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.eq-btn--solid-navy:hover,
.eq-btn--solid-navy:focus-visible {
  background: var(--indigo-700);
  border-color: var(--indigo-700);
  color: #fff;
}
.eq-btn--outline-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--navy-900);
  border: 2px solid var(--navy-900);
  border-radius: 4px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s;
}
.eq-btn--outline-navy:hover,
.eq-btn--outline-navy:focus-visible {
  background: rgba(4,4,38,.08);
  color: var(--navy-900);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.wk-hero {
  position: relative;
  min-height: min(88vh, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-900);
}
.wk-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 10s ease-out;
  will-change: transform;
}
.wk-hero:hover .wk-hero__bg {
  transform: scale(1.04);
}
.wk-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4,4,38,0.20) 0%,
    rgba(4,4,38,0.48) 40%,
    rgba(4,4,38,0.88) 100%
  );
}
.wk-hero__logo {
  position: absolute;
  top: clamp(5rem, 9vw, 7rem);
  right: var(--gutter);
  z-index: 2;
  max-height: 56px;
  max-width: 180px;
}
.wk-hero__logo img {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.wk-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
}
.wk-hero__h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: var(--fw-black);
  color: #fff;
  line-height: 1.1;
  margin: 0 0 .75rem;
  max-width: 820px;
}
.wk-hero__tagline {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: var(--fw-regular);
  color: rgba(255,255,255,.82);
  margin: 0 0 1.25rem;
  max-width: 640px;
}
.wk-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.wk-pill {
  display: inline-block;
  padding: .3rem .9rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.9);
}
.wk-pill--amber {
  border-color: var(--amber-500);
  color: var(--amber-500);
}

/* ── Mid-page CTA (amber strip) ───────────────────────────────── */
.wk-mid-cta {
  background: var(--sec-bg, var(--amber-500));
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
}
.wk-mid-cta--amber { background: var(--amber-500); }
.wk-mid-cta__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.wk-mid-cta__text {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: var(--fw-regular);
  color: var(--sec-fg, var(--navy-900));
  margin: 0;
}
.wk-mid-cta__text strong { font-weight: var(--fw-black); }
.wk-mid-cta__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── More work grid ────────────────────────────────────────────── */
.wk-more {
  background: var(--paper);
  padding: var(--section-y) var(--gutter);
}
.wk-more__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.wk-more__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.wk-more__h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--fw-black);
  color: var(--ink);
  margin: 0;
}
.wk-more__viewall { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ── WORK — RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .wk-mid-cta__inner      { justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  .wk-hero                { min-height: 70vh; }
  .wk-mid-cta__ctas       { width: 100%; min-width: 0; flex-direction: column; }
  .wk-mid-cta__ctas .eq-btn { width: 100%; max-width: 100%; }
}

/* ── SITE-WIDE HEADER COMPAT ──────────────────────────────────── */
/* WP admin bar is position:fixed at top:0; sticky header needs to
   sit below it, not behind it, when the user scrolls. */
.admin-bar .eq-site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .eq-site-header { top: 46px; }
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY — SHARED CONTENT SECTIONS
   ═══════════════════════════════════════════════════════════════ */

/* ── 2-col section wrapper ────────────────────────────────────── */
.cs2-section {
  background: var(--white);
  padding-top: 0; /* cancel styles.css: section { padding-top: 200px } */
}
.cs2-section--paper {
  background: var(--paper-2);
}
.cs2-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.cs2-section__inner--flush-top {
  padding-top: calc(var(--section-y) * 0.45);
}
.cs2-2col {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.cs2-prose p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--indigo-700);
  margin: 0 0 20px;
}
.cs2-prose p:last-child { margin-bottom: 0; }
.cs2-prose h2, .cs2-prose h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 14px;
}


/* ── Results (navy bg) ────────────────────────────────────────── */
.cs2-results {
  background: var(--sec-bg, var(--white));
  padding: clamp(2.75rem, 5vw, 4.5rem) 0;
}
.cs2-results__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cs2-results__head {
  max-width: 700px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.cs2-results__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amber-600);
}
.cs2-results__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.7vw, 3.25rem);
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
}
.cs2-results__head p {
  max-width: 60ch;
  margin: 14px auto 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--sec-body, var(--indigo-700));
}


/* ── Gallery (white bg, 3-col masonry-style) ──────────────────── */
.cs2-gallery {
  background: var(--white);
  padding: var(--section-y) 0;
}
.cs2-gallery__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cs2-gallery__head {
  margin-bottom: 40px;
}
.cs2-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(220px, 20vw, 340px);
  gap: 18px;
  /* No grid-auto-flow:dense — preserves the order images were added in
     the repeater, at the cost of occasionally leaving a small gap next
     to a wide/tall tile. Predictable order over optimal packing. */
}
.cs2-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-900);
  line-height: 0;
  /* height comes from grid-auto-rows, not aspect-ratio, so wide/tall
     spans produce predictable multiples of the row track */
}
.cs2-gallery__item--wide {
  grid-column: span 2;
}
.cs2-gallery__item--tall {
  grid-row: span 2;
}
.cs2-gallery__item--wide.cs2-gallery__item--tall {
  grid-column: span 2;
  grid-row: span 2;
}
.cs2-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.cs2-gallery__item:hover img {
  transform: scale(1.04);
}
.cs2-gallery__cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(4,4,38,0.65));
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* ── Case study responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .cs2-2col              { grid-template-columns: 1fr; gap: 40px; }
  .cs2-gallery__grid     { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(200px, 34vw, 320px); }
  .cs2-gallery__item--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .cs2-gallery__grid     { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 60vw, 320px); }
  .cs2-gallery__item--wide { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-900) center / cover no-repeat;
}
.about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,38,0.55), rgba(4,4,38,0.78));
}
.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-hero__bars { align-items: center; margin: 0 auto 28px; }
.about-hero__h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: #fff;
  margin: 0 0 20px;
}
.about-hero__h1 em {
  font-style: normal;
  color: var(--amber-500);
}
.about-hero__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.72);
  max-width: 40rem;
  margin: 0 auto;
}

/* ── Clients marquee ──────────────────────────────────────────── */
.about-marquee {
  padding-block: 40px;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-200);
}
.about-marquee__label {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--indigo-300);
  margin: 0 0 28px;
}
.about-marquee__track {
  display: flex;
  width: max-content;
  animation: about-marquee-scroll 32s linear infinite;
}
.about-marquee__track span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--indigo-300);
  padding-inline: 36px;
  white-space: nowrap;
}
@keyframes about-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Shared centered head block ───────────────────────────────── */
.about-head--center {
  max-width: 40rem;
  margin: 0 auto 56px;
  text-align: center;
}
.about-head--center h2 { margin: 12px 0 16px; }
.about-head__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  color: var(--indigo-300);
  margin: 0;
}

/* ── Story ────────────────────────────────────────────────────── */
.about-story-section { background: var(--white); }
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-story__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--indigo-700);
  margin: 12px 0 20px;
}
.about-story__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--indigo-700);
}
.about-story__body p { margin: 0 0 18px; }
.about-story__body p:last-child { margin-bottom: 0; }
.about-story__stat {
  display: flex;
  gap: 32px;
  margin: 28px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line-200);
}
.about-story__stat h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--indigo-700);
  margin: 0 0 6px;
}
.about-story__stat p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--indigo-300);
}
.about-story__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--indigo-700);
  margin: 20px 0 0;
}
.about-story__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}
.about-story__img--placeholder { background: var(--navy-900); }

/* ── Values ───────────────────────────────────────────────────── */
.about-values-section { background: var(--paper-2); }
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.about-value {
  padding: 36px 28px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--line-200);
}
.about-value .eq-eqbars { margin-bottom: 20px; }
.about-value h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h4);
  color: var(--indigo-700);
  margin: 0 0 12px;
}
.about-value p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--indigo-300);
  margin: 0;
}

/* ── Stats ────────────────────────────────────────────────────── */
.about-stats-section { background: var(--navy-900); }
.about-stats-section .eq-eyebrow { color: var(--amber-500); }
.about-stats-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
}
.about-stats__h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: #fff;
  margin: 12px 0 0;
}
.about-stats-top p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.about-stat {
  padding-left: 24px;
  border-left: 2px solid rgba(255,255,255,0.16);
}
.about-stat h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--amber-500);
  margin: 0 0 12px;
}
.about-stat h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h6, 1.0625rem);
  color: #fff;
  margin: 0 0 8px;
}
.about-stat p {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* ── Team ─────────────────────────────────────────────────────── */
.about-team-section { background: var(--white); }
.about-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.about-member__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--paper-2);
}
.about-member__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-member h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5, 1.1875rem);
  color: var(--indigo-700);
  margin: 0 0 4px;
}
.about-member p {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--indigo-300);
  margin: 0;
}

/* ── Culture gallery ──────────────────────────────────────────── */
.about-culture-section { background: var(--paper-2); }
.about-gallery {
  columns: 3;
  column-gap: 24px;
}
.about-gallery__item {
  display: block;
  margin-bottom: 24px;
  break-inside: avoid;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.about-gallery__item img {
  width: 100%;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.about-gallery__item:hover img { transform: scale(1.04); }

/* ── Closing CTA ──────────────────────────────────────────────── */
.about-cta-section {
  position: relative;
  padding-block: 100px;
  background: var(--navy-900) center / cover no-repeat;
  overflow: hidden;
}
.about-cta-section__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4,4,38,0.62);
}
.about-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-cta__bars { align-items: center; margin: 0 auto 24px; }
.about-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: #fff;
  margin: 0 0 16px;
}
.about-cta p {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.about-cta__actions {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── About page responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .about-story             { grid-template-columns: 1fr; gap: 32px; }
  .about-values            { grid-template-columns: 1fr; }
  .about-stats-top,
  .about-stats             { grid-template-columns: 1fr; }
  .about-team              { grid-template-columns: 1fr 1fr; }
  .about-gallery           { columns: 2; }
}
@media (max-width: 560px) {
  .about-team              { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY (single-work.php) — Approach / Detail / Results /
   Related Services additions on top of the existing cs2-* system.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section heading (Approach / Detail / Gallery / Results / Related) ── */
.cs2-approach__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--sec-fg, var(--ink));
  text-transform: uppercase;
  margin: 0;
}

/* ── Approach heading sticks while the (often longer) prose + facts
     column scrolls past it ─────────────────────────────────────── */
.cs2-approach__sticky-head {
  position: sticky;
  top: 100px;         /* matches .cs2-detail__img-wrap for consistency */
  align-self: start;  /* explicit — .cs2-2col already sets align-items:start */
}

/* Once the columns stack, keep the heading in the normal document flow.
   This override must follow the desktop sticky rule. */
@media (max-width: 900px) {
  .cs2-approach__sticky-head {
    position: static;
    top: auto;
  }
}

/* ── Facts table (stacked label:value rows, inside Approach) ────── */
.cs2-facts-list {
  margin: 40px 0 0;
  border-top: 1px solid var(--line-200);
}
.cs2-facts-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-200);
}
.cs2-facts-list__row dt {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: var(--indigo-700);
}
.cs2-facts-list__row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  color: var(--indigo-500);
  text-align: right;
}
/* Services: an inline run of middle-dot-separated items, three to a line.
   Each item is nowrap so a line can only ever break *between* items (the
   dot stays on the end of the line it follows), never mid-name; the forced
   "\A" after every third item gives the even three-up rhythm. Items stay
   a flat <ul> so the markup is a real list for assistive tech. */
.cs2-facts-list__row--services { align-items: flex-start; }
.cs2-facts-list__services {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.9;
}
.cs2-facts-list__services li {
  display: inline;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.cs2-facts-list__services li:not(:last-child)::after {
  content: "\00a0\00b7";
  content: "\00a0\00b7" / "";
  margin-right: 0.1em;
  color: var(--indigo-500);
}
.cs2-facts-list__services li:nth-child(3n):not(:last-child)::after {
  content: "\A";
  content: "\A" / "";
  white-space: pre;
  margin: 0;
}
.cs2-facts-list__services a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--dur-base) var(--ease);
}
.cs2-facts-list__services a:hover,
.cs2-facts-list__services a:focus-visible { color: var(--indigo-700); }
/* Phones: three to a line doesn't fit beside the label, so the forced
   break reverts to a dot and items simply flow — still right-aligned like
   every other fact, still only ever breaking between items. */
@media (max-width: 600px) {
  .cs2-facts-list__services li:nth-child(3n):not(:last-child)::after {
    content: "\00a0\00b7";
    content: "\00a0\00b7" / "";
    white-space: nowrap;
    margin-right: 0.1em;
  }
}

/* ── Even-width 2-col variant (Detail section) ───────────────────── */
.cs2-2col--even {
  grid-template-columns: 1fr 1fr;
}

/* ── Detail image (sticky, paired with second narrative) ─────────── */
.cs2-detail__img-wrap {
  position: sticky;
  top: 100px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-900);
  aspect-ratio: 4 / 5;
}
.cs2-detail__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Results — image beside a stacked stat list ──────────────────── */
.cs2-results--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.cs2-results__img-wrap {
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
  max-height: min(50vh, 480px);
  background: var(--sec-card, var(--paper-2));
}
.cs2-results__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs2-results__stack {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-content: center;
}
.cs2-results__stat {
  min-width: 0;
}
.cs2-results__stat-val {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.65rem, 4.2vw, 4rem);
  color: var(--sec-fg, var(--ink));
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.cs2-results__stat-lbl {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--sec-body, var(--indigo-700));
}

/* ── Related services — 3-card grid ──────────────────────────────── */
.cs2-related-services {
  background: var(--white);
  padding: var(--section-y) 0;
}
.cs2-related-services__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cs2-related-services__head {
  margin-bottom: 40px;
}
.cs2-related-services__grid {
  display: grid;
  gap: 24px;
}
/* ── Case study additions — responsive ───────────────────────────── */
@media (max-width: 900px) {
  .cs2-2col--even          { grid-template-columns: 1fr; gap: 32px; }
  .cs2-detail__img-wrap    { position: static; aspect-ratio: 16 / 10; }
  .cs2-results--split      { grid-template-columns: 1fr; gap: 32px; }
  .cs2-results__img-wrap   { max-height: none; }
  .cs2-results__stack      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs2-results__stat       { padding-top: 22px; border-top: 1px solid var(--sec-line, var(--line-200)); }
  .cs2-related-services__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .cs2-results__stack      { grid-template-columns: 1fr; }
  .cs2-results__stat-val   { font-size: clamp(2.75rem, 16vw, 4rem); }
}

/* ═══════════════════════════════════════════════════════════════
   OUR WORK ARCHIVE — Services archive framing, original cards
   ═══════════════════════════════════════════════════════════════ */
.work-archive__cards.our-work-catlog {
  padding: 0;
  background: transparent;
}
.work-archive__cards .post-wrap-insight,
.work-archive__cards .post-wrap-insight > .row {
  width: 100%;
}
.work-archive__cards .post-card {
  background: var(--sec-card, var(--white));
}
/* Card images are constrained to one ratio so the grid can never be broken by an
 * off-ratio upload. 3/2 matches 9 of the 11 current images exactly, so they are not
 * cropped at all; genuinely portrait images are centre-cropped to fit.
 *
 * History: Phase 17 set height:auto / object-fit:initial to escape the legacy
 * `.post-card img { height:320px; object-fit:cover }`, which distorted cards at
 * some breakpoints. That fixed the distortion but left the grid at the mercy of
 * whatever ratio was uploaded — two portrait images (Global Block, Seville After
 * Sunset) then blew the layout apart. aspect-ratio keeps Phase 17's intent (no
 * fixed pixel height, fully responsive) while restoring a predictable card shape. */
.work-archive__cards .post-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.work-archive__cards .post-card::before {
  border-right-color: var(--sec-bg, var(--white));
}
.work-archive__cards .post-card::after {
  border-bottom-color: var(--sec-bg, var(--white));
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS ARCHIVE — shared archive framing, original cards
   ═══════════════════════════════════════════════════════════════ */
.insights-archive__cards.catlog-section {
  padding: 0;
  background: transparent;
}
.insights-archive__cards .post-wrap-insight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  width: 100%;
}
.insights-archive__cards .post-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--sec-card, var(--white));
}
.insights-archive__cards .post-card > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}
.insights-archive__cards .post-card:focus-within .overlay-post {
  bottom: 0;
}
.insights-archive__cards .overlay-post {
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   SECTOR PAGE — reusable Page template
   ═══════════════════════════════════════════════════════════════ */
.sector-page-refresh main,
.sector-hero,
.sector-shell,
.sector-hero__inner,
.sector-overview__grid,
.sector-section-head,
.sector-card-grid {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.sector-shell,
.sector-hero__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}
.sector-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amber-600);
}

/* Hero */
.sector-hero {
  background: var(--sec-bg, var(--white));
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  overflow: hidden;
}
.sector-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.sector-hero__inner--no-media {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  text-align: center;
}
.sector-hero__h1 {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.8vw, 5rem);
  font-weight: var(--fw-black);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
  overflow-wrap: anywhere;
}
.sector-hero__intro {
  max-width: 50ch;
  margin: 24px 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
}
.sector-hero__inner--no-media .sector-hero__intro { margin-right: auto; margin-left: auto; }
.sector-hero__media {
  position: relative;
  aspect-ratio: 5 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--sec-card, var(--paper-2));
}
.sector-hero__media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 6px;
  background: var(--amber-500);
}
.sector-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overview and highlight cards */
.sector-overview,
.sector-related {
  background: var(--sec-bg, var(--white));
  padding: var(--section-y) 0;
}
.sector-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.sector-overview__heading h2,
.sector-section-head h2 {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
}
.sector-overview__body,
.sector-overview__body p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
}
.sector-overview__body p { margin: 0 0 18px; padding: 0; }
.sector-overview__body > *:last-child { margin-bottom: 0; }
.sector-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(2.75rem, 6vw, 5rem);
}
.sector-highlight {
  position: relative;
  min-width: 0;
  padding: 26px 24px 28px;
  overflow: hidden;
  border: 1px solid var(--sec-card-line, var(--line-200));
  border-radius: var(--radius-card);
  background: var(--sec-card, var(--white));
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.sector-highlight::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 3px;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.sector-highlight:hover {
  transform: translateY(-5px);
  border-color: var(--amber-500);
  box-shadow: 0 20px 42px -30px rgba(4,4,38,0.48);
}
.sector-highlight:hover::after { transform: scaleX(1); }
.sector-highlight__number {
  display: block;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--amber-600);
}
.sector-highlight h3 {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sec-fg, var(--ink));
}
.sector-highlight p {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--sec-body, var(--indigo-700));
}

/* Proof strip */
.sector-proof {
  background: var(--sec-bg, var(--ink));
  padding: clamp(2.75rem, 5vw, 4.5rem) 0;
}
.sector-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sector-proof__item {
  min-width: 0;
  padding: 12px clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--sec-line, rgba(255,255,255,0.15));
}
.sector-proof__item:first-child { border-left: 0; padding-left: 0; }
.sector-proof__item strong,
.sector-proof__item span { display: block; }
.sector-proof__item strong {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--fw-black);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--amber-500);
  overflow-wrap: anywhere;
}
.sector-proof__item span {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sec-body, rgba(255,255,255,0.82));
}

/* Related Services and Work */
.sector-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sector-section-head > p {
  max-width: 48ch;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--sec-body, var(--indigo-700));
}
.sector-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.sector-service-card { min-width: 0; }
.sector-service-card .eq-acard__title { color: var(--sec-fg, var(--indigo-700)); }
.sector-service-card .eq-acard__excerpt { color: var(--sec-body, var(--indigo-700)); }
.sector-service-card .eq-acard__meta span { color: var(--sec-muted, var(--indigo-300)); }
.sector-card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 46%, rgba(255,161,1,0.22) 46% 54%, transparent 54%), var(--paper-3);
}

@media (max-width: 900px) {
  .sector-hero__inner,
  .sector-overview__grid,
  .sector-section-head { grid-template-columns: 1fr; }
  .sector-hero__media { aspect-ratio: 16 / 10; }
  .sector-highlights,
  .sector-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .sector-proof__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .work-archive__cards .post-wrap-insight .row .col-md-6 { padding: 0 0 28px; }
  .insights-archive__cards .post-wrap-insight { grid-template-columns: 1fr; }
  .sector-hero { padding: 3.5rem 0; }
  .sector-shell,
  .sector-hero__inner { padding-right: 24px; padding-left: 24px; }
  .sector-hero__h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .sector-highlights,
  .sector-card-grid,
  .sector-proof__grid { grid-template-columns: 1fr; }
  .sector-proof__item,
  .sector-proof__item:nth-child(odd) {
    padding: 24px 0 0;
    border-top: 1px solid var(--sec-line, rgba(255,255,255,0.15));
    border-left: 0;
  }
  .sector-proof__item:first-child { padding-top: 0; border-top: 0; }
}

/* Respect the visitor's OS motion preference across AOS, sliders and the
   theme's own transitions. Content remains visible and fully usable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================== 
   START A BRIEF + CONFIRMATION
   ========================================================================== */
.eq-brief-page,
.eq-received-page {
  background: var(--white);
  color: var(--ink);
  overflow-x: clip;
}
/* The hero is a semantic <header>, and legacy styles.css pins every header to
   the viewport (position:fixed; top:0; z-index:111111). Left alone that floats
   the brief hero over the page and the whole form scrolls underneath it, so
   cancel the leakage the same way .eq-site-header does. */
.eq-brief-hero {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  clear: none;
  width: auto;
  background: var(--white);
  padding: clamp(72px, 9vw, 132px) var(--gutter) clamp(62px, 7vw, 104px);
}
.eq-brief-hero__inner {
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
}
.eq-brief-hero h1,
.eq-received-card h1 {
  margin: 14px 0 24px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  font-weight: var(--fw-black);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.eq-brief-hero h1 em,
.eq-received-card h1 em {
  color: var(--amber-500);
  font-style: normal;
}
.eq-brief-hero__intro {
  max-width: 690px;
  margin: 0 auto;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.7vw, 1.4rem);
  font-weight: var(--fw-light);
  line-height: 1.55;
}
.eq-brief-hero__intro p,
.eq-brief-form-card__intro p,
.eq-brief-panel__copy p,
.eq-received-card__body p { margin: 0; }
.eq-brief-main {
  background: var(--paper-2);
  padding: clamp(72px, 8vw, 116px) var(--gutter);
}
.eq-brief-main__inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  width: min(var(--container), 100%);
  margin: 0 auto;
}
.eq-brief-main__inner > * { min-width: 0; }
/* Sticky offset for the brief columns. .eq-site-header is sticky and 53px tall
   (52px inner + 1px border), so anything sticky below it needs to clear that
   plus a fixed gap or it sits tight under the header. */
.eq-brief-main {
  --eq-brief-header-h: 53px;
  --eq-brief-sticky-gap: 28px;
  --eq-brief-sticky-top: calc(var(--eq-brief-header-h) + var(--eq-brief-sticky-gap));
}
.admin-bar .eq-brief-main { --eq-brief-header-h: 85px; } /* 53px + 32px admin bar */
@media screen and (max-width: 782px) {
  .admin-bar .eq-brief-main { --eq-brief-header-h: 99px; } /* 53px + 46px admin bar */
}
.eq-brief-panel {
  position: sticky;
  top: var(--eq-brief-sticky-top);
  padding-top: 22px;
  /* If the panel ever outgrows the viewport, scroll it internally rather than
     letting its lower half sit permanently off-screen. */
  max-height: calc(100vh - var(--eq-brief-sticky-top) - var(--eq-brief-sticky-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Gravity Forms scrolls to the form anchor on each step change; without this
   the top of the next step lands underneath the sticky site header. */
.eq-brief-form-card,
.eq-brief-form .gform_wrapper,
.eq-brief-form .gform_page {
  scroll-margin-top: var(--eq-brief-sticky-top, 81px);
}
.eq-brief-panel h2,
.eq-brief-form-card h2 {
  margin: 12px 0 22px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: var(--fw-black);
  line-height: 1.08;
  text-transform: uppercase;
}
.eq-brief-panel__copy,
.eq-brief-form-card__intro {
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 1.08rem;
  font-weight: var(--fw-light);
  line-height: 1.65;
}
.eq-brief-points {
  display: grid;
  gap: 14px;
  margin: 34px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line-200);
  list-style: none;
}
.eq-brief-points li {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
}
.eq-brief-points span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--ink);
  font-size: 0.85rem;
}
.eq-brief-form-card {
  overflow: hidden;
  padding: clamp(28px, 4.5vw, 58px);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-tile-sm);
  background: var(--white);
  box-shadow: 0 24px 60px rgba(3, 3, 27, 0.08);
}
.eq-brief-form-card h2 { margin-top: 0; }
.eq-brief-form-card__intro { margin-bottom: 36px; }
.eq-brief-form-card__privacy,
.eq-brief-form__notice {
  margin: 26px 0 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
}
.eq-brief-form-card__privacy a { color: var(--indigo-700); }

/* Gravity Forms is intentionally scoped to this page so admin-created forms
   elsewhere retain their own presentation. */
.eq-brief-form .gform_wrapper,
.eq-brief-form .gform-theme--framework { margin: 0; }
.eq-brief-form .gform_fields {
  row-gap: 28px !important;
  column-gap: 20px !important;
}
.eq-brief-form .gfield_label,
.eq-brief-form .gform-field-label {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.015em;
}
.eq-brief-form .gfield_description,
.eq-brief-form .gform-field-label--type-sub {
  color: var(--text-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}
.eq-brief-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.eq-brief-form select,
.eq-brief-form textarea {
  min-height: 52px !important;
  border: 1px solid var(--line-200) !important;
  border-radius: 5px !important;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.eq-brief-form textarea { min-height: 150px !important; resize: vertical; }
.eq-brief-form input:focus,
.eq-brief-form select:focus,
.eq-brief-form textarea:focus {
  border-color: var(--amber-500) !important;
  outline: 0 !important;
  box-shadow: var(--focus-ring) !important;
}
.eq-brief-form input[type="checkbox"],
.eq-brief-form input[type="radio"] { accent-color: var(--amber-500); }
.eq-brief-form .gchoice { margin-bottom: 8px; }
.eq-brief-form .gform_page_footer,
.eq-brief-form .gform_footer {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 36px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line-100);
}
.eq-brief-form .gform_button,
.eq-brief-form .gform_next_button,
.eq-brief-form .gform_previous_button {
  min-height: 52px !important;
  padding: 14px 26px !important;
  border: 2px solid var(--amber-500) !important;
  border-radius: 0 !important;
  background: var(--amber-500) !important;
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-size: 0.86rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.eq-brief-form .gform_previous_button {
  border-color: var(--indigo-700) !important;
  background: transparent !important;
  color: var(--indigo-700) !important;
}
.eq-brief-form .gform_button:hover,
.eq-brief-form .gform_next_button:hover {
  border-color: var(--indigo-700) !important;
  background: var(--indigo-700) !important;
}
.eq-brief-form .gf_progressbar_wrapper { margin-bottom: 36px !important; }
.eq-brief-form .gf_progressbar_title {
  color: var(--text-muted) !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.eq-brief-form .gf_progressbar { background: var(--paper) !important; }
.eq-brief-form .gf_progressbar_percentage { background: var(--amber-500) !important; }
.eq-brief-form .gfield_validation_message,
.eq-brief-form .gform_validation_errors {
  border-color: #c94848 !important;
  background: #fff5f5 !important;
  color: #8d2020 !important;
}

.eq-received-page {
  display: grid;
  min-height: 72vh;
  place-items: center;
  padding: clamp(84px, 10vw, 150px) var(--gutter);
  background: var(--paper-2);
}
.eq-received-card {
  position: relative;
  overflow: hidden;
  width: min(850px, 100%);
  padding: clamp(42px, 7vw, 88px);
  border-radius: var(--radius-tile);
  background: var(--ink);
  color: var(--white);
  text-align: center;
  box-shadow: 0 28px 70px rgba(3, 3, 27, 0.16);
}
.eq-received-card .eq-eyebrow { color: var(--amber-500); }
.eq-received-card h1 { color: var(--white); }
.eq-received-card__body {
  max-width: 610px;
  margin: 0 auto;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: var(--fw-light);
  line-height: 1.65;
}
.eq-received-card__body p + p { margin-top: 16px; }
.eq-received-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.eq-received-card__phone {
  margin: 28px 0 0;
  color: rgba(255,255,255,0.66);
  font-family: var(--font-sans);
}
.eq-received-card__phone a { color: var(--white); font-weight: var(--fw-semibold); }
.eq-received-card__bars {
  position: absolute;
  top: 28px;
  right: 30px;
  display: grid;
  gap: 7px;
}
.eq-received-card__bars span {
  display: block;
  width: 52px;
  height: 7px;
  background: var(--amber-500);
}

@media (max-width: 900px) {
  .eq-brief-main__inner { grid-template-columns: 1fr; }
  .eq-brief-panel {
    position: static;
    padding-top: 0;
    max-height: none;
    overflow-y: visible;
  }
  .eq-brief-panel__copy { max-width: 680px; }
  .eq-brief-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .eq-brief-hero {
    padding: 58px 22px 54px;
  }
  .eq-brief-hero__inner,
  .eq-brief-hero h1,
  .eq-brief-hero__intro {
    max-width: 100%;
    min-width: 0;
  }
  .eq-brief-hero h1,
  .eq-received-card h1 {
    font-size: clamp(2.15rem, 11.5vw, 3rem);
    overflow-wrap: anywhere;
  }
  .eq-brief-hero__intro {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
  }
  .eq-brief-main { padding: 52px 16px 58px; }
  .eq-brief-points { grid-template-columns: 1fr; }
  .eq-brief-form-card { padding: 28px 20px; border-radius: 14px; }
  .eq-brief-form .gform_page_footer,
  .eq-brief-form .gform_footer { align-items: stretch; flex-direction: column; }
  .eq-brief-form .gform_button,
  .eq-brief-form .gform_next_button,
  .eq-brief-form .gform_previous_button { width: 100% !important; margin: 0 !important; }
  .eq-received-page { padding: 64px 16px; }
  .eq-received-card { padding: 58px 22px 44px; border-radius: 16px; }
  .eq-received-card__actions { align-items: stretch; flex-direction: column; }
  .eq-received-card__actions .eq-btn { width: 100%; }
}

/* Search results */
.eq-search-hero { position:relative;overflow:hidden;padding:clamp(5rem,9vw,8rem) 0;background:var(--navy-900);color:var(--white); }
.eq-search-hero::after { position:absolute;right:-8rem;bottom:-12rem;width:34rem;height:34rem;border:4rem solid rgba(255,161,1,.12);border-radius:50%;content:""; }
.eq-search-hero__inner,.eq-search-results__inner { position:relative;z-index:1;width:min(100%,var(--container));margin:0 auto;padding:0 var(--gutter); }
.eq-search-hero__eyebrow { margin:0 0 1.2rem;color:var(--amber-500);font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase; }
.eq-search-hero h1 { max-width:950px;margin:0;color:var(--white);font-family:var(--font-display);font-size:clamp(2.7rem,6vw,5.6rem);font-weight:var(--fw-bold);letter-spacing:-.045em;line-height:1; }
.eq-search-hero h1 em { color:var(--amber-500);font-style:normal;overflow-wrap:anywhere; }
.eq-search-hero__form { display:flex;max-width:720px;margin-top:clamp(2rem,4vw,3rem);border-bottom:2px solid rgba(255,255,255,.42); }
.eq-search-hero__form:focus-within { border-color:var(--amber-500);box-shadow:0 2px 0 var(--amber-500); }
.eq-search-hero__form input { min-width:0;flex:1;padding:1rem 0;border:0;outline:0;background:transparent;color:var(--white);font-family:var(--font-sans);font-size:clamp(1rem,1.6vw,1.2rem); }
.eq-search-hero__form input::placeholder { color:rgba(255,255,255,.48); }
.eq-search-hero__form button { display:flex;align-items:center;gap:.7rem;padding:0 0 0 1.5rem;border:0;background:transparent;color:var(--amber-500);font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-button);text-transform:uppercase; }
.eq-search-hero__form button span { font-size:1.6rem;transition:transform var(--dur-base) var(--ease); }
.eq-search-hero__form button:hover span,.eq-search-hero__form button:focus-visible span { transform:translateX(5px); }
.eq-search-results { padding:clamp(4rem,8vw,7rem) 0;background:var(--paper-2); }
.eq-search-results__head { display:flex;align-items:center;gap:1.5rem;margin-bottom:2.5rem; }
.eq-search-results__head h2 { margin:0;color:var(--ink);font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:var(--fw-bold); }
.eq-search-results__head span { height:2px;flex:1;background:var(--amber-500); }
.eq-search-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem; }
.eq-search-card { min-width:0;background:var(--white);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease); }
.eq-search-card:hover { transform:translateY(-5px);box-shadow:0 18px 45px rgba(4,4,38,.1); }
.eq-search-card__link { display:grid;grid-template-columns:clamp(130px,18vw,220px) 1fr;height:100%;color:inherit;text-decoration:none; }
.eq-search-card__media { min-height:100%;margin:0;overflow:hidden;background:var(--indigo-700); }
.eq-search-card__media img { width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease); }
.eq-search-card:hover .eq-search-card__media img { transform:scale(1.04); }
.eq-search-card__body { display:flex;min-width:0;flex-direction:column;padding:clamp(1.5rem,3vw,2.25rem); }
.eq-search-card__type { margin:0 0 .75rem;color:var(--amber-600);font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase; }
.eq-search-card h3 { margin:0;color:var(--ink);font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:var(--fw-bold);line-height:1.15; }
.eq-search-card__summary { margin:1rem 0 1.5rem;color:var(--indigo-500);font-family:var(--font-sans);font-size:.98rem;line-height:1.55; }
.eq-search-card__more { display:flex;align-items:center;gap:.65rem;margin-top:auto;color:var(--indigo-700);font-family:var(--font-display);font-size:.76rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-button);text-transform:uppercase; }
.eq-search-card__more span { color:var(--amber-500);font-size:1.35rem;transition:transform var(--dur-base) var(--ease); }
.eq-search-card:hover .eq-search-card__more span { transform:translateX(5px); }
.eq-search-page .navigation.pagination { margin-top:3rem; }
.eq-search-page .nav-links { display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem; }
.eq-search-page .page-numbers { display:grid;min-width:46px;height:46px;place-items:center;padding:0 .85rem;border:1px solid var(--line-200);background:var(--white);color:var(--indigo-700);font-family:var(--font-display);font-weight:var(--fw-semibold);text-decoration:none; }
.eq-search-page .page-numbers.current,.eq-search-page a.page-numbers:hover { border-color:var(--amber-500);background:var(--amber-500);color:var(--white); }
.eq-search-empty { max-width:720px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem);background:var(--white);text-align:center; }
.eq-search-empty__mark { margin:0;color:var(--amber-500);font-family:var(--font-display);font-size:6rem;font-weight:var(--fw-black);line-height:1; }
.eq-search-empty h2 { margin:.75rem 0 1rem;color:var(--ink);font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-bold); }
.eq-search-empty > p:not(.eq-search-empty__mark) { margin:0 auto 1.75rem;color:var(--indigo-500);font-family:var(--font-sans);font-size:var(--fs-small);line-height:1.6; }
@media (max-width:900px) { .eq-search-grid { grid-template-columns:1fr; } }
@media (max-width:620px) {
  .eq-search-hero { padding:4.5rem 0; }
  .eq-search-hero__form button { padding-left:.75rem;font-size:0; }
  .eq-search-hero__form button span { font-size:1.8rem; }
  .eq-search-results { padding:3.5rem 0; }
  .eq-search-card__link { grid-template-columns:1fr; }
  .eq-search-card__media { min-height:0;aspect-ratio:16/9; }
  .eq-search-empty { padding:2.5rem 1.5rem; }
}

/* ── Contact page enquiry form ─────────────────────────────────────── */
.eq-contact-form {
  margin: 0 0 2.5rem;
  border: 1px solid var(--line, #e3e3e3);
  border-radius: var(--radius-tile-sm, 18px);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
}
.eq-contact-form__h2 {
  font-size: var(--fs-h3, 1.5rem);
  color: var(--ink, #000);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}
.contact-page .eq-contact-form .eq-brief-form { max-width: none; }
@media (max-width: 767px) {
  .eq-contact-form { margin-bottom: 2rem; }
}

/* ── Contact page: full-width map before the footer ────────────────── */
/* padding:0 is load-bearing — legacy styles.css sets section{padding-top:200px} */
.eq-contact-map {
  padding: 0;
  margin: 0;
  width: 100%;
  line-height: 0;
}
.eq-contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vh, 520px);
  border: 0;
}