/* ============================================================
   URBANLINKS CONSULTING — Glass system
   Ice White #F5F6FC · Purple #6232FF · Midnight #14141A · Blue #3D6EE3
   Lime #CEFF1C is kept as a rare accent (the brand sheet labels swatch
   04 "Lime" but prints a blue; blue drives the design, lime punctuates).
   Type: Manrope 200-800
   ============================================================ */

:root {
  --ice: #F5F6FC;
  --purple: #6232FF;
  --purple-soft: #7C52FF;
  --midnight: #14141A;
  --blue: #3D6EE3;
  --blue-soft: #5B8BF5;
  --lime: #CEFF1C;
  --black: #0A0A0E;

  --space-1: #9DA2B3;
  --space-2: #6E7180;

  /* glass */
  --glass: rgba(245, 246, 252, 0.055);
  --glass-2: rgba(245, 246, 252, 0.085);
  --brd: rgba(245, 246, 252, 0.13);
  --brd-2: rgba(245, 246, 252, 0.22);
  --blur: saturate(150%) blur(22px);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 22px;
}

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

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

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--ice);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--purple); color: var(--ice); }

:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

section { scroll-margin-top: 92px; }

.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;
}

/* ============ Aurora backdrop ============
   The thing the glass actually refracts. Fixed, behind everything. */

.aurora {
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.85;
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora .a1 {
  width: 46vw; height: 46vw; left: -6%; top: 4%;
  background: radial-gradient(circle at 30% 30%, var(--purple), transparent 62%);
  animation: drift1 26s var(--ease) infinite alternate;
}
.aurora .a2 {
  width: 52vw; height: 52vw; right: -10%; top: 12%;
  background: radial-gradient(circle at 60% 40%, var(--blue), transparent 64%);
  animation: drift2 32s var(--ease) infinite alternate;
}
.aurora .a3 {
  width: 40vw; height: 40vw; left: 24%; bottom: -8%;
  background: radial-gradient(circle at 50% 50%, #2B1B6B, transparent 66%);
  animation: drift3 29s var(--ease) infinite alternate;
}

@keyframes drift1 { to { transform: translate3d(14vw, 10vh, 0) scale(1.18); } }
@keyframes drift2 { to { transform: translate3d(-12vw, 16vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(8vw, -12vh, 0) scale(1.22); } }

/* Grain — keeps the large gradients from banding */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Glass primitive ============ */

.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(245, 246, 252, 0.16);
  overflow: hidden;
}

/* Specular sheen across the top edge */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg,
    rgba(245, 246, 252, 0.14) 0%,
    rgba(245, 246, 252, 0.03) 28%,
    transparent 58%);
}

/* ============ Type ============ */

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--space-1);
  margin-bottom: 1rem;
}

.h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.85rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: rgba(245, 246, 252, 0.72);
  max-width: 62ch;
}

/* Holographic wordmark treatment — echoes the brand type sheet */
.iri {
  background: linear-gradient(100deg,
    #FFFFFF 0%, #A9C6FF 18%, #B9A2FF 34%,
    #FFFFFF 50%, #E4FF8F 62%, #A9C6FF 80%, #FFFFFF 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: iri 9s linear infinite;
}
@keyframes iri { to { background-position: 300% 0; } }

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }

.section-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: var(--ice);
  box-shadow: 0 8px 26px rgba(98, 50, 255, 0.38);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(98, 50, 255, 0.5); }

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--brd-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--ice);
}
.btn-ghost:hover { background: var(--glass-2); transform: translateY(-2px); }

.btn em { font-style: normal; transition: transform 0.35s var(--ease); }
.btn:hover em { transform: translateX(4px); }

/* ============ Nav ============ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.9rem 0;
  transition: padding 0.4s var(--ease);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 0.7rem 0.5rem 1.5rem;
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.42);
  border: 1px solid transparent;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.nav.stuck .nav-inner {
  background: rgba(10, 10, 14, 0.62);
  border-color: var(--brd);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.nav-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); }

.nav-links { display: flex; gap: 0.35rem; align-items: center; }

.nav-links a {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(245, 246, 252, 0.74);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ice); background: var(--glass-2); }

.nav-cta { padding: 0.62rem 1.25rem; font-size: 0.88rem; }

.nav-toggle { display: none; padding: 0.5rem; border-radius: 10px; }
.nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ice); transition: transform 0.35s var(--ease), opacity 0.25s;
}
.nav-toggle span + span { margin-top: 5px; }

/* ============ Hero ============
   Nothing is cut out. The shot stays a whole rectangle, the aura is painted
   onto its studio paper with a multiply pass, and the footage lies over the
   top of everything at low opacity — including over her. White is multiply's
   identity, so the tint can go black on the copy side and reach pure white
   before it meets her, leaving her untinted underneath the video. */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 6rem 0 3rem;
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-plate {
  --shot-x: 70%;
  --shot-y: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--shot-x) var(--shot-y);
}

.hero-tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: linear-gradient(101deg,
    #06060A 0%, #0C0A1C 14%, #1B1146 26%,
    #3A2E86 37%, #7C86C9 47%, #C9D0EE 55%, #FFFFFF 63%);
}

/* Over the top of the whole frame, her included. Kept soft and slow-reading so
   it registers as movement in the surface rather than a second scene. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  opacity: 0.3;
  transform: scale(1.06);
  filter: blur(2px) saturate(106%);
}

/* bloom back over the darkened side so it reads as light, not just shadow */
.hero-bloom {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.55;
  background:
    radial-gradient(46% 52% at 16% 30%, rgba(98, 50, 255, 0.6), transparent 70%),
    radial-gradient(42% 48% at 34% 84%, rgba(61, 110, 227, 0.45), transparent 72%);
}

.hero-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 14, 0.6) 0%, rgba(10, 10, 14, 0.24) 9%, transparent 17%),
    linear-gradient(180deg, transparent 60%, rgba(10, 10, 14, 0.75) 88%, var(--black) 100%),
    linear-gradient(270deg, rgba(10, 10, 14, 0.55) 0%, transparent 22%);
}

.hero .container { position: relative; z-index: 1; }
.hero-copy { max-width: 660px; }

.hero-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 246, 252, 0.62);
  margin-bottom: clamp(0.9rem, 2vh, 1.6rem);
}

/* Light weight at display size — heavy grotesques read loud, not luxury. */
.hero .h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.038em;
  text-shadow: 0 2px 30px rgba(6, 6, 10, 0.5);
}
.hero .h1 .iri { font-weight: 400; }

.hero-rule {
  width: 92px;
  height: 1px;
  margin: clamp(1.1rem, 2.4vh, 2rem) 0;
  background: linear-gradient(90deg, rgba(245,246,252,0.55), transparent);
}

.hero .lead {
  color: rgba(245, 246, 252, 0.74);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  max-width: 44ch;
  text-shadow: 0 1px 18px rgba(6, 6, 10, 0.55);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: clamp(1.4rem, 2.8vh, 2.2rem);
}

/* Sits between the buttons and the stat row — glass discs so they read as
   part of the surface rather than pasted-on brand badges. */
.hero-social {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;   /* pushes them to the far end of the stat row */
}

.hero-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(245, 246, 252, 0.72);
  background: var(--glass);
  border: 1px solid var(--brd);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition:
    transform 0.35s var(--ease),
    color 0.35s var(--ease),
    background 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.hero-social a:hover {
  transform: translateY(-3px);
  color: var(--ice);
  background: var(--glass-2);
  border-color: var(--brd-2);
}

.hero-social svg { width: 17px; height: 17px; display: block; }

.hero-stats {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  margin-top: clamp(1.5rem, 3.2vh, 2.8rem);
  padding-top: clamp(1.1rem, 2.2vh, 1.8rem);
  border-top: 1px solid rgba(245, 246, 252, 0.16);
}

.hero-stats .n {
  display: block;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero-stats .l {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 246, 252, 0.55);
}

/* ============ Logo marquee ============ */

.marquee {
  position: relative;
  padding: 1.6rem 0;
  border-block: 1px solid var(--brd);
  background: rgba(245, 246, 252, 0.028);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee-track {
  display: flex;
  gap: 3.6rem;
  width: max-content;
  animation: slide 62s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee img {
  height: calc(var(--lh, 34px) * 0.85);
  width: auto;
  opacity: 0.5;
  object-fit: contain;
  transition: opacity 0.3s var(--ease);
}
.marquee img:hover { opacity: 1; }

@keyframes slide { to { transform: translateX(-50%); } }

/* ============ Service pages ============ */

.page-hero {
  position: relative;
  padding: clamp(9rem, 18vh, 12rem) 0 clamp(3rem, 6vh, 4.5rem);
  max-width: 100%;
}

.page-hero .h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.8rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.038em;
  max-width: 18ch;
}
.page-hero .h1 .iri { font-weight: 400; }

.page-hero .lead {
  margin-top: 1.5rem;
  max-width: 56ch;
  color: rgba(245, 246, 252, 0.68);
}

.page-crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--space-1);
  margin-bottom: 1.5rem;
}
.page-crumb a { color: var(--space-1); transition: color 0.3s var(--ease); }
.page-crumb a:hover { color: var(--ice); }
.page-crumb em { font-style: normal; opacity: 0.5; }

/* numbered process list */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--brd);
}

.steps li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: 0;
  align-items: start;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--brd);
}

.step-n {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--space-1);
  padding-top: 0.2rem;
}

.steps h3 {
  grid-column: 2;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.steps p {
  grid-column: 2;
  margin-top: 0.45rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(245, 246, 252, 0.64);
  max-width: 70ch;
}

@media (max-width: 620px) {
  .steps li { grid-template-columns: 1fr; gap: 0.4rem; }
  .steps h3, .steps p { grid-column: 1; }
}

/* ============ Services ============ */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.svc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.svc:hover {
  transform: translateY(-5px);
  border-color: var(--brd-2);
  background: var(--glass-2);
}

.svc h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.svc p {
  margin: 0.8rem 0 1.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(245, 246, 252, 0.66);
}

.svc-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ice);
}
.svc-cta em { font-style: normal; transition: transform 0.35s var(--ease); }
.svc:hover .svc-cta em { transform: translateX(4px); }

/* A spec panel rather than three runs of middot-separated text. Reading a
   market list as prose is work; reading it as a column is not. */
.svc-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.1rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
}

.spec-col { padding: 0 clamp(0.9rem, 2vw, 1.8rem); }
.spec-col:first-child { padding-left: 0; }
.spec-col:last-child { padding-right: 0; }
.spec-col + .spec-col { border-left: 1px solid var(--brd); }

.svc-meta h3 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--space-1);
  margin-bottom: 0.9rem;
}

.spec-col ul { display: grid; gap: 0.42rem; }

.spec-col li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(245, 246, 252, 0.82);
}

/* a hairline tick rather than a bullet — quieter, and it lines the column up */
.spec-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--space-1);
}

/* the prose variant, where each column is a sentence rather than a list */
.svc-meta-prose { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-meta-prose p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(245, 246, 252, 0.7);
}
.svc-meta-prose > div { padding: 0 clamp(0.9rem, 2vw, 1.8rem); }
.svc-meta-prose > div:first-child { padding-left: 0; }
.svc-meta-prose > div:last-child { padding-right: 0; }
.svc-meta-prose > div + div { border-left: 1px solid var(--brd); }

@media (max-width: 860px) {
  .svc-meta, .svc-meta-prose { grid-template-columns: 1fr; gap: 1.4rem; }
  .spec-col, .svc-meta-prose > div { padding: 0; }
  .spec-col + .spec-col,
  .svc-meta-prose > div + div {
    border-left: 0;
    border-top: 1px solid var(--brd);
    padding-top: 1.4rem;
  }
}

@media (max-width: 900px) {
  .svc-grid, .svc-meta { grid-template-columns: 1fr; }
}

/* ============ Contact meta ============ */

.contact-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--brd);
  text-align: left;
}

.contact-meta span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--space-1);
  margin-bottom: 0.4rem;
}

.contact-meta a, .contact-meta address {
  font-style: normal;
  font-size: 0.94rem;
  color: rgba(245, 246, 252, 0.86);
  transition: color 0.3s var(--ease);
}
.contact-meta a:hover { color: var(--ice); }

.contact-meta .meta-social {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0;
}

.meta-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(245, 246, 252, 0.72);
  border: 1px solid var(--brd);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.meta-social a:hover {
  color: var(--ice);
  background: var(--glass-2);
  border-color: var(--brd-2);
}
.meta-social svg { width: 15px; height: 15px; display: block; }

@media (max-width: 760px) {
  .contact-meta { grid-template-columns: 1fr; text-align: center; }
  .contact-meta .meta-social { justify-content: center; }
}

/* ============ Footer ============ */

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.4rem;
}

.footer-brand p {
  margin-top: 1rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--space-2);
  max-width: 34ch;
}

.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-col h2 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--space-1);
  margin-bottom: 0.35rem;
}

.footer-col a, .footer-col address {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(245, 246, 252, 0.68);
  transition: color 0.3s var(--ease);
}
.footer-col a:hover { color: var(--ice); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.6rem;
  border-top: 1px solid var(--brd);
}

.footer-social { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.footer-social a {
  font-size: 0.84rem;
  color: var(--space-1);
  transition: color 0.3s var(--ease);
}
.footer-social a:hover { color: var(--ice); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ============ Story ============ */

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.story-body { padding: clamp(1.8rem, 3.2vw, 2.8rem); }
.story-body p + p { margin-top: 1.1rem; }

.quote {
  padding: clamp(1.8rem, 3.2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
}

.quote blockquote {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* The card stretches to match the essay beside it, which left the caption
   marooned in space — so the portrait carries that room instead. */
.quote figcaption {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.quote img {
  width: clamp(88px, 9vw, 116px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--brd-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.quote .qn {
  display: block;
  font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  letter-spacing: -0.02em;
}
.quote .qr {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: var(--space-1);
}

/* ============ Approach + values ============ */

.approach-card {
  padding: clamp(1.8rem, 3.4vw, 3rem);
  text-align: center;
  margin-bottom: 1.4rem;
}
.approach-card p { margin-inline: auto; }

.values {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.1rem;
}

.value { grid-column: span 2; }
.value:nth-child(4),
.value:nth-child(5) { grid-column: span 3; }

@media (max-width: 900px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value,
  .value:nth-child(4),
  .value:nth-child(5) { grid-column: auto; }
  .value:last-child { grid-column: span 2; }
}

@media (max-width: 560px) {
  .values { grid-template-columns: 1fr; }
  .value:last-child { grid-column: auto; }
}

.value {
  padding: 1.8rem 1.6rem;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.value:hover {
  transform: translateY(-5px);
  border-color: var(--brd-2);
  background: var(--glass-2);
}

.value .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  font-size: 0.85rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(98,50,255,0.5), rgba(61,110,227,0.34));
  border: 1px solid var(--brd-2);
}

.value h3 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.value p {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(245, 246, 252, 0.6);
}

/* what we do — keyword chips under the approach statement */
.does {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.8rem auto 0;
  max-width: 46rem;
}

.does li {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--brd);
  background: rgba(245, 246, 252, 0.04);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(245, 246, 252, 0.78);
}

/* ============ Work grid ============
   No lattice — the marks sit on open ground and a glass panel condenses
   under the pointer. backdrop-filter is applied only on hover; 35 always-on
   blur layers is a lot of compositing for no visible gain. */

.work-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.work-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: clamp(1rem, 2vw, 1.8rem);
  border: 1px solid transparent;
  border-radius: 18px;
  transition:
    transform 0.5s var(--ease),
    background 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}

/* the specular sheen, faded in with the panel */
.work-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: linear-gradient(150deg,
    rgba(245, 246, 252, 0.16) 0%,
    rgba(245, 246, 252, 0.04) 30%,
    transparent 60%);
}

.work-cell:hover,
.work-cell:focus-within {
  transform: translateY(-4px);
  background: var(--glass-2);
  border-color: var(--brd-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(245, 246, 252, 0.2);
}
.work-cell:hover::before,
.work-cell:focus-within::before { opacity: 1; }

.work-cell img {
  position: relative;
  z-index: 1;
  height: var(--lh, 34px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.5s var(--ease);
}
.work-cell:hover img,
.work-cell:focus-within img { opacity: 1; }

@media (max-width: 1080px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ Team ============ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

.member {
  padding: 0;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.member:hover { transform: translateY(-6px); border-color: var(--brd-2); }

.member-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(160deg, #23232C, #14141A);
}

.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(106%);
  transition: filter 0.5s var(--ease), transform 0.7s var(--ease);
}
.member:hover .member-photo img { filter: grayscale(0%) contrast(102%); transform: scale(1.035); }

.member-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(10,10,14,0.86) 100%);
}

.member figcaption {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.25rem 1.3rem;
}

.m-name {
  display: block;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
}
.m-role {
  display: block;
  font-size: 0.83rem;
  color: var(--space-1);
  margin-top: 0.12rem;
}

/* Recruitment card — spans the row under the six portraits so the grid
   stays two clean rows of three. */
.member-join {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.member-join:hover {
  transform: translateY(-4px);
  border-color: var(--brd-2);
  background: var(--glass-2);
}

.mj-body { max-width: 62ch; }

.mj-eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--space-1);
  margin-bottom: 0.55rem;
}

.mj-title {
  display: block;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.mj-sub {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.94rem;
  color: rgba(245, 246, 252, 0.66);
}

.mj-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--brd-2);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background 0.35s var(--ease);
}
.member-join:hover .mj-cta { background: rgba(245, 246, 252, 0.1); }
.mj-cta em { font-style: normal; transition: transform 0.35s var(--ease); }
.member-join:hover .mj-cta em { transform: translateX(4px); }

/* ============ Contact ============ */

.contact-card {
  padding: clamp(2rem, 4vw, 3.4rem);
  text-align: center;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ============ Footer ============ */

.footer {
  border-top: 1px solid var(--brd);
  padding: 2.6rem 0;
  margin-top: 2rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.footer img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; }

.footer p { font-size: 0.82rem; color: var(--space-2); }

.footer-links { display: flex; gap: 1.3rem; }
.footer-links a { font-size: 0.84rem; color: var(--space-1); transition: color 0.3s; }
.footer-links a:hover { color: var(--ice); }

/* ============ Reveal ============ */

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

/* ============ Responsive ============ */

@media (max-width: 940px) {
  .story-grid { grid-template-columns: 1fr; }

  /* A portrait viewport puts her face exactly where the headline sits, so the
     shot gets the top band to itself and the copy sits below it on clean page. */
  .hero {
    display: block;
    min-height: 0;
    padding: calc(54svh + 1.75rem) 0 3.5rem;
  }
  .hero .lead { max-width: 54ch; }
  .hero-copy { max-width: none; }

  .hero-media { height: 54svh; bottom: auto; }
  .hero-plate { --shot-x: 72%; }
  .hero-video { opacity: 0.24; }

  .hero-tint {
    background: linear-gradient(180deg,
      #FFFFFF 0%, #FFFFFF 46%, #C3CBEB 64%,
      #4B3C9B 78%, #150F33 88%, #0A0A0E 95%, #0A0A0E 100%);
  }
  .hero-bloom {
    opacity: 0.5;
    background:
      radial-gradient(70% 34% at 42% 88%, rgba(98, 50, 255, 0.62), transparent 72%),
      radial-gradient(64% 30% at 66% 99%, rgba(61, 110, 227, 0.48), transparent 74%);
  }
  .hero-fade {
    background:
      linear-gradient(180deg, rgba(10, 10, 14, 0.55) 0%, rgba(10, 10, 14, 0.2) 10%, transparent 19%),
      linear-gradient(180deg, transparent 40%, rgba(10, 10, 14, 0.9) 74%, var(--black) 90%, var(--black) 100%);
  }
}

@media (max-width: 760px) {
  .nav-links {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.7rem;
    border-radius: 20px;
    background: rgba(10, 10, 14, 0.9);
    border: 1px solid var(--brd);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav-inner { position: relative; }
  .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-cta { display: none; }
  .nav-logo img { height: 34px; }

  .hero-stats { flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: 2.4rem; }
  .hero-social { margin-left: 0; }
  .hero-eyebrow { letter-spacing: 0.3em; }

  .aurora { filter: blur(56px); }
}

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

/* ---- Optical sizing --------------------------------------------------
   The marks are cropped to their ink, so raw heights would swing from a
   9:1 wordmark to a 1:2 monogram. Each carries its own --lh, used at full
   size on the wall and scaled down in the strap, so a wide wordmark never
   dwarfs a monogram in either place. --------------------------------- */
img[src$="client-1.png"] { --lh: 27px; }   /* 3.4:1 */
img[src$="client-2.png"] { --lh: 36px; }   /* 1.5:1 */
img[src$="client-3.png"] { --lh: 40px; }   /* 1.1:1 */
img[src$="client-4.png"] { --lh: 23px; }   /* 5.9:1 */
img[src$="client-5.png"] { --lh: 31px; }   /* 2.5:1 */
img[src$="client-6.png"] { --lh: 24px; }   /* 5.2:1 */
img[src$="client-7.png"] { --lh: 35px; }   /* 1.7:1 */
img[src$="client-8.png"] { --lh: 39px; }   /* 1.3:1 */
img[src$="client-9.png"] { --lh: 33px; }   /* 2.0:1 */
img[src$="client-10.png"] { --lh: 27px; }   /* 3.7:1 */
img[src$="client-11.png"] { --lh: 46px; }   /* 0.8:1 */
img[src$="client-12.png"] { --lh: 22px; }   /* 6.1:1 */
img[src$="client-13.png"] { --lh: 21px; }   /* 7.5:1 */
img[src$="client-14.png"] { --lh: 24px; }   /* 4.8:1 */
img[src$="client-15.png"] { --lh: 32px; }   /* 2.2:1 */
img[src$="client-16.png"] { --lh: 35px; }   /* 1.7:1 */
img[src$="client-17.png"] { --lh: 22px; }   /* 6.2:1 */
img[src$="client-18.png"] { --lh: 19px; }   /* 9.1:1 */
img[src$="client-19.png"] { --lh: 29px; }   /* 2.9:1 */
img[src$="client-20.png"] { --lh: 31px; }   /* 2.3:1 */
img[src$="client-21.png"] { --lh: 19px; }   /* 9.0:1 */
img[src$="client-22.png"] { --lh: 26px; }   /* 3.9:1 */
img[src$="client-23.png"] { --lh: 31px; }   /* 2.3:1 */
img[src$="client-24.png"] { --lh: 36px; }   /* 1.6:1 */
img[src$="client-25.png"] { --lh: 42px; }   /* 1.0:1 */
img[src$="client-26.png"] { --lh: 29px; }   /* 2.9:1 */
img[src$="client-27.png"] { --lh: 33px; }   /* 2.0:1 */
img[src$="client-28.png"] { --lh: 30px; }   /* 2.5:1 */
img[src$="client-29.png"] { --lh: 20px; }   /* 8.4:1 */
img[src$="client-30.png"] { --lh: 27px; }   /* 3.6:1 */
img[src$="client-31.png"] { --lh: 42px; }   /* 1.0:1 */
img[src$="client-32.png"] { --lh: 30px; }   /* 2.7:1 */
img[src$="client-33.png"] { --lh: 21px; }   /* 7.1:1 */
img[src$="client-34.png"] { --lh: 24px; }   /* 5.1:1 */
img[src$="client-35.png"] { --lh: 50px; }   /* 0.5:1 */

/* ============ Pointer ============
   difference blending means one cursor works over the blown-out paper and the
   near-black copy side without ever needing a second colour. */

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
}

html.js-cursor .cursor-dot,
html.js-cursor .cursor-ring { opacity: 1; }

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ice);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(245, 246, 252, 0.7);
  transition:
    width 0.32s var(--ease),
    height 0.32s var(--ease),
    margin 0.32s var(--ease),
    background 0.32s var(--ease),
    border-color 0.32s var(--ease);
}

html.cursor-hot .cursor-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(245, 246, 252, 0.16);
  border-color: rgba(245, 246, 252, 0.95);
}
html.cursor-hot .cursor-dot { opacity: 0; }

html.js-cursor,
html.js-cursor body,
html.js-cursor a,
html.js-cursor button { cursor: none; }

/* coarse pointers and reduced-motion users keep the system cursor */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  html.js-cursor, html.js-cursor body,
  html.js-cursor a, html.js-cursor button { cursor: auto; }
}