/* =========================================================
   One Media Group — Welcome page
   Design tokens, type scale, spacing and motion mirror the
   current OMG homepage (dream.onemediagroup.com) 1:1.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --background: 0 0% 97%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --muted: 0 0% 94%;
  --muted-foreground: 0 0% 38%;
  --border: 0 0% 88%;
  --ink: 0 0% 10%;
  --paper: 0 0% 97%;
  --hot: 14 79% 57%;

  --shadow-brutal-lg: 0 30px 80px -30px hsl(0 0% 10% / .45);
  --ease: cubic-bezier(.25, .1, .25, 1);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  border: 0 solid hsl(var(--border));
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  line-height: inherit;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; padding: 0; cursor: pointer; }

::selection { background: hsl(var(--hot)); color: hsl(var(--paper)); }

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

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

/* ---------- Type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3em;
}

.text-hot { color: hsl(var(--hot)); }
.text-ink { color: hsl(var(--ink)); }
.text-muted { color: hsl(var(--muted-foreground)); }

/* Grain overlay used on dark hero blocks */
.noise { position: relative; }
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Page shell ---------- */
.page {
  min-height: 100vh;
  background: hsl(var(--paper));
  color: hsl(var(--ink));
}

main {
  padding-top: 6rem;
  animation: page-in .4s var(--ease) both;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

.icon-arrow { width: 1.25rem; height: 1.25rem; transition: transform .3s; flex: none; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid hsl(var(--ink));
  background: hsl(var(--ink));
  transition: all .5s ease-in-out;
}
.site-header.is-overlay {
  border-color: transparent;
  background: hsl(var(--ink) / .4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.brand { display: flex; align-items: center; }
.brand img { height: 4rem; width: auto; }

.nav-desktop {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsl(var(--paper));
}
.nav-desktop a { transition: color .15s; }
.nav-desktop a:hover,
.nav-desktop a.is-active { color: hsl(var(--hot)); }

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid hsl(var(--paper));
  color: hsl(var(--paper));
  transition: color .15s, background-color .15s;
}
.menu-toggle:hover { background: hsl(var(--paper)); color: hsl(var(--ink)); }
.menu-toggle svg { width: 1.25rem; height: 1.25rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  border-top: 2px solid hsl(var(--paper) / .2);
  background: hsl(var(--ink));
  padding: .75rem 1.5rem;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile nav { display: flex; flex-direction: column; gap: .25rem; font-size: 1rem; line-height: 1.5rem; }
.nav-mobile a {
  display: block;
  border-bottom: 1px solid hsl(var(--paper) / .15);
  padding: .625rem 0;
  font-weight: 500;
  color: hsl(var(--paper));
  transition: color .15s;
}
.nav-mobile a:hover,
.nav-mobile a.is-active { color: hsl(var(--hot)); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  margin-top: -6rem;
  overflow: hidden;
  background: hsl(var(--ink));
  color: hsl(var(--paper));
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.hero-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 35% center;
}

.hero-shade-a {
  position: absolute; inset: 0;
  background-image: linear-gradient(to bottom right,
    hsl(220 65% 7% / .79), hsl(215 55% 14% / .57), hsl(205 50% 22% / .25));
}
.hero-shade-b {
  position: absolute; inset: 0;
  background-image: linear-gradient(to top,
    hsl(220 70% 5% / .70), transparent, hsl(220 60% 8% / .15));
}

.hero-grid { position: relative; display: grid; }
.hero-copy {
  position: relative;
  padding: 10rem 1.5rem 3rem;
}

.hero .eyebrow {
  margin-bottom: 3rem;
  color: hsl(var(--paper) / .65);
}

.hero h1 {
  font-size: 12vw;
  filter: drop-shadow(0 2px 30px rgba(0, 0, 0, .55));
}

.hero-lede {
  max-width: 36rem;
  margin-top: 3rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--paper) / .85);
}

/* hero entrance (plays on load) */
.hero-in { animation: rise var(--dur, .5s) var(--ease) var(--delay, 0s) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--y, 14px)); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Sections
   ========================================================= */
.section { padding: 3rem 1.5rem; }
.section-inner { max-width: 1500px; margin: 0 auto; }

/* [02] Who we are */
.who {
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .4);
}
.who .section-inner { display: grid; gap: 2rem; }
.who .eyebrow { margin-bottom: 1.5rem; }

.h-section {
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: hsl(var(--ink));
}

.who-lede {
  font-size: 1.5rem;
  line-height: 1.625;
  color: hsl(var(--ink));
}
.who-body {
  max-width: 42rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* [03] Operating principles */
.principles { background: hsl(var(--paper)); }
.principles > .section-inner > .eyebrow {
  margin-bottom: 2rem;
  color: hsl(var(--muted-foreground));
}
.principles-grid { display: grid; gap: 1.5rem; }
.principles-stack { display: grid; gap: 1.5rem; }

.card-ink {
  border-radius: 1rem;
  background: hsl(var(--ink));
  padding: 2rem;
  color: hsl(var(--paper));
}
.card-ink .eyebrow { margin-bottom: 1.5rem; color: hsl(var(--hot)); }
.card-ink h3 { font-size: 2.25rem; line-height: 2.5rem; }
.card-ink p {
  max-width: 32rem;
  margin-top: 1.5rem;
  line-height: 1.625;
  color: hsl(var(--paper) / .7);
}

.card-light {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 1.5rem;
}
.card-light .eyebrow { margin-bottom: 1.5rem; color: hsl(var(--hot)); }
.card-light h3 { font-size: 1.5rem; line-height: 2rem; color: hsl(var(--ink)); }
.card-light p {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* [06] Next step */
.next { padding: 3.5rem 1.5rem; background: hsl(var(--paper)); }
.next .section-inner { display: grid; align-items: end; gap: 3rem; }
.next .eyebrow { margin-bottom: 1.5rem; color: hsl(var(--hot)); }

.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  border-radius: 9999px;
  background: hsl(var(--ink));
  padding: 1.25rem 2rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsl(var(--paper));
  transition: all .3s;
}
.btn-solid:hover { background: hsl(var(--hot)); }
.btn-solid:hover .icon-arrow { transform: rotate(45deg); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--paper) / .4);
  padding: .875rem 1.75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsl(var(--paper));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: all .3s;
}
.btn-outline .icon-arrow { width: 1rem; height: 1rem; transition: transform .15s, color .15s; }
.btn-outline:hover { border-color: hsl(var(--paper)); background: hsl(var(--paper) / .1); }
.btn-outline:hover .icon-arrow { transform: rotate(45deg); color: hsl(var(--hot)); }

/* =========================================================
   Inner-page hero (Contact) — same block the live site uses
   for every inner page
   ========================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 55vh;
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  padding: 4rem 1.5rem 3rem;
}
.page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.page-hero-body { position: relative; }
.page-hero .eyebrow { margin-bottom: 1.5rem; color: hsl(var(--paper) / .65); }
.page-hero h1 {
  max-width: 64rem;
  font-size: 12vw;
  line-height: .95;
  filter: drop-shadow(0 2px 30px rgba(0, 0, 0, .55));
}
.page-hero-lede {
  max-width: 48rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--paper) / .85);
}

/* small mono section label ("Our offices", "Direct lines"...) */
.label-q {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--muted-foreground));
}

/* =========================================================
   Contact — offices
   ========================================================= */
.c-section {
  border-bottom: 2px solid hsl(var(--ink));
  padding: 4rem 1.5rem;
}

.offices-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.offices-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: 2px solid hsl(var(--ink));
  background: hsl(var(--ink));
}
.office-col { background: hsl(var(--paper)); padding: 1.5rem; }
.office-col .group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: hsl(var(--hot));
}
.office-col ul { margin-top: 1.25rem; }
.office-col li + li { margin-top: 1rem; }
.office-city { font-size: 1.25rem; line-height: 1.75rem; }
.office-country {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: hsl(var(--muted-foreground));
}
.office-addr, .office-note {
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}
.office-note { color: hsl(var(--muted-foreground) / .7); }

/* map */
.map-wrap {
  position: relative;
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid hsl(var(--paper) / .15);
  background: hsl(0 0% 7%);
  padding: 1rem;
}
.map-svg { display: block; width: 100%; height: auto; }
.map-pin { cursor: pointer; }
.map-pin:focus-visible { outline: none; }
.map-pin:focus-visible .pin-dot { stroke: #fff; stroke-width: 1.5; }
.map-arc { transition: all .3s; }
.map-pin-ring, .map-pin-dot { transition: r .3s ease, fill .2s ease; }
.map-pin-label { transition: fill .2s ease; pointer-events: none; user-select: none; }

/* office drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(0 0 0 / .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: hsl(0 0% 5%);
  border-left: 1px solid hsl(var(--paper) / .1);
  color: hsl(var(--paper));
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .5s;
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }

.drawer-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--paper) / .1);
  background: hsl(0 0% 5%);
}
.drawer-country {
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: hsl(var(--paper) / .3);
}
.drawer-citytag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--paper) / .7);
}
.drawer-close {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid hsl(var(--paper) / .2);
  border-radius: .125rem;
  color: hsl(var(--paper) / .7);
  transition: color .15s, background-color .15s, border-color .15s;
}
.drawer-close svg { width: .875rem; height: .875rem; }
.drawer-close span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.drawer-close:hover { background: #e8520a; border-color: #e8520a; color: hsl(var(--paper)); }

.drawer-photo { position: relative; flex-shrink: 0; height: 10rem; overflow: hidden; }
.drawer-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.drawer-photo-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, hsl(0 0% 5%), hsl(0 0% 5% / .3), transparent);
}
.drawer-landmark {
  position: absolute;
  bottom: .75rem;
  left: 1.25rem;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--paper) / .4);
}

.drawer-body { flex: 1 1 0%; overflow-y: auto; padding: 1.25rem 1.5rem; }
.drawer-body > * + * { margin-top: 1.25rem; }

.drawer-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.drawer-title { font-size: 2.25rem; line-height: 1; color: hsl(var(--paper)); }
.drawer-badge {
  flex-shrink: 0;
  padding: .25rem .625rem;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  border: 1px solid;
}
.drawer-badge.t-global   { background: hsl(var(--hot) / .2);  color: hsl(var(--hot)); border-color: hsl(var(--hot) / .3); }
.drawer-badge.t-regional { background: rgb(249 115 22 / .15); color: #fb923c; border-color: rgb(249 115 22 / .3); }
.drawer-badge.t-other    { background: hsl(var(--paper) / .1); color: hsl(var(--paper) / .5); border-color: hsl(var(--paper) / .15); }

.drawer-time {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid hsl(var(--paper) / .1);
  background: hsl(var(--paper) / .05);
}
.drawer-time > svg { flex-shrink: 0; width: 1rem; height: 1rem; color: hsl(var(--hot)); }
.drawer-time-main { flex: 1 1 0%; min-width: 0; }
.drawer-micro {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--paper) / .4);
  margin-bottom: .125rem;
}
.drawer-clock {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--paper));
}
.drawer-tz { flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; color: hsl(var(--paper) / .3); }

.drawer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--paper) / .1);
}
.drawer-fact { display: flex; align-items: flex-start; gap: .625rem; }
.drawer-fact > svg { flex-shrink: 0; width: .875rem; height: .875rem; margin-top: .125rem; color: hsl(var(--hot)); }
.drawer-fact .drawer-micro { font-size: 8px; color: hsl(var(--paper) / .3); }
.drawer-fact p:last-child { font-size: 13px; line-height: 1.375; color: hsl(var(--paper) / .75); }

.drawer-all { padding-top: 1rem; border-top: 1px solid hsl(var(--paper) / .1); }
.drawer-all .drawer-micro { color: hsl(var(--paper) / .3); margin-bottom: .75rem; }
.drawer-all-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
.drawer-all-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border: 1px solid hsl(var(--paper) / .1);
  text-align: left;
  transition: all .15s;
}
.drawer-all-btn:hover { border-color: hsl(14 100% 60% / .5); background: hsl(14 100% 60% / .05); }
.drawer-all-btn.is-current { border-color: hsl(14 100% 60% / .5); background: hsl(14 100% 60% / .08); cursor: default; }
.drawer-all-btn > div { min-width: 0; }
.drawer-all-city {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--paper) / .7);
  transition: color .15s;
}
.drawer-all-btn:hover .drawer-all-city { color: hsl(var(--paper)); }
.drawer-all-btn.is-current .drawer-all-city { color: hsl(14 100% 60%); }
.drawer-all-time {
  margin-top: .125rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--paper) / .35);
}
.drawer-dot {
  flex-shrink: 0;
  width: .5rem;
  height: .5rem;
  margin-left: .5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
}

/* =========================================================
   Contact — direct lines
   ========================================================= */
.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 2px solid hsl(var(--ink));
}
.dl-link {
  display: block;
  padding: 1.5rem;
  border: 0 solid hsl(var(--ink));
  transition: color .3s, background-color .3s;
}
.dl-link:not(.is-last) { border-bottom-width: 2px; }
.dl-link:hover { background: hsl(var(--ink)); color: hsl(var(--paper)); }
.dl-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--muted-foreground));
}
.dl-sub {
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--muted-foreground) / .6);
}
.dl-desc {
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.dl-mail { margin-top: .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; word-break: break-all; }
.dl-more {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--hot));
}
.dl-more svg { width: .75rem; height: .75rem; }
.dl-link:hover .dl-label { color: hsl(var(--paper) / .7); }
.dl-link:hover .dl-sub   { color: hsl(var(--paper) / .5); }
.dl-link:hover .dl-desc  { color: hsl(var(--paper) / .7); }

.protocol {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--muted-foreground));
}

/* =========================================================
   Contact — enquiry form
   ========================================================= */
.enquiry { padding: 5rem 1.5rem; }
.enquiry-grid { display: grid; gap: 3rem; }
.enquiry-intro { margin-top: 1.25rem; color: hsl(var(--muted-foreground)); }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: 2px solid hsl(var(--ink));
  background: hsl(var(--ink));
}
.field { display: block; background: hsl(var(--paper)); padding: 1.25rem; }
.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--muted-foreground));
}
.field input, .field select, .field textarea {
  display: inline-block;
  width: 100%;
  margin: .5rem 0 0;
  padding: .5rem 0;
  border: 0 solid hsl(var(--ink) / .3);
  border-bottom-width: 1px;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  color: inherit;
  outline: none;
  transition: color .15s, border-color .15s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: hsl(var(--hot)); }
.field.has-error input, .field.has-error textarea { border-color: #ef4444; }
.field-error {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #ef4444;
}
.form-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ef4444;
}
.form-note[hidden] { display: none; }

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border: 2px solid hsl(var(--ink));
  background: hsl(var(--ink));
  font-weight: 600;
  color: hsl(var(--paper));
  box-shadow: 0 1px 2px 0 hsl(0 0% 10% / .06);
  transition: all .3s;
}
.btn-submit:hover:not(:disabled) {
  transform: translate(.25rem, .25rem);
  box-shadow: none;
  background: hsl(var(--hot));
  border-color: hsl(var(--hot));
}
.btn-submit:hover:not(:disabled) .icon-arrow { transform: rotate(45deg); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }

.form-done {
  border: 2px solid hsl(var(--ink));
  background: hsl(var(--paper));
  padding: 2.5rem;
}
.form-done[hidden] { display: none; }
.form-done h3 { margin-top: 1rem; font-size: 1.875rem; line-height: 2.25rem; }
.form-done p:last-child { margin-top: 1rem; color: hsl(var(--muted-foreground)); }
.form-done a { color: hsl(var(--hot)); text-decoration: underline; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--paper));
  padding: 3.5rem 1.5rem;
}
.footer-grid { display: grid; gap: 2.5rem; }
.footer-brand img { height: 4rem; width: auto; }
.footer-col .label {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--muted-foreground));
}
.footer-col li { font-size: .875rem; line-height: 1.25rem; }
.footer-col a { transition: color .15s; }
.footer-col a:hover { color: hsl(var(--hot)); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 2.5rem;
  border-top: 1px solid hsl(var(--border));
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: hsl(var(--muted-foreground));
}

/* =========================================================
   Scroll reveal (driven by script.js, mirrors the site's
   whileInView variants: fade-up / slide-left / fade-in)
   ========================================================= */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur, .6s) var(--ease) var(--d, 0s),
    transform var(--dur, .6s) var(--ease) var(--d, 0s);
}
.js [data-reveal="up"]   { transform: translateY(var(--y, 32px)); }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* staggered children (principle cards) */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .5s var(--ease) calc(var(--i, 0) * .1s),
    transform .5s var(--ease) calc(var(--i, 0) * .1s);
}
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

/* eyebrow wipe */
.js [data-wipe] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s linear;
}
.js [data-wipe].is-visible { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  main, .hero-in { animation: none; }
  .js [data-reveal], .js [data-stagger] > *, .js [data-wipe] {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
  .hero-media, .page-hero-media { transform: none !important; }
}

/* =========================================================
   Breakpoints (match the live site: 768 / 1024)
   ========================================================= */
@media (min-width: 640px) {
  /* reserved — no sm overrides on this page */
}

@media (min-width: 768px) {
  main { padding-top: 7rem; }

  .header-inner { padding-left: 2.5rem; padding-right: 2.5rem; }
  .brand img { height: 5rem; }
  .nav-mobile { max-height: calc(100vh - 7rem); }

  .hero { margin-top: -7rem; }
  .hero-media { height: 140%; }
  .hero-media img { object-position: center; }
  .hero-copy { padding: 12rem 3rem 4rem; }
  .hero h1 { font-size: 7.5vw; }

  .section { padding: 4rem 3rem; }
  .who { padding: 4rem 3rem; }
  .principles { padding: 4rem 3rem; }
  .next { padding: 5rem 3rem; }

  .who-lede { font-size: 1.875rem; line-height: 2.25rem; }

  .card-ink { padding: 2.5rem; }
  .card-light { padding: 2rem; }
  .card-light h3 { font-size: 1.875rem; line-height: 2.25rem; }


  .site-footer { padding-left: 2.5rem; padding-right: 2.5rem; }
  .footer-brand img { height: 5rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .menu-toggle, .nav-mobile { display: none !important; }

  .hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-copy { grid-column: span 3 / span 3; padding: 14rem 5rem 5rem; }
  .hero h1 { font-size: 5.4vw; }

  .section { padding-left: 5rem; padding-right: 5rem; }
  .who, .principles, .next { padding-left: 5rem; padding-right: 5rem; }

  .who .section-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .who-head { grid-column: span 2 / span 2; }
  .who-copy { grid-column: span 3 / span 3; padding-top: .5rem; }

  .h-section, .card-ink h3 { font-size: 45px; }

  .principles-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .principles-grid > .card-ink { grid-column: span 3 / span 3; }
  .principles-stack { grid-column: span 2 / span 2; }

  .next .section-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .next-copy { grid-column: span 3 / span 3; }
  .next-cta { grid-column: span 2 / span 2; text-align: right; }


  .footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .footer-brand { grid-column: span 2 / span 2; }
  .footer-contact { grid-column: 5 / span 2; }
}

/* =========================================================
   Contact page — responsive
   ========================================================= */
@media (min-width: 640px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-link.is-even { border-right-width: 2px; }
}

@media (min-width: 768px) {
  .page-hero { padding: 5rem 3rem 4rem; }
  .page-hero-media { height: 140%; }
  .page-hero h1 { font-size: 7.5vw; }

  .c-section { padding: 5rem 2.5rem; }
  .offices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .office-col { padding: 2rem; }
  .map-wrap { padding: 1.5rem; }
  .drawer { width: 480px; }

  .dl-link { padding: 2rem; }

  .enquiry { padding: 7rem 2.5rem; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: span 2 / span 2; }
  .form-done { padding: 3.5rem; }
  .form-done h3 { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .page-hero { padding: 7rem 5rem 5rem; }
  .page-hero h1 { font-size: 5.4vw; }

  .offices-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .drawer { width: 520px; }

  .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dl-link:not(.is-last) { border-bottom-width: 0; border-right-width: 2px; }

  .enquiry-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .enquiry-intro-col { grid-column: span 5 / span 5; }
  .enquiry-form-col { grid-column: span 7 / span 7; }
}