:root {
  --ink: #071029;
  --blue: #06256f;
  --blue-deep: #041440;
  --blue-bright: #2b63ff;
  --paper: #f5f7fb;
  --line: rgba(20, 47, 113, 0.16);
  --muted: #69728b;
  --white: #ffffff;
  --lime: #c7ff45;
  --radius: 1.75rem;
  --shadow: 0 28px 90px rgba(4, 20, 64, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 4.75rem; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; transform: translateY(-180%); padding: .7rem 1rem; background: white; color: var(--ink); border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(4vw, 1.25rem);
  color: white;
  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4, 20, 64, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 40px rgba(1, 12, 43, .18); opacity: 0; transition: opacity .3s ease; }
/* The blur lives on a pseudo-element: a backdrop-filter on the header itself would turn it into the containing block for the fixed mobile nav. */
.site-header.scrolled { height: 4.75rem; }
.site-header.scrolled::before { opacity: 1; }
body.menu-open .site-header::before { opacity: 0; }
.brand { display: inline-flex; align-items: center; gap: .7rem; position: relative; z-index: 2; }
.brand-mark { width: 2.35rem; height: 2.35rem; display: block; flex: 0 0 auto; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-type { display: grid; line-height: 1.05; }
.brand-type strong { font-size: 1rem; font-weight: 750; letter-spacing: -.015em; }
.brand-type small { font-size: .55rem; margin-top: .34rem; letter-spacing: .15em; opacity: .68; }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); font-size: .88rem; }
.site-nav > a:not(.nav-cta) { color: rgba(255,255,255,.76); transition: color .2s ease; }
.site-nav > a:hover, .site-nav > a:focus-visible, .site-nav > a.is-active { color: white; }
.site-nav > a:not(.nav-cta) { position: relative; padding-bottom: .2rem; }
.site-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.1rem; height: 1px; background: var(--lime); transition: right .25s ease; }
.site-nav > a.is-active::after { right: 0; }
.nav-cta { border: 1px solid rgba(255,255,255,.36); padding: .76rem 1rem; border-radius: 999px; }
.nav-cta span { margin-left: .5rem; }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; padding: .7rem; border: 0; background: transparent; color: white; }
.menu-toggle span:not(.sr-only) { display: block; height: 1px; background: currentColor; margin: .3rem 0; transition: transform .25s ease, opacity .25s ease; }

.hero {
  min-height: 100svh;
  padding: clamp(9rem, 16vh, 12rem) max(4vw, 1.25rem) 2.25rem;
  color: white;
  background: radial-gradient(circle at 74% 35%, #1746a5 0, #092b7d 22%, var(--blue-deep) 66%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, .95fr);
  grid-template-rows: 1fr auto;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, black, transparent 84%); }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 44rem; height: 44rem; right: -14rem; top: 4rem; }
.orbit-two { width: 22rem; height: 22rem; right: 7rem; top: 15rem; }
.hero-copy, .hero-visual, .hero-metrics { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: .18em; font-size: .76rem; font-weight: 700; display: flex; align-items: center; gap: .7rem; }
.eyebrow > span { width: 2.25rem; height: 1px; background: currentColor; display: inline-block; }
.hero h1 { margin: 0; max-width: 13ch; font-size: clamp(3.3rem, 6.8vw, 7.6rem); line-height: .92; letter-spacing: -.065em; font-weight: 430; }
.hero h1 em { font-style: normal; color: rgba(255,255,255,.54); }
.hero-lede { max-width: 43rem; font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.55; color: rgba(255,255,255,.72); margin: 2rem 0 0; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.3rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.8rem; min-height: 3.5rem; padding: .9rem 1.1rem .9rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: .92rem; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-light { background: white; color: var(--blue-deep); box-shadow: 0 16px 40px rgba(1, 8, 34, .18); }
.button-light span { width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--lime); border-radius: 50%; }
.button-blue { background: var(--blue); color: white; box-shadow: 0 16px 40px rgba(1, 8, 34, .14); }
.button-blue span { width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--lime); color: var(--blue-deep); border-radius: 50%; }
.section-cta { display: flex; justify-content: flex-end; margin-top: 2.75rem; }
.section-cta-start { justify-content: flex-start; }
.text-link { font-weight: 650; color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: .25rem; }
.text-link span { margin-left: .45rem; }
.hero-visual { justify-self: end; width: min(38vw, 42rem); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.visual-frame { width: 100%; aspect-ratio: 1/1.06; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50% 50% 2rem 2rem; background: linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.025)); backdrop-filter: blur(8px); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 40px 100px rgba(0,10,45,.36); overflow: hidden; }
.visual-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; mix-blend-mode: screen; filter: contrast(1.06) saturate(1.05); }
.visual-label { position: absolute; right: -1rem; bottom: 14%; padding: 1rem 1.15rem; background: rgba(3,15,51,.78); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(14px); border-radius: 1rem; display: grid; }
.visual-label span { font-size: .68rem; color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .12em; }
.visual-label strong { font-size: .9rem; margin-top: .25rem; }
.hero-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.5rem; }
.hero-metrics > div { display: grid; gap: .15rem; padding-right: 1.5rem; }
.hero-metrics strong { font-size: clamp(1.4rem, 2.1vw, 2rem); font-weight: 520; letter-spacing: -.04em; }
.hero-metrics span { color: rgba(255,255,255,.55); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }

.section { padding: clamp(5.5rem, 10vw, 10rem) max(4vw, 1.25rem); }
.section-kicker { display: flex; align-items: center; gap: .8rem; color: var(--blue); font-size: .78rem; font-weight: 760; text-transform: uppercase; letter-spacing: .16em; }
.section-kicker span { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: .68rem; }
.section-kicker-light { color: rgba(255,255,255,.75); }
.section-kicker-light span { border-color: rgba(255,255,255,.24); }
.intro-head, .section-heading { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .5fr); gap: 6vw; align-items: end; }
.intro-head h2, .section-heading h2, .platform h2, .case-copy h2, .team h2, .contact h2 { margin: 0; font-size: clamp(2.45rem, 5.3vw, 5.8rem); letter-spacing: -.055em; line-height: .99; font-weight: 470; }
.intro-head p, .section-heading p { color: var(--muted); margin: 0; font-size: 1.03rem; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(3.5rem, 6vw, 6rem); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.comparison article { min-height: 28rem; padding: clamp(2rem, 4vw, 4rem); }
.comparison-muted { background: white; }
.comparison-primary { background: var(--blue); color: white; position: relative; overflow: hidden; }
.comparison-primary::after { content: ""; position: absolute; width: 20rem; height: 20rem; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; right: -8rem; bottom: -7rem; box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.02); }
.card-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.comparison-primary .card-label { color: rgba(255,255,255,.55); }
.comparison h3 { font-size: clamp(2rem, 3.4vw, 3.7rem); letter-spacing: -.045em; line-height: 1.03; font-weight: 480; margin: 1rem 0 3.2rem; }
.comparison ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; position: relative; z-index: 1; }
.comparison li { padding-left: 1.5rem; position: relative; }
.comparison li::before { content: ""; position: absolute; left: 0; top: .68rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--blue); }
.comparison-primary li::before { background: var(--lime); }
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 6rem; }
.scope-card { min-height: 17rem; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; transition: background .25s ease, transform .25s ease; }
.scope-card:hover { background: white; transform: translateY(-3px); box-shadow: 0 18px 50px rgba(4,20,64,.07); z-index: 1; }
.scope-card > span { font-size: .74rem; color: var(--blue-bright); }
.scope-card h3 { font-size: 1.45rem; line-height: 1.1; margin: 3rem 0 .75rem; letter-spacing: -.03em; }
.scope-card p { margin: 0; color: var(--muted); }

.platform { display: grid; grid-template-columns: 1.02fr .98fr; background: var(--blue-deep); color: white; }
.platform-media { min-height: 55rem; position: relative; overflow: hidden; }
.platform-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, var(--blue-deep)); }
.platform-media img { width: 100%; height: 100%; object-fit: cover; }
.media-caption { position: absolute; left: 2rem; bottom: 2rem; z-index: 1; color: rgba(255,255,255,.65); font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; }
.platform-copy { padding: clamp(5rem, 8vw, 8rem) max(4vw, 4rem); }
.platform h2 { margin-top: 2.5rem; }
.platform-copy > p { font-size: 1.08rem; color: rgba(255,255,255,.65); max-width: 42rem; margin: 1.8rem 0 3rem; }
.platform-list { border-top: 1px solid rgba(255,255,255,.16); }
.platform-list > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.platform-list span { font-size: .7rem; color: rgba(255,255,255,.4); padding-top: .25rem; }
.platform-list p { margin: 0; color: rgba(255,255,255,.56); }
.platform-list strong { display: block; color: white; font-size: 1.08rem; margin-bottom: .25rem; }

.map-section { height: 100svh; min-height: 0; display: grid; grid-template-columns: minmax(22rem, .7fr) minmax(0, 1.3fr); overflow: hidden; background: #020b27; color: white; }
.map-panel { min-height: 0; padding: 5.75rem max(2rem, 4vw) 1.25rem; position: relative; z-index: 2; display: flex; flex-direction: column; overflow: hidden; box-shadow: 30px 0 80px rgba(0,0,0,.22); }
.map-panel h2 { margin: 1.15rem 0 .75rem; font-size: clamp(2.35rem, 3.7vw, 4rem); line-height: .96; letter-spacing: -.055em; font-weight: 470; }
.map-panel > p:not(.map-note) { color: rgba(255,255,255,.62); max-width: 38rem; margin: 0; }
.map-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 .7rem; }
.map-filters button { border: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.63); background: transparent; border-radius: 999px; padding: .55rem .75rem; cursor: pointer; font-size: .74rem; }
.map-filters button span { opacity: .5; margin-left: .25rem; }
.map-filters button.active { color: var(--blue-deep); background: white; border-color: white; }
.map-project-list { min-height: 0; flex: 1 1 auto; border-top: 1px solid rgba(255,255,255,.14); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.26) transparent; }
.map-project-list button { width: 100%; min-height: 3rem; display: grid; grid-template-columns: .65rem 1fr auto; gap: .7rem; align-items: center; text-align: left; color: white; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: transparent; cursor: pointer; padding: .55rem .35rem; transition: background .2s ease, padding .2s ease; }
.map-project-list button:hover, .map-project-list button:focus-visible, .map-project-list button.selected { background: rgba(255,255,255,.07); padding-left: .75rem; padding-right: .75rem; }
.map-project-list button.is-filtered { display: none; }
.map-project-list i, .map-legend i { width: .48rem; height: .48rem; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 .2rem rgba(255,255,255,.08); }
i.delivered { background: var(--lime); }
i.in-market { background: #47b7ff; }
i.upcoming { background: #ff8fe8; }
.map-project-list span { display: grid; font-size: .7rem; color: rgba(255,255,255,.45); }
.map-project-list strong { color: white; font-size: .86rem; font-weight: 650; }
.map-project-list b { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); }
.map-note { flex: 0 0 auto; font-size: .66rem; color: rgba(255,255,255,.35); margin: .65rem 0 0; }
.map-stage { min-height: 0; height: 100%; position: relative; overflow: hidden; background: radial-gradient(circle at center, #123376, #020b27 70%); }
#dubai-map { position: absolute; inset: 0; }
.maplibregl-map { font-family: inherit; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-top-right { top: 1rem; right: 1rem; }
.maplibregl-ctrl-group { overflow: hidden; border-radius: .8rem !important; box-shadow: 0 10px 30px rgba(0,0,0,.18) !important; }
.maplibregl-popup-content { padding: 0 !important; border-radius: 1rem !important; overflow: hidden; box-shadow: 0 24px 60px rgba(1,8,33,.28) !important; }
.maplibregl-popup-close-button { width: 2rem; height: 2rem; color: var(--ink); font-size: 1.2rem; z-index: 2; }
.maplibregl-popup-tip { border-top-color: white !important; }
.map-popup { min-width: 13rem; padding: 1rem 1.1rem 1.1rem; color: var(--ink); }
.map-popup span { color: var(--blue-bright); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.map-popup h3 { margin: .35rem 1rem .25rem 0; font-size: 1.05rem; line-height: 1.1; }
.map-popup p { margin: 0; color: var(--muted); font-size: .73rem; }
.map-marker { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid white; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--blue-deep); background: white; box-shadow: 0 10px 25px rgba(1,8,33,.32); transition: transform .2s ease, opacity .2s ease; }
.map-marker::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--lime); }
.map-marker.in-market::before { background: #47b7ff; }
.map-marker.upcoming::before { background: #ff8fe8; }
.map-marker:hover, .map-marker:focus-visible, .map-marker.selected { transform: scale(1.22); }
.map-marker.is-filtered { opacity: 0; pointer-events: none; }
.map-loading, .map-fallback { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; background: #061a4a; color: rgba(255,255,255,.65); transition: opacity .35s ease, visibility .35s ease; }
.map-loading.hidden { opacity: 0; visibility: hidden; }
.map-loading span { width: 2rem; height: 2rem; border: 2px solid rgba(255,255,255,.18); border-top-color: white; border-radius: 50%; animation: map-spin .8s linear infinite; }
.map-loading p { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.map-fallback[hidden] { display: none; }
.map-fallback p { margin: 0; color: white; font-size: 1.1rem; }
.map-fallback span { font-size: .8rem; }
.map-legend { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; display: flex; gap: .8rem; padding: .75rem .85rem; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; background: rgba(3,12,41,.78); backdrop-filter: blur(12px); }
.map-legend span { display: flex; align-items: center; gap: .4rem; font-size: .65rem; color: rgba(255,255,255,.7); }
.map-reset { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem; border: 1px solid rgba(255,255,255,.26); background: rgba(3,12,41,.78); backdrop-filter: blur(12px); color: white; border-radius: 999px; padding: .75rem 1rem; cursor: pointer; font-size: .72rem; }
@keyframes map-spin { to { transform: rotate(360deg); } }

.section-heading h2 { max-width: 14ch; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 28rem; grid-auto-flow: dense; gap: 1rem; margin-top: 5rem; }
.project-card { position: relative; overflow: hidden; border-radius: 1.25rem; background: var(--blue-deep); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card:hover img { transform: scale(1.04); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,12,40,.94), rgba(2,12,40,.02) 65%); }
.project-large { grid-row: span 2; }
.project-wide { grid-column: span 2; }
.project-overlay { position: absolute; z-index: 2; inset: auto 1.35rem 1.35rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; color: white; }
.project-overlay p { margin: 0 0 .35rem; font-size: .69rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.project-overlay h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.05; }
.project-overlay span { display: block; margin-top: .35rem; font-size: .72rem; color: rgba(255,255,255,.52); }
.status { flex: 0 0 auto; font-size: .62rem; text-transform: uppercase; letter-spacing: .11em; border-radius: 999px; padding: .45rem .6rem; font-weight: 750; }
.status.sold { background: var(--lime); color: #0a2600; }
.status.current { background: white; color: var(--blue-deep); }
.status.upcoming { background: #ff8fe8; color: #3a0b31; }
.project-upcoming { background: radial-gradient(circle at 78% 18%, #1746a5 0, #092b7d 30%, var(--blue-deep) 72%); }
.project-upcoming::after { background: linear-gradient(to top, rgba(2,12,40,.6), transparent 55%); }
.upcoming-art { position: absolute; inset: 0; overflow: hidden; }
.upcoming-art::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.upcoming-art i { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; right: -6rem; top: -6rem; width: 16rem; height: 16rem; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.upcoming-art i:nth-child(2) { width: 26rem; height: 26rem; right: -11rem; top: -11rem; border-color: rgba(255,255,255,.14); }
.upcoming-art i:nth-child(3) { width: 36rem; height: 36rem; right: -16rem; top: -16rem; border-color: rgba(255,255,255,.08); }
.project-upcoming:hover .upcoming-art i { transform: scale(1.06); }
.upcoming-tag { position: absolute; z-index: 2; left: 1.35rem; top: 1.35rem; margin: 0; padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(3,12,41,.5); backdrop-filter: blur(10px); color: rgba(255,255,255,.72); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.project-upcoming .project-overlay span { color: rgba(255,255,255,.62); }

.case-study { margin: 0 max(4vw, 1.25rem) clamp(5.5rem, 10vw, 10rem); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 42rem; border-radius: var(--radius); overflow: hidden; background: white; box-shadow: var(--shadow); }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-copy { padding: clamp(3rem, 6vw, 6rem); display: flex; flex-direction: column; justify-content: center; }
.eyebrow-dark { color: var(--blue); }
.case-copy h2 { font-size: clamp(2.3rem, 4.4vw, 4.7rem); }
.case-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; margin: 1.75rem 0 2rem; }
.case-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.case-tags span { border: 1px solid var(--line); border-radius: 999px; padding: .55rem .75rem; color: var(--blue); font-size: .75rem; font-weight: 650; }

.process { background: white; }
.process-list { list-style: none; padding: 0; margin: 5rem 0 0; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 5rem 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: center; transition: padding .25s ease, background .25s ease; }
.process-list li:hover { padding-left: 1.25rem; padding-right: 1.25rem; background: var(--paper); }
.process-list > li > span { color: var(--blue-bright); font-size: .72rem; }
.process-list div { display: grid; grid-template-columns: minmax(12rem, .45fr) 1fr; gap: 3rem; align-items: center; }
.process-list h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.04em; font-weight: 500; }
.process-list p { margin: 0; color: var(--muted); }

.team { display: grid; grid-template-columns: .72fr 1.28fr; background: var(--ink); color: white; }
.team-copy { padding: clamp(5rem, 8vw, 8rem) max(4vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.team-copy h2 { margin-top: 2.5rem; }
.team-copy > p { color: rgba(255,255,255,.6); font-size: 1.05rem; margin: 1.7rem 0 3rem; }
.experience-callout { padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.experience-callout strong { font-size: 1.55rem; }
.experience-callout span { color: rgba(255,255,255,.55); font-size: .84rem; max-width: 18rem; }
.team-photo { min-height: 43rem; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.contact { padding: clamp(5.5rem, 10vw, 10rem) max(4vw, 1.25rem) 3rem; color: white; background: radial-gradient(circle at 75% 30%, #234ca9, var(--blue-deep) 48%); }
.contact-top { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; padding-bottom: 5rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.contact-top .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.contact-top h2 { max-width: 14ch; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5vw; padding-top: 3rem; }
.contact-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.contact-grid p { text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.45); font-size: .72rem; font-weight: 700; margin: 0 0 1.1rem; }
.contact-grid address { font-style: normal; color: rgba(255,255,255,.7); min-height: 4rem; }
.contact-grid a { margin-top: .65rem; border-bottom: 1px solid rgba(255,255,255,.3); }
.contact-promise span { padding: .72rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); }

footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem max(4vw, 1.25rem); background: #02091e; color: rgba(255,255,255,.5); font-size: .75rem; }
footer p { margin: 0; }
.brand-footer { color: white; }
.brand-footer .brand-mark { width: 1.95rem; height: 1.95rem; }
.brand-footer .brand-type strong { font-size: .88rem; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .site-nav { gap: 1rem; }
  .hero { grid-template-columns: 1fr .72fr; }
  .hero h1 { font-size: clamp(3.3rem, 7vw, 6rem); }
  .scope-grid { grid-template-columns: repeat(2, 1fr); }
  .platform { grid-template-columns: .8fr 1.2fr; }
  .map-section { grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.2fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .project-large { grid-row: span 1; }
  .project-wide { grid-column: span 1; }
  .case-study { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: .9fr 1.1fr; }
}

@media (max-width: 820px) {
  .site-header { height: 4.75rem; }
  .menu-toggle { display: block; position: relative; z-index: 2; }
  .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 6rem 1.5rem; background: radial-gradient(circle at 80% 10%, #10357f, var(--blue-deep) 55%); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); font-size: 1.75rem; }
  .site-nav.open { transform: translateX(0); }
  .nav-cta { margin-top: 1.25rem; font-size: 1rem; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(.4rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.4rem) rotate(-45deg); }
  .hero { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto; padding-top: 8.5rem; }
  .hero-copy { z-index: 2; }
  .hero-visual { width: min(34rem, 100%); min-height: 22rem; justify-self: center; margin-top: -1rem; }
  .visual-label { right: 0; }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .intro-head, .section-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .comparison { grid-template-columns: 1fr; }
  .comparison article { min-height: auto; }
  .platform { grid-template-columns: 1fr; }
  .platform-media { min-height: 30rem; }
  .platform-media::after { background: linear-gradient(to bottom, transparent 60%, var(--blue-deep)); }
  .map-section { height: 100svh; grid-template-columns: 1fr; grid-template-rows: minmax(0, 58%) minmax(0, 42%); }
  .map-panel { min-height: 0; padding: 5.25rem 1.25rem .75rem; box-shadow: none; }
  .map-panel h2 { margin: .75rem 0 .5rem; font-size: clamp(2rem, 7vw, 2.8rem); }
  .map-panel > p:not(.map-note) { display: none; }
  .map-filters { margin: .75rem 0 .5rem; }
  .map-note { display: none; }
  .map-stage { min-height: 0; height: 100%; }
  .case-study { grid-template-columns: 1fr; }
  .case-media { min-height: 27rem; }
  .team { grid-template-columns: 1fr; }
  .team-photo { min-height: 30rem; }
  .contact-top { grid-template-columns: 1fr; align-items: start; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-promise { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 18rem; }
  .visual-label { bottom: 6%; }
  .hero-metrics { grid-template-columns: 1fr 1fr; }
  .hero-metrics > div { padding-right: .25rem; }
  .hero-metrics strong { font-size: 1.35rem; }
  .hero-metrics span { font-size: .62rem; }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-card { min-height: 14rem; }
  .project-grid { grid-template-columns: 1fr; grid-auto-rows: 30rem; }
  .map-panel { padding-left: 1.25rem; padding-right: 1.25rem; }
  .map-stage { min-height: 0; }
  .map-legend { left: .75rem; bottom: .75rem; flex-direction: column; gap: .35rem; }
  .map-reset { right: .75rem; bottom: .75rem; }
  .case-study { margin-left: 0; margin-right: 0; border-radius: 0; }
  .process-list li { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .process-list div { grid-template-columns: 1fr; gap: .4rem; }
  .team-photo { min-height: 26rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-promise { grid-column: auto; }
  footer { align-items: flex-start; flex-direction: column; }
  footer p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}