/* =========================================================================
   Merkel Constructions
   Light and precise. Off-white ground, ink type, one signal blue, monospace
   readouts, and site photography carried at full strength: where words have
   to sit over a picture the ground fades in behind them rather than a dark
   sheet being laid over the picture.
   ========================================================================= */

:root {
  /* Light ground, ink type, photography at full strength. Surfaces are warm
     off-whites rather than pure white, so a bright page still has structure. */
  /* One triple, used by every wash over a photograph, so the whole site's
     brightness is a single edit rather than thirty gradients. */
  --bg-rgb:    246 243 237;

  --bg:        rgb(var(--bg-rgb));
  --bg-2:      #fffaf2;
  --panel:     #fffdf8;
  --panel-2:   #f2e8d7;
  --ink:       #181a1d;
  --ink-soft:  #3f454d;
  --muted:     #686b70;
  --faint:     #96928a;
  --line:      rgba(24, 26, 29, 0.14);
  --line-2:    rgba(24, 26, 29, 0.08);
  --accent:    #e75b25;
  --accent-2:  #f49a24;
  --accent-ink:#ffffff;

  /* The glass pane. Used by the ghost button and the nav control, so the two
     cannot drift apart. */
  --pane:           rgb(255 255 255 / 0.58);
  --pane-hover:     rgb(255 255 255 / 0.82);
  --pane-edge:      rgb(20 22 26 / 0.16);
  --pane-edge-hover: rgb(20 22 26 / 0.3);
  --pane-shadow:    0 1px 0 0 rgb(255 255 255 / 0.7) inset, 0 14px 34px -24px rgb(20 22 26 / 0.5);
  --pane-shadow-hover: 0 1px 0 0 rgb(255 255 255 / 0.9) inset, 0 20px 40px -22px rgb(20 22 26 / 0.55);

  /* The one dark surface left: type set over a photograph. */
  --on-image:  #ffffff;
  --shade:     rgba(10, 12, 16, 0.55);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  /* Flat base. The fixed underlay below supplies the depth, and it has to
     show through, so nothing here may paint over it. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Scroll progress ------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent-2);
  z-index: 100;
  box-shadow: 0 0 12px var(--accent-2);
}

/* Layout helpers -------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; z-index: 2; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-block;
}
/* No leading rule. A short dash before a label is the house style of every
   generated page on the internet, and the eyebrow reads better without it. */

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(30px, 5vw, 54px); margin: 18px 0 16px; }
.section-head p { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); margin: 0; }
.section-pad { padding: clamp(80px, 12vw, 160px) 0; }

/* Nav ------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(8 16 23 / 0.18);
  backdrop-filter: blur(4px) saturate(1.25);
  -webkit-backdrop-filter: blur(4px) saturate(1.25);
}
.nav.scrolled {
  background: rgb(8 16 23 / 0.58);
  backdrop-filter: blur(8px) saturate(1.45);
  -webkit-backdrop-filter: blur(8px) saturate(1.45);
  border-bottom: 1px solid rgb(255 255 255 / 0.28);
  box-shadow: 0 12px 30px -24px rgb(0 0 0 / 0.9), 0 1px 0 rgb(255 255 255 / 0.14) inset;
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 30px; width: auto; display: block; transition: height .4s var(--ease); }
.nav.scrolled .brand-logo { height: 26px; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--muted); text-decoration: none;
  font-family: var(--font-mono); text-transform: uppercase; font-size: 12px; letter-spacing: 0.12em;
  transition: color .25s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
/* Styled with .btn.ghost further down: it is the same button as the rest. The
   old solid-accent hover lived here and set white text with !important, which
   beat the glass pane and made the label vanish on hover. */

.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); width: 42px; height: 38px; cursor: pointer; }
.nav-toggle span { display:block; width:18px; height:1.5px; background: var(--ink); margin: 3px auto; transition: .3s var(--ease); }
.nav.open-sheet .nav-toggle { position: relative; z-index: 110; border-color: var(--ink); }
.nav.open-sheet .nav-toggle span { position: absolute; left: 11px; top: 17px; margin: 0; background: var(--ink); }
.nav.open-sheet .nav-toggle span:first-child { transform: rotate(45deg); }
.nav.open-sheet .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open-sheet .nav-toggle span:last-child { transform: rotate(-45deg); }

/* Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  padding: 120px 0 0;
}

/* Slideshow */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slides .slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: 50% 38%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ease);
  will-change: opacity, transform;
}
.hero-slides .slide.is-active {
  opacity: 1;
  animation: kenburns 8s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slides .slide { transition: opacity .3s linear; transform: none; }
  .hero-slides .slide.is-active { animation: none; transform: none; }
}

/* Black overlay: keeps the blueprint as faint texture, text stays legible */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: transparent;
}

.hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hero-copy {
  transform: none;
  transform-style: flat;
  transition: transform .18s ease-out;
  width: min(680px, 100%);
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgb(255 255 255 / 0.32);
  background: linear-gradient(135deg, rgb(8 16 23 / 0.68), rgb(8 16 23 / 0.38));
  color: var(--on-image);
  box-shadow: 0 24px 70px -38px rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.28) inset;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.hero-tag { margin-bottom: 16px; }
.hero h1 {
  font-size: clamp(46px, 8vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--on-image);
}
.hero-sub { margin-top: 18px; max-width: 46ch; color: rgb(255 255 255 / 0.86); font-size: clamp(17px, 1.6vw, 23px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Slide dots */
/* In flow under the buttons, so nothing collides with the readout strip and
   the whole hero stays inside the frame on a short landscape phone. */
.hero-dots {
  position: relative; z-index: 3;
  margin-top: 22px;
  display: flex; gap: 12px;
}
.hero-dots .dot {
  width: 30px; height: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(20,22,26,0.24); transition: background .3s var(--ease);
}
.hero-dots .dot.is-active { background: var(--accent-2); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 26px; text-decoration: none; cursor: pointer; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font-weight: 500;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--accent-2); border-color: var(--accent-2); }
.btn .arw { font-size: 18px; line-height: 1; transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn.ghost { background: rgb(255 255 255 / 0.82); color: var(--ink); border-color: rgba(20,22,26,0.28); }
.btn.ghost:hover { border-color: var(--ink); background: #ffffff; }

/* Readout strip --------------------------------------------------------- */
/* Sits on the floor of the hero rather than after it, so the hero is one
   whole screen and the strip is the last thing read before scrolling. */
.hero-readout {
  position: relative; z-index: 3;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(10px);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero-readout .cell {
  padding: 22px var(--gutter); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.hero-readout .cell:last-child { border-right: 0; }
.hero-readout .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.hero-readout .v { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 27px); font-weight: 600; }

/* Services -------------------------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden;
  transition: background .4s var(--ease);
}
.service::before {
  content:""; position:absolute; left:0; top:0; height:100%; width:2px; background: var(--accent-2);
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.service:hover { background: var(--panel); }
.service:hover::before { transform: scaleY(1); }
.service .code { font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); letter-spacing: 0.14em; }
.service h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 16px 0 14px; }
.service p { color: var(--muted); margin: 0 0 22px; }
.service ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.service li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); border: 1px solid var(--line); padding: 6px 10px; text-transform: uppercase; }
.service .num { position: absolute; right: clamp(20px,3vw,40px); top: clamp(20px,3vw,40px); font-family: var(--font-display); font-size: 54px; color: var(--line); font-weight: 700; }

/* Stats ----------------------------------------------------------------- */
.stats { background: rgb(255 255 255 / 0.86); backdrop-filter: blur(6px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(44px, 7vw, 88px) var(--gutter); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 74px); line-height: 1; letter-spacing: -0.03em; }
.stat .num em { color: var(--accent-2); font-style: normal; }
.stat .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }

/* Projects -------------------------------------------------------------- */
.proj-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
  transition: all .25s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.project {
  background: var(--bg); padding: clamp(28px, 3.4vw, 44px); position: relative;
  transition: background .35s var(--ease);
  display: flex; flex-direction: column; min-height: 300px;
}
.project:hover { background: var(--panel); }
.project .meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 12px; color: var(--faint); letter-spacing: 0.08em; }
.project .meta .sector { color: var(--accent-2); text-transform: uppercase; }
.project h3 { font-size: clamp(26px, 3vw, 40px); margin: 18px 0 6px; }
.project .loc { color: var(--muted); font-size: 14px; }
.project .blurb { color: var(--muted); margin: 18px 0 0; }
.project .metric { margin-top: auto; padding-top: 26px; }
.project .metric b { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.02em; display: block; }
.project .metric span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* Approach -------------------------------------------------------------- */
#approach { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.approach .lead { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; margin: 22px 0 0; }
.approach .lead em { color: var(--accent-2); font-style: normal; }
.approach .body p { color: var(--muted); margin: 0 0 20px; }
.approach-steps { list-style: none; margin: 30px 0 0; padding: 0; }
.approach-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.approach-steps li:last-child { border-bottom: 1px solid var(--line); }
.approach-steps .st-num { font-family: var(--font-mono); color: var(--accent-2); font-size: 13px; letter-spacing: 0.1em; }
.approach-steps h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.approach-steps p { margin: 0; color: var(--muted); font-size: 15px; }

/* Studio ---------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.member { background: var(--bg); padding: clamp(26px, 3vw, 40px); transition: background .35s var(--ease); }
.member:hover { background: var(--panel); }
.member .avatar {
  width: 84px; height: 84px; border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--accent-2);
  margin-bottom: 24px; position: relative;
}
.member .avatar::after { content:""; position:absolute; inset:6px; border:1px solid var(--line-2); }
.member h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.member .role { color: var(--muted); font-size: 14px; }
.member .disc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 14px; }

/* Contact --------------------------------------------------------------- */
.contact { border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 100px); }
.contact-info h2 { font-size: clamp(30px, 4.4vw, 52px); margin: 16px 0 22px; }
.contact-info p { color: var(--muted); max-width: 42ch; }
.contact-detail { margin-top: 40px; display: grid; gap: 22px; }
.contact-detail .row { border-top: 1px solid var(--line); padding-top: 16px; }
.contact-detail .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.contact-detail .val { font-size: 17px; margin-top: 4px; }
.contact-detail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent-2); }

form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field .opt { text-transform: none; color: var(--faint); }
.field input, .field select, .field textarea {
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; padding: 14px 16px; width: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-2); background: var(--panel-2); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #ff4d4d; }
.field .err { color: #ff7a7a; font-size: 12px; font-family: var(--font-mono); min-height: 14px; }
.field.two { grid-template-columns: 1fr 1fr; gap: 20px; display: grid; }
.honeypot {
  /* Hidden without leaving the page, so it cannot widen the document the way
     an off-screen negative offset does. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-status { font-family: var(--font-mono); font-size: 13px; padding: 14px 16px; border: 1px solid var(--line); display: none; }
.form-status.ok { display: block; border-color: var(--accent-2); color: var(--ink); }
.form-status.bad { display: block; border-color: #ff4d4d; color: #ff9b9b; }
button[type=submit]:disabled { opacity: .5; cursor: wait; }

/* Footer ---------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: clamp(56px, 8vw, 90px) 0; }
.footer-logo { height: 34px; margin-bottom: 22px; }
.footer-brand p { color: var(--muted); max-width: 22ch; margin: 0; }
.footer .col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.footer .col a { display: block; color: var(--muted); text-decoration: none; padding: 6px 0; transition: color .2s var(--ease); }
.footer .col a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }

/* Reveal ---------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  /* Set per element by main.js so siblings arrive in sequence, not together. */
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* Headings carry further and settle more slowly than the text around them, so
   a section arrives in a sequence rather than as one block.

   Deliberately not a clip-path wipe: clipping the heading to nothing leaves it
   with no rendered area, and IntersectionObserver then never reports it as
   visible, so the reveal that was meant to run never fires at all. */
h1[data-reveal], h2[data-reveal],
[data-reveal] h1, [data-reveal] h2 {
  transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
h1[data-reveal].in, h2[data-reveal].in,
[data-reveal].in h1, [data-reveal].in h2 { transform: none; }


@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  h1[data-reveal], h2[data-reveal],
  [data-reveal] h1, [data-reveal] h2 { transform: none; transition: none; }
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .hero-readout { grid-template-columns: repeat(2, 1fr); }
  .hero-readout .cell:nth-child(2) { border-right: 0; }
  .hero-readout .cell:nth-child(1), .hero-readout .cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .approach { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
  display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
  background: rgb(255 255 255 / 0.97); backdrop-filter: blur(14px); padding: 20px var(--gutter); gap: 6px;
  border-bottom: 1px solid var(--line);
  }
  .nav-links.open a { padding: 12px 0; color: #07111b !important; }
  .nav-links.open a:hover, .nav-links.open a.is-active { color: var(--accent) !important; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(44px, 14vw, 78px); }
  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .field.two { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-readout { grid-template-columns: 1fr; }
  .hero-readout .cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .team-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-sub { font-size: 18px; }
}

/* Short-viewport safety: keep hero CTAs in frame on landscape phones.
   Fit the hero to the real viewport height and compress spacing so the
   eyebrow, headline, subline and buttons all stay above the fold. */
@media (max-height: 620px) {
  .hero { min-height: 100svh; padding: 72px 0 0; justify-content: center; }
  .hero-tag { margin-bottom: 12px; }
  .hero h1 { font-size: clamp(32px, 7.6vw, 52px); }
  .hero-sub { margin-top: 10px; font-size: 16px; }
  .hero-actions { margin-top: 18px; }
  .hero-dots { margin-top: 16px; }
}
@media (max-height: 620px) and (max-width: 720px) {
  .hero .btn { padding: 12px 18px; }
}

/* =========================================================================
   Multi-page components
   ========================================================================= */

.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after {
  content: ""; display: block; height: 1px; background: var(--accent-2); margin-top: 4px;
}

/* Interior page header with image band ---------------------------------- */
.page-header {
  position: relative;
  padding: clamp(130px, 18vw, 210px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-header-media {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--ph-image);
  background-size: cover; background-position: center;
  opacity: 0.5;
}
.page-header::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: transparent;
}
/* A flex child shrinks to its content, so the wrap needs its width back. */
.page-header-inner { position: relative; z-index: 2; width: 100%; }
.page-header h1 { font-size: clamp(40px, 7vw, 84px); letter-spacing: -0.035em; margin: 16px 0 0; }
.page-header p { color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 20px); max-width: 54ch; margin: 18px 0 0; }

/* Section variants ------------------------------------------------------ */
.section-pad.alt {
  background: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head.with-action { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; max-width: none; }
.section-head.with-action h2 { font-size: clamp(30px, 5vw, 54px); margin: 18px 0 12px; }
.link-arrow { color: var(--accent-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow .arw { transition: transform .3s var(--ease); }
.link-arrow:hover .arw { transform: translateX(4px); }

/* Services header split -------------------------------------------------- */
.services-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.services-head .section-head { margin-bottom: 0; }
.services-media { border: 1px solid var(--line); overflow: hidden; aspect-ratio: 16 / 10; }
.services-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }

/* Leadership / CEO ------------------------------------------------------- */
.leadership { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.leadership-media { position: relative; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); }
.leadership-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leadership-badge { position: absolute; left: 0; bottom: 0; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; }
.leadership-body .eyebrow { margin-bottom: 20px; }
.leadership-body blockquote { margin: 0 0 22px; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.18; letter-spacing: -0.02em; }
.leadership-body h3 { font-size: 22px; margin: 0 0 12px; }
.leadership-body p { color: var(--muted); margin: 0 0 22px; max-width: 54ch; }

/* Cards grid (projects) with images ------------------------------------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--panel); overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: rgba(42,95,196,0.55); transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(20,22,26,0.5); }
.card .thumb { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--panel); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.card:hover .thumb img { transform: scale(1.05); }
.card-body { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.card .meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); }
.card .meta .sector { color: var(--accent-2); text-transform: uppercase; }
.card h3 { font-size: clamp(20px, 2vw, 26px); margin: 14px 0 6px; }
.card .loc { color: var(--muted); font-size: 13px; }
.card p { color: var(--muted); font-size: 14px; margin: 14px 0 0; }
.card .metric { margin-top: auto; padding-top: 20px; display: flex; align-items: baseline; gap: 10px; }
.card .metric b { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.card .metric span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* Project detail --------------------------------------------------------- */
.project-loading { padding: 200px 0 120px; color: var(--muted); font-family: var(--font-mono); }
.project-hero { padding-bottom: clamp(40px, 6vw, 80px); }
.project-hero .meta-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.project-hero .meta-row .sector { color: var(--accent-2); }
.project-body { padding: clamp(60px, 9vw, 120px) 0; }
.project-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 90px); }
.project-cols .overview p { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.7; }
.project-facts { border-top: 1px solid var(--line); }
.project-facts .fact { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); }
.project-facts .fact .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.project-facts .fact .v { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.project-services { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.project-services span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); padding: 7px 12px; color: var(--ink); }
.project-figure { margin: 0; border: 1px solid var(--line); overflow: hidden; background: var(--panel); }
.project-figure img { width: 100%; display: block; }
.project-next { border-top: 1px solid var(--line); background: var(--bg-2); }
.project-next a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(30px,5vw,54px) 0; text-decoration: none; color: var(--ink); }
.project-next .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.project-next .nm { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.02em; }
.project-next .arw { font-size: 32px; color: var(--accent-2); }

/* Careers ---------------------------------------------------------------- */
.careers-intro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
.careers-intro h2 { font-size: clamp(26px, 3.4vw, 40px); }
.careers-intro p { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); margin: 0; }
.roles { border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 24px; align-items: center; padding: clamp(22px,3vw,32px) 0; border-bottom: 1px solid var(--line); transition: background .3s var(--ease); }
.role:hover { background: var(--panel); }
.role h3 { font-size: clamp(19px, 2vw, 25px); margin: 0 0 6px; }
.role .team { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.role .role-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.role .role-sum { color: var(--muted); font-size: 14px; margin: 8px 0 0; grid-column: 1 / 2; }
.role .apply { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink); border: 1px solid var(--line); padding: 12px 20px; white-space: nowrap; transition: all .25s var(--ease); }
.role .apply:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Contact note ----------------------------------------------------------- */
.contact-note { margin-top: 34px; border-left: 2px solid var(--accent-2); padding: 6px 0 6px 18px; }
.contact-note p { color: var(--muted); font-size: 14px; margin: 0; }

/* CTA band --------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.cta-band .cta-media { position: absolute; inset: 0; z-index: 0; opacity: 0.32; }
.cta-band .cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.82) 48%, rgb(255 255 255 / 0.5) 100%); }
.cta-inner { position: relative; z-index: 2; padding: clamp(70px, 10vw, 130px) 0; text-align: center; }
.cta-inner h2 { font-size: clamp(30px, 5vw, 58px); }
.cta-inner p { color: var(--muted); max-width: 52ch; margin: 18px auto 30px; font-size: clamp(16px,1.4vw,19px); }

/* 404 -------------------------------------------------------------------- */
.notfound { min-height: 78vh; display: flex; align-items: center; padding: 140px 0 90px; }
.notfound h1 { font-size: clamp(44px, 8vw, 96px); letter-spacing: -0.035em; margin: 16px 0; }
.notfound p { color: var(--muted); font-size: 18px; max-width: 44ch; margin: 0 0 30px; }

/* Live chat widget ------------------------------------------------------- */
.chat { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 120; }
.chat-toggle {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 28px -10px rgba(20,22,26,0.45); transition: transform .25s var(--ease), background .25s var(--ease);
}
.chat-toggle:hover { transform: translateY(-2px); background: var(--accent-2); }
.chat-toggle .i-close { display: none; }
.chat.open .chat-toggle .i-open { display: none; }
.chat.open .chat-toggle .i-close { display: block; }
.chat-panel {
  position: absolute; right: 0; bottom: 72px; width: min(370px, calc(100vw - 32px));
  height: 520px; max-height: calc(100vh - 120px);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 28px 70px -24px rgba(20,22,26,0.45);
  animation: chat-in .25s var(--ease);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.chat-head-id { display: flex; align-items: center; gap: 12px; }
.chat-head-id .dot { width: 9px; height: 9px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 8px #35d07f; }
.chat-head-id strong { font-family: var(--font-display); font-size: 15px; display: block; }
.chat-head-id small { color: var(--muted); font-size: 11px; }
.chat-min { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.chat-min:hover { color: var(--ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 82%; padding: 10px 13px; font-size: 14px; line-height: 1.5; border: 1px solid var(--line); }
.chat-msg.agent { align-self: flex-start; background: var(--panel-2); border-top-left-radius: 0; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-color: var(--accent); border-bottom-right-radius: 0; }
.chat-msg.typing { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat-form input { flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); padding: 11px 13px; font-family: var(--font-body); font-size: 14px; }
.chat-form input:focus { outline: none; border-color: var(--accent-2); }
.chat-form button { width: 44px; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s var(--ease); }
.chat-form button:hover { background: var(--accent-2); }

/* Responsive for new components ----------------------------------------- */
@media (max-width: 960px) {
  .services-head { grid-template-columns: 1fr; }
  .services-media { order: -1; }
  .leadership { grid-template-columns: 1fr; }
  .leadership-media { max-width: 420px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .careers-intro { grid-template-columns: 1fr; }
  .project-cols { grid-template-columns: 1fr; }
  .section-head.with-action { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr; }
  .role { grid-template-columns: 1fr; gap: 10px; }
  .role .apply { justify-self: start; margin-top: 8px; }
  .role .role-sum { grid-column: 1; }
}

/* =========================================================================
   Persistent underlay
   One image behind the whole site, fixed to the viewport, so moving between
   pages and sections reads as one continuous surface. Everything else lays
   over it: section artwork, translucent bands, type.
   ========================================================================= */

.underlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.underlay-img {
  position: absolute;
  /* Overscan, so the parallax shift never exposes an edge. */
  inset: -6% -4%;
  /* Site photography is a wide banner with people low in the frame; cover in a
     tall viewport must keep them rather than crop to empty sky. */
  background-position: 50% 62%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--underlay-shift, 0px), 0) scale(1.06);
  will-change: transform;
}

/* A faint drafting grid, which keeps a soft photograph from reading as a blur. */
.underlay-grain {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 22, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 26, 0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}

/* The scrim carries the site's depth and keeps every headline legible over
   whatever photograph is behind it. */
.underlay-scrim {
  position: absolute;
  inset: 0;
  background: transparent;
}

/* =========================================================================
   Chapters: full-height landing sections
   ========================================================================= */

.chapter {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(96px, 12vh, 150px) 0 clamp(72px, 10vh, 120px);
  scroll-margin-top: 0;
}

/* Proximity, not mandatory: a section taller than the viewport must still be
   readable by scrolling through it rather than being yanked to the next one. */
@media (min-height: 620px) and (pointer: fine) {
  .page-home { scroll-snap-type: y proximity; }
  .page-home .chapter { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home { scroll-snap-type: none; }
}

.chapter-inner { position: relative; z-index: 3; width: 100%; }

.chapter-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.chapter-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  display: block;
  /* Settles as the section arrives; see .is-onstage below. */
  transform: scale(1.12);
  opacity: 0;
  transition: transform 1.6s var(--ease), opacity 1.2s var(--ease);
}
.chapter.is-onstage .chapter-media img { transform: scale(1.02); opacity: 1; }

.chapter-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .chapter-media img { transform: none; opacity: 1; transition: none; }
  .underlay-img { transform: none; }
}

/* Centred variant, used by the metrics chapter. */
.section-head.centred { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centred .eyebrow { justify-content: center; }
.chapter.is-centred .stats-grid {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(6px);
}
.chapter.is-centred .stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(30px, 4vw, 54px) clamp(20px, 3vw, 40px); }

/* Grids inside a chapter carry their own surface so they read off the photo. */
.chapter .services-grid,
.chapter .cards-grid .card {
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(8px);
}
.chapter .services-grid { grid-template-columns: repeat(4, 1fr); }
.chapter .service { padding: clamp(22px, 2.2vw, 34px); }
.chapter .service .num { font-size: 38px; }
.chapter .service h3 { font-size: clamp(18px, 1.5vw, 22px); }
.chapter .service p { font-size: 14.5px; margin-bottom: 16px; }

.chapter .leadership-media { border-color: var(--line); }

.contact-lede { color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); max-width: 46ch; }
.chapter .contact-grid form {
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 38px);
}
.chapter .contact-detail { margin-top: 30px; }

/* =========================================================================
   Chapter rail: where you are on the page
   ========================================================================= */

.chapter-rail {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.chapter-rail a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chapter-rail .label {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.chapter-rail a:hover .label,
.chapter-rail a.is-active .label { opacity: 1; transform: none; }
.chapter-rail .tick {
  width: 22px;
  height: 2px;
  background: rgba(20, 22, 26, 0.24);
  transition: width .35s var(--ease), background .35s var(--ease);
}
.chapter-rail a.is-active { color: var(--ink); }
.chapter-rail a.is-active .tick { width: 40px; background: var(--accent-2); }

@media (max-width: 1100px) { .chapter-rail { display: none; } }

/* =========================================================================
   Interior page headers sit over the underlay too
   ========================================================================= */

.page-header { min-height: 62svh; display: flex; align-items: flex-end; }

@media (max-width: 980px) {
  .chapter .services-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter { padding: clamp(88px, 12vh, 120px) 0 64px; }
}
@media (max-width: 720px) {
  .chapter { min-height: auto; padding: 84px 0 64px; }
  .chapter .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero { display: block !important; padding-top: 0 !important; }
  .hero-slides { position: absolute !important; inset: 0 !important; width: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; }
  .hero-inner { display: flex !important; width: auto !important; padding: 228px 24px 112px !important; }
  .hero-readout { position: absolute !important; right: 0 !important; bottom: 0 !important; width: 100% !important; }
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  max-height: none;
  overflow: hidden;
}
.hero-slides .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.hero-scrim {
  display: block !important;
  background:
    linear-gradient(180deg, rgb(5 12 17 / 0.58) 0%, rgb(5 12 17 / 0.14) 42%, rgb(5 12 17 / 0.78) 100%),
    linear-gradient(90deg, rgb(5 12 17 / 0.55) 0%, transparent 68%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgb(255 193 7 / 0.23) 1px, transparent 1px), linear-gradient(90deg, rgb(255 193 7 / 0.23) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, black, transparent 82%);
}
.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  max-width: 1320px;
  margin: 0 auto;
  padding: 150px 40px 132px;
}
.hero-copy {
  max-width: 720px;
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-tag { color: #ffc107 !important; }
.hero h1 {
  max-width: 8ch;
  color: #f7f4ec !important;
  font-size: clamp(58px, 8.4vw, 126px);
  line-height: 0.94;
  letter-spacing: -0.065em;
  text-shadow: 0 3px 20px rgb(0 0 0 / 0.2);
}
.hero h1 .accent, .hero h1 strong { color: #ff5a0a; }
.hero-sub { max-width: 54ch; color: rgb(247 244 236 / 0.84) !important; }
.hero-readout {
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 4;
  display: flex;
  width: min(620px, 52vw);
  background: #ffc107 !important;
  color: #101820 !important;
  border: 0;
}
.hero-readout .cell { border-color: rgb(16 24 32 / 0.2); }
.hero-dots { display: none; }
.nav {
  position: absolute;
  z-index: 10;
  background: linear-gradient(180deg, rgb(5 12 17 / 0.72), transparent) !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.18) !important;
}
.nav-links a, .nav-contact { color: #f7f4ec !important; }
.nav-links a.is-active { color: #ffc107 !important; }
.brand-logo { filter: none !important; }

@media (max-width: 720px) {
  .hero { min-height: 100svh; }
  .hero-slides .slide { background-position: 52% 50%; }
  .hero::after { background-size: 56px 56px; opacity: 0.18; mask-image: linear-gradient(180deg, black, transparent 82%); }
  .hero-inner {
    align-items: stretch;
    min-height: 100svh;
    padding: 228px 24px 112px;
  }
  .hero-copy { max-width: none; margin-top: auto; }
  .hero h1 { max-width: 7ch; font-size: clamp(50px, 15vw, 74px); }
  .hero-sub { max-width: 38ch; font-size: 16px; }
  .hero-readout { right: 0; bottom: 0; width: 100%; min-height: 72px; }
  .hero-readout .cell { padding: 14px 16px; }
  .nav { background: rgb(5 12 17 / 0.62) !important; }
}

/* Short landscape phones: the hero readout is the first thing to go. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-readout { display: none; }
  .chapter { min-height: auto; }
}

/* Chapter fit and legibility --------------------------------------------
   A chapter has to hold a whole screen without spilling, so the shared
   rhythm is tightened inside one and the artwork is allowed to read. */

.chapter { padding: clamp(92px, 11vh, 130px) 0 clamp(48px, 7vh, 84px); }
.chapter .section-head { margin-bottom: clamp(26px, 3.4vh, 44px); }
.chapter .section-head h2 { font-size: clamp(28px, 4vw, 48px); }

/* The oversized index would sit under the heading in a four-up grid, and the
   S-0n code already numbers each discipline. */
.chapter .service .num { display: none; }
.chapter .service ul { gap: 6px; }
.chapter .service li { padding: 5px 8px; }

.chapter .cards-grid .thumb { aspect-ratio: 16 / 10; }
.chapter .cards-grid .card-body { padding: clamp(18px, 2vw, 26px); }
.chapter .cards-grid p { font-size: 14px; }

/* Enough scrim for type on the left, enough light on the right for the
   photograph to be worth having. */
.chapter-scrim {
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb) / 0.96) 0%, rgb(var(--bg-rgb) / 0.8) 46%, rgb(var(--bg-rgb) / 0.2) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.5) 0%, rgb(var(--bg-rgb) / 0.14) 34%, rgb(var(--bg-rgb) / 0.55) 100%);
}
.chapter.is-centred .chapter-scrim {
  background: radial-gradient(90% 80% at 50% 50%, rgb(var(--bg-rgb) / 0.8) 0%, rgb(var(--bg-rgb) / 0.95) 72%);
}

.hero-readout .v { font-size: clamp(17px, 1.9vw, 24px); }
.hero-readout .cell { padding: 18px var(--gutter); min-width: 0; }

/* Washes for photography ------------------------------------------------
   The photographs carry the page. A wash exists only where words actually
   sit, and it falls away quickly, so the left of a section reads as page and
   the right is the picture at full strength. */

.chapter-scrim {
  background:
    linear-gradient(90deg,
      rgb(var(--bg-rgb) / 0.9) 0%,
      rgb(var(--bg-rgb) / 0.76) 22%,
      rgb(var(--bg-rgb) / 0.28) 46%,
      rgb(var(--bg-rgb) / 0) 70%),
    linear-gradient(180deg,
      rgb(var(--bg-rgb) / 0.2) 0%,
      rgb(var(--bg-rgb) / 0) 22%,
      rgb(var(--bg-rgb) / 0) 78%,
      rgb(var(--bg-rgb) / 0.2) 100%);
}
.chapter.is-centred .chapter-scrim {
  background:
    radial-gradient(66% 56% at 50% 50%, rgb(var(--bg-rgb) / 0.84) 0%, rgb(var(--bg-rgb) / 0.5) 58%, rgb(var(--bg-rgb) / 0.06) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.28) 0%, rgb(var(--bg-rgb) / 0.04) 45%, rgb(var(--bg-rgb) / 0.3) 100%);
}

.hero-scrim {
  background:
    linear-gradient(90deg,
      rgb(var(--bg-rgb) / 0.9) 0%,
      rgb(var(--bg-rgb) / 0.72) 20%,
      rgb(var(--bg-rgb) / 0.22) 44%,
      rgb(var(--bg-rgb) / 0) 68%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.18) 0%, rgb(var(--bg-rgb) / 0) 24%, rgb(var(--bg-rgb) / 0.18) 100%);
}
.hero-slides .slide { background-position: 50% 38%; }

.page-header-media { background-position: 50% 58%; }
.page-header::after {
  background:
    linear-gradient(90deg,
      rgb(var(--bg-rgb) / 0.9) 0%,
      rgb(var(--bg-rgb) / 0.74) 22%,
      rgb(var(--bg-rgb) / 0.24) 48%,
      rgb(var(--bg-rgb) / 0) 74%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.12) 0%, rgb(var(--bg-rgb) / 0) 32%, rgb(var(--bg-rgb) / 0.42) 100%);
}

/* Panels over a photograph stay solid, so the picture never fights the text
   inside them. */
.chapter .services-grid,
.chapter .cards-grid .card { background: #ffffff; }
.chapter.is-centred .stats-grid { background: rgb(255 255 255 / 0.95); }
.chapter .contact-grid form { background: #ffffff; box-shadow: 0 24px 60px -30px rgba(20, 22, 26, 0.4); }

/* Contrast over photography ---------------------------------------------
   The nav and the chapter rail float over whatever the image happens to be
   doing behind them, so both carry their own ground rather than trusting it. */

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.92) 0%, rgb(var(--bg-rgb) / 0.62) 60%, rgb(var(--bg-rgb) / 0) 100%);
  transition: opacity .4s var(--ease);
}
.nav.scrolled::before { opacity: 0; }
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover { color: var(--accent); }
.nav-links a.is-active { color: var(--ink); border-bottom: 1px solid var(--accent-2); }

.chapter-rail a { color: var(--muted); }
.chapter-rail .label {
  background: rgb(var(--bg-rgb) / 0.92);
  padding: 3px 7px;
  border-radius: 2px;
}
.chapter-rail .tick { background: rgba(20, 22, 26, 0.3); box-shadow: 0 0 0 1px rgb(var(--bg-rgb) / 0.6); }
.chapter-rail a.is-active { color: var(--ink); }
.chapter-rail a.is-active .tick { background: var(--accent-2); }

/* Section artwork carries the page rather than hiding under it. */
.services-media img,
.leadership-media img,
.project-figure img { filter: none; }

/* Motion over photography -----------------------------------------------
   Section artwork moves more slowly than the words in front of it, which is
   what gives a full-height section depth rather than the feel of a slide. */

.chapter-media {
  transform: translate3d(0, var(--media-shift, 0px), 0);
  will-change: transform;
}
.chapter-media img { transform: scale(1.14); }
.chapter.is-onstage .chapter-media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .chapter-media { transform: none; }
  .chapter-media img,
  .chapter.is-onstage .chapter-media img { transform: none; }
}

/* Cards lift on a light ground with shadow rather than a colour change. */
.service, .project, .leadership-media { transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .18s ease-out; transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; }
.service:hover { background: var(--panel); box-shadow: 0 22px 50px -34px rgba(20, 22, 26, 0.55); }
.btn { box-shadow: 0 10px 24px -16px rgba(31, 79, 168, 0.9); }
.btn.ghost { box-shadow: none; }

/* Alignment --------------------------------------------------------------
   Content starts on the same line as the wordmark rather than in a centred
   column that begins a gutter further in, and the chapter rail keeps a lane
   of its own on the right. */
@media (min-width: 1101px) {
  .wrap {
    max-width: min(1460px, calc(100vw - var(--gutter) * 2));
    margin-left: var(--gutter);
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .page-home .wrap { max-width: min(1460px, calc(100vw - var(--gutter) * 2 - 170px)); }
}

/* =========================================================================
   Buttons
   Glass over whatever is behind them: a translucent pane, a hairline edge, a
   highlight that sweeps across on hover, and a lift that settles rather than
   snapping. The primary button keeps the brand blue; the ghost is the pane
   on its own.
   ========================================================================= */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0) 55%),
    linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  border: 1px solid rgb(255 255 255 / 0.18);
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.28) inset,
    0 14px 30px -18px rgb(31 79 168 / 0.85);
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    background-color .35s var(--ease-out);
}

/* The sweep. A single pane of light crossing the face, not a colour change. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.3) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(120%); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.34) inset,
    0 22px 44px -20px rgb(31 79 168 / 0.9);
}
.btn:active { transform: translateY(0); transition-duration: .1s; }

/* The ghost button and the nav control are the same pane, declared once. */
.btn.ghost,
.nav-cta {
  border-radius: 4px;
  background: var(--pane);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--pane-edge);
  color: var(--ink) !important;
  text-decoration: none;
  box-shadow: var(--pane-shadow);
}
.btn.ghost::before { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.75) 48%, transparent 66%); }
.btn.ghost:hover,
.nav-cta:hover {
  background: var(--pane-hover);
  border-color: var(--pane-edge-hover);
  box-shadow: var(--pane-shadow-hover);
}
/* Same button, smaller, because it sits in the bar. */
.nav-cta { padding: 12px 20px; font-size: 12px; }

.chip, .role .apply, .project-services span {
  border-radius: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgb(255 255 255 / 0.6);
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.chip:hover, .role .apply:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .nav-cta:hover, .chip:hover, .role .apply:hover { transform: none; transition: none; }
  .btn::before { display: none; }
}

/* =========================================================================
   Services index and detail
   ========================================================================= */

.service-index { display: grid; gap: 14px; }

.service-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 40px;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.service-row:hover {
  transform: translateY(-3px);
  border-color: rgb(42 95 196 / 0.4);
  box-shadow: 0 26px 54px -34px rgb(20 22 26 / 0.55);
}

.service-row-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--panel-2); }
.service-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.service-row:hover .service-row-media img { transform: scale(1.06); }

.service-row-body .code { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--accent-2); }
.service-row-body h2 { font-size: clamp(21px, 2.2vw, 30px); margin: 8px 0 10px; }
.service-row-body p { color: var(--muted); margin: 0 0 14px; max-width: 62ch; font-size: 15px; }
.service-row-body ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.service-row-body li {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 5px 9px;
}
.service-row-go { font-size: 30px; color: var(--faint); justify-self: end; transition: transform .4s var(--ease-out), color .4s var(--ease-out); }
.service-row:hover .service-row-go { transform: translateX(5px); color: var(--accent-2); }

.roles-cta { margin-top: 40px; }

/* =========================================================================
   Mobile
   Not a narrowed desktop. The nav becomes a full sheet, a chapter puts its
   photograph up top as a real banner instead of a wash nobody can see at
   390px, and every control is sized for a thumb.
   ========================================================================= */

@media (max-width: 720px) {
  .nav { padding: 14px var(--gutter); }
  .nav.scrolled { padding: 10px var(--gutter); }
  .brand-logo { height: 24px; }
  .nav-cta { display: none; }

  .nav-toggle {
    width: 46px; height: 44px;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* A sheet, not a dropdown: the whole screen, big targets, one thumb. */
  .nav-links.open {
    position: fixed;
    inset: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    gap: 4px;
    padding: 104px var(--gutter) 40px;
    background: rgb(var(--bg-rgb) / 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 0;
    z-index: 95;
    animation: sheet-in .32s var(--ease-out);
  }
  .nav-links.open a {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ink);
    padding: 14px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .nav-links.open a:last-child { border-bottom: 0; }
  /* The bar rides above the sheet, so the wordmark and the close control stay
     where the thumb left them. */
  .nav.open-sheet { z-index: 97; background: transparent; backdrop-filter: none; border-bottom: 0; }
  .nav.open-sheet::before { opacity: 0; }
  body.nav-open { overflow: hidden; }

  @keyframes sheet-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

  /* Chapters: the picture is a banner, the words sit on the page under it. */
  /* The hero keeps its clip: its slides are scaled for the Ken Burns move and
     would widen the document without it. */
  .chapter:not(.hero) {
    display: block;
    min-height: 0;
    padding: 0 0 clamp(48px, 9vw, 72px);
    overflow: visible;
  }
  .chapter:not(.hero) .chapter-media {
    position: relative;
    inset: auto;
    height: 54vw;
    min-height: 210px;
    max-height: 320px;
    margin-bottom: clamp(26px, 6vw, 40px);
    transform: none;
    border-radius: 0;
  }
  .chapter:not(.hero) .chapter-media img { transform: none; opacity: 1; }
  .chapter:not(.hero) .chapter-scrim { display: none; }
  .chapter-inner { padding: 0 var(--gutter); }
  #services { padding-top: 0; }
  /* :not(#services) carries an id, so this outranks any plain .hero rule.
     The hero sets its own headroom to clear the bar and has to be excluded. */
  .chapter:not(#services):not(.hero) { padding-top: clamp(48px, 9vw, 72px); }

  .section-head h2, .chapter .section-head h2 { font-size: clamp(27px, 8vw, 36px); }
  .chapter .section-head { margin-bottom: 26px; }

  /* Full-width controls, thumb sized. */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { justify-content: center; padding: 17px 22px; }
  .section-head.with-action .btn { width: 100%; justify-content: center; }
  .roles-cta .btn { width: 100%; justify-content: center; }
  .role .apply { width: 100%; justify-content: center; text-align: center; padding: 15px 20px; }

  .service-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
  .service-row-media { aspect-ratio: 16 / 9; }
  .service-row-go { display: none; }

  .cards-grid { gap: 16px; }
  .card .thumb { aspect-ratio: 16 / 11; }

  .contact-grid form { padding: 20px 18px; }
  .field.two { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; }

  .chat { right: 14px; bottom: 14px; }
  .chat-toggle { width: 54px; height: 54px; }
  .chat-panel { height: min(74vh, 540px); }

  /* Centring a hero taller than the screen pushes its head under the bar, so
     on a phone it starts from the top and the readout takes the floor. */
  .hero { justify-content: flex-start; padding: 124px 0 0; }
  .hero-inner { padding-bottom: 30px; }
  .hero h1 { font-size: clamp(42px, 13vw, 66px); }
  .hero-dots { margin-top: 22px; }

  .hero-readout { grid-template-columns: repeat(2, 1fr); }
  .hero-readout .cell { padding: 14px var(--gutter); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .hero-readout .cell:nth-child(2n) { border-right: 0; }
  .hero-readout .v { font-size: 18px; }
}

@media (max-width: 359px) {
  .hero-readout { grid-template-columns: 1fr; }
  .hero-readout .cell { border-right: 0; }
}

/* =========================================================================
   Type over photography
   The words carry their own surface rather than depending on a wash across
   the whole picture. Contrast stops being a function of which photograph
   happens to be behind them, and the picture stays bright.
   ========================================================================= */

.hero-copy,
.chapter .section-head,
.page-header-inner .eyebrow,
.page-header-inner h1,
.page-header-inner p {
  position: relative;
}

.hero-copy {
  display: block;
  width: min(920px, 100%);
  padding: clamp(26px, 2.8vw, 40px) clamp(24px, 2.8vw, 40px) clamp(22px, 2.4vw, 32px);
  background: rgb(8 16 23 / 0.22);
  color: var(--on-image);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 6px;
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.85) inset,
    0 40px 90px -50px rgb(20 22 26 / 0.65);
}

.chapter .section-head {
  display: inline-block;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px);
  background: rgb(8 16 23 / 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 6px;
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.85) inset,
    0 34px 76px -48px rgb(20 22 26 / 0.6);
}
.chapter .section-head.with-action {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 44px);
  justify-content: space-between;
  width: 100%;
}
.chapter.is-centred .section-head { display: block; margin-left: auto; margin-right: auto; }

/* An interior header sets its words on the same surface. */
.page-header-inner { display: flex; flex-direction: column; align-items: flex-start; }
.page-header-inner > * { position: relative; z-index: 2; }
.page-header-inner::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -18px;
  width: min(100%, 62ch);
  height: calc(100% + 46px);
  background: rgb(8 16 23 / 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 6px;
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.85) inset,
    0 34px 76px -48px rgb(20 22 26 / 0.6);
  transform: translate(clamp(-30px, -2.4vw, -22px), 0);
  padding: 0 clamp(22px, 2.4vw, 30px);
  box-sizing: content-box;
  z-index: 1;
}

/* With the words on their own ground, the wash over the picture can go
   almost entirely. */
.chapter-scrim {
  background:
    linear-gradient(90deg,
      rgb(var(--bg-rgb) / 0.5) 0%,
      rgb(var(--bg-rgb) / 0.24) 30%,
      rgb(var(--bg-rgb) / 0) 62%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.16) 0%, rgb(var(--bg-rgb) / 0) 24%, rgb(var(--bg-rgb) / 0.16) 100%);
}
.chapter.is-centred .chapter-scrim {
  background:
    radial-gradient(70% 60% at 50% 50%, rgb(var(--bg-rgb) / 0.4) 0%, rgb(var(--bg-rgb) / 0.16) 62%, rgb(var(--bg-rgb) / 0) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.16) 0%, rgb(var(--bg-rgb) / 0) 45%, rgb(var(--bg-rgb) / 0.16) 100%);
}
.hero-scrim {
  background:
    linear-gradient(90deg,
      rgb(var(--bg-rgb) / 0.44) 0%,
      rgb(var(--bg-rgb) / 0.2) 28%,
      rgb(var(--bg-rgb) / 0) 60%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.14) 0%, rgb(var(--bg-rgb) / 0) 22%, rgb(var(--bg-rgb) / 0.14) 100%);
}
.page-header::after {
  background:
    linear-gradient(90deg,
      rgb(var(--bg-rgb) / 0.46) 0%,
      rgb(var(--bg-rgb) / 0.2) 32%,
      rgb(var(--bg-rgb) / 0) 64%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.1) 0%, rgb(var(--bg-rgb) / 0) 30%, rgb(var(--bg-rgb) / 0.34) 100%);
}

/* Three cells now that the studio does not name a city. */
.hero-readout { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
  .hero-copy {
    display: block;
    max-width: none;
    padding: 24px 20px 22px;
    border-radius: 5px;
  }
  .chapter .section-head { display: block; padding: 20px 18px 18px; }
  .chapter .section-head.with-action { display: block; }
  .page-header-inner::before { display: none; }
  .page-header-inner { padding: 22px 18px; background: rgb(8 16 23 / 0.16); backdrop-filter: none; border: 1px solid rgb(255 255 255 / 0.26); border-radius: 5px; }
  .hero-readout { grid-template-columns: 1fr 1fr; }
  .hero-readout .cell:last-child { grid-column: 1 / -1; border-right: 0; }
}

/* Split editorial treatment: text owns a solid surface, photography stays
   clean and fully visible in a dedicated panel beside it. */
.underlay { display: none; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: 100svh;
  padding: 0;
  background: #182b38 !important;
}
.hero-slides {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-height: 100svh;
  z-index: 0;
}
.hero-slides .slide {
  background-size: cover;
  background-position: 50% 50%;
  transform: none;
  animation: none !important;
}
.hero-scrim, .chapter-scrim, .page-header::after { background: transparent !important; }
.hero-inner {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  z-index: 3;
  width: auto;
  max-width: none;
  padding: clamp(80px, 11vw, 150px) clamp(24px, 6vw, 96px);
}
.hero-copy {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero h1, .hero-sub { color: #f8f6f0 !important; }
.hero-tag { color: #f49a24 !important; }
.hero h1 { max-width: 8ch; }
.hero-readout { grid-column: 1 / -1; grid-row: 1; align-self: end; z-index: 4; background: rgb(8 16 23 / 0.82); }
.hero-dots { display: none; }
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: 82svh;
  padding: 0;
  background: var(--panel);
}
.chapter:nth-of-type(odd) { background: #f2e8d7; }
.chapter:nth-of-type(even) { background: #182b38; color: var(--on-image); }
.chapter:nth-of-type(even) .section-head, .chapter:nth-of-type(even) .eyebrow { color: var(--on-image); }
.chapter-inner { grid-column: 1; grid-row: 1; align-self: center; z-index: 3; width: auto; padding: clamp(64px, 8vw, 112px) clamp(24px, 6vw, 96px); }
.chapter-media { grid-column: 2; grid-row: 1; position: relative; inset: auto; min-height: 82svh; z-index: 1; }
.chapter-media img { opacity: 1; transform: none; object-position: 50% 50%; }
.chapter .section-head, .chapter .section-head.with-action { display: block; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.chapter .services-grid, .chapter .cards-grid .card, .chapter.is-centred .stats-grid, .chapter .contact-grid form { background: transparent; backdrop-filter: none; }
.chapter .services-grid { grid-template-columns: repeat(2, 1fr); }
.chapter.is-centred .stats-grid { border-color: currentColor; }
.chapter .contact-grid { grid-column: 1 / -1; }
.page-header { min-height: 72svh; display: grid; grid-template-columns: 48% 52%; align-items: stretch; background: var(--panel); }
.page-header-media { grid-column: 2; grid-row: 1; min-height: 72svh; background-position: 50% 50%; }
.page-header-inner { grid-column: 1; grid-row: 1; align-self: center; justify-content: center; padding: clamp(72px, 8vw, 120px) clamp(24px, 6vw, 96px); background: #182b38; color: var(--on-image); }
.page-header-inner::before { display: none; }
.page-header-inner h1, .page-header-inner p, .page-header-inner .eyebrow { color: var(--on-image); }

@media (max-width: 720px) {
  .hero, .chapter, .page-header { display: flex; flex-direction: column; min-height: auto; }
  .hero-slides, .chapter-media, .page-header-media { order: 1; min-height: 280px; width: 100%; }
  .hero-inner, .chapter-inner, .page-header-inner { order: 2; width: 100%; padding: 56px 24px; box-sizing: border-box; }
  .hero-readout { order: 3; }
  .hero h1 { max-width: 10ch; }
  .chapter .services-grid { grid-template-columns: 1fr; }
}

/* Calm editorial landing treatment: copy leads, photography is contained. */
html, body { background: #102534; }
.nav { background: #102534 !important; border-bottom: 1px solid rgb(255 255 255 / 0.16) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav::before { display: none !important; }
.nav-links a { color: #f8f6f0 !important; }
.nav-links a.is-active { color: #f49a24 !important; }
.brand-logo { filter: none !important; }
main { background: #102534 !important; }
.hero, .hero-inner, .chapter, .page-header { background: #102534 !important; }
.hero { min-height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); padding-top: 86px; }
.hero-slides { min-height: 420px; max-height: 560px; grid-column: 2; align-self: center; overflow: hidden; }
.hero-slides .slide { background-size: cover; background-position: center; }
.hero-inner { grid-column: 1; align-self: center; padding: clamp(56px, 8vw, 112px) clamp(28px, 7vw, 104px); }
.hero-copy { max-width: 620px; }
.hero h1 { max-width: 9ch; font-size: clamp(54px, 7vw, 108px); }
.hero-readout { position: relative; grid-column: 1 / -1; grid-row: auto; background: #ed6b24; color: #102534; }
.hero-scrim, .chapter-scrim, .page-header::after, .underlay-scrim { display: none !important; }
.chapter { min-height: auto; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); }
.chapter:nth-of-type(odd) { background: #f0e4cf !important; color: #102534; }
.chapter:nth-of-type(even) { background: #102534 !important; color: #f8f6f0; }
.chapter-inner { padding: clamp(56px, 7vw, 104px) clamp(28px, 7vw, 104px); }
.chapter-media { min-height: 360px; max-height: 520px; align-self: center; overflow: hidden; }
.chapter-media img { opacity: 1 !important; transform: none !important; object-fit: cover; }
.chapter .section-head, .chapter .section-head.with-action { background: transparent; color: inherit; }
.chapter .services-grid, .chapter .cards-grid .card, .chapter.is-centred .stats-grid, .chapter .contact-grid form { background: transparent; box-shadow: none; backdrop-filter: none; }
.chapter .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-header { min-height: auto; padding-top: 86px; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); }
.page-header-media { min-height: 360px; max-height: 500px; align-self: center; background-size: cover; }
.page-header-inner { background: #102534 !important; color: #f8f6f0; padding: clamp(56px, 7vw, 104px) clamp(28px, 7vw, 104px); }
.page-header-inner h1, .page-header-inner p, .page-header-inner .eyebrow { color: #f8f6f0 !important; }
.footer { background: #081923; }

/* Final Axis reference pass: full-bleed hero with readable dark grid. */
.hero { display: block !important; min-height: 100svh !important; padding: 0 !important; background-color: #0c151c !important; background-image: url('/assets/img/merkel2.webp') !important; background-size: cover !important; background-position: 50% 50% !important; }
.hero-slides { position: absolute !important; inset: 0 !important; display: block !important; min-height: 100% !important; max-height: none !important; width: 100% !important; margin: 0 !important; overflow: hidden !important; }
.hero-slides .slide { background-size: cover !important; background-position: 54% 50% !important; }
.hero-inner { display: flex !important; align-items: flex-end !important; min-height: 100svh !important; padding: 148px 40px 132px !important; max-width: 1320px !important; margin: 0 auto !important; background: transparent !important; }
.hero-copy { max-width: 720px !important; margin: 0 !important; }
.hero h1 { max-width: 8ch !important; font-size: clamp(58px, 8.4vw, 126px) !important; color: #f7f4ec !important; }
.hero-sub { max-width: 54ch !important; color: rgb(247 244 236 / 0.84) !important; }
.hero-tag, .hero .eyebrow { color: #fff !important; }
.hero .btn, .hero .btn.ghost { color: #fff !important; border-color: rgb(255 255 255 / .7) !important; }
.hero .btn:hover, .hero .btn.ghost:hover { color: #fff !important; }
.hero-scrim { display: block !important; background: rgb(5 12 17 / .22) !important; }
.chapter-scrim { display: none !important; background: none !important; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .2; background-image: linear-gradient(rgb(255 193 7 / .22) 1px, transparent 1px), linear-gradient(90deg, rgb(255 193 7 / .22) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, black, transparent 82%); }
.hero-readout { position: absolute !important; right: 40px !important; bottom: 32px !important; width: min(620px, 52vw) !important; background: #ffc107 !important; color: #101820 !important; border: 1px solid #101820 !important; box-shadow: 10px 10px 0 #ff5a0a; }
.hero-readout .cell { padding: 18px 22px !important; border-color: rgb(16 24 32 / .3) !important; }
.hero-readout .k { color: #101820 !important; font-size: 10px !important; }
.hero-readout .v { font-size: clamp(18px, 2vw, 25px) !important; }
.hero-dots { display: none !important; }
.nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; background: #0c151c !important; border-bottom: 1px solid rgb(255 255 255 / .18) !important; box-shadow: 0 8px 24px rgb(0 0 0 / .14) !important; }
.nav-links a, .nav-contact { color: #f7f4ec !important; }
.nav-links a.is-active { color: #ffc107 !important; }

@media (max-width: 720px) {
  .hero { min-height: 100svh !important; }
  .hero-slides .slide { background-position: 58% 50% !important; }
  .hero-inner { min-height: 100svh !important; padding: 228px 24px 112px !important; }
  .hero-copy { max-width: none !important; margin-top: auto !important; }
  .hero h1 { max-width: 7ch !important; font-size: clamp(50px, 15vw, 74px) !important; }
  .hero-readout { right: 0 !important; bottom: 0 !important; width: 100% !important; min-height: 72px; }
  .hero::after { background-size: 56px 56px; mask-image: linear-gradient(180deg, black, transparent 82%); }
  .nav { position: fixed !important; top: 0 !important; background: #0c151c !important; }
}

@media (max-width: 720px) {
  .hero, .chapter, .page-header { display: flex; flex-direction: column; padding-top: 0; }
  .hero-slides { order: 0; min-height: 100svh !important; max-height: none !important; width: 100% !important; margin: 0 !important; }
  .hero-inner { order: 0; width: 100%; }
  .chapter-media, .page-header-media { order: 1; min-height: 280px; max-height: 360px; width: 100%; margin: 0; }
  .chapter-inner, .page-header-inner { order: 2; width: 100%; padding: 56px 24px; }
  .hero-readout { order: 0; }
  .chapter .services-grid { grid-template-columns: 1fr; }
}

/* Last mobile override keeps the hero full-bleed like the Axis reference. */
.hero { background-color: #0c151c !important; background-image: url('/assets/img/merkel2.webp') !important; background-size: cover !important; background-position: 50% 50% !important; }
@media (max-width: 720px) {
  .hero { display: block !important; padding-top: 0 !important; background-position: 52% 50% !important; }
  .hero-slides { position: absolute !important; inset: 0 !important; width: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; }
  .hero-inner { display: flex !important; width: auto !important; min-height: 100svh !important; padding: 228px 24px 112px !important; }
  .hero-readout { position: absolute !important; right: 0 !important; bottom: 0 !important; width: 100% !important; }
}

/* Reference-led editorial construction system. Keep images contained and copy on
   surfaces with known contrast instead of placing black text over photography. */
:root {
  --editorial-ink: #07111b;
  --editorial-paper: #f1f3f2;
  --editorial-muted: #536273;
  --editorial-orange: #ff5a0a;
  --editorial-yellow: #ffc400;
}
body, main { background: var(--editorial-paper) !important; color: var(--editorial-ink); }
.hero { color: #f7f4ec !important; }
.chapter:nth-of-type(odd), .chapter:nth-of-type(even) { background: var(--editorial-paper) !important; color: var(--editorial-ink) !important; }
.chapter:nth-of-type(even) .section-head, .chapter:nth-of-type(even) .eyebrow, .chapter:nth-of-type(even) h2, .chapter:nth-of-type(even) p, .chapter:nth-of-type(even) .stat, .chapter:nth-of-type(even) .lbl { color: inherit !important; }
.chapter-inner { padding: clamp(64px, 9vw, 132px) clamp(24px, 7vw, 112px) !important; }
.chapter-media { min-height: 0 !important; height: min(620px, 72vh) !important; align-self: center !important; margin: clamp(24px, 5vw, 72px) 0 !important; }
.chapter-media img { filter: grayscale(1) contrast(.95) !important; object-fit: cover !important; }
.chapter-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--editorial-yellow) 0 16px, var(--editorial-ink) 16px 32px); }
.section-head { max-width: 720px; }
.section-head h2, .page-header-inner h1 { color: var(--editorial-ink) !important; text-shadow: none !important; }
.section-head p, .contact-lede, .leadership-body p, .card p { color: var(--editorial-muted) !important; }
.eyebrow, .section-head .eyebrow { color: var(--editorial-orange) !important; }
.services-grid, .stats-grid, .cards-grid { border-top: 1px solid rgb(7 17 27 / .18); }
.services-grid .service, .stats-grid .stat, .cards-grid .card { border-color: rgb(7 17 27 / .18) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transform-style: preserve-3d; transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease; will-change: transform; }
.services-grid .service:hover, .stats-grid .stat:hover, .cards-grid .card:hover { transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-6px); box-shadow: 8px 10px 0 rgb(255 90 10 / .22) !important; background: rgb(255 196 0 / .08) !important; }
@media (prefers-reduced-motion: reduce) {
  .services-grid .service, .stats-grid .stat, .cards-grid .card { transition: none; }
  .services-grid .service:hover, .stats-grid .stat:hover, .cards-grid .card:hover { transform: translateY(-3px); }
}
.services-grid .service::before { color: var(--editorial-orange) !important; }
.service h3, .card h3, .stat .num, .stat .lbl { color: var(--editorial-ink) !important; }
.chapter .btn, .btn.ghost { color: var(--editorial-ink) !important; border-color: var(--editorial-orange) !important; background: transparent !important; }
.chapter .btn:hover, .btn.ghost:hover { background: var(--editorial-orange) !important; color: #fff !important; }
.leadership { align-items: center; }
.leadership-media { border-radius: 0 !important; box-shadow: 12px 12px 0 var(--editorial-orange) !important; }
.leadership-media img { filter: grayscale(.35) !important; }
.page-header { min-height: 560px !important; grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr) !important; padding-top: 74px !important; background: var(--editorial-paper) !important; }
.page-header-media { min-height: 460px !important; height: min(62vh, 620px) !important; align-self: stretch !important; margin: 0 40px 0 0 !important; background-size: cover !important; background-position: center !important; opacity: 1 !important; filter: none !important; border-left: 14px solid var(--editorial-yellow); }
.page-header::after { display: none !important; background: none !important; }
.page-header-inner { display: flex !important; flex-direction: column !important; justify-content: center !important; background: var(--editorial-paper) !important; color: var(--editorial-ink) !important; padding: 72px clamp(24px, 7vw, 112px) !important; }
.page-header-inner h1 { max-width: 8ch; font-size: clamp(52px, 6vw, 88px) !important; line-height: .96 !important; }
.page-careers .page-header-inner h1 { max-width: 6ch; font-size: clamp(40px, 4.2vw, 64px) !important; }
.page-careers .page-header-inner p { max-width: 38ch; }
.nav .nav-cta,
.nav .nav-cta:visited,
.hero .hero-actions .btn:first-child,
.hero .hero-actions .btn:first-child:visited { color: #fff !important; }
.nav .nav-cta { border-color: rgb(255 255 255 / .72) !important; }
.nav .nav-cta:hover,
.hero .hero-actions .btn:first-child:hover { color: #fff !important; }
.page-header-inner p { max-width: 46ch; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.55; }
.page-header-inner h1, .page-header-inner p { color: var(--editorial-ink) !important; text-shadow: none !important; }
.page-header-inner .eyebrow { color: var(--editorial-orange) !important; }
.footer { background: var(--editorial-ink) !important; color: #f7f4ec !important; }

/* Landing sections use a full-width editorial stack: image first, then subject and body. */
.chapter:not(.hero) {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  padding: 0 !important;
}
.chapter:not(.hero) .chapter-media {
  order: 1 !important;
  width: min(100%, 1180px) !important;
  height: clamp(240px, 38vw, 480px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}
#metrics .chapter-media { display: none !important; }
#metrics .chapter-inner { width: min(100%, 1180px) !important; padding-top: clamp(72px, 9vw, 132px) !important; }
#metrics .section-head { text-align: center !important; max-width: 720px !important; margin: 0 auto clamp(32px, 5vw, 64px) !important; }
#metrics .section-head h2 { max-width: 680px; margin-left: auto; margin-right: auto; }
#metrics .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#metrics .stat:nth-child(4) { grid-column: auto; }
#metrics .stat { min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
#metrics .stat .num { font-size: clamp(42px, 5vw, 76px) !important; }
.chapter:not(.hero) .chapter-inner {
  order: 2 !important;
  width: min(100%, 1180px) !important;
  margin: 0 auto !important;
  padding: clamp(56px, 8vw, 112px) 0 clamp(72px, 9vw, 132px) !important;
}
.chapter:not(.hero) .section-head,
.chapter:not(.hero) .contact-grid,
.chapter:not(.hero) .leadership {
  width: 100% !important;
  max-width: none !important;
}
.chapter:not(.hero) .section-head {
  display: block !important;
}
.chapter:not(.hero) .section-head h2 {
  max-width: 720px;
}
.chapter:not(.hero) .section-head p {
  max-width: 680px;
}
.chapter:not(.hero) .services-grid,
.chapter:not(.hero) .stats-grid,
.chapter:not(.hero) .cards-grid {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.chapter:not(.hero) .leadership {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: center !important;
  gap: clamp(40px, 8vw, 112px) !important;
}
.chapter:not(.hero) .leadership-media {
  width: 100% !important;
  margin: 0 !important;
}
.chapter:not(.hero) .leadership-body {
  width: 100% !important;
  max-width: 680px !important;
}

@media (max-width: 720px) {
  .chapter:not(.hero) .chapter-media { width: 100% !important; height: 300px !important; margin: 0 !important; }
  .chapter:not(.hero) .chapter-inner { width: 100% !important; padding: 56px 24px 72px !important; }
  .chapter:not(.hero) .services-grid,
  .chapter:not(.hero) .cards-grid { grid-template-columns: 1fr !important; }
  #metrics .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }
  #metrics .stat { min-height: 150px; padding: 28px 20px !important; }
  #metrics .stat .num { font-size: clamp(36px, 12vw, 56px) !important; }
  .page-careers .page-header-inner h1 { max-width: 7ch; font-size: clamp(44px, 13vw, 64px) !important; }
  .chapter:not(.hero) .leadership { grid-template-columns: 1fr !important; gap: 40px !important; }
  .chapter:not(.hero) .leadership-media { width: calc(100% - 12px) !important; }
  .hero-readout { bottom: 0 !important; box-shadow: none !important; }
  .page-header { display: flex !important; flex-direction: column !important; min-height: auto !important; padding-top: 70px !important; }
  .page-header-inner { order: 1 !important; padding: 48px 24px 32px !important; }
  .page-header-media { order: 2 !important; width: calc(100% - 32px) !important; height: 300px !important; min-height: 300px !important; margin: 0 16px 32px !important; border-left: 8px solid var(--editorial-yellow); }
  .page-header-inner h1 { max-width: 9ch; font-size: clamp(52px, 15vw, 76px) !important; }
}