/* ============================================================
   PLUSH GROUP — Independent Advisory & Investments
   Theme: Pure black & white — matched to the logo wordmark
   Type:  Neue Machina for everything; Montserrat for the PLUSH GROUP wordmark
   ============================================================ */

/* ---------- Neue Machina (Pangram Pangram — licensed, self-hosted) ----------
   Font files go in assets/fonts/. Until they're there the site falls back to
   Montserrat. Three weights cover every weight used in this stylesheet:
   Light (100–349), Regular (350–549), Ultrabold (550–900). */
@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/NeueMachina-Light.otf") format("opentype");
  font-weight: 100 349;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/NeueMachina-Regular.otf") format("opentype");
  font-weight: 350 549;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Machina";
  src: url("../fonts/NeueMachina-Ultrabold.otf") format("opentype");
  font-weight: 550 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  --black:      #0a0a0a;
  --black-2:    #0e0e0e;
  --charcoal:   #141414;
  --ink:        #1a1a1a;
  --line:       rgba(255, 255, 255, 0.08);
  --line-2:     rgba(255, 255, 255, 0.16);

  --white:      #ffffff;
  --bone:       #f3f3f1;   /* primary text */
  --cream:      #d7d6d3;   /* light grey */
  --muted:      #8c8a86;   /* secondary text */
  --muted-2:    #5f5d59;   /* faint labels */

  /* Accent is now white (kept var names so the system stays simple) */
  --gold:       #ffffff;
  --gold-soft:  #e7e6e3;
  --gold-deep:  #cbcac6;

  --maxw: 1280px;
  --pad: clamp(1.25rem, 5vw, 4rem);

  /* Soft corner radii — no pointy edges anywhere */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 26px;

  /* Display + body use Neue Machina; the PLUSH GROUP wordmark keeps Montserrat */
  --serif: "Neue Machina", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:  "Neue Machina", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --logo:  "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Fine-grain type rendering */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Themed thin scrollbar */
html, body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

/* Keyboard-only focus rings (clean for mouse users, accessible for tab users) */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}
.btn:focus-visible,
.ftr-pill:focus-visible,
.ftr__top:focus-visible,
.to-top:focus-visible,
.tmc__cta:focus-visible {
  outline-offset: 6px;
  border-radius: 999px;
}

/* Skip-to-content link (accessibility) */
.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  padding: 0.7rem 1.2rem;
  background: #ffffff;
  color: #0a0a0a;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 10000;
  transform: translateY(-200%);
  transition: transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.skip-link:focus { transform: translateY(0); }

body {
  font-family: var(--sans);
  background: var(--black);
  color: var(--bone);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

::selection { background: var(--white); color: var(--black); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
  position: relative;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
}
.eyebrow--center { justify-content: center; }
.eyebrow__dot {
  width: 6px; height: 6px;
  background: var(--white);
  border-radius: 50%;
  display: inline-block;
}

/* Emphasis: light weight white, echoing the logo's bold + light contrast */
.gold-text {
  color: var(--white);
  font-weight: 300;
}

.section-head { max-width: 780px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--cream); font-weight: 300; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1.05rem 1.9rem;
  border-radius: 100px;
  position: relative;
  transition: all 0.5s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn__arrow { transition: transform 0.45s var(--ease); display: inline-block; }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

.btn--gold {
  background: var(--white);
  color: var(--black);
  box-shadow: 0 10px 40px -14px rgba(255, 255, 255, 0.35);
}
.btn--gold:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -14px rgba(255, 255, 255, 0.5);
}

.btn--ghost {
  border-color: var(--line-2);
  color: var(--bone);
}
.btn--ghost:hover {
  border-color: var(--white);
  color: var(--white);
}

.btn--nav {
  padding: 0.8rem 1.4rem;
  background: transparent;
  border-color: var(--line-2);
  font-size: 0.66rem;
}
.btn--nav:hover { border-color: var(--white); color: var(--white); }

.btn--block { width: 100%; justify-content: center; margin-top: 0.5rem; }

/* ---------- Preloader (white canvas, black wordmark) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__inner { text-align: center; width: min(86vw, 360px); }
.preloader__mark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.34em;
  line-height: 1;
  margin-bottom: 2rem;
  font-family: var(--logo);
}
.preloader__plush {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: #0a0a0a;
}
.preloader__group {
  font-weight: 300;
  letter-spacing: 0.04em;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: #0a0a0a;
}
/* Jelly loader (Uiverse — dovatgabriel) */
.jelly {
  --uib-size: 44px;
  --uib-speed: .8s;
  --uib-color: #2c2b2b;
  position: relative;
  height: calc(var(--uib-size) / 2);
  width: var(--uib-size);
  margin: 1.8rem auto 0;
  filter: url('#uib-jelly-ooze');
  animation: rotate72317 calc(var(--uib-speed) * 2) linear infinite;
}

.jelly::before,
.jelly::after {
  content: '';
  position: absolute;
  top: 0%;
  left: 25%;
  width: 50%;
  height: 100%;
  background: var(--uib-color);
  border-radius: 100%;
}

.jelly::before {
  animation: shift-left var(--uib-speed) ease infinite;
}

.jelly::after {
  animation: shift-right var(--uib-speed) ease infinite;
}

.jelly-maker {
  width: 0;
  height: 0;
  position: absolute;
}

@keyframes rotate72317 {
  0%, 49.999%, 100% { transform: none; }
  50%, 99.999%       { transform: rotate(90deg); }
}

@keyframes shift-left {
  0%, 100% { transform: translateX(0%); }
  50%      { transform: scale(0.65) translateX(-75%); }
}

@keyframes shift-right {
  0%, 100% { transform: translateX(0%); }
  50%      { transform: scale(0.65) translateX(75%); }
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--white);
  z-index: 8000;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s, border-color 0.5s, padding 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.4rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding 0.5s var(--ease);
}
.nav.is-scrolled .nav__inner { padding-top: 1rem; padding-bottom: 1rem; }

/* Scroll-driven collapse: brand + CTA (desktop) or hamburger (mobile) glide to center */
.nav .brand,
.nav .btn--nav,
.nav .nav__toggle {
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1),
              background 0.5s var(--ease),
              border-color 0.5s var(--ease),
              color 0.5s var(--ease);
  will-change: transform;
}
.nav__links {
  transition: opacity 0.35s var(--ease),
              visibility 0.35s linear,
              transform 0.5s var(--ease);
}
.nav.is-collapsed .nav__links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
}

/* Brand wordmark (logo) — horizontal PLUSH (bold) + GROUP (light), like the logo */
.brand__badge {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.32em;
  line-height: 1;
  font-family: var(--logo);
}
.brand__plush {
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 1.08rem;
  color: var(--white);
}
.brand__group {
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 1.08rem;
  color: var(--bone);
}
.brand__badge--lg .brand__plush,
.brand__badge--lg .brand__group { font-size: 1.6rem; }

.nav__links { display: flex; gap: 2.2rem; }
.nav__link {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  position: relative;
  padding: 0.3rem 0;
  white-space: nowrap;
  transition: color 0.4s;
}
@media (max-width: 1180px) {
  .nav__links { gap: 1.4rem; }
  .nav__link { letter-spacing: 0.1em; }
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--white);
  transition: width 0.4s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { width: 100%; }

/* Refined hamburger — two asymmetric lines that morph to a clean X */
.nav__toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1100;
  transition: background 0.35s var(--ease),
              border-color 0.35s var(--ease),
              transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav__toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
}

.nav__toggle span {
  position: absolute;
  display: block;
  height: 1.8px;
  background: var(--bone);
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: width 0.45s var(--ease),
              top 0.45s var(--ease),
              left 0.45s var(--ease),
              transform 0.45s var(--ease),
              background 0.3s;
}

/* Closed state — top line full, bottom line shorter and shifted right (editorial cue) */
.nav__toggle span:nth-child(1) {
  width: 22px;
  top: 16px;
  left: calc(50% - 11px);
}
.nav__toggle span:nth-child(2) {
  width: 13px;
  top: 23px;
  left: calc(50% - 11px + 9px);
}

/* Hover — short line slides over to align with the top one */
.nav__toggle:hover span:nth-child(2) {
  width: 22px;
  left: calc(50% - 11px);
}

/* Open — morph to a perfectly aligned X */
.nav__toggle.is-open span:nth-child(1) {
  width: 22px;
  top: 19px;
  left: calc(50% - 11px);
  transform: rotate(45deg);
}
.nav__toggle.is-open span:nth-child(2) {
  width: 22px;
  top: 19px;
  left: calc(50% - 11px);
  transform: rotate(-45deg);
}

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  background: var(--black-2);
  z-index: 1050;
  clip-path: circle(0% at 100% 0);
  transition: clip-path 0.7s var(--ease);
  display: flex;
  align-items: center;
}
.menu.is-open { clip-path: circle(150% at 100% 0); }

.menu__inner { width: 100%; padding: 6rem var(--pad) 3rem; }
.menu__links { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 4rem; }
.menu__link {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  transition: color 0.4s, padding-left 0.4s var(--ease);
}
.menu__link:hover { color: var(--white); padding-left: 0.6rem; }.menu__index {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-weight: 500;
}
.menu__foot {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.menu__foot-label {
  font-size: 0.66rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-bottom: 0.5rem;
}
.menu__foot a:hover { color: var(--white); }

/* ---------- Hero — editorial, focused, flows into next section ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  /* Compact: just clears the fixed nav, then the first section follows straight on */
  padding: clamp(6.5rem, 9vw, 8rem) var(--pad) 0;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  width: 64vw; height: 64vw;
  max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 42%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
.hero__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero__inner { position: relative; z-index: 2; max-width: 1040px; }

/* Masthead-style framed eyebrow */
.hero__masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  margin: 0 auto 1.5rem;
  max-width: 600px;
}
.hero__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--rule-dir, right), transparent, rgba(255,255,255,0.35), transparent);
  max-width: 120px;
}
.hero__masthead-text {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 500;
  white-space: nowrap;
}
.hero__masthead-sep {
  font-size: 0.5rem;
  color: var(--white);
  letter-spacing: 0;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title em {
  color: var(--white);
  font-style: italic;
  font-weight: 200;
  letter-spacing: -0.02em;
}

.hero__lede {
  max-width: 580px;
  margin: 0 auto 2rem;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.65;
  color: var(--cream);
  font-weight: 300;
}
.hero__lede em {
  color: var(--white);
  font-style: italic;
  font-weight: 400;
}

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

/* Editorial signature line below the CTAs */
.hero__signature {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.hero__signature em {
  color: var(--white);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}


/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  overflow: hidden;
  background: var(--black-2);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2vw, 1.4rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream);
  white-space: nowrap;
}
.marquee__dot { color: var(--white) !important; font-size: 0.7rem !important; letter-spacing: 0 !important; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Ethos ---------- */
.ethos__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
}
.ethos__statement {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.ethos__statement .gold-text { display: block; font-weight: 300; }
.ethos__body p { color: var(--muted); margin-bottom: 1.5rem; font-weight: 300; }
.ethos__body p.lead { color: var(--cream); }
.ethos__body em { color: var(--bone); font-style: normal; font-weight: 500; }
.ethos__signature {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
}
.ethos__sig-line { width: 40px; height: 1px; background: var(--white); }

/* ---------- Shared editorial layouts ---------- */
/* Intro paragraphs under a section title */
.section-intro { margin-top: 1.6rem; max-width: 640px; }
.section-intro p { color: var(--muted); font-weight: 300; }
.section-intro p + p { margin-top: 1rem; }

/* Title on the left, body copy on the right */
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split__cta { margin-top: 2.2rem; }

.prose p { color: var(--muted); font-weight: 300; margin-bottom: 1.5rem; }
.prose p:last-child { margin-bottom: 0; }
.prose p.lead { color: var(--cream); }

/* Paragraphs separated by hairlines */
.prose--ruled p {
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.prose--ruled p:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Approach intro ---------- */
.approach .split { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Commercial model ---------- */
.model__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.04), transparent 55%),
    var(--black-2);
  padding: clamp(2rem, 5vw, 4.5rem);
}

/* ---------- Investments ---------- */
.interests { margin-top: clamp(3rem, 6vw, 5rem); }
.interests__label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.interests__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.interest {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-2);
  transition: border-color 0.5s var(--ease);
}
.interest:hover { border-color: var(--white); }
.interest__no {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-weight: 500;
}
.interest__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bone);
}

/* ---------- Discretion (selected engagements) ---------- */
.discretion__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.discretion__body { margin: 2rem auto 2.4rem; max-width: 620px; }

/* ---------- Stats ---------- */
.stats { }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat {
  text-align: center;
  padding: 1.5rem 1rem;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }
.stat__num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  color: var(--white);
  display: block;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__label {
  display: block;
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}
.stats__note {
  text-align: center;
  margin-top: 3rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  font-weight: 300;
}

/* ---------- Services ---------- */
.services__list { }
.service {
  display: grid;
  grid-template-columns: 80px 1fr 220px;
  gap: 2rem;
  align-items: start;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.5s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  left: -2rem; top: 0;
  width: calc(100% + 4rem); height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
}
.service:hover { padding-left: 1.2rem; }
.service:hover::before { opacity: 1; }
.service__no {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.service__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin-bottom: 0.7rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  transition: color 0.4s;
}
.service:hover .service__title { color: var(--white); }
.service__desc { color: var(--muted); max-width: 560px; font-weight: 300; }
.service__tags { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.4rem; }
.service__tags li {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
}
.service__tags li::before { content: "—"; color: var(--cream); }

/* ---------- Approach ---------- */
.approach { }
.approach__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.step {
  background: var(--black-2);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  transition: background 0.5s var(--ease);
}
.step:hover { background: var(--charcoal); }
.step__no {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  /* Fixed gap (not auto) so titles line up even when descriptions wrap differently */
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.05em;
}
.step__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 0.8rem;
}
.step__desc { color: var(--muted); font-size: 0.92rem; font-weight: 300; }

/* ---------- Results ---------- */
.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.result {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), background 0.5s;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.result:hover {
  border-color: var(--white);
  transform: translateY(-6px);
}
.result__metric {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: auto;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--white);
}
.result__metric .gold-text { font-weight: 600; }
.result__unit { font-size: 1.1rem; color: var(--muted); font-weight: 300; }
.result__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 1.8rem 0 0.8rem;
  line-height: 1.25;
}
.result__desc { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.5rem; font-weight: 300; }
.result__tag {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-weight: 500;
}
.results__note {
  margin-top: 2.5rem;
  font-size: 0.72rem;
  color: var(--muted-2);
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ---------- Selected Works ---------- */
.works.section {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.works .section-head { margin-bottom: 1.4rem; max-width: 720px; }
.works .section-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
}

.work {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.work__media {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--charcoal);
  border: 1px solid var(--line);
}

.work__img,
.work__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work__img {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  /* Keep original colours — these are creative campaign visuals */
  transition: transform 0.7s var(--ease);
}
.work__media:hover .work__img { transform: scale(1.05); }

/* Per-card focus points — keeps each card's subject/logo at the visual centre */
.works__grid .work:nth-child(1) .work__img { object-position: center 30%; }
.works__grid .work:nth-child(2) .work__img { object-position: center top; }
.works__grid .work:nth-child(3) .work__img { object-position: center 35%; }

.work__placeholder {
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(4rem, 9vw, 6.5rem);
  letter-spacing: -0.05em;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.07), transparent 60%),
    var(--charcoal);
}

.work__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 35%, transparent 60%);
  opacity: 0.85;
  transition: opacity 0.5s var(--ease);
}
.work__media:hover .work__overlay { opacity: 1; }

.work__view {
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.work__view svg { width: 14px; height: 14px; }
.work__media:hover .work__view {
  opacity: 1;
  transform: translateY(0);
}

.work__body { display: flex; flex-direction: column; gap: 0.3rem; }
.work__index {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.work__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: -0.015em;
  color: var(--bone);
  line-height: 1.2;
}
.work__caption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.45;
  margin-top: 0.1rem;
  /* keep the caption to 2 lines so cards stay short */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work__caption a {
  color: var(--bone);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color 0.3s, border-color 0.3s;
}
.work__caption a:hover { color: var(--white); border-color: var(--white); }
.work__tag {
  margin-top: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 500;
}

.works__note {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.works__note a {
  color: var(--white);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color 0.3s;
  padding-bottom: 1px;
}
.works__note a:hover { border-color: var(--white); }

@media (max-width: 1024px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .works__grid { grid-template-columns: 1fr; }
}

/* ---------- Why ---------- */
.why { }
.why__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); }
.why__head .section-title { margin-bottom: 2rem; }
.why__cta { margin-top: 1rem; }
.why__list { display: flex; flex-direction: column; }
.why__item {
  padding: 1.8rem 0;
  border-top: 1px solid var(--line);
}
.why__item:last-child { border-bottom: 1px solid var(--line); }
.why__item h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.why__item p { color: var(--muted); font-size: 0.95rem; font-weight: 300; }

/* ---------- Founder — editorial team-member card ---------- */
.founder { }
.founder .eyebrow { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.tmc { position: relative; display: flex; flex-direction: column; max-width: 880px; }
.tmc__role {
  margin-bottom: 1.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.tmc__row { display: flex; align-items: flex-start; gap: clamp(1.75rem, 4vw, 3.5rem); }

/* Portrait — fixed editorial frame, image reveal on hover */
.tmc__portrait {
  position: relative;
  height: 440px;
  width: 360px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.tmc__img,
.tmc__placeholder {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.tmc__img {
  z-index: 1;
  /* Shown in full colour. For a black & white portrait add:
     filter: grayscale(100%) contrast(1.06); */
  object-position: 50% 22%;
  transition: transform 0.6s var(--ease);
}
.tmc__portrait:hover .tmc__img { transform: scale(1.05); }
.tmc__placeholder {
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,0.07), transparent 60%),
    var(--charcoal);
}
.tmc__monogram {
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
}
.tmc__overlay {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 45%);
}
.tmc__grain {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Info block — sits beside the portrait (no overlap); name above the bio */
.tmc__info {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.tmc__name {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 200;
  color: var(--white);
}
.tmc__last { font-weight: 400; }

.tmc__details { display: flex; gap: 2rem; align-items: flex-start; }

/* Circular CTA — arrow rotates on hover, pulse on press */
.tmc__cta {
  flex-shrink: 0;
  height: 80px; width: 80px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--muted);
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s, color 0.3s;
}
.tmc__cta:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  color: var(--white);
}
.tmc__cta:active { transform: scale(0.95); }
.tmc__cta svg { width: 22px; height: 22px; transition: transform 0.3s var(--ease); }
.tmc__cta:hover svg { transform: rotate(-45deg); }

.tmc__bio { width: 100%; max-width: 42ch; }
.tmc__bio p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
}
.tmc__bio p + p { margin-top: 1rem; }
.tmc__handle {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  transition: opacity 0.3s;
}
.tmc__handle:hover { opacity: 0.6; }

/* Staggered entrance */
.tmc__role.reveal     { transition-delay: 0.05s; }
.tmc__portrait.reveal { transition-delay: 0.15s; }
.tmc__name.reveal     { transition-delay: 0.30s; }
.tmc__cta.reveal      { transition-delay: 0.40s; }
.tmc__bio.reveal      { transition-delay: 0.45s; }

@media (max-width: 820px) {
  .tmc { max-width: none; }
  .tmc__row { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .tmc__portrait { width: 100%; height: clamp(360px, 70vw, 460px); }
  .tmc__info { gap: 1.75rem; }
  .tmc__bio { width: 100%; max-width: none; }
}
@media (max-width: 480px) {
  .tmc__details { gap: 1.25rem; }
  .tmc__cta { height: 64px; width: 64px; }
}

/* ---------- Locations ---------- */
.locations__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.location {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease);
  isolation: isolate;
  background: var(--charcoal);
}
.location:hover { border-color: rgba(255,255,255,0.4); }

/* 4K cityscape image — fills the card, slow zoom on hover */
.location__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
  filter: brightness(0.72) contrast(1.05) saturate(0.9);
}
.location:hover .location__img {
  transform: scale(1.06);
  filter: brightness(0.82) contrast(1.05) saturate(1);
}

/* Gradient overlay so the copy stays legible against any city colour */
.location__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0.85) 100%),
    linear-gradient(120deg, rgba(10,10,10,0.55), transparent 60%);
}

.location__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location__index {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--bone);
  margin-bottom: auto;
  font-weight: 500;
  opacity: 0.85;
}
.location__city {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1.5rem 0 1rem;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
  transition: transform 0.5s var(--ease);
}
.location:hover .location__city { transform: translateX(0.4rem); }
.location__desc {
  color: var(--cream);
  max-width: 420px;
  margin-bottom: 1.5rem;
  font-weight: 300;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.location__meta {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
  opacity: 0.85;
}

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; }
.contact__glow {
  position: absolute;
  bottom: -20%; right: -10%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  position: relative;
  z-index: 2;
}
.contact__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.contact__lede { color: var(--muted); max-width: 440px; margin-bottom: 2.5rem; font-weight: 300; }
.contact__lede:has(+ .contact__lede) { margin-bottom: 1rem; }
.contact__alt { margin-top: 2.2rem; }
.contact__details { display: flex; flex-direction: column; gap: 1.2rem; }
.contact__details li { display: flex; flex-direction: column; gap: 0.25rem; }
.contact__label {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.contact__details a { color: var(--cream); transition: color 0.3s; width: fit-content; }
.contact__details a:hover { color: var(--white); }

/* Form */
.contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; align-content: start; }
.contact__form .btn--block { grid-column: 1 / -1; }
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: 0.9rem 0;
  color: var(--bone);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.4s;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 90px; }
.field select { cursor: pointer; }
.field select option { background: var(--charcoal); color: var(--bone); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--white);
}
.field label {
  position: absolute;
  left: 0; top: 0.9rem;
  color: var(--muted);
  font-size: 1rem;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.3s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label,
.field__label--static {
  top: -0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 500;
}
.field__label--static { top: -0.7rem; }
.field input.is-error, .field textarea.is-error, .field select.is-error {
  border-bottom-color: var(--white);
  border-bottom-width: 2px;
}
.contact__formnote {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--white);
  min-height: 1.2rem;
  font-weight: 300;
}

/* ---------- Footer (cinematic curtain reveal) ---------- */
.footer-reveal {
  position: relative;
  width: 100%;
  height: 100vh;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.ftr {
  position: fixed;
  left: 0; bottom: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--black);
  color: var(--bone);
  z-index: 1;
}

/* Aurora breathing glow */
.ftr__aurora {
  position: absolute;
  top: 50%; left: 50%;
  width: 80vw;
  height: 60vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 70%
  );
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: ftrBreathe 8s ease-in-out infinite alternate;
}
@keyframes ftrBreathe {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.1);  opacity: 1; }
}

/* Subtle grid background, faded top + bottom */
.ftr__grid-bg {
  position: absolute;
  inset: 0;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Giant PLUSH wordmark, masked with metallic gradient */
.ftr__giant {
  position: absolute;
  bottom: -5vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--logo);
  font-size: 26vw;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.75;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, transparent 60%);
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Main center content */
.ftr__center {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 5vh, 4.5rem) var(--pad);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.ftr__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.ftr__heading {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 1rem;
  /* Metallic gradient text */
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.45) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 25px rgba(255,255,255,0.12));
}
.ftr__sub {
  max-width: 540px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 300;
  margin: 0 auto 2.4rem;
  line-height: 1.7;
}

/* Glass pills */
.ftr__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
}
.ftr__pills--primary { margin-bottom: 1rem; }
.ftr__pills--secondary { gap: 0.55rem; }

.ftr-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--cream);
  transition: background 0.4s var(--ease),
              border-color 0.4s var(--ease),
              color 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
  will-change: transform;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.ftr-pill svg { width: 18px; height: 18px; opacity: 0.65; transition: opacity 0.3s; }
.ftr-pill:hover svg { opacity: 1; }

.ftr-pill--primary {
  padding: 1rem 1.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
  box-shadow:
    0 12px 35px -10px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.12),
    inset 0 -1px 2px rgba(0,0,0,0.5);
}
.ftr-pill--primary:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 20px 45px -10px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,255,255,0.2);
}

.ftr-pill--ghost {
  padding: 0.55rem 1.2rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ftr-pill--ghost:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

/* Bottom bar */
.ftr__bottom {
  position: relative;
  z-index: 20;
  width: 100%;
  padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(1.4rem, 2.5vw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.ftr__copy {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  order: 1;
}
.ftr__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  transition: border-color 0.4s, background 0.4s;
  white-space: nowrap;
  z-index: 5;
}
.ftr__badge:hover { border-color: rgba(255,255,255,0.2); }
.ftr__badge em {
  color: var(--white);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
}
.ftr__top {
  order: 3;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--bone);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  will-change: transform;
}
.ftr__top svg {
  width: 20px; height: 20px;
  transition: transform 0.4s var(--ease);
}
.ftr__top:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}
.ftr__top:hover svg { transform: translateY(-3px); }

/* Hide the floating to-top when the cinematic footer is in view */
body.is-footer-visible .to-top { opacity: 0; visibility: hidden; pointer-events: none; }

/* Responsive */
/* Below ~1180px the copyright line would run into the centred badge,
   so the badge flows in the row and the copyright drops underneath */
@media (max-width: 1180px) {
  .ftr__bottom { justify-content: center; text-align: center; }
  .ftr__copy { order: 3; flex-basis: 100%; }
  .ftr__badge {
    position: static;
    transform: none;
    order: 2;
  }
}
@media (max-width: 820px) {
  .footer-reveal { height: 95vh; }
  .ftr { height: 95vh; }
}
@media (max-width: 520px) {
  .ftr-pill--primary { padding: 0.85rem 1.4rem; font-size: 0.76rem; }
  .ftr__heading { font-size: clamp(2rem, 11vw, 3.2rem); }
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 48px; height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(10px);
  color: var(--bone);
  font-size: 1.1rem;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.4s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--white); color: var(--white); }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-mask span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.reveal-mask.is-visible span { transform: translateY(0); }
.hero__title .line:nth-child(1) span { transition-delay: 0.1s; }
.hero__title .line:nth-child(2) span { transition-delay: 0.22s; }
.hero__title .line:nth-child(3) span { transition-delay: 0.34s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .service { grid-template-columns: 50px 1fr; }
  .service__tags { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
  .approach__steps { grid-template-columns: repeat(2, 1fr); }
  .interests__list { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .results__grid { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
  .stat { background: var(--black); border-left: none; padding: 2rem 1rem; }
}

/* When the desktop links don't fit on one row (narrow screen or wide font),
   main.js adds .nav--compact and the hamburger takes over */
.nav--compact .nav__links,
.nav--compact .btn--nav { display: none; }
.nav--compact .nav__toggle { display: inline-block; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .btn--nav { display: none; }
  .nav__toggle { display: inline-block; }
  .ethos__grid,
  .why__grid,
  .split,
  .contact__grid { grid-template-columns: 1fr; }
  .split { gap: 1.5rem; }
  .split__cta { margin-top: 1.4rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .footer__tag { justify-self: start; }
}

@media (max-width: 600px) {
  .results__grid,
  .locations__grid,
  .contact__form { grid-template-columns: 1fr; }
  .approach__steps { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .service { grid-template-columns: 1fr; gap: 0.8rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .hero__watermark { font-size: 40vw; }
}

/* ============================================================
   FINAL RESPONSIVE POLISH — clean spacing on tablet & mobile
   ============================================================ */

/* ---------- Tablet / iPad (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  :root { --pad: clamp(1.5rem, 4vw, 2.5rem); }
  .section { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
  .section-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
  .section-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }

  /* Stats — tighter inner padding */
  .stat { padding: 1.4rem 0.8rem; }
  .stat__num { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
  .stats__note { margin-top: 2rem; }

  /* Services — single column comes earlier */
  .service { padding: 1.6rem 0; }
  .service__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

  /* Approach steps — 2 columns at this size */
  .step { min-height: 220px; padding: 1.6rem; }
  .step__title { font-size: 1.35rem; }
  .step__no { font-size: 1.3rem; }

  /* Results / Outcomes */
  .result { min-height: 280px; padding: 1.6rem; }
  .result__metric { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
  .result__title { font-size: 1.2rem; margin: 1.2rem 0 0.5rem; }

  /* Why list — tighter */
  .why__item { padding: 1.4rem 0; }
  .why__item h3 { font-size: 1.2rem; }

  /* Locations — image cards a touch shorter */
  .location { min-height: 360px; }
  .location__city { font-size: clamp(2rem, 4.6vw, 3rem); }

  /* Works grid — 2 columns kicks in here */
  .works .section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }

  /* Founder card */
  .tmc { max-width: 760px; }
  .tmc__portrait { width: 320px; height: 400px; }
  .tmc__name { font-size: clamp(2.4rem, 5vw, 3.6rem); }

  /* Contact */
  .contact__grid { gap: clamp(2.5rem, 5vw, 4rem); }
  .contact__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
}

/* ---------- iPad portrait / large phone (≤ 820px) ---------- */
@media (max-width: 820px) {
  :root { --pad: clamp(1.25rem, 4.5vw, 2rem); }
  .section { padding-top: clamp(2.6rem, 5vw, 3.6rem); padding-bottom: clamp(2.6rem, 5vw, 3.6rem); }
  .section-head { margin-bottom: 2rem; max-width: 100%; }
  .section-title { font-size: clamp(1.6rem, 4.4vw, 2.4rem); }
  .lead { font-size: 1rem; }

  /* Hero — slightly more focused on tablet */
  .hero { padding-top: 6.6rem; padding-bottom: 0; }
  .hero__title { font-size: clamp(2rem, 6.2vw, 3.4rem); }
  .hero__masthead { margin-bottom: 1.25rem; }
  .hero__lede { margin-bottom: 1.6rem; font-size: 0.95rem; }

  /* Ethos statement */
  .ethos__statement { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .ethos__body p { margin-bottom: 1.2rem; }
  .ethos__signature { margin-top: 2rem; }

  /* Approach — 2 cols */
  .step { min-height: 200px; padding: 1.4rem; }

  /* Results — single col below 600 */
  .result { min-height: 240px; padding: 1.5rem; }

  /* Why grid stacks; tighten gap */
  .why__head .section-title { margin-bottom: 1.5rem; }
  .why__cta { margin-top: 0.5rem; }

  /* Founder stacks */
  .tmc { max-width: 100%; }
  .tmc__name { font-size: clamp(2.2rem, 7vw, 3rem); }
  .tmc__details { gap: 1.4rem; }
  .tmc__bio { max-width: none; }
  .tmc__bio p { font-size: 0.85rem; }

  /* Works grid still 2 cols */
  .work__body { gap: 0.25rem; }

  /* Locations */
  .location { min-height: 320px; padding: 1.8rem; }

  /* Footer (cinematic) */
  .ftr__heading { font-size: clamp(2rem, 7vw, 3.4rem); margin-bottom: 0.8rem; }
  .ftr__sub { font-size: 0.9rem; margin-bottom: 1.8rem; }
  .ftr__pills--primary { gap: 0.7rem; }
  .ftr-pill--primary { padding: 0.85rem 1.4rem; font-size: 0.78rem; }
  .ftr__center { padding: clamp(2rem, 5vw, 3.5rem) var(--pad); }
}

/* ---------- Phone (≤ 600px) ---------- */
@media (max-width: 600px) {
  :root { --pad: clamp(1.1rem, 4vw, 1.5rem); }
  .section { padding-top: clamp(2.4rem, 7vw, 3.2rem); padding-bottom: clamp(2.4rem, 7vw, 3.2rem); }
  .section-head { margin-bottom: 1.8rem; }
  .section-title { font-size: clamp(1.5rem, 5.6vw, 2rem); line-height: 1.18; }
  .eyebrow { font-size: 0.65rem; margin-bottom: 1rem; }

  /* Hero */
  .hero__title { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .hero__lede { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.4rem; }
  .hero__masthead-text { font-size: 0.62rem; letter-spacing: 0.28em; gap: 0.7rem; }
  .hero__cta { gap: 0.6rem; }
  .hero__signature { margin-top: 1.1rem; font-size: 0.68rem; }

  /* Shared layouts */
  .section-intro { margin-top: 1.2rem; }
  .section-intro p, .prose p { font-size: 0.9rem; }
  .prose p { margin-bottom: 1.1rem; }
  .prose--ruled p { padding: 1.1rem 0; margin: 0; }
  .model__panel { padding: 1.6rem 1.3rem; border-radius: var(--radius); }
  .interests__list { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .interest__name { font-size: 1rem; }
  .discretion__inner { padding: 2rem 0; }
  .discretion__body { margin: 1.4rem auto 1.8rem; }

  /* Buttons more compact */
  .btn { padding: 0.85rem 1.4rem; font-size: 0.7rem; }

  /* Ethos */
  .ethos__statement { font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.12; }
  .ethos__grid { gap: 1.5rem; }

  /* Stats — 2 cols on phone */
  .stat { padding: 1.2rem 0.5rem; }
  .stat__num { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .stat__label { font-size: 0.7rem; margin-top: 0.6rem; }
  .stats__note { font-size: 0.66rem; margin-top: 1.4rem; }

  /* Services — single col, smaller */
  .service { padding: 1.4rem 0; gap: 0.5rem; }
  .service__title { font-size: 1.3rem; margin-bottom: 0.4rem; }
  .service__desc { font-size: 0.88rem; }
  .service__no { font-size: 0.85rem; }
  .service__tags { gap: 0.6rem; margin-top: 0.4rem; }

  /* Approach (single column) */
  .step { min-height: auto; padding: 1.4rem 1.2rem; }
  .step__title { font-size: 1.2rem; margin: 1rem 0 0.4rem; }
  .step__desc { font-size: 0.85rem; }
  .step__no { font-size: 1.1rem; margin-bottom: 0.8rem; }

  /* Results — single column tighter */
  .result { min-height: auto; padding: 1.6rem 1.4rem; }
  .result__metric { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .result__title { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
  .result__desc { font-size: 0.85rem; margin-bottom: 1rem; }
  .results__note { font-size: 0.66rem; margin-top: 1.4rem; }

  /* Why */
  .why__list { margin-top: 0.5rem; }
  .why__item { padding: 1.2rem 0; }
  .why__item h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
  .why__item p { font-size: 0.85rem; }

  /* Founder */
  .tmc__role { font-size: 0.62rem; letter-spacing: 0.28em; margin-bottom: 1rem; }
  .tmc__row { gap: 1.2rem; }
  .tmc__portrait { height: clamp(320px, 80vw, 420px); }
  .tmc__info { margin-top: 0; gap: 1.4rem; }
  .tmc__name { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; }
  .tmc__bio p { font-size: 0.82rem; line-height: 1.7; }
  .tmc__cta { width: 56px; height: 56px; }
  .tmc__cta svg { width: 18px; height: 18px; }

  /* Works — single column on phone */
  .works .section-title { font-size: clamp(1.5rem, 5.6vw, 1.9rem); }
  .works__grid { gap: 1.4rem; }
  .work__title { font-size: 1.05rem; }
  .work__caption { font-size: 0.82rem; }
  .work__tag, .work__index { font-size: 0.6rem; }

  /* Locations */
  .location { min-height: 280px; padding: 1.5rem 1.4rem; }
  .location__city { font-size: clamp(2rem, 8vw, 2.6rem); margin: 1rem 0 0.6rem; }
  .location__desc { font-size: 0.86rem; margin-bottom: 1rem; }

  /* Contact */
  .contact__grid { gap: 2rem; }
  .contact__title { font-size: clamp(1.6rem, 6.5vw, 2.2rem); margin-bottom: 1rem; }
  .contact__lede { font-size: 0.9rem; margin-bottom: 1.5rem; }
  .contact__details { gap: 0.9rem; }
  .contact__details li { gap: 0.2rem; }
  .contact__label { font-size: 0.6rem; }
  .contact__form { gap: 1.2rem 1rem; }
  .field input, .field select, .field textarea { font-size: 0.95rem; padding: 0.75rem 0; }

  /* Footer (cinematic) */
  .ftr__eyebrow { font-size: 0.62rem; letter-spacing: 0.28em; margin-bottom: 1rem; }
  .ftr__heading { font-size: clamp(1.8rem, 9vw, 2.6rem); margin-bottom: 0.6rem; }
  .ftr__sub { font-size: 0.82rem; margin-bottom: 1.4rem; max-width: 360px; }
  .ftr__pills--secondary { gap: 0.4rem; }
  .ftr-pill--ghost { padding: 0.45rem 0.95rem; font-size: 0.68rem; letter-spacing: 0.06em; }
  .ftr__bottom { padding-bottom: 1.2rem; gap: 0.8rem; }
  .ftr__badge { font-size: 0.6rem; padding: 0.5rem 1rem; }
  .ftr__badge em { font-size: 0.82rem; }
  .ftr__top { width: 40px; height: 40px; }
  .ftr__top svg { width: 16px; height: 16px; }

  /* Menu (mobile nav overlay) */
  .menu__inner { padding: 5rem var(--pad) 2.5rem; }
  .menu__links { margin-bottom: 2.5rem; }
  .menu__foot { gap: 1.5rem; padding-top: 1.5rem; }
}

/* ---------- Small phone (≤ 380px) — extra trim ---------- */
@media (max-width: 380px) {
  .stat { padding: 0.9rem 0.4rem; }
  .stats__grid { gap: 0; }
  .hero__title { font-size: 1.7rem; }
  .section-title { font-size: 1.4rem; }
}

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