@import url("tokens.css");

/* Concept 03 — approved production homepage: white header, dark photographic
   opening with proof rail, alternating paper/near-black bands, gold accent.

   Gold contract: --color-gold (#DAA22C) is fill-only — safe as text on dark,
   but fails WCAG AA on light (2.13:1). Use --color-gold-text (#8A6212) for
   small text on light surfaces; it measures 5.10:1 on --color-paper. */

/* ══ shared scaffolding ══════════════════════════════════════════════ */
.cwrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }
.c-eyebrow {
  font-family: var(--font-label); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin: 0 0 18px;
}
.c-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-hero); line-height: var(--leading-hero);
  letter-spacing: -.04em; margin: 0;
}
.c-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-section-title); line-height: 1.04;
  letter-spacing: -.03em; margin: 0 0 10px;
}
.c-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: var(--leading-body); max-width: var(--measure-compact); margin: 0; }
.c-sec { padding: var(--section-space) 0; }
.c-rule { width: 56px; height: 2px; background: var(--color-gold); border: 0; margin: 0 0 26px; }

.c-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-height); padding: 0 var(--button-pad-inline); border-radius: var(--radius-control);
  background: var(--color-gold); color: var(--color-ink);
  font: 600 15.5px/1 var(--font-body);
  text-decoration: none; border: 0; 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);
}
.c-cta:hover { transform: translateY(var(--button-hover-lift)); }
.c-cta:active { transform: translateY(0) scale(var(--button-press-scale)); }
.c-cta:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }
.c-proof {
  font-family: var(--font-label); font-size: var(--text-meta);
  letter-spacing: .1em; text-transform: uppercase; margin: 20px 0 0;
}

/* Reveal — opacity and transform only.
   Scoped behind .js: without JavaScript nothing is ever hidden, so the page
   is complete for crawlers and for anyone whose script fails. Hiding content
   by default and revealing it with script is how half a homepage disappears. */
.js .rev { opacity: 0; transform: translateY(18px); }
.js .rev.is-in { opacity: 1; transform: none;
  transition: opacity var(--motion-reveal) var(--ease-standard),
    transform var(--motion-reveal) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .rev.is-in { opacity: 1; transform: none; transition: none; }
  .c-cta { transition: none; }
}

/* sector self-selection — conversion, present in both */
.c-sectors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.c-sectors a {
  display: inline-flex; align-items: center; min-height: var(--nav-target); padding: 0 var(--chip-pad-inline);
  border-radius: var(--radius-pill); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.c-sectors b { font-family: var(--font-label); font-weight: 500;
  font-size: var(--text-meta); margin-left: 9px; opacity: .6; }

.c-sector-band, .c03-sectors { background: var(--color-paper-alt); color: var(--color-ink); }
.c-sector-band .c-lede { color: var(--color-text-muted); }
.c-sector-band .c-sectors a { background: var(--color-surface); color: var(--color-ink); }
.c-sector-band .c-sectors a:hover { background: var(--color-ink); color: var(--color-paper); }
.c-company { background: var(--color-dark-raised); color: var(--color-paper); }
.c-company__layout { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.35fr);
  gap: clamp(40px,7vw,88px); align-items: start; }
.c-company .c-eyebrow { color: var(--color-gold); }
.c-company .c-lede { margin-top: 20px; color: var(--color-on-dark-secondary); }
.c-company__pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); }
.c-company__pillars article { min-width: 0; padding-top: 20px; border-top: 1px solid var(--color-on-dark-border); }
.c-company__pillars h3 { margin: 0 0 10px; font: 700 20px/1.2 var(--font-display); }
.c-company__pillars p { margin: 0; color: var(--color-on-dark-secondary); font-size: var(--text-ui); line-height: var(--leading-body); }
@media (max-width: 959.98px) {
  .c-company__layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .c-company__pillars { grid-template-columns: 1fr; gap: 20px; }
}

/* service trio */
.c-lines { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.c-line { display: block; text-decoration: none; padding: 24px; border-radius: 8px;
  transition: transform 200ms ease, opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) { .c-line:hover { transform: translateY(var(--button-hover-lift)); } }
.c-line h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 21px;
  margin: 0 0 8px; letter-spacing: -.015em; }
.c-line p { margin: 0 0 16px; font-size: var(--text-ui); line-height: 1.55; }
.c-line span { font-family: 'IBM Plex Mono', monospace; font-size: var(--text-eyebrow);
  letter-spacing: .14em; text-transform: uppercase; }

/* work cards */
.c-work { display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.c-card { text-decoration: none; display: block; }
.c-card__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; position: relative;
  background: var(--color-dark-raised); }
.c-card__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--motion-media) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .c-card:hover .c-card__img img { transform: scale(var(--hover-media-scale)); } }
.c-card__meta { font-family: 'IBM Plex Mono', monospace; font-size: var(--text-meta);
  letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 5px; }
.c-card__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.015em; margin: 0; }
.c-card__gap { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 24px;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--text-meta); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(246,247,247,.68); }
.c-card__photo-note {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  padding: 7px 9px; border-radius: 4px;
  background: rgba(10,10,10,.86); color: rgba(246,247,247,.72);
  font: 500 10px/1.35 'IBM Plex Mono', monospace;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ── footer, both systems ──────────────────────────────────────────── */
/* docs/02: every page is one tap from anywhere, including the footer. */
.c-foot { padding: clamp(38px, 5vw, 66px) 0; }
.c-foot--dark { background: #0A0A0A; color: rgba(246,247,247,.68);
  border-top: 1px solid rgba(246,247,247,.12); }
.c-foot__in { display: grid; gap: 48px; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); align-items: start; }
.c-foot__brand { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; color: #F6F7F7; margin: 0 0 14px; }
.c-foot__brand span { display: block; font-family: 'IBM Plex Mono', monospace;
  font-weight: 400; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-gold); margin-top: 5px; }
.c-foot__meta { margin: 0; font-size: var(--text-detail); line-height: 1.7; }
/* phone and email were 18px tall — under the 44px floor */
.c-foot a { color: #F6F7F7; display: inline-flex; align-items: center;
  min-height: 44px; }
.c-foot__nav { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; row-gap: 2px; }
.c-foot__nav a { display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--text-detail); text-decoration: none; color: rgba(246,247,247,.72); }
.c-foot__nav a:hover { color: #F6F7F7; }
.c-foot__nav a:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }
@media (max-width: 700px) {
  .c-foot { padding-bottom: 112px; }
  .c-foot__in { grid-template-columns: 1fr; gap: 24px; }
  .c-foot__nav { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; }
}

/* Film placeholder: unmistakably video, without pretending playback is live. */
.c-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; margin: clamp(24px, 4vw, 42px) 0 0; background: #101A21; }
.c-video__frame picture, .c-video__frame img { width: 100%; height: 100%; display: block; }
.c-video__frame picture img { object-fit: cover; filter: brightness(.52); }
.c-video__frame--live > video { width: 100%; height: 100%; display: block; object-fit: cover; }
.c-video__frame--live > video:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }
.c-video__frame.c-video__frame--live figcaption { inset: 16px auto auto 16px; display: block; padding: 8px 12px;
  border-radius: 4px; pointer-events: none; color: #F6F7F7; background: rgba(10,10,10,.82);
  font: 500 var(--text-eyebrow)/1.3 'IBM Plex Mono',monospace; letter-spacing: .18em; text-transform: uppercase; }
.c-video__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; color: var(--color-ink);
  background: var(--color-gold); box-shadow: var(--shadow-hover);
}
.c-video__play img { width: 28px; height: 28px; filter: none; }
.c-video__frame figcaption { position: absolute; inset: 0; display: flex;
  flex-direction: column; justify-content: flex-end; padding: clamp(22px, 4vw, 48px);
  color: #F6F7F7; background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,.72)); }
.c-video__frame figcaption span { font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-meta); letter-spacing: .15em; text-transform: uppercase; color: var(--color-gold); }
.c-video__frame figcaption strong { margin-top: 8px; font-family: 'Archivo', sans-serif;
  font-size: clamp(20px, 3vw, 34px); line-height: 1.12; }
/* ── Projects, shared by both concepts ─────────────────────────────── */
/* Dark head, light grid — neutral between Midnight and Atelier, premium
   in both. Uses the concept card system, which is why every shared page
   loads this sheet. */
.proj-head {
  background: #0A0A0A; color: #F6F7F7;
  padding: clamp(52px, 6vw, 82px) 0;
}
.proj-head--image { position: relative; isolation: isolate; min-height: clamp(520px,66vw,700px);
  background: var(--color-dark-raised);
  display: flex; align-items: flex-end; overflow: hidden; }
.proj-head--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)); }
.proj-head--image .proj-head__layout { display: block; }
.js .proj-head--image .proj-head__layout { animation: none; transform: none; }
/* Ungated fallback for a projects hero that is not using the shared decode-gated
   entry. Tokenised so it matches every other hero rather than running 200ms
   short of them. */
.js .proj-head--image:not(.hero-entry) .proj-head__copy {
  animation: shared-hero-in var(--motion-hero) var(--ease-standard) both;
}
.proj-head--image .proj-head__copy { position: relative; z-index: 1; max-width: 760px; }
.proj-head--image .c-lede { color: rgba(246,247,247,.84); }
.proj-head--image .proj-head__media, .proj-head--image .proj-head__media picture {
  position: absolute; inset: 0; z-index: -2; display: block; }
.proj-head--image .proj-head__media picture { width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; border-radius: 0; }
.proj-head--image .proj-head__media img { width: 100%; height: 100%; object-fit: cover; }
.proj-head--image .proj-head__media figcaption { position: absolute; right: clamp(20px,5vw,56px);
  bottom: 20px; color: rgba(246,247,247,.62); }
.proj-head__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  gap: clamp(32px, 4vw, 56px); align-items: center;
}
.proj-head__copy { min-width: 0; }
.proj-head .c-eyebrow { color: var(--color-gold); }
.proj-head .c-h1 { max-width: 11ch; font-size: clamp(44px, 5.6vw, 72px); }
.proj-head .c-lede { color: rgba(246,247,247,.68); margin-top: 24px; }
.proj-head__media { margin: 0; min-width: 0; }
.proj-head__media picture {
  display: block; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid rgba(246,247,247,.16); border-radius: 8px;
}
.proj-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-head__media figcaption {
  margin-top: 10px; color: rgba(246,247,247,.58);
  font: 500 var(--text-eyebrow)/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.proj-body { background: var(--color-paper); padding-block: var(--section-space); }
/* The filter shell stays visible immediately so the controls are never a blank
   area while native lazy images settle. The card grid keeps its reveal: it is
   the only motion the portfolio page has now that media frames defer to their
   reveal owner, and cancelling it left the whole grid arriving dead. */
.js .proj-body > .rev > .proj__filter { opacity: 1; transform: none; }
.proj__filter {
  display: flex; flex-wrap: wrap; gap: var(--control-gap, 8px);
  margin: 0 0 var(--section-space-compact);
}
.proj__filter li { flex: 0 0 auto; }
.proj__filter a {
  justify-content: center; min-height: var(--control-height, 44px);
  padding: 0 var(--control-pad-x, 18px);
  border-radius: var(--control-radius, 999px);
  font-size: var(--text-ui); font-weight: 600; line-height: 1;
}
.proj__filter b {
  margin-left: var(--control-gap, 8px);
  font-size: var(--text-meta); opacity: .65;
}
.proj__filter a { background: #E7EAEA; color: #1A1A1A; }
.proj__filter a:hover { background: #D9DDDD; }
.proj__filter a.is-on { background: #1A1A1A; color: #F6F7F7; }
.proj__filter a.is-on b { opacity: .8; }
.proj__filter a:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
/* min() so a 290px track cannot exceed a 320px viewport */
/* Row breathing belongs to this grid alone. .c-work is shared with the home and
   sector grids, and the mobile `gap` shorthand there would silently reset it. */
.proj__grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  row-gap: var(--space-8); }
/* Sector groups give the unfiltered grid its second level. The heading is a
   grid child spanning every column rather than a wrapper, so one auto-fill
   track set still governs every card. Typography comes from .c-eyebrow; this
   rule only owns layout and the rule above each group. */
.proj__group { grid-column: 1 / -1; display: flex; align-items: baseline;
  gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--color-ink);
  font-weight: 700;
  border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.proj__group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
/* Bold label, light count — the same pairing the filter chips use, so the
   second level reads as an echo of the first rather than as card metadata,
   which shares this eyebrow size directly beneath it. */
.proj__group b { font-weight: 400; color: var(--color-text-muted); }
.proj__group[hidden] { display: none; }
/* concept-hero.css loads after page.css, so the layout above would otherwise
   outrank the .sr-only reset when a filtered heading collapses. */
.proj__group.sr-only { margin: -1px; padding: 0; border: 0; }
/* Keep below-fold cards out of the paint work until they approach the viewport.
   Intrinsic sizing preserves the editorial grid while the native lazy images
   load only when needed. */
.proj__media-button { background: var(--color-dark-raised); }
.proj .c-card__meta { color: var(--color-text-muted); }
.proj .c-card__name { color: var(--color-ink); }
.proj__loc { font-size: 13.5px; color: var(--color-text-muted); margin: 3px 0 0; }
.proj[hidden] { display: none; }
.proj-body .note { max-width: 70ch; }
.proj__media-button {
  display: block; width: 100%; padding: 0; border: 0; color: inherit; cursor: zoom-in;
}
.proj__media-button:focus-visible {
  outline: var(--focus-light); outline-offset: var(--focus-offset);
}
.proj__view {
  position: absolute; right: 12px; bottom: 12px; min-height: 32px;
  display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px;
  background: rgba(10,10,10,.88); color: #F6F7F7;
  font: 500 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.proj__media-button:hover .proj__view,
.proj__media-button:focus-visible .proj__view {
  opacity: 1; transform: none;
}
.proj .c-card__name a {
  color: inherit; text-decoration-color: transparent; text-underline-offset: 4px;
}
.proj .c-card__name a:hover { text-decoration-color: var(--color-gold-text); }
.proj .c-card__name a:focus-visible {
  outline: var(--focus-light); outline-offset: var(--focus-offset);
}

/* Project image lightbox: a restrained gallery surface using the same dark,
   paper and gold tokens as Midnight. The native image remains uncropped. */
.project-lightbox {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh;
  margin: 0; padding: 0; border: 0; overflow: auto;
  background: rgba(10,10,10,.95); color: #F6F7F7;
}
.project-lightbox[open] {
  animation: project-lightbox-in var(--motion-control) var(--ease-standard) both;
}
.project-lightbox::backdrop { background: rgba(10,10,10,.86);
  animation: project-backdrop-in var(--motion-control) var(--ease-standard) both; }
.project-lightbox__shell {
  width: 100%; max-width: 1240px; min-height: 100%;
  margin-inline: auto; padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.project-lightbox__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 16px;
}
.project-lightbox__eyebrow {
  margin: 0 0 5px; color: var(--color-gold);
  font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .18em; text-transform: uppercase;
}
.project-lightbox__head h2 {
  margin: 0; color: #F6F7F7; font-size: clamp(22px, 3vw, 34px); line-height: 1.08;
}
.project-lightbox__close,
.project-lightbox__nav {
  width: 48px; height: 48px; flex: 0 0 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; isolation: isolate;
  border: 1px solid var(--color-on-dark-control-border); border-radius: 4px;
  background: rgba(246,247,247,.08); color: #F6F7F7; cursor: pointer;
}
/* Motion contract: opacity and transform only. The hover fill is an overlay
   that fades in, so no background property is ever transitioned. This mirrors
   the .wa::before idiom rather than introducing a second control pattern. */
.project-lightbox__close::before,
.project-lightbox__nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(246,247,247,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-control) var(--ease-standard);
}
.project-lightbox__close:hover::before,
.project-lightbox__nav:hover::before,
.project-lightbox__close:focus-visible::before,
.project-lightbox__nav:focus-visible::before { opacity: 1; }
.project-lightbox__close:focus-visible,
.project-lightbox__nav:focus-visible {
  outline: var(--focus-dark); outline-offset: var(--focus-offset);
}
.project-lightbox__close img,
.project-lightbox__nav img {
  width: 24px; height: 24px; filter: invert(1); opacity: .86;
}
.project-lightbox__viewer {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center; gap: clamp(12px, 2vw, 24px);
}
.project-lightbox__nav--prev img { transform: rotate(90deg); }
.project-lightbox__nav--next img { transform: rotate(-90deg); }
.project-lightbox__figure { min-width: 0; margin: 0; }
.project-lightbox__stage {
  width: 100%; height: min(70dvh, 760px); min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid rgba(246,247,247,.14); border-radius: 8px;
  background: var(--color-dark-raised);
  transition: opacity var(--motion-control) var(--ease-standard),
    transform var(--motion-control) var(--ease-standard);
}
.project-lightbox__stage.is-switching {
  opacity: .35;
  transform: translateX(var(--lightbox-shift, var(--motion-rise)));
}
@keyframes project-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.project-lightbox__image {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  /* Show supplied photographs without magnifying small originals. */
  object-fit: scale-down; object-position: center; border-radius: 4px;
  box-shadow: 0 18px 46px rgba(10,10,10,.32);
}
.project-lightbox figcaption {
  min-height: 44px; padding-top: 12px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  color: rgba(246,247,247,.72);
  font: 400 var(--text-eyebrow)/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.project-lightbox [data-lightbox-count] {
  color: var(--color-gold); white-space: nowrap;
}
body.is-lightbox-open { overflow: hidden; }
@keyframes project-lightbox-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 959.98px) {
  /* Mobile must never present a blank hero while the eager image settles. */
  .js .proj-head__copy > * { animation: none; opacity: 1; transform: none; }
  .proj-head { padding: 36px 0; }
  .proj-head__layout { grid-template-columns: 1fr; gap: 24px; }
  .proj-head__copy { width: 100%; max-width: 100%; }
  .proj-head .c-h1 { width: 100%; max-width: 100%; font-size: clamp(38px, 12vw, 58px);
    overflow-wrap: break-word; }
  .proj-head .c-lede { max-width: 100%; }
  .proj-head__media { max-width: 560px; }
  .proj__filter {
    flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--container-gutter) * -1);
    padding-block: var(--space-1) var(--space-3);
    padding-inline: var(--container-gutter);
    scrollbar-width: none;
    scroll-padding-inline: var(--container-gutter);
  }
  .proj__filter::-webkit-scrollbar { display: none; }
  .proj__filter a { white-space: nowrap; }
  .proj-head--image .proj-head__media figcaption { display: none; }
}
@media (max-width: 700px) {
  .proj__view { opacity: 1; transform: none; }
  .project-lightbox__shell {
    justify-content: flex-start; padding: 16px;
  }
  .project-lightbox__head { margin-bottom: 12px; }
  .project-lightbox__viewer {
    grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .project-lightbox__figure { grid-column: 1 / -1; grid-row: 1; }
  .project-lightbox__stage {
    height: auto; min-height: 240px; max-height: 64dvh;
    aspect-ratio: var(--lightbox-ratio, 4 / 3);
  }
  .project-lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: end; }
  .project-lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: start; }
  .project-lightbox figcaption { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-lightbox[open], .project-lightbox::backdrop { animation: none; }
  .proj__view, .project-lightbox__close, .project-lightbox__nav,
  .project-lightbox__close::before, .project-lightbox__nav::before,
  .project-lightbox__stage { transition: none; }
  /* The switch dip is JS-gated off under reduced motion, but transitions are
     also killed here — so a class that ever landed would stick at .35 opacity
     with no way back. Declare the final state so the stage cannot be stranded
     mid-transform. */
  .project-lightbox__stage.is-switching { opacity: 1; transform: none; }
}

/* One reusable portfolio invitation on both concept homepages. */
.c-projects-cta {
  margin-top: 32px; padding: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid var(--line, #D8DBDB); border-radius: 8px;
  background: var(--paper-2, #ECEEEE);
}
.c-projects-cta__copy { max-width: 62ch; }
.c-projects-cta__copy h3 { margin: 0; color: #1A1A1A; }
.c-projects-cta .c-eyebrow { color: var(--color-gold-text); }
.c-projects-cta__copy p:last-child { margin: 6px 0 0; color: var(--mute, #55595A); }
.c-projects-cta .c-cta { flex: 0 0 auto; }
@media (max-width: 700px) {
  .c-projects-cta { align-items: stretch; flex-direction: column; gap: 16px; }
  .c-projects-cta .c-cta { width: 100%; justify-content: center; }
}

/* Social channels — from the marketing banner on page 2 of the profile.
   The discovery docs never captured these; ING is actively posting on all
   three, so leaving them off the site discards free trust signal. */
.c-foot__social { margin: 18px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.c-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-control-border); border-radius: var(--radius-control);
  text-decoration: none;
  transition: color var(--motion-control) var(--ease-standard),
    border-color var(--motion-control) var(--ease-standard),
    background var(--motion-control) var(--ease-standard); }
.c-foot__social img { display: block; width: 20px; height: 20px; }
.c-foot__social a:hover { border-color: var(--color-gold);
  background: var(--color-on-dark-hover-surface); }
.c-foot__social a:active { background: var(--color-on-dark-active-surface); }
.powered-by { margin: var(--space-4) 0 0; }
.foot .powered-by a, .c-foot .powered-by a { min-height: var(--nav-target); display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-on-dark-tertiary); font: var(--weight-attribution) var(--text-attribution)/var(--leading-attribution) var(--font-label);
  letter-spacing: var(--tracking-attribution); text-decoration: none; }
.powered-by img { width: var(--space-4); height: var(--space-4); border-radius: var(--radius-control); object-fit: cover; }
.foot .powered-by a:hover, .c-foot .powered-by a:hover { color: var(--color-on-dark); }

/* ── concept header on narrow screens ──────────────────────────────────
   The prototype's .nav row (brand + WhatsApp button + burger) overflowed a
   305px viewport once text scaling was on. These override the prototype's
   inline <style>, which is why they are scoped through body for specificity. */
@media (max-width: 700px) {
  body .nav { gap: 8px; padding: 12px 14px; flex-wrap: nowrap; }
  body .nav .brand { min-width: 0; flex: 1 1 auto; }
  body .nav .brand img { width: 34px; height: 34px; }
  body .nav .btn { padding: 0 12px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
  /* the prototype ships a 38px burger — below the 44px floor */
  body .nav .burger { flex: 0 0 auto; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; }
  /* the drawer's first item sat under the sticky header */
  body .mob:not(#site-drawer) { padding-top: 4px; }
}
@media (max-width: 380px) {
  /* below this the WhatsApp button cannot coexist with the burger — the
     sticky WhatsApp button at the bottom of every page still covers it */
  body .nav .btn { display: none; }
}

@media (max-width: 700px) {
  .c-proof { letter-spacing: .06em; line-height: 1.5; }
  .c-card__meta, .c-card__gap { letter-spacing: .08em; }
  .c-work, .c-lines { gap: var(--grid-gap-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  .c-line, .c-card__img img { transition: none; }
}

.nav__actions { display: flex; align-items: center; justify-content: flex-end; }
body .nav .brand { gap: 12px; min-height: 44px; }
body .nav .brand img { padding: 2px; object-fit: contain; }
body .nav .brand span {
  font-family: 'Archivo', sans-serif; font-size: 18px; font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em;
}
body .nav .brand span b { font: inherit; letter-spacing: inherit; }
body .nav .brand small {
  display: block; margin-top: 3px;
  font: 400 9px/1.1 'IBM Plex Mono', monospace;
  letter-spacing: .18em; color: var(--color-gold-text);
}
.nav__services { position: relative; }
.nav__services-row { display: flex; align-items: center; }
body .nav .nav__links .nav__services-row > a {
  min-height: 44px; padding: 0 6px 0 12px; display: flex; align-items: center;
  color: #55595A; text-decoration: none; border-radius: 5px; font-size: var(--text-ui);
  font-weight: 600; white-space: nowrap;
}
body .nav .nav__links .nav__services-row > a:hover { color: #1A1A1A; background: #ECEEEE; }
body .nav .nav__links .nav__services-row > a[aria-current="page"],
body .nav .nav__links .nav__services-row > a.is-section-active {
  color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-gold);
}
.nav__services-toggle,
.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: #1A1A1A; cursor: pointer;
}
.nav__services-toggle:hover { background: #ECEEEE; }
.nav__services-toggle:focus-visible,
.mob__services-row button:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.nav__services-toggle img,
.mob__services-row button img { width: 18px; height: 18px; transition: transform 200ms ease; }
[data-services-toggle][aria-expanded="true"] img { transform: rotate(180deg); }
.nav__services-menu {
  position: absolute; z-index: 75; top: calc(100% + 8px); left: 0; width: 244px;
  padding: 8px; border: 1px solid #D8DBDB; border-radius: 8px;
  background: #FFFFFF; box-shadow: 0 18px 46px rgba(10,10,10,.16);
}
.nav__services-menu[hidden] { display: none; }
body .nav .nav__links .nav__services-menu a {
  min-height: 48px; padding: 0 12px; display: flex; align-items: center;
  color: #55595A; text-decoration: none; border-radius: 4px; font-size: var(--text-ui);
}
body .nav .nav__links .nav__services-menu a:hover { color: #1A1A1A; background: #ECEEEE; }

/* With the duplicate header CTA removed, use a clear two-part composition:
   brand anchored left and primary navigation anchored right. This keeps the
   useful whitespace between the groups instead of leaving a vacant right rail. */
@media (min-width: 960px) {
  body .nav {
    display: flex; justify-content: space-between; width: 100%; max-width: none;
    margin-inline: 0; min-height: 86px;
    gap: 20px;
    padding: 20px max(var(--container-gutter), calc((100% - var(--container-max)) / 2 + var(--container-gutter)));
    background: rgba(246,247,247,.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid #D8DBDB;
  }
  body .nav .brand { flex: 0 0 auto; }
  body .nav .brand img { width: 44px; height: 44px; }
  body .nav .brand span b { font-size: 18px; letter-spacing: -.01em; }
  body .nav .nav__links { display: flex; margin-left: auto; gap: 8px; }
  body .nav .nav__links > li > a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 12px; border-radius: 5px; font-size: var(--text-ui); font-weight: 600;
    white-space: nowrap;
  }
  body .nav .nav__actions { display: none; }
  body .nav .burger { display: none; }
}

/* Six links become cramped before the balanced desktop grid has enough room.
   Keep the compact menu through tablet widths instead of squeezing the labels. */
@media (min-width: 701px) and (max-width: 959.98px) {
  body .nav .nav__links { display: none; }
  body .nav .burger { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; }
}
.burger__icon { display: block; width: 22px; height: 22px; pointer-events: none; }
.burger__icon--close { display: none; }
.burger.is-open .burger__icon--menu { display: none; }
.burger.is-open .burger__icon--close { display: block; }
/* The prototype pins the drawer with .mob { position:fixed; top:calc(32px + 70px) }
   — the old fixed .wfbar height plus the old nav height. Both are gone, and the
   nav grows under text scaling, so the drawer slid under the header and hid its
   first item. Put it in normal flow: it always sits directly below the nav and
   there is no offset left to get wrong. */
/* Scoped away from #site-drawer. The shared pages reuse class="mob" but open
   via the hidden attribute, not an .is-open class — an unscoped rule here
   matched them too and hid their drawer permanently at higher specificity. */
@media (max-width: 959.98px) {
  body .nav {
    min-height: 72px; padding: 14px clamp(20px, 5vw, 56px);
    gap: 20px; flex-wrap: nowrap;
    background: rgba(246,247,247,.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid #D8DBDB;
  }
  body .nav .brand { min-width: 0; flex: 1 1 auto; }
  body .nav .brand img { width: 40px; height: 40px; }
  body .nav .nav__links { display: none; }
  body .nav .nav__actions { display: flex; flex: 0 0 auto; }
  body .nav .burger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
  }
  body .mob:not(#site-drawer) { position: sticky; top: 72px; z-index: 59;
    max-height: calc(100vh - 72px); overflow-y: auto; transform: none;
    border-top: 1px solid var(--line); }
  body .mob:not(#site-drawer):not(.is-open) { display: none; }
  body .mob:not(#site-drawer).is-open { display: block; opacity: 1; pointer-events: auto; }
  body .mob:not(#site-drawer) ul {
    margin: 0; padding: 0 clamp(20px, 5vw, 56px) 20px;
  }
  body .mob:not(#site-drawer) li { border-bottom: 0; }
  body .mob:not(#site-drawer) li > a {
    display: flex; align-items: center; min-height: 52px; padding: 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px; font-weight: 500;
  }
  body .mob:not(#site-drawer) .mob__services-row {
    display: grid; grid-template-columns: 1fr 44px; align-items: center;
  }
  body .mob:not(#site-drawer) .mob__services-row > a { min-width: 0; }
  body .mob:not(#site-drawer) .mob__services-menu { padding: 0 0 8px 16px; }
  body .mob:not(#site-drawer) .mob__services-menu[hidden] { display: none; }
  body .mob:not(#site-drawer) .mob__services-menu a {
    min-height: 48px; font-size: var(--text-ui); color: #55595A;
  }
}

/* ══ C · THRESHOLD ════════════════════════════════════════════════════════
   Client-selected Concept 03. Its white header, dark photographic opening,
   proof rail and alternating paper/dark bands follow the supplied reference
   while reusing the canonical ING tokens and components above. */
.c03 { background: var(--color-paper); color: var(--color-ink); }
.c03 p { line-height: var(--leading-body); }
.c03 a:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.c03-hero a:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }

.c03-hero {
  min-height: min(78vh, 760px); position: relative; overflow: hidden;
  display: flex; align-items: flex-end; color: var(--color-on-dark); background: var(--color-dark);
}
.c03-hero__media, .c03-hero__media picture { position: absolute; inset: 0; display: block; }
.c03-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; display: block;
  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; }
.c03-hero__media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hero-overlay-strong), var(--hero-overlay-medium) 56%, var(--hero-overlay-soft)); }
.c03-hero__content { position: relative; z-index: 1; width: 100%; padding-block: var(--space-10) var(--space-7); }
.c03-hero .c-eyebrow { color: var(--color-gold); }
.c03-hero .c-h1 { max-width: 14ch; }
.c03-hero .c-lede { margin-top: var(--space-5); color: var(--color-on-dark-secondary); }
.c03-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.c03-hero__actions .c-proof { margin: 0; color: var(--color-on-dark-tertiary); }

.c03-proof { color: var(--color-ink); background: var(--color-paper-alt);
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.c03-proof ul { display: grid; grid-template-columns: repeat(4,1fr); list-style: none; margin: 0; padding: 0; }
.c03-proof li { min-width: 0; padding: var(--space-5); border-right: 1px solid var(--color-border); }
.c03-proof li:first-child { padding-left: 0; }
.c03-proof li:last-child { padding-right: 0; border-right: 0; }
.c03-proof .k { display: block; margin-bottom: var(--space-2); color: var(--color-text-muted);
  font: 400 var(--text-eyebrow)/1.3 var(--font-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.c03-proof .v { display: block; color: var(--color-ink); font: 700 var(--text-body)/1.45 var(--font-display); }

.c03-sectors { background: var(--color-paper); }
.c03-sectors__layout { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.45fr); gap: var(--space-8); align-items: center; }
.c03-sectors__layout > div > p { max-width: 34ch; margin: var(--space-5) 0 0; color: var(--color-text-muted); }
.c03-sector-grid { display: grid; grid-template-columns: repeat(2,1fr); list-style: none; margin: 0; padding: 0; }
.c03-sector-grid li:nth-child(odd) { border-right: 1px solid var(--color-border); }
.c03-sector-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
.c03-sector-grid a { min-height: 140px; padding: var(--space-5); display: grid; grid-template-columns: 42px 1fr 24px;
  grid-template-rows: 1fr auto; align-items: end; column-gap: var(--space-3); color: var(--color-ink);
  text-decoration: none; font: 700 clamp(20px,2.2vw,28px)/1.15 var(--font-display);
  transition: background-color var(--motion-control) var(--ease-standard), color var(--motion-control) var(--ease-standard), transform var(--motion-control) var(--ease-standard); }
.c03-sector-grid a::after { content: ''; width: 22px; height: 22px; display: block; grid-column: 3; grid-row: 1 / span 2;
  align-self: center;
  background: url("arrow-right.svg") center/contain no-repeat; }
.c03-sector-grid__index { grid-column: 1; grid-row: 1; align-self: start; color: var(--color-gold-text); font: 400 var(--text-eyebrow)/1.3 var(--font-label); letter-spacing: var(--tracking-eyebrow); }
.c03-sector-grid__name { grid-column: 2; grid-row: 1; }
.c03-sector-grid__meta { grid-column: 2; grid-row: 2; color: var(--color-text-muted); font: 400 var(--text-eyebrow)/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.c03-sector-grid a:hover, .c03-sector-grid a:focus-visible { color: var(--color-gold-text); background: var(--color-paper-alt); transform: translateX(var(--hover-shift-inline)); transform-origin: left center; }

.c03-discovery a:focus-visible, .c03-discovery__contact:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }

.c03-selected { background: var(--color-paper-alt); }
.c03-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-6); }
.c03-section-head p { max-width: 54ch; margin: var(--space-3) 0 0; color: var(--color-text-muted); }
.c03-section-head > a { min-height: 44px; padding: 0 4px; display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--color-ink); text-decoration-color: var(--color-gold-text); text-underline-offset: var(--space-2); }
.c03-work { display: grid; grid-template-columns: minmax(0,1fr) repeat(2,minmax(0,.5fr)); gap: var(--grid-gap); align-items: start; }
.c03-work__card { min-width: 0; display: block; color: var(--color-ink); text-decoration: none; }
.c03-work__feature { grid-row: span 2; }
.c03-work__primary { grid-column: 2 / 4; }
.c03-work__media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-card); display: block; background: var(--color-dark-raised); }
.c03-work__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--motion-media) var(--ease-standard); }
.c03-work__card:hover .c03-work__media img { transform: scale(var(--hover-media-scale)); }
.c03-work__meta { display: block; margin: var(--space-4) 0 6px; color: var(--color-gold-text);
  font: 500 var(--text-eyebrow)/1.3 var(--font-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.c03-work__card strong { display: block; font: 700 18px/1.25 var(--font-display); }
.c03-work__card strong { transition: transform var(--motion-control) var(--ease-standard), opacity var(--motion-control) var(--ease-standard); transform-origin: left center; }
.c03-work__card:hover strong { transform: translateX(var(--hover-shift-inline)); opacity: .9; }

.c03-discovery { padding: var(--section-space) 0; color: var(--color-on-dark); background: var(--color-dark); }
.c03-discovery__head { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--space-8); align-items: end; }
.c03-discovery__head .c-eyebrow { color: var(--color-gold); }
.c03-discovery__head .c-h2 { max-width: var(--measure-compact); }
.c03-discovery__head > p { max-width: var(--measure-compact); margin: 0; color: var(--color-on-dark-secondary); }
.c03-discovery__routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--grid-gap); margin-top: var(--space-7); }
.c03-discovery__route { min-width: 0; padding: var(--space-6); border: 1px solid var(--color-on-dark-border); border-radius: var(--radius-card);
  display: flex; flex-direction: column; color: var(--color-on-dark); background: var(--color-dark-raised); text-decoration: none;
  transition: transform var(--motion-control) var(--ease-standard); }
.c03-discovery__route:hover { transform: translateY(var(--button-hover-lift)); border-color: var(--color-gold); }
.c03-discovery__index { margin-bottom: var(--space-7); color: var(--color-gold); font: 500 var(--text-eyebrow)/1.3 var(--font-label);
  letter-spacing: var(--tracking-eyebrow); }
.c03-discovery__route strong { font: 700 var(--space-5)/1.2 var(--font-display); }
.c03-discovery__route > span:not(.c03-discovery__index) { max-width: 40ch; margin-top: var(--space-3); color: var(--color-on-dark-secondary); }
.c03-discovery__route b { min-height: var(--nav-target); margin-top: var(--space-6); display: inline-flex; align-items: center;
  color: var(--color-on-dark); font-size: var(--text-detail); text-decoration: underline; text-decoration-color: var(--color-gold); text-underline-offset: var(--space-2); }
.c03-discovery__footer { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-on-dark-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.c03-discovery__footer p { margin: 0; }
.c03-discovery__footer p strong, .c03-discovery__footer p span { display: block; }
.c03-discovery__footer p strong { font: 700 18px/1.3 var(--font-display); }
.c03-discovery__footer p span { margin-top: var(--space-2); color: var(--color-on-dark-secondary); }
.c03-discovery__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.c03-discovery__contact { min-height: var(--button-height); padding: 0 var(--button-pad-inline); display: inline-flex; align-items: center;
  color: var(--color-on-dark); text-decoration-color: var(--color-gold); text-underline-offset: var(--space-2); }

.c03-services { padding-block: var(--section-space-compact); background: var(--color-paper); }
.c03-services > .cwrap > div:first-child > p { max-width: var(--measure-compact); margin: var(--space-3) 0 var(--space-6); color: var(--color-text-muted); }
.c03-services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--grid-gap); }
.c03-service { min-width: 0; display: flex; flex-direction: column; color: var(--color-ink); text-decoration: none;
  border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.c03-service__copy { display: grid; grid-template-columns: var(--space-7) 1fr; gap: var(--space-4); flex: 1 1 auto; }
.c03-service__number { color: var(--color-gold-text);
  font: var(--weight-attribution) var(--text-attribution)/var(--leading-attribution) var(--font-label);
  letter-spacing: var(--tracking-eyebrow); }
.c03-service strong { display: block; font: 700 18px/1.25 var(--font-display); }
.c03-service small { display: block; min-height: 72px; margin: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-detail); line-height: 1.5; }
.c03-service b { display: inline-flex; align-items: center; min-height: var(--nav-target); color: var(--color-ink); font-size: var(--text-detail); text-decoration: underline;
  text-decoration-color: var(--color-gold-text); text-underline-offset: 6px; }
.c03-service strong, .c03-service b { transition: transform var(--motion-control) var(--ease-standard), opacity var(--motion-control) var(--ease-standard); transform-origin: left center; }
.c03-service:hover strong { transform: translateX(var(--hover-shift-inline)); }
.c03-service:hover b { transform: translateX(var(--hover-shift-inline)); opacity: .78; }
.c03-service__media { aspect-ratio: 16/6; margin-top: var(--space-4); overflow: hidden; border-radius: var(--radius-card); display: block; background: var(--color-dark-raised); }
.c03-service__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--motion-media) var(--ease-standard); }
.c03-service:hover .c03-service__media img { transform: scale(var(--hover-media-scale)); }

@keyframes hero-media-drift {
  from { transform: scale(var(--motion-hero-scale-rest)); }
  to { transform: scale(var(--motion-hero-scale-end)); }
}

@media (max-width: 959.98px) {
  .c03-hero__media::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));
  }
}

@media (max-width: 1100px) {
  .c03-work { grid-template-columns: repeat(2,1fr); }
  .c03-work__media { height: auto; aspect-ratio: 4/3; }
  .c03-work__feature, .c03-work__primary { grid-column: 1/-1; grid-row: auto; }
  .c03-work__feature .c03-work__media, .c03-work__primary .c03-work__media { aspect-ratio: 16/9; }
}

@media (max-width: 959.98px) {
  /* Moved from 959.98px rule to preserve 960px validation height. */
  .c03-hero { min-height: 620px; }
  .c03-proof ul { grid-template-columns: repeat(2,1fr); }
  .c03-proof li:nth-child(2) { border-right: 0; }
  .c03-proof li:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .c03-proof li:nth-child(3) { padding-left: 0; }
  .c03-sectors__layout, .c03-discovery__head { grid-template-columns: 1fr; gap: var(--space-6); }
  .c03-services__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .c03-service { display: grid; grid-template-columns: 1fr minmax(240px,.8fr); gap: var(--space-5); }
  .c03-service__media { margin: 0; aspect-ratio: 4/3; }
  .c03-service small { min-height: 0; }
  .c03-discovery__footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .c03-hero { min-height: 590px; }
  .c03-hero__content { padding-block: var(--space-8) var(--space-7); }
  .c03-hero__actions { align-items: flex-start; flex-direction: column; }
  .c03-proof ul { grid-template-columns: 1fr; }
  .c03-proof li, .c03-proof li:first-child, .c03-proof li:nth-child(3) { padding: var(--space-4) 0; border-right: 0;
    border-bottom: 1px solid var(--color-border); }
  .c03-proof li:last-child { border-bottom: 0; }
  .c03-sector-grid { grid-template-columns: 1fr; }
  .c03-sector-grid li:nth-child(odd) { border-right: 0; }
  .c03-sector-grid li:not(:last-child) { border-bottom: 1px solid var(--color-border); }
  .c03-sector-grid a { min-height: 104px; }
  .c03-section-head { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .c03-work { grid-template-columns: 1fr; gap: var(--space-6); }
  .c03-work__feature, .c03-work__primary { grid-column: auto; }
  .c03-work__feature .c03-work__media, .c03-work__primary .c03-work__media { aspect-ratio: 4/3; }
  .c03-discovery__routes { grid-template-columns: 1fr; gap: var(--grid-gap-mobile); }
  .c03-discovery__route { padding: var(--space-5); }
  .c03-discovery__index { margin-bottom: var(--space-6); }
  .c03-discovery__actions { align-items: stretch; flex-direction: column; width: 100%; }
  .c03-discovery__actions .c-cta, .c03-discovery__contact { width: 100%; justify-content: center; }
  .c03-service { display: flex; }
  .c03-service__media { margin-top: var(--space-4); aspect-ratio: 16/7; }
}

@media (prefers-reduced-motion: reduce) {
  .c03-hero__media img { animation: none; transform: none; }
  .c03-sector-grid a, .c03-work__media img, .c03-service__media img,
  .c03-work__card strong, .c03-service strong, .c03-service b, .c03-discovery__route { transition: none; }
}