/* ==========================================================================
   Opus AV — Components
   Each block is a self-contained "lift-and-paste" partial for WordPress.
   Order: header / hero / equalizer / cta / pull-quote / sector-panel /
   service-promise / footer.
   ========================================================================== */

/* Inter web font — primary digital alternative for Helvetica Light --------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');


/* ── Page loader (equalizer mark draws in, then dissolves) ──────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--opus-charcoal);
  display: grid;
  place-items: center;
  transition: opacity 600ms var(--ease-opus), visibility 0s linear 600ms;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__bars {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 90px;
}
.loader__bars span {
  display: block;
  width: 10px;
  background: var(--opus-orange);
  border-radius: 1px;
  animation: loader-grow 900ms var(--ease-opus) forwards;
  opacity: 0;
  height: 0;
}
.loader__bars span:nth-child(1) { animation-delay:  60ms; --loader-h: 30px; }
.loader__bars span:nth-child(2) { animation-delay: 140ms; --loader-h: 54px; }
.loader__bars span:nth-child(3) { animation-delay: 220ms; --loader-h: 12px; }
.loader__bars span:nth-child(4) { animation-delay: 300ms; --loader-h: 42px; }
.loader__bars span:nth-child(5) { animation-delay: 380ms; --loader-h: 30px; }
@keyframes loader-grow {
  0%   { opacity: 0; height: 0; }
  60%  { opacity: 1; height: var(--loader-h); }
  100% { opacity: 1; height: var(--loader-h); }
}
.loader__label {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.55);
  animation: fade-in 600ms var(--ease-opus) 600ms forwards;
  opacity: 0;
}
@keyframes fade-in { to { opacity: 1; } }


/* ── Cursor follower glow (fine-pointer only) ──────────────────────────── */
.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(237, 123, 34, 0.22) 0%, rgba(237, 123, 34, 0.07) 42%, transparent 68%);
  transform: translate3d(var(--cx, -300px), var(--cy, -300px), 0) translate(-50%, -50%);
  opacity: 0;
  transition: opacity 400ms var(--ease-opus);
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
.cursor-glow.is-strong {
  background: radial-gradient(circle, rgba(237, 123, 34, 0.36) 0%, rgba(237, 123, 34, 0.12) 45%, transparent 75%);
}
@media (max-width: 880px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}


/* ── Magnetic CTAs ─────────────────────────────────────────────────────── */
.cta {
  position: relative;
  transition: transform var(--dur-fast) var(--ease-opus),
              box-shadow var(--dur-fast) var(--ease-opus),
              background-color var(--dur-fast) var(--ease-opus);
  will-change: transform;
}
.cta__label { display: inline-flex; align-items: center; gap: var(--space-2); position: relative; z-index: 1; }
/* Sweeping orange backdrop on hover (for ghost CTA) */
.cta--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-opus);
  z-index: 0;
}
.cta--ghost:hover::before { transform: translateX(0); }
.cta--ghost:hover { border-color: var(--accent); }


/* ── Sector media: gallery (cross-fading 2-3 images) ───────────────────── */
.sector-panel__media {
  /* Stack — children cross-fade */
}
.sector-panel__media-stack {
  position: absolute;
  inset: 0;
}
.sector-panel__media-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--ease-opus),
              transform var(--dur-vlow) var(--ease-opus);
  transform: scale(var(--ken, 1.04));
}
.sector-panel__media-img.is-active { opacity: 1; }
.sector-panel__media:hover .sector-panel__media-img.is-active {
  transform: scale(calc(var(--ken, 1.04) + 0.02))
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
}

/* Gallery progress pips — bottom-left, small */
.sector-panel__media-pips {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  gap: 6px;
  z-index: 4;
}
.sector-panel__media-pips span {
  width: 16px; height: 2px;
  /* invisible padding expands the click/hover hit area without shifting layout
     (the flex gap is measured edge-to-edge, so visible spacing stays the same) */
  padding: 8px 4px;
  box-sizing: content-box;
  background-color: rgba(255, 255, 255, 0.35);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-opus),
              width var(--dur-base) var(--ease-opus),
              height var(--dur-base) var(--ease-opus);
}
.sector-panel__media-pips span:hover {
  width: 22px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.85);
}
.sector-panel__media-pips span.is-active {
  background-color: var(--accent);
  width: 28px;
}
.sector-panel__media-pips span.is-active:hover {
  width: 32px;
  height: 3px;
}

/* Hotspot dots — kit details on hover */
.sector-panel__hotspot {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--opus-white);
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 0 0 0 rgba(237, 123, 34, 0.6);
  animation: hotspot-pulse 2.4s var(--ease-opus) infinite;
}
@keyframes hotspot-pulse {
  0%   { box-shadow: 0 0 0 0  rgba(237, 123, 34, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(237, 123, 34, 0); }
  100% { box-shadow: 0 0 0 0  rgba(237, 123, 34, 0); }
}
.sector-panel__hotspot::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--opus-charcoal);
  color: var(--opus-white);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  transition: opacity var(--dur-fast) var(--ease-opus),
              transform var(--dur-fast) var(--ease-opus);
  pointer-events: none;
  border-left: 2px solid var(--accent);
}
.sector-panel__hotspot:hover::after,
.sector-panel__hotspot:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .sector-panel__hotspot { animation: none; }
}


/* ── Ambient floating equalizer dots (decorative) ───────────────────────── */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0.5;
}
.ambient[data-ambient-mood="light"] { opacity: 0.34; color: var(--accent); }
.ambient__dot {
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  animation: drift 18s linear infinite;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0)            scale(1);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(120px, -75vh, 0)    scale(1);   opacity: 0; }
}
.ambient { opacity: 1; }
.surface-dark .ambient { color: rgba(237, 123, 34, 0.85); }
.surface-soft .ambient { color: rgba(237, 123, 34, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .ambient__dot { animation: none; opacity: 0.22; }
}


/* ── Stat-counter particle burst ───────────────────────────────────────── */
.burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.burst span {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.burst.is-on span {
  animation: burst 900ms var(--ease-opus) forwards;
}
@keyframes burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 0px))) scale(1.2); }
}


/* ── Section transition: orange thread that draws across ────────────────── */
.section-thread {
  position: relative;
  height: 1px;
  background: rgba(89, 89, 89, 0.18);
  overflow: visible;
}
.section-thread::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 1200ms var(--ease-opus);
}
.section-thread.is-in::before { width: 100%; }
.section-thread::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left 1200ms var(--ease-opus), opacity 200ms;
}
.section-thread.is-in::after {
  left: 100%;
  opacity: 1;
}


/* ── Site header ────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-opus),
              backdrop-filter var(--dur-base) var(--ease-opus);
}
.site-header.is-scrolled {
  background: rgba(31, 31, 31, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
}
.site-header__logo img {
  height: 72px;
  width: auto;
  /* No size change on scroll — locked dimensions per William's note. */
}
@media (max-width: 880px) {
  .site-header__logo img { height: 52px; }
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-header__nav a {
  color: var(--opus-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  position: relative;
  padding-block: var(--space-1);
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-opus);
}
.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--accent);
  color: var(--opus-white) !important;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-opus),
              box-shadow var(--dur-fast) var(--ease-opus);
}
.site-header__cta::after { display: none !important; }
.site-header__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--opus-white);
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top:  7px; }

@media (max-width: 880px) {
  .site-header__nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5) var(--container-pad);
    background: rgba(31, 31, 31, 0.97);
    backdrop-filter: blur(12px);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-opus);
    gap: var(--space-3);
  }
  .site-header__nav.is-open { transform: translateX(0); }
  .site-header__nav a { font-size: var(--fs-h2); font-weight: var(--fw-light); }
  .nav-toggle { display: inline-flex; }
}


/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background: var(--opus-charcoal);
  color: var(--opus-white);
}
.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(31, 31, 31, 0.65) 0%,
    rgba(31, 31, 31, 0.55) 50%,
    rgba(31, 31, 31, 0.78) 100%
  );
}
.hero__content {
  align-self: center;
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-7);
  display: grid;
  gap: var(--space-3);
  max-width: 980px;
  /* parallax — JS writes --hero-shift in pixels (capped) */
  transform: translateY(var(--hero-shift, 0px));
  will-change: transform;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.hero__eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.hero__headline {
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--opus-white);
  max-width: 18ch;
}
.hero__headline em {
  font-style: normal;
  color: var(--accent);
  font-weight: var(--fw-light);
}
.hero__subhead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-regular);
  color: var(--opus-mist);
  max-width: 52ch;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.hero__indicator {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  color: var(--opus-mist);
  z-index: 2;
}
.hero__indicator-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
}


/* ── CTA button ─────────────────────────────────────────────────────────── */
.cta {
  --cta-bg:   var(--accent);
  --cta-fg:   var(--opus-white);
  --cta-pad-y: 1.05rem;
  --cta-pad-x: 1.8rem;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-base) var(--ease-opus),
              color           var(--dur-base) var(--ease-opus),
              box-shadow      var(--dur-base) var(--ease-opus),
              transform       var(--dur-fast) var(--ease-opus);
  position: relative;
  isolation: isolate;
}
/* ── Universal hover system ──────────────────────────────────────────────
   Every CTA reacts the same way: invert to charcoal with the contextual
   accent (sector or brand orange) glowing around it. The contextual accent
   is read from --rxn-accent which JS / nested context overrides:
     · default                 → Opus Orange
     · inside .sector-panel    → that sector's accent
     · inside .surface-dark    → Opus White (clean inversion)
     · header CTA              → currently-active sector accent (JS-set) */
.cta {
  --rxn-accent: var(--accent);
  --rxn-bg:     var(--opus-charcoal);
  --rxn-fg:     var(--opus-white);
}
.sector-panel .cta            { --rxn-accent: var(--sector-accent, var(--accent)); }
.surface-dark .cta            { --rxn-bg: var(--opus-white); --rxn-fg: var(--opus-charcoal); }
.surface-dark .cta--ghost     { --rxn-bg: var(--opus-white); --rxn-fg: var(--opus-charcoal); }
.site-header__cta             { --rxn-accent: var(--header-accent, var(--accent)); }

.cta:hover,
.cta:focus-visible {
  background: var(--rxn-bg);
  color:      var(--rxn-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--rxn-accent) 25%, transparent),
    0 0 28px 4px color-mix(in srgb, var(--rxn-accent) 45%, transparent),
    0 0 60px 8px color-mix(in srgb, var(--rxn-accent) 18%, transparent);
}
.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow { transform: translateX(6px); }

.cta--ghost {
  --cta-bg: transparent;
  --cta-fg: var(--opus-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.cta--ghost:hover,
.cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--rxn-accent);
  border-color: var(--rxn-accent);
  box-shadow: 0 0 28px 2px color-mix(in srgb, var(--rxn-accent) 35%, transparent);
}

.cta--link {
  --cta-bg: transparent;
  --cta-fg: var(--rxn-accent);
  padding-inline: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  color: var(--rxn-accent);
}
.cta--link:hover,
.cta--link:focus-visible {
  transform: none;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--rxn-accent) 70%, white 30%);
}
.cta__arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-opus);
}

/* Header CTA "Talk to us" — pill button with sector-aware reaction */
.site-header__cta:hover,
.site-header__cta:focus-visible {
  background: var(--rxn-accent);
  color: var(--opus-charcoal);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32),
              0 0 0 3px color-mix(in srgb, var(--rxn-accent) 30%, transparent);
}
/* Plain-text header nav links — accent underline + text colour swap */
.site-header__nav a:not(.site-header__cta)::after {
  background: var(--header-accent, var(--accent));
}
.site-header__nav a:not(.site-header__cta):hover,
.site-header__nav a:not(.site-header__cta):focus-visible {
  color: var(--header-accent, var(--accent));
}

/* Footer column links and address phone — pick up the accent on hover */
.site-footer__col a:hover,
.site-footer__col a:focus-visible,
.site-footer__phone:hover,
.site-footer__phone:focus-visible { color: var(--accent); }

/* Sector-nav dot label */
.sector-nav__dot:hover { color: var(--active-accent, var(--accent)); }

/* Hotspot pulse on hover — already accent; no override needed */


/* ── Equalizer mark animations ──────────────────────────────────────────── */
/* The supplied SVG is referenced wholesale — never recreated.
   When animated as the standalone bars-only mark, we wrap it and rely on
   per-bar CSS animations applied via the JS controller. */

.eq-loader,
.eq-pulse,
.eq-scroll {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 32px;
  width: 56px;
}
.eq-loader span,
.eq-pulse span,
.eq-scroll span {
  display: block;
  width: 4px;
  background: var(--accent);
  border-radius: 1px;
}

/* Canonical 5·9·2·7·5 heights, strict ratio (3px unit, 27px max).
   Per BRAND_RULES §1: pulses pass through the canonical state every cycle. */
.eq-loader span:nth-child(1), .eq-pulse span:nth-child(1), .eq-scroll span:nth-child(1) { height: 15px; }
.eq-loader span:nth-child(2), .eq-pulse span:nth-child(2), .eq-scroll span:nth-child(2) { height: 27px; }
.eq-loader span:nth-child(3), .eq-pulse span:nth-child(3), .eq-scroll span:nth-child(3) { height:  6px; }
.eq-loader span:nth-child(4), .eq-pulse span:nth-child(4), .eq-scroll span:nth-child(4) { height: 21px; }
.eq-loader span:nth-child(5), .eq-pulse span:nth-child(5), .eq-scroll span:nth-child(5) { height: 15px; }

/* Gentle pulse — every cycle returns to the canonical 5·9·2·7·5 frame. */
@keyframes eq-pulse-1 { 0%,100%{height:15px} 50%{height:21px} }
@keyframes eq-pulse-2 { 0%,100%{height:27px} 50%{height:18px} }
@keyframes eq-pulse-3 { 0%,100%{height: 6px} 50%{height:12px} }
@keyframes eq-pulse-4 { 0%,100%{height:21px} 50%{height:12px} }
@keyframes eq-pulse-5 { 0%,100%{height:15px} 50%{height:21px} }

.eq-pulse span { animation-duration: 2.4s; animation-timing-function: var(--ease-opus); animation-iteration-count: infinite; }
.eq-pulse span:nth-child(1) { animation-name: eq-pulse-1; animation-delay: 0s; }
.eq-pulse span:nth-child(2) { animation-name: eq-pulse-2; animation-delay: .15s; }
.eq-pulse span:nth-child(3) { animation-name: eq-pulse-3; animation-delay: .3s; }
.eq-pulse span:nth-child(4) { animation-name: eq-pulse-4; animation-delay: .45s; }
.eq-pulse span:nth-child(5) { animation-name: eq-pulse-5; animation-delay: .6s; }

/* sector mood colour overrides */
.eq-pulse[data-mood="teal"] span     { background: var(--accent-sensory); }
.eq-pulse[data-mood="charcoal"] span { background: var(--opus-orange); }

@media (prefers-reduced-motion: reduce) {
  .eq-pulse span { animation: none !important; }
}

/* Decorative pill band (footer / divider) — uses the standalone mark only */
.eq-band {
  display: flex;
  align-items: flex-end;
  height: 12px;
  gap: 2px;
  overflow: hidden;
  padding-inline: var(--space-3);
}
.eq-band span {
  display: block;
  width: 3px;
  background: var(--accent);
  flex: 0 0 auto;
}
/* canonical heights repeated; the JS appends as many groups as fit */
.eq-band span[data-h="5"] { height: 6px; }
.eq-band span[data-h="9"] { height: 12px; }
.eq-band span[data-h="2"] { height: 3px; }
.eq-band span[data-h="7"] { height: 9px; }


/* ── Scroll progress (top of viewport) ──────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: calc(var(--z-header) + 1);
  transition: width 80ms linear;
  pointer-events: none;
}


/* ── Section divider — animated equalizer band (decorative) ─────────────── */
.section-divider {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-default);
}
.section-divider--soft     { background: var(--surface-soft); }
.section-divider--charcoal { background: var(--surface-dark); }
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(89, 89, 89, 0.18);
  margin-inline: var(--space-3);
}
.section-divider--charcoal::before,
.section-divider--charcoal::after { background: rgba(255, 255, 255, 0.12); }


/* ── Pull-quote section ─────────────────────────────────────────────────── */
.pitch {
  background: var(--surface-soft);
  padding-block: var(--space-7);
}
.pitch .container { display: grid; gap: var(--space-3); }
.pitch__quote {
  font-weight: var(--fw-light);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  border-left: 4px solid var(--accent);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  max-width: 70ch;
}
.pitch__attribution {
  font-size: var(--fs-small);
  color: var(--opus-grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ── Sector spine ───────────────────────────────────────────────────────── */
.sector-spine { position: relative; }
.sector-spine__intro {
  text-align: center;
  padding-block: var(--space-6) var(--space-4);
}
.sector-spine__intro h2 {
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  color: var(--text-strong);
  margin-top: var(--space-2);
}
.sector-spine__intro p {
  color: var(--opus-grey);
  max-width: 60ch;
  margin: var(--space-3) auto 0;
}

.sector-panel {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  padding-block: var(--space-7);
  overflow: hidden;
  isolation: isolate;
}
.sector-panel__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.sector-panel__copy { display: grid; gap: var(--space-3); }
.sector-panel__title {
  font-weight: var(--fw-light);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.sector-panel__lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--opus-grey);
  max-width: 50ch;
}
.sector-panel__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--opus-charcoal);
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
}
.sector-panel__media img,
.sector-panel__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-vlow) var(--ease-opus);
  will-change: transform;
}
/* Slow zoom — image gently scales while the panel is in view (kenburns).
   The scale variable is updated by JS as the panel scrolls through the
   viewport, so the zoom tracks the user's scroll, not a fixed loop. */
.sector-panel__media img {
  transform: scale(var(--ken, 1.04));
}
/* Mouse-tilt: a small 3D nudge that follows the cursor on hover. */
.sector-panel__media:hover img {
  transform: scale(calc(var(--ken, 1.04) + 0.02))
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
}
.sector-panel__media::before {
  /* subtle inner accent edge — reveals on reveal-in */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  z-index: 3;
  pointer-events: none;
  transition: border-color var(--dur-base) var(--ease-opus);
}
.sector-panel.is-active .sector-panel__media::before {
  border-color: var(--sector-accent, var(--accent));
  opacity: 0.35;
}

/* Top accent rule on every sector image — full width, thin by default,
   grows DOWNWARDS into a bold curtain when "See our X work" is hovered. */
.sector-panel__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--sector-accent, var(--accent));
  z-index: 4;
  transition: height var(--dur-slow) var(--ease-opus),
              opacity var(--dur-base) var(--ease-opus);
  transform-origin: top;
  pointer-events: none;
}
.sector-panel:has(.cta--link:hover) .sector-panel__media::after,
.sector-panel:has(.cta--link:focus-visible) .sector-panel__media::after,
.sector-panel.is-link-hover .sector-panel__media::after {
  height: 11%;
  opacity: 0.85;
}
.sector-panel__index {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.sector-panel__index::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}

/* ── Sector themes ───────────────────────────────────────────────────────
   1. Each sector exposes a `--sector-accent` that's used for its eyebrow,
      edge frame, pip indicator, link underline and ambient dots.
   2. Backgrounds alternate Light / Dark / Light / Dark / Light / Dark to
      give the spine a strong rhythm (overrides the brand-mood single
      colour).  All accents are picked to carry on both light + dark. */

/* Per-sector accent palette — works on Mist (light) and Charcoal (dark) */
.sector-panel--religion  { --sector-accent: #D4A155; } /* warm honey */
.sector-panel--education { --sector-accent: #ED7B22; } /* opus orange */
.sector-panel--sensory   { --sector-accent: #00A4B4; } /* signal teal */
.sector-panel--industry  { --sector-accent: #6E9CC2; } /* civic steel-blue */
.sector-panel--leisure   { --sector-accent: #F0653D; } /* energetic coral */
.sector-panel--community { --sector-accent: #8AA56C; } /* community olive */

/* Sector accents bleed into the components inside the panel */
.sector-panel .sector-panel__index    { color: var(--sector-accent); }
.sector-panel .cta--link              { color: var(--sector-accent); border-bottom-color: var(--sector-accent); }
.sector-panel .sector-panel__media-pips span.is-active { background-color: var(--sector-accent); }
.sector-panel.is-active .sector-panel__media::before  { border-color: var(--sector-accent); }
.sector-panel .ambient { color: var(--sector-accent); }
/* Per-image crop hints — used to focus the visible part of a slide */
.sector-panel__media-img.is-pos-left   { object-position: 28% center; }
.sector-panel__media-img.is-pos-top    { object-position: center 14%; }
.sector-panel__media-img.is-pos-bottom { object-position: center 80%; }
.sector-panel__media-img.is-pos-topleft{ object-position: 22% 18%; }

/* Dark-bg variant — applied to even sectors (2, 4, 6) ------------------- */
.sector-panel--dark {
  background: var(--opus-charcoal);
  color: var(--opus-mist);
}
.sector-panel--dark .sector-panel__title { color: var(--opus-white); }
.sector-panel--dark .sector-panel__lede  { color: rgba(242, 242, 242, 0.78); }
.sector-panel--dark .ambient { opacity: 0.55; }

/* Light-bg variant — applied to odd sectors (1, 3, 5) ------------------- */
.sector-panel--light {
  background: var(--opus-mist);
  color: var(--opus-grey);
}
.sector-panel--light .sector-panel__title { color: var(--opus-charcoal); }
.sector-panel--light .sector-panel__lede  { color: var(--opus-grey); }
.sector-panel--light .ambient { opacity: 0.32; }

/* Visual cue between alternating sectors — a thin coloured top rule */
.sector-panel + .sector-panel { border-top: 1px solid rgba(89, 89, 89, 0.10); }
.sector-panel--dark + .sector-panel,
.sector-panel + .sector-panel--dark { border-top-color: rgba(255, 255, 255, 0.06); }

/* alternating layout — every 2nd panel flips media side */
.sector-panel:nth-of-type(even) .sector-panel__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.sector-panel:nth-of-type(even) .sector-panel__copy  { order: 2; }
.sector-panel:nth-of-type(even) .sector-panel__media { order: 1; }

@media (max-width: 880px) {
  .sector-panel { min-height: auto; padding-block: var(--space-6); }
  .sector-panel__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .sector-panel:nth-of-type(even) .sector-panel__copy  { order: 0; }
  .sector-panel:nth-of-type(even) .sector-panel__media { order: 0; }
  .sector-panel__media { aspect-ratio: 16 / 10; }
}


/* ── Sticky sector dot navigator (right side) ───────────────────────────── */
.sector-nav {
  position: fixed;
  right: clamp(0.75rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-overlay);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: auto;
}
.sector-nav.is-visible { display: flex; }
.sector-nav__dot {
  display: grid;
  align-items: center;
  grid-template-columns: auto auto;
  gap: var(--space-2);
  padding: 4px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--opus-charcoal);
  transition: color var(--dur-fast) var(--ease-opus);
}
.sector-nav__dot::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-opus),
              transform var(--dur-base) var(--ease-opus);
}
.sector-nav__dot.is-active::after {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.4);
}
.sector-nav__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--dur-base) var(--ease-opus),
              transform var(--dur-base) var(--ease-opus);
}
.sector-nav__dot:hover .sector-nav__label,
.sector-nav__dot.is-active .sector-nav__label,
.sector-nav:hover .sector-nav__label {
  opacity: 1;
  transform: translateX(0);
}
/* The dot colour auto-inverts based on the active sector background:
   on Light sectors → charcoal, on Dark sectors → mist. */
.sector-nav.is-on-dark  .sector-nav__dot { color: var(--opus-mist); }
.sector-nav.is-on-light .sector-nav__dot { color: var(--opus-charcoal); }
/* Active dot always uses the active sector's accent so it pops against
   either backdrop. */
.sector-nav__dot.is-active::after {
  background: var(--active-accent, var(--accent));
  border-color: var(--active-accent, var(--accent));
}
@media (max-width: 880px) {
  .sector-nav { display: none !important; }
}


/* ── Word-by-word reveal (used on the pitch quote and headlines) ────────── */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 700ms var(--ease-opus),
              transform 700ms var(--ease-opus);
}
.split-word.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .split-word { opacity: 1; transform: none; }
}


/* ── Clients marquee ────────────────────────────────────────────────────── */
.clients {
  background: var(--surface-default);
  padding-block: var(--space-6);
  border-block: var(--hairline);
  overflow: hidden;
}
.clients__intro {
  text-align: center;
  margin-bottom: var(--space-4);
}
.clients__intro h2 {
  font-weight: var(--fw-light);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--text-strong);
  margin-top: var(--space-1);
}
.clients__intro p {
  color: var(--opus-grey);
  font-size: var(--fs-small);
  margin-top: var(--space-1);
}
.clients__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-2);
  width: max-content;
  animation: marquee 60s linear infinite;
}
.clients__viewport:hover .clients__track { animation-play-state: paused; }
.clients__logo {
  flex: 0 0 auto;
  height: 56px;
  display: grid;
  place-items: center;
  filter: grayscale(1) contrast(0.95) brightness(0.95);
  opacity: 0.7;
  transition: filter var(--dur-base) var(--ease-opus),
              opacity  var(--dur-base) var(--ease-opus);
}
.clients__logo:hover { filter: grayscale(0); opacity: 1; }
.clients__logo img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; transform: none; }
  .clients__viewport { overflow: auto; }
}


/* ── About-us teaser (heritage band) ─────────────────────────────────────── */
.about-band {
  background: var(--surface-soft);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7);
}
.about-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  position: relative;
  z-index: 1;
}
.about-band__copy h2 {
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin-top: var(--space-2);
}
.about-band__copy p {
  margin-top: var(--space-3);
  max-width: 56ch;
}
.about-band__copy p + p { margin-top: var(--space-2); }
.about-band__cta { margin-top: var(--space-4); }
/* Heritage frame — a stack of three offset rules in the corner */
.about-band__frame {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--opus-charcoal);
  overflow: hidden;
  border-radius: 2px;
}
.about-band__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-vlow) var(--ease-opus);
  transform: scale(1.04);
}
.about-band__frame:hover img { transform: scale(1.08); }
.about-band__frame::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 18%, 18% 18%, 18% 100%, 0 100%);
}
.about-band__stat {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: var(--opus-charcoal);
  color: var(--opus-white);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  z-index: 2;
}
.about-band__stat-num {
  font-weight: var(--fw-light);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
}
.about-band__stat-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.7);
  margin-top: 2px;
}
@media (max-width: 880px) {
  .about-band__inner { grid-template-columns: 1fr; }
}


/* ── On-the-road / van band ─────────────────────────────────────────────── */
.van-band {
  padding-block: var(--space-7);
  position: relative;
  overflow: hidden;
}
.van-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-5);
  align-items: center;
  position: relative;
  z-index: 1;
}
.van-band__copy h2 {
  font-weight: var(--fw-light);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--opus-white);
  margin-top: var(--space-2);
  letter-spacing: var(--ls-h1);
}
.van-band__copy p {
  margin-top: var(--space-3);
  color: rgba(242, 242, 242, 0.78);
  max-width: 44ch;
}
.van-band__media {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--space-2);
  align-items: stretch;
  height: 460px;
}
.van-band__shot {
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  background: var(--opus-charcoal);
  transform-style: preserve-3d;
}
.van-band__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-vlow) var(--ease-opus);
  transform: scale(var(--ken, 1.04));
}
.van-band__shot:hover img {
  transform: scale(calc(var(--ken, 1.04) + 0.04));
}
.van-band__shot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--accent);
  z-index: 1;
}
.van-band__shot--tall { transform: translateY(-24px); }

@media (max-width: 880px) {
  .van-band__inner { grid-template-columns: 1fr; }
  .van-band__media { height: 320px; grid-template-columns: 1fr 1fr; }
  .van-band__shot:nth-child(3) { display: none; }
  .van-band__shot--tall { transform: none; }
}


/* ── Service promise band ───────────────────────────────────────────────── */
.promise {
  background: var(--opus-charcoal);
  color: var(--opus-mist);
  padding-block: var(--space-7);
  position: relative;
  overflow: hidden;
}
.promise .container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.promise__lede {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.promise__quote {
  font-weight: var(--fw-light);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--opus-white);
  margin: 0;
}
.promise__quote em { color: var(--accent); font-style: normal; }
.promise__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--opus-mist);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color var(--dur-fast) var(--ease-opus),
              border-color var(--dur-fast) var(--ease-opus);
}
.promise__cta:hover,
.promise__cta:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.promise__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-opus);
}
.promise__cta:hover .promise__cta-arrow,
.promise__cta:focus-visible .promise__cta-arrow {
  transform: translateX(3px);
}
.promise__stats {
  display: grid;
  gap: var(--space-3);
  border-left: 1px solid rgba(255,255,255,0.18);
  padding-left: var(--space-4);
}
.promise__stat-num {
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--opus-white);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.promise__stat-num[data-count] {
  /* Reset text content during count; JS will write the number in. */
  min-width: 1ch;
}
.promise__stat-label {
  font-size: var(--fs-small);
  color: rgba(242,242,242,0.7);
  margin-top: var(--space-1);
}
@media (max-width: 880px) {
  .promise .container { grid-template-columns: 1fr; }
  .promise__stats { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: var(--space-4); }
}


/* ── Tagline ribbon — replaces the old footer pill band ─────────────────── */
.tagline-ribbon {
  background: var(--opus-charcoal);
  border-top: 2px solid var(--accent);
  overflow: hidden;
  position: relative;
}
.tagline-ribbon__viewport {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding-block: var(--space-2);
}
.tagline-ribbon__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  align-items: center;
  animation: marquee 80s linear infinite;
  white-space: nowrap;
}
.tagline-ribbon__viewport:hover .tagline-ribbon__track { animation-play-state: paused; }
.tagline-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.04em;
  color: rgba(242, 242, 242, 0.78);
  text-transform: uppercase;
}
.tagline-ribbon__item em {
  font-style: normal;
  color: var(--accent);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  font-size: 0.82em;
}
.tagline-ribbon__sep {
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .tagline-ribbon__track { animation: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--opus-charcoal);
  color: var(--opus-mist);
  padding-block: var(--space-6) var(--space-3);
  position: relative;
}
.site-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); }
.site-footer__band { display: none; } /* legacy band removed — replaced by .tagline-ribbon */
.site-footer__col h3 {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.site-footer__col ul { display: grid; gap: var(--space-1); }
.site-footer__col a { color: rgba(242,242,242,0.8); font-size: var(--fs-small); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__brand img {
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 220px;
  margin-bottom: var(--space-3);
  display: block;
}
.site-footer__address {
  font-size: var(--fs-small);
  color: rgba(242,242,242,0.7);
  font-style: normal;
  line-height: 1.6;
}
.site-footer__phone {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--opus-white);
  font-weight: var(--fw-medium);
}
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-caption);
  color: rgba(242,242,242,0.55);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer__legal-links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
}
.site-footer__legal-links a {
  color: rgba(242, 242, 242, 0.7);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  transition: color var(--dur-fast) var(--ease-opus);
}
.site-footer__legal-links a:hover { color: var(--accent); }
@media (max-width: 880px) {
  .site-footer .container { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer .container { grid-template-columns: 1fr; }
}

/* ── Footer: social icons ────────────────────────────────────────────────── */

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  color: var(--text-muted);
  border: 1px solid rgba(242, 242, 242, 0.15);
  border-radius: 2px;
  transition: color var(--dur-base) var(--ease-opus),
              border-color var(--dur-base) var(--ease-opus);
}

.site-footer__social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Inactive icon (e.g. Instagram not yet configured) */
.site-footer__social-link--inactive {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Footer: accreditation tag (sits in the legal bar) ─────────────────── */

.site-footer__accreditation {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.38);
}

/* ── Partners & Accreditations section ───────────────────────────────────── */
/* Shared between homepage and services page                                  */

.partners {
  padding: var(--space-10) 0;
  background: var(--opus-charcoal);
  color: var(--opus-white);
}

.partners__header {
  margin-bottom: var(--space-8);
  max-width: 48ch;
}

.partners__header .eyebrow { color: var(--accent); }

.partners__header h2 {
  color: var(--opus-white);
  font-weight: var(--fw-light);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.partners__header p {
  font-size: var(--fs-small);
  color: rgba(242, 242, 242, 0.52);
  margin: 0;
}

/* Two partner firm cards side by side */
.partners__firms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(242, 242, 242, 0.08); /* gap colour between cards */
  margin-bottom: var(--space-6);
}

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

.partners__firm {
  background: var(--opus-charcoal);
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  position: relative;
  border-top: 2px solid transparent;
  transition: border-top-color 380ms var(--ease-opus);
}

.partners__firm:hover { border-top-color: var(--accent); }

/* Logo display area */
.partners__firm-logo-wrap {
  display: flex;
  align-items: center;
  height: 52px;
  margin-bottom: var(--space-4);
}

.partners__firm-logo {
  max-height: 40px;
  max-width: 148px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.60;
  transition: opacity 280ms ease;
}

.partners__firm:hover .partners__firm-logo { opacity: 0.88; }

.partners__firm-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.partners__firm h3 {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: var(--fw-medium);
  color: var(--opus-white);
  margin-top: 0;
  margin-bottom: var(--space-3);
  line-height: 1.25;
}

.partners__firm p {
  font-size: 0.875rem;
  color: rgba(242, 242, 242, 0.58);
  line-height: 1.72;
  margin: 0 0 var(--space-4);
  flex: 1;
}

.partners__firm .cta--link {
  font-size: 0.82rem;
  color: rgba(242, 242, 242, 0.36);
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
}

.partners__firm .cta--link:hover { color: var(--accent); }

/* Accreditation strip below the firm cards — centred, compact */
.partners__accreds {
  border-top: 1px solid rgba(242, 242, 242, 0.10);
  padding-top: var(--space-5);
  text-align: center;
}

.partners__accreds-label {
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.28);
  margin: 0 0 var(--space-3);
  display: block;
}

.partners__accred-strip {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
}

.partners__accred {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(242, 242, 242, 0.50);
  font-size: 0.80rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.partners__accred-logo {
  height: 38px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}