/* ==========================================================================
   TRANSCEND — transcend-egypt.com
   Single stylesheet for the whole site.

   HOW THIS FILE IS ORGANISED
   1.  Fonts
   2.  Design tokens (colours, spacing, type scale)
   3.  Base / reset
   4.  Layout helpers
   5.  Typography
   6.  Rules, kickers and the bronze hairline motif
   7.  Header and navigation
   8.  Footer
   9.  Hero (navy)
   10. Track-record numbers
   11. Comparison (the difference)
   12. Method steps, solution lists, disciplines
   13. Case studies
   14. SME 360
   15. Clients (logo wall)
   16. The Bench
   17. Contact
   18. Motion (reveal, reduced-motion)
   19. Responsive adjustments

   Colours are declared once, in section 2. Change them there and they change
   everywhere. Do not introduce a colour that is not in that list.
   ========================================================================== */


/* 1. FONTS ---------------------------------------------------------------- */
/* Inter, self-hosted, so the site does not depend on any third party to render. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. DESIGN TOKENS -------------------------------------------------------- */

:root {
  /* Palette — the only colours used anywhere on this site. */
  --white:    #FFFFFF;
  --navy:     #1B2A4A;
  --grey:     #6E7378;
  --hairline: #D8DCE1;
  --bronze:   #A07C3F;

  /* Derived, for text on navy only. */
  --on-navy-dim: rgba(255, 255, 255, 0.66);
  --hairline-on-navy: rgba(255, 255, 255, 0.16);

  /* Measurements */
  --container: 1200px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --header-h: 80px;

  /* Type scale — decisive. Large things large, small things small. */
  --t-display:  clamp(2.7rem, 6.4vw, 5rem);
  --t-h1:       clamp(2.2rem, 4.8vw, 3.6rem);
  --t-h2:       clamp(1.7rem, 3.2vw, 2.6rem);
  --t-h3:       clamp(1.1rem, 1.7vw, 1.35rem);
  --t-lead:     clamp(1.0625rem, 1.5vw, 1.3125rem);
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-kicker:   0.6875rem;
  --t-monument: clamp(3.25rem, 7.5vw, 6rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 0.72, 0.24, 1);
  --dur: 700ms;
}


/* 3. BASE ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: inherit; }

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

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

/* Skip link for keyboard and screen-reader users. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-small);
}
.skip-link:focus { left: 0; }

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


/* 4. LAYOUT --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A narrower measure for long-form reading. */
.container--tight { max-width: 920px; }

.section { padding-block: var(--section-y); }
.section--top { padding-top: calc(var(--header-h) + var(--section-y)); }
.section--flush-top { padding-top: 0; }
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy .kicker { color: var(--bronze); }
.section--navy p { color: var(--on-navy-dim); }
.section--navy .rule { background: var(--hairline-on-navy); }

/* Hairline dividers. Never boxes, never shadows. */
.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

/* The one repeated motif: a short bronze hairline. */
.rule--bronze {
  width: 44px;
  height: 1px;
  background: var(--bronze);
  border: 0;
  margin: 0 0 1.75rem;
}

/* Asymmetric two-column grid: a narrow label column and a wide content column. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split--wide-left {
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
}


/* 5. TYPOGRAPHY ----------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  color: var(--navy);
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -0.033em;
  line-height: 1.06;
}

.h1 {
  font-size: var(--t-h1);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.h2 {
  font-size: var(--t-h2);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.18;
}

.h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

p {
  margin: 0 0 1.25rem;
  color: var(--grey);
  max-width: 68ch;
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--navy);
  font-weight: 300;
  letter-spacing: -0.011em;
  max-width: 62ch;
}

.small { font-size: var(--t-small); }

.muted { color: var(--grey); }

strong, b { font-weight: 600; color: var(--navy); }
.section--navy strong { color: var(--white); }

/* Plain lists, hairline separated. Never bullets in circles, never icons. */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list > li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--grey);
  font-size: var(--t-small);
  line-height: 1.62;
}
.list > li:first-child { border-top: 0; padding-top: 0; }
.list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 8px;
  height: 1px;
  background: var(--bronze);
}
.list > li:first-child::before { top: 0.7rem; }

/* Unruled variant, for short stacks. */
.list--plain > li { border-top: 0; padding-top: 0.35rem; padding-bottom: 0.35rem; }
.list--plain > li::before { top: 1.05rem; }
.list--plain > li:first-child::before { top: 1.05rem; }


/* 6. KICKERS -------------------------------------------------------------- */

.kicker {
  display: block;
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1.1rem;
  line-height: 1.4;
}

.kicker--grey { color: var(--grey); }

/* Quiet inline link: an underline that draws in, never a colour flash. */
.link {
  text-decoration: none;
  color: var(--navy);
  background-image: linear-gradient(var(--bronze), var(--bronze));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 500ms var(--ease-out);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

.section--navy .link {
  color: var(--white);
  background-image: linear-gradient(var(--bronze), var(--bronze));
}

/* A quiet forward link at the end of a page. */
.onward {
  display: inline-block;
  font-size: var(--t-lead);
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.4rem;
  transition: border-color 500ms var(--ease-out), color 500ms var(--ease-out);
}
.onward:hover, .onward:focus-visible { border-color: var(--bronze); }


/* 7. HEADER --------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 450ms var(--ease-out),
              box-shadow 450ms var(--ease-out),
              backdrop-filter 450ms var(--ease-out);
}

.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity 450ms var(--ease-out);
}

/* Solid state: reached on scroll, and the default on pages without a dark hero. */
.header.is-solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.header.is-solid::after { opacity: 1; }

/* Pages without a dark hero are solid from the first paint, so the header is
   correct even before the JavaScript runs. */
body:not(.has-dark-hero) .header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
body:not(.has-dark-hero) .header::after { opacity: 1; }

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header__mark { display: block; line-height: 0; }
.header__mark img { width: 168px; height: auto; }

/* Two copies of the wordmark: the white one shows over the navy hero, the
   black one after the header turns solid. Only ever one is visible. */
.header__mark .mark-white { display: block; }
.header__mark .mark-black { display: none; }
.header.is-solid .mark-white,
body:not(.has-dark-hero) .header .mark-white { display: none; }
.header.is-solid .mark-black,
body:not(.has-dark-hero) .header .mark-black { display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.4rem);
}

.nav__link {
  font-size: 0.8125rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
  position: relative;
  padding-block: 0.35rem;
  transition: color 400ms var(--ease-out);
}
.header.is-solid .nav__link,
body:not(.has-dark-hero) .nav__link { color: var(--navy); }

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  margin-right: -0.5rem;
  cursor: pointer;
  color: var(--white);
}
.header.is-solid .nav-toggle,
body:not(.has-dark-hero) .nav-toggle { color: var(--navy); }
.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: transform 450ms var(--ease-out), opacity 300ms var(--ease-out);
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 7px; }

/* Full-screen overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-out), visibility 500ms;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-top: 1px solid var(--hairline-on-navy); }
.menu__list li:last-child { border-bottom: 1px solid var(--hairline-on-navy); }
.menu__link {
  display: block;
  padding: 1.05rem 0;
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}
.menu__link[aria-current='page'] { color: var(--bronze); }
.menu__foot {
  margin-top: 2.5rem;
  font-size: var(--t-small);
  color: var(--on-navy-dim);
}
.menu__foot a { color: var(--white); text-decoration: none; }

body.menu-open { overflow: hidden; }


/* 8. FOOTER --------------------------------------------------------------- */

.footer {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.footer__mark img { width: 190px; }

.footer__line {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--white);
  max-width: 18ch;
}

.footer__base {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline-on-navy);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
  color: var(--on-navy-dim);
}
.footer__base a { color: var(--white); text-decoration: none; padding-bottom: 2px; }
.footer__base a:hover { border-bottom: 1px solid var(--bronze); }


/* 9. HERO ----------------------------------------------------------------- */

.hero {
  background: var(--navy);
  color: var(--white);
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
}

.hero__mark {
  width: clamp(200px, 26vw, 320px);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__statement {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -0.033em;
  line-height: 1.07;
  color: var(--white);
  max-width: 17ch;
  margin: 0;
}

.hero__support {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  max-width: 56ch;
  color: var(--on-navy-dim);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.62;
}

.hero__rule {
  width: 44px;
  height: 1px;
  background: var(--bronze);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* Interior page opening — white, quieter than the home hero. */
.pagehead {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.pagehead__intro { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }


/* 10. TRACK RECORD — numbers as monuments -------------------------------- */

.record {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}

.record__item {
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.record__item:nth-child(3n) { border-right: 0; padding-right: 0; }
.record__item:nth-child(3n + 1) { padding-left: 0; }
.record__item:not(:nth-child(3n + 1)) { padding-left: clamp(1rem, 2.5vw, 2rem); }

.record__figure {
  display: block;
  font-size: var(--t-monument);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.record__label {
  display: block;
  margin-top: clamp(0.9rem, 2vw, 1.35rem);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--grey);
  max-width: 26ch;
}

.record__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--t-small);
  color: var(--grey);
}


/* 11. THE DIFFERENCE ------------------------------------------------------ */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.compare__col {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
}
.compare__col + .compare__col {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(2rem, 5vw, 4rem);
}
.compare__col:first-child { padding-right: clamp(2rem, 5vw, 4rem); }

.compare__title {
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}
.compare__col--them .compare__title { color: var(--grey); }
.compare__col--us .compare__title { color: var(--bronze); }

.compare__body {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.008em;
  max-width: 40ch;
}
.compare__col--them .compare__body { color: var(--grey); }
.compare__col--us .compare__body { color: var(--navy); }


/* 12. METHOD, SOLUTIONS, DISCIPLINES ------------------------------------- */

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--hairline);
}
.step:last-of-type { border-bottom: 1px solid var(--hairline); }

.step__index {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bronze);
  font-variant-numeric: tabular-nums lining-nums;
}

.step__title { margin-bottom: 0.85rem; }

/* Two-column definition rows, hairline separated. */
.deflist { border-top: 1px solid var(--hairline); }

.defrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(0.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.35rem, 2.6vw, 1.85rem);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.defrow__term {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--navy);
  line-height: 1.35;
}
.defrow__desc {
  color: var(--grey);
  font-size: var(--t-small);
  line-height: 1.65;
  margin: 0;
  max-width: 52ch;
}

/* A plain wrapped list of names, hairline separated. */
.namegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--hairline);
}
.namegrid > * {
  padding-block: clamp(1rem, 2vw, 1.3rem);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-small);
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}


/* 13. CASE STUDIES -------------------------------------------------------- */

.case {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}

.case__meta {
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
}

.case__sector {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.case__period {
  font-size: var(--t-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
}

.case__block + .case__block { margin-top: clamp(2rem, 4vw, 3rem); }

.case__blocktitle {
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1.25rem;
}

/* The outcome, pulled out. Type does the work; no box, no tint. */
.case__result {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--bronze);
}
.case__result p {
  color: var(--navy);
  font-size: clamp(1.1875rem, 2.1vw, 1.625rem);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.34;
  max-width: 40ch;
  margin: 0;
}


/* 14. SME 360 ------------------------------------------------------------- */

.mechanism {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.mechanism__item {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.mechanism__item:last-child { border-right: 0; padding-right: 0; }
.mechanism__item:not(:first-child) { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.mechanism__term {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 300;
  letter-spacing: -0.024em;
  color: var(--navy);
  margin: 0 0 1.1rem;
  line-height: 1.15;
}
.mechanism__item p { font-size: var(--t-small); line-height: 1.65; }

.pillar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.pillar__item {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pillar__item:last-child { border-right: 0; padding-right: 0; }
.pillar__item:not(:first-child) { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.pillar__numeral {
  display: block;
  font-size: var(--t-kicker);
  letter-spacing: 0.18em;
  color: var(--bronze);
  font-weight: 500;
  margin-bottom: 1rem;
}
.pillar__item h3 { margin-bottom: 0.75rem; }
.pillar__item p { font-size: var(--t-small); line-height: 1.65; }


/* 15. CLIENTS — logo wall ------------------------------------------------- */

/* Twenty-one marks in one grid. Three columns divides them into seven whole
   rows, so no row is ever left short. Below 600px the grid drops to two
   columns for legibility and the final cell spans the width, which keeps the
   last row deliberate rather than leaving one mark stranded. */

.logowall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.logowall__cell {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 2.4vw, 2.25rem);
  min-width: 0;
}

/* Optical sizing.
   Logos are not forced to a common width or a common height: each one is
   given its own frame width, set inline as --logo-w, so that the amount of
   ink on the page is roughly equal from mark to mark. A wide wordmark gets a
   wide frame, a solid block gets a narrow one. The image then fits inside its
   frame on whichever axis binds first, so nothing is ever stretched. */

.logowall__frame {
  width: var(--logo-w, 58%);
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Greyscale correction.
   Draining the colour out of a logo does not treat every logo equally. A red
   or navy mark turns dark grey and reads as well as it ever did. A gold mark,
   a bright green one, or white type reversed out of pale teal all turn into
   something close to the page itself, and the mark stops reading.

   Seven marks were measured as losing definition when desaturated. Each of
   those carries its own correction, set inline beside its width:

     --logo-brightness   multiplies every tone
     --logo-contrast     stretches the tones back apart
     --logo-rest-opacity lifts the mark out of the general softening

   The contrast value is always 0.5 / (brightness - 0.5). That pairing is what
   makes the correction safe: it holds pure white at pure white and pure black
   at pure black, and pulls down only the tones in between. So a logo sitting
   on its own white background never grows a visible grey box, and type
   reversed out of a block stays white while the block behind it darkens.

   Everything in the chain is a filter function the browser can interpolate,
   and the hover state lists the same three functions, so the fade back to
   full colour still animates rather than snapping. */

.logowall__frame img {
  width: 100%;
  height: 100%;
  /* Fits inside the frame on whichever axis binds first. The mark always
     reaches its intended width unless the cell height stops it, and it is
     never stretched in either direction. */
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%)
          brightness(var(--logo-brightness, 1))
          contrast(var(--logo-contrast, 1));
  opacity: var(--logo-rest-opacity, 0.88);
  transition: filter 550ms var(--ease-out), opacity 550ms var(--ease-out);
}

.logowall__cell:hover .logowall__frame img {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 1;
}

@media (max-width: 599px) {
  /* Two columns, so each mark stays readable on a phone. Twenty-one marks
     leave one over, so the last cell takes the full width and its frame is
     halved, which keeps that mark the same size as every other one. */
  .logowall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logowall__cell:last-child { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
  .logowall__cell:last-child .logowall__frame { width: calc(var(--logo-w, 58%) / 2.3); }
}


/* 16. THE BENCH ----------------------------------------------------------- */

.principal {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.principal__portrait {
  margin: 0;
  width: 100%;
  max-width: 340px;
}
.principal__portrait img { width: 100%; }
.principal__caption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--grey);
}

.principal__name {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.principal__role {
  font-size: var(--t-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 500;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  display: block;
}

.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(1.25rem, 5vw, 4.5rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--hairline);
  align-items: start;
}

/* Bench portraits.
   Cut-out figures standing directly on the page: no frame, no shadow, no
   circular crop, nothing behind them. They are drawn at 150px against the
   principal's 340px, and all five were scaled to a common head size and
   matched to one tonal range, so the row reads as a single set and stays
   quieter than the principal above it. */
.profile__portrait {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 clamp(1.25rem, 2.4vw, 1.75rem);
}
.profile:last-of-type { border-bottom: 1px solid var(--hairline); }

.profile__name {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 0.45rem;
}
.profile__role {
  font-size: 0.8125rem;
  color: var(--grey);
  line-height: 1.5;
}
.profile__body p { font-size: var(--t-small); line-height: 1.72; }
.profile__body p + p { margin-top: 1.1rem; }


/* 17. CONTACT ------------------------------------------------------------- */

.contact__email {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.026em;
  color: var(--navy);
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.35rem;
  transition: border-color 500ms var(--ease-out);
  word-break: break-word;
}
.contact__email:hover, .contact__email:focus-visible { border-color: var(--bronze); }

.contact__meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--t-small);
  color: var(--grey);
}


/* 18. MOTION -------------------------------------------------------------- */

/* Content rises gently into place. Short distance, slow, ease-out. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* No JavaScript: show everything immediately. */
.no-js .reveal { opacity: 1; transform: none; }

@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;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* 19. RESPONSIVE ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record__item:nth-child(3n) { border-right: 1px solid var(--hairline); padding-right: clamp(1rem, 2.5vw, 2rem); }
  .record__item:nth-child(3n + 1) { padding-left: clamp(1rem, 2.5vw, 2rem); }
  .record__item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .record__item:nth-child(2n + 1) { padding-left: 0; }

  .pillar { grid-template-columns: minmax(0, 1fr); }
  .pillar__item { border-right: 0; padding-right: 0; padding-left: 0; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .header__mark img { width: 138px; }

  .nav { display: none; }
  .nav-toggle { display: block; }

  .split,
  .split--even,
  .split--wide-left { grid-template-columns: minmax(0, 1fr); }

  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__col:first-child { padding-right: 0; padding-bottom: clamp(2rem, 5vw, 3rem); }
  .compare__col + .compare__col {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
  }

  .mechanism { grid-template-columns: minmax(0, 1fr); }
  .mechanism__item { border-right: 0; padding-right: 0; padding-left: 0; }

  .step { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }

  .defrow { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }

  .case__grid { grid-template-columns: minmax(0, 1fr); }
  .case__meta { position: static; }

  .principal { grid-template-columns: minmax(0, 1fr); }
  .principal__portrait { max-width: 260px; }

  .profile { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  /* The principal portrait shrinks here, so the bench shrinks with it and the
     gap between them stays the same as it is on a desktop. */
  .profile__portrait { width: 120px; }
}

@media (max-width: 560px) {
  :root {
    --t-body: 1rem;
    --gutter: 1.375rem;
  }

  .record { grid-template-columns: minmax(0, 1fr); }
  .record__item {
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero { min-height: auto; }
  .hero__statement { max-width: 100%; }

  .footer__base { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}


/* 20. SMALL UTILITIES ----------------------------------------------------- */
/* A short, deliberately tiny set. Everything else belongs to a component. */

.section--continued { padding-top: 0; }      /* a section that follows another */
.u-mt   { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.u-mt-s { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.u-mb-0 { margin-bottom: 0; }
.note   { margin-top: 1.75rem; color: var(--grey); }

/* The closing cell of the track-record grid carries a line, not a figure. */
.record__item--note {
  display: flex;
  align-items: flex-end;
}
.record__statement {
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--navy);
  margin: 0;
  max-width: 20ch;
}

/* On the home page the wordmark already stands large in the hero, so the
   header mark stays out of the way until the header turns solid. */
body.has-dark-hero .header:not(.is-solid) .header__mark {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
body.has-dark-hero .header .header__mark {
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
body.has-dark-hero .header:not(.is-solid) .header__mark:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Currency and scale words sit beside the figure at a fraction of its size,
   so a long value such as EGP 1.5 Bn keeps the monument scale of a bare 13. */
.record__unit {
  font-size: 0.34em;
  letter-spacing: 0.02em;
  color: var(--grey);
  font-weight: 400;
}
.record__unit:first-child { margin-right: 0.18em; }
.record__unit:last-child  { margin-left: 0.18em; }

/* A plain block of running prose, held to a comfortable measure. */
.prose { max-width: 72ch; }


/* 21. MENU-OPEN STATE ----------------------------------------------------- */
/* While the full-screen menu is open the header sits on navy, so it drops its
   solid background and switches to the white mark. The two bars close to an X. */

body.menu-open .header,
body.menu-open .header.is-solid {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-open .header::after { opacity: 0; }

body.menu-open .header .mark-white { display: block; opacity: 1; }
body.menu-open .header .mark-black { display: none; }
body.menu-open .header .header__mark { opacity: 1; pointer-events: auto; transform: none; }

body.menu-open .nav-toggle { color: var(--white); }

.nav-toggle__bar { transform-origin: center; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:first-child {
  transform: translateY(4px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}