/* ==========================================================================
   Section layouts.

   Rule followed throughout: no two sections on the same page share a layout
   family. The home page runs split-hero, editorial band, bento, photo grid,
   stat band, and split CTA, in that order.
   ========================================================================== */

/* ==========================================================================
   HOME 1 - full-bleed video hero

   The footage is a 480x848 portrait clip, so covering a widescreen band keeps
   only a horizontal slice of it. object-position is pulled up to 42% to hold
   the planting rather than the sky, and a two-axis scrim guarantees the white
   type clears WCAG AA over every frame.

   The section runs up behind the sticky navbar (negative top margin) so the
   video reaches the top of the window. layout.css makes the navbar transparent
   while the hero is in view.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(82vh, 760px);
  margin-top: calc(var(--nav-h) * -1);
  padding-block: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 5.5rem))
                 clamp(5rem, 3.5rem + 6vw, 8rem);
  overflow: hidden;
  background: var(--brand-950);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
/* Two scrims that barely overlap: one darkens the left third so the copy holds
   contrast, the other only shades the top strip behind the navbar and the very
   bottom edge. The middle and right of the frame stay close to the raw footage. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6, 34, 15, 0.82) 0%,
      rgba(6, 34, 15, 0.58) 34%,
      rgba(6, 34, 15, 0.14) 66%,
      rgba(6, 34, 15, 0.05) 100%),
    linear-gradient(180deg,
      rgba(5, 28, 12, 0.46) 0%,
      rgba(5, 28, 12, 0.00) 26%,
      rgba(5, 28, 12, 0.00) 74%,
      rgba(5, 28, 12, 0.42) 100%);
}

.hero__copy { max-width: min(46rem, 100%); }
.hero h1 {
  font-size: var(--step-6);
  max-width: 17ch;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__copy p {
  margin-top: var(--space-5);
  font-size: var(--step-1);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.88);
  max-width: 42ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.hero .btn-row { margin-top: var(--space-7); }

/* the outline button needs its own stroke to stay readable over footage */
.hero .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: var(--max-w);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: var(--lh-snug);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

@media (max-width: 900px) {
  .hero { min-height: min(92vh, 680px); }
  .hero__copy, .hero__copy p { max-width: none; }
  /* a portrait clip on a portrait screen needs no vertical bias */
  .hero__bg video, .hero__bg img { object-position: center center; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(5, 28, 12, 0.80) 0%,
      rgba(5, 28, 12, 0.52) 40%,
      rgba(5, 28, 12, 0.86) 100%);
  }
}

/* Under reduced motion the video is replaced by its poster frame. */
@media (prefers-reduced-motion: reduce) {
  .hero__bg video { display: none; }
  .hero__bg {
    background-image: url("/images/hero-poster-v3.webp");
    background-size: cover;
    background-position: center 50%;
  }
}

/* ==========================================================================
   HOME 2 - editorial statement band
   ========================================================================== */
.statement {
  border-block: 1px solid var(--border);
  background: var(--bg-sunken);
}
.statement p {
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: var(--tracking-flat);
  color: var(--text);
  max-width: 24ch;
}
.statement__meta {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-6) var(--space-7);
}
.statement__meta div { border-top: 2px solid var(--accent); padding-top: var(--space-3); }
.statement__meta dt {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.statement__meta dd {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.statement__inner { max-width: none; }

/* ==========================================================================
   HOME 3 - bento. Four items, four cells, deliberate rhythm.
   Two cells carry photography so it is never a wall of white text cards.
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.bento__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.bento__cell--wide { grid-column: span 2; }
.bento__cell--tall { grid-row: span 2; justify-content: flex-end; }

/* photo cells */
.bento__cell--photo { border: 0; }
.bento__cell--photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bento__cell--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(7, 42, 18, 0.20) 0%,
              rgba(7, 42, 18, 0.62) 42%,
              rgba(7, 42, 18, 0.94) 100%);
}
.bento__cell--photo > * { position: relative; z-index: 2; }
.bento__cell--photo h3 { color: #fff; }
.bento__cell--photo .tick-list li { color: rgba(255, 255, 255, 0.94); }
.bento__cell--photo .tick-list li::before { background: var(--gold-400); }

/* tinted cell, for visual variation without a photograph */
.bento__cell--tint { background: var(--brand-950); border-color: transparent; }
.bento__cell--tint h3 { color: #fff; }
.bento__cell--tint .tick-list li { color: rgba(255, 255, 255, 0.92); }
.bento__cell--tint .tick-list li::before { background: var(--gold-400); }

.bento__num {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-text);
  margin-bottom: auto;
}
.bento__cell--photo .bento__num,
.bento__cell--tint .bento__num { color: var(--gold-400); }
.bento__cell--photo .bento__num,
.bento__cell--photo h3 { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }

.bento h3 { margin-top: var(--space-6); margin-bottom: var(--space-4); }

.tick-list { list-style: none; display: grid; gap: var(--space-2); }
.tick-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--step--1);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 2px;
  border-radius: 2px;
  background: var(--brand-600);
}

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--wide { grid-column: span 1; }
  .bento__cell--tall { grid-row: span 1; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell { min-height: 0; }
  .bento__cell--photo { min-height: 320px; }
}

/* ==========================================================================
   HOME 4 - programme photo grid. Scroll-snap rail on small screens.
   ========================================================================== */
.programs__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}
.program {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
}
.program:nth-child(1) { grid-column: span 7; }
.program:nth-child(2) { grid-column: span 5; }
.program:nth-child(3) { grid-column: span 5; }
.program:nth-child(4) { grid-column: span 7; }

.program img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.program:hover img { transform: scale(1.04); }
.program::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 22%, rgba(7, 42, 18, 0.55) 55%, rgba(7, 42, 18, 0.95) 100%);
}
.program__label {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
}
.program__label h3 { color: #fff; font-size: var(--step-2); }
.program__label p {
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step--1);
  line-height: var(--lh-normal);
  max-width: 40ch;
}

/* --- mobile and tablet: one programme at a time -----------------------------
   Without JavaScript this stays a plain swipe rail, which works on its own.
   With JavaScript, js/site.js adds .is-slideshow and the slides stack into a
   single grid cell: exactly one is visible, the rest sit underneath it, and
   moving between them is a crossfade rather than a horizontal scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .programs__grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-3);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .program {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .program img { aspect-ratio: 4 / 3; }
  .program__label h3 { font-size: var(--step-1); }

  /* the stack */
  .programs__grid.is-slideshow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    overflow-x: hidden;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    touch-action: pan-y;
    border-radius: var(--r-md);
  }
  .programs__grid.is-slideshow .program {
    grid-area: 1 / 1;
    flex: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity 560ms var(--ease),
                transform 700ms var(--ease),
                visibility 560ms;
  }
  .programs__grid.is-slideshow .program[data-active="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 1;
  }
  /* the label rides in a beat behind the image */
  .programs__grid.is-slideshow .program .program__label {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 480ms var(--ease) 120ms,
                transform 560ms var(--ease) 120ms;
  }
  .programs__grid.is-slideshow .program[data-active="true"] .program__label {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 601px) and (max-width: 860px) {
  .program img { aspect-ratio: 16 / 10; }
  .program__label h3 { font-size: var(--step-2); }
}

@media (prefers-reduced-motion: reduce) {
  .programs__grid { scroll-behavior: auto; }
}

/* --- slideshow controls ----------------------------------------------------
   Dots only. Arrows are unnecessary here: the slides respond to a swipe, and
   the dots say how many there are and which one you are on.
   Built by JavaScript only when the viewport needs them, so there is nothing
   to hide on desktop.
   -------------------------------------------------------------------------- */
.programs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
}

.programs__dots {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.programs__dot {
  position: relative;
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--line);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              width var(--dur-slow) var(--ease);
}
.programs__dot:hover { background: var(--ink-400); }
.programs__dot[aria-current="true"] {
  width: 30px;
  background: var(--gold-500);
}
/* the tap target is far bigger than the dot it draws */
.programs__dot::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

/* ==========================================================================
   HOME 5 - stat band. Numerals and hairlines, no card boxes.
   ========================================================================== */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.stat { border-top: 2px solid var(--gold-500); padding-top: var(--space-4); }
.stat dt {
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat dd {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
}
@media (max-width: 800px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); } }
@media (max-width: 420px) { .stats__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   HOME 6 - split CTA with photograph
   ========================================================================== */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.cta-split__copy {
  background: var(--brand-solid);
  color: #fff;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(1.5rem, 0.5rem + 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-split__copy h2 { color: #fff; max-width: 16ch; }
.cta-split__copy p {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--step-1);
  line-height: var(--lh-relaxed);
  max-width: 40ch;
}
.cta-split__copy .btn-row { margin-top: var(--space-7); }
.cta-split__copy .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.4);
}
.cta-split__copy .btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.cta-split__media { position: relative; min-height: 320px; }
.cta-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .cta-split { grid-template-columns: 1fr; }
  .cta-split__media { min-height: 260px; order: -1; }
}

/* ==========================================================================
   Inner page header. Compact, never a second hero.
   ========================================================================== */
.page-head {
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) clamp(2rem, 1.4rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--border);
}
.page-head h1 { max-width: 22ch; }
.page-head p {
  margin-top: var(--space-5);
  font-size: var(--step-1);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.problem { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.problem__aside { display: grid; gap: var(--space-5); }
.problem__figure {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-5);
}
.problem__figure b {
  display: block;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.problem__figure span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  max-width: 34ch;
}
.problem__close {
  margin-top: var(--space-6);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-flat);
  color: var(--text);
}
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; } }

.vm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.vm__card {
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}
.vm__card:first-child { border-top: 3px solid var(--gold-500); }
.vm__card:last-child  { border-top: 3px solid var(--brand-600); }
.vm__card h2 { font-size: var(--step-2); margin-bottom: var(--space-4); }
.vm__card p { color: var(--text-muted); line-height: var(--lh-relaxed); }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); }
.value { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.value b {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-text);
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.value h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.value p { font-size: var(--step--1); color: var(--text-muted); line-height: var(--lh-normal); }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* the 10 pillars: the strongest content on the site, so it gets real room */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); counter-reset: pillar; }
.pillar {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pillar:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.24); }
.pillar__n {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--gold-500);
  color: #24160A;
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pillar h3 { font-size: var(--step-0); color: #fff; margin-bottom: var(--space-2); }
.pillar p { font-size: var(--step--1); color: var(--text-on-dark-muted); line-height: var(--lh-normal); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

.diffs { display: grid; gap: 0; counter-reset: diff; }
.diff {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.diffs .diff:last-child { border-bottom: 1px solid var(--border); }
.diff__n {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.diff h3 { margin-bottom: var(--space-3); }
.diff p { color: var(--text-muted); line-height: var(--lh-relaxed); max-width: 62ch; }
@media (max-width: 620px) {
  .diff { grid-template-columns: 1fr; gap: var(--space-3); }
  .diff__n { font-size: var(--step-1); }
}

/* ==========================================================================
   RESEARCH
   ========================================================================== */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.area {
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.area:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.area__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: var(--space-5);
}
.area__icon svg { width: 24px; height: 24px; }
.area h3 { margin-bottom: var(--space-4); }
@media (prefers-color-scheme: dark) {
  .area__icon { background: var(--brand-100); color: var(--brand-500); }
}
@media (max-width: 980px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .areas { grid-template-columns: 1fr; } }

/* services, grouped into chunks rather than one long hairline-per-row table */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.service__dot {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-100);
  color: var(--gold-700);
  flex-shrink: 0;
}
.service__dot svg { width: 18px; height: 18px; }
.service h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
.service p { font-size: var(--step--1); color: var(--text-muted); line-height: var(--lh-normal); }
@media (prefers-color-scheme: dark) {
  .service__dot { background: rgba(245, 179, 53, 0.16); color: var(--gold-400); }
}
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }

/* ==========================================================================
   PROJECTS - ten pillar cards, one grid definition
   ========================================================================== */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.project-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.project-card__badge {
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.project-card h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.project-card p { font-size: var(--step--1); color: var(--text-muted); line-height: var(--lh-relaxed); }

/* two accent cards break the grid up; both use the locked palette */
.project-card--accent { background: var(--brand-950); border-color: transparent; }
.project-card--accent h3 { color: #fff; }
.project-card--accent p { color: var(--text-on-dark-muted); }
.project-card--accent .project-card__badge { background: var(--gold-500); color: #24160A; }

@media (prefers-color-scheme: dark) {
  .project-card__badge { background: var(--brand-100); color: var(--brand-500); }
  .project-card--accent .project-card__badge { background: var(--gold-500); color: #24160A; }
}
@media (max-width: 980px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .projects { grid-template-columns: 1fr; } }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-sunken);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(180deg, transparent, rgba(7, 42, 18, 0.9));
  color: #fff;
  font-size: var(--step--1);
  font-weight: 500;
  text-align: left;
}
.shot--a { grid-column: span 7; }
.shot--b { grid-column: span 5; aspect-ratio: 4 / 5; }
.shot--c { grid-column: span 4; aspect-ratio: 1; }
.shot--d { grid-column: span 4; aspect-ratio: 1; }
.shot--e { grid-column: span 4; aspect-ratio: 1; }
.shot--f { grid-column: span 6; aspect-ratio: 16 / 9; }
.shot--a, .shot--f, .shot--g { min-height: 0; }
.shot--g { grid-column: span 6; aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot { grid-column: span 1 !important; aspect-ratio: 1 !important; }
  .shot--a { grid-column: span 2 !important; aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .shot, .shot--a { grid-column: span 1 !important; aspect-ratio: 4 / 3 !important; }
}

/* lightbox */
.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(7, 14, 9, 0.88); backdrop-filter: blur(4px); }
.lightbox__inner {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox__cap {
  margin-top: var(--space-4);
  color: #fff;
  font-size: var(--step--1);
  text-align: center;
}
.lightbox__close {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox__close svg { width: 22px; height: 22px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.contact__aside {
  background: var(--brand-950);
  color: var(--text-on-dark);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
}
.contact__aside h2 { color: #fff; font-size: var(--step-2); }
.contact__aside > p {
  margin-top: var(--space-3);
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  line-height: var(--lh-relaxed);
}
.contact__list { list-style: none; margin-top: var(--space-7); display: grid; gap: var(--space-5); }
.contact__list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.09);
  color: var(--gold-400);
}
.contact__ico svg { width: 19px; height: 19px; }
.contact__list b {
  display: block;
  color: #fff;
  font-size: var(--step--1);
  margin-bottom: var(--space-1);
}
.contact__list div span, .contact__list div a {
  display: block;
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  line-height: 1.6;
  text-decoration: none;
}
.contact__list div a { padding-block: 4px; }
.contact__list div a:hover { color: var(--gold-400); text-decoration: underline; }

.contact__hours {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--gold-500);
}
.contact__hours h3 { color: var(--gold-400); font-size: var(--step--1); margin-bottom: var(--space-2); }
.contact__hours p { color: var(--text-on-dark-muted); font-size: var(--step--1); line-height: 1.7; }

.contact__form { padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.contact__form h2 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.contact__form > p { color: var(--text-muted); font-size: var(--step--1); margin-bottom: var(--space-7); }
.contact__form .btn { width: 100%; margin-top: var(--space-6); }

.form-status {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  line-height: var(--lh-normal);
  border: 1px solid transparent;
}
.form-status[data-state="success"] {
  display: block;
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-800);
}
.form-status[data-state="error"] {
  display: block;
  background: #FDECEA;
  border-color: #F3B4AF;
  color: #8E1B17;
}
@media (prefers-color-scheme: dark) {
  .form-status[data-state="success"] { background: var(--brand-100); border-color: var(--brand-700); color: #B9E6C5; }
  .form-status[data-state="error"] { background: #3A1614; border-color: #7A2A25; color: #FFB4AC; }
}

.btn .spinner { display: none; width: 16px; height: 16px; }
.btn[data-loading="true"] .spinner { display: block; animation: spin 700ms linear infinite; }
.btn[data-loading="true"] .btn__label { opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"] .spinner { animation: none; }
}

@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; }
  .contact__aside { order: 2; }
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound {
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-10);
}
.notfound b {
  display: block;
  font-size: clamp(4rem, 2rem + 10vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.notfound h1 { margin-top: var(--space-5); }
.notfound p { margin: var(--space-4) auto 0; color: var(--text-muted); max-width: 46ch; }
.notfound .btn-row { margin-top: var(--space-7); justify-content: center; }


/* ==========================================================================
   INTERACTION LAYER

   Hover and load states. Every rule here answers "what does this tell the
   user?" - that a thing is interactive, that a card is the one under the
   cursor, or that the page has arrived. Transform and opacity only, so none
   of it triggers layout. All of it collapses under prefers-reduced-motion
   via the global block in base.css.
   ========================================================================== */

/* hero copy arrives on load, since it sits above the scroll-reveal threshold */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy > * {
    animation: hero-in 700ms var(--ease) backwards;
  }
  .js .hero__copy > :nth-child(1) { animation-delay: 80ms; }
  .js .hero__copy > :nth-child(2) { animation-delay: 190ms; }
  .js .hero__copy > :nth-child(3) { animation-delay: 300ms; }
  .js .hero__caption { animation: hero-in 700ms var(--ease) 460ms backwards; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* statement columns: the gold rule grows in, so the row reads as a set */
.statement__meta div {
  position: relative;
  transition: transform var(--dur) var(--ease-out);
}
.statement__meta div::after {
  content: "";
  position: absolute;
  inset: -2px 0 auto 0;
  height: 2px;
  background: var(--brand-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.statement__meta div:hover { transform: translateY(-3px); }
.statement__meta div:hover::after { transform: scaleX(1); }

/* bento: lift the whole cell, and let photo cells breathe a little */
.bento__cell--photo img { transition: transform var(--dur-slow) var(--ease); }
.bento__cell--photo:hover img { transform: scale(1.05); }
.bento__cell--photo::after,
.bento__cell--tint { transition: background var(--dur) var(--ease-out); }

/* programme tiles: the caption rises with the image */
.program__label { transition: transform var(--dur) var(--ease-out); }
.program:hover .program__label { transform: translateY(-4px); }

/* stat band: the gold rule is the affordance, not a box */
.stat { transition: transform var(--dur) var(--ease-out); }
.stat:hover { transform: translateY(-3px); }
.stat dt { transition: color var(--dur) var(--ease-out); }
.stat:hover dt { color: var(--gold-400); }

/* closing CTA: a slow push on the photograph as the eye lands there */
.cta-split__media img { transition: transform 900ms var(--ease); }
.cta-split:hover .cta-split__media img { transform: scale(1.04); }

/* about: values and differentiators get a hairline that fills */
.value { transition: transform var(--dur) var(--ease-out); position: relative; }
.value::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.value:hover { transform: translateY(-3px); }
.value:hover::after { transform: scaleX(1); }

.diff { transition: background var(--dur) var(--ease-out); }
.diff:hover { background: var(--bg-sunken); }
.diff__n { transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.diff:hover .diff__n { color: var(--brand-600); transform: translateX(3px); }

.vm__card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.vm__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.pillar__n { transition: transform var(--dur) var(--ease-out); }
.pillar:hover .pillar__n { transform: scale(1.08); }

/* research: the icon chip warms up with the card */
.area__icon { transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.area:hover .area__icon { background: var(--brand-solid); color: #fff; }

.service { transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.service:hover { transform: translateY(-2px); border-color: var(--brand-200); }
.service__dot { transition: transform var(--dur) var(--ease-out); }
.service:hover .service__dot { transform: rotate(-6deg) scale(1.06); }

/* projects: the pillar badge picks up the accent on hover */
.project-card__badge { transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.project-card:not(.project-card--accent):hover .project-card__badge {
  background: var(--gold-500);
  color: #24160A;
}

/* gallery: the caption slides up to meet the cursor */
.shot figcaption { transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.shot:hover figcaption { transform: translateY(-3px); }
.shot { transition: box-shadow var(--dur) var(--ease-out); }
.shot:hover { box-shadow: var(--shadow-lg); }

/* contact: the icon chips warm up when the panel is hovered */
.contact__ico { transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.contact__list li:hover .contact__ico {
  background: rgba(245, 179, 53, 0.18);
  transform: translateY(-2px);
}