/* ═══════════════════════════════════════════════════════
   FLIP MUSIC GROUP
   Signature: the flip. Sections invert light/dark,
   the hero wordmark mirrors itself, leadership cards
   turn over to reveal the person behind the title.
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:      #0B0B0C;
  --ink-2:    #141317;
  --ink-3:    #1E1C22;
  --bone:     #EDE7DC;
  --bone-dim: #C9C2B6;
  --brass:    #E5A33C;
  --oxblood:  #6E1B1E;
  --smoke:    #8B8681;

  --fg: var(--bone);
  --bg: var(--ink);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Spline Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1240px;
  --rule: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brass); color:var(--ink);
  padding:.75rem 1.25rem; font-family:var(--mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.12em; text-decoration:none;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* ── inverted sections: the flip ─────────────────────── */
.invert{
  --fg: var(--ink);
  --bg: var(--bone);
  background:var(--bg);
  color:var(--fg);
}

/* ── shared type atoms ───────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--brass);
  margin:0 0 1.25rem;
}
.invert .eyebrow{ color:var(--oxblood); }

.sechead{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.sechead__h{
  font-family:var(--display);
  font-weight:900;
  font-stretch:118%;
  font-size:clamp(2.75rem,9vw,6rem);
  line-height:.86;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}
.sechead__sub{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); margin:1.25rem 0 0;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; text-decoration:none;
  padding:1.0625rem 2rem;
  border:1px solid var(--fg);
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.btn--solid{ background:var(--fg); color:var(--bg); }
.btn--solid:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); transform:translateY(-2px); }
.btn--ghost:hover{ background:var(--fg); color:var(--bg); transform:translateY(-2px); }

/* ═══ NAV ═══ */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.0625rem var(--gut);
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(237,231,220,.12);
  color:var(--bone);
}

.nav__mark{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; line-height:1;
}
/* The logo art is supplied on its own vignetted black, which matches
   --ink. No blend mode: `screen` would lift that black into a visible
   lighter rectangle, and would erase the logo outright anywhere the
   backdrop went pale. */
.nav__logo{
  height:34px; width:auto; flex-shrink:0;
  margin-right:.1rem;
}
.nav__mark-a{
  font-family:var(--display); font-weight:900; font-stretch:118%;
  font-size:1.375rem; letter-spacing:-.01em;
}
.nav__mark-b{
  font-family:var(--mono); font-size:.625rem; font-weight:500;
  letter-spacing:.24em; color:var(--smoke); text-transform:uppercase;
}

.nav__links{ display:flex; gap:2.25rem; }
.nav__links a{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  text-decoration:none; color:var(--bone-dim);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__links a:hover{ color:var(--brass); border-bottom-color:var(--brass); }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:40px; height:32px; padding:0;
  background:none; border:0; cursor:pointer;
}
.nav__toggle span{
  display:block; height:1.5px; width:100%; background:var(--bone);
  transition:transform .25s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.drawer{
  position:sticky; top:65px; z-index:99;
  display:flex; flex-direction:column;
  background:var(--ink-2);
  border-bottom:1px solid rgba(237,231,220,.12);
}
.drawer[hidden]{ display:none; }
.drawer a{
  font-family:var(--mono); font-size:.8125rem; text-transform:uppercase;
  letter-spacing:.16em; text-decoration:none; color:var(--bone);
  padding:1.1rem var(--gut);
  border-bottom:1px solid rgba(237,231,220,.08);
}

/* ═══ HERO ═══ */
.hero{
  position:relative;
  min-height:min(92svh,880px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(4rem,10vh,7rem) var(--gut) clamp(3rem,7vh,5rem);
  overflow:hidden;
}

.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  opacity:.34; filter:grayscale(1) contrast(1.15);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(110,27,30,.34), transparent 60%),
    linear-gradient(to bottom, rgba(11,11,12,.5) 0%, rgba(11,11,12,.82) 62%, var(--ink) 100%);
}
/* No photo yet? Draw the atmosphere anyway. The glow sits right and low,
   keeping the area behind the logo flat so its own black disappears. */
.hero__bg.is-empty::after{
  background:
    radial-gradient(64% 52% at 86% 24%, rgba(229,163,60,.13), transparent 62%),
    radial-gradient(70% 58% at 94% 90%, rgba(110,27,30,.34), transparent 64%),
    linear-gradient(to bottom, #0C0B0D 0%, var(--ink) 70%);
}

.hero__inner{
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto; width:100%;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:center;
}
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; gap:clamp(2rem,7vw,3rem); }
}

/* the real mark, and its reflection: the flip */
.hero__mark{ position:relative; }
.hero__logo,
.hero__echo{
  display:block;
  width:clamp(11rem,26vw,20rem);
  height:auto;
}
.hero__echo{
  position:absolute; left:0; top:100%;
  transform:scaleY(-1);
  transform-origin:top;
  opacity:.34;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 55%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 55%);
  pointer-events:none;
}
@media (max-width:900px){
  .hero__logo,
  .hero__echo{ width:clamp(9rem,38vw,13rem); }
  .hero__echo{ opacity:.22; }
}

.hero__h{
  font-family:var(--display);
  font-weight:900; font-stretch:112%;
  font-size:clamp(2.25rem,6vw,4.25rem);
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
.hero__h-alt{ color:var(--brass); }

.hero__line{
  max-width:44ch;
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  line-height:1.5;
  color:var(--bone-dim);
  margin:clamp(1.5rem,3vw,2rem) 0 0;
}

.hero__acts{ display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2.25rem; }

.hero__scroll{
  position:relative; z-index:1;
  align-self:flex-start;
  max-width:var(--max); width:100%; margin:auto auto 0;
  padding-top:3rem;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--smoke);
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:34px; margin-top:.6rem;
  background:linear-gradient(var(--smoke), transparent);
}

/* ═══ TICKER ═══ */
.ticker{
  background:var(--brass); color:var(--ink);
  overflow:hidden; padding:.9rem 0;
  border-block:1px solid var(--ink);
}
.ticker__track{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker__track span{
  font-family:var(--display); font-weight:900; font-stretch:112%;
  font-size:clamp(.9375rem,2.2vw,1.375rem);
  text-transform:uppercase; letter-spacing:.02em;
  padding-right:1.25rem; white-space:nowrap;
}
.ticker__track b{ color:var(--oxblood); padding-inline:.6rem; }
@keyframes slide{ to{ transform:translateX(-33.333%); } }
@media (prefers-reduced-motion:reduce){
  .ticker__track{ animation:none; }
}

/* ═══ MISSION ═══ */
.mission{ padding-block:clamp(4.5rem,11vw,9rem); }

.mission__lead{
  font-family:var(--display);
  font-weight:800; font-stretch:105%;
  font-size:clamp(1.75rem,4.4vw,3.25rem);
  line-height:1.06;
  letter-spacing:-.02em;
  max-width:19ch;
  margin:0 0 clamp(2.5rem,5vw,4rem);
  text-wrap:balance;
}
.mission__lead .hl{
  background:linear-gradient(to top, rgba(229,163,60,.55) 0 .34em, transparent .34em);
}

.mission__cols{
  columns:2; column-gap:clamp(2rem,4vw,4rem);
  max-width:min(100%,62rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:var(--rule);
}
.mission__cols p{ margin:0 0 1.35rem; break-inside:avoid; }
.mission__cols p:last-child{ margin-bottom:0; }
@media (max-width:760px){ .mission__cols{ columns:1; } }

.pillars{
  list-style:none; margin:clamp(3rem,6vw,5rem) 0 0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  background:color-mix(in srgb, var(--fg) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 18%, transparent);
}
.pillars li{ background:var(--bg); padding:clamp(1.75rem,3vw,2.5rem); }
.pillars h3{
  font-family:var(--display); font-weight:900; font-stretch:114%;
  font-size:1.125rem; text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 .75rem;
}
.pillars p{ margin:0; font-size:.9375rem; color:color-mix(in srgb, var(--fg) 72%, transparent); }

/* ═══ ARTIST ═══ */
.artist{ padding-block:clamp(4.5rem,11vw,9rem); }

.feature{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:900px){ .feature{ grid-template-columns:1fr; } }

.feature__media{ position:sticky; top:6rem; }
@media (max-width:900px){ .feature__media{ position:static; } }

.feature__tag{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--smoke); margin:1rem 0 0;
}

.feature__name{
  font-family:var(--display); font-weight:900; font-stretch:120%;
  font-size:clamp(2.5rem,7vw,4.5rem); line-height:.88; letter-spacing:-.02em;
  text-transform:uppercase; margin:0;
}
.feature__role{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); margin:1rem 0 2rem;
}
.feature__lead{
  font-size:clamp(1.125rem,2vw,1.4375rem); line-height:1.4;
  color:var(--bone); margin:0 0 2rem;
  padding-left:1.25rem; border-left:2px solid var(--brass);
  text-wrap:pretty;
}
.feature__body p{ color:var(--bone-dim); margin:0 0 1.35rem; }
.feature__close{ color:var(--bone) !important; }

.statline{
  list-style:none; margin:2.5rem 0 0; padding:1.75rem 0 0;
  border-top:var(--rule);
  display:flex; flex-wrap:wrap; gap:2.5rem;
}
.statline li{ display:flex; flex-direction:column; gap:.4rem; }
.statline span{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--smoke);
}
.statline b{
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:1rem; text-transform:uppercase; letter-spacing:.01em;
}

.roster-note{
  margin:clamp(3rem,6vw,5rem) 0 0; padding-top:1.75rem;
  border-top:var(--rule);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--smoke);
}
.roster-note a{ color:var(--brass); }

/* ═══ MUSIC ═══ */
/* Sits on the same ink as the artist section above it, so a hairline
   marks where one ends and the other starts. */
.music{
  padding-block:clamp(4.5rem,11vw,9rem);
  border-top:1px solid rgba(237,231,220,.1);
}

.tracks{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.875rem,1.8vw,1.375rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}

/* Spotify serves its own rounded dark player. A hairline frame ties it
   to the cards and panels used everywhere else on the page. */
.track{
  border:1px solid rgba(237,231,220,.14);
  background:var(--ink-2);
  padding:.5rem;
  transition:border-color .25s ease, transform .25s ease;
}
.track:hover{ border-color:rgba(229,163,60,.5); transform:translateY(-2px); }
.track iframe{ display:block; border-radius:10px; }

.music__note{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding-top:1.75rem;
  border-top:var(--rule);
  max-width:52ch;
  font-family:var(--mono); font-size:.75rem; line-height:1.7;
  letter-spacing:.06em; color:var(--smoke);
}

/* ═══ CAMPAIGN ═══ */
/* An oxblood wash, so this sits apart from the flat ink of the artist
   section above and the ink-2 of leadership below, and picks up the
   red in the billboard itself. */
.campaign{
  background:linear-gradient(180deg, var(--ink) 0%, #17090A 52%, var(--ink) 100%);
  border-block:1px solid rgba(237,231,220,.1);
  padding-block:clamp(4rem,9vw,7rem);
}

.campaign__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:920px){ .campaign__grid{ grid-template-columns:1fr; } }

.campaign__figure{
  margin:0;
  border:1px solid rgba(237,231,220,.16);
  overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.campaign__figure img{ width:100%; height:auto; }

.campaign__h{
  font-family:var(--display); font-weight:900; font-stretch:114%;
  font-size:clamp(2rem,5vw,3.25rem); line-height:.92; letter-spacing:-.025em;
  text-transform:uppercase; margin:0;
}
.campaign__h span{ color:var(--brass); }

.campaign__lead{
  font-family:var(--mono); font-size:.8125rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
  margin:1.25rem 0 1.75rem; padding-bottom:1.5rem;
  border-bottom:1px solid rgba(237,231,220,.16);
}
.campaign__body p{ color:var(--bone-dim); margin:0; }

/* Capped just under the clip's native 1072px so it is never scaled up. */
.campaign__video{
  margin:clamp(2.5rem,5vw,4rem) auto 0;
  max-width:62rem;
}
.campaign__video video{
  display:block; width:100%; height:auto;
  background:#000;
  border:1px solid rgba(237,231,220,.16);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.campaign__video figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:.875rem;
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.campaign__video figcaption span{ color:var(--smoke); }
.campaign__video figcaption b{ color:var(--brass); font-weight:500; }

/* ═══ PORTRAIT PLACEHOLDER ═══ */
.ph{
  position:relative; display:block;
  aspect-ratio:4/5; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(110,27,30,.5), transparent 70%),
    var(--ink-3);
  border:1px solid rgba(237,231,220,.14);
}
.ph::after{
  content:attr(data-initials);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:900; font-stretch:120%;
  font-size:clamp(3rem,7vw,5rem); letter-spacing:-.02em;
  color:rgba(229,163,60,.28);
}
.ph img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  transition:filter .45s ease, transform .6s ease;
}
.feature__media .ph:hover img{ filter:grayscale(0) contrast(1); transform:scale(1.02); }

/* ═══ LEADERSHIP CARDS ═══ */
.lead{ background:var(--ink-2); padding-block:clamp(4.5rem,11vw,9rem); }

.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));
}

.card{ perspective:1400px; }

.card__inner{
  position:relative; width:100%;
  aspect-ratio:3/4.35;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.card__inner.is-flipped{ transform:rotateY(180deg); }
@media (prefers-reduced-motion:reduce){
  .card__inner{ transition-duration:.01ms; }
}

/* full-face flip target on the front */
.card__trigger{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  padding:0; margin:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer;
}

.sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

.card__face{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(237,231,220,.14);
  overflow:hidden;
}

.card__face--front{ background:var(--ink); }
.card__face--front .ph{
  flex:1; aspect-ratio:auto; border:0;
}
.card__id{
  display:block; padding:1.125rem 1.125rem 1.25rem;
  border-top:1px solid rgba(237,231,220,.14);
}
.card__id b{
  display:block;
  font-family:var(--display); font-weight:900; font-stretch:112%;
  font-size:1.0625rem; line-height:1.1; text-transform:uppercase;
  letter-spacing:-.005em;
}
.card__id i{
  display:block; margin-top:.5rem;
  font-family:var(--mono); font-style:normal; font-size:.5625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--smoke);
  line-height:1.6;
}
.card__cue{
  position:absolute; top:.875rem; right:.875rem;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
  background:var(--brass); padding:.3rem .55rem;
  opacity:0; transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.card__trigger:hover .card__cue,
.card__trigger:focus-visible .card__cue{ opacity:1; transform:none; }

.card__face--back{
  transform:rotateY(180deg);
  background:var(--brass); color:var(--ink);
  justify-content:space-between;
  padding:1.375rem;
  border-color:var(--brass);
}
.card__bio{
  margin:0;
  font-size:.8125rem; line-height:1.62;
  overflow-y:auto;
}
.card__acts{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .875rem;
  flex-shrink:0; margin-top:1.125rem;
}
.card__more,
.card__ig,
.card__back{
  padding:0 0 2px; margin:0; border:0; background:none;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid currentColor;
  transition:color .2s ease;
}
.card__more:hover,
.card__ig:hover,
.card__back:hover{ color:var(--oxblood); }
.card__back{ opacity:.62; }

/* ═══ CONTACT ═══ */
.contact{ padding-block:clamp(4.5rem,11vw,9rem); }
.contact__h{
  font-family:var(--display); font-weight:900; font-stretch:120%;
  font-size:clamp(2.5rem,8vw,5.5rem); line-height:.88; letter-spacing:-.025em;
  text-transform:uppercase; margin:0;
}
.contact__sub{ max-width:46ch; margin:1.5rem 0 clamp(2.5rem,5vw,3.5rem); }

.contact__grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  background:color-mix(in srgb, var(--fg) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 22%, transparent);
}
.contact__card{
  background:var(--bg); padding:clamp(1.75rem,3vw,2.5rem);
  text-decoration:none;
  display:flex; flex-direction:column; gap:.5rem;
  transition:background .25s ease, color .25s ease;
}
.contact__card .eyebrow{ margin:0; }
.contact__card b{
  font-family:var(--display); font-weight:900; font-stretch:114%;
  font-size:1.25rem; text-transform:uppercase; letter-spacing:-.005em;
}
.contact__card i{
  font-style:normal; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.06em; color:color-mix(in srgb, var(--fg) 62%, transparent);
}
.contact__card:hover{ background:var(--ink); color:var(--bone); }
.contact__card:hover .eyebrow{ color:var(--brass); }
.contact__card:hover i{ color:var(--bone-dim); }

/* ═══ FOOTER ═══ */
.foot{ background:var(--ink); color:var(--bone); padding-top:clamp(3.5rem,7vw,5.5rem); }
.foot__grid{
  display:grid; gap:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1.5fr) auto auto auto;
  align-items:start;
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }

.foot__mark{
  font-family:var(--display); font-weight:900; font-stretch:122%;
  font-size:clamp(2rem,5vw,3rem); line-height:.85; letter-spacing:-.025em;
  margin:0;
}
.foot__mark span{
  display:block; margin-top:.65rem;
  font-family:var(--mono); font-size:.625rem; font-weight:500;
  letter-spacing:.3em; color:var(--smoke);
}
.foot__tag{ max-width:34ch; margin:1.5rem 0 0; font-size:.9375rem; color:var(--bone-dim); }

.foot__nav{ display:flex; flex-direction:column; gap:.85rem; }
.foot__nav a,
.foot__social a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--bone-dim);
  transition:color .2s ease;
}
.foot__nav a:hover,
.foot__social a:hover{ color:var(--brass); }

.foot__social ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }

.foot__legal{
  margin:0; padding:1.5rem var(--gut);
  border-top:1px solid rgba(237,231,220,.12);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--smoke);
}

/* ═══ BIO MODAL ═══ */
.modal{
  width:min(60rem,calc(100vw - 2rem));
  max-height:min(84svh,52rem);
  padding:0; border:1px solid rgba(237,231,220,.18);
  background:var(--ink-2); color:var(--bone);
}
.modal::backdrop{ background:rgba(6,6,7,.8); backdrop-filter:blur(5px); }

.modal__x{
  position:sticky; top:0; float:right; z-index:3;
  margin:.75rem .75rem 0;
  width:40px; height:40px;
  background:var(--brass); color:var(--ink);
  border:0; cursor:pointer; font-size:.875rem; line-height:1;
}
.modal__body{ padding:clamp(2rem,4vw,3.25rem); }
.modal__body h3{
  font-family:var(--display); font-weight:900; font-stretch:118%;
  font-size:clamp(1.75rem,4.5vw,2.75rem); line-height:.94;
  text-transform:uppercase; letter-spacing:-.02em;
  margin:0 0 .875rem; max-width:22ch;
}
.modal__body .role{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
  margin:0 0 2rem; padding-bottom:1.5rem;
  border-bottom:1px solid rgba(237,231,220,.16);
}
.modal__body p{ color:var(--bone-dim); margin:0 0 1.25rem; max-width:70ch; }
.modal__body p:last-child{ margin-bottom:0; }
.modal__body strong{ color:var(--bone); font-weight:600; }
.modal__body a{ color:var(--brass); }
.modal__links{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem;
  margin-top:2.25rem; padding-top:1.5rem;
  border-top:1px solid rgba(237,231,220,.16);
}
.modal__links a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--brass); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.modal__links a:hover{ border-bottom-color:var(--brass); }

.modal__body .creed{
  font-family:var(--display); font-weight:800; font-stretch:108%;
  font-size:clamp(1.0625rem,2.2vw,1.375rem); line-height:1.35;
  color:var(--bone); text-transform:none; letter-spacing:-.01em;
  margin:2rem 0; padding-left:1.25rem; border-left:2px solid var(--brass);
  max-width:44ch;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
}

@media (max-width:520px){
  .statline{ gap:1.75rem; }
  .hero__scroll{ display:none; }
}

/* ═══ SCROLL REVEAL ═══ */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(22px); }
  .reveal.in{
    opacity:1; transform:none;
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  }
}