/* ==========================================================================
   ElyBlack — Project Management Firm
   Monochrome system on the ElyBlack graphite. No accent color: hierarchy
   comes from contrast, grid and space. Archivo for display and body,
   JetBrains Mono for labels, numbering and descriptors.
   The logo is always white on graphite (nav, footer, hero).
   ========================================================================== */

@font-face { font-family: 'Archivo'; src: url('../assets/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../assets/fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../assets/fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jbmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jbmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --home-cube-gap: clamp(10px, 1vw, 14px); /* space between neighbouring cubes on the Home (What We Do, Diagnostic, Digital) */
  /* Palette — ElyBlack graphite */
  --ink: #141415;
  --ink-raised: #1C1C1E;
  --charcoal: #2C2C2E;
  --steel: #6B7280;
  --cool-gray: #DDE0E4;
  --white: #FFFFFF;
  --off-white: #F6F7F8;

  /* "on-light" now means the charcoal body surface (formerly white/off-white) */
  --surface: var(--ink);
  --surface-raised: #232325;
  --text-on-light: var(--off-white);
  --text-on-light-muted: #B4B4B8;
  --text-on-dark: var(--off-white);
  --text-on-dark-muted: #B4B4B8;
  --line-on-light: rgba(246, 247, 248, 0.16);
  --line-strong: rgba(246, 247, 248, 0.72);
  --line-on-dark: rgba(255, 255, 255, 0.12);
  --border-on-dark: var(--steel);
  --error: #F2B8B5;

  --font-display: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-width: 1280px;
  --edge: clamp(20px, 5vw, 56px);
  --section-space: clamp(88px, 11vw, 160px);
  --home-space: clamp(80px, 9vw, 136px);
  --nav-height: 72px;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { background: var(--surface); }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--white); color: var(--ink);
  padding: 10px 16px; font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--edge); }

/* ---------- Type primitives ---------- */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.on-dark .label, .label--on-dark { color: var(--text-on-dark-muted); }

.title-xl { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.title-lg { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.title-md { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.title-sm { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.lead { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.55; color: var(--text-on-light-muted); max-width: 58ch; }
.on-dark .lead { color: var(--text-on-dark-muted); }
.muted { color: var(--text-on-light-muted); }
.on-dark .muted { color: var(--text-on-dark-muted); }
.note { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--text-on-light-muted); }
.on-dark .note { color: var(--text-on-dark-muted); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--off-white); }
.btn--dark { background: var(--off-white); color: var(--ink); }
.btn--dark:hover { background: var(--white); }
.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.btn--outline-light:hover { border-color: var(--white); }
.btn--large { min-height: 56px; padding: 0 34px; font-size: 1rem; }
.btn--primary { background: var(--off-white); color: var(--ink); }
.btn--primary:hover { background: var(--cool-gray); }
.btn--outline { border-color: var(--border-on-dark); color: var(--text-on-dark); }
.btn--outline:hover { border-color: var(--off-white); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.arrow-link::after { content: "→"; }

.icon-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

/* ---------- Brand marks ---------- */
.mark { width: 28px; height: 28px; color: var(--white); flex: none; }
/* ElyBlack Digital's identity cube (a 3D render) in place of the line mark on the Digital pages */
.mark--digital { width: 30px; height: 30px; object-fit: contain; }
/* ...followed by the practice name after a thin bar, as in the ElyBlack | DIGITAL lockup */
.brand__practice {
  margin-left: 2px; padding-left: 14px; border-left: 1px solid rgba(246, 247, 248, 0.4);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.3em; line-height: 1.6;
  color: var(--text-on-dark-muted);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--white); text-decoration: none;
  font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-height);
  background: transparent;
  color: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
/* The bar never has a tint: at the top it is fully transparent. It hides while scrolling down; on any scroll up it returns over a
   light blur with no tint at all, so it never collides with the content.
   The open mobile menu is solid. */
.nav--overlay { background: transparent; }
.nav.is-scrolled:not(.is-hidden) {
  background: transparent;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled:not(.is-hidden) { background: rgba(20, 20, 21, 0.94); }
}
.nav.is-open { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* full width: the logo sits at the left edge and the menu at the right edge,
   each with the standard side margin */
.nav__inner {
  height: 100%; padding: 0 var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__right { display: flex; align-items: center; gap: 32px; }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  font-size: 0.9375rem; text-decoration: none; color: var(--text-on-dark-muted);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav__links a[aria-current="page"] { color: var(--white); }
/* Over the home hero's bright clip: the muted links get more light, and each
   item (logo, every menu link, EN, ES, the mobile menu button) sits on its own
   small soft shade, never across the empty bar. The shades fade out once the
   bar is scrolled (blurred) or the menu is open. */
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav:not(.is-scrolled) .nav__links a:not([aria-current="page"]),
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav:not(.is-scrolled) .lang { color: #DEDEE0; }
.nav .brand, .lang a { position: relative; }
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav .brand::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav__links a::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav .lang a::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav__toggle::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: rgba(20, 20, 21, 0.6); border-radius: 999px; filter: blur(8px);
  transition: opacity 0.35s var(--ease);
}
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav .brand::before { inset: -6px -12px; }
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav__links a::before { inset: -6px -10px; }
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav .lang a::before { inset: 0 -8px; }
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav__toggle::before { inset: 6px; }
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav.is-scrolled .brand::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav.is-scrolled .nav__links a::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav.is-scrolled .lang a::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav.is-scrolled .nav__toggle::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav.is-open .brand::before,
body:has([data-hero], .page-hero--photo, .page-hero--planning, .dhero, .page-header--tall) .nav.is-open .nav__toggle::before { opacity: 0; }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--white);
}

.lang {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  color: var(--text-on-dark-muted);
}
.lang a { text-decoration: none; color: inherit; padding: 6px 0; }
.lang [aria-current="true"] { color: var(--white); }
.lang__sep { opacity: 0.45; }

.nav__toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: var(--white);
  position: relative;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav__toggle span { top: 21px; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; left: 0; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; inset: var(--nav-height) 0 0 0; z-index: 99;
  background: var(--ink); color: var(--white);
  padding: 32px var(--edge) 40px;
  overflow-y: auto;
}
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--line-on-dark);
}
.mobile-menu__foot { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

@media (max-width: 1140px) {
  .nav__links, .nav__right > .lang { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open + .mobile-menu { display: block; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); background: var(--ink);
  overflow: hidden; isolation: isolate;
  text-align: center;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__poster, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity var(--clip-fade, 1s) ease-in-out; z-index: 0; }
.hero__video.is-active { opacity: 1; z-index: 2; }
.hero__video.is-prev { opacity: 1; z-index: 1; transition: none; }
/* Legibility veil: a light overall darkening, so the clip keeps its brightness.
   The name and descriptor carry their own small soft shade, sized so they stay
   legible on every frame of the clip. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 21, 0.206) 0%, rgba(20, 20, 21, 0.158) 40%, rgba(20, 20, 21, 0.188) 75%, rgba(20, 20, 21, 0.638) 100%);
}
[data-hero] .hero__name::before, [data-hero] .hero__descriptor::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
/* a separate pill just around the name, and another around the descriptor */
[data-hero] .hero__descriptor { position: relative; }
[data-hero] .hero__name::before, [data-hero] .hero__descriptor::before { border-radius: 999px; background: rgba(20, 20, 21, 0.65); filter: blur(8px); }
[data-hero] .hero__name::before { inset: -4px -12px; }
[data-hero] .hero__descriptor::before { inset: -6px -12px; }
.hero__content {
  width: 100%; max-width: 900px;
  /* symmetric around the viewport centre; the extra 6px on top offsets the
     descriptor's line box below its letters, so the visible ink is centred */
  padding: calc(var(--nav-height) + 27px) var(--edge) calc(var(--nav-height) + 21px);
  display: flex; flex-direction: column; align-items: center;
}
/* Opening cover. The cube draws at the centre and the graphite veil then opens
   from behind it. main.js sets --cov-from and --cov-to. */
.intro-screen { display: none; }
@keyframes eb-cov { from { clip-path: var(--cov-from); } to { clip-path: var(--cov-to); } }
html.intro-cover .intro-screen { display: block; position: fixed; inset: 0; z-index: 300; }
.intro-screen__veil { position: absolute; inset: 0; background: var(--ink); }
html.intro-cover.intro-out .intro-screen__veil { animation: eb-cov 1.25s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.hero__title { display: flex; flex-direction: column; align-items: center; }
.hero__name {
  font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.5rem);
  font-weight: 600; letter-spacing: -0.045em; line-height: 0.95;
  /* Optical centering: the negative tracking and the E/k side bearings push
     the visible letters 0.053em right of the box center (measured). */
  position: relative; left: -0.053em;
}
.hero__descriptor {
  margin-top: 14px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(0.6875rem, 0.64rem + 0.22vw, 0.8125rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  padding-left: 0.34em; /* optically re-center tracked caps */
  color: rgba(246, 247, 248, 0.9);
}
/* Mobile: the hero keeps a fixed cinematic height instead of the full screen,
   the block is centered in the area below the nav, and the descriptor is larger. */
@media (max-width: 640px) {
  .hero { min-height: min(540px, 76svh); }
  .hero__content { padding: calc(var(--nav-height) + 43px) var(--edge) 37px; }
  .hero__descriptor { font-size: 0.8125rem; letter-spacing: 0.28em; padding-left: 0.28em; color: rgba(246, 247, 248, 0.9); }
}


/* ---------- Inner page header ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: var(--white);
  padding: calc(var(--nav-height) + clamp(72px, 10vw, 136px)) 0 clamp(72px, 9vw, 120px);
}
.page-hero .label { color: var(--text-on-dark-muted); }
.page-hero__title { margin-top: 22px; max-width: 18ch; }
.page-hero__lead { margin-top: 26px; color: var(--text-on-dark-muted); }
.page-hero__lead--line { max-width: none; }
.page-hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* About: the firm is represented as one grounded structure assembled around a clear core. */
.page-hero--about {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: stretch;
  padding-top: calc(var(--nav-height) + clamp(36px, 4.5vw, 64px));
  padding-bottom: 0;
}
.page-hero--about::before,
.page-hero--about::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.page-hero--about::before {
  z-index: -2;
  background: url("/assets/images/about-hero-metallic.jpg?v=5") 70% bottom / cover no-repeat;
}
.page-hero--about::after {
  content: none; /* no global veil: every text carries its own, like the other heroes */
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 20, 21, 0.95) 0%, rgba(20, 20, 21, 0.88) 34%, rgba(20, 20, 21, 0.42) 61%, rgba(20, 20, 21, 0.08) 100%),
    linear-gradient(180deg, rgba(20, 20, 21, 0.16) 0%, rgba(20, 20, 21, 0.02) 50%, rgba(20, 20, 21, 0.6) 100%);
}
.page-hero--about > .container {
  position: relative; z-index: 1; width: 100%;
  translate: calc(-1 * clamp(0px, (100vw - var(--max-width)) / 2, 80px)) clamp(22px, 2vw, 32px);
}
.page-hero--about .page-hero__title { margin-top: 0; max-width: none; }
.page-hero--about .page-hero__main { display: block; }
.page-hero--about :is(.page-hero__main, .page-hero__sub, .page-hero__lead, .about-foundation__title, .about-foundation__text) { position: relative; width: fit-content; }
.page-hero--about :is(.page-hero__main, .page-hero__sub, .page-hero__lead, .about-foundation__title, .about-foundation__text)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
.page-hero--about .page-hero__main::before { inset: -4px -16px; border-radius: 28px; }
.page-hero--about .page-hero__sub::before { inset: -4px -14px; border-radius: 24px; }
.page-hero--about .page-hero__lead::before { inset: -8px -16px; border-radius: 24px; }
.page-hero--about :is(.about-foundation__title, .about-foundation__text)::before { inset: -6px -12px; border-radius: 24px; }
.page-hero--about :is(.page-hero__main, .page-hero__sub, .page-hero__lead, .about-foundation__title, .about-foundation__text) {
  text-shadow: 0 0 6px rgba(20, 20, 21, 0.75), 0 0 18px rgba(20, 20, 21, 0.65), 0 0 38px rgba(20, 20, 21, 0.5);
}
.page-hero--about .page-hero__sub { display: block; margin-top: 0.4em; font-size: 0.4em; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; }
.page-hero--about .page-hero__label { margin-bottom: 22px; }
.page-hero--about .page-hero__lead { max-width: none; color: #E4E4E7; }
@media (max-width: 700px) { .page-hero--about .page-hero__sub { font-size: 0.5em; } }
@media (max-width: 1000px) { .page-hero--about .br-lg { display: none; } .page-hero--about .page-hero__lead { max-width: 52ch; } }
@media (max-width: 700px) {
  .page-hero--about {
    min-height: 0;
    padding-top: calc(var(--nav-height) + 34px);
    padding-bottom: 0;
  }
  .page-hero--about::before { bottom: 385px; background-position: 68% bottom; } /* the photo ends where the three mission / vision / values rows begin */
  .page-hero--about .about-foundations { margin-top: clamp(150px, 48vw, 260px); }
  .page-hero--about::after {
    background:
      linear-gradient(180deg, rgba(20, 20, 21, 0.93) 0%, rgba(20, 20, 21, 0.86) 48%, rgba(20, 20, 21, 0.62) 72%, rgba(20, 20, 21, 0.28) 100%),
      linear-gradient(90deg, rgba(20, 20, 21, 0.5) 0%, rgba(20, 20, 21, 0.12) 100%);
  }
  .page-hero--about > .container { translate: 0 18px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-space) 0; }
.section--white, .section--light { background: var(--surface); border-top: 1px solid var(--line-on-light); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section--tight { padding: clamp(64px, 8vw, 104px) 0; }

.section-head { max-width: 760px; }
.section-head .title-lg, .section-head .title-xl { margin-top: 20px; }
.section-head .lead { margin-top: 22px; }
.section-head--center { margin: 0 auto; text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }
.section-body { margin-top: clamp(48px, 6vw, 80px); }
.section-foot { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }

/* ---------- Step (Digital page method) ---------- */
.step { --sq: clamp(64px, 6vw, 88px); position: relative; text-align: center; }
/* each step is a numbered square; a thin line runs from it to the next square */
.step::before {
  content: ""; position: absolute; top: calc(var(--sq) / 2); left: calc(50% + var(--sq) / 2 + 12px);
  width: calc(100% + var(--method-gap) - var(--sq) - 24px); height: 1px;
  background: rgba(246, 247, 248, 0.35); transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.step.is-visible::before { transform: scaleX(1); }
.step:last-child::before { content: none; }
.step__index {
  display: flex; align-items: center; justify-content: center; width: var(--sq); height: var(--sq);
  margin: 0 auto 24px; border: 1px solid rgba(246, 247, 248, 0.28); background: rgba(255, 255, 255, 0.03);
  color: #E4E4E7; font-size: 1rem; letter-spacing: 0.1em;
}
.step__body { max-width: 30ch; margin-inline: auto; }
@media (max-width: 1000px) {
  .step { text-align: left; }
  .step::before { content: none; }
  .step__index { margin-left: 0; }
  .step__body { margin-inline: 0; }
}
.step__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.step__body { margin-top: 12px; font-size: 0.9688rem; color: var(--text-on-dark-muted); line-height: 1.6; }
/* ---------- Split layout (diagnostic, etc.) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(48px, 7vw, 112px); align-items: start; }
.split__actions { margin-top: 36px; }
/* Services: the diagnostic reads as a left-to-right decision flow. */
.diagnostic { min-height: 0; padding: clamp(64px, 7vw, 96px) 0 clamp(72px, 8vw, 112px); }
.diagnostic__inner { width: 100%; }
.diagnostic__head {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(300px, 1fr);
  gap: clamp(40px, 4vw, 64px); align-items: end;
}
.diagnostic__kicker {
  white-space: nowrap; font-size: clamp(0.45rem, 1.1vw, 0.875rem); font-weight: 400;
  letter-spacing: 0.08em; line-height: 1.55; color: #E4E4E7;
}
.diagnostic__title { margin-top: 18px; max-width: none; font-size: clamp(3rem, 7.2vw, 6.5rem); line-height: 0.92; text-wrap: balance; }
/* narrow screens: the line above the title wraps and stays readable instead of shrinking to a few pixels */
@media (max-width: 900px) { .diagnostic__kicker { white-space: normal; font-size: 0.75rem; letter-spacing: 0.08em; text-wrap: balance; } }
.diagnostic__lead { color: var(--text-on-dark-muted); max-width: none; font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); }
.diagnostic__lead-break { display: block; }
.diagnostic__map {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(250px, 0.34fr);
  gap: clamp(18px, 2vw, 32px); align-items: stretch; margin-top: clamp(48px, 6vw, 76px);
}
.diagnostic__flow { display: grid; grid-template-rows: auto 1fr; gap: clamp(18px, 2vw, 28px); min-width: 0; }
.diagnostic__process { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.diagnostic__stage { position: relative; height: 100%; min-height: 0; padding: clamp(22px, 2vw, 30px) clamp(18px, 1.6vw, 24px); border: 1px solid var(--line-on-dark); }
.diagnostic__stage-arrow { align-self: center; color: var(--text-on-dark-muted); font-size: 1.25rem; line-height: 1; }
.diagnostic__stage-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; } /* same type as the "What We Do" card titles */
.diagnostic__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.diagnostic__tags li:not(.diagnostic__tag-pair), .diagnostic__tag-pair span {
  padding: 6px 9px; border: 1px solid var(--line-on-dark); color: var(--text-on-dark-muted);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; line-height: 1.25; text-transform: uppercase;
}
/* two tags that stay on the same line (they wrap together, and only break apart if there is no room) */
.diagnostic__tag-pair { display: flex; flex-wrap: wrap; gap: 7px; }
.diagnostic__map-arrow { align-self: center; justify-self: center; color: var(--text-on-dark-muted); font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
.diagnostic__output-stack { align-self: stretch; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.diagnostic__output {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1;
  padding: clamp(20px, 1.8vw, 24px); text-align: center;
  background: var(--surface-raised); border: 1px solid var(--line-on-dark);
}
/* the title ("Output") has the type of the card titles; the text takes the title's former mono type */
.diagnostic__output .label { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; text-transform: none; color: var(--white); } /* same type as the review card titles (.diagnostic__type-title) */
.diagnostic__output > p { margin-top: 20px; font-family: var(--font-mono); font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem); font-weight: 500; letter-spacing: 0.02em; line-height: 1.5; }
.diagnostic__output-tags { justify-content: center; margin-top: 20px; padding-top: 0; }
.diagnostic__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.diagnostic__types--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.diagnostic__types--3 .diagnostic__type p { max-width: none; }
.diagnostic__type-index { display: block; margin-bottom: 14px; color: var(--text-on-dark-muted); }
/* a line under the review options separates them from the process steps; the cards stay one even rectangle */
.diagnostic__types--rule { position: relative; margin-bottom: clamp(18px, 2vw, 28px); }
.diagnostic__types--rule::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(18px, 2vw, 28px)); height: 1px; background: var(--line-on-dark); }
.diagnostic__type { min-height: 150px; padding: clamp(22px, 2vw, 30px); border: 1px solid var(--line-on-dark); }
.diagnostic__type-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; } /* same type as the "What We Do" card titles */
.diagnostic__type p { margin-top: 14px; max-width: 42ch; color: var(--text-on-dark-muted); font-size: 1rem; line-height: 1.55; }
.diagnostic__action { width: 100%; }
.diagnostic__action .btn { width: 100%; justify-content: center; }
@media (max-width: 1100px) {
  .diagnostic__map { grid-template-columns: 1fr; }
  .diagnostic__map-arrow { justify-self: center; rotate: 90deg; }
}
@media (max-width: 900px) {
  .diagnostic__head { grid-template-columns: 1fr; gap: 28px; }
  .diagnostic__lead { max-width: 58ch; }
  .diagnostic__lead-break { display: none; }
}
@media (max-width: 720px) {
  .diagnostic__types { grid-template-columns: 1fr; }
  .diagnostic__process { grid-template-columns: 1fr; }
  .diagnostic__stage { min-height: 0; }
  .diagnostic__stage-arrow { justify-self: center; rotate: 90deg; }
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Sector cards ---------- */
.sectors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.projects-sectors-section { padding-top: clamp(28px, 3vw, 40px); }
.projects-sectors__label { margin-bottom: clamp(28px, 3vw, 40px); }
.sectors--2 { grid-template-columns: repeat(2, 1fr); }
.sector {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 36px);
  background: transparent; border: 1px solid var(--line-on-light);
  min-height: 300px;
}
.sector__index { margin-bottom: auto; padding-bottom: 48px; }
.sector__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.sector__body { margin-top: 12px; color: var(--text-on-light-muted); font-size: 1rem; }
.sectors--2 .sector { min-height: 360px; padding: clamp(32px, 3.4vw, 48px); }
.sectors--2 .sector__title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.sectors--2 .sector__body { font-size: 1.0625rem; max-width: 46ch; }
@media (max-width: 1100px) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sectors, .sectors--2 { grid-template-columns: 1fr; } .sector, .sectors--2 .sector { min-height: 0; } }
/* Projects: each sector card carries its photo on its right side; one card per
   row below 1000px, and on phones the photo sits above the text */
.sectors--photos .sector--photo { flex-direction: row; padding: 0; overflow: hidden; min-height: 0; }
.sector--photo .sector__text { flex: 1 1 64%; min-width: 0; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); }
/* a link out of the card (Digital), held at the bottom of the text column */
.sector__cta { margin-top: auto; align-self: flex-start; }
.sector__text > .tags:not(:last-child) { margin-bottom: 24px; }
.sector--photo .sector__photo { flex: 0 0 36%; position: relative; overflow: hidden; background: var(--ink); }
.sector--photo .sector__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 1000px) { .sectors--photos { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sectors--photos .sector--photo { flex-direction: column; }
  .sector--photo .sector__photo { order: -1; flex: none; aspect-ratio: 16 / 10; }
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li:not(.tags__pair):not(.tags__row), .tags__pair span {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--line-on-light); color: var(--text-on-light-muted);
  border-radius: var(--radius);
}
.on-dark .tags li:not(.tags__pair):not(.tags__row), .on-dark .tags__pair span { border-color: var(--line-on-dark); color: var(--text-on-dark-muted); }
/* two tags that always stay on the same row (they wrap together) */
.tags__pair { display: flex; gap: 6px; }

/* a full-width hairline that sets a part of the page apart (before the Business Diagnostic) */
.section-divider { display: block; height: 1px; margin: 0; padding: 0; border: 0; background: var(--line-on-dark); }

/* ---------- Digital lockup + panel ---------- */
.digital-lockup { display: inline-flex; align-items: center; gap: 12px; }
.digital-lockup__cube { width: 34px; height: auto; flex: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34)); }
.digital-lockup__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
.digital-lockup__descriptor {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.3em;
  color: var(--text-on-dark-muted); padding-left: 14px; border-left: 1px solid var(--line-on-dark);
}

.digital-panel {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--ink);
  color: var(--text-on-dark);
  padding: var(--section-space) 0;
}
.digital-panel::before, .digital-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.digital-panel::before {
  z-index: -2;
  background: url("/assets/images/digital-cube-metallic.jpg") var(--dp-bg-x, 50%) var(--dp-bg-y, center) / var(--dp-bg-w, cover) no-repeat;
  -webkit-mask-image: var(--dp-mask-x, linear-gradient(#000, #000)), var(--dp-mask-y, linear-gradient(#000, #000));
  -webkit-mask-composite: source-in;
  mask-image: var(--dp-mask-x, linear-gradient(#000, #000)), var(--dp-mask-y, linear-gradient(#000, #000));
  mask-composite: intersect;
  transform-origin: 100% 50%; will-change: transform;
  animation: eb-digital-kenburns 24s ease-in-out infinite alternate;
}
.digital-panel::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 20, 21, 0.63) 0%, rgba(20, 20, 21, 0.51) 42%, rgba(20, 20, 21, 0.15) 76%, rgba(20, 20, 21, 0.06) 100%);
}
@keyframes eb-digital-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .digital-panel::before { animation: none; } }
.digital-panel__grid { display: block; }
.digital-panel__grid > .reveal { max-width: min(56%, 680px); }
.digital-panel__title { margin-top: 32px; font-size: clamp(2rem, 1.3rem + 2vw, 2.875rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; max-width: 28ch; }
.digital-panel__kicker {
  font-family: var(--font-mono); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-on-dark-muted);
}
.digital-panel__kicker + .digital-panel__title { margin-top: 6px; }
.digital-panel__body { margin-top: 24px; color: var(--text-on-dark-muted); max-width: 52ch; }
.digital-panel__actions { margin-top: 40px; }
/* on the Home the button is centred under the group of cards (same width as the cards) */
.home .digital-panel__actions { display: flex; justify-content: center; width: min(100%, 533px, calc(50vw - var(--edge) - 28px)); }
.home .digital-panel { padding-top: calc(clamp(56px, 6vw, 88px) - 16px); }
.home .digital-panel { border-top: 1px solid var(--line-on-light); } /* same line as above Diagnostic */
.home .digital-panel__grid > .reveal { max-width: none; }
.home .digital-lockup { margin-bottom: calc(clamp(32px, 3.6vw, 52px) - 16px); }
.home .digital-panel__body { margin-top: 25px; }
.home .digital-panel__cubes, .home .digital-panel__cards { margin-top: 33px; }
/* six transparent cards (three by two): a thin line round each, which lights up on hover */
.digital-panel__cards {
  list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  width: min(100%, 533px, calc(50vw - var(--edge) - 28px));
}
.digital-panel__cards li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: clamp(56px, 4.6vw, 66px); padding: 0 10px;
  border: 1px solid rgba(246, 247, 248, 0.3); border-radius: var(--radius);
  font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.0625rem); font-weight: 400; line-height: 1.2; color: var(--text-on-dark-muted);
}
@media (max-width: 860px) { .digital-panel__cards { width: min(100%, 533px); } .home .digital-panel__actions { width: min(100%, 533px); } }
@media (max-width: 560px) { .home .digital-panel__actions .btn { display: flex; justify-content: center; width: 14.75rem; max-width: 100%; padding: 0 12px; white-space: nowrap; text-align: center; } /* same width as the "Ask about a diagnostic" button on a phone */ .digital-panel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .digital-panel__cards li { height: 56px; font-size: 0.9375rem; } }
.home .digital-panel__title { max-width: none; white-space: nowrap; font-size: clamp(1.75rem, 3.2vw, 2.875rem); }
.digital-panel__cubes {
  --digital-cube-depth: 14px;
  --digital-cube-line: rgba(246, 247, 248, 0.4);
  position: relative; isolation: isolate;
  /* five fixed cubes in a row: equal widths, and the same visible gap between them as in the
     other groups (the right face of each cube takes the depth, so it is added to the gap) */
  display: flex; align-items: center; justify-content: flex-start;
  gap: calc(var(--home-cube-gap) + var(--digital-cube-depth));
  padding: 0 calc(var(--digital-cube-depth) + 20px) 0 0;
  width: min(100%, 533px, calc(50vw - var(--edge) - 28px));
  height: clamp(110px, 8.2vw, 118px); margin-top: 32px;
}
.digital-panel__cubes li {
  position: relative; isolation: isolate; aspect-ratio: 1;
  flex: 1 1 0; min-width: 0; margin-top: var(--digital-cube-depth);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; text-align: center; overflow-wrap: anywhere;
  border: 1px solid var(--digital-cube-line); border-radius: var(--radius);
  background: rgba(20, 20, 21, 0.74); color: var(--white);
  font-size: 0.75rem; font-weight: 500; line-height: 1.2;
  transition: opacity 733ms linear, translate 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* no hover reaction on the cubes: only the button below reacts */
@media (hover: hover) {
  .digital-panel__cubes li::before, .digital-panel__cubes li::after { transition: border-color 0.3s var(--ease); }
}
.js .digital-panel__cubes:not(.is-entered) li { opacity: 0; }
.digital-panel__cubes li::before, .digital-panel__cubes li::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border: 0 solid var(--digital-cube-line); }
.digital-panel__cubes li::before {
  left: -1px; right: -1px; bottom: calc(100% + 1px); height: var(--digital-cube-depth);
  border-width: 1px 1px 0 1px; background: rgba(246, 247, 248, 0.14);
  transform: skewX(-45deg); transform-origin: bottom left;
}
.digital-panel__cubes li::after {
  top: -1px; bottom: -1px; left: calc(100% + 1px); width: var(--digital-cube-depth);
  border-width: 0 1px 1px 0; background: rgba(0, 0, 0, 0.28);
  transform: skewY(-45deg); transform-origin: top left;
}
@media (max-width: 700px) {
  .home .digital-panel__title { white-space: normal; }
  .digital-panel::after { background: rgba(20, 20, 21, 0.6); }
}
@media (max-width: 560px) {
  .digital-panel__cubes { --digital-cube-depth: 8px; height: 102px; }
  .digital-panel__cubes li { padding: 2px; font-size: 0.5rem; }
}
@media (max-width: 860px) {
  .digital-panel__grid > .reveal { max-width: min(78%, 560px); }
  .digital-panel__cubes { width: min(100%, 533px); }
}
@media (max-width: 560px) {

  .digital-panel__grid > .reveal { max-width: 100%; }
  .digital-lockup__cube { width: 30px; }
}

/* ==========================================================================
   Home: one light, continuous body between the dark hero and the dark close.
   Each section has its own composition: editorial statement, large rows,
   timeline, offer with image, staggered image strip, dark Digital + close.
   ========================================================================== */
.home { background: var(--surface); }

/* What we do: label + lead sentence, then four separate, near-square panels
   (Define, Plan, Lead, Deliver): one row on desktop, 2 x 2 on tablet, stacked on phones.
   Each panel: display title with a short graphite rule, description anchored low. */
/* taller than its content: the title and the cubes sit at the top, over the
   sky, and the rest of the height leaves the photo's floor and structure open */
.resp { position: relative; isolation: isolate; overflow: clip; background: var(--surface); color: var(--white); min-height: clamp(560px, 50vw, 740px); padding: clamp(40px, 4vw, 60px) 0 clamp(84px, 10vw, 152px); border-top: 1px solid var(--line-on-light); /* same line as above Diagnostic */ }
/* photo behind the section: scattered cubes (left) becoming an ordered structure
   (right), under a graphite veil that is darker behind the title */
.resp::before, .resp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.resp::before {
  background: url("/assets/images/structure-metallic-dark.jpg") center 32% / cover no-repeat;
  /* same slow Ken Burns as the granite (eb-kenburns), zooming towards the ordered structure */
  transform-origin: 76% 42%; will-change: transform;
  animation: eb-kenburns 24s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .resp::before { animation: none; } }
.resp::after { background: linear-gradient(180deg, rgba(20, 20, 21, 0.615) 0%, rgba(20, 20, 21, 0.375) 42%, rgba(20, 20, 21, 0.315) 70%, rgba(20, 20, 21, 0.585) 100%); }
@media (max-width: 900px) { .resp::before { background-position: 72% center; } }
/* label and title start on the frame's left line (the frame sits 10px in) */
.resp__head { margin-left: 10px; }
/* wide screens: the title block and the frame sit 4% of the frame's width further
   right, together, so the label and title stay on the frame's left line */
@media (min-width: 1181px) {
  .resp {
    --resp-gap: var(--home-cube-gap);
    --resp-cell: calc((min(100vw, var(--max-width)) - 2 * var(--edge) - 3 * var(--resp-gap)) / 4 * 0.6547 / 1.1667);
    --resp-shift: calc((var(--resp-cell) * 4 + var(--resp-gap) * 3 - 14px) * 0.04);
  }
  .resp__head { margin-left: calc(10px + var(--resp-shift)); }
}
.resp__label { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); color: #E4E4E7; } /* same size as the Diagnostic kicker */
.resp__title { margin-top: 20px; margin-left: -0.06em; /* the P's side bearing: its stem lines up with the label */ max-width: 40ch; font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
/* The row sits inside a drawn frame, as in the Digital panel. The frame hugs
   the row (the photo's loose cubes and structure are only a few px away), and
   its padding is taken back from the margins; the cubes sit 22px in from the
   title's edge. */
.resp__cards {
  --frame-pad: 0;
  position: relative; isolation: isolate; width: fit-content; max-width: calc(100% - 20px);
  margin: calc(clamp(28px, 3vw, 44px) + 0px) 0 0 10px; padding: var(--frame-pad); list-style: none;
  --gap: var(--home-cube-gap); --cols: 4;
  /* each cube is 65.5% of the width a column would have had: about the
     smallest size at which every cube, in English and Spanish, stays square
     and holds its text at the set type size (the type's cqw values are
     scaled up to match); the group sits right under the title, nudged a
     little left of its edge */
  --cube-scale: 0.6547; --cube-k: 0.1667;
  /* flat square cards: the size each card had as a cube's front face (the depth is gone) */
  --cube-cell: calc((min(100vw, var(--max-width)) - 2 * var(--edge) - (var(--cols) - 1) * var(--gap)) / var(--cols) * var(--cube-scale) / (1 + var(--cube-k)));
  display: grid; grid-template-columns: repeat(var(--cols), var(--cube-cell)); justify-content: start; gap: var(--gap);
}
/* wide screens: the frame stops 28px short of the row's right end, so the
   last cube's right face tucks under the line at rest */
@media (min-width: 1181px) {
  .resp__cards { width: calc(var(--cube-cell) * var(--cols) + var(--gap) * (var(--cols) - 1) - 23px); margin-left: calc(10px + var(--resp-shift)); }
}
/* Plain square cards in the approved layout. */
.resp__card {
  --cube-k: 0.1667;
  --cube-line: rgba(246, 247, 248, 0.3);
  position: relative; isolation: isolate; aspect-ratio: 1; container-type: inline-size;
  width: 100%; margin-top: 0;
  /* the title sits at the top left and the description at the bottom left, so the four
     titles line up whatever the length of each description */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left;
  padding: 9%;
  border: 1px solid var(--cube-line); border-radius: var(--radius);
  background: transparent; /* transparent, like the Digital Projects cards: only the lines show */
}
.resp__card-title { font-size: 17.256cqw; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.resp__card-body { margin-top: auto; padding-top: 4cqw; font-weight: 400; font-size: clamp(1.0625rem, 13.386cqw, 1.375rem); line-height: 1.3; color: var(--text-on-dark-muted); }
/* Fade the fixed cards in once the row enters the viewport. */
.resp__cards .resp__card { transition: opacity 733ms linear, border-color 0.35s var(--ease), background-color 0.35s var(--ease); }
.js .resp__cards:not(.is-entered) .resp__card { opacity: 0; }
/* The cards do not light up or move on hover: pointing at a card only draws the underline
   under its whole title word (it goes again when the cursor leaves). Only the button reacts. */
.resp__card-title { position: relative; width: fit-content; }
.resp__card-title::after {
  content: ""; display: block; width: 100%; height: 1px; margin-top: 4cqw; background: var(--white);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease);
}
@media (hover: hover) { .resp__card:hover .resp__card-title::after { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .resp__card-title::after { transition: none; } }
/* the call to action sits just under the two right-hand cards (Control and Deliver) */
.resp__action { grid-column: 3 / -1; grid-row: 2; justify-self: start; align-self: start; margin-top: 28px; transition: opacity 733ms linear; }
/* wide screens: the button spans the Control and Deliver columns and is centred, so its centre
   falls on the gap between those two cards */
@media (min-width: 1181px) { .resp__action { grid-column: 3 / 5; justify-self: center; } }
.js .resp__cards:not(.is-entered) .resp__action { opacity: 0; }
@media (max-width: 1180px) { .resp__action { grid-column: 1 / -1; grid-row: 3; } }
@media (max-width: 700px) { .resp__action { justify-self: center; } } /* phones: the button is centred under the cards */ /* two cards per row: the button goes under both rows */
@media (max-width: 1180px) {
  /* narrower screens: two cubes per row (the cubes are fixed, so no spare room is needed) */
  .resp__cards { --cols: 2; --frame-pad: 0; width: calc(100% - 20px); }
}
@media (max-width: 560px) {
  /* phones: still two and two; the cubes fill the row, and the small text may go a little smaller */
  .resp__cards { --cols: 2; --cube-scale: 1.09; }
  .resp__card-body { font-size: clamp(0.8125rem, 13.386cqw, 1.375rem); }
}

/* Granite floor (the no-cube version of the live site's banner) as a section
   background, under a graphite veil so type keeps its contrast. Used on the
   last section of every page (section.* outranks .cta / .section--white / .not-found).
   Layers: the photo (::before) drifts in a very slow Ken Burns zoom towards the
   spotlight; the veil (::after) sits on it; the content sits above both. */
section.has-granite { position: relative; isolation: isolate; overflow: clip; background: var(--surface); }
.cta.cta--dark.has-granite { background: var(--ink); }
section.has-granite::before, section.has-granite::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
section.has-granite::before {
  background: url("/assets/images/granite-floor.jpg") center / cover no-repeat;
  transform-origin: 62% 72%; will-change: transform;
  animation: eb-kenburns 24s ease-in-out infinite alternate;
}
section.has-granite::after { background: linear-gradient(180deg, rgba(20, 20, 21, 0.55), rgba(20, 20, 21, 0.48) 45%, rgba(20, 20, 21, 0.74)); }
@keyframes eb-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { section.has-granite::before { animation: none; } }
/* secondary text on the lit floor is brighter than the usual muted gray */
section.has-granite .cta__body, section.has-granite .cta__direct, section.not-found.has-granite .lead { color: #E4E4E7; }

/* Content sections (contact form, privacy text) carry more small type: stronger veil */
section.section.has-granite::after { background: linear-gradient(180deg, rgba(20, 20, 21, 0.66), rgba(20, 20, 21, 0.62) 50%, rgba(20, 20, 21, 0.74)); }

/* Services header: the Digital Systems photo (a wave of cubes) sits on the
   right half, fading in from the left, with the same slow Ken Burns as the
   granite; the title and intro sit at the top left; and the path runs along the
   bottom edge as a row of rectangular glass boxes from one side of the screen
   to the other. The header
   fills the screen, with the path pinned to its bottom. */
.page-hero--photo {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-height) + clamp(0px, 1vw, 14px)) 0 0;
  /* on wide screens the title, intro and path label sit a little left of the grid */
  --hero-shift: calc(-1 * clamp(0px, (100vw - var(--max-width)) / 2, 56px));
}
.page-hero--photo > .container, .page-hero__path > .container { translate: var(--hero-shift) 0; }
.page-hero--photo > .container { width: 100%; padding-top: clamp(9px, 1vw, 14px); }
@media (min-width: 761px) {
  .page-hero--photo > .container { translate: calc(var(--hero-shift) - 24px) 0; }
  .page-hero__path > .container { translate: calc(var(--hero-shift) - 22px) 0; }
}
.page-hero--photo .page-hero__title { margin-top: 0; }
.page-hero--photo .page-hero__lead { margin-top: 18px; }
.page-hero--photo::before, .page-hero--photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.page-hero--photo::before {
  z-index: -2;
  background: url("/assets/images/services-digital-systems.jpg") 78% 44% / cover no-repeat;
  transform-origin: 50% 45%; will-change: transform;
  animation: eb-kenburns 24s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .page-hero--photo::before { animation: none; } }
/* no veil over the photo: it keeps its own lighting. The title, the intro and
   the path label each carry a soft dark shade behind them, like the menu items. */
.page-hero--photo :is(.page-hero__title, .page-hero__lead, .how__title) { position: relative; width: fit-content; max-width: 100%; }
.page-hero--photo :is(.page-hero__title, .page-hero__lead, .how__title)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
.page-hero--photo .page-hero__title::before { inset: -4px -16px; border-radius: 28px; }
.page-hero--photo .page-hero__lead::before { inset: -8px -16px; border-radius: 24px; }
.page-hero--photo .how__title::before { inset: -3px -12px; border-radius: 999px; }
.page-hero--photo .page-hero__lead { color: #E4E4E7; max-width: 50ch; }
@media (min-width: 761px) {
  .page-hero--photo .page-hero__lead--services { max-width: none; }
  .page-hero__lead--services span { display: block; }
}
.page-hero__path { margin-top: auto; padding-top: clamp(48px, 6vw, 96px); }
.how__title {
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.6; color: rgba(246, 247, 248, 0.88);
}
.flow {
  margin: 18px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(246, 247, 248, 0.2);
}
.flow__step {
  position: relative; height: clamp(72px, 7vw, 100px); padding: 0 18px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  --flow-line: rgba(246, 247, 248, 0.2);
  z-index: calc(10 - var(--i));
}
/* simple divider between rectangular steps */
.flow__step:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: var(--flow-line);
}
.flow__step:nth-child(1) { --i: 0; } .flow__step:nth-child(2) { --i: 1; } .flow__step:nth-child(3) { --i: 2; }
.flow__step:nth-child(4) { --i: 3; } .flow__step:nth-child(5) { --i: 4; } .flow__step:nth-child(6) { --i: 5; }
.flow__name { font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.125rem); font-weight: 400; letter-spacing: 0; line-height: 1.2; color: rgba(246, 247, 248, 0.9); text-align: center; }
.flow__sub { display: block; margin-top: 4px; }
/* hover: the box stays put and transparent; only its border lights up (drawn inside the
   box, so nothing leaves the lane) */
.flow__step::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent;
}
.js .page-hero__path.reveal { transform: none; }
.js .flow .flow__name { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease) calc(var(--i) * 110ms), transform 0.6s var(--ease) calc(var(--i) * 110ms); }
.js .is-visible .flow .flow__name { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .flow .flow__name { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) {
  /* on a phone the header is as tall as its content, so the path follows the intro
     instead of being pushed to the bottom of a full screen */
  .page-hero--photo { min-height: 0; }
  .page-hero__path { margin-top: 0; padding-top: clamp(40px, 12vw, 64px); }
  .page-hero--photo::before { left: 0; -webkit-mask-image: none; mask-image: none; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__step { height: 64px; padding: 0 10px; }
  .flow__step:nth-child(4)::before { display: none; }
  .flow__step:nth-child(n+4) { border-top: 1px solid rgba(246, 247, 248, 0.2); }
}

/* Diagnostic: offer over the Diagnostic photo, followed by four framed cubes. */
.diag { position: relative; isolation: isolate; overflow: clip; background: var(--surface); padding: calc(var(--home-space) * 0.7 - 30px) 0 calc(var(--home-space) * 0.47); border-top: 1px solid var(--line-on-light); }
.diag::before, .diag::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* The photo is shown at the section's height (no extra zoom). main.js sets
   --diag-bg-x so the cube pulled out of the wall sits at about three
   quarters of the width, clear of the text, the cubes and the button; when
   that leaves room on the left, the photo fades in from the dark there.
   A very gentle Ken Burns drifts it in from the left once, when the section
   comes into view (main.js adds .is-in), and then it holds still. */
.diag::before {
  z-index: -2;
  background: url("/assets/images/diagnostic-metallic.jpg") var(--diag-bg-x, 18%) center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent var(--diag-fade, 0px), #000 calc(var(--diag-fade, 0px) + 240px));
  mask-image: linear-gradient(90deg, transparent var(--diag-fade, 0px), #000 calc(var(--diag-fade, 0px) + 240px));
  transform-origin: 50% 50%; will-change: transform;
}
.js .diag::before { transform: translate3d(-1.5%, 0, 0) scale(1.03); }
.js .diag.is-in::before { animation: eb-recede 14s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes eb-recede { from { transform: translate3d(-1.5%, 0, 0) scale(1.03); } to { transform: none; } }
/* graphite veil: darkest behind the text, lighter towards the cubes */
.diag::after { z-index: -1; background: linear-gradient(90deg, rgba(20, 20, 21, 0.675) 0%, rgba(20, 20, 21, 0.555) 45%, rgba(20, 20, 21, 0.375) 100%); }
@media (prefers-reduced-motion: reduce) { .js .diag::before, .js .diag.is-in::before { transform: none; animation: none; } }
/* single column: the text spans the full width, so the photo can't be kept clear of it; a heavier veil keeps it legible */
@media (max-width: 700px) { .diag::after { background: rgba(20, 20, 21, 0.615); } }
.diag__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text ." "cubes cta";
  gap: clamp(32px, 3.4vw, 48px) clamp(32px, 5vw, 80px); align-items: start;
}
.diag__content { grid-area: text; }
/* the button sits level with the lower row of cards, aligned with the base of the group;
   main.js slides it left (--diag-cta-shift) so it stands on the photo's floor,
   clear of the wall of cubes */
.diag__action { grid-area: cta; align-self: end; justify-self: end; translate: var(--diag-cta-shift, 0px) 0; }
.diag__heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 8px; }
/* the question, the title with its label and the paragraph move left together */
@media (min-width: 701px) { .diag__content { translate: -16px 0; } }
.diag__title { font-size: clamp(2.25rem, 1.35rem + 2.4vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.diag__label { flex: none; padding-left: 12px; border-left: 1px solid rgba(246, 247, 248, 0.65); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.45; color: var(--text-on-light-muted); white-space: nowrap; }
.diag__label span { display: block; }
/* the question, set apart in the brand's mono at its lightest weight, above the answer */
.diag__kicker { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-on-light-muted); }
/* "Output" (Resultado), in the same mono type as the question above, between the paragraph and the cross */
.diag__kicker.diag__output { margin: 30px 0 0; }
.diag__body { margin-top: 20px; font-size: 1.1875rem; line-height: 1.55; color: var(--text-on-light-muted); max-width: 52ch; }
/* main.js aligns the group to the rendered paragraph, then moves it left */
.diag__side { grid-area: cubes; justify-self: start; width: 100%; max-width: 332px; }
@media (min-width: 701px) {
  .diag__side { translate: 0 -16px; } /* the cards sit a little higher */
  /* the button's bottom edge lines up with the bottom edge of the cards */
  .diag__action { margin-bottom: 0; translate: var(--diag-cta-shift, 0px) -16px; }
}
/* Four independent square cards, two over two, in order, with the same gap between them as the
   other groups on the Home. Each one is a plain box (no cube faces, no frame); the group is as
   wide and as tall as the four cubes were together. */
.diag__cubes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-cube-gap);
}
.diag__cube {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 12px; text-align: center;
  font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.0625rem); font-weight: 400; letter-spacing: 0; line-height: 1.2; color: var(--text-on-dark-muted);
  border: 1px solid rgba(246, 247, 248, 0.3); border-radius: var(--radius);
  background: transparent;
  transition: opacity 733ms linear, border-color 0.35s var(--ease);
}
.js .diag__cubes:not(.is-entered) .diag__cube { opacity: 0; }
/* the cards do not react to the cursor: only the button does */
@media (prefers-reduced-motion: reduce) { .diag__cube { transition: none; } }

@media (max-width: 700px) {
  .diag__grid { grid-template-columns: 1fr; grid-template-areas: "text" "cubes" "cta"; }
  .diag__action { justify-self: center; margin-bottom: 0; translate: none; }
}

/* Digital + closing CTA share one dark ending */
.home .digital-panel { padding-bottom: calc(var(--home-space) * 0.6 + 30px); }
.cta.cta--dark { background: var(--ink); color: var(--text-on-dark); padding-top: 0; }
.cta--dark .container { border-top: 1px solid var(--line-on-dark); padding-top: var(--home-space); }
.cta--dark .cta__body, .cta--dark .cta__direct { color: var(--text-on-dark-muted); }

/* ---------- Final CTA ---------- */
.cta { background: var(--surface); border-top: 1px solid var(--line-on-light); padding: var(--section-space) 0; text-align: center; }
.cta__title { max-width: 16ch; margin: 0 auto; }
.cta__body { margin: 24px auto 0; }
.cta__actions { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta__direct { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: 0.9375rem; color: var(--text-on-light-muted); }

/* Compact, consistent spacing across the inner editorial pages. Home and
   Contact intentionally keep their own spacing systems. */
.inner-page {
  --inner-page-space: clamp(44px, 4.5vw, 64px);
  --inner-content-gap: clamp(30px, 3.5vw, 44px);
}
.inner-page > .section,
.inner-page > .cta {
  padding-top: var(--inner-page-space);
  padding-bottom: var(--inner-page-space);
}
.inner-page .section-body { margin-top: var(--inner-content-gap); }
.inner-page > .projects-sectors-section { padding-top: clamp(28px, 3vw, 40px); }

/* ---------- Capabilities ---------- */
.anchor-index { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-on-dark); margin-top: clamp(48px, 6vw, 72px); }
.anchor-index a {
  padding: 20px 20px 0 0; text-decoration: none; color: var(--text-on-dark-muted);
  display: flex; flex-direction: column; gap: 8px; font-size: 0.9688rem;
  transition: color 0.2s;
}
.anchor-index a .label { color: inherit; }
@media (max-width: 860px) { .anchor-index { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }

/* The four ways in: one section, four cards (two by two). Each card stacks
   the situation, what we do and the outcome; the outcome sits at the foot so
   the two cards in a row line up. */
/* third card: a slightly tighter tag row, so that Changes and Delivery share the last row */
/* the tags of each service card are laid out in fixed rows (three in the English cards), and are a little smaller so
   that every row fits the card on a phone as well as on a computer */
.tags--rows { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.tags__row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.capability .tags__row span {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.25;
  padding: 5px 8px; border: 1px solid var(--line-on-dark); color: var(--text-on-dark-muted); border-radius: var(--radius);
}
/* Lead and deliver on a phone: its own grouping of the tags (Schedule with Communications, Changes with Delivery);
   on any other screen the standard three rows are shown instead */
.tags--phone { display: none; }
@media (max-width: 560px) {
  #run .tags--rows:not(.tags--phone) { display: none; }
  #run .tags--phone { display: flex; }
}
.capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(30px, 3.8vw, 54px); }
.capability {
  display: flex; flex-direction: column; gap: 20px;
  width: 100%; padding: clamp(24px, 2.5vw, 36px);
  border: 1px solid var(--line-on-light); border-radius: var(--radius);
  background: rgba(246, 247, 248, 0.02);
}
/* all the card's text is centred; the tags stay in the same rows, each row centred */
.capability { text-align: left; }
.capability .tags { justify-content: flex-start; }
/* the descriptions and the OUTPUT text are justified (the last line of each stays centred,
   like the titles and tags); the line breaks are unchanged */
.capability__when, .capability__body, .capability .outcome p { text-align: justify; text-align-last: left; }
.capability > div:last-child { flex: 1; display: flex; flex-direction: column; gap: 20px; }
/* side by side (three cards per row): the tag rows sit right above the OUTPUT block, which is the
   same height in every card, so the tags start and end at the same height in the three cards */
@media (min-width: 1051px) {
  .capability { gap: 32px; } /* the paragraph sits lower, giving the title more room */
  .capability .capability__when { margin-top: 24px; } /* and so does the small line under the title */
  /* the third paragraph is larger and white, and sits a touch higher, so the tags below get room to breathe */
  .capability .capability__body { font-size: 1.1875rem; color: var(--white); margin-top: -10px; margin-bottom: 12px; }
  .capability .tags { margin-top: auto; }
  .capability .outcome { margin-top: 0; min-height: 114px; }
}
.capability .capability__title { margin-top: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.12; }
.capability__when { margin-top: 12px; color: var(--text-on-light-muted); font-size: 1rem; max-width: 44ch; }
.capability__body { font-size: 1.0625rem; line-height: 1.6; max-width: 54ch; }
/* balanced lines: the same number of lines as before, but no line runs out to the
   card's edge, so the three cards read at the same width */
.capability__title { text-wrap: balance; }
/* justified text fills the full line, so it keeps the natural wrapping (balancing would leave gaps) */
.capability__when, .capability__body, .outcome p { text-wrap: wrap; }
.outcome {
  margin-top: auto; padding: 18px 20px;
  background: var(--surface-raised); border-left: 2px solid var(--off-white);
}
.outcome .label { display: block; margin-bottom: 8px; }
.outcome p { font-weight: 500; font-size: 1rem; }
@media (max-width: 1050px) {
  /* one card per row: each card is as tall as its own content, with the paragraph, the tags and
     the OUTPUT block closer together */
  .capabilities { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .capability { gap: 14px; }
  .capability > div:last-child { gap: 14px; }
  .capability .tags { margin-top: 2px; }
  .capability .outcome { margin-top: 2px; }
}

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.duo__item .title-md { margin-top: 18px; }
.duo__item .duo__primary-title {
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
  text-transform: none; color: var(--text-on-light);
}
.duo__item .duo__secondary-title {
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.duo__item p:not(.label) { margin-top: 16px; color: var(--text-on-light-muted); max-width: 48ch; }
.on-dark .duo__item p:not(.label) { color: var(--text-on-dark-muted); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* Header text on the photo headers (Services, Digital, Projects): like the home,
   every word carries its own soft dark shade, so it stays legible on any part
   of the photo without a global veil. */
.page-hero--photo :is(.page-hero__title, .page-hero__lead, .how__title, .flow__name),
.page-hero--planning :is(.page-hero__title, .page-hero__lead),
.dhero__headline {
  text-shadow: 0 0 6px rgba(20, 20, 21, 0.75), 0 0 18px rgba(20, 20, 21, 0.65), 0 0 38px rgba(20, 20, 21, 0.5);
}

/* Projects header: the Planning photo behind the title, under a veil that is
   darkest on the text side */
/* same height as the Services header: the whole screen, text at the top left
   like Services, nudged left on wide screens by the same amount */
.page-hero--planning, .dhero { --hero-shift: calc(-1 * clamp(0px, (100vw - var(--max-width)) / 2, 40px)); }
.page-hero--planning { display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--nav-height) + clamp(10px, 3.5vw, 50px)); padding-bottom: 0; }
.page-hero--planning > .container { width: 100%; translate: var(--hero-shift) clamp(30px, 3vw, 44px); }
.page-hero--planning .page-hero__title { margin-top: 0; }
.page-hero--planning .page-hero__lead span, .dhero__headline span { display: block; }
@media (max-width: 700px) { .page-hero--planning .page-hero__lead span, .dhero__headline span { display: inline; } }
.page-hero--planning::before, .page-hero--planning::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.page-hero--planning::before {
  /* the photo box runs 10% of the screen height below the header (clipped) and is
     anchored to its top, so the scene sits lower in the visible area */
  z-index: -2; bottom: -10vh; bottom: -10svh;
  background: url("/assets/images/projects-hero-3.jpg") 60% 0% / cover no-repeat;
  transform-origin: 62% 45%; will-change: transform;
  animation: eb-kenburns 24s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .page-hero--planning::before { animation: none; } }
/* no veil over the Planning photo: it is shown with its own lighting; the title and the
   paragraph each carry a soft dark shade behind them, like the menu items */
.page-hero--planning::after { content: none; }
.page-hero--planning :is(.page-hero__title, .page-hero__lead) { position: relative; width: fit-content; max-width: 100%; }
.page-hero--planning :is(.page-hero__title, .page-hero__lead)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
.page-hero--planning .page-hero__title::before { inset: -2px -14px; border-radius: 999px; }
.page-hero--planning .page-hero__lead::before { inset: -8px -16px; border-radius: 24px; }

/* Projects header: five boxes along the bottom, transparent like the Services path
   and the Digital cards; on hover only the box's line lights up. */
.page-hero__stats { position: relative; z-index: 1; margin: auto 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(246, 247, 248, 0.24); }
.stat { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: clamp(72px, 7vw, 100px); padding: 0 clamp(12px, 2vw, 28px); border-right: 1px solid rgba(246, 247, 248, 0.2); }
.stat:last-child { border-right: 0; }
.stat::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid transparent; }
.stat__text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat__text::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -6px -14px; border-radius: 24px; background: rgba(20, 20, 21, 0.6); filter: blur(8px); }
.stat__num { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: rgba(246, 247, 248, 0.95); }
.stat__label { font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); line-height: 1.2; color: rgba(246, 247, 248, 0.78); }
@media (max-width: 760px) {
  .page-hero--planning { min-height: 0; }
  .page-hero--planning > .container { translate: 0 0; }
  .page-hero--planning::before { bottom: 0; background-position: 62% center; }
  .page-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero__stats { margin-top: clamp(40px, 12vw, 64px); }
  .stat { height: 76px; padding: 0 10px; }
  .stat:nth-child(even) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(246, 247, 248, 0.2); }
}

/* ---------- Digital page ---------- */
/* Hero copied from the live elyblack.com (.hero there, .dhero here). The
   only addition is the top padding that clears the fixed navigation bar. */
.dhero {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  /* fills the screen like the Services header, running under the navigation bar */
  padding: calc(var(--nav-height) + clamp(16px, 5.2vw, 75px)) 0 0;
  overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.dhero__bg { position: absolute; inset: 0; z-index: 0; }
/* the Digital Fabric photo fills the hero and only moves with its Ken Burns */
.dhero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: 70% 45%; will-change: scale;
  animation: eb-dhero-kenburns 24s ease-in-out infinite alternate;
  object-fit: cover; object-position: 70% 42%;
}
@keyframes eb-dhero-kenburns { from { scale: 1; } to { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .dhero__bg img { animation: none; } }
/* no veil over the photo: it keeps its own lighting. The headline carries a
   soft dark shade behind it, like the menu items. */
/* no veil over the Digital Fabric photo: it is shown with its own lighting; the headline
   keeps its own soft dark shade behind it (below) */
.dhero__bg::after { content: none; }
.dhero__headline { position: relative; }
.dhero__headline::before {
  content: ""; position: absolute; inset: -8px -18px; z-index: -1; pointer-events: none;
  border-radius: 28px; background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
.dhero__inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--edge); width: 100%; }
.dhero__inner { translate: calc(var(--hero-shift) - clamp(0px, 1.7vw, 24px)) 0; }
.dhero__copy { max-width: none; }
.dhero__eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-on-dark-muted); margin-bottom: 24px;
}
.dhero__headline { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; max-width: none; }
.dhero__sub { position: relative; width: fit-content; margin-top: 24px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: #E4E4E7; max-width: 46ch; }
.dhero__sub::before { content: ""; position: absolute; inset: -8px -16px; z-index: -1; pointer-events: none; border-radius: 24px; background: rgba(20, 20, 21, 0.6); filter: blur(8px); }
.dhero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.dhero__bottom { position: relative; z-index: 1; width: 100%; margin-top: auto; padding-top: clamp(56px, 8vw, 104px); }
.dhero__bottom > .container { padding-bottom: 18px; translate: calc(var(--hero-shift) - clamp(0px, 1.7vw, 24px)) 0; }
.dhero__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(246, 247, 248, 0.24); background: transparent; }
.dhero__card { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: clamp(72px, 7vw, 100px); padding: 0 clamp(16px, 2.2vw, 32px); /* same height as the Services path boxes */ border-right: 1px solid rgba(246, 247, 248, 0.2); }
.dhero__card:last-child { border-right: 0; }
.dhero__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid transparent; }
/* same light type as the Services path boxes */
.dhero__card-title { font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.125rem); font-weight: 400; letter-spacing: 0; line-height: 1.2; color: rgba(246, 247, 248, 0.9); }
@media (max-width: 860px) {
  .dhero__copy { max-width: none; }
  .dhero__headline { max-width: none; }
}
/* the text of the path boxes and of the Digital cards each carries its own small
   soft shade, like the menu items, since the photo behind has no veil */
.page-hero--photo .flow__name, .dhero__card-title, .dhero .how__title { position: relative; }
.dhero .how__title { width: fit-content; }
.page-hero--photo .flow__name::before, .dhero__card-title::before, .dhero .how__title::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -6px -12px; border-radius: 999px; background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
.page-hero--photo .flow__name::before, .dhero__card-title::before { border-radius: 24px; }
@media (max-width: 760px) {
  .dhero { min-height: 0; }
  .dhero__bottom { margin-top: 0; padding-top: clamp(64px, 16vw, 104px); }
  .dhero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dhero__card { height: auto; min-height: 72px; padding: 10px 14px; }
  .dhero__card:nth-child(2) { border-right: 0; }
  .dhero__card:nth-child(n+3) { border-top: 1px solid rgba(246, 247, 248, 0.2); }
}
@media (max-width: 640px) {
  .dhero__bg img { object-position: 78% center; }
}

.types { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-on-light); }
.type { padding: 32px 28px 36px 0; border-bottom: 1px solid var(--line-on-light); }
.type:not(:nth-child(4n)) { border-right: 1px solid var(--line-on-light); }
.type:not(:nth-child(4n+1)) { padding-left: 28px; }
.type__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 18px; }
.type__body { margin-top: 10px; color: var(--text-on-light-muted); font-size: 1rem; }
@media (max-width: 1000px) {
  .types { grid-template-columns: 1fr 1fr; }
  .type, .type:not(:nth-child(4n+1)) { padding: 28px 24px 32px 0; border-right: 0; }
  .type:nth-child(odd) { border-right: 1px solid var(--line-on-light); }
  .type:nth-child(even) { padding-left: 24px; }
}
@media (max-width: 560px) {
  .types { grid-template-columns: 1fr; }
  .type:nth-child(odd), .type:nth-child(even) { border-right: 0; padding-left: 0; }
}

.method { --method-gap: clamp(16px, 2vw, 28px); display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--method-gap); }
@media (max-width: 1000px) { .method { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px) { .method { grid-template-columns: 1fr; } }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-tile {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 300px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end;
  background: transparent; border: 1px solid var(--line-on-light);
}
.why-tile--photo { color: var(--white); border-color: transparent; background: var(--ink); }
.why-tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.55; }
.why-tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 20, 21, 0.1), rgba(20, 20, 21, 0.85)); }
.why-tile__index { position: absolute; top: 28px; left: 32px; }
.why-tile--photo .why-tile__index { color: var(--text-on-dark-muted); }
.why-tile__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.why-tile__body { margin-top: 10px; color: var(--text-on-light-muted); font-size: 1rem; }
.why-tile--photo .why-tile__body { color: rgba(246, 247, 248, 0.8); }
.why-tile--wide { grid-column: span 2; }
@media (max-width: 1000px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } .why-tile { min-height: 240px; } .why-tile--wide { grid-column: auto; } }

/* ---------- About ---------- */
.principles__label { margin-bottom: clamp(28px, 3vw, 40px); }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--home-cube-gap); }
.principle {
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid rgba(246, 247, 248, 0.3);
}
.principle__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 0; }
.principle__body { margin-top: auto; padding-top: 24px; color: var(--text-on-light-muted); }
.about-foundations {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative; z-index: 1; width: 100%; margin: auto 0 0;
  border-top: 1px solid rgba(246, 247, 248, 0.3);
}
.about-foundation {
  position: relative; min-height: clamp(120px, 10vw, 156px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2.4vw, 36px) 22px; text-align: center;
  border-right: 1px solid rgba(246, 247, 248, 0.3);
}
.about-foundation:last-child { border-right: 0; }
.about-foundation__title { color: var(--white); }
.about-foundation__text { margin-top: 8px; max-width: 34ch; color: var(--text-on-dark-muted); font-size: 0.9375rem; }
.about-foundation::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent;
}
@media (max-width: 1000px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .about-foundations { grid-template-columns: 1fr; }
  .about-foundation { height: 128px; min-height: 0; padding: 22px; border-right: 0; }
  .about-foundation + .about-foundation { border-top: 1px solid rgba(246, 247, 248, 0.3); }
}
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }
.services__label { margin-bottom: clamp(28px, 3vw, 40px); }
.digital-types__label { max-width: none; }
@media (min-width: 1201px) { .digital-types__label { white-space: nowrap; } } /* only where the whole line fits (the Spanish label is long) */

.founder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.founder__name { margin-top: 20px; }
.founder__role { margin-top: 10px; }
.founder__body { font-size: 1.1875rem; line-height: 1.6; max-width: 52ch; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Contact (copied from the live elyblack.com) ---------- */
.page-header {
  position: relative; margin-top: var(--nav-height);
  background: var(--ink); color: var(--text-on-dark);
  padding: clamp(56px, 8vw, 88px) 0 clamp(48px, 7vw, 72px);
  overflow: hidden;
}
.page-header__bg { position: absolute; inset: 0; z-index: 0; }
.page-header__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.page-header__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20, 20, 21, 0.95) 0%, rgba(20, 20, 21, 0.86) 45%, rgba(20, 20, 21, 0.55) 100%);
}
.page-header--tall {
  /* the header runs up under the (transparent) bar, so the photo fills it too */
  margin-top: 0; min-height: calc(clamp(360px, 34vw, 440px) + var(--nav-height));
  display: flex; align-items: flex-start;
  padding-top: calc(var(--nav-height) + clamp(36px, 4.5vw, 64px)); padding-bottom: clamp(40px, 5vw, 56px);
}
.page-header--tall .page-header__bg img { object-position: 50% 38%; }
/* wide screens: the photo is sized for the free space to the right of the text
   (about 500px of it, from the left margin) and runs flush to the right edge */
@media (min-width: 1200px) {
  .page-header--tall .page-header__bg img {
    --free-l: calc(max(0px, (100vw - 1280px) / 2) + clamp(20px, 5vw, 56px) - clamp(8px, 2.5vw, 48px) + 500px);
    --free-w: calc(100vw - var(--free-l) - 54px);
    --img-w: calc(var(--free-w) * 1.92);
    inset: auto; width: var(--img-w); height: calc(var(--img-w) * 941 / 1672); max-width: none;
    left: calc(100vw - var(--img-w)); /* the photo ends flush with the right edge of the screen */
    top: calc(56% - 0.45 * var(--img-w) * 941 / 1672);
    object-fit: fill;
  }
}
/* slow Ken Burns anchored on the right edge, so the photo grows towards the left */
.page-header--tall .page-header__bg img { transform-origin: 100% 50%; will-change: scale; animation: eb-contact-kenburns 24s ease-in-out infinite alternate; }
@keyframes eb-contact-kenburns { from { scale: 1; } to { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .page-header--tall .page-header__bg img { animation: none; } }
/* no global veil on the Contact header: every text carries its own soft shade, like the other heroes */
.page-header--tall .page-header__bg::after { content: none; }
.page-header--tall :is(.page-header__title, .page-header__sub, .page-header__direct .contact-aside__heading, .page-header__direct .contact-aside__item a) { position: relative; width: fit-content; }
.page-header--tall :is(.page-header__title, .page-header__sub, .page-header__direct .contact-aside__heading, .page-header__direct .contact-aside__item a)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
.page-header--tall .page-header__title::before { inset: -4px -16px; border-radius: 28px; }
.page-header--tall .page-header__sub::before { inset: -8px -16px; border-radius: 24px; }
.page-header--tall .page-header__direct .contact-aside__heading::before { inset: -4px -12px; border-radius: 999px; }
.page-header--tall .page-header__direct .contact-aside__item a::before { inset: -5px -12px; border-radius: 999px; }
.page-header--tall :is(.page-header__title, .page-header__sub, .page-header__direct .contact-aside__heading, .page-header__direct .contact-aside__item a) {
  text-shadow: 0 0 6px rgba(20, 20, 21, 0.75), 0 0 18px rgba(20, 20, 21, 0.65), 0 0 38px rgba(20, 20, 21, 0.5);
}
.page-header--tall .page-header__inner { width: 100%; translate: calc(-1 * clamp(8px, 2.5vw, 48px)) 0; /* the text sits a little left of the page grid */ }
@media (max-width: 640px) {
  .page-header--tall .page-header__bg img { object-position: 70% 62%; }
}
.page-header__inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--edge); }
.page-header__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 20px; }
.page-header__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; max-width: 18ch; }
.page-header__sub { margin-top: 20px; font-size: 1.0625rem; line-height: 1.6; color: var(--text-on-dark-muted); max-width: 52ch; }
@media (min-width: 761px) { .page-header__sub span { display: block; } }
/* the title is two lines in both languages */
@media (min-width: 761px) { .page-header__title { max-width: none; } .page-header__title span { display: block; } }

.section--compact { padding: clamp(64px, 9vw, 112px) 0; }
.contact-layout {
  max-width: var(--max-width); margin: 0 auto; padding: 0 var(--edge);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
}
.contact-form-section { padding: clamp(36px, 4vw, 52px) 0 clamp(56px, 6vw, 80px); }
.contact-form__heading {
  margin-bottom: clamp(24px, 2.5vw, 34px);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  line-height: 1.2;
}
.contact-aside__heading { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-light-muted); margin-bottom: 10px; }
.contact-aside__item { display: flex; flex-direction: column; gap: 4px; }
.contact-aside__item a { font-size: 1rem; color: var(--text-on-light); border-bottom: 1px solid transparent; width: fit-content; }
/* the direct contacts sit in the header, under the intro */
.page-header__direct { margin-top: 26px; }
.page-header__direct .contact-aside__heading {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  color: var(--text-on-dark-muted);
}
.page-header__direct .contact-aside__item a { color: var(--text-on-dark); }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 48px); }
/* left column: full name, work email; right column: company name, company website;
   then the message across the full width, then the send button */
.form > .field:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.form > .field:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.form > .field:nth-of-type(3) { grid-column: 2; grid-row: 1; }
.form > .field:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.form > .field:nth-of-type(5) { grid-column: 1 / -1; grid-row: 3; }
.form > .form__foot { grid-column: 1 / -1; grid-row: 4; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-on-light-muted); }
.field input, .field textarea {
  font-family: var(--font-display); font-size: 1rem; color: var(--text-on-light);
  background: var(--ink-raised); border: 1px solid rgba(246, 247, 248, 0.24); border-radius: var(--radius);
  padding: 13px 16px; transition: border-color 0.2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--off-white); }
.field input::placeholder, .field textarea::placeholder { color: rgba(246, 247, 248, 0.4); }
.field__error { font-size: 0.8125rem; color: var(--error); min-height: 1.2em; }
.field--error input, .field--error textarea { border-color: var(--error); }
.field__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 6px; text-align: center; }
.form__status { font-size: 0.9375rem; }
.form__status[data-state="success"] { color: var(--text-on-light); }
.form__status[data-state="error"] { color: var(--error); }
.form__status:empty { display: none; }
@media (max-width: 700px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .form > .field:nth-of-type(n), .form > .form__foot { grid-column: 1; grid-row: auto; }
}

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 48px; }
.prose p, .prose ul { margin-top: 14px; color: var(--text-on-light-muted); }
.prose ul { list-style: disc; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--white); text-underline-offset: 3px; }

/* ---------- 404 ---------- */
.not-found { min-height: 80vh; display: flex; align-items: center; background: var(--ink); color: var(--white); padding: calc(var(--nav-height) + 48px) 0 80px; }
.not-found__links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--text-on-dark); padding: clamp(72px, 9vw, 112px) 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px 32px; }
.footer__lockup { display: inline-flex; flex-direction: column; gap: 14px; text-decoration: none; }
.footer__descriptor { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.26em; color: var(--text-on-dark-muted); }
.footer__line { margin-top: 22px; color: var(--text-on-dark-muted); max-width: 32ch; font-size: 0.9688rem; }
.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 0.9375rem; }
.footer__col .label { margin-bottom: 8px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--white); }
.footer__col a { text-decoration: none; color: var(--text-on-dark-muted); }
.footer__bottom {
  margin-top: clamp(56px, 7vw, 88px); padding-top: 24px; border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 0.8125rem; color: var(--text-on-dark-muted);
}
.footer__bottom a { color: inherit; text-decoration: none; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--ease), transform 0.5s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .resp__cards .resp__card, .resp__action, .digital-panel__cubes li { transition: none; }
  .step::before { transform: scaleX(1); transition: none; }
  .btn:hover { transform: none; }
}

/* Deep Dive: its paragraph is forced onto two lines; the type is sized to the card so each line fits */
.diagnostic__type--deep { container-type: inline-size; --dd-chars: 21.2; }
:lang(es) .diagnostic__type--deep { --dd-chars: 23.2; }
@media (min-width: 721px) {
  .diagnostic__type--deep p { max-width: none; font-size: min(1rem, calc(100cqw / var(--dd-chars))); }
  .diagnostic__type--deep p span { display: block; white-space: nowrap; }
}

/* ---------- Home sections and the closing call to action of every page: individual veils ----------
   No global veil over the photos: every text (and button) carries its own soft dark shade,
   like the other heroes. */
.resp::after, .diag::after, .digital-panel::after, .cta.has-granite::after { content: none; }
:is(.resp .resp__label, .resp__title, .resp__card-title, .resp__card-body, .diag__kicker, .diag__title, .diag__label, .diag__body, .diag__cube span, .digital-lockup__name, .digital-lockup__descriptor, .digital-panel__kicker, .digital-panel__title, .digital-panel__body, .digital-panel__cards li span, .cta.has-granite .cta__title, .cta.has-granite .cta__body, .cta.has-granite .cta__direct a, .resp__action .btn, .diag__cta, .digital-panel__actions .btn, .cta.has-granite .cta__actions .btn) { position: relative; }
:is(.resp .resp__label, .resp__title, .resp__card-title, .resp__card-body, .diag__kicker, .diag__title, .diag__label, .diag__body, .diag__cube span, .digital-lockup__name, .digital-lockup__descriptor, .digital-panel__kicker, .digital-panel__title, .digital-panel__body, .digital-panel__cards li span, .cta.has-granite .cta__title, .cta.has-granite .cta__body, .cta.has-granite .cta__direct a) { width: fit-content; }
:is(.resp .resp__label, .resp__title, .resp__card-title, .resp__card-body, .diag__kicker, .diag__title, .diag__label, .diag__body, .diag__cube span, .digital-lockup__name, .digital-lockup__descriptor, .digital-panel__kicker, .digital-panel__title, .digital-panel__body, .digital-panel__cards li span, .cta.has-granite .cta__title, .cta.has-granite .cta__body, .cta.has-granite .cta__direct a, .resp__action .btn, .diag__cta, .digital-panel__actions .btn, .cta.has-granite .cta__actions .btn)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -6px -12px; border-radius: 24px; background: rgba(20, 20, 21, 0.6); filter: blur(8px);
}
:is(.resp__title, .digital-panel__title, .diag__title, .cta.has-granite .cta__title)::before { inset: -12px -14px -16px; border-radius: 28px; }
:is(.diag__body, .digital-panel__body, .cta.has-granite .cta__body)::before { inset: -8px -16px; border-radius: 24px; }
:is(.resp .resp__label, .diag__kicker, .digital-panel__kicker, .digital-lockup__name, .digital-lockup__descriptor)::before { inset: -4px -12px; border-radius: 999px; }
:is(.resp__action .btn, .diag__cta, .digital-panel__actions .btn, .cta.has-granite .cta__actions .btn)::before { inset: -6px -10px; border-radius: 10px; }
:is(.resp .resp__label, .resp__title, .resp__card-title, .resp__card-body, .diag__kicker, .diag__title, .diag__label, .diag__body, .diag__cube span, .digital-lockup__name, .digital-lockup__descriptor, .digital-panel__kicker, .digital-panel__title, .digital-panel__body, .digital-panel__cards li span, .cta.has-granite .cta__title, .cta.has-granite .cta__body, .cta.has-granite .cta__direct a, .resp__action .btn, .diag__cta, .digital-panel__actions .btn, .cta.has-granite .cta__actions .btn) { text-shadow: 0 0 6px rgba(20, 20, 21, 0.75), 0 0 18px rgba(20, 20, 21, 0.65), 0 0 38px rgba(20, 20, 21, 0.5); }
.cta.has-granite .cta__body { text-wrap: balance; }
/* What We Do heading: the shade goes word by word */
.resp__head :is(.resp__label, .resp__title)::before { content: none; }
.resp__head .vw { position: relative; display: inline-block; }
.resp__head .vw::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -4px -4px; border-radius: 16px; background: rgba(20, 20, 21, 0.6); filter: blur(8px); }
.resp__head .resp__label .vw::before { inset: -4px -6px; border-radius: 999px; }
/* Closing call to action of every page: a tighter, lighter shade that hugs the text
   (selectors are long on purpose: they must outweigh the generic veil rule above) */
section.cta.has-granite .container :is(.cta__title, .cta__body, .cta__direct a, .cta__actions .btn)::before { background: rgba(20, 20, 21, 0.5); filter: blur(6px); }
section.cta.has-granite .container .cta__title::before { inset: -4px -6px -8px; border-radius: 24px; }
section.cta.has-granite .container .cta__body::before { inset: -3px -8px; border-radius: 16px; }
section.cta.has-granite .container .cta__actions .btn::before { inset: -2px -4px; border-radius: 6px; }
section.cta.has-granite .container .cta__direct a::before { inset: -3px -8px; border-radius: 999px; }
section.cta.has-granite .container :is(.cta__title, .cta__body, .cta__direct a, .cta__actions .btn) { text-shadow: 0 0 5px rgba(20, 20, 21, 0.7), 0 0 14px rgba(20, 20, 21, 0.45); }
/* closing call to action: per-line shade of the title (lines are built by main.js) */
section.cta.has-granite .container .cta__title.is-lined::before { content: none; }
.cta__title .vl { display: block; position: relative; width: fit-content; margin: 0 auto; }
.cta__title .vl::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -2px -6px -4px; border-radius: 20px; background: rgba(20, 20, 21, 0.5); filter: blur(6px); }

/* Diagnostic map: ONE line runs between the review options and the process, broken in the middle by
   "Different focus, same path", and keeps going as an arrow into the output. The two rows of cards share
   the same columns and the same height. */
.diagnostic__map { --map-gap: clamp(18px, 2vw, 32px); --arrow-w: clamp(1.75rem, 2.5vw, 2.5rem); --rule-gap: clamp(18px, 2vw, 28px); --rule-color: rgba(246, 247, 248, 0.35); gap: var(--map-gap); }
.diagnostic__types--rule { margin-bottom: 0; }
.diagnostic__types--rule::after { content: none; }
.diagnostic__flow { gap: 0; grid-template-rows: auto auto auto; }
.diagnostic__rule { position: relative; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin: 0; padding: var(--rule-gap) 0; }
.diagnostic__rule-line { flex: 1 1 0; min-width: 0; height: 1px; background: var(--rule-color); }
.diagnostic__rule-tail { display: none; }
@media (min-width: 721px) {
  .diagnostic__flow { grid-template-rows: 1fr auto 1fr; }
  /* the three review options use the same columns as the three process steps (same width, same position) */
  .diagnostic__process { grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr); }
  .diagnostic__types--3 { grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr); column-gap: clamp(10px, 1.2vw, 18px); }
  .diagnostic__types--3 .diagnostic__type:nth-child(1) { grid-column: 1; }
  .diagnostic__types--3 .diagnostic__type:nth-child(2) { grid-column: 3; }
  .diagnostic__types--3 .diagnostic__type:nth-child(3) { grid-column: 5; }
  .diagnostic__stage-arrow { justify-self: center; }
}
@media (min-width: 1101px) {
  .diagnostic__map { grid-template-columns: minmax(0, 1fr) var(--arrow-w) minmax(250px, 0.34fr); }
  /* the separate arrow glyph keeps its column but is replaced by the end of the line */
  .diagnostic__map-arrow { visibility: hidden; }
  .diagnostic__rule-tail {
    display: block; position: absolute; left: 100%; top: calc(50% - 0.5px); height: 1px; background: var(--rule-color);
    width: calc(2 * var(--map-gap) + var(--arrow-w) - 38px);
  }
  .diagnostic__rule-tail::after {
    content: ""; position: absolute; right: 2px; top: -4.5px; width: 10px; height: 10px;
    border-top: 1px solid var(--rule-color); border-right: 1px solid var(--rule-color);
    transform: rotate(45deg);
  }
}

/* "Make an informed decision..." sits under the Diagnostic title, in the "What We Do" label format */
.diagnostic__heading .diagnostic__kicker { white-space: normal; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); letter-spacing: 0.2em; line-height: 1.3; margin-top: clamp(16px, 1.6vw, 24px); text-wrap: balance; }
.diagnostic__heading .diagnostic__title { margin-top: 0; }

/* Digital Diagnostic: "Digital" is a small "What We Do" label above the big "Diagnostic" */
.diagnostic__heading .diagnostic__title-label { display: block; margin: 0 0 clamp(14px, 1.4vw, 20px); line-height: 1.3; color: #E4E4E7; }

/* Diagnostic cards: less vertical space (tighter padding and inner gaps) */
.diagnostic__type { padding-block: clamp(15px, 1.4vw, 20px); }
.diagnostic__stage { padding-block: clamp(15px, 1.4vw, 20px); }
.diagnostic__type-index { margin-bottom: 8px; }
.diagnostic__type p { margin-top: 8px; }
.diagnostic__stage .diagnostic__tags { margin-top: 14px; gap: 6px; }
.diagnostic__map { --rule-gap: clamp(12px, 1.4vw, 18px); }

/* Diagnostic: the process cards (Examine / Evaluate / Define) are tighter still. The rows no longer have to
   match in height: the arrow is the end of the line itself, so it follows the line wherever it falls. */
@media (min-width: 721px) {
  .diagnostic__flow { grid-template-rows: auto auto auto; align-content: start; }
}
.diagnostic__stage { padding-block: clamp(13px, 1.2vw, 17px); }
.diagnostic__stage .diagnostic__tags { margin-top: 12px; gap: 5px; }
.diagnostic__stage .diagnostic__tag-pair { gap: 5px; }
.diagnostic__stage .diagnostic__tags li:not(.diagnostic__tag-pair), .diagnostic__stage .diagnostic__tag-pair span { padding: 5px 8px; }

/* Review option cards: the paragraph sits at the bottom of the card, not right under the title */
.diagnostic__type { display: flex; flex-direction: column; }
.diagnostic__type p { margin-top: auto; padding-top: 10px; }

/* Services diagnostic: the 01/02/03 numbers sit in the top corner of each card without taking height,
   so the section is exactly as tall as the Digital Diagnostic one */
.diagnostic__types--rule .diagnostic__type { position: relative; }

/* Digital method: each step is just a box with its title inside (no number, no paragraph);
   a short line joins every box to the next one */
.step { --box-h: clamp(72px, 7vw, 96px); display: flex; align-items: center; justify-content: center; min-height: var(--box-h); padding: 0 clamp(12px, 1.2vw, 18px); border: 1px solid rgba(246, 247, 248, 0.28); background: rgba(255, 255, 255, 0.03); text-align: center; }
.step::before { top: 50%; left: 100%; width: var(--method-gap); }
.step__title { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); text-wrap: balance; }
@media (max-width: 1000px) { .step { text-align: center; } .method { row-gap: var(--method-gap); } }

/* Diagnostic section (Services and Digital): a little less space above the heading */
.diagnostic { padding-top: clamp(40px, 4.4vw, 62px); }

/* Digital page: less space around the line between the services list and "How digital projects move" */
.digital-types-section { padding-bottom: clamp(36px, 4vw, 56px); }
.digital-method-section { padding-top: clamp(36px, 4vw, 56px); }

/* "How digital projects move": the line under the title sits beside it */
@media (min-width: 901px) {
  .digital-method-section .section-head { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 4vw, 64px); align-items: end; }
  .digital-method-section .section-head .label { grid-column: 1 / -1; }
  .digital-method-section .section-head .lead { margin-top: 0; padding-bottom: 6px; max-width: none; }
}

/* Titles of the process cards (Examine / Evaluate / Define): the "What We Do" label font */
.diagnostic__stage-title { font-family: var(--font-mono); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; letter-spacing: 0.2em; line-height: 1.3; text-transform: uppercase; color: #E4E4E7; }

/* Services diagnostic: the review option titles ("Digital Diagnostic" included) stay on one line; on narrower cards they shrink a little */
.page-services .diagnostic__type { container-type: inline-size; }
.page-services .diagnostic__type-title { white-space: nowrap; font-size: min(1.375rem, calc(100cqw / 7.6)); }

/* Digital diagnostic: same idea for the audit cards ("Digital Environment" stays on one line) */
body:not(.page-services) .diagnostic__type { container-type: inline-size; }
body:not(.page-services) .diagnostic__type-title { white-space: nowrap; font-size: min(1.375rem, calc(100cqw / 8.5)); }

/* Examine / Evaluate / Define: no box around the process steps (both diagnostics); the space stays the same */
.diagnostic__stage { border-color: transparent; background: none; }

/* "How digital projects move": the line beside the title stays on one line (it shrinks a little on narrower screens) */
@media (min-width: 1101px) {
  .digital-method-section .section-head .lead { white-space: nowrap; font-size: min(1.125rem, 1.2vw); }
  :lang(es) .digital-method-section .section-head .lead { font-size: min(1rem, 1.05vw); }
}
/* closing call to action: per-line shade of the paragraph too */
section.cta.has-granite .container .cta__body.is-lined::before { content: none; }
.cta__body .vl { display: block; position: relative; width: fit-content; margin: 0 auto; }
.cta__body .vl::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -3px -8px; border-radius: 16px; background: rgba(20, 20, 21, 0.5); filter: blur(6px); }

/* Diagnostic heading: the title column fits its title (it used to overlap the paragraph on long titles) */
@media (min-width: 901px) { .diagnostic__head { grid-template-columns: auto minmax(300px, 1fr); } }

/* Digital "What we take on": no outer top / bottom line, only the line that runs between the two rows */
.types { border-top: 0; }
@media (min-width: 1001px) { .type:nth-last-child(-n+4) { border-bottom: 0; } }
@media (min-width: 561px) and (max-width: 1000px) { .type:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 560px) { .type:last-child { border-bottom: 0; } }

/* Spanish Digital diagnostic paragraph: exactly three lines on wide screens (the breaks are dropped below 1100px) */
@media (max-width: 1100px) { .diagnostic__lead-break--3 { display: none; } }

/* Diagnostic: the line / arrow to the output sits a touch lower, and the small arrows between the process cards are gone
   (their columns stay empty so the cards keep lining up with the review options above) */
.diagnostic__rule { --rule-shift: 8px; padding-top: calc(var(--rule-gap) + var(--rule-shift)); padding-bottom: calc(var(--rule-gap) - var(--rule-shift)); }
@media (min-width: 1101px) { .diagnostic__rule-tail { top: calc(50% + var(--rule-shift) - 0.5px); } }
.diagnostic__stage-arrow { visibility: hidden; }
@media (max-width: 720px) { .diagnostic__stage-arrow { display: none; } }

/* Services diagnostic: the three review options are links to the contact form; they react to hover through the border */
a.diagnostic__type { color: inherit; text-decoration: none; cursor: pointer; }
a.diagnostic__type:focus-visible { outline: 2px solid rgba(246, 247, 248, 0.8); outline-offset: 3px; }

/* Digital Diagnostic: the paragraph beside the title takes exactly two lines (it shrinks a little on narrower screens) */
@media (min-width: 1101px) {
  body:not(.page-services) .diagnostic__head { container-type: inline-size; }
  body:not(.page-services) .diagnostic__lead { font-size: min(1.0625rem, 1.45cqw); text-wrap: balance; }
  body:not(.page-services) .diagnostic__lead-break { display: none; }
}

/* Privacy policy: no hero and no separator; "Legal" (What We Do label format), the title, then the text */
.privacy-section { border-top: 0; padding-top: calc(var(--nav-height) + clamp(36px, 4.5vw, 64px)); }
.privacy-head__title { margin-top: clamp(14px, 1.6vw, 22px); }
.privacy-head__date { margin-top: 14px; color: var(--text-on-dark-muted); font-size: 0.9375rem; }
.privacy-section .prose { margin-top: clamp(28px, 3.5vw, 48px); }
.privacy-section .prose > h2:first-of-type { margin-top: 36px; }
/* the opening sentence is one single line on wide screens */
@media (min-width: 1000px) { .privacy-section .prose { max-width: none; } .privacy-section .prose > :not(.privacy-intro) { max-width: 720px; } .privacy-intro { white-space: nowrap; } }

/* ES audit: the Spanish diagnostic heading keeps the same column as the English one, so the paragraph beside it has the same width and line count */
@media (min-width: 901px) {
  :lang(es) .diagnostic__head { grid-template-columns: calc(4.66 * clamp(3rem, 7.2vw, 6.5rem)) minmax(300px, 1fr); }
  :lang(es) .diagnostic__title { letter-spacing: -0.05em; }
}

/* ES audit: slightly tighter tags so the Spanish process steps wrap in the same number of rows as the English ones */
:lang(es) .diagnostic__process .diagnostic__stage:nth-of-type(-n+2) .diagnostic__tags li:not(.diagnostic__tag-pair), :lang(es) .diagnostic__process .diagnostic__stage:nth-of-type(-n+2) .diagnostic__tag-pair span { padding-inline: 5px; letter-spacing: 0.03em; }

/* ES audit: the Spanish "Values" line is a few characters longer; it keeps one line like the English one */
:lang(es) .about-foundation:last-child .about-foundation__text { max-width: 42ch; }

/* The review cards react when pointed at (or focused) only through a brighter outer border: no glow, no underline */
a.diagnostic__type { transition: border-color 0.35s var(--ease); }
@media (hover: hover) { a.diagnostic__type:hover { border-color: rgba(255, 255, 255, 0.4); } }
a.diagnostic__type:focus-visible { border-color: rgba(255, 255, 255, 0.4); }
@media (prefers-reduced-motion: reduce) { a.diagnostic__type { transition: none; } }

/* Diagnostic: the long line and its arrow are drawn from left to right (the line first, then the end with the arrow head) */
.js .diagnostic__rule-line { transform-origin: left center; transition: transform 0.4s linear; }
.js .diagnostic__rule:not(.is-entered) .diagnostic__rule-line { transform: scaleX(0); }
@media (min-width: 1101px) {
  .js .diagnostic__rule-tail { transition: clip-path 0.25s linear 0.4s; clip-path: inset(-8px -8px -8px 0); }
  .js .diagnostic__rule:not(.is-entered) .diagnostic__rule-tail { clip-path: inset(-8px 100% -8px 0); }
}
@media (prefers-reduced-motion: reduce) { .js .diagnostic__rule-line, .js .diagnostic__rule-tail { transition: none; } }

/* A small LED-like glint travels along the line and its arrow, left to right, once the line is drawn; it repeats with a pause */
.diagnostic__rule { --glint-tail: 0px; --glint-w: 90px; }
@media (min-width: 1101px) { .diagnostic__rule { --glint-tail: calc(2 * var(--map-gap) + var(--arrow-w) - 38px); } }
.js .diagnostic__rule::after {
  content: ""; position: absolute; left: 0; top: calc(50% + var(--rule-shift) - 1px); width: calc(100% + var(--glint-tail)); height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)) no-repeat;
  background-size: var(--glint-w) 100%; background-position: calc(-1 * var(--glint-w)) 0;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .diagnostic__rule.is-entered::after { animation: eb-rule-glint 5s linear 0.8s infinite; }
}
@keyframes eb-rule-glint {
  0% { background-position: calc(-1 * var(--glint-w)) 0; opacity: 0; }
  4% { opacity: 1; }
  32% { background-position: 100% 0; opacity: 1; }
  36% { background-position: 100% 0; opacity: 0; }
  100% { background-position: 100% 0; opacity: 0; }
}

/* Home hero without the cube: the name and descriptor are centred on the hero (the visible letters, from the top of
   "ElyBlack" to the bottom of "Project Management", at the same distance from the top and the bottom of the hero).
   The top padding carries the small correction between the line boxes and the letters, which follows the two font sizes. */
.hero__content { --hero-n: clamp(2.5rem, 1.3rem + 3.8vw, 4.5rem); --hero-d: clamp(0.6875rem, 0.64rem + 0.22vw, 0.8125rem); }
.hero__content { padding-block: calc(var(--nav-height) + 21.75px + 0.48 * var(--hero-d) - 0.0843 * var(--hero-n)) calc(var(--nav-height) + 21px); }
@media (max-width: 640px) { .hero__content { --hero-d: 0.8125rem; } }

/* Opening on every page and device: the cover has the ElyBlack cube centred on the screen. It draws itself in white (outline in
   0.95s, the three inner lines from 0.4s, the two faces fade in at 0.82s and 0.94s: no fill). When it is drawn,
   main.js opens the hexagon from it and the cube fades out while the hexagon leaves. */
.intro-screen__cube { display: none; }
html.intro-cover .intro-screen__cube {
  display: block; position: absolute; z-index: 1; left: 50%; top: 50%; color: #fff;
  width: clamp(120px, 11vw, 172px); height: clamp(120px, 11vw, 172px); transform: translate(-50%, -50%);
}
html.intro-cover .intro-screen__cube .trazo { stroke-dasharray: 300; stroke-dashoffset: 300; animation: eb-cube-draw 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
html.intro-cover .intro-screen__cube .trazo:nth-of-type(2) { animation-delay: 0.4s; animation-duration: 0.5s; }
html.intro-cover .intro-screen__cube .trazo:nth-of-type(3) { animation-delay: 0.52s; animation-duration: 0.5s; }
html.intro-cover .intro-screen__cube .trazo:nth-of-type(4) { animation-delay: 0.64s; animation-duration: 0.5s; }
html.intro-cover .intro-screen__cube .cara { opacity: 0; animation: eb-cube-face 0.5s ease forwards 0.82s; }
html.intro-cover .intro-screen__cube .cara:last-of-type { animation-delay: 0.94s; }
html.intro-cover.intro-out .intro-screen__cube { opacity: 0; transition: opacity 0.12s linear; }
@keyframes eb-cube-draw { to { stroke-dashoffset: 0; } }
@keyframes eb-cube-face { to { opacity: 1; } }

/* Phones: the Digital panel's cube sits in the middle of the screen, so the zoom grows from its centre */
@media (max-width: 700px) { .digital-panel::before { transform-origin: 50% 50%; } .digital-panel::after { background: rgba(20, 20, 21, 0.45); } }

/* About on phones: the empty floor of the photo under the metal structure is cut. The photo keeps the size it had (its height is the
   old photo area, about 380px + half the screen width) and slides down by the cut, so the hero is shorter by that amount and the
   structure stays where it was. */
@media (max-width: 700px) {
  .page-hero--about { --about-photo-h: calc(380px + 50vw); --about-cut: calc(0.17 * (380px + 50vw)); }
  .page-hero--about::before { background-size: auto var(--about-photo-h); background-position: 68% calc(100% + var(--about-cut)); }
  .page-hero--about .about-foundations { margin-top: calc(clamp(150px, 48vw, 260px) - var(--about-cut)); }
}

/* ---------- Optional analytics consent ---------- */
.analytics-consent {
  position: fixed;
  z-index: 500;
  inset: auto var(--edge) var(--edge);
  color: var(--text-on-dark);
}
.analytics-consent__content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid rgba(246, 247, 248, 0.28);
  background: rgba(20, 20, 21, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 36px;
}
.analytics-consent__text h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.analytics-consent__text p {
  max-width: 72ch;
  margin-top: 10px;
  color: var(--text-on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.analytics-consent__text a { color: var(--text-on-dark); }
.analytics-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.analytics-consent__actions .btn { white-space: nowrap; }
.analytics-settings {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.analytics-settings:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 760px) {
  .analytics-consent { inset: auto 12px 12px; }
  .analytics-consent__content { grid-template-columns: 1fr; align-items: stretch; }
  .analytics-consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .analytics-consent__actions .btn { width: 100%; padding-inline: 14px; }
}
@media (max-width: 420px) {
  .analytics-consent__actions { grid-template-columns: 1fr; }
}