@import url("tokens.css?v=client-brand-20260910-balanced");

/* Shared content pages — About, Services, Contact, and the case study.

   These are identical across both concepts by design: the concept choice is
   about how the WORK is presented, which lives on Home and Projects. Built
   once, linked from both. See docs/02-information-architecture.md.

   Gold #DAA22C is fill-only — it measures 2.13:1 on light and fails AA. */

:root {
  --motion-ui: var(--motion-control);
  --control-radius: var(--radius-pill);
  --control-pad-x: var(--chip-pad-inline);
  --control-gap: var(--space-2);
  --nav-item-gap: var(--space-2);
  --nav-link-pad-x: var(--space-3);
}
* { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--text-body)/var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.wrap, .cwrap {
  width: 100%; max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* ── site header ───────────────────────────────────────────────────── */
/* One shared brand lockup and header geometry, defined in tokens.css. */
.site {
  position: sticky; top: 0; z-index: 60; background: rgba(246,247,247,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.site__in { display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(var(--header-height) - 1px); padding-block: var(--header-padding); }
.site__brand { display: flex; align-items: center; gap: var(--brand-gap); min-height: var(--nav-target);
  text-decoration: none; color: inherit; }
.site__brand img { display: block; width: var(--brand-mark-size); height: var(--brand-mark-size); flex-shrink: 0;
  object-fit: contain; }
.site__brand span { font-family: var(--font-display); font-weight: 800;
  letter-spacing: var(--brand-tracking); font-size: var(--brand-name-size); line-height: var(--brand-leading); white-space: nowrap; }
.site__brand small { display: block; font-family: var(--font-label);
  font-size: var(--brand-tagline-size); letter-spacing: var(--tracking-eyebrow); color: var(--gold-deep); font-weight: 400;
  margin-top: var(--space-1); }
.site__nav { display: flex; gap: var(--nav-item-gap); margin-left: auto; flex-wrap: nowrap; }
.site__nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--nav-link-pad-x);
  color: var(--mute); text-decoration: none; font-size: var(--text-ui); font-weight: 600;
  white-space: nowrap;
}
.site__nav a:hover { color: var(--ink); }
.site__nav a:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.site__nav a[aria-current="page"],
.site__nav a.is-section-active {
  color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold);
}
.site__services { position: relative; display: block; }
.site__services-row { display: flex; align-items: center; }
.site__services-row > a { padding-right: var(--space-1); }
.site__services-row button,
.mob__services-row button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink); cursor: pointer;
}
/* The desktop chevron belongs to "Services", not to the space after it. At a
   full 44px wide it put 70px between "Services" and "Projects" where every
   other pair sits at 32px, so the row read as unevenly spaced. Size the box to
   the icon plus one link pad, and carry the 44 x 44 target on a centred
   pseudo-element instead of on the visible box. */
.site__services-row button {
  position: relative;
  width: auto;
  padding-inline: 0 var(--nav-link-pad-x);
}
.site__services-row button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--nav-target);
  height: var(--nav-target);
  transform: translate(-50%, -50%);
}
.site__services-row button:hover { background: transparent; }
.site__services-row button:focus-visible,
.mob__services-row button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.site__services-row button img,
.mob__services-row button img { width: 18px; height: 18px; transition: transform 200ms ease; }
[data-services-toggle][aria-expanded="true"] img { transform: rotate(180deg); }
.site__services-menu {
  position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; width: 244px;
  padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: #FFFFFF; box-shadow: 0 18px 46px rgba(10,10,10,.16);
}
.site__services-menu[hidden] { display: none; }
.site__services-menu a { min-height: 48px; padding-inline: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: 4px;
  background: var(--gold); color: #1A1A1A;      /* 7.6:1 — the compliant pairing */
  font-weight: 600; text-decoration: none; border: 0; font-size: var(--text-ui); cursor: pointer;
  transition: transform var(--motion-button) var(--ease-standard), background-color var(--motion-button) var(--ease-standard), color var(--motion-button) var(--ease-standard), opacity var(--motion-button) var(--ease-standard);
}
.btn:hover:not(:disabled) { transform: translateY(var(--button-hover-lift)); }
.btn:active:not(:disabled) { transform: translateY(0) scale(var(--button-press-scale)); }
.btn:disabled { background: var(--line); color: var(--mute); cursor: not-allowed;
                transform: none; box-shadow: none; }
.btn:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
/* The light ring is --color-gold-text against the button's own gold fill, which
   is 2.39:1. On the dark page heads and dark bands the gold ring clears 3:1. */
.phead .btn:focus-visible,
.band--dark .btn:focus-visible { outline: var(--focus-dark); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ── page head ─────────────────────────────────────────────────────── */
.phead {
  padding: var(--section-space) 0;
  background: var(--navy); color: var(--paper);
}
.phead--image {
  position: relative; isolation: isolate; min-height: clamp(520px, 66vw, 700px);
  display: flex; align-items: flex-end; overflow: hidden;
}
.phead__media, .phead__media picture { position: absolute; inset: 0; z-index: -2; display: block; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.phead--image-focus-right .phead__media img { object-position: 62% center; }
.phead--image::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--hero-overlay-strong), var(--hero-overlay-medium) 56%, var(--hero-overlay-soft)); }
@media (max-width: 959.98px) {
  .phead--image::after {
    background:
      linear-gradient(180deg, transparent, transparent 45%, var(--hero-overlay-medium)),
      linear-gradient(90deg, var(--hero-overlay-strong), var(--hero-overlay-medium) 56%, var(--hero-overlay-soft));
  }
}
.phead__content { position: relative; }
.phead .eyebrow, .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--text-eyebrow);
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-gold-text); margin: 0 0 12px;
}
.phead .eyebrow, .contact-card .eyebrow {
  color: var(--gold);
}
h1 { font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: var(--text-page-title); line-height: .98; margin: 0; }
.phead .lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--color-on-dark-secondary); max-width: 62ch; margin: 20px 0 0; }
.phead__actions { margin: var(--space-5) 0 0; }
.phead--proof { padding-block: var(--section-space); background: var(--color-dark); }
.phead--proof .lede { max-width: var(--measure-compact); }
.eyebrow--on-light { color: var(--color-gold-text); }
.about-hero { margin: 32px 0 0; }
.about-hero__media {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px;
  background: var(--navy);
}
.about-hero__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 44%;
}
.about-hero figcaption {
  margin-top: 10px; color: rgba(246,247,247,.62);
  font: 400 var(--text-eyebrow)/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.about-proof-rail {
  --about-proof-line: var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-8); border-top: 1px solid var(--about-proof-line); border-bottom: 1px solid var(--about-proof-line);
}
.about-proof-rail > div { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-right: 1px solid var(--about-proof-line); }
.about-proof-rail > div + div { padding-left: var(--space-5); }
.about-proof-rail > div:last-child { border-right: 0; }
.about-proof-rail__value { display: block; color: var(--ink); font: 800 clamp(26px, 3vw, 38px)/1 var(--font-display); letter-spacing: -.03em; }
.about-proof-rail__label { display: block; margin-top: 8px; color: var(--mute); font: 500 10px/1.4 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.about-proof-rail--dark {
  --about-proof-line: var(--color-on-dark-border);
  margin: var(--space-8) 0 0;
}
.about-proof-rail--dark .about-proof-rail__value { color: var(--color-on-dark); }
.about-proof-rail--dark .about-proof-rail__label { color: var(--color-on-dark-tertiary); }
.about-timeline { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.about-timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.about-timeline__year { color: var(--color-gold-text); font: 500 var(--text-meta)/1.4 var(--font-label); letter-spacing: .1em; }
.about-timeline b { display: block; color: var(--ink); font: 700 20px/1.2 var(--font-display); }
.about-timeline p { margin: 6px 0 0; color: var(--mute); }
.about-card__index { display: block; margin-bottom: 28px; color: var(--gold-deep); font: 500 var(--text-eyebrow)/1.4 var(--font-label); letter-spacing: .16em; }
.about-intent { position: relative; min-height: 220px; padding: 28px; }
.about-intent h3 { font-size: clamp(24px, 2.4vw, 32px); }
.about-intent p { max-width: 40ch; }
.about-intent__rule { position: absolute; right: 28px; bottom: 28px; width: 34px; height: 2px; background: var(--gold); }
.about-value { position: relative; min-height: 190px; padding: 24px; }
.about-value h3 { font-size: 22px; }
.about-close { padding-block: clamp(56px, 8vw, 104px) !important; }
.about-close .lede { max-width: 46ch; }
.about-close__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 28px 0 0; }
.text-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.text-link span { display: inline-block; margin-left: 8px; transition: transform var(--motion-button) var(--ease-standard); }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(var(--hover-shift-inline)); }
.text-link--light { color: var(--paper); }
.credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; margin-top: 32px; }
.credential-grid figure { margin: 0; min-width: 0; }
.credential-grid__media { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line);
  border-radius: 8px; background: #FFFFFF; }
.credential-grid__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.credential-grid figcaption { margin-top: 10px; color: var(--mute);
  font: 500 var(--text-eyebrow)/1.4 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
h2 { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: -.015em;
  font-size: var(--text-section-title); line-height: 1.05; margin: 0 0 8px; }
h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
section.band { padding: var(--section-space) 0; border-top: 1px solid var(--line); }
section.band > .wrap > .lede { color: var(--mute); max-width: 62ch; margin: 0 0 26px; }
.band--dark { background: var(--navy); color: var(--paper); border-top: 0; }
.band--dark h2, .band--dark h3 { color: var(--paper); }
.band--dark .lede, .band--dark p { color: rgba(246,247,247,.72); }
.band--dark .eyebrow { color: var(--gold); }

/* ── generic blocks ────────────────────────────────────────────────── */
.cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
  margin-top: 24px;
}
.values-grid .card { grid-column: span 2; }
.values-grid .card:nth-child(4) { grid-column: 2 / span 2; }
.values-grid .card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .about-proof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-proof-rail > div:nth-child(2) { border-right: 0; }
  .about-proof-rail > div:nth-child(-n+2) { border-bottom: 1px solid var(--about-proof-line); }
  .about-proof-rail > div:nth-child(3) { padding-left: 0; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values-grid .card,
  .values-grid .card:nth-child(4) { grid-column: auto; }
  .values-grid .card:nth-child(5) { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
}
@media (max-width: 520px) {
  .phead--image-focus-right .phead__media img { object-position: 70% center; }
  .about-proof-rail { margin-bottom: 48px; }
  .about-proof-rail > div, .about-proof-rail > div + div { padding: 16px 12px 16px 0; }
  .about-proof-rail > div:nth-child(even) { padding-left: 12px; }
  .about-timeline li { grid-template-columns: 1fr; gap: 8px; }
  .about-intent { min-height: 0; }
  .about-close__actions { align-items: stretch; flex-direction: column; }
  .about-close__actions .btn { width: 100%; }
  .values-grid { grid-template-columns: 1fr; gap: 16px; }
  .values-grid .card,
  .values-grid .card:nth-child(4),
  .values-grid .card:nth-child(5) { grid-column: auto; width: auto; }
}
.proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-5); }
.cols--spaced { margin-top: var(--space-5); }
.logos-fallback { margin: var(--space-5) 0 0; color: var(--color-text-muted); }
.not-found__actions { margin: var(--space-5) 0 0; }
.not-found__links { max-width: var(--measure-compact); margin-top: var(--space-6); }
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .proof-grid { grid-template-columns: 1fr; }
}
.card {
  background: var(--paper-2); border-radius: 8px; padding: 24px;
}
.band--dark .card { background: rgba(246,247,247,.06); }
.card p { margin: 0; color: var(--mute); font-size: var(--text-ui); }
.band--dark .card p { color: rgba(246,247,247,.68); }

.service-overview {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin-top: 32px;
}
.service-overview__card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  scroll-margin-top: var(--header-clearance);
  transition: transform var(--motion-ui) var(--ease-standard), opacity var(--motion-ui) var(--ease-standard);
}
.service-overview__media {
  aspect-ratio: 4 / 3; margin: 0; overflow: hidden;
  background: var(--paper-2) center / cover no-repeat;
}
.service-overview__media picture,
.service-overview__media img { display: block; width: 100%; height: 100%; }
.service-overview__media img {
  object-fit: cover; transition: transform var(--motion-media) ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-overview__card:hover { border-color: var(--gold); transform: translateY(var(--hover-card-lift)); }
  .service-overview__card:hover .service-overview__media img { transform: scale(var(--hover-media-scale)); }
}
.service-overview__content {
  display: flex; flex: 1; flex-direction: column; padding: 24px;
}
.service-overview__number {
  margin: 0 0 24px; color: var(--gold-deep);
  font: 500 var(--text-eyebrow)/1 'IBM Plex Mono', monospace; letter-spacing: .16em;
}
.service-overview__card h3 { font-size: 22px; line-height: 1.15; }
.service-overview__card h3 { transition: transform var(--motion-control) var(--ease-standard), opacity var(--motion-control) var(--ease-standard); transform-origin: left center; }
.service-overview__card:hover h3 { transform: translateX(var(--hover-shift-inline)); opacity: .9; }
.service-overview__lede { min-height: 6.5em; margin: 8px 0 20px; color: var(--mute); font-size: 14.5px; }
.service-overview__card .list { margin-bottom: 22px; }
.service-overview__link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: auto;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.service-overview__link:hover { color: var(--gold-deep); }
.service-overview__link:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; background: var(--gold); }
.service-covers { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); gap: clamp(32px,7vw,96px); align-items: start; }
.service-covers__intro h2 { margin-bottom: 16px; }
.service-covers__intro .lede { color: var(--mute); }
.service-covers__list { list-style: none; margin: 0; padding: 0; counter-reset: service-cover; }
.service-covers__list li { counter-increment: service-cover; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; min-height: 64px; border-top: 1px solid var(--line); font-size: 17px; }
.service-covers__list li:last-child { border-bottom: 1px solid var(--line); }
.service-deliverables, .service-related__grid { margin-top: var(--space-5); }
.service-related__grid .card { color: inherit; text-decoration: none; }
.service-covers__index { color: var(--gold-deep); font: 500 var(--text-eyebrow)/1 var(--mono); letter-spacing: .12em; }
@media (max-width: 700px) { .service-covers { grid-template-columns: 1fr; gap: 24px; } }
.band--dark .list li { border-color: rgba(246,247,247,.14); }
.band--dark .list a { color: var(--paper); text-decoration-color: var(--gold); }
.band--dark .list a:hover { color: var(--gold); }
.band--dark .list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.phead .list a { color: var(--paper); text-decoration-color: var(--gold); }
.phead .list a:hover { color: var(--gold); }
.phead .list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Editorial process rail: sequence without a grid of generic cards. */
.steps { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: s; position: relative; }
.steps::before { content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: var(--color-gold); opacity: .55; }
.steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 56px minmax(180px,.7fr) minmax(0,1.3fr); gap: 24px; align-items: start; min-width: 0; padding: 24px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--color-gold); border-radius: 50%; background: var(--color-paper); color: var(--gold-deep); font: 500 var(--text-eyebrow)/1 var(--mono); letter-spacing: .12em; }
.steps b { display: block; padding-top: 5px; font: 700 21px/1.2 var(--font-display); }
.steps p { margin: 5px 0 0; color: var(--mute); font-size: var(--text-ui); line-height: 1.55; }
@media (max-width: 700px) { .steps li { grid-template-columns: 44px minmax(0,1fr); gap: 16px; padding: 20px 0; } .steps::before { left: 21px; top: 24px; bottom: 24px; } .steps li::before { width: 44px; height: 44px; } .steps li > div { grid-column: 2; } .steps b { padding-top: 0; font-size: 19px; } }

/* Workflow with project proof: shared by the Services hub and both detail pages. */
.workflow-layout { display: grid; grid-template-columns: minmax(0,7fr) minmax(320px,5fr); gap: var(--space-7); align-items: start; margin-top: var(--space-6); }
.workflow-layout .steps { margin: 0; }
.workflow-layout .steps li { grid-template-columns: 56px minmax(0,1fr); gap: var(--space-5); }
.workflow-proof { position: sticky; top: var(--header-clearance); overflow: hidden; border-radius: var(--radius-card); background: var(--color-dark); color: var(--color-on-dark); }
.workflow-proof__media { margin: 0; }
.workflow-proof__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.workflow-proof__media figcaption { padding: var(--space-3) var(--space-6) 0; color: var(--color-on-dark-tertiary); font: 500 var(--text-eyebrow)/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.workflow-proof__body { padding: var(--space-5) var(--space-6) var(--space-6); border-top: 1px solid var(--color-on-dark-border); }
.workflow-proof__body .eyebrow { margin-bottom: var(--space-3); color: var(--color-gold); }
.workflow-proof__body h3 { margin: 0; color: var(--color-on-dark); font: 700 28px/1.12 var(--font-display); }
.workflow-proof__body p:not(.eyebrow) { max-width: var(--measure-compact); margin: var(--space-3) 0 var(--space-5); color: var(--color-on-dark-secondary); }
.workflow-proof__body .btn:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }
@media (max-width: 959px) {
  .workflow-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .workflow-proof { position: static; order: -1; }
  .workflow-proof__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .workflow-layout { gap: var(--space-5); margin-top: var(--space-5); }
  .workflow-layout .steps li { grid-template-columns: 44px minmax(0,1fr); gap: var(--space-4); }
  .workflow-proof__media img { aspect-ratio: 4 / 3; }
  .workflow-proof__media figcaption { padding-inline: var(--space-5); }
  .workflow-proof__body { padding: var(--space-5); }
  .workflow-proof__body h3 { font-size: var(--text-section-title); }
}

.facts { list-style: none; margin: 0; padding: 0; }
.facts--credentials { margin-top: var(--space-4); }
.facts li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt, .facts .k { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.facts .v { font-weight: 600; text-align: right; }
/* Additive modifier: sector rows lead into the filtered projects view, so the
   row carries a real target and a real count instead of a repeated label. The
   base .facts anatomy is unchanged. */
.facts--links { max-width: var(--measure-long); }
.facts--links li { display: block; padding: 0; }
.facts--links a {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4);
  align-items: baseline; min-height: var(--nav-target);
  padding-block: var(--space-3);
  color: inherit; text-decoration: none;
  transition: color var(--motion-control) var(--ease-standard);
}
/* Swap the two roles for this modifier: the sector name is what a reader scans
   for, so it takes the content treatment and full ink, and the count drops to
   the mono metadata treatment used elsewhere for figures. */
.facts--links .k {
  font-family: var(--font-body); font-size: var(--text-body); font-weight: 600;
  color: inherit; text-transform: none; letter-spacing: normal;
}
.facts--links .v {
  font-family: var(--font-label); font-size: 11.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 1.15px; color: var(--mute);
  transition: color var(--motion-control) var(--ease-standard);
}
.facts--links .go { align-self: baseline; width: var(--icon-inline); height: var(--icon-inline);
  transition: transform var(--motion-control) var(--ease-standard); }
.facts--links a:hover, .facts--links a:hover .v { color: var(--gold-deep); }
.facts--links a:hover .go { transform: translateX(var(--hover-shift-inline)); }
.facts--links a:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.sector-cta { margin: var(--space-6) 0 0; }

/* Review-only pending items are marked, never silently published. */
.pending {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; background: #7A5A12; color: #fff;
  padding: 2px 7px; border-radius: 3px; margin-left: 8px; vertical-align: 2px;
}
.note {
  background: var(--paper-2); border-left: 3px solid var(--gold);
  padding: 16px 18px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: var(--text-ui);
}
.note p { margin: 0; }
.note p + p { margin-top: 8px; }

/* ── contact form ─────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; max-width: 520px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: var(--text-detail); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--text-body); padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
  transition: none;
}
.field input, .field select { height: 48px; }
.field textarea { min-height: 144px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #AEB3B3; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--gold-deep); outline: 2px solid var(--gold-deep); outline-offset: 3px;
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: var(--color-negative);
}
.field input::placeholder, .field textarea::placeholder { color: #747879; opacity: 1; }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--paper-2); color: var(--mute); cursor: not-allowed;
}
.form__msg { font-size: var(--text-detail); color: var(--mute); margin: 0; }

/* Customer-facing project brief and confirmed contact channels. */
.contact-brief {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(32px, 6vw, 72px); align-items: start;
}
.contact-brief__copy > .lede { max-width: 52ch; color: var(--mute); }
.contact-points { list-style: none; margin: 32px 0 0; padding: 0; }
.contact-points li {
  display: grid; grid-template-columns: 160px 1fr; gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.contact-points li:last-child { border-bottom: 1px solid var(--line); }
.contact-points .k {
  color: var(--gold-deep); font: 500 var(--text-eyebrow)/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.contact-card {
  padding: 32px; border-radius: 8px; background: var(--color-dark-raised); color: var(--paper);
  position: sticky; top: var(--header-clearance);
}
.contact-card h2 { color: var(--paper); }
.contact-card h3 { font-size: clamp(24px, 2.5vw, 32px); }
.contact-card > p:not(.eyebrow) { margin: 12px 0 0; color: rgba(246,247,247,.72); }
.contact-card__actions { display: grid; gap: 12px; margin-top: 24px; }
.btn--dark-outline {
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--color-on-dark-control-border);
}
.btn--dark-outline:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.contact-card .btn:focus-visible { outline-color: var(--gold); }
.contact-card__details { list-style: none; margin: 28px 0 0; padding: 0; }
.contact-card__details li {
  display: grid; grid-template-columns: 124px 1fr; gap: 16px;
  padding: 14px 0; border-top: 1px solid rgba(246,247,247,.14);
}
.contact-card__details span {
  color: rgba(246,247,247,.62); font: 500 10px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.contact-card__details a, .contact-card__details strong {
  color: var(--paper); font-weight: 500; text-decoration: none; overflow-wrap: anywhere;
}
.contact-email { background: var(--paper-2); }
.contact-brief--simple { grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); }
.contact-form-panel > h2 { margin-bottom: 20px; }
.contact-form-panel .contact-form { margin-top: 20px; }
.contact-email__layout {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(560px, 1.28fr);
  gap: clamp(40px, 7vw, 88px); align-items: start;
}
.contact-email__intro { position: sticky; top: var(--header-clearance); }
.contact-email__intro > .lede { max-width: 48ch; color: var(--mute); }
.contact-email__notes { list-style: none; margin: 32px 0 0; padding: 0; }
.contact-email__notes li {
  position: relative; padding: 14px 0 14px 20px; border-top: 1px solid var(--line);
  color: var(--mute); font-size: var(--text-ui);
}
.contact-email__notes li:last-child { border-bottom: 1px solid var(--line); }
.contact-email__notes li::before {
  content: ""; position: absolute; left: 0; top: 22px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold);
}
.contact-form {
  padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line);
  border-radius: 8px; background: #fff; box-shadow: 0 18px 46px rgba(10,10,10,.08);
}
.contact-form__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px;
}
.contact-form .field--wide { grid-column: 1 / -1; }
.contact-form__footer {
  display: flex; align-items: center; gap: 20px; margin-top: 24px;
}
.contact-form__status {
  max-width: var(--measure-compact); margin: 0; color: var(--mute);
  font-size: var(--text-body); line-height: var(--leading-body);
}
.contact-form__status[hidden], .contact-form__status-actions[hidden] { display: none; }
.contact-form__status-eyebrow, .contact-form__status h3 { display: none; }
.contact-form__status-message { margin: 0; }
.contact-form__status[data-state="success"] {
  position: relative; max-width: none; padding: var(--space-7);
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-dark-raised); color: var(--color-on-dark-secondary);
}
.contact-form__status[data-state="success"]::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-1);
  background: var(--color-gold);
}
.contact-form__status[data-state="success"] .contact-form__status-eyebrow {
  display: block; margin: 0 0 var(--space-4); color: var(--color-gold);
  font: 400 var(--text-attribution)/var(--leading-attribution) var(--font-label);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.contact-form__status[data-state="success"] h3 {
  display: block; margin: 0; color: var(--color-on-dark);
  font: 700 var(--text-section-title)/1 var(--font-display);
}
.contact-form__status[data-state="success"] .contact-form__status-message {
  margin-top: var(--space-4); max-width: var(--measure-compact);
}
.contact-form__status[data-state="error"] {
  position: relative; max-width: none; padding: var(--space-7);
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-dark-raised); color: var(--color-on-dark-secondary);
}
.contact-form__status[data-state="error"]::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-1);
  background: var(--color-negative-on-dark);
}
.contact-form__status[data-state="error"] .contact-form__status-eyebrow {
  display: block; margin: 0 0 var(--space-4); color: var(--color-negative-on-dark);
  font: 400 var(--text-attribution)/var(--leading-attribution) var(--font-label);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.contact-form__status[data-state="error"] h3 {
  display: block; margin: 0; color: var(--color-on-dark);
  font: 700 var(--text-section-title)/1 var(--font-display);
}
.contact-form__status[data-state="error"] .contact-form__status-message {
  margin-top: var(--space-4); max-width: var(--measure-compact);
}
/* The error path leaves the eyebrow and title empty because no approved copy
   exists for them. Collapse them so the panel does not expose an empty <h3> to
   the accessibility tree, or reserve the eyebrow's bottom margin as a stray gap. */
.contact-form__status[data-state="error"] .contact-form__status-eyebrow:empty,
.contact-form__status[data-state="error"] h3:empty {
  display: none;
}
.contact-form__status-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-4); margin-top: var(--space-5);
}
.contact-form__status-link {
  min-height: var(--nav-target); display: inline-flex; align-items: center;
  color: var(--color-on-dark); font-weight: 600; text-underline-offset: var(--space-1);
}
.contact-form__status-link:focus-visible {
  outline: var(--focus-dark); outline-offset: var(--focus-offset);
}
.contact-form.is-submitted .contact-form__grid,
.contact-form.is-submitted > .contact-form__footer > button { display: none; }
.contact-form.is-submitted .contact-form__footer { display: block; margin-top: 0; }
@media (max-width: 1100px) {
  .contact-email__layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-email__intro { position: static; }
}

/* ── case study ────────────────────────────────────────────────────── */
.case-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.case-head__copy, .case-head__media { min-width: 0; }
.case-head__media { margin: 0; }
.case-head__media picture {
  display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 8px;
  background: var(--color-dark-raised);
}
.case-head__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-head__media figcaption {
  margin-top: 12px; color: rgba(246,247,247,.62);
  font: 400 var(--text-eyebrow)/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.case__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.case__grid .photo { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; position: relative;
  background: var(--color-dark-raised); }
.case__grid .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__gap {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--text-eyebrow); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(246,247,247,.6); padding: 16px;
}

/* ── footer + sticky whatsapp ──────────────────────────────────────── */
.foot { background: #0A0A0A; color: rgba(246,247,247,.68); padding: clamp(44px,6vw,72px) 0;
  border-top: 1px solid rgba(246,247,247,.12); font-size: var(--text-detail); }
.foot a { color: #F6F7F7; text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.foot__row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(220px,.8fr);
  gap: clamp(36px,7vw,96px); align-items: start; }
.foot__brand { margin: 0 0 18px; color: #F6F7F7; font-family: 'Archivo', sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.foot__brand span { display: block; margin-top: 5px; color: var(--gold);
  font: 400 9.5px/1.4 'IBM Plex Mono', monospace; letter-spacing: .2em; }
.foot__meta, .foot__contact { margin: 0; line-height: 1.75; }
.foot__meta span, .foot__legal { color: rgba(246,247,247,.48); }
.foot__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__label { margin: 0 0 10px; color: var(--gold); font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .16em; text-transform: uppercase; }
.foot__nav > p:not(.foot__label):not(.foot__legal) { display: grid; margin: 0; }
.foot__nav > p > a { min-height: 44px; display: inline-flex; align-items: center; }
.foot__legal { max-width: 36ch; margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; }
.wa {
  position: fixed; right: var(--fab-inset); bottom: var(--fab-inset); z-index: 80;
  width: var(--fab-size); height: var(--fab-size); padding: 0; border-radius: var(--radius-pill);
  background: var(--color-whatsapp); color: var(--color-dark); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-hover);
  transition: transform var(--motion-button) var(--ease-standard);
  isolation: isolate;
}
.wa:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.wa::before {
  content: "";
  position: absolute;
  inset: calc(var(--fab-inset) * -0.33);
  border: 1px solid var(--color-whatsapp-halo);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.78);
  pointer-events: none;
  z-index: -1;
  transition: transform var(--motion-button) var(--ease-standard), opacity var(--motion-button) var(--ease-standard);
}
.wa:hover, .wa:focus-visible { transform: translateY(var(--button-hover-lift)) scale(var(--hover-control-scale)); box-shadow: var(--shadow-menu); }
.wa:hover::before, .wa:focus-visible::before { opacity: 1; transform: scale(1); }
.wa img { transition: transform var(--motion-button) var(--ease-standard); }
.wa:hover img, .wa:focus-visible img { transform: scale(var(--hover-icon-scale)); }
.wa:active { transform: translateY(0) scale(var(--button-press-scale)); }

@media (prefers-reduced-motion: reduce) {
  .btn, .wa { transition: none; }
  .btn:hover, .btn:active, .wa:hover, .wa:active { transform: none; }
  .wa::before, .wa img { transition: none; }
  .wa:hover::before, .wa:focus-visible::before { opacity: 0; transform: none; }
  .wa:hover img, .wa:focus-visible img { transform: none; }
}
.wa img { width: 26px; height: 26px; display: block;
}

@media (max-width: 959.98px) {
  .service-head, .contact-brief { grid-template-columns: 1fr; }
  .service-head { gap: 32px; }
  .contact-brief { gap: 40px; }
  .contact-card { position: static; }
  .contact-points li { grid-template-columns: 132px 1fr; gap: 16px; }
  .facts li { grid-template-columns: 1fr; }
  .facts .v { text-align: left; }
  .foot { padding-bottom: 112px; }
  .foot__row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .credential-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-card { padding: 24px; }
  .contact-points li, .contact-card__details li { grid-template-columns: 1fr; gap: 8px; }
  .contact-form { padding: 24px; }
  .contact-form__grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-form .field--wide { grid-column: auto; }
  .contact-form__footer { align-items: stretch; flex-direction: column; gap: 12px; }
  .contact-form__footer .btn { width: 100%; }
  .contact-form__status[data-state="success"] { padding: var(--space-6) var(--space-5); }
  .contact-form__status-actions { align-items: stretch; flex-direction: column; }
  .contact-form__status-link { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── shared Projects page ──────────────────────────────────────────── */
/* Every card is server-rendered; the filter hides with CSS and never
   fetches, per CLAUDE.md — JS-gated sectors would cost the queries ING
   needs to rank for. */
/* The filter rail itself is owned by concept-hero.css. Re-declaring it here at
   equal specificity only overrode its responsive spacing, so this file states
   nothing about it. */
.proj__loc { font-size: 13.5px; color: var(--mute); margin: 3px 0 0; }
.proj[hidden] { display: none; }

/* Social channels — see concept-hero.css for provenance. */
.foot__social { margin: 18px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.foot__social a { width: var(--nav-target); height: var(--nav-target); padding: 0; display: inline-flex; align-items: center;
  justify-content: center; color: var(--color-on-dark); border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-control); text-decoration: none;
  transition: transform var(--motion-control) var(--ease-standard),
    border-color var(--motion-control) var(--ease-standard),
    background-color var(--motion-control) var(--ease-standard); }
.foot__social img { display: block; width: 20px; height: 20px;
  transition: transform var(--motion-control) var(--ease-standard); }
.foot__social a:hover { transform: translateY(var(--hover-control-lift));
  border-color: var(--color-gold); background-color: var(--color-on-dark-hover-surface); }
.foot__social a:hover img { transform: scale(var(--hover-control-scale)); }
.foot__social a:active { transform: scale(var(--button-press-scale));
  background-color: var(--color-on-dark-active-surface); }

/* Anchor targets must clear the sticky header, or #maintenance lands with its
   heading tucked underneath it. */
[id] { scroll-margin-top: var(--header-clearance); }

/* ── mobile menu ───────────────────────────────────────────────────────
   Matches the concepts. Without this the six nav links wrapped to two rows
   and the sticky header stood 179px tall at 375px — 27% of the viewport,
   permanently. docs/02 also requires a real slide-down menu. */
.burger {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px 10px;
  background: transparent; border: 0; cursor: pointer;
  flex: 0 0 44px; flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease; }
.burger:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mob { display: none; }
.mob[hidden] { display: none; }
.mob ul { list-style: none; margin: 0 0 18px; padding: 0; }
.mob a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font-size: 17px; font-weight: 500;
}
.mob a[aria-current="page"] { color: var(--gold-deep); font-weight: 600; }
.mob a.is-section-active { color: var(--gold-deep); font-weight: 600; }
.mob .btn { width: 100%; margin-bottom: 4px; }
.mob__services-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; }
.mob__services-row > a { min-width: 0; }
.mob__services-menu { padding: 0 0 8px 16px; }
.mob__services-menu[hidden] { display: none; }
.mob__services-menu a { min-height: 48px; font-size: var(--text-ui); color: var(--mute); }

@media (max-width: 959.98px) {
  /* Keep mobile project copy readable before the eager hero image completes. */
  .js .proj-head__copy > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .site__nav { display: none; }
  .burger { display: flex; }
  .mob:not([hidden]) {
    display: block; padding: 6px 0 20px;
    background: var(--paper); border-top: 1px solid var(--line);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
  }
}
@media (max-width: 959.98px) {
  .service-overview { grid-template-columns: 1fr; }
  .service-overview__content { padding: 22px; }
  .service-overview__number { margin-bottom: 20px; }
  .service-overview__lede { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .burger span, .service-overview__card, .service-overview__media img,
  .site__services-row button img, .mob__services-row button img { transition: none; }
  .service-overview__card:hover { transform: none; }
  .service-overview__card:hover .service-overview__media img { transform: none; }
}

/* ── service page imagery ──────────────────────────────────────────────
   The two service pages were all lists and text cards. The six curated
   photographs are reused here on purpose — they are the only publishable
   ones — and each sits where it fits what is being described. Gaps are
   labelled rather than hidden, consistent with the photo audit. */
.svc-hero { padding: 0 0 clamp(24px, 3.5vw, 44px); }
.service-head {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.service-head__copy, .service-head__media { min-width: 0; }
.svc-shot { margin: 0; }
.svc-shot__frame {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; position: relative;
  background: linear-gradient(158deg, #2C3A44, #101A21);
}
.svc-hero .svc-shot__frame { aspect-ratio: 16 / 9; }
.svc-shot__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-shot figcaption {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--text-eyebrow); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); margin-top: 12px;
}
.service-head__media .svc-shot figcaption { color: rgba(246,247,247,.62); }
.service-head__media .svc-shot__frame img { object-position: center top; }
.svc-shot__gap {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 20px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--text-eyebrow); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(246, 247, 247, .55); line-height: 1.7;
}
.svc-gallery {
  display: grid; gap: 24px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
@media (max-width: 959.98px) {
  .service-head, .case-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 520px) {
  .svc-gallery, .case__grid { gap: 16px; }
  .service-head__media .svc-shot figcaption { min-height: 36px; padding-right: 72px; }
}

/* Shared content motion: short, one-shot reveals using composited properties. */
.js .phead__content > *, .js .service-head__copy > *, .js .case-head__copy > *,
.js .proj-head__copy > * {
  animation: shared-hero-in var(--motion-hero) var(--ease-standard) both;
  animation-delay: calc(var(--hero-index, 0) * var(--motion-stagger));
}
.js .phead__content > :nth-child(1), .js .service-head__copy > :nth-child(1),
.js .case-head__copy > :nth-child(1), .js .proj-head__copy > :nth-child(1) { --hero-index: 0; }
.js .phead__content > :nth-child(2), .js .service-head__copy > :nth-child(2),
.js .case-head__copy > :nth-child(2), .js .proj-head__copy > :nth-child(2) { --hero-index: 1; }
.js .phead__content > :nth-child(3), .js .service-head__copy > :nth-child(3),
.js .case-head__copy > :nth-child(3), .js .proj-head__copy > :nth-child(3) { --hero-index: 2; }
.js .phead__content > :nth-child(4), .js .service-head__copy > :nth-child(4),
.js .case-head__copy > :nth-child(4), .js .proj-head__copy > :nth-child(4) { --hero-index: 3; }
.js .phead__media img, .js .service-head__media img, .js .case-head__media img,
.js .proj-head__media img {
  transform: scale(var(--motion-hero-scale-rest));
  transform-origin: var(--motion-hero-origin);
  animation: hero-media-drift var(--motion-hero-drift) var(--ease-drift) infinite alternate;
}
.js .hero-entry .phead__media img,
.js .hero-entry .service-head__media img,
.js .hero-entry .proj-head__media img,
.js .hero-entry .c03-hero__media img {
  animation: none;
  transform: scale(var(--motion-hero-scale-start));
  transform-origin: var(--motion-hero-origin);
}
.js .hero-entry.is-entry-ready .phead__media img,
.js .hero-entry.is-entry-ready .service-head__media img,
.js .hero-entry.is-entry-ready .proj-head__media img,
.js .hero-entry.is-entry-ready .c03-hero__media img {
  transform: scale(var(--motion-hero-scale-rest));
  transition: transform var(--motion-hero-entry) var(--ease-standard);
  animation: hero-media-drift var(--motion-hero-drift) var(--ease-drift)
    calc(var(--motion-hero-entry) + var(--motion-hero-entry-delay)) infinite alternate;
}
.js .hero-entry .phead__content > *,
.js .hero-entry .service-head__copy > *,
.js .hero-entry .proj-head__copy > *,
.js .hero-entry .case-head__copy > *,
.js .hero-entry .c03-hero__content > * { animation: none; }
.js .hero-entry .phead__content,
.js .hero-entry .service-head__copy,
.js .hero-entry .proj-head__copy,
.js .hero-entry .case-head__copy,
.js .hero-entry .c03-hero__content {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  animation: hero-entry-failsafe 1ms var(--motion-hero-failsafe) both;
}
.js .hero-entry.is-entry-ready .phead__content,
.js .hero-entry.is-entry-ready .service-head__copy,
.js .hero-entry.is-entry-ready .proj-head__copy,
.js .hero-entry.is-entry-ready .case-head__copy,
.js .hero-entry.is-entry-ready .c03-hero__content {
  opacity: 1;
  transform: none;
  animation: none;
  transition: opacity var(--motion-hero-entry) ease,
    transform var(--motion-hero-entry) var(--ease-standard);
  transition-delay: var(--motion-hero-entry-delay);
}
/* WhatsApp button: reveal with hero-entry timing or immediately if no hero.
   The action is a sibling of <main>, not a descendant of the hero section, so
   it is keyed off root classes. Three layers keep the primary conversion path
   from ever being stranded hidden: without the script no .has-hero-entry class
   is set and the plain reveal below runs; with the class but no readiness
   signal the hero-entry-failsafe keyframe reveals it at --motion-hero-failsafe;
   normally .is-entry-ready lands first and transitions it in with the hero. */
.js .wa { animation: shared-wa-in var(--motion-reveal) cubic-bezier(.16,1,.3,1) 300ms both; }
.js.has-hero-entry .wa {
  opacity: 0;
  transform: translateY(10px);
  animation: hero-entry-failsafe 1ms var(--motion-hero-failsafe) both;
}
.js.has-hero-entry.is-entry-ready .wa {
  opacity: 1;
  transform: none;
  animation: none;
  transition: opacity var(--motion-hero-entry) ease,
    transform var(--motion-hero-entry) var(--ease-standard);
  transition-delay: calc(var(--motion-hero-entry-delay) + var(--motion-stagger) * 2);
}
@keyframes shared-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes shared-wa-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-entry-failsafe {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .phead__content > *, .js .service-head__copy > *, .js .case-head__copy > *,
  .js .proj-head__copy > *, .js .phead__media img, .js .service-head__media img,
  .js .case-head__media img, .js .proj-head__media img {
    animation: none; opacity: 1; transform: none;
  }
  .js .hero-entry .phead__content,
  .js .hero-entry .service-head__copy,
  .js .hero-entry .proj-head__copy,
  .js .hero-entry .case-head__copy,
  .js .hero-entry .c03-hero__content,
  .js .hero-entry.is-entry-ready .phead__content,
  .js .hero-entry.is-entry-ready .service-head__copy,
  .js .hero-entry.is-entry-ready .proj-head__copy,
  .js .hero-entry.is-entry-ready .case-head__copy,
  .js .hero-entry.is-entry-ready .c03-hero__content,
  .js .hero-entry .phead__media img,
  .js .hero-entry .service-head__media img,
  .js .hero-entry .proj-head__media img,
  .js .hero-entry .case-head__media img,
  .js .hero-entry .c03-hero__media img,
  .js .hero-entry.is-entry-ready .phead__media img,
  .js .hero-entry.is-entry-ready .service-head__media img,
  .js .hero-entry.is-entry-ready .proj-head__media img,
  .js .hero-entry.is-entry-ready .case-head__media img,
  .js .hero-entry.is-entry-ready .c03-hero__media img {
    animation: none; opacity: 1; transform: none; transition: none;
  }
}

.js .motion-media {
  opacity: 0;
  transform: translateY(var(--motion-rise-strong));
  overflow: hidden;
}
.js .motion-media > img,
.js .motion-media > picture > img,
.js .motion-media picture > img {
  transform: scale(var(--hover-media-scale));
  transform-origin: center center;
}
.js .motion-media.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-reveal) ease,
    transform var(--motion-media) var(--ease-standard);
}
.js .motion-media.is-in > img,
.js .motion-media.is-in > picture > img,
.js .motion-media.is-in picture > img {
  transform: none;
  transition: transform var(--motion-media) var(--ease-standard);
}

/* Repeated components enter as a readable sequence, capped at six stagger
   positions so long lists never make users wait for content. */
.js .motion-sequence > .motion-item {
  opacity: 0;
  transform: translateY(var(--motion-rise));
}
.js .motion-sequence.is-in > .motion-item {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-reveal) ease,
    transform var(--motion-reveal) var(--ease-standard);
  transition-delay: calc(var(--motion-index, 0) * var(--motion-stagger));
}
.js .motion-sequence--timeline::before {
  transform: scaleY(0);
  transform-origin: top center;
}
.js .motion-sequence--timeline.is-in::before {
  transform: scaleY(1);
  transition: transform var(--motion-media) var(--ease-standard);
}

/* The numbered process uses a slightly firmer arrival than card grids while
   retaining its shared anatomy and existing responsive layout. */
.js .steps.motion-sequence > .motion-item,
.js .about-timeline.motion-sequence > .motion-item {
  transform: translateY(var(--motion-rise-strong));
}
.js .steps.motion-sequence.is-in > .motion-item,
.js .about-timeline.motion-sequence.is-in > .motion-item {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .motion-media, .js .motion-media.is-in,
  .js .motion-media > img, .js .motion-media > picture > img,
  .js .motion-media picture > img, .js .motion-media.is-in > img,
  .js .motion-media.is-in > picture > img, .js .motion-media.is-in picture > img {
    opacity: 1; transform: none; transition: none;
  }
  .js .motion-sequence > .motion-item,
  .js .motion-sequence.is-in > .motion-item,
  .js .steps.motion-sequence > .motion-item,
  .js .about-timeline.motion-sequence > .motion-item {
    opacity: 1; transform: none; transition: none;
  }
  .js .motion-sequence--timeline::before,
  .js .motion-sequence--timeline.is-in::before {
    transform: scaleY(1); transition: none;
  }
}

.js .proj.is-filter-enter {
  opacity: 0; transform: translateY(8px);
}
.js .proj.is-filter-enter.is-filter-visible {
  opacity: 1; transform: none;
  transition: opacity var(--motion-filter) var(--ease-standard),
    transform var(--motion-filter) var(--ease-standard);
  transition-delay: calc(var(--motion-index, 0) * var(--motion-stagger));
}
@media (prefers-reduced-motion: reduce) {
  .js .proj.is-filter-enter, .js .proj.is-filter-enter.is-filter-visible {
    opacity: 1; transform: none; transition: none;
  }
}

/* Premium hover language --------------------------------------------------
   Fine pointers receive restrained lift, directional emphasis and image
   depth. Touch users keep the stable layout and every state has focus parity
   where the component is interactive. */
@media (hover: hover) and (pointer: fine) {
  .site__nav a,
  .site__services-row > a,
  .foot__nav a,
  .powered-by a {
    position: relative;
  }
  .site__nav a:not([aria-current="page"]):not(.is-section-active)::after,
  .site__services-row > a:not([aria-current="page"]):not(.is-section-active)::after {
    content: '';
    position: absolute;
    left: var(--nav-link-pad-x);
    right: var(--nav-link-pad-x);
    bottom: 5px;
    height: 1px;
    background: var(--color-gold-text);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--motion-control) var(--ease-standard);
  }
  /* "Services" carries a tightened right pad so the chevron sits with it; the
     underline follows the text rather than the padding box. */
  .site__services-row > a:not([aria-current="page"]):not(.is-section-active)::after {
    right: var(--space-1);
  }
  .site__nav a:not([aria-current="page"]):not(.is-section-active):hover::after,
  .site__nav a:not([aria-current="page"]):not(.is-section-active):focus-visible::after,
  .site__services-row > a:not([aria-current="page"]):not(.is-section-active):hover::after,
  .site__services-row > a:not([aria-current="page"]):not(.is-section-active):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .btn:hover,
  .c-cta:hover {
    box-shadow: var(--shadow-hover);
  }

  .js .motion-sequence.is-in > .service-overview__card:hover,
  .js .motion-sequence.is-in > .service-overview__card:focus-within {
    transform: translateY(var(--hover-card-lift));
    box-shadow: var(--shadow-hover);
  }

  .js .service-deliverables.motion-sequence.is-in > .card:hover,
  .js .service-deliverables.motion-sequence.is-in > .card:focus-within,
  .js .service-related__grid.motion-sequence.is-in > .card:hover,
  .js .service-related__grid.motion-sequence.is-in > .card:focus-within {
    transform: translateY(var(--hover-card-lift));
    box-shadow: var(--shadow-hover);
  }
  .service-deliverables .card h3,
  .service-related__grid .card h3,
  .service-covers__list li > span:last-child,
  .service-covers__index {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .service-deliverables .card:hover h3,
  .service-deliverables .card:focus-within h3,
  .service-related__grid .card:hover h3,
  .service-related__grid .card:focus-within h3,
  .service-covers__list li:hover > span:last-child {
    transform: translateX(var(--hover-shift-inline));
  }
  .service-covers__list li:hover .service-covers__index {
    transform: scale(var(--hover-marker-scale));
  }

  .steps li > div,
  .about-timeline li > div {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .steps li::before,
  .about-timeline__year {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .steps li:hover > div,
  .about-timeline li:hover > div {
    transform: translateX(var(--hover-shift-inline));
  }
  .steps li:hover::before,
  .about-timeline li:hover .about-timeline__year {
    transform: scale(var(--hover-marker-scale));
  }

  .workflow-proof {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .workflow-proof:hover,
  .workflow-proof:focus-within {
    transform: translateY(var(--hover-card-lift));
    box-shadow: var(--shadow-hover);
  }
  .workflow-proof__media img,
  .svc-shot__frame img,
  .credential-grid__media img {
    transition: transform var(--motion-media) var(--ease-standard);
  }
  .workflow-proof:hover .workflow-proof__media img,
  .workflow-proof:focus-within .workflow-proof__media img,
  .svc-shot:hover .svc-shot__frame img,
  .credential-grid figure:hover .credential-grid__media img {
    transform: scale(var(--hover-media-scale));
  }
  .workflow-proof__body h3,
  .svc-shot figcaption,
  .credential-grid figcaption {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .workflow-proof:hover .workflow-proof__body h3,
  .workflow-proof:focus-within .workflow-proof__body h3,
  .svc-shot:hover figcaption,
  .credential-grid figure:hover figcaption {
    transform: translateX(var(--hover-shift-inline));
  }

  .proj .c-card__name a {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .proj .c-card__name a:hover,
  .proj .c-card__name a:focus-visible {
    transform: translateX(var(--hover-shift-inline));
  }

  .contact-card__details li,
  .foot__nav a,
  .powered-by a img {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .js .contact-card__details.motion-sequence.is-in > li:hover,
  .js .contact-card__details.motion-sequence.is-in > li:focus-within,
  .foot__nav a:hover,
  .foot__nav a:focus-visible {
    transform: translateX(var(--hover-shift-inline));
  }
  .powered-by a:hover img,
  .powered-by a:focus-visible img {
    transform: scale(var(--hover-marker-scale));
  }

  .field input,
  .field select,
  .field textarea {
    transition: transform var(--motion-control) var(--ease-standard);
  }
  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    transform: translateY(var(--hover-control-lift));
    border-color: var(--color-gold-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site__nav a::after, .site__services-row > a::after { transition: none; }
  .btn:hover, .c-cta:hover,
  .js .motion-sequence.is-in > .service-overview__card:hover,
  .js .motion-sequence.is-in > .service-overview__card:focus-within,
  .js .motion-sequence.is-in > .about-value:hover,
  .js .motion-sequence.is-in > .about-value:focus-within,
  .js .service-deliverables.motion-sequence.is-in > .card:hover,
  .js .service-deliverables.motion-sequence.is-in > .card:focus-within,
  .js .service-related__grid.motion-sequence.is-in > .card:hover,
  .js .service-related__grid.motion-sequence.is-in > .card:focus-within,
  .service-deliverables .card:hover h3,
  .service-deliverables .card:focus-within h3,
  .service-related__grid .card:hover h3,
  .service-related__grid .card:focus-within h3,
  .service-covers__list li:hover > span:last-child,
  .service-covers__list li:hover .service-covers__index,
  .steps li:hover > div, .steps li:hover::before,
  .about-timeline li:hover > div, .about-timeline li:hover .about-timeline__year,
  .workflow-proof:hover, .workflow-proof:focus-within,
  .workflow-proof:hover .workflow-proof__media img,
  .workflow-proof:focus-within .workflow-proof__media img,
  .svc-shot:hover .svc-shot__frame img,
  .credential-grid figure:hover .credential-grid__media img,
  .proj .c-card__name a:hover,
  .proj .c-card__name a:focus-visible,
  .js .contact-card__details.motion-sequence.is-in > li:hover,
  .js .contact-card__details.motion-sequence.is-in > li:focus-within,
  .foot__nav a:hover, .foot__nav a:focus-visible,
  .powered-by a:hover img, .powered-by a:focus-visible img,
  .field input:hover, .field select:hover, .field textarea:hover {
    transform: none;
  }
  .c03-sector-grid a:hover,
  .c03-sector-grid a:focus-visible,
  .c03-work__card:hover .c03-work__media img,
  .c03-work__card:hover strong,
  .c03-discovery__route:hover,
  .c03-service:hover strong,
  .c03-service:hover b,
  .c03-service:hover .c03-service__media img,
  .c-card:hover .c-card__img img,
  .facts--links a:hover .go,
  .text-link:hover span,
  .text-link:focus-visible span,
  .foot__social a:hover,
  .foot__social a:focus-visible,
  .foot__social a:hover img {
    transform: none;
  }
}