/* ---------------------------------------------------------------------------
   BRAND. Change these to rebrand the whole site: colors, fonts, corner radius.
   Brand setup fills the first seven from the partner's two colors.
   --------------------------------------------------------------------------- */
:root {
  --brand: #d5a134;          /* buttons and accents on the page */
  --brand-deep: #c4922a;     /* button hover */
  --brand-glow: #d5a134;     /* the big numbers and buttons on the dark panels */
  --ink: #342215;            /* main text on a light page */
  --ink-muted: #625245;      /* secondary text on a light page */
  --night: #2a1b11;          /* the dark panels */
  --night-glow: #513716;     /* the dark panels' lit corner */

  --paper: #fdfaf1;          /* page background */
  --surface: #f6efe1;        /* cards on the page */
  --text: var(--ink);        /* text on the page (set light when the page is dark) */
  --text-muted: var(--ink-muted);
  --line: #e6ddcc;           /* hairlines on the page */
  --on-night: #ffffff;       /* text on the dark panels */
  --on-night-muted: #d9ccb8;
  --accent-night: #d5a134;  /* the big number on the dark panels; set a color to pin it */
  --on-brand: #2a1b11;          /* text on brand buttons; set a color to pin it */
  --on-accent: var(--night);                 /* text on buttons inside the dark panels */

  --font-display: "Cormorant Garamond", Georgia, serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --radius-panel: 34px;
  --radius-card: 26px;
  --maxw: 1160px;
  --gutter: clamp(18px, 3.5vw, 48px);
  --section: clamp(56px, 7vw, 104px);
}

/* Worked out from the brand color so any partner's colors stay readable: a light enough accent
   on the dark panels, and black or white text on brand buttons. Older browsers use the glow and white. */
:root {
  --auto-accent-night: var(--brand-glow);
  --auto-on-brand: #ffffff;
}
@supports (color: oklch(from red l c h)) {
  :root {
    --auto-accent-night: oklch(from var(--brand) max(l, 0.8) c h);
    --auto-on-brand: oklch(from var(--brand) clamp(0, (0.68 - l) * 1000, 1) 0 0);
  }
}

/* --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 17px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent-night); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0 0; }

h1, h2, .big, .deal .n {
  font-variant-numeric: lining-nums;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0;
}
h2 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1; margin-bottom: clamp(24px, 3vw, 36px); max-width: 24ch; }

/* Buttons ------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand);
  font: 600 17px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background .2s, transform .2s;
}
.button:hover { background: var(--brand-deep); }
.button:active { transform: scale(.98); }
.button.small { min-height: 42px; padding: 0 20px; font-size: 15px; }
.panel .button, .close .button { background: var(--accent-night); color: var(--on-accent); }
.panel .button:hover, .close .button:hover { filter: brightness(1.08); }

/* Header -------------------------------------------------------------------- */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; }
.logo img { height: 34px; width: auto; }

/* Hero: the number on a dark panel ------------------------------------------ */
.panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-panel);
  background: radial-gradient(120% 90% at 85% 0%, var(--night-glow), var(--night) 60%);
  color: var(--on-night);
  text-align: center;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px) clamp(52px, 7vw, 92px);
}
.art { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: var(--accent-night); }
.art canvas { position: absolute; left: 0; top: 30%; width: 100%; height: 70%; }
.art img { position: absolute; left: -5%; width: 110%; max-width: none; height: auto; top: 50%; transform: translateY(-40%); opacity: .95; }
/* Artwork with detail of its own goes under the button, never behind the words: <div class="art below"><img></div> */
.panel:has(.art.below) { padding-bottom: 0; }
.art.below { position: relative; inset: auto; z-index: 0; margin: clamp(24px, 4vw, 48px) calc(-1 * clamp(20px, 4vw, 56px)) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
.art.below img { position: static; width: 100%; max-width: 100%; transform: none; opacity: 1; }
.kicker { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--on-night-muted); margin: 0 0 18px; }
.hero h1 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -0.025em; max-width: 24ch; margin: 0 auto; }
.big {
  font-size: clamp(44px, 10.2vw, 140px); line-height: .9; color: var(--accent-night);
  margin: clamp(14px, 2vw, 24px) 0 clamp(26px, 3vw, 36px); white-space: nowrap;
}
.big .to { font-size: .38em; color: var(--on-night); vertical-align: .6em; margin: 0 .18em; letter-spacing: -0.02em; }
.fine { font-size: 13px; color: var(--on-night-muted); margin: 16px 0 0; }

/* Recent deals ---------------------------------------------------------------- */
.deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.deal { background: var(--surface); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 34px); }
.deal .n { font-size: clamp(52px, 6vw, 76px); line-height: 1; color: var(--brand); }
.deal .what { font-weight: 600; margin-top: 14px; }
.deal .size { color: var(--text-muted); font-size: 15px; }

/* Names swapped out: one record, shown the way it's licensed ------------------ */
.record {
  max-width: 620px; background: var(--surface); border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 32px);
}
.record .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.record p { font-size: clamp(18px, 2vw, 22px); margin: 14px 0 20px; }
.swap { display: inline-grid; vertical-align: bottom; }
.swap > span { grid-area: 1 / 1; transition: opacity .45s, transform .45s; }
.swap .after { background: var(--paper); border-radius: 8px; padding: 0 8px; margin: 0 -2px; font-weight: 600; }
.swap.done .before, .swap:not(.done) .after { opacity: 0; transform: translateY(.35em); }
.record .caption { margin: 0; font-size: 15px; color: var(--text-muted); }

/* What moves your number ------------------------------------------------------ */
.moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.moves li { background: var(--surface); border-radius: var(--radius-card); padding: 24px; font-weight: 600; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 88px; }
.bars span { flex: 1; border-radius: 8px 8px 4px 4px; background: var(--line); height: var(--h); transform-origin: bottom; }
.bars span:last-child { background: var(--brand); }

/* Questions ------------------------------------------------------------------- */
.qa { max-width: 820px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 600; font-size: 19px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--brand); transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa p { margin: -6px 0 22px; color: var(--text-muted); max-width: 60ch; }

/* Close ----------------------------------------------------------------------- */
.close .panel { padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px); }
.close h2 { margin: 0 auto 28px; }

/* Footer ---------------------------------------------------------------------- */
.site-footer { padding: var(--section) 0 40px; font-size: 13px; color: var(--text-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.site-footer p { margin: 0; max-width: 70ch; }
.motion-toggle { font: inherit; color: inherit; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }

/* Recruit page ---------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 360px; gap: clamp(28px, 5vw, 64px); align-items: center; text-align: left; }
.split h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1; letter-spacing: var(--display-tracking); max-width: 14ch; margin: 0 0 18px; }
.split .lede { font-size: 19px; color: var(--on-night-muted); margin: 0 0 28px; }
.film video { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-card); background: #000; }
.film figcaption { font-size: 13px; color: var(--on-night-muted); margin-top: 10px; }

/* Motion: sections rise in once, only after the script runs -------------------- */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .7s; }
.motion-ready [data-reveal].seen { opacity: 1; transform: none; }
.motion-ready .bars span { transform: scaleY(.15); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.motion-ready .seen .bars span { transform: none; }
.motion-ready .seen .bars span:nth-child(2) { transition-delay: .12s; }
.motion-ready .seen .bars span:nth-child(3) { transition-delay: .24s; }
@keyframes drift { from { transform: translate(-3%, -40%); } to { transform: translate(3%, -44%); } }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.07); } }
.motion-ready .art img { animation: drift 14s ease-in-out infinite alternate; }
.motion-ready .art.below img { animation: push 16s ease-in-out infinite alternate; transform-origin: 60% 60%; }
.paused .art img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal], .motion-ready .bars span { opacity: 1; transform: none; transition: none; }
  .motion-ready .art img { animation: none; }
}

@media (max-width: 860px) {
  .deals { grid-template-columns: 1fr; }
  .moves { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; text-align: center; }
  .split h1 { margin-left: auto; margin-right: auto; }
  .film { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 520px) {
  .logo img { height: 24px; }
  .site-header .button.small { padding: 0 16px; font-size: 14px; }
  .moves li { min-height: 170px; padding: 20px; }
  .panel { border-radius: var(--radius-card); }
  /* The number stacks on a phone so it can stay big. */
  .big { display: flex; flex-direction: column; align-items: center; font-size: clamp(64px, 23vw, 96px); line-height: .92; }
  .big .to { vertical-align: 0; margin: .06em 0 .1em; font-size: .34em; }
  .deal { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 20px 22px; }
  .deal .n { grid-row: span 2; font-size: 44px; }
  .deal .what { margin-top: 0; }
}

/* Best of State */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo img { height: 44px; }
.logo .name { font: italic 600 24px/1 var(--font-display); }
.logo .powered { display: block; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; font-style: normal; }
.eyebrow { font: 600 12px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-night); margin: 0 0 18px; }
.hero h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.05; }
.film { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.film video { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-card); background: var(--night); display: block; }
.letter p { font-size: clamp(18px, 1.8vw, 21px); max-width: 46ch; margin: 0 0 18px; }
.letter .sig { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.letter .sig img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.letter .sig b { display: block; font: italic 600 22px/1.1 var(--font-display); }
.letter .sig span { font-size: 14px; color: var(--ink-muted); }
@media (max-width: 760px) {
  .film { grid-template-columns: 1fr; }
  .film video { max-width: 340px; margin: 0 auto; }
  .logo .name { font-size: 20px; }
}
.deal .n, .qa summary::after { color: #8a6412; }