/* Creator portfolio template: "workwear" theme.
   Denim, brass and chalk. One typeface (Archivo) in two widths.
   The one decorative motif is dashed stitching, used only on the name patch, the photo frame and the main buttons.
   Colors can be overridden from the editor (Settings > Colors). */

:root {
  --denim: #1E3150;        /* header, top and bottom bands */
  --denim-deep: #15233B;   /* hovers, video backgrounds, modal backdrop */
  --brass: #D4A24C;        /* buttons, highlights, badges */
  --brass-deep: #93661E;   /* small labels and numbers on light backgrounds */
  --bg: #EDEEEA;           /* page background (chalk) */
  --surface: #F8F8F5;      /* cards, tiles, logo boxes */
  --ink: #1B2230;          /* headings and strong text */
  --body: #3D4654;         /* body copy */
  --muted: #687080;        /* secondary text */
  --chalk: #EEF0EA;        /* text on denim */
  --line: rgba(27, 34, 48, .16);
  --line-dark: rgba(238, 240, 234, .22);

  --gutter: clamp(16px, 4vw, 44px);
  --max: 1200px;
  --radius: 10px;
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* denim twill: two faint diagonal weaves */
  --twill:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 7px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 1.0625rem/1.6 var(--font);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; border-radius: 4px; }
p { margin: 0; }

/* ---------- type ---------- */
h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-stretch: 72%;
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.25rem); }
h3 { font-size: 1.5rem; line-height: 1.05; }

/* *words* in the editor: a brass stitched underline instead of a color swap */
em {
  font-style: normal;
  text-decoration: underline dashed var(--brass);
  text-decoration-thickness: .055em;
  text-underline-offset: .14em;
  text-decoration-skip-ink: none;
}

.eyebrow {
  font: 600 .95rem/1.3 var(--font);
  color: var(--brass-deep);
  margin-bottom: 14px;
  text-wrap: balance;
}

/* ---------- layout ---------- */
.sec { padding-inline: var(--gutter); }
.wrap { max-width: var(--max); margin-inline: auto; padding-block: clamp(48px, 6vw, 88px); }
.wrap--head { padding-bottom: clamp(20px, 2.4vw, 32px); }
.sec--bleed { padding-inline: 0; padding-bottom: clamp(48px, 6vw, 80px); }
.sec--bleed .wrap--head { padding-inline: var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); }   /* keeps headings above full-width rows on the same left edge as everything else */
.hair {
  border: 0;
  border-top: 1px solid var(--line);
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--max);
  margin: 0 auto;
}
.hero + .hair { display: none; }   /* the denim edge already separates these */

/* ---------- draft bar ---------- */
.draftbar {
  background: var(--brass);
  color: var(--denim-deep);
  font: 600 .875rem/1.4 var(--font);
  text-align: center;
  padding: 9px var(--gutter);
}
.draftbar code { font-size: .82rem; background: rgba(21, 35, 59, .12); padding: 1px 6px; border-radius: 4px; }

/* ---------- header (denim, joins the hero) ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--denim);
  background-image: var(--twill);
  color: var(--chalk);
  border-bottom: 1px solid var(--line-dark);
}
.top__in {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* the name as a leather-style patch with stitching */
.brand, .foot__name {
  position: relative;
  display: inline-block;
  padding: 9px 16px 8px;
  background: var(--brass);
  color: var(--denim-deep);
  border-radius: 7px;
  font: 800 1.15rem/1 var(--font);
  font-stretch: 75%;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.brand::after, .foot__name::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(21, 35, 59, .55);
  border-radius: 4px;
  pointer-events: none;
}
.brand em, .foot__name em { text-decoration: none; }
.brand { margin-right: auto; }

.nav { display: flex; gap: 26px; }
.nav a {
  font: 500 .9375rem/1 var(--font);
  text-decoration: none;
  color: rgba(238, 240, 234, .82);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--chalk); border-color: var(--brass); }
.socials { display: flex; gap: 8px; }
.pill {
  font: 600 .875rem/1 var(--font);
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  color: var(--chalk);
  transition: background .2s, color .2s, border-color .2s;
}
.pill:hover { background: var(--chalk); color: var(--denim-deep); border-color: var(--chalk); }

/* ---------- buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 34px; }
.btn {
  position: relative;
  display: inline-block;
  font: 700 1.05rem/1 var(--font);
  text-decoration: none;
  padding: 18px 28px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary, .btn--cream { background: var(--brass); color: var(--denim-deep); }
.btn--primary::after, .btn--cream::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(21, 35, 59, .45);
  border-radius: 5px;
  pointer-events: none;
}
.btn--primary:hover, .btn--cream:hover { background: #E0B262; }
.btn--ghost { border-color: var(--line-dark); color: var(--chalk); }
.btn--ghost:hover { border-color: var(--chalk); }
/* outside the denim bands, the ghost button flips to dark */
.player__info .btn--ghost { border-color: var(--ink); color: var(--ink); }

/* ---------- hero (denim band) ---------- */
.hero {
  background-color: var(--denim);
  color: var(--chalk);
}
.hero.stripes { background-image: var(--twill); }   /* "stripes" in the editor = the twill texture */
.hero h1 { color: var(--chalk); }
.hero .eyebrow { color: var(--brass); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  max-width: var(--max);
  margin-inline: auto;
  padding-block: clamp(44px, 6vw, 92px) clamp(56px, 7vw, 104px);
}
.hero__grid:has(> .photo[hidden]) { grid-template-columns: minmax(0, 52rem); }
.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: rgba(238, 240, 234, .84);
  max-width: 36em;
  margin-top: 24px;
}
.lede strong { color: var(--chalk); font-weight: 600; }

/* photo: stitched inset frame with a brass block behind it */
.photo { position: relative; margin: 0 18px 18px 0; isolation: isolate; aspect-ratio: 4 / 5; }
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--radius);
  background: var(--denim-deep);
}
.photo::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--brass);
  border-radius: var(--radius);
  z-index: -1;
}
.photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px dashed rgba(238, 240, 234, .7);
  border-radius: 6px;
  pointer-events: none;
}
.photo.is-empty {
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(238, 240, 234, .06);
  border: 1.5px dashed rgba(238, 240, 234, .45);
  border-radius: var(--radius);
}
.photo.is-empty::after { display: none; }
.ghost-note { display: none; font: 500 1rem/1.5 var(--font); color: rgba(238, 240, 234, .75); padding: 24px; }
.ghost-note small { display: block; font-size: .8rem; margin-top: 6px; opacity: .8; }
.photo.is-empty .ghost-note { display: block; }

/* stat row */
.proof {
  list-style: none;
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: 40rem;
}
.proof li { padding: 0 18px 0 0; display: grid; gap: 6px; align-content: start; }
.proof li + li { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.proof strong { font: 800 clamp(2rem, 3vw, 2.5rem)/1 var(--font); font-stretch: 72%; color: var(--brass); }
.proof span { font: 400 .9rem/1.4 var(--font); color: rgba(238, 240, 234, .72); }

/* ---------- marquees (logo rows and kind words) ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee + .marquee { margin-top: 14px; }
.track { display: flex; width: max-content; animation: slide var(--dur, 40s) linear infinite; }
.marquee--rev .track { animation-direction: reverse; }
.marquee:hover .track,
.marquee:focus-within .track,
.marquee.is-paused .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(var(--shift, 0px) * -1)); } }

.group { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }

/* logos sit in one tone so a mixed set of brand colors reads as one row; full color on hover */
.logo {
  flex: none;
  width: 180px;
  height: 80px;
  margin-right: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: .78;
  transition: filter .25s, opacity .25s;
}
.logo:hover img { filter: none; opacity: 1; }
.logo .wordmark { font: 800 1.2rem/1.1 var(--font); font-stretch: 75%; text-align: center; text-wrap: balance; color: var(--ink); }
.logo.is-ghost { border: 1.5px dashed var(--muted); background: transparent; color: var(--muted); font: 500 .875rem/1 var(--font); }

/* kind words */
.marquee--film .track { padding-block: 4px; }
.kw {
  position: relative;
  flex: none;
  width: min(340px, 78vw);
  min-height: 200px;
  margin-right: 18px;
  padding: 30px 28px 26px;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 4px solid var(--brass);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}
.kw__text { font: 500 1.25rem/1.4 var(--font); color: var(--ink); }
.kw__from { font: 600 .9rem/1.3 var(--font); color: var(--brass-deep); }
.kw img { border-radius: 6px; }
.kw strong { font-weight: 700; background: linear-gradient(transparent 60%, rgba(212, 162, 76, .45) 0); }
.kw--md { width: min(380px, 80vw); }
.kw--md .kw__text { font-size: 1.15rem; }
.kw--lg { width: min(440px, 84vw); }
.kw--lg .kw__text { font-size: 1.02rem; line-height: 1.45; }
.kw.is-ghost { border: 1.5px dashed var(--muted); background: transparent; }
.kw.is-ghost .kw__text { font-size: 1.05rem; font-weight: 400; color: var(--muted); }

/* ---------- work: category tiles ---------- */
.sub { max-width: 40em; margin-top: 16px; color: var(--body); font-size: 1.125rem; }
.tiles {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tiles li { display: flex; }
.tile {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  min-height: 150px;
  padding: 20px 22px;
  text-decoration: none;
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.tile__n { font: 600 .9rem/1 var(--font); color: var(--brass-deep); transition: color .25s; }
.tile__arrow { position: absolute; top: 18px; right: 20px; font-size: 1.1rem; color: var(--denim); transition: transform .25s var(--ease), color .25s; }
.tile__text { display: grid; gap: 6px; }
.tile__name { font: 800 1.5rem/1.05 var(--font); font-stretch: 75%; }
.tile__sub { font: 400 .9rem/1.35 var(--font); color: var(--muted); transition: color .25s; }
.tile:hover { background: var(--denim); color: var(--chalk); }
.tile:hover .tile__n, .tile:hover .tile__arrow { color: var(--brass); }
.tile:hover .tile__arrow { transform: translateY(4px); }
.tile:hover .tile__sub { color: rgba(238, 240, 234, .75); }
.tile--ask { background: transparent; border: 1.5px dashed var(--line); }
.tile--ask:hover { border-color: var(--denim); }

/* ---------- work: filters ---------- */
.filters { display: grid; gap: 12px; margin-top: 52px; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__label { font: 700 .95rem/1 var(--font); color: var(--ink); width: 70px; }
.chip {
  font: 500 .9rem/1 var(--font);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--denim); }
.chip[aria-pressed="true"] { background: var(--denim); color: var(--chalk); border-color: var(--denim); }
.legend { margin-top: 4px; }
.legend summary { cursor: pointer; font: 600 .95rem/1.4 var(--font); color: var(--denim); width: max-content; }
.legend dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 14px 0 0;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: .95rem;
}
.legend dt { font-weight: 700; color: var(--ink); }
.legend dd { margin: 0; color: var(--body); }

/* ---------- work: category rows ---------- */
.cat { scroll-margin-top: 96px; padding-top: 60px; }
.cat__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.cat__n { display: none; }   /* categories aren't a sequence, so no numbers */
.cat__head h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.cat__sub { font: 400 1rem/1.3 var(--font); color: var(--muted); }
.cat__count { margin-left: auto; font: 500 .9rem/1 var(--font); color: var(--muted); }
.cat__intro { max-width: 44em; color: var(--body); margin: -4px 0 22px; }
.cat__note {
  max-width: 46em;
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 4px solid var(--brass);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--body);
}

.vrow { position: relative; --per: 4; --vgap: 18px; }
.vgrid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--vgap)) / var(--per));
  gap: var(--vgap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 16px 10px 6px 0;
  margin-top: -10px;
  outline-offset: 4px;
}
.vgrid::-webkit-scrollbar { display: none; }
.vgrid > .vcard { scroll-snap-align: start; }
.vrow.has-right .vgrid { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.vrow.has-left .vgrid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.vrow.has-left.has-right .vgrid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vnav {
  position: absolute;
  top: 36%;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 0;
  background: var(--denim);
  color: var(--chalk);
  font: 600 1.2rem/1 var(--font);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(21, 35, 59, .25);
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.vnav:hover { background: var(--brass); color: var(--denim-deep); transform: scale(1.05); }
.vnav--prev { left: -14px; }
.vnav--next { right: -14px; }

.vcard { position: relative; display: flex; flex-direction: column; gap: 12px; }
.vthumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--denim-deep);
  cursor: pointer;
}
.vthumb video, .vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb .play {
  position: absolute;
  inset: auto 12px 12px auto;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--brass);
  display: grid;
  place-items: center;
  transition: transform .2s var(--ease);
}
.vthumb .play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--denim-deep); }
.vthumb:hover .play { transform: scale(1.08); }
.vmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.vbrand { flex-basis: 100%; font: 800 1.25rem/1.1 var(--font); font-stretch: 78%; color: var(--ink); }
.vsub { flex-basis: 100%; font: 400 .9rem/1.3 var(--font); color: var(--muted); }
.tag {
  margin-top: 8px;
  font: 600 .78rem/1 var(--font);
  color: var(--denim);
  background: rgba(30, 49, 80, .08);
  border-radius: 5px;
  padding: 6px 9px;
}
/* badge: a brass hang tag */
.badge {
  position: absolute;
  top: -10px;
  right: -6px;
  z-index: 2;
  max-width: 120px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--brass);
  color: var(--denim-deep);
  font: 700 .8rem/1.15 var(--font);
  text-align: center;
  transform: rotate(4deg);
  box-shadow: 0 4px 12px rgba(21, 35, 59, .22);
}
.badge::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed rgba(21, 35, 59, .45);
  border-radius: 4px;
}
.vcard.is-ghost .vthumb {
  border: 1.5px dashed var(--muted);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font: 500 .875rem/1.4 var(--font);
  text-align: center;
  cursor: default;
}
.vcard.is-ghost .vbrand { color: var(--muted); font-size: 1rem; font-stretch: 100%; font-weight: 500; }
.vcard.is-ghost .tag { color: var(--muted); background: transparent; border: 1px dashed var(--muted); }
.ghost-title { font: 700 1.05rem/1.25 var(--font); color: var(--ink); padding: 0 12px; }
.empty { padding-top: 40px; color: var(--muted); }

/* ---------- about ---------- */
.about__top { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 6vw, 88px); align-items: start; }
.about__head { align-self: start; }
@media (min-width: 901px) { .about__head { position: sticky; top: 104px; } }
.about__photo { margin: 30px 0 0; max-width: 420px; }
.about__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: var(--radius);
  background: var(--surface);
}
.about__photo.is-empty { aspect-ratio: 4 / 5; border: 1.5px dashed var(--muted); border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); font: 500 .95rem/1.4 var(--font); }
.about__body { display: grid; gap: 18px; align-content: start; font-size: 1.125rem; line-height: 1.65; color: var(--body); max-width: 36em; }
.about__line { font: 700 clamp(1.4rem, 2.2vw, 1.75rem)/1.25 var(--font); font-stretch: 85%; color: var(--ink); }

/* casting card */
.fit { margin-top: 14px; padding: 24px 26px 10px; background: var(--surface); border-radius: var(--radius); }
.fit__title { font: 800 1.25rem/1 var(--font); font-stretch: 78%; color: var(--ink); margin: 0 0 8px; }
.fit__row { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.fit__row:first-of-type { border-top: 0; }
.fit__label { font: 600 .9rem/2 var(--font); color: var(--muted); }
.fit__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fit__tags li { font: 500 .9rem/1 var(--font); color: var(--denim); background: rgba(30, 49, 80, .08); border-radius: 5px; padding: 8px 11px; }

/* process steps: a real sequence, so these keep their numbers */
.steps {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  counter-reset: step;
}
.steps li { padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; background: var(--surface); border-radius: var(--radius); }
.steps__n { font: 800 2rem/1 var(--font); font-stretch: 72%; color: var(--brass-deep); }
.steps h3 { font-size: 1.5rem; }
.steps p { color: var(--body); font-size: 1rem; line-height: 1.55; }

/* ---------- banner photo ---------- */
.banner { margin: 0; height: clamp(260px, 40vw, 540px); overflow: hidden; background: var(--denim-deep); }
.banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* ---------- closer + footer (denim band) ---------- */
.closer { background-color: var(--denim); background-image: var(--twill); color: var(--chalk); padding-inline: var(--gutter); }
.closer h2 { color: var(--chalk); font-size: clamp(2.5rem, 5vw, 4.25rem); max-width: 14em; }
.closer .eyebrow { color: var(--brass); }
.closer__in { padding-block: clamp(72px, 9vw, 128px); }
.closer__lead { margin-top: 22px; font: 700 clamp(1.3rem, 2.2vw, 1.6rem)/1.25 var(--font); font-stretch: 85%; color: var(--brass); }
.closer__p { max-width: 36em; margin-top: 16px; font-size: 1.125rem; color: rgba(238, 240, 234, .82); }
.mail { font: 500 1.1rem/1.2 var(--font); color: var(--chalk); text-underline-offset: 5px; text-decoration-color: rgba(238, 240, 234, .45); }
.mail:hover { text-decoration-color: var(--brass); }
.foot { border-top: 1px solid var(--line-dark); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-block: 32px; }
.foot__in > div:first-child { display: grid; gap: 12px; justify-items: start; }
.foot__tag, .foot__small { font-size: .9rem; color: rgba(238, 240, 234, .7); margin: 0; }
.socials--light .pill { border-color: var(--line-dark); color: var(--chalk); }

/* ---------- video player ---------- */
dialog#player { border: 0; padding: 0; background: transparent; max-width: min(920px, 94vw); width: 100%; overflow: visible; }
dialog#player::backdrop { background: rgba(21, 35, 59, .86); }
dialog#player video { width: 100%; max-height: 78vh; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 8px; background: #000; display: block; }
.player__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  background: var(--bg);
  border-radius: 14px;
  border-top: 5px solid var(--brass);
  padding: 20px;
  max-height: calc(94vh - 60px);
  overflow: auto;
}
.player__info { padding: 6px 4px 4px 0; }
.player__info h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.pi__niche { font: 600 .95rem/1 var(--font); color: var(--brass-deep); margin: 0 0 10px; }
.pi__sub { color: var(--muted); margin-top: 8px; }
.pi__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; }
.pi__chips li { font: 600 .8rem/1 var(--font); color: var(--denim); background: rgba(30, 49, 80, .08); border-radius: 5px; padding: 7px 10px; }
.pi__facts { margin: 22px 0 0; display: grid; gap: 16px; }
.pi__facts dt { font: 700 .9rem/1 var(--font); color: var(--ink); margin-bottom: 6px; }
.pi__facts dd { margin: 0; line-height: 1.45; }
.pi__quote { font: 500 1.2rem/1.35 var(--font); color: var(--ink); }
.pi__tag { font: 500 .78rem/1 var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; margin-left: 6px; white-space: nowrap; }
.pi__note { margin-top: 18px; color: var(--body); font-size: .98rem; }
.pi__cta { margin-top: 24px; padding: 15px 22px; font-size: 1rem; }
.player__close {
  position: absolute;
  top: -46px;
  right: 0;
  font: 600 .95rem/1 var(--font);
  color: var(--chalk);
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
}
.player__close:hover { background: var(--chalk); color: var(--denim-deep); }

/* ---------- responsive (used when FIT_DESKTOP is false in index.html) ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .hero__grid { grid-template-columns: 1fr; padding-block: 32px 56px; }
  .photo { width: min(100% - 18px, 340px); justify-self: center; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .vrow { --per: 3; }
  .about__top { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .player__grid { grid-template-columns: 1fr; gap: 18px; }
  dialog#player { max-width: min(430px, 94vw); }
  dialog#player video { max-height: 56vh; }
  .legend dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legend dd { margin-bottom: 10px; }
}
@media (max-width: 520px) {
  .proof { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; }
  .proof li, .proof li + li { grid-template-columns: 84px 1fr; align-items: baseline; gap: 14px; padding: 0; border-left: 0; }
  .top__in { gap: 12px; }
  .brand { font-size: 1rem; padding: 8px 12px 7px; }
  .pill { padding: 8px 10px; font-size: .8rem; }
  .btn { padding: 17px 22px; }
  .steps { grid-template-columns: 1fr; }
  .filters__label { width: 100%; }
  .vrow { --per: 2.2; --vgap: 12px; }
  .vnav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .btn, .tile, .tile__arrow, .vthumb .play, .logo img { transition: none; }
}