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

:root {
  --blue:        #2563EB;
  --blue-dark:   #1d4ed8;
  --dark:        #0A0B0F;
  --steel:       #6B7280;
  --border:      #D1D5DB;
  --light:       #F9FAFB;
  --white:       #FFFFFF;

  --display: 'Manrope', Arial, sans-serif;
  --labels: 'Space Grotesk', Arial, sans-serif;
  --sans:    'DM Sans', system-ui, Arial, sans-serif;
  --nav-h:   80px;
  --max-w:   90rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { font-size: 16px; }

body {
  font-family: var(--sans);
  background: var(--white);
  color: #000;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.loaded { opacity: 1; }

/* Lenis smooth scroll */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { border: none; background: none; font-family: var(--sans); cursor: pointer; }
em { font-style: normal; }

/* ── Spacing ─────────────────────────────────────────────── */
.padding-global {
  padding-left: 2%;
  padding-right: 2%;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.padding-section-large { padding-top: 7rem; padding-bottom: 7rem; }

/* ── Reveal ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Labels ──────────────────────────────────────────────── */
.label-small {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 0;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-filled {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--white);
}
.btn-filled:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.btn-outlined-dark {
  background: transparent;
  border: 1px solid #000;
  color: #000;
}
.btn-outlined-dark:hover { background: #000; color: var(--white); }

.btn-filled-dark {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 0;
  background: #000;
  color: var(--white);
  border: 1px solid #000;
  transition: background 0.25s, color 0.25s;
}
.btn-filled-dark:hover { background: var(--blue); border-color: var(--blue); }

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
.nav-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  padding: 0 2%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav-logo-link { display: flex; align-items: center; }
.nav-logo      { height: 44px; width: auto; }
.nav-logo-icon { height: 44px; width: auto; display: none; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.nav-link {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
  padding: 8px 18px;
  transition: color 0.2s;
  position: relative;
}
.nav-link::after { content: none; }
.nav-link:hover { color: #000; }
.nav-link-active { color: #000 !important; }

/* Last column — placeholder for right-alignment */
.nav-wrap > *:last-child { justify-self: end; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  justify-self: end;
}
.burger span {
  display: block; width: 22px; height: 1.5px;
  background: #000;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mob-menu {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 12px 4% 32px; z-index: 199;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.mob-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.mob-link {
  display: block;
  font-family: var(--display);
  font-size: 2.2rem; font-weight: 500; font-style: normal;
  letter-spacing: -0.01em; color: #000;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.mob-link:last-child { border-bottom: none; }
.mob-link:hover { color: var(--blue); }

/* ── HERO ────────────────────────────────────────────────── */
.hero { padding-top: var(--nav-h); }

.hero-text-block {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 7rem;
  padding-bottom: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-brand-icon {
  display: inline-block;
  height: 1.32em;
  width: auto;
  vertical-align: -0.35em;
  margin-left: 0.33em;
  margin-right: -0.33em;
  mix-blend-mode: multiply;
}
.hero-brand-name {
  font-family: var(--display);
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dark);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.hero-tagline {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--steel);
}
.hero-sub {
  font-family: var(--sans);
  font-size: 1rem; font-weight: 400; line-height: 1.7;
  color: var(--steel);
}

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.hero-image-wrap { width: 100%; overflow: hidden; }
.hero-skyline-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 62vh;
  object-fit: cover;
  object-position: center bottom;
}

/* ── OUR WORK ────────────────────────────────────────────── */
.work-section {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.work-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.work-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 0.5rem;
}
.work-location {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel);
}

/* Featured project — large image left, info right */
.work-featured {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  margin-bottom: 8px;
  min-height: 480px;
}
.work-featured-img {
  overflow: hidden;
  aspect-ratio: 4/3;
}
.work-featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.work-featured:hover .work-featured-img img { transform: scale(1.03); }
.work-featured-info {
  background: var(--dark);
  color: var(--white);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.work-num {
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 400;
  color: rgba(255,255,255,0.12);
  line-height: 1;
  display: block;
}
.work-project-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.work-project-detail {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.5rem;
}
.work-project-desc {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
}

/* 3-photo process strip */
.work-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.work-strip-item { display: flex; flex-direction: column; gap: 0; }
.work-strip-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.work-strip-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.work-strip-item:hover .work-strip-img img { transform: scale(1.03); }
.work-strip-caption {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 0.75rem 0 0;
}

/* ── SERVICES TABLE ──────────────────────────────────────── */
.services-section {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.services-intro { max-width: 38rem; margin-bottom: 5rem; }
.services-heading {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 500; line-height: 1.0;
  letter-spacing: -0.02em; color: #000;
  margin-bottom: 1.25rem;
}
.services-heading em { font-style: normal; }
.services-sub {
  font-family: var(--sans);
  font-size: 0.95rem; font-weight: 400; line-height: 1.7; color: var(--steel);
}

.table-wrap { width: 100%; }
.table-head {
  display: flex; align-items: center;
  position: sticky; top: var(--nav-h);
  background: var(--white); z-index: 20;
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
.th {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--steel);
}
.th-service { flex: 1; }
.th-desc    { width: 22rem; }

.table-body { border-top: 1px solid var(--border); }
.table-row {
  position: relative; display: flex; align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.3s var(--ease-out);
}
.table-row:hover { padding-left: 0.75rem; }
.table-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--blue);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s var(--ease-out);
}
.table-row:hover::before { transform: scaleY(1); }

.td-wide { flex: 1; padding-right: 2rem; }
.row-name {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.01em; color: #000; margin-bottom: 0.4rem;
}
.row-desc {
  font-family: var(--sans);
  font-size: 0.875rem; font-weight: 400; line-height: 1.7; color: var(--steel);
}
.td-right { width: 22rem; padding-top: 4px; }
.row-tag {
  font-family: var(--sans);
  font-size: 0.875rem; font-weight: 400; color: var(--steel); letter-spacing: -0.01em;
}
.row-hover {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.02); opacity: 0;
  transition: opacity 0.2s; pointer-events: none;
}
.table-row:hover .row-hover { opacity: 1; }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact-section { background: var(--white); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: stretch;
}
.contact-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 0;
}
.contact-heading {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  font-weight: 400; line-height: 1.1;
  font-style: normal;
  letter-spacing: -0.01em; color: #000;
  margin-bottom: 1.5rem;
}
.contact-body {
  font-family: var(--sans);
  font-size: 0.95rem; font-weight: 400; line-height: 1.7;
  color: var(--steel); margin-bottom: 3rem;
}
.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-row { display: flex; flex-direction: column; gap: 6px; }
.contact-label {
  font-family: var(--display);
  font-size: 1.4rem; font-weight: 500; line-height: 1.3; color: #000;
}
.contact-link {
  font-family: var(--sans);
  font-size: 0.9rem; font-weight: 400; color: var(--steel);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color 0.2s;
}
.contact-link:hover { color: var(--blue); }

.contact-right { min-height: 540px; }
.contact-map {
  width: 100%;
  height: 100%;
  min-height: 540px;
  overflow: hidden;
  filter: grayscale(20%);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  display: block;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background: var(--white); border-top: 1px solid var(--border); padding: 2rem 0; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4rem; flex-wrap: wrap; gap: 2rem;
}
.footer-logo { height: 44px; width: auto; }
.footer-nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-link {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--steel); transition: color 0.2s;
}
.footer-link:hover { color: #000; }
.footer-divider { width: 100%; height: 1px; background: var(--border); margin-bottom: 1.5rem; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-copy {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 400; color: var(--steel);
}
.footer-email {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 400; color: var(--steel);
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;
}
.footer-email:hover { color: var(--blue); }

/* ── ABOUT PAGE ──────────────────────────────────────────── */
.about-hero { padding-top: var(--nav-h); }
.about-hero-inner {
  max-width: 56rem; margin: 0 auto;
  text-align: center;
  padding-top: 7rem; padding-bottom: 4rem;
  display: flex; flex-direction: column; align-items: center;
}
.about-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 2rem;
}
.about-h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 400; line-height: 1.1;
  font-style: normal;
  letter-spacing: -0.01em; color: #000;
  margin-bottom: 2rem;
}
.about-hero-sub {
  width: 65%;
}
.about-hero-sub p {
  font-family: var(--sans);
  font-size: 1rem; line-height: 1.7; color: var(--steel);
}
.about-hero-image {
  width: 100%; height: 55vh; min-height: 380px;
  background: linear-gradient(165deg, #0c1a33 0%, #0A0B0F 52%, #08121f 100%);
  position: relative; overflow: hidden;
}
.about-hero-image::before {
  content: '';
  position: absolute; inset: 0;
  background-image: none;
  
}

.about-statement {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.statement-grid {
  display: grid; grid-template-columns: 0.4fr 1fr;
  gap: 6rem; align-items: start;
}
.statement-left { padding-top: 0.25rem; }
.statement-text {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 400; line-height: 1.5;
  font-style: normal;
  letter-spacing: -0.01em; color: #000;
  margin-bottom: 2rem;
}
.statement-body {
  font-family: var(--sans);
  font-size: 0.95rem; line-height: 1.8; color: var(--steel);
}

.about-pillars { padding: 7rem 0; border-bottom: 1px solid var(--border); }
.pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.about-pillar {
  padding: 3.5rem 3rem 3.5rem 0;
  border-right: 1px solid var(--border);
}
.about-pillar:last-child { border-right: none; padding-right: 0; padding-left: 3rem; }
.about-pillar:not(:first-child):not(:last-child) { padding-left: 3rem; }
.pillar-num {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem; font-weight: 400; font-style: normal;
  color: var(--blue); margin-bottom: 1.5rem;
}
.pillar-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 500; line-height: 1.1;
  letter-spacing: -0.02em; color: #000;
  margin-bottom: 1.5rem;
}
.pillar-body {
  font-family: var(--sans);
  font-size: 0.875rem; line-height: 1.8; color: var(--steel);
}

.about-region { border-bottom: 1px solid var(--border); }
.region-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
}
.region-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400; line-height: 1.1;
  font-style: normal;
  letter-spacing: -0.01em; color: #000;
  margin-top: 1rem;
}
.region-body {
  font-family: var(--sans);
  font-size: 0.95rem; line-height: 1.8; color: var(--steel);
}

.about-cta { background: var(--light); border-bottom: 1px solid var(--border); }
.about-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem; flex-wrap: wrap;
}
.about-cta-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400; line-height: 1.1;
  font-style: normal;
  letter-spacing: -0.01em; color: #000;
}

/* ── Responsive ──────────────────────────────────────────── */
.hide-tablet { display: block; }

@media (max-width: 991px) {
  .hide-tablet { display: none !important; }
  .statement-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .region-inner { grid-template-columns: 1fr; gap: 2rem; }
  .work-featured { grid-template-columns: 1fr; }
  .work-featured-info { min-height: 280px; }
  .work-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root { --nav-h: 68px; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .mob-menu { display: block; }
  .nav-logo { display: none; }
  .nav-logo-icon { display: block; }
  .nav-wrap { grid-template-columns: 1fr auto; }

  .padding-global { padding-left: 5%; padding-right: 5%; }
  .padding-section-large { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  .hero-brand-name { font-size: clamp(2.2rem, 9vw, 3.8rem); }
  .work-strip { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-right { display: none; }
  .pillars-grid { grid-template-columns: 1fr; border-top: none; }
  .about-pillar { border-right: none; border-top: 1px solid var(--border); padding: 3rem 0 !important; }
  .about-cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .about-hero-sub { width: 100%; }
}

@media (max-width: 480px) {
  .hero-brand-name { font-size: clamp(1.8rem, 12vw, 2.8rem); }
  .about-h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
}

/* Homepage introduction */
.home-page { --home-background: #eae9ee; }
.home-page .nav { position: absolute; height: 150px; background: var(--home-background); border: 0; }
.home-page .nav-wrap { max-width: none; padding: 0 4%; display: flex; justify-content: space-between; }
.home-page .nav-logo { display: block; width: 130px; height: 100px; object-fit: contain; }
.home-page .nav-logo-icon { display: none; }
.home-page .nav-links { margin-left: auto; gap: 28px; }
.home-page .nav-link { font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #000; padding: 8px 0; }
.home-page .nav-link::after { left: 0; right: 0; }
.home-hero { background: var(--home-background); padding: 165px 4% 0; }
.home-heading { font-family: var(--display); font-size: 10.2vw; font-weight: 400; letter-spacing: -0.055em; line-height: 1.12; margin: 0 0 34px; }
.home-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; }
.home-intro-copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 40px 0 48px; }
.home-intro-copy p { font-size: clamp(18px, 1.55vw, 30px); line-height: 1.55; max-width: 35ch; }
.home-work-button { display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; border-radius: 999px; min-height: 70px; width: min(280px, 100%); padding: 20px 32px; margin-top: 48px; font-size: 16px; transition: background .2s; }
.home-work-button:hover { background: #252525; }
.home-work-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.home-intro-image { min-width: 0; aspect-ratio: 1.25; overflow: hidden; }
.home-intro-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .home-page .nav { height: 100px; }
  .home-page .nav-wrap { padding: 0 5%; }
  .home-page .nav-logo { width: 90px; height: 75px; }
  .home-page .mob-menu { top: 100px; background: var(--home-background); }
  .home-hero { padding: 125px 5% 0; }
  .home-heading { font-size: clamp(52px, 12vw, 90px); line-height: 1.05; letter-spacing: -0.05em; margin-bottom: 32px; }
  .home-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .home-intro-copy { padding: 0; }
  .home-intro-copy p { font-size: 18px; max-width: 40ch; }
  .home-work-button { margin-top: 28px; min-height: 60px; width: 220px; }
  .home-intro-image { aspect-ratio: 1.1; }
}

/* Keep the complete introduction within the available browser height. */
.home-page .nav { position: fixed; height: clamp(72px, 12svh, 110px); }
.home-page .nav-logo { height: clamp(65px, 10.1svh, 92px); width: 124px; }
.home-hero {
  min-height: 560px;
  height: 100svh;
  padding: clamp(84px, 14svh, 126px) 4% clamp(20px, 4svh, 40px);
  display: flex;
  flex-direction: column;
}
.home-heading {
  flex: 0 0 auto;
  font-size: min(9.6vw, 18svh);
  margin-bottom: clamp(18px, 3svh, 32px);
}
.home-intro-grid { flex: 1; min-height: 0; }
.home-intro-copy { justify-content: center; padding: 12px 0; }
.home-intro-copy p { font-size: clamp(17px, 2.8svh, 26px); }
.home-work-button {
  flex-shrink: 0;
  min-height: 54px;
  padding: 16px 32px;
  margin-top: clamp(20px, 4svh, 40px);
}
.home-intro-image { aspect-ratio: auto; min-height: 0; height: 100%; }
.home-intro-image img { object-fit: contain; }
@media (max-width: 768px) {
  .home-page .nav { height: 72px; }
  .home-page .nav-logo { width: 96px; height: 70px; }
  .home-page .mob-menu { top: 72px; }
  .home-hero { min-height: 640px; padding: 88px 5% 20px; }
  .home-heading { font-size: clamp(40px, 11vw, 76px); margin-bottom: 20px; }
  .home-intro-grid { grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
  .home-intro-copy { padding: 0; }
  .home-intro-copy p { font-size: 16px; line-height: 1.45; }
  .home-work-button { margin-top: 18px; min-height: 48px; padding: 12px 26px; }
}

/* Separate pages and gentle page navigation. */
.detail-main { padding-top: var(--nav-h); }
body.page-leaving { opacity: 0; transition: opacity 240ms ease; }
.home-page.loaded .home-hero { animation: home-arrive 650ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes home-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  body, body.page-leaving, .reveal { transition: none; }
  .home-page.loaded .home-hero { animation: none; }
}

/* Shared header across Home, About, Our Work, and Contact. */
:root { --nav-h: clamp(72px, 12svh, 110px); }
.nav { position: fixed; height: var(--nav-h); background: #eae9ee; border: 0; }
.nav-wrap { max-width: none; padding: 0 4%; display: flex; justify-content: space-between; }
.nav-logo { display: block; width: 124px; height: clamp(65px, 10.1svh, 92px); object-fit: contain; }
.nav-logo-icon { display: none; }
.nav-links { margin-left: auto; gap: 28px; }
.nav-link { font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #000; padding: 8px 0; }
.nav-link::after { left: 0; right: 0; }
.mob-menu { top: var(--nav-h); background: #eae9ee; }
@media (max-width: 768px) {
  :root { --nav-h: 72px; }
  .nav-wrap { padding: 0 5%; }
  .nav-logo { width: 96px; height: 70px; }
  .nav-links { display: none; }
}

/* About: editorial layouts, real project photography, shared brand palette. */
.about-editorial { background: #eae9ee; }
.ae-main { padding-top: var(--nav-h); }
.ae-opening, .ae-expertise, .ae-team, .ae-approach { padding-left: 4%; padding-right: 4%; }
.ae-opening { padding-top: clamp(30px, 5vw, 75px); padding-bottom: 36px; }
.ae-kicker, .ae-section-label, .ae-photo figcaption, .ae-down { font-family: var(--sans); font-size: 12px; line-height: 1.5; }
.ae-kicker { display:flex; justify-content:space-between; gap:20px; text-transform:uppercase; letter-spacing:.12em; color:#555965; }
.ae-title { font-family:var(--display); font-size:clamp(48px,7.3vw,112px); font-weight:400; line-height:1.07; letter-spacing:-.055em; margin:38px 0 48px; }
.ae-title em, .ae-heading em { font-family:var(--display); font-weight:400; }
.ae-opening-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:8%; align-items:center; }
.ae-lead { font-family:var(--display); font-size:clamp(25px,2.7vw,40px); font-weight:400; line-height:1.35; max-width:26ch; }
.ae-photo { min-width:0; }
.ae-photo img { width:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.ae-first-photo img { aspect-ratio:1.65; }
.ae-photo figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:14px; color:#626671; }
.ae-down { display:inline-flex; gap:40px; align-items:center; margin-top:36px; padding:12px 0; border-bottom:1px solid #999ba4; }
.ae-down span { font-size:22px; }
.ae-expertise { background:#fff; padding-top:90px; padding-bottom:90px; }
.ae-section-label { display:flex; gap:30px; align-items:center; text-transform:uppercase; letter-spacing:.12em; color:#626671; margin-bottom:44px; }
.ae-rule { height:1px; background:#d1d2d7; flex:1; }
.ae-two-column { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:start; }
.ae-heading { font-family:var(--display); font-size:clamp(38px,4.5vw,70px); font-weight:400; letter-spacing:-.045em; line-height:1.1; }
.ae-prose { font-family:var(--sans); font-size:clamp(17px,1.35vw,21px); line-height:1.8; color:#424650; max-width:52ch; }
.ae-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); margin-top:64px; }
.ae-capabilities span { display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding:28px 0 10px; font-family:var(--sans); font-size:clamp(19px,1.6vw,25px); font-weight:400; line-height:1.35; letter-spacing:-.025em; text-align:left; }
.ae-capabilities span::before { content:""; display:block; width:36px; height:2px; background:#16588f; }
.ae-team { display:grid; grid-template-columns:1fr 1fr; gap:8%; padding-top:90px; padding-bottom:90px; align-items:center; }
.ae-process-photo img { aspect-ratio:1.05; }
.ae-team-copy .ae-heading { margin-bottom:30px; }
.ae-approach { padding-top:90px; padding-bottom:100px; background-color:#f6f5f2; background-image: none;  }
.ae-button { display:inline-flex; align-items:center; justify-content:space-between; gap:70px; margin-top:32px; padding:17px 28px; border-radius:99px; background:#000; color:#fff; font-size:16px; transition:background .25s,transform .25s; }
.ae-button:hover { background:#28282d; transform:translateY(-2px); }
.ae-button:focus-visible,.ae-down:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
@media(max-width:768px) {
 .ae-opening,.ae-expertise,.ae-team,.ae-approach { padding-left:5%; padding-right:5%; }
 .ae-title { margin:30px 0; }
 .ae-opening-grid,.ae-two-column,.ae-team { grid-template-columns:1fr; gap:30px; }
 .ae-lead { max-width:none; font-size:27px; }
 .ae-photo figcaption { font-size:10px; }
 .ae-expertise,.ae-team,.ae-approach { padding-top:55px; padding-bottom:55px; }
 .ae-section-label { margin-bottom:26px; font-size:10px; }
 .ae-capabilities { grid-template-columns:1fr; gap:24px; margin-top:36px; }
 .ae-capabilities span { padding:0; gap:14px; font-size:21px; }
 .ae-team-copy { grid-row:1; }
 .ae-prose { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
 .ae-button,.ae-photo img { transition:none; }
 .about-editorial .reveal { opacity:1; transform:none; }
}

/* Option 2: display / body / navigation typography. */
.nav-link, .home-page .nav-link, .mob-link, .footer-link, .label-small,
.ae-kicker, .ae-section-label, .ae-photo figcaption, .ae-down,
.ae-capabilities, .home-work-button, .ae-button, .btn, .btn-filled-dark,
.work-location, .work-project-detail, .work-strip-caption {
  font-family: var(--labels);
}
.home-heading { font-size: min(8.7vw, 17svh); letter-spacing: -.035em; }
.ae-title, .ae-heading { letter-spacing: -.025em; }
.work-featured-img { position:relative; }
.work-image-note { position:absolute; bottom:0; left:0; right:0; padding:12px 16px; background:rgba(255,255,255,.92); color:#555; font:12px/1.4 var(--sans); }
@media(max-width:768px) { .home-heading { font-size:clamp(38px,10.5vw,76px); } }

/* Restrained type: upright text, regular reading weight, selective emphasis. */
body { font-weight: 400; font-synthesis: none; }
em, i { font-style: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
.hero-brand-name, .work-title, .services-heading, .row-name,
.contact-label, .pillar-title, .mob-link { font-weight: 400; }
.ae-lead { font-family: var(--sans); font-size: clamp(20px, 2vw, 29px); line-height: 1.6; max-width: 34ch; }
.ae-kicker, .ae-section-label, .footer-link, .work-location,
.work-project-detail, .work-strip-caption { font-weight: 400; }
.home-work-button, .ae-button, .btn, .btn-filled-dark { font-weight: 500; }
strong, b { font-weight: 600; }

/* Clean, light sans-serif headings. */
h1, h2, h3, h4, h5, h6,
.home-heading, .ae-title, .ae-heading, .work-title, .work-project-title,
.contact-heading, .contact-label, .about-h1, .region-title, .about-cta-title {
  font-family: var(--display);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -.035em;
}
.home-heading { font-size: min(8vw, 16svh); line-height: 1.12; }
@media (max-width: 768px) {
  .home-heading { font-size: clamp(36px, 10vw, 72px); }
}

/* Text-only project portfolio. */
.portfolio-main { padding-top:var(--nav-h); }
.portfolio-intro { background:#eae9ee; padding:clamp(40px,6vw,85px) 4% 50px; }
.portfolio-label { font:400 12px/1.5 var(--labels); letter-spacing:.1em; text-transform:uppercase; color:#616671; margin-bottom:24px; }
.portfolio-intro h1 { font:300 clamp(52px,7.5vw,108px)/1.08 var(--display); letter-spacing:-.045em; margin-bottom:48px; }
.project-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:32px; }
.project-index a { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #c9cad1; padding:17px 0; font:400 14px/1.5 var(--labels); transition:color .2s; }
.project-index a span { color:#737784; }
.project-index a:hover { color:var(--blue); }
.project-index a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.portfolio-list { padding:0 4%; background:#fff; }
.portfolio-project { display:grid; grid-template-columns:.85fr 1.15fr; gap:8%; padding:clamp(45px,6vw,85px) 0; border-bottom:1px solid #d9dbe0; scroll-margin-top:calc(var(--nav-h) + 24px); }
.portfolio-project:last-child { border-bottom:0; }
.project-heading h2 { font:300 clamp(26px,2.7vw,40px)/1.25 var(--display); letter-spacing:-.025em; margin-bottom:18px; max-width:20ch; }
.project-type { font:400 12px/1.75 var(--labels); color:#717581; max-width:35ch; }
.project-description { max-width:66ch; font:400 clamp(16px,1.25vw,18px)/1.85 var(--sans); color:#444954; }
.project-description p + p { margin-top:20px; }
@media(max-width:768px) {
 .portfolio-intro { padding:40px 5% 30px; }
 .portfolio-intro h1 { margin-bottom:32px; }
 .project-index { grid-template-columns:1fr 1fr; gap:0 20px; }
 .project-index a { font-size:12px; }
 .portfolio-list { padding:0 5%; }
 .portfolio-project { grid-template-columns:1fr; gap:24px; }
 .project-heading h2 { max-width:none; }
 .project-type { max-width:none; }
}
@media(max-width:400px) { .project-index { grid-template-columns:1fr; } }

/* Unified footer: stacked navigation and right-aligned contact details. */
.footer-unified { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; max-width:none; padding-left:4%; padding-right:4%; }
.footer-left { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.footer-left .footer-logo { width:90px; height:72px; object-fit:contain; }
.footer-left .footer-nav { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer-right { display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:14px; }
.footer-right .footer-email { overflow-wrap:anywhere; }
@media(max-width:600px) {
 .footer-unified { flex-direction:column; align-items:flex-start; padding-left:5%; padding-right:5%; gap:36px; }
 .footer-right { align-items:flex-start; text-align:left; }
}

/* Compact shared footer. */
.footer-left { gap:14px; }
.footer-left .footer-logo { width:75px; height:58px; }
.footer-left .footer-nav { gap:8px; }
.footer-right { gap:10px; }
@media(max-width:600px) { .footer-unified { gap:24px; } }

/* Consistent page labels, matching About. */
.page-kicker { display:flex; justify-content:space-between; align-items:baseline; gap:20px; font:400 12px/1.5 var(--labels); text-transform:uppercase; letter-spacing:.12em; color:#555965; }
.page-kicker span:last-child { text-align:right; }
.portfolio-intro { padding-top:clamp(30px,5vw,75px); }
.portfolio-intro .page-kicker, .contact-section .page-kicker { margin-bottom:38px; }
.home-hero .page-kicker { flex:0 0 auto; margin-bottom:20px; }
@media(max-width:768px) { .page-kicker { gap:16px; } .home-hero .page-kicker { margin-bottom:16px; } }