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

:root {
  --ink: #151821;
  --charcoal: #20242d;
  --midnight: #11151d;
  --sand: #e6e8eb;
  --bronze: #4168a6;
  --warm: #f5f6f7;
  --white: #ffffff;
  --muted: #646464;
  --line: rgba(21, 24, 33, .13);
  --dark-line: rgba(255, 255, 255, .12);
  --shadow: 0 24px 80px rgba(17, 17, 15, .16);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Manrope", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #f5f6f7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.75; }
/* The reset zeroes all margins, so consecutive paragraphs need separating. */
p + p { margin-top: 18px; }

body.menu-open { overflow: hidden; }

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 64px);
  background: rgba(245, 246, 247, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(21, 24, 33, .08);
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img { width: 156px; height: 58px; object-fit: cover; object-position: center; }
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}

.nav-item { position: relative; }

.nav-links a {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: var(--bronze);
  transition: width .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 210px;
  padding: 14px 0;
  background: rgba(245, 246, 247, .98);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(15, 15, 15, .14);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown a {
  display: block;
  padding: 13px 20px;
  color: var(--ink);
  white-space: nowrap;
}

.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { color: var(--bronze); }

.nav-cta {
  padding: 12px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}

.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger span { width: 20px; height: 1px; background: var(--ink); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: var(--ink);
  color: var(--white);
}

.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 17px 0;
  font-size: clamp(28px, 9vw, 54px);
  font-weight: 700;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--dark-line);
}

.mobile-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dark-line);
  color: var(--white);
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.page-content { padding-top: 78px; }
.section { padding: clamp(72px, 9vw, 132px) clamp(20px, 5vw, 72px); }
.section.dark { background: var(--charcoal); color: var(--white); }
.section.white { background: var(--white); }
/* Two white sections in a row would read as one block without a divider. */
.section.white + .section.white { border-top: 1px solid var(--line); }
.section.flush { padding-left: 0; padding-right: 0; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.eyebrow {
  color: var(--bronze);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 36px;
  align-items: end;
  margin-bottom: clamp(36px, 6vw, 70px);
}
/* A head with no supporting paragraph should not keep reserving the second
   column - the heading spans the full width rather than leaving a gap. */
.section-head.no-aside { grid-template-columns: 1fr; }

h1, h2, h3, .display {
  font-family: "Manrope", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.018em;
}

h1 { font-size: clamp(38px, 6vw, 82px); }
h2 { font-size: clamp(28px, 3.4vw, 52px); }
h3 { font-size: clamp(21px, 2vw, 32px); }

.lead {
  font-size: clamp(16px, 1.5vw, 20px);
  color: rgba(17, 17, 15, .74);
}

.dark p, .dark .lead { color: rgba(255, 255, 255, .68); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  cursor: pointer;
}

.btn:hover { transform: translateY(-2px); background: var(--bronze); border-color: var(--bronze); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { color: var(--white); }
.dark .btn { border-color: var(--white); background: var(--white); color: var(--ink); }
.dark .btn.secondary { background: transparent; color: var(--white); }
.hero .btn.secondary,
.feature-strip .btn.secondary {
  border-color: rgba(255,255,255,.72);
  color: var(--white);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
  background: var(--ink);
}

.slide-container, .slide, .slide > img, .slide-overlay { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 1.1s ease; }
.slide.active { opacity: 1; }
.slide > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s ease; }
.slide.active > img { transform: scale(1); }
/* Several stills of one project stacked on a single slide - they cross-fade in
   place so the set shares one dot instead of splitting into separate entries. */
.slide > img.frame { opacity: 0; transition: opacity .9s ease; }
.slide > img.frame.is-shown { opacity: 1; }

/* The clip is portrait (9:16) in a landscape band. Rather than crop it, the
   sharp copy is contained and centred, and a blurred copy of the same file
   fills the space either side so the hero still reads edge to edge. */
/* Landscape footage needs no frame - it fills the band like a photo slide. */
.slide > video.media-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.is-framed { background: var(--ink); }
.media-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
}
/* Window onto the real footage. Sized to the content's aspect ratio, so any
   pillarbox bars baked into the source file fall outside it and are clipped.
   Both custom properties are set per slide in js/main.js. */
.media-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: var(--frame-ratio, 9 / 16);
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.slide .media-frame .media-main {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
/* Edge shadow so the sharp copy separates from the blurred fill. */
.slide.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 90px 30px rgba(17, 21, 29, .55);
}
.slide-overlay {
  background: linear-gradient(0deg, rgba(17,21,29,.2), rgba(17,21,29,.02));
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 clamp(70px, 9vw, 118px);
}

.hero-content h1 { max-width: 980px; margin: 18px 0 24px; }
.hero-content p { max-width: 720px; font-size: clamp(17px, 1.8vw, 21px); color: rgba(255,255,255,.82); }
.hero::before {
  content: "";
  position: absolute;
  inset: 78px clamp(20px, 5vw, 70px) 36px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.18);
  border-left: 0;
  border-right: 0;
}

.hero-actions { margin-top: 34px; }
.hero .hero-content { display: none; }
.hero-project-title,
.slide-caption {
  position: absolute;
  left: clamp(24px, 6vw, 86px);
  bottom: clamp(104px, 11vw, 148px);
  z-index: 3;
  max-width: min(520px, calc(100% - 48px));
  color: var(--white);
  font-size: clamp(15px, 1.45vw, 23px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: pre-line;
  text-shadow: none;
}

.hero-project-title.typing::after,
.slide-caption.typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: .95em;
  margin-left: 6px;
  background: currentColor;
  animation: cursorBlink .8s steps(1) infinite;
  transform: translateY(2px);
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.slide-indicators {
  position: absolute;
  left: clamp(24px, 6vw, 86px);
  right: clamp(24px, 6vw, 86px);
  bottom: clamp(34px, 5vw, 64px);
  z-index: 3;
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: center;
}

.slide-dash {
  display: block;
  width: clamp(46px, 8vw, 118px);
  height: 18px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.slide-dash::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.38);
  transition: background .25s ease, transform .25s ease;
}

.slide-dash.active { color: var(--white); }
.slide-dash.active::after {
  background: var(--white);
  transform: scaleX(1.12);
  transform-origin: left center;
}

.studio-manifesto {
  padding: clamp(76px, 9vw, 124px) clamp(20px, 5vw, 72px);
  background: var(--white);
  color: var(--ink);
}

.studio-manifesto .container {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(38px, 8vw, 112px);
  align-items: start;
}

.manifesto-kicker {
  position: sticky;
  top: 104px;
  color: var(--bronze);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
}

.manifesto-copy {
  max-width: 920px;
}

.manifesto-copy h1,
.manifesto-copy p {
  color: var(--ink);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin-bottom: clamp(24px, 3vw, 38px);
}

.manifesto-copy p:not(:first-child) {
  color: #3f3f3f;
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.35;
}

.feature-strip {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 640px;
  background: var(--warm);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.feature-copy { padding: clamp(56px, 8vw, 110px); display: flex; flex-direction: column; justify-content: center; }
.feature-copy h1,
.feature-copy h2 {
  margin: 18px 0 24px;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: .98;
  letter-spacing: -.018em;
}
.feature-strip .lead { color: var(--muted); }
.feature-strip .btn.secondary { border-color: var(--ink); color: var(--ink); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); }
.feature-copy .eyebrow::before,
.section-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--bronze);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: transparent;
}

.project-card {
  min-width: 0;
  background: var(--white);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); position: relative; z-index: 2; }
.project-card.large { grid-column: span 2; }
.project-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--warm); }
.project-card.large .project-thumb { aspect-ratio: 16 / 9; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.project-card:hover .project-thumb img { transform: scale(1.055); }
.project-info { padding: 24px; }
.project-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--bronze);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.project-name { font-size: clamp(22px, 2vw, 28px); line-height: 1.08; margin-bottom: 12px; }
.project-desc { font-size: 14px; }
.section.white .project-card {
  border: 0;
}
.section.white .project-card.large .project-info {
  display: block;
}
.section.white .project-card.large .project-name {
  font-size: clamp(24px, 2.4vw, 34px);
}
.project-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.fact { padding: 22px; border-right: 1px solid var(--line); }
.fact span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.fact strong { font-size: 15px; }

.service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
/* Five across. Narrower cells than the 3-up default, so the padding and
   minimum height come down to match. */
.service-list.five-up { grid-template-columns: repeat(5, 1fr); }
.service-list.five-up .service-card { padding: clamp(20px, 2vw, 30px); min-height: 250px; }
.service-list.five-up .service-card h3 { margin: 18px 0 12px; font-size: clamp(19px, 1.5vw, 23px); }
.service-list.five-up .service-card p { font-size: 14px; line-height: 1.65; }
.service-card {
  background: var(--warm);
  padding: clamp(28px, 4vw, 46px);
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-card h3 {
  letter-spacing: -.02em;
}
.service-card.dark-card { background: var(--ink); color: var(--white); }
.service-number { color: var(--bronze); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.service-card h3 { margin: 24px 0 14px; font-size: clamp(22px, 2vw, 30px); }
.service-card ul { margin-top: 20px; color: var(--muted); padding-left: 18px; line-height: 1.8; }
.service-card.dark-card p, .service-card.dark-card ul { color: rgba(255,255,255,.68); }

.pill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pill {
  border: 1px solid var(--line);
  padding: 20px;
  min-height: 116px;
  background: rgba(255,255,255,.45);
  font-weight: 800;
}
.pill span { display: block; color: var(--bronze); margin-bottom: 14px; }
.dark .pill { border-color: var(--dark-line); background: rgba(255,255,255,.04); color: var(--white); }

/* Two-column achievements. Each column ends in a headline figure, pushed to
   the bottom with margin-top:auto so both figures align on the same baseline
   even though the two columns carry different amounts of copy. */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}
.achievement {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--warm);
}
.achievement h2 {
  margin: 16px 0 24px;
  font-size: clamp(23px, 2.1vw, 32px);
  line-height: 1.1;
}
.achievement p { margin-bottom: 18px; }
.achievement p:last-of-type { margin-bottom: 0; }
.achievement-figure {
  margin-top: auto;
  padding-top: clamp(30px, 3.4vw, 46px);
  text-align: center;
}
.achievement-figure strong {
  display: block;
  color: var(--ink);
  /* Lower floor than the other display figures: "+2.5 billion" is a long
     string, and at 44px it wrapped on a 375px screen - which risked breaking
     the currency symbol away from the number it belongs to. */
  font-size: clamp(34px, 5.4vw, 76px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.03em;
  text-wrap: balance;
}
/* UAE dirham sign. Not yet in Unicode, so it is drawn rather than typed - sized
   in em off the surrounding text and filled with currentColor so it tracks the
   type it sits beside. viewBox is cropped to the glyph so the em maths is
   predictable rather than including the artwork's padding. */
.dirham {
  height: .72em;
  width: .82em;
  margin-right: .1em;
  fill: currentColor;
  vertical-align: baseline;
}
.achievement-figure span {
  display: block;
  margin-top: 14px;
  color: var(--bronze);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Two figures rather than four. Without this the 4-column default leaves two
   empty cells, and the container background shows through them as blocks. */
.stats.two-up { grid-template-columns: repeat(2, 1fr); }
/* "2 billion+" is far longer than the short numerals .stat was built for, so
   it is set smaller and kept on one line - a break would split the currency
   symbol from its value. */
.stats.two-up .stat strong {
  font-size: clamp(30px, 3.4vw, 50px);
  white-space: nowrap;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--dark-line);
}
.stat { padding: clamp(28px, 5vw, 56px); background: var(--charcoal); }
.stat strong {
  display: block;
  color: var(--white);
  font-family: "Manrope", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: .9;
}
.stat span { display: block; color: rgba(255,255,255,.58); margin-top: 16px; }

.empty-state {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(40px, 6vw, 64px);
  border: 1px solid var(--line);
  background: var(--warm);
}
.empty-state p { margin: 0; font-size: clamp(17px, 1.6vw, 20px); }

.page-hero {
  min-height: 520px;
  display: grid;
  align-items: end;
  color: var(--white);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.18)); }
.page-hero .container { position: relative; z-index: 1; padding-bottom: 72px; }
.page-hero h1 { max-width: 860px; margin-top: 18px; font-size: clamp(38px, 5.4vw, 72px); }
/* .lead sets a dark colour for light sections, which is invisible over the
   hero photograph. Restore it to white and give it room under the heading. */
.page-hero .lead {
  max-width: 720px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .84);
}
/* A full statement rather than a short headline, so it is set smaller and
   given looser leading than a normal page h1 - at the default size this much
   copy runs to five or six lines. */
.page-hero h1.hero-statement {
  max-width: 1080px;
  font-size: clamp(27px, 3.5vw, 48px);
  line-height: 1.18;
  letter-spacing: -.015em;
}

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 7vw, 96px);
  align-items: start;
}
.split h3 { margin: 40px 0 20px; font-size: clamp(19px, 1.7vw, 24px); }

/* The vision statement carries the section on its own, so it is set larger
   than a normal h2 and given room beneath. */
.vision-line {
  margin: 20px 0 30px;
  font-size: clamp(44px, 7vw, 96px);
  line-height: .95;
  letter-spacing: -.03em;
}

/* Vision / Mission / Goals / Philosophy, two to a panel across two panels.
   Inactive panels are display:none rather than removed, so the copy stays in
   the document for crawlers. Hairline grid matching .stats. */
.principle-slider { margin-top: clamp(44px, 6vw, 76px); }
.principle-slide {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--dark-line);
}
.principle-slide.active { display: grid; }
.principle-dots { display: flex; gap: clamp(10px, 1.4vw, 18px); margin-top: 30px; }

/* Vision / Mission / Goals / Philosophy as a static grid, matching .service-list. */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(44px, 6vw, 76px);
  background: var(--line);
}
.principle { background: var(--warm); padding: clamp(28px, 3.4vw, 46px); }
/* Keeps working if the block is ever moved onto a dark section. */
.dark .principle-grid { background: var(--dark-line); }
.dark .principle { background: var(--charcoal); }
.principle h3 {
  margin-bottom: 18px;
  color: var(--bronze);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.principle p { margin: 0; }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(34px, 6vw, 80px);
}
.detail-copy h2, .detail-copy h3 { margin: 34px 0 16px; }
.side-panel { border: 1px solid var(--line); padding: 24px; background: rgba(255,255,255,.54); position: sticky; top: 100px; }
.side-panel dl { display: grid; gap: 18px; }
.side-panel dt { color: var(--bronze); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 5px; }
.gallery { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-top: 34px; }
.gallery img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; }

.doc-list { list-style: none; display: grid; gap: 13px; }
.doc-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  line-height: 1.7;
}
.doc-list li strong { color: var(--ink); font-weight: 700; }
.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 15px;
  height: 1px;
  background: var(--bronze);
}
/* Standalone statement between two blocks - bold and ink so it reads as a
   flat declaration rather than body copy. */
.section-statement {
  margin-bottom: 44px;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.015em;
}

.file-note {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.office-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 26px); }
.office-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--warm);
}
.office-map { aspect-ratio: 16 / 10; background: var(--sand); }
.office-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.office-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(18px, 1.8vw, 26px);
}
.office-body h2 { margin: 12px 0 14px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.15; }
.office-body address {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.office-contact { display: grid; gap: 12px; margin: 20px 0 24px; }
.office-contact dt {
  color: var(--bronze);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.office-contact dd { margin: 0; font-size: 14px; word-break: break-word; }
.office-contact a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.office-contact a:hover { border-bottom-color: var(--bronze); }
.office-body .btn { margin-top: auto; font-size: 10px; padding: 0 16px; min-height: 42px; }

footer {
  padding: 58px clamp(20px, 5vw, 72px) 30px;
  background: var(--midnight);
  color: rgba(255,255,255,.58);
}
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; margin-bottom: 44px; }
.footer-logo { width: 170px; height: 64px; object-fit: cover; object-position: center; margin-bottom: 22px; }
.footer-col h4 { color: var(--sand); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--dark-line);
  font-size: 12px;
}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .section-head, .feature-strip, .split, .detail-layout { grid-template-columns: 1fr; }
  .studio-manifesto .container { grid-template-columns: 1fr; }
  .manifesto-kicker { position: static; }
  .project-grid, .service-list { grid-template-columns: repeat(2, 1fr); }
  .service-list.five-up { grid-template-columns: repeat(3, 1fr); }
  .office-grid { grid-template-columns: repeat(2, 1fr); }
  /* An odd number of cards in two columns leaves a hole, and the container
     background shows through it as a grey block. Let the last one span. */
  .service-list > :last-child:nth-child(odd) { grid-column: span 2; }
  .project-card.large { grid-column: span 1; }
  .pill-grid, .stats, .project-facts { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .side-panel { position: static; }
}

@media (max-width: 680px) {
  .site-nav { height: 68px; }
  .page-content { padding-top: 68px; }
  .nav-logo img { width: 124px; height: 46px; }
  .hero { min-height: 820px; }
  .hero-project-title,
  .slide-caption {
    bottom: 118px;
    max-width: calc(100% - 48px);
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: .13em;
  }
  .slide-indicators {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    bottom: 32px;
    gap: 16px 18px;
  }
  .slide-dash { width: 100%; }
  /* Too narrow to fit the portrait frame at full hero height: fit to width. */
  .media-frame { height: auto; width: 100%; }
  .slide .media-frame .media-main { height: auto; width: calc(var(--crop-scale, 1) * 100%); }
  .manifesto-copy h1 { font-size: 26px; }
  .manifesto-copy p:not(:first-child) { font-size: 19px; }
  .project-grid, .service-list, .pill-grid, .stats, .project-facts, .office-grid, .principle-grid, .achievement-grid, .footer-top { grid-template-columns: 1fr; }
  /* Higher specificity than the .stats rule above, so it needs its own reset. */
  .stats.two-up { grid-template-columns: 1fr; }
  .service-list.five-up { grid-template-columns: 1fr; }
  .principle-slide.active { grid-template-columns: 1fr; }
  .feature-copy { padding: 54px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .gallery { grid-template-columns: 1fr; }
}

/* --- Sub-page grids (people / sectors / services / project tiles) --- */
.people-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
/* Fewer, larger cards once the portraits are real photographs. */
/* Three portraits stretched across the full container dwarfed the team grid
   below, so the row is capped - the leadership cards stay larger than the team
   ones without running the full width of the page. */
.people-grid.three-up { grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; }
.person-card { position: relative; overflow: hidden; background: var(--warm); }
.person-photo {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop upward so heads stay clear of the caption bar. */
  object-position: center top;
}
.three-up .person-bar { padding: 18px 20px; }
.three-up .person-bar strong { font-size: 18px; }
.three-up .person-bar span { font-size: 14px; }
.person-photo span { font-size: clamp(30px, 3.2vw, 50px); font-weight: 800; letter-spacing: .04em; color: rgba(21,24,33,.28); }
/* The bar overlays the foot of the portrait, so its padding is kept tight -
   every pixel it grows is a pixel of the photograph it covers. */
.person-bar { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(32,36,45,.88); color: var(--white); padding: 9px 14px; }
.person-bar strong { display: block; font-size: 15px; line-height: 1.2; }
.person-bar span { display: block; font-size: 13px; line-height: 1.25; color: rgba(255,255,255,.72); }
/* Footnote marker on a job title, linking to its note in the page footer. The
   asterisk alone is a tiny hit area, so it carries padding to click against. */
.footnote-ref { color: inherit; text-decoration: none; padding: 0 4px; }
.footnote-ref:hover, .footnote-ref:focus-visible { color: var(--white); }
/* The note sits between the footer's columns and its bottom rule - directly
   above the divider line - and takes the footer's own colour so it reads as
   part of the same block rather than as separate content. */
.footnote { display: block; font-size: 8px; color: inherit; margin-bottom: 10px; scroll-margin-bottom: 40px; }

/* Heading for a block within a page that already has an h1. */
.block-title { margin-bottom: 26px; font-size: clamp(24px, 2.6vw, 36px); }

.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sector-tile {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--white);
  text-align: center;
  font-size: clamp(17px, 1.6vw, 26px);
  font-weight: 600;
  transition: transform .4s ease;
}
.sector-tile:hover { transform: translateY(-4px); }

/* Ink-to-brand-blue ramp. Every step clears 4.5:1 against white text. */
.sector-tile.tone-1 { background: #151821; }
.sector-tile.tone-2 { background: #1b2333; }
.sector-tile.tone-3 { background: #212c45; }
.sector-tile.tone-4 { background: #273557; }
.sector-tile.tone-5 { background: #2d3f69; }
.sector-tile.tone-6 { background: #33487b; }
.sector-tile.tone-7 { background: #39518d; }
.sector-tile.tone-8 { background: #4168a6; }
.sector-tile.tone-9 { background: #5378ad; }

.service-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.service-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; background: var(--warm); }
.service-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.service-tile:hover img { transform: scale(1.06); }
.service-tile::after { content: ""; position: absolute; inset: 0; background: rgba(21,24,33,.36); }
.service-tile > span { position: relative; z-index: 1; padding: 0 16px; color: var(--white); text-align: center; font-size: clamp(17px, 1.5vw, 26px); font-weight: 600; }
.service-tile.intro { background: #d8dbdf; }
.service-tile.intro::after { display: none; }
.service-tile.intro p { position: relative; z-index: 1; padding: 26px; color: var(--ink); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.35; }

/* Sector cards: same construction as .service-list, but the dividers are
   borders on the cells rather than a gap showing the container through.
   Eleven does not divide evenly into the column counts, and with the gap
   technique the leftover cell renders as a solid grey block. */
.sector-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sector-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--warm);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sector-card svg {
  width: 68px;
  height: auto;
  margin-bottom: 24px;
  fill: none;
  stroke: rgba(21, 24, 33, .5);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sector-card .accent { stroke: var(--bronze); }
.sector-card h3 {
  margin-bottom: 14px;
  font-size: clamp(19px, 1.5vw, 23px);
  letter-spacing: -.02em;
}
.sector-card p { margin: 0; font-size: 14px; line-height: 1.65; }

.sector-card.dark-card { background: var(--ink); color: var(--white); }
.sector-card.dark-card p { color: rgba(255, 255, 255, .68); }
.sector-card.dark-card svg { stroke: rgba(255, 255, 255, .55); }
.sector-card.dark-card .accent { stroke: #7a99c6; }

@media (max-width: 1040px) {
  .sector-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .sector-cards { grid-template-columns: 1fr; }
}

.ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; align-items: start; gap: 14px; }
.ct-card { position: relative; overflow: hidden; display: block; background: var(--warm); }
.ct-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s ease; }
.ct-card.wide { grid-column: span 2; }
.ct-card:hover img { transform: scale(1.05); }
.ct-caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(32,36,45,.85); color: var(--white); padding: 14px 18px; }
.ct-caption strong { display: block; font-size: 17px; line-height: 1.25; }
.ct-caption span { font-size: 14px; color: rgba(255,255,255,.74); }

@media (max-width: 1040px) {
  .people-grid { grid-template-columns: repeat(3, 1fr); }
  .people-grid.three-up { grid-template-columns: repeat(2, 1fr); }
  .sector-grid, .service-tiles, .ct-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid.three-up { grid-template-columns: 1fr; }
  .sector-grid, .service-tiles, .ct-grid { grid-template-columns: 1fr; }
}