/* ==========================================================================
   ZIDANE GROUP — site.css
   Palette, type and clear-space follow the group brand book (exports/README).
   Nothing here invents a colour: the only "accent" is the titanium gradient,
   used the way the mark uses it.
   ========================================================================== */

:root {
  /* Brand colour, verbatim from the brand book */
  --ink:          #121315;
  --graphite:     #25272A;
  --ivory:        #F0EFEB;
  --grey:         #7D8288;
  --ti-1:         #ECEEF0;
  --ti-2:         #B9BEC3;
  --ti-3:         #DFE2E5;
  --ti-4:         #7F8489;

  /* Derived surfaces — steps between ink and graphite, not new hues */
  --ink-deep:     #0B0C0D;
  --ink-raised:   #17181B;
  --ivory-dim:    #E3E1DA;

  --titanium: linear-gradient(135deg, var(--ti-1) 0%, var(--ti-2) 38%, var(--ti-3) 62%, var(--ti-4) 100%);

  /* Hairlines. The whole layout is ruled rather than boxed. */
  --rule-on-ink:   rgba(236, 238, 240, 0.13);
  --rule-on-ivory: rgba(18, 19, 21, 0.14);

  --text-on-ink:      #F2F3F4;
  --text-on-ink-soft: rgba(240, 239, 235, 0.66);
  --text-on-ivory:      #121315;
  --text-on-ivory-soft: rgba(18, 19, 21, 0.66);
  /* Titanium is too pale for small type on ivory; this clears 4.5:1 on #F0EFEB. */
  --label-on-ivory:     #5C6166;

  /* Type roles: Cinzel is the brand face (Roman capitals, used sparingly),
     Jost carries running text, Plex Mono handles anything that behaves like
     a drawing annotation — indices, sectors, coordinates. */
  --display: "Cinzel", "Times New Roman", Georgia, serif;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --arabic:  "Noto Kufi Arabic", "Segoe UI", sans-serif;

  --maxw: 1440px;
  --pad:  clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-arch: cubic-bezier(0.16, 0.84, 0.28, 1);

  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(0.98rem, 0.94rem + 0.16vw, 1.06rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

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

::selection { background: var(--ti-2); color: var(--ink); }


/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--pad) * 2), var(--maxw));
  margin-inline: auto;
}

.wrap--narrow { max-width: 860px; }

/* One class owns vertical rhythm. Background modifiers below never touch
   padding, so they can't cancel each other out. */
.band { padding-block: clamp(72px, 9vw, 132px); position: relative; }
.band--tight      { padding-block: clamp(48px, 6vw, 84px); }
.band--flush-top    { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

.band--ink      { background: var(--ink); }
.band--raised   { background: var(--ink-raised); }
.band--graphite { background: var(--graphite); }
.band--ivory    { background: var(--ivory); color: var(--text-on-ivory); }
.band--ivory p  { color: var(--text-on-ivory-soft); }

.band--ruled { border-top: 1px solid var(--rule-on-ink); }
.band--ivory.band--ruled { border-top-color: var(--rule-on-ivory); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ivory);
  color: var(--ink);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }


/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ti-2);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  flex: none;
  background: var(--titanium);
}
.band--ivory .eyebrow { color: var(--label-on-ivory); }
.eyebrow--center { justify-content: center; }

.display-1, .display-2, .display-3 {
  font-family: var(--display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(2.35rem, 1.1rem + 4.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: 0.035em;
}

.display-2 {
  font-size: clamp(1.85rem, 1.15rem + 2.4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: 0.04em;
}

.display-3 {
  font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* Cinzel has no lowercase personality to speak of; where a heading needs a
   softer voice we drop to Jost rather than fight the face. */
.title-sans {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
  font-weight: 300;
  line-height: 1.66;
  color: var(--text-on-ink-soft);
  max-width: 62ch;
  margin: 26px 0 0;
}
.band--ivory .lede { color: var(--text-on-ivory-soft); }

.prose p { margin: 0 0 1.25em; color: var(--text-on-ink-soft); max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.band--ivory .prose p { color: var(--text-on-ivory-soft); }

.arabic { font-family: var(--arabic); letter-spacing: 0; }

/* Heading beside its own body copy, so a text-only band does not leave half
   the page empty. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: start;
}

.section-head { max-width: 46rem; }
.section-head--center { max-width: 52rem; margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }


/* --------------------------------------------------------------------------
   Buttons — the titanium sweep is the one place metal moves
   -------------------------------------------------------------------------- */

.btn {
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease), background-position 0.7s var(--ease);
}

.btn__arrow { width: 16px; height: 8px; flex: none; overflow: visible; }
.btn__arrow path { stroke: currentColor; stroke-width: 1.2; fill: none; }

.btn--solid {
  color: var(--ink);
  background-image: var(--titanium);
  background-size: 220% 220%;
  background-position: 0% 0%;
}
.btn--solid:hover, .btn--solid:focus-visible { background-position: 100% 100%; }

.btn--ghost {
  color: var(--text-on-ink);
  border-color: rgba(236, 238, 240, 0.32);
  background: transparent;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--ti-1);
  background: rgba(236, 238, 240, 0.07);
}

.band--ivory .btn--ghost { color: var(--ink); border-color: rgba(18, 19, 21, 0.28); }
.band--ivory .btn--ghost:hover { border-color: var(--ink); background: rgba(18, 19, 21, 0.05); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Text link with a rule that draws in from the left */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ti-2);
  padding-bottom: 6px;
  position: relative;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.band--ivory .link { color: var(--label-on-ivory); }


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease),
              backdrop-filter 0.45s var(--ease), height 0.45s var(--ease);
}
.header.is-scrolled {
  height: 66px;
  background: rgba(11, 12, 13, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule-on-ink);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(100% - (var(--pad) * 2), var(--maxw));
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 18px; flex: none; }
/* The arch is drawn (stroked); the plinth is solid — same as the master mark.
   Whole lockup scaled 30% up from its original 25x27 / 0.98rem setting. */
.brand__mark { width: 33px; height: 35px; flex: none; }
.brand__mark path { fill: none; stroke: url(#tiGrad); }
.brand__mark rect { fill: url(#tiGrad); }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-size: 1.27rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--text-on-ink);
}
.brand__sub {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ti-4);
  margin-top: 6px;
}

.nav { display: flex; align-items: center; gap: 34px; }
.nav__link {
  position: relative;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240, 239, 235, 0.74);
  padding-block: 8px;
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--titanium);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover { color: var(--ti-1); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ti-1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.header__cta { padding: 12px 24px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--ti-1);
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* Full-height drawer. Links are set in Cinzel here because at this size the
   face finally has room to behave like the mark it comes from. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) var(--pad) 40px;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-arch);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer__link {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-on-ink);
  color: var(--text-on-ink);
}
.drawer__link[aria-current="page"] { color: var(--ti-2); }
.drawer__foot {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ti-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* --------------------------------------------------------------------------
   Hero — the signature.
   The mark is an arch on a plinth. Here it is built at architectural scale:
   the page dims the photograph, and the arch is the one place you see it
   clearly. Both layers are the same image at the same size, so the aperture
   reads as a window cut through the scrim rather than a second picture.
   -------------------------------------------------------------------------- */

.hero {
  /* Vertical metrics are svh, not vh: vh is the *large* viewport on mobile, so
     with vh the arch is laid out for a screen taller than the one the user is
     actually looking at. The top also clears the fixed header explicitly —
     a short-but-wide laptop is the case a width-only rule always misses. */
  --ap-top: max(calc(var(--header-h) + 3svh), 11svh);
  --ap-bottom: 15svh;
  --ap-h: calc(100svh - var(--ap-top) - var(--ap-bottom));
  --ap-w: clamp(280px, 29vw, 440px);
  --ap-right: 9vw;
  /* The master mark's plinth is 1.19x the arch width and overhangs it evenly
     on both sides. Deriving both from --ap-w keeps them concentric at any
     viewport instead of drifting apart. */
  --plinth-w: calc(var(--ap-w) * 1.19);
  --plinth-right: calc(var(--ap-right) - (var(--ap-w) * 0.095));
  position: relative;
  min-height: 100svh;
  /* The copy sits in normal flow against a floor of padding, rather than being
     absolutely positioned off the bottom edge. Absolute copy grows upwards, so
     on a short viewport (a 16" laptop at 125% scaling is ~760px tall) the
     headline slid up behind the fixed header. In flow it can only push the
     hero taller. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 16px);
  overflow: hidden;
  background: var(--ink-deep);
  isolation: isolate;
}

.hero__bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Sized 100vw x 100svh and pinned to the hero's top-right corner — the same
   box the aperture's copy of the image uses, so the two crops agree. */
.hero__bleed img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: max(100svh, 100%);
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
  filter: brightness(0.34) saturate(0.55) contrast(1.05);
  transform: translate3d(0, calc(var(--scrollY, 0) * 0.06px), 0) scale(1.06);
  transform-origin: center;
}
.hero__bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink-deep) 0%, rgba(11,12,13,0.55) 34%, rgba(11,12,13,0.1) 62%),
    linear-gradient(to right, rgba(11,12,13,0.86) 0%, rgba(11,12,13,0.32) 52%, rgba(11,12,13,0) 78%);
}

/* Height is stated rather than derived from top+bottom, so if the copy ever
   pushes the hero past one screen the arch keeps its proportion instead of
   stretching away from the image inside it. */
.hero__aperture {
  position: absolute;
  z-index: 1;
  top: var(--ap-top);
  height: var(--ap-h);
  right: var(--ap-right);
  width: var(--ap-w);
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(236, 238, 240, 0.26),
    0 50px 130px rgba(0, 0, 0, 0.55);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease-arch) 0.35s;
}
/* Registered to the hero, not to the aperture. Centring this copy on the arch
   (left:50% + translateX(-50%)) pointed it at a different part of the
   photograph than the scrim behind, which is the "second picture" the whole
   device exists to avoid. Backing it out to the hero's right edge by --ap-right
   lands it on exactly the box .hero__bleed img uses. */
.hero__aperture img {
  position: absolute;
  top: calc(-1 * var(--ap-top));
  right: calc(-1 * var(--ap-right));
  width: 100vw;
  height: 100svh;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
  transform: translate3d(0, calc(var(--scrollY, 0) * 0.06px), 0) scale(1.06);
  transform-origin: center;
}
/* The plinth, at the same proportion the mark uses: wider than the arch,
   a shallow bar it appears to stand on. */
.hero__plinth {
  position: absolute;
  z-index: 1;
  right: var(--plinth-right);
  top: calc(var(--ap-top) + var(--ap-h) + 7px);
  width: var(--plinth-w);
  height: 9px;
  border-radius: 3px;
  background: var(--titanium);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-arch);
}

.hero.is-lit .hero__plinth { transform: scaleX(1); }
.hero.is-lit .hero__aperture { clip-path: inset(0 0 0 0); }

.hero__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(56px, 12svh, 150px);
}
.hero__copy .wrap { max-width: min(var(--maxw), 100% - (var(--pad) * 2)); }
/* Capped against the viewport as well as in rems, so the headline never runs
   under the aperture on narrow desktops. */
.hero__inner { max-width: min(44rem, 52vw); }

/* Sized by height as well as width. Width alone picks the 5rem setting on any
   laptop wider than ~1300px, including the short ones, and a 5rem headline
   plus its lede is taller than the room a 760px viewport has left under the
   header. min() lets whichever axis is scarcer do the limiting. */
.hero__title {
  margin: 0;
  font-size: clamp(2.35rem, min(1.1rem + 4.4vw, 0.9rem + 5.6svh), 5rem);
}
.hero__title em {
  font-style: normal;
  background: var(--titanium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  max-width: 40ch;
  font-size: clamp(1rem, min(0.98rem + 0.4vw, 0.72rem + 0.9svh), 1.28rem);
  margin-top: clamp(16px, 2.6svh, 26px);
}
.hero .eyebrow { margin-bottom: clamp(14px, 2.2svh, 22px); }
.hero .btn-row { margin-top: clamp(22px, 4svh, 40px); }

/* Load sequence: plinth, then arch, then the words. */
.hero__step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.hero.is-lit .hero__step { opacity: 1; transform: none; }
.hero.is-lit .hero__step--1 { transition-delay: 0.75s; }
.hero.is-lit .hero__step--2 { transition-delay: 0.9s; }
.hero.is-lit .hero__step--3 { transition-delay: 1.05s; }
.hero.is-lit .hero__step--4 { transition-delay: 1.2s; }

.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 32px;
  left: var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ti-4);
}
.hero__scroll i {
  display: block;
  width: 46px; height: 1px;
  background: linear-gradient(to right, var(--ti-2), transparent);
  animation: scrollHint 2.6s var(--ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleX(0.4); transform-origin: left; opacity: 0.5; }
  50%      { transform: scaleX(1);   transform-origin: left; opacity: 1; }
}

/* Compact interior-page hero, no aperture — the arch stays a home-page event. */
.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 9vw, 118px));
  padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--ink-deep);
  overflow: hidden;
  border-bottom: 1px solid var(--rule-on-ink);
}
.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pagehead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.3) saturate(0.5);
}
.pagehead__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 4%, rgba(11,12,13,0.45) 60%, rgba(11,12,13,0.7) 100%);
}
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead__title { max-width: 20ch; }


/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-on-ink);
  border-bottom: 1px solid var(--rule-on-ink);
}
.stat {
  padding: clamp(28px, 4vw, 46px) clamp(16px, 2.4vw, 32px);
  border-right: 1px solid var(--rule-on-ink);
}
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  background: var(--titanium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ti-4);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Divisions — two bays of one arcade.
   The arch returns here and nowhere else: there are exactly two companies,
   and the pair reads as an arcade rather than as decoration.
   -------------------------------------------------------------------------- */

.bays {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 76px);
}

.bay { display: flex; flex-direction: column; }

/* The plate carries the master mark's own proportion (111 x 138), so a bay is
   the symbol at photographic scale rather than an arbitrary tall rectangle. */
.bay__plate {
  position: relative;
  aspect-ratio: 111 / 138;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--graphite);
  box-shadow: 0 0 0 1px rgba(236, 238, 240, 0.16);
}
/* Keeps the bay number legible over a bright render. */
.bay__plate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 96px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11,12,13,0.55), rgba(11,12,13,0));
}
.bay__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.8);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.bay:hover .bay__plate img { transform: scale(1.05); filter: brightness(1) saturate(0.95); }
.bay__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,13,0.8), rgba(11,12,13,0) 55%);
}
/* Drawn variant: no photograph. The group holds companies, it does not sell
   the renders its studios produce — so a bay carries the company's own mark
   inside a drawn arch, with the mark's second inner line reproduced. */
.bay__plate--drawn {
  display: grid;
  place-items: center;
  /* Squarer than the photo plate: with no image to fill it, the mark's full
     111:138 would leave a lot of empty dark. */
  aspect-ratio: 1 / 1.04;
  background:
    radial-gradient(125% 78% at 50% 0%, rgba(236, 238, 240, 0.11), rgba(236, 238, 240, 0) 62%),
    var(--ink-raised);
  box-shadow: inset 0 0 0 1px rgba(236, 238, 240, 0.2);
}
.bay__plate--drawn::before { display: none; }
.bay__plate--drawn::after {
  content: "";
  position: absolute;
  inset: 11% 14% 0 14%;
  border: 1px solid rgba(236, 238, 240, 0.14);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: none;
}
/* Two classes, so this beats `.bay__plate img` — otherwise the photo rule
   stretches the crest to 100% and crops it with object-fit: cover. */
.bay__plate--drawn .bay__crest {
  position: relative;
  z-index: 1;
  width: min(56%, 200px);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  filter: none;
}
.bay:hover .bay__plate--drawn .bay__crest { transform: none; filter: none; }

.bay__index {
  position: absolute;
  z-index: 2;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: rgba(240, 239, 235, 0.72);
}
.bay__base {
  height: 8px;
  border-radius: 3px;
  background: var(--titanium);
  margin-top: 10px;
}
.bay__body { padding-top: 26px; }
.bay__meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ti-4);
  margin: 0 0 14px;
}
.bay__body p { color: var(--text-on-ink-soft); margin: 0 0 22px; }


/* Two-column split used where a single bay carries a whole section */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.split--flip .split__media { order: 2; }
.split__body .prose { margin-top: 22px; }


/* --------------------------------------------------------------------------
   Capability rows — numbered because the sequence is real: a project moves
   through these four stages in this order.
   -------------------------------------------------------------------------- */

.steps { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule-on-ink); }
.step {
  display: grid;
  grid-template-columns: 76px minmax(0, 15rem) 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(26px, 3.4vw, 42px);
  border-bottom: 1px solid var(--rule-on-ink);
  transition: background-color 0.5s var(--ease);
}
.step:hover { background: rgba(236, 238, 240, 0.025); }
.step__no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ti-4);
  padding-top: 6px;
}
.step__title { margin: 0; }
.step p { margin: 0; color: var(--text-on-ink-soft); }

.band--ivory .steps, .band--ivory .step { border-color: var(--rule-on-ivory); }
/* .step p is defined after .band--ivory p and would otherwise win at equal
   specificity, leaving the descriptions white on ivory. */
.band--ivory .step p { color: var(--text-on-ivory-soft); }
.band--ivory .step:hover { background: rgba(18, 19, 21, 0.03); }
.band--ivory .step__no { color: var(--label-on-ivory); }
.band--ivory .card__kicker { color: var(--label-on-ivory); }
.band--ivory .deflist__row dt { color: var(--label-on-ivory); }


/* --------------------------------------------------------------------------
   Generic card grid (sectors, offices, values, roles)
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px;
  background: var(--rule-on-ink);
  border: 1px solid var(--rule-on-ink);
  margin-top: clamp(40px, 5vw, 64px);
}
.card {
  background: var(--ink);
  padding: clamp(26px, 3vw, 40px);
  transition: background-color 0.5s var(--ease);
}
.card:hover { background: var(--ink-raised); }
.card__kicker {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ti-4);
  display: block;
  margin-bottom: 16px;
}
.card__title { margin: 0 0 12px; }
.card p { margin: 0; color: var(--text-on-ink-soft); font-size: 0.96rem; }
.card__list { margin: 16px 0 0; padding: 0; list-style: none; }
.card__list li {
  padding: 9px 0;
  border-top: 1px solid var(--rule-on-ink);
  font-size: 0.94rem;
  color: var(--text-on-ink-soft);
}

.band--ivory .cards { background: var(--rule-on-ivory); border-color: var(--rule-on-ivory); }
.band--ivory .card { background: var(--ivory); }
.band--ivory .card:hover { background: #E8E6E0; }
.band--ivory .card p, .band--ivory .card__list li { color: var(--text-on-ivory-soft); }
.band--ivory .card__list li { border-top-color: var(--rule-on-ivory); }


/* --------------------------------------------------------------------------
   Founder block
   -------------------------------------------------------------------------- */

/* Role / caption line under a name */
.person__role {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ti-4);
}

.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.founder__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }


/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ti-4);
  margin-bottom: 10px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(236, 238, 240, 0.04);
  border: 1px solid var(--rule-on-ink);
  border-radius: 0;
  color: var(--text-on-ink);
  font-size: 0.96rem;
  font-weight: 300;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--ti-2);
  background: rgba(236, 238, 240, 0.07);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(240, 239, 235, 0.3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.form-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ti-4);
  margin-top: 18px;
  line-height: 1.7;
}

.deflist { margin: 0; }
.deflist__row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-on-ink);
}
.deflist__row dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ti-4);
  padding-top: 3px;
}
.deflist__row dd { margin: 0; color: var(--text-on-ink); }
.deflist__row dd a:hover { color: var(--ti-2); }

/* On ivory the ink-surface defaults would render the values white on white. */
.band--ivory .deflist__row { border-top-color: var(--rule-on-ivory); }
.band--ivory .deflist__row dd { color: var(--text-on-ivory); }
.band--ivory .deflist__row dd a:hover { color: var(--grey); }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--rule-on-ink);
  padding-top: clamp(56px, 7vw, 92px);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 76px);
}
.footer__lockup { display: flex; flex-direction: column; gap: 18px; max-width: 22rem; }
.footer__mark { width: 44px; height: 48px; }
.footer__mark path { fill: none; stroke: url(#tiGradFoot); }
.footer__mark rect { fill: url(#tiGradFoot); }
.footer__name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  margin: 0;
}
/* dir="rtl" keeps the Arabic shaping correct; the block still aligns with the
   Latin lockup above it rather than drifting to the column's right edge. */
.footer__ar {
  font-family: var(--arabic);
  font-size: 0.92rem;
  color: var(--ti-4);
  margin: -6px 0 0;
  text-align: left;
}
.footer__subs {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ti-4);
  line-height: 1.9;
  padding-top: 14px;
  border-top: 1px solid var(--rule-on-ink);
}

.footer__colhead {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ti-2);
  margin: 0 0 20px;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 11px; }
.footer__list a {
  font-size: 0.92rem;
  color: rgba(240, 239, 235, 0.6);
  transition: color 0.35s var(--ease);
}
.footer__list a:hover { color: var(--ti-1); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
  border-top: 1px solid var(--rule-on-ink);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--ti-4);
}


/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nav { gap: 22px; }
  .nav__link { font-size: 0.66rem; letter-spacing: 0.12em; }
}

@media (max-width: 1020px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }

  /* Below the desktop breakpoint the arch cutout is dropped rather than
     reflowed above the words: on a phone the photo is already full-bleed
     behind the text, so a second, smaller copy of it framed in a plate on
     top of that same photo was a redundant, cramped-looking picture-in-
     picture rather than the "window in the scrim" it reads as on desktop.
     Full photo, text over it, is the whole hero at this size. */
  .hero__aperture, .hero__plinth { display: none; }
  .hero {
    justify-content: flex-end;
    padding-top: calc(var(--header-h) + clamp(28px, 8svh, 64px));
  }
  /* Keeps both calls to action inside the first screen on a phone. */
  .hero__title { font-size: clamp(1.85rem, min(1rem + 3.6vw, 0.7rem + 3.4svh), 2.9rem); }
  .hero__lede { font-size: clamp(0.95rem, 0.9rem + 0.2svh, 1.05rem); }
  .hero .btn-row { gap: 10px; }
  .hero__copy { padding-bottom: clamp(36px, 6svh, 72px); }
  .hero__inner { max-width: none; }
  .hero__lede { max-width: none; }
  /* More scrim under the words now that they sit lower on the image. */
  .hero__bleed::after {
    background: linear-gradient(to top, var(--ink-deep) 0%, rgba(11,12,13,0.82) 38%, rgba(11,12,13,0.35) 72%);
  }
  .hero__scroll { display: none; }

  .founder { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 56px 1fr; }
  .step p { grid-column: 2; }
}

@media (max-width: 720px) {
  /* Nothing but the lockup and the burger is left in the bar at this width, so
     the 84px desktop height is just vertical space the hero could be using. */
  :root { --header-h: 68px; }
  .brand { gap: 13px; }
  .brand__mark { width: 28px; height: 30px; }
  .brand__name { font-size: 1.08rem; letter-spacing: 0.22em; }
  .brand__sub { font-size: 0.62rem; letter-spacing: 0.3em; margin-top: 5px; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--rule-on-ink); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }

  .bays { grid-template-columns: 1fr; }
  .bay__plate { aspect-ratio: 4 / 4.2; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .deflist__row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 560px) {
  .btn { width: 100%; justify-content: space-between; }
  .btn-row { flex-direction: column; }
}

/* A phone held sideways, or a desktop window dragged short. The arch is
   already gone at this width; here the headline stands down a size too, so
   the full block still clears the header with room for the button below. */
@media (max-width: 1020px) and (max-height: 540px) {
  .hero { padding-top: calc(var(--header-h) + 14px); }
  .hero__title { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.1rem); }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero__copy { padding-bottom: 32px; }
}


/* --------------------------------------------------------------------------
   Reduced motion — the load sequence resolves instantly, nothing drifts.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .hero__bleed img { transform: scale(1.02); }
  /* Desktop only: below the breakpoint the aperture image is already untransformed. */
  @media (min-width: 1021px) {
    .hero__aperture img { transform: scale(1.02); }
  }
  [data-reveal] { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .drawer, .burger, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
}