/* =========================================================================
   MAJESTY MULTIPURPOSE CO. LTD - WEBSITE STYLESHEET (v2 - Editorial)
   =========================================================================
   Tone reference: arup.com — minimal, editorial, generous whitespace,
   massive but quiet typography, hairline rules, full-bleed images,
   text-link CTAs over heavy buttons. Brand blue used sparingly as accent.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* --- Brand --------------------------------------------------------- */
  --majesty-blue:        #1B4F8C;
  --majesty-blue-dark:   #143E72;

  /* --- Neutrals (a tight, almost-monochrome palette) ----------------- */
  --ink:        #0A0A0A;     /* primary text, true near-black */
  --ink-soft:   #4B4B4B;     /* secondary copy */
  --ink-mute:   #6B7280;     /* captions */
  --line:       #E5E5E5;     /* hairline rules */
  --line-soft:  #F0F0F0;     /* lighter dividers */
  --paper:      #FFFFFF;     /* page background */
  --paper-2:    #FAFAFA;     /* very subtle band */
  --black:      #000000;     /* dark sections */

  /* --- Typography ---------------------------------------------------- */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout -------------------------------------------------------- */
  --container: 1320px;
  --gutter: 32px;

  /* --- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  300ms;
}


/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
a:hover { color: var(--majesty-blue); }

/* --- Display typography -------------------------------------------- */
/* Note: editorial scale. Headings are LARGE but not bold — weight 400/500
   with tight letter-spacing creates the refined, confident feel. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
}

h1 {
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 400;
  letter-spacing: -.03em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -.025em;
}
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0; color: var(--ink-soft); }


/* -------------------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Editorial section spacing — generous on purpose. */
.section          { padding: 140px 0; }
.section--tight   { padding: 96px 0; }
.section--alt     { background: var(--paper-2); }
.section--dark    { background: var(--black); color: rgba(255,255,255,.85); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark p  { color: rgba(255,255,255,.7); }

/* Hairline divider — used above section labels to mimic arup's signature
   horizontal rule treatment. */
.hairline {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  margin-bottom: 28px;
}
.section--dark .hairline { background: rgba(255,255,255,.4); }

/* Eyebrow / label — small, all-caps, hairline above. */
.label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: 8px;
}
.label--mute { color: var(--ink-mute); }

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.005em;
}

/* Subtle text-link CTA: replaces chunky buttons throughout the site. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { gap: 20px; color: var(--majesty-blue); border-bottom-color: var(--majesty-blue); }
.link--light { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.link--light:hover { color: #fff; border-bottom-color: #fff; }
.link__arrow { font-size: 1.1rem; line-height: 1; }

/* Ghost button — used very sparingly. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-weight: 500;
  font-size: .98rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border-radius: 0; /* squared, editorial */
}
.btn:hover {
  background: var(--ink);
  color: #fff;
}
.btn--primary {
  background: var(--ink);
  color: #fff;
}
.btn--primary:hover {
  background: transparent;
  color: var(--ink);
}
.btn--light {
  border-color: #fff;
  color: #fff;
}
.btn--light:hover {
  background: #fff;
  color: var(--ink);
}


/* -------------------------------------------------------------------------
   4. HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
/* Defaults to TRANSPARENT over hero images — JS toggles .is-solid on scroll. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px 0;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: var(--line);
}
/* Internal pages don't sit over a dark hero — start solid by default. */
.site-header.is-solid-default {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand: minimal wordmark — no boxed icon. The crown SVG sits inline. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: inherit;
}
.brand__mark {
  width: 28px; height: 28px;
  color: var(--majesty-blue);
  display: grid; place-items: center;
}
.brand__mark svg { width: 28px; height: 28px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text small {
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* On dark/transparent header (homepage hero), brand + links + CTA flip white. */
.site-header:not(.is-solid):not(.is-solid-default) .brand,
.site-header:not(.is-solid):not(.is-solid-default) .nav__links a,
.site-header:not(.is-solid):not(.is-solid-default) .nav__cta .link {
  color: #fff;
}
.site-header:not(.is-solid):not(.is-solid-default) .brand__text small {
  color: rgba(255,255,255,.7);
}
.site-header:not(.is-solid):not(.is-solid-default) .brand__mark {
  color: #fff;
}

.nav__links {
  list-style: none;
  display: flex;
  gap: 36px;
  margin: 0; padding: 0;
}
.nav__links a {
  font-size: .95rem;
  font-weight: 500;
  position: relative;
  transition: opacity var(--dur) var(--ease);
}
.nav__links a:hover { opacity: .6; }
.nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__cta .link {
  font-size: .9rem;
  border: none;
  padding: 0;
}

/* -------------------------------------------------------------------------
   4b. MEGA MENU (Capabilities dropdown)
   Full-width drawer that drops down below the header, populated by JS so
   the 9-capability list lives in one place rather than 14 HTML files.
   ------------------------------------------------------------------------- */

/* The host <li>: position:static so the absolutely-positioned mega panel
   anchors to the fixed header rather than this small element. */
.nav__item--has-mega { position: static; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__chevron {
  font-size: .65rem;
  transition: transform 240ms var(--ease);
  display: inline-block;
  line-height: 1;
}
.nav__item--has-mega.is-open .nav__chevron { transform: rotate(180deg); }

/* The drawer itself */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 64px;

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 240ms var(--ease),
              visibility 240ms var(--ease),
              transform 240ms var(--ease);
}
.nav__item--has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Ensure menu content is dark even if header is transparent (home hero). */
.mega-menu, .mega-menu a, .mega-menu span { color: var(--ink); }

.mega-menu__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.mega-menu__label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-mute);
  padding-top: 16px;
  border-top: 1px solid var(--ink);
  display: inline-block;
}
.mega-menu__view-all {
  font-size: .95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega-menu__view-all:hover {
  gap: 18px;
  color: var(--majesty-blue);
  border-bottom-color: var(--majesty-blue);
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.mega-menu__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 32px 22px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left 220ms var(--ease), color 220ms var(--ease);
}
.mega-menu__item:nth-child(3n)   { border-right: none; padding-right: 0; }
.mega-menu__item:nth-child(3n+1) { padding-left: 0; }
.mega-menu__item:nth-child(3n+2) { padding-left: 32px; padding-right: 32px; }
.mega-menu__item:hover {
  padding-left: 12px;
  color: var(--majesty-blue);
}
.mega-menu__item:nth-child(3n+2):hover { padding-left: 44px; }

.mega-menu__num {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  flex-shrink: 0;
  min-width: 24px;
}
.mega-menu__name {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.015em;
  flex: 1;
}
.mega-menu__arrow {
  color: var(--ink-mute);
  font-size: .95rem;
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.mega-menu__item:hover .mega-menu__arrow {
  color: var(--majesty-blue);
  transform: translateX(4px);
}

/* When the mega menu is open over the transparent home hero, force the
   header to its solid state so the white panel doesn't sit awkwardly under
   transparent nav text. (JS adds .is-solid via updateHeaderState.) */

/* Mobile (≤640px): mega menu replaced by a simple inline link in the
   hamburger drawer. JS skips populating it in mobile if needed. */
@media (max-width: 640px) {
  .mega-menu { display: none; }
  .nav__chevron { display: none; }
}

@media (max-width: 1024px) {
  .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
  .mega-menu__item:nth-child(3n)   { border-right: 1px solid var(--line); padding-right: 32px; }
  .mega-menu__item:nth-child(3n+1) { padding-left: 0; padding-right: 32px; }
  .mega-menu__item:nth-child(3n+2) { padding-left: 32px; padding-right: 32px; }
  .mega-menu__item:nth-child(2n)   { border-right: none; padding-right: 0; }
  .mega-menu__item:nth-child(2n+1) { padding-left: 0; padding-right: 32px; }
  .mega-menu__item:nth-child(3n+2):hover { padding-left: 32px; }
  .mega-menu__item:nth-child(2n):hover { padding-left: 12px; }
}


/* Mobile menu toggle */
.nav__toggle {
  display: none;
  background: transparent;
  border: none;
  width: 32px; height: 32px;
  padding: 0; cursor: pointer;
  color: inherit;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block; content: '';
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  margin: 0 auto;
}
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after  { position: absolute; top:  7px; }


/* -------------------------------------------------------------------------
   5. FULL-BLEED HERO (homepage)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  padding-bottom: 80px;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Gradient overlay so type stays legible over photography. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,0,.35) 0%,
              rgba(0,0,0,.15) 40%,
              rgba(0,0,0,.7) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero__title {
  /* Halved from previous clamp(2.6rem, 7vw, 6.4rem) per request.
     Hero section itself stays min-height: 100vh — only the title scale changed. */
  font-size: clamp(1.3rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 24ch;
  color: #fff;
  margin-bottom: 32px;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,.85);
}
.hero__lead {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  max-width: 520px;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  margin-bottom: 40px;
}
.hero__cta {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* Tiny scroll-cue at bottom of hero */
.hero__cue {
  position: absolute;
  right: var(--gutter); bottom: 32px;
  z-index: 1;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 10px;
}
.hero__cue::after {
  content: '';
  width: 1px; height: 28px;
  background: rgba(255,255,255,.4);
}


/* -------------------------------------------------------------------------
   6. PAGE HEADER (sub-pages — quieter than the homepage hero)
   ------------------------------------------------------------------------- */
.page-hero {
  padding: 200px 0 100px;
  border-bottom: 1px solid var(--line);
}
.page-hero__crumb {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.page-hero h1 {
  max-width: 16ch;
  margin-bottom: 32px;
}
.page-hero p {
  max-width: 60ch;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-soft);
}


/* -------------------------------------------------------------------------
   7. EDITORIAL TWO-COLUMN BLOCK (label + body)
   Common arup pattern: a small label/heading on left, large copy on right.
   ------------------------------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.editorial__heading h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -.02em;
  font-weight: 500;
  max-width: 14ch;
}
.editorial__body p {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 24px;
}
.editorial__body p + p { color: var(--ink-soft); }


/* -------------------------------------------------------------------------
   8. CAPABILITIES (text-led grid, no boxes)
   ------------------------------------------------------------------------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.cap {
  /* All cards share the same internal padding and right divider so the third
     column doesn't sit flush with the container edge. */
  padding: 40px 32px 56px 32px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
  transition: background var(--dur) var(--ease);
}
/* First column hugs the left edge of the container with no inner padding. */
.cap:nth-child(3n+1) { padding-left: 0; }
.cap:hover { background: var(--paper-2); }

.cap__num {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-bottom: 16px;
  font-weight: 500;
}
.cap h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -.015em;
}
.cap p {
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.cap__link {
  font-size: .9rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
}
.cap__link:hover { color: var(--majesty-blue); gap: 14px; }


/* -------------------------------------------------------------------------
   9. FEATURED PROJECT (full-bleed editorial moment)
   ------------------------------------------------------------------------- */
.feature {
  position: relative;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
  color: #fff;
}
.feature__img {
  position: absolute; inset: 0;
}
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.feature__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
              rgba(0,0,0,.55) 0%,
              rgba(0,0,0,.15) 60%,
              rgba(0,0,0,.45) 100%);
}
.feature__content {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; align-items: flex-end;
  padding: 80px 0;
}
.feature__content .container { width: 100%; }
.feature__label {
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.8);
  margin-bottom: 16px;
  display: block;
}
.feature h2 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  color: #fff;
  font-weight: 400;
  letter-spacing: -.025em;
  max-width: 16ch;
  margin-bottom: 24px;
}
.feature p {
  color: rgba(255,255,255,.85);
  max-width: 50ch;
  font-size: 1.1rem;
  margin-bottom: 32px;
}


/* -------------------------------------------------------------------------
   10. PROJECT GRID (minimal cards — image + caption + title)
   ------------------------------------------------------------------------- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.proj {
  display: block;
  color: var(--ink);
}
.proj__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--paper-2);
}
.proj__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.proj:hover .proj__img img { transform: scale(1.04); }
.proj__meta {
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.proj__title {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin-bottom: 8px;
}
.proj__detail {
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}


/* -------------------------------------------------------------------------
   11. NUMBERS (massive figures, small labels)
   ------------------------------------------------------------------------- */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.number {
  padding: 56px 24px 56px 0;
  border-right: 1px solid var(--line);
}
.number:last-child { border-right: none; padding-right: 0; }
.number:not(:first-child) { padding-left: 24px; }
.number__value {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 16px;
}
.number__label {
  font-size: .9rem;
  color: var(--ink-mute);
  line-height: 1.4;
  max-width: 22ch;
}


/* -------------------------------------------------------------------------
   12. SECTION HEADERS (label + heading + lead)
   ------------------------------------------------------------------------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  margin-bottom: 80px;
  align-items: end;
}
.section-head__label {
  font-size: .8rem;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--ink-mute);
  padding-top: 16px;
  border-top: 1px solid var(--ink);
  display: inline-block;
}
.section-head__title h2 {
  margin-bottom: 24px;
  max-width: 18ch;
}
.section-head__title p {
  font-size: 1.15rem;
  max-width: 60ch;
  color: var(--ink-soft);
}


/* -------------------------------------------------------------------------
   13. SERVICE BLOCKS (services page)
   ------------------------------------------------------------------------- */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 120px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc:nth-child(even) > .svc__img { order: 2; }

.svc__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.svc__img img { width: 100%; height: 100%; object-fit: cover; }

.svc__num {
  font-size: .85rem;
  font-weight: 500;
  color: var(--majesty-blue);
  letter-spacing: .04em;
  margin-bottom: 24px;
}
.svc h2 { margin-bottom: 24px; max-width: 16ch; }
.svc p { font-size: 1.1rem; line-height: 1.55; margin-bottom: 28px; }

.svc__list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.svc__list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.svc__list li::before {
  content: counter(svc-counter, decimal-leading-zero);
  counter-increment: svc-counter;
  font-size: .8rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.svc__list { counter-reset: svc-counter; }


/* -------------------------------------------------------------------------
   14. TEAM (about page) — portrait + name, no boxes
   ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.team {
  display: block;
}
.team__avatar {
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  margin-bottom: 20px;
  display: grid; place-items: center;
  font-size: 2rem;
  font-weight: 400;
  color: var(--majesty-blue);
  letter-spacing: -.02em;
  border: 1px solid var(--line);
}
.team h3 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.team__role {
  font-size: .9rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}


/* -------------------------------------------------------------------------
   15. REGIONS (long table-like list, no boxes)
   ------------------------------------------------------------------------- */
.region-list {
  border-top: 1px solid var(--ink);
}
.region-row {
  display: grid;
  grid-template-columns: 80px 200px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background var(--dur) var(--ease);
}
.region-row:hover { background: var(--paper-2); }
.region-row__num {
  font-size: .85rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.region-row__country {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.region-row__detail {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
}


/* -------------------------------------------------------------------------
   16. PROJECT INDEX TABLE (projects page — clean editorial table)
   ------------------------------------------------------------------------- */
.proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
}
.proj-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
}
.proj-table tbody td {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}
.proj-table tbody td:first-child {
  font-weight: 500;
  color: var(--ink);
  font-size: 1.1rem;
  letter-spacing: -.01em;
}


/* -------------------------------------------------------------------------
   17. CONTACT (editorial split)
   ------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
}
.contact__info dt {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-top: 32px;
  font-weight: 500;
}
.contact__info dt:first-child { margin-top: 0; }
.contact__info dd {
  margin: 8px 0 0;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -.01em;
}
.contact__info dd a:hover { color: var(--majesty-blue); }

.form { display: grid; gap: 32px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  transition: border var(--dur) var(--ease);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.form textarea { min-height: 120px; resize: vertical; }
.form__status {
  display: none;
  padding: 16px 0;
  border-top: 1px solid var(--majesty-blue);
  color: var(--majesty-blue);
  font-size: .95rem;
}


/* -------------------------------------------------------------------------
   18. CTA STRIP (subtle, centered)
   ------------------------------------------------------------------------- */
.cta-strip {
  padding: 120px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta-strip h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: 32px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-strip p {
  max-width: 50ch;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  color: var(--ink-soft);
}


/* -------------------------------------------------------------------------
   19. FOOTER (clean, multi-column on dark)
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,.7);
  padding: 100px 0 40px;
}
.site-footer h4 {
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 24px;
}
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 14px; font-size: .98rem; }

.site-footer .brand { color: #fff; margin-bottom: 32px; }
.site-footer .brand small { color: rgba(255,255,255,.5); }
.site-footer .brand__mark { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap;
  gap: 12px;
}


/* -------------------------------------------------------------------------
   19b. CAPABILITY DETAIL PAGES
   Image-backed hero, numbered scope items, cross-links to siblings.
   ------------------------------------------------------------------------- */

/* --- Image-backed page header for individual capability pages -------- */
.cap-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  padding: 200px 0 80px;
}
.cap-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cap-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.cap-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,0,.45) 0%,
              rgba(0,0,0,.25) 40%,
              rgba(0,0,0,.7) 100%);
}
.cap-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.cap-hero__num {
  font-size: .85rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.8);
  display: block;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.6);
  width: fit-content;
}
.cap-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -.025em;
  margin-bottom: 24px;
  max-width: 18ch;
}
.cap-hero p {
  color: rgba(255,255,255,.85);
  max-width: 56ch;
  font-size: 1.15rem;
  line-height: 1.5;
}

/* --- Detailed scope grid (numbered sub-services) --------------------- */
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
}
.scope-item {
  padding: 40px 32px 56px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.scope-item:nth-child(even) { padding-left: 32px; padding-right: 0; border-right: none; }

.scope-item__num {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.scope-item h3 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -.015em;
}
.scope-item p {
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* --- Cross-links to other capabilities (compact list) ---------------- */
.cross-links {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cross-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cross-link:nth-child(odd)  { padding-right: 32px; border-right: 1px solid var(--line); }
.cross-link:nth-child(even) { padding-left: 32px; }
.cross-link:hover { padding-left: 8px; color: var(--majesty-blue); }
.cross-link:nth-child(even):hover { padding-left: 40px; }
.cross-link__num {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  flex-shrink: 0;
  margin-right: 16px;
}
.cross-link__name {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.015em;
  flex: 1;
}
.cross-link__arrow { font-size: 1rem; color: var(--ink-mute); }
.cross-link:hover .cross-link__arrow { color: var(--majesty-blue); }

@media (max-width: 1024px) {
  .scope-grid { grid-template-columns: 1fr; }
  .scope-item, .scope-item:nth-child(even) {
    padding: 32px 0;
    border-right: none;
  }
  .cross-links { grid-template-columns: 1fr; }
  .cross-link, .cross-link:nth-child(odd), .cross-link:nth-child(even) {
    padding: 24px 0;
    border-right: none;
  }
  .cap-hero { min-height: 60vh; padding: 160px 0 64px; }
}


/* -------------------------------------------------------------------------
   19c. PROJECT DETAIL PAGES
   Reuses .cap-hero for the image-backed hero. Adds project-info bar,
   image gallery, and other-projects grid.
   ------------------------------------------------------------------------- */

/* Project info bar — Location / Country / Year / Scope as a clean strip */
.proj-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 80px;
}
.proj-info__cell {
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--line);
}
.proj-info__cell:last-child { border-right: none; padding-right: 0; }
.proj-info__cell:not(:first-child) { padding-left: 24px; }
.proj-info__label {
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
  text-transform: uppercase;
}
.proj-info__value {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.3;
}

/* Asymmetric gallery — first image is full-width, then a 2-up grid */
.proj-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.proj-gallery__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}
.proj-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.proj-gallery__item:hover img { transform: scale(1.03); }
.proj-gallery__item--wide {
  grid-column: span 2;
  aspect-ratio: 21 / 9;
}

/* Other projects grid (bottom of project pages) — minimal 3-up */
.other-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding-top: 32px;
}
.other-proj {
  display: block;
  color: var(--ink);
}
.other-proj__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--paper-2);
}
.other-proj__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.other-proj:hover .other-proj__img img { transform: scale(1.04); }
.other-proj__meta {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.other-proj__title {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.015em;
}

@media (max-width: 1024px) {
  .proj-info { grid-template-columns: 1fr 1fr; }
  .proj-info__cell:nth-child(2) { border-right: none; padding-right: 0; }
  .proj-info__cell:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .proj-info__cell:nth-child(3),
  .proj-info__cell:nth-child(4) {
    border-top: 1px solid var(--line);
    padding-top: 32px;
  }
  .proj-info__cell:nth-child(4) { padding-left: 24px; }
  .proj-gallery__item--wide { aspect-ratio: 16 / 9; }
  .other-projects { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .proj-info { grid-template-columns: 1fr; }
  .proj-info__cell {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 0 !important;
  }
  .proj-info__cell:last-child { border-bottom: none; }
  .proj-gallery { grid-template-columns: 1fr; }
  .proj-gallery__item--wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .other-projects { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
   20. ANIMATIONS (subtle reveal on scroll)
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* -------------------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section { padding: 96px 0; }
  .editorial { grid-template-columns: 1fr; gap: 32px; }
  .editorial__heading h2 { max-width: 100%; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap:nth-child(3n) { border-right: 1px solid var(--line); padding-right: 32px; }
  .cap:nth-child(2n) { border-right: none; padding-right: 0; }
  .cap:nth-child(2n+1) { padding-left: 0; padding-right: 32px; }
  .cap:nth-child(2n) { padding-left: 32px; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .number:nth-child(2n) { border-right: none; }
  .section-head { grid-template-columns: 1fr; gap: 32px; }
  .svc { grid-template-columns: 1fr; gap: 40px; padding: 80px 0; }
  .svc:nth-child(even) > .svc__img { order: 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .region-row { grid-template-columns: 60px 160px 1fr; gap: 24px; }
  .contact { grid-template-columns: 1fr; gap: 64px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .page-hero { padding: 160px 0 80px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .nav__links { display: none; }
  .nav__cta .link { display: none; }
  .nav__toggle { display: block; }
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: #fff;
    padding: 32px var(--gutter);
    border-bottom: 1px solid var(--line);
    gap: 24px;
    color: var(--ink);
  }
  .nav__links.is-open a { color: var(--ink); font-size: 1.4rem; }

  .hero { min-height: 92vh; padding-bottom: 56px; }
  .hero__title { margin-bottom: 24px; }

  .cap-grid { grid-template-columns: 1fr; }
  .cap, .cap:nth-child(n) {
    border-right: none !important;
    padding: 32px 0 !important;
  }

  .proj-grid { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr; }
  .number, .number:not(:first-child) {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 32px 0;
  }
  .number:last-child { border-bottom: none; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .region-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .form__row { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .proj-table { font-size: .9rem; }
  .proj-table thead { display: none; }
  .proj-table, .proj-table tbody, .proj-table tr, .proj-table td { display: block; width: 100%; }
  .proj-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .proj-table tbody td { padding: 4px 0; border: none; }
  .proj-table tbody td:first-child { font-size: 1.1rem; margin-bottom: 6px; }
}