/* ==========================================================================
   Beyond Engineering Consulting Ltd.
   Visual system: XCO2-inspired restraint (huge light type, near-monochrome,
   square geometry, generous whitespace) built on BEC's own square-module mark.
   ========================================================================== */

/* Tokens */
:root {
  /* Neutrals (sampled from beyondeng.co.uk) */
  --ink:        #333;
  --ink-strong: #111;
  --ink-soft:   #666;
  --grey:       #7a7c7b;
  --line:       #cacccb;
  --pale:       #f0f2f1;
  --pale-2:     #e4e7e6;
  --white:      #fff;

  /* BEC brand, sampled from beyondeng.co.uk */
  --navy:   #002451;
  --navy-2: #114673;
  --steel:  #2c5b82;
  --blue:   #1761a0;
  --violet: #52449e;
  --purple: #8a25b1;
  --orange: #f58220; /* brand accent */
  --accent-ink: #691c87; /* darkened brand purple, for small text on white */
  --brand-gradient: linear-gradient(100deg, var(--blue) 0%, var(--violet) 52%, var(--purple) 100%);

  /* Rhythm */
  --gut:      clamp(1.5rem, 5vw, 4.5rem);
  --section:  clamp(4.5rem, 11vw, 10.5rem);
  --maxw:     1440px;
  --measure:  62ch;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Mulish", "Proxima Nova", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, .55vw + .88rem, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
address { font-style: normal; }

::selection { background: var(--navy); color: #fff; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Layout primitives */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow { max-width: 1080px; }

.section { padding-block: var(--section); }
.section-pale { background: var(--pale); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* Collapses the top pad when a section sits directly under a page hero */
.section-flush { padding-top: 0; }

.rule { height: 1px; background: var(--line); border: 0; }

/* Typography */
.eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
}

.display,
h1.display {
  font-weight: 200;
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink-strong);
}

/* Subpage headings sit a step below the homepage hero */
.display-sub { font-size: clamp(2.25rem, 5.6vw, 4.5rem); }

h2, .h2 {
  font-weight: 200;
  font-size: clamp(1.9rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink-strong);
}

h3, .h3 {
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink-strong);
}

h4, .h4 {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-strong);
}

.lede {
  font-weight: 200;
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 30ch;
}
.lede-wide { max-width: 46ch; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.25em; }
.prose strong { font-weight: 600; color: var(--ink-strong); }
.muted { color: var(--ink-soft); }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Brand mark */
.mark { display: block; width: auto; }

.logo {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}
.logo .mark { height: 40px; width: 40px; }
.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.logo__text b {
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.logo__text span {
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--purple);
  border-bottom: 0;
}
/* Logo reads as a white mark on the purple bar */
.header .mark rect { fill: #fff; }
.header .mark .mark__letters { fill: var(--purple); }
.header .logo__text b { color: #fff; }
.header .logo__text span { color: rgba(255, 255, 255, .72); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.3vw, 2.4rem); }
.nav a {
  position: relative;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  padding: .7rem 1.4rem !important;
  color: var(--purple) !important;
  background: #fff;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { color: #fff !important; background: var(--navy); }

/* Mobile nav */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  margin-right: -10px;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: #fff;
  transition: transform .35s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--gut);
    background: var(--purple);
    border-bottom: 0;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding-block: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: .82rem; }
  .nav a::after { display: none; }
  .nav__cta { margin-top: 1.5rem; text-align: center; border-bottom: 0 !important; }
}

/* Hero */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(560px, 88svh, 900px);
  overflow: hidden;
  background: var(--white);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem); }

/* Rotating adjective, XCO2's signature move */
.rotator {
  display: block;
  position: relative;
  height: 1em;
  overflow: hidden;
}
.rotator span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
  white-space: nowrap;
}
.rotator span[data-active="true"] { opacity: 1; transform: none; }

.hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem 1.1rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.hero__sub .eyebrow { color: var(--ink-soft); }
.hero__sub .divider { color: var(--line); }

/* Square-module field: BEC's mark abstracted into a background motif */
.module-field {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(4px, .5vw, 8px);
  pointer-events: none;
}
.hero .module-field {
  right: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 28vw, 400px);
  aspect-ratio: 1;
  opacity: .9;
}
/* Keep the hero copy clear of the module field on wide screens */
@media (min-width: 1000px) {
  .hero__inner { padding-right: clamp(300px, 34vw, 520px); }
}
@media (max-width: 999px) {
  .hero .module-field { top: auto; bottom: -6%; transform: none; opacity: .16; }
}
.module-field i { display: block; background: var(--pale-2); }
.module-field i.on   { background: var(--navy); }
.module-field i.grad { background: var(--brand-gradient); }

/* Buttons & arrow links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.05rem 2rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  transition: background .35s var(--ease);
}
.btn:hover { background: var(--blue); }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn-ghost {
  color: var(--ink-strong);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { color: #fff; background: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

.arrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.arrow svg { transition: transform .35s var(--ease); }
.arrow:hover svg { transform: translateX(6px); }

/* Notice bar (XCO2's award strip) */
.notice {
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  color: #fff;
  background: var(--navy);
}
.notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
}
.notice p {
  font-weight: 200;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  max-width: 62ch;
}
.notice .arrow { color: #fff; }

/* Tile grid (XCO2's four image cards) */
/* Dividers come from per-cell outlines, not a gap-plus-background fill —
   an incomplete final row would otherwise expose the fill as a grey block. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: clamp(360px, 44vw, 520px);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  isolation: isolate;
}
.tile__panel {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pale);
  transition: transform .8s var(--ease);
}
.tile:hover .tile__panel { transform: scale(1.04); }
/* Sits in the tile's upper right so it never runs into the copy block below */
.tile__panel .module-field {
  inset: 9% -10% auto auto;
  width: 42%;
  aspect-ratio: 1;
  opacity: .5;
}
.tile-dark { color: #fff; }
.tile-dark .tile__panel { background: var(--navy); }
.tile-dark h3 { color: #fff; }
.tile-dark .arrow { color: #fff; }
.tile-dark .module-field i { background: rgba(255, 255, 255, .07); }
.tile-dark .module-field i.on { background: rgba(255, 255, 255, .16); }

.tile__title { font-weight: 200; font-size: clamp(1.5rem, 2.4vw, 2.15rem); letter-spacing: -.02em; }
.tile p { max-width: 34ch; color: inherit; opacity: .78; font-size: .98rem; }

/* Split rows */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split-even { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.sticky-head { position: sticky; top: 120px; }
@media (max-width: 860px) { .sticky-head { position: static; } }

/* Service blocks */
.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.75rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) { .service { grid-template-columns: 1fr; } }

.service__index {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.1rem;
}
.service__index b {
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--accent-ink);
}

.checklist { display: grid; gap: .1rem; }
.checklist li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  align-items: baseline;
  padding-block: .82rem;
  border-bottom: 1px solid var(--line);
  font-size: .99rem;
}
.checklist li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .62em;
  background: var(--brand-gradient);
}
.checklist-defs li { grid-template-columns: 1fr; gap: .3rem; padding-block: 1.15rem; }
.checklist-defs li::before { display: none; }
.checklist-defs b { display: block; font-weight: 600; color: var(--ink-strong); }
.checklist-defs span { color: var(--ink-soft); font-size: .96rem; }

/* Stats / facts */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.facts > div {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
  border-left: 1px solid var(--line);
}
/* Align the first figure to the page grid, not the cell padding */
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts b {
  display: block;
  font-weight: 200;
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink-strong);
}
.facts .eyebrow { margin-top: .85rem; }

/* People */
.person {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) { .person { grid-template-columns: 1fr; } }

.person__mark {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pale);
}
.person__mark .initials {
  font-weight: 200;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  letter-spacing: -.04em;
  color: var(--navy);
  opacity: .9;
}
.person__mark .module-field {
  inset: auto -12% -12% auto;
  width: 54%;
  aspect-ratio: 1;
  opacity: .62;
}
.person__creds {
  margin-top: .5rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent-ink);
}

/* Quote */
.quote {
  max-width: 24ch;
  font-weight: 200;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--ink-strong);
}
.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-size: .74rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Sector grid (projects) */
.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1px;
}
.sector {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.sector b { font-weight: 300; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink-strong); }
.sector i {
  display: block;
  width: 10px; height: 10px;
  background: var(--brand-gradient);
  transition: transform .45s var(--ease);
}
.sector:hover i { transform: scale(2.4); }

/* Contact / form */
.field { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.field label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .95rem 1.05rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-strong);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--navy); outline: none; }
.field textarea { min-height: 160px; resize: vertical; }

.consent {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin-bottom: 2rem;
  font-size: .9rem;
  color: var(--ink-soft);
}
.consent input { width: 18px; height: 18px; margin-top: .22rem; accent-color: var(--navy); flex-shrink: 0; }

.contact-list { display: grid; gap: 2.25rem; }
.contact-list a:hover { color: var(--blue); }
.contact-list .h4 + p, .contact-list .eyebrow + p { margin-top: .5rem; }

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}
.cta-band .module-field {
  inset: auto -4% -30% auto;
  width: clamp(240px, 34vw, 480px);
  aspect-ratio: 1;
  opacity: .26;
}
.cta-band .module-field i { background: rgba(255, 255, 255, .18); }
.cta-band .module-field i.on,
.cta-band .module-field i.grad { background: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .btn { color: var(--navy); background: #fff; }
.cta-band .btn:hover { color: #fff; background: var(--blue); }

/* Footer */
.footer {
  padding-block: clamp(3rem, 7vw, 5.5rem) 2rem;
  font-size: .94rem;
  color: var(--ink-soft);
  background: var(--white);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(2.25rem, 5vw, 4rem);
}
.footer h4 {
  margin-bottom: 1.15rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey);
}
.footer li + li { margin-top: .6rem; }
.footer a:hover { color: var(--ink-strong); }
.footer address { font-style: normal; line-height: 1.8; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--grey);
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .rotator { height: auto; }
  .rotator span { position: static; opacity: 1; transform: none; }
  .rotator span + span { display: none; }
}

/* =======================================================================
   Photographic register — full-bleed imagery, overlay header, light type
   ======================================================================= */

/* Overlay header (sits on top of a photo hero) */
.header-over {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  transition: background .4s var(--ease);
}
.header-over.is-stuck { background: var(--purple); }
body.has-photo-hero { padding-top: 0; }

/* Photo hero */
.hero-photo {
  min-height: 100svh;
  align-content: end;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  animation: heroDrift 18s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: none; }
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,36,81,.55) 0%, rgba(0,36,81,.18) 34%, rgba(0,36,81,.62) 100%);
}
.hero-photo .hero__inner {
  padding-block: 0 clamp(5rem, 14vh, 9rem);
  padding-right: var(--gut) !important;
  display: grid;
  justify-items: center;
}
.hero-photo .display { color: #fff; }
.hero-photo .eyebrow { color: rgba(255,255,255,.82); }
.hero-photo .hero__sub { justify-content: center; }
.hero-photo .hero__sub .eyebrow { color: rgba(255,255,255,.86); }
.hero-photo .hero__sub .divider { color: rgba(255,255,255,.4); }
.hero-photo .rotator { text-align: center; }
.hero-photo .gradient-text {
  background: linear-gradient(100deg, #9fd0ff 0%, #d4a9ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-photo .btn-ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.hero-photo .btn-ghost:hover { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px #fff; }
.hero-photo .module-field { display: none; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: clamp(1.75rem, 4vh, 2.75rem);
  z-index: 3;
  translate: -50% 0;
  color: rgba(255,255,255,.85);
  animation: cueBob 2.6s var(--ease) infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* Full-bleed image panel */
.panel {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(440px, 62svh, 680px);
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}
.panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.panel:hover .panel__media img { transform: scale(1.035); }
.panel__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,36,81,.12) 0%, rgba(0,36,81,.72) 100%);
}
.panel__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.panel h2, .panel .h2 { color: #fff; max-width: 20ch; }
.panel .eyebrow { color: rgba(255,255,255,.75); }
.panel .arrow { color: #fff; margin-top: 1.75rem; }
.panel .arrow:hover { color: #fff; opacity: .8; }
.panel-tall { min-height: clamp(520px, 78svh, 820px); }

/* Inline figures */
.figure { position: relative; overflow: hidden; }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure figcaption {
  margin-top: .9rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Portraits */
.portrait {
  width: clamp(140px, 20vw, 200px);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pale);
  flex-shrink: 0;
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s var(--ease);
}
.portrait:hover img { filter: none; }

/* Director portraits */
.person__mark-photo { background: var(--navy); }
.person__mark-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s var(--ease), transform 1s var(--ease);
}
.person:hover .person__mark-photo img { filter: none; transform: scale(1.03); }

/* Photo-hero refinements */
.hero-photo { align-content: center; }
.hero-photo .hero__inner { padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem); }
.hero-photo .display {
  max-width: 15ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero-photo .btn {
  color: var(--navy);
  background: #fff;
}
.hero-photo .btn:hover { color: #fff; background: var(--purple); }

/* Project gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.gallery > .figure img { aspect-ratio: 3 / 2; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Projects grid — square tiles, description overlays on hover
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1px;
}

.work-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pale);
  isolation: isolate;
  /* Renders into the 1px gap, so neighbours share one hairline and the grid
     never paints a background behind the empty cells on the last row. */
  box-shadow: 0 0 0 1px var(--line);
}
.work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.work-card:hover img,
.work-card:focus-visible img { transform: scale(1.05); }

/* Resting label */
.work-card__base,
.work-card__over {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  color: #fff;
  transition: opacity .45s var(--ease);
}
.work-card__base {
  background: linear-gradient(to top, rgba(0, 27, 61, .94) 0%, rgba(0, 27, 61, .74) 26%, rgba(0, 27, 61, .28) 52%, rgba(0, 27, 61, 0) 78%);
}

/* Hover state */
.work-card__over {
  opacity: 0;
  background: var(--brand-gradient);
  justify-content: flex-end;
}
.work-card__over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 36, 81, .5);
  z-index: -1;
}
.work-card:hover .work-card__over,
.work-card:focus-visible .work-card__over { opacity: 1; }
.work-card:hover .work-card__base,
.work-card:focus-visible .work-card__base { opacity: 0; }

.work-card__sector {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.work-card__name {
  margin-top: .6rem;
  font-weight: 300;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.work-card__place {
  margin-top: .2rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .78);
}
.work-card__sum {
  margin-top: 1rem;
  font-size: .94rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.work-card__go {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Touch devices never get a hover, so the overlay would be unreachable */
@media (hover: none) {
  .work-card__over { display: none; }
  .work-card__base { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .work-card img { transition: none; }
  .work-card:hover img, .work-card:focus-visible img { transform: none; }
}

/* ==========================================================================
   Project case study page
   ========================================================================== */
.pj-top { padding-block: clamp(2rem, 5vw, 3.25rem) clamp(3rem, 6vw, 5rem); }

.pj-back {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
}
.pj-back:hover { color: var(--ink-strong); }
.pj-back svg { transition: transform .35s var(--ease); }
.pj-back:hover svg { transform: translateX(-6px); }

.pj-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pj-head__text .lede { max-width: 34ch; }
.pj-place {
  margin-top: 1rem;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.pj-lead { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--pale); }
.pj-lead img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .pj-head { grid-template-columns: 1fr; align-items: start; }
  .pj-lead { order: -1; }
}

/* Facts bar. Named .pj-facts, not .facts — the homepage already uses that. */
.pj-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .pj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pj-facts { grid-template-columns: 1fr; } }

/* Padding rather than a column gap, so the rules run unbroken across the row */
.fact {
  padding: 1.6rem clamp(1.25rem, 2.5vw, 2.5rem) 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.fact dd { margin-top: .6rem; color: var(--ink); }
.fact-wide { grid-column: 1 / -1; padding-right: 0; }
.fact__list {
  display: grid;
  gap: .35rem clamp(1.25rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.fact__list li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--ink);
}
.fact__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--brand-gradient);
}

/* Three-up gallery keeps the client's smaller source images sharp */
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-3 > .figure img { aspect-ratio: 4 / 3; }
@media (max-width: 1024px) { .gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .gallery-3 { grid-template-columns: 1fr; } }

/* Previous / next */
.pj-nav { border-top: 1px solid var(--line); }
.pj-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.pj-nav__link { display: block; }
.pj-nav__link .eyebrow { display: block; }
.pj-nav__link b {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .7rem;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.015em;
  color: var(--ink-strong);
}
.pj-nav__link svg { flex-shrink: 0; transition: transform .35s var(--ease); }
.pj-nav__next { text-align: right; justify-self: end; }
.pj-nav__prev:hover svg { transform: translateX(-6px); }
.pj-nav__next:hover svg { transform: translateX(6px); }
.pj-nav__link:hover b { color: var(--blue); }

/* Technical drawings are shown whole, never cropped */
.work-card--plan img,
.pj-lead-plan img,
.figure-plan img {
  object-fit: contain;
  padding: 6%;
  background: var(--pale);
}
.figure-plan { background: var(--pale); }