/* Mainboard - model & talent agency HTML template by Omnium Labs
   Colours, fonts and spacing live in :root. The whole look changes from there. */
:root {
  --ink: #0e0e0d;        /* dark sections, hero */
  --ink-text: #ecebe6;   /* text on dark */
  --bone: #e4e1d9;       /* the hero line, light sections */
  --bone-text: #121211;  /* text on light */
  --head: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Ranade", "Helvetica Neue", Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --gutter: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);
  --radius: 0;
}
@media (max-width: 760px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body { background: var(--ink); color: var(--ink-text); font: 400 17px/1.55 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--bone); color: var(--bone-text); }
.dark { background: var(--ink); color: var(--ink-text); }
.light { background: var(--bone); color: var(--bone-text); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.mono, .label { font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.dim { opacity: .58; }
.head { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bone); color: var(--bone-text); padding: 10px 14px; }
.skip:focus { left: var(--gutter); top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons and links: the line under them is the theme's motif, it thickens into the button on hover */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; border: 0; cursor: pointer; text-decoration: none;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-text); background: transparent; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone); transition: transform .5s var(--ease-io); transform-origin: bottom; }
.btn::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.btn:hover::after { width: 30px; }
.light .btn, .btn--dark { color: var(--ink-text); }
.light .btn::before, .btn--dark::before { background: var(--ink); }
.link-line { position: relative; display: inline-block; text-decoration: none; padding: 6px 0; }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transition: height .35s var(--ease); }
.link-line:hover::after { height: 4px; }

/* Header (difference blend keeps it readable over dark, light and photos) */
.header { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter); color: var(--ink-text); mix-blend-mode: difference; pointer-events: none; }
.header a, .header button { pointer-events: auto; }
/* on load the header slides in from the right while the line draws from the left */
.header { overflow: clip; }
.motion .header > * { transform: translateX(100vw); transition: transform 1.3s var(--ease-io); }
.motion .header > .logo { transition-delay: .1s; }
.motion .header.in > * { transform: none; }
.logo { font: 800 15px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.nav-links { display: flex; gap: 30px; align-items: center; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nav-links a { position: relative; text-decoration: none; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-links .nav-cta::after { transform: scaleX(1); height: 2px; }
.menu-btn { display: none; background: none; border: 0; cursor: pointer; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 0; }
.menu { position: fixed; inset: 0; z-index: 35; background: var(--bone); color: var(--bone-text); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 100px var(--gutter) 28px; clip-path: inset(50% 0 50% 0); transition: clip-path .7s var(--ease-io); }
.menu[hidden] { display: flex; visibility: hidden; }
.menu.open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu nav { display: flex; flex-direction: column; margin-bottom: 40px; }
.menu nav a { font: 800 clamp(40px, 12vw, 72px)/.95 var(--head); text-transform: uppercase; letter-spacing: -.02em; text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.menu-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.menu-foot a { text-decoration: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
}

/* Rising headings: rows grow out of the line under them (hero, page heads, talent names) */
/* same measures everywhere as in the hero: rows .03em apart, the last row .03em above the line, the line is the bottom edge */
.rise { line-height: 1; clip-path: inset(-1em -1em 0 -1em); }
.rise .m { display: block; overflow: hidden; padding: .05em 0; }
.rise .m + .m { margin-top: -.4em; }
.rise .m:last-child { margin-bottom: -.235em; }
.rise .a, .rise .b { display: block; }
.motion .rise .a { transform: translateY(115%); transition: transform 1s var(--ease); }
/* every page head moves like the hero: the line draws from the left (1.3 s), the title rises out of it after it,
   the words under the line slide in from the right (like the header), the small label comes from the left with the line */
.motion .in .rise .a { transform: none; transition-delay: 1.05s; }
.motion .in .rise .m:nth-child(2) .a { transition-delay: 1.17s; }
.motion .in .rise .m:nth-child(3) .a { transition-delay: 1.29s; }
.phead, .talent-info, .lost { overflow: clip; }
.motion .from-left { transform: translateX(-100vw); transition: transform 1.3s var(--ease-io); }
.motion .in .from-left, .motion .from-left.in { transform: none; }
.motion .from-right > * { transform: translateX(100vw); transition: transform 1.3s var(--ease-io); }
.motion .in .from-right > *, .motion .from-right.in > * { transform: none; }
.motion .from-right > :nth-last-child(2) { transition-delay: .06s; }
.motion .from-right > :nth-last-child(3) { transition-delay: .12s; }
.motion .from-right > :nth-last-child(4) { transition-delay: .18s; }
.setup, .setup *, .setup *::before, .setup *::after { transition: none !important; }
/* form parts and similar blocks: their content rises out of its own slot */
/* cut exactly at the block's bottom edge (also cuts a fieldset legend, which overflow does not); a little room on the other sides for focus rings */
.up { clip-path: inset(-6px -6px 0 -6px); }
/* --drop = the block's own height (set by main.js), so everything in it is fully below its line and all parts travel together;
   until then 100vh keeps it out of sight. The text waits 1.05 s for its line, exactly like the hero title. */
.motion .up > *, .motion .lt > * { transform: translateY(var(--drop, 100vh)); transition: transform 1s var(--ease) calc(var(--wait, 1.05s) + var(--k, 0) * .08s); }
.motion .up.in > *, .motion .lt.in > * { transform: none; }
/* text with no line of its own (headings, paragraphs, buttons further down) does not wait for a line */
.free { --wait: .15s; }
.up > span, .ln > span, .lt > span { display: inline-block; } /* an inline span cannot move */
.motion [data-even].up:not(.evened) { visibility: hidden; } /* until its letters are set */
/* blocks with a line on top (services, offices, next talent): the line draws from the right, the text rises under it */
.lt { position: relative; clip-path: inset(-6px -6px 0 -6px); }
.lt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; }
.motion .lt::before { transform: scaleX(0); transform-origin: right; transition: transform 1.3s var(--ease-io) calc(var(--k, 0) * .08s); }
.motion .lt.in::before { transform: none; }
.motion .up:not(.in) ::placeholder { color: transparent; } /* the browser draws the placeholder past the cut, so it shows once the field is up */
.motion .up.in ::placeholder { transition: color .4s 1.9s; }
/* big paragraphs rise line by line (main.js splitLines) */
[data-lines] .m { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
[data-lines] .a { display: block; }
.motion [data-lines]:not(.split) { visibility: hidden; } /* until it is cut into lines */
.motion [data-lines] .a { transform: translateY(110%); transition: transform 1s var(--ease) calc(var(--wait, 1.05s) + var(--l, 0) * .1s); }
.motion [data-lines].in .a { transform: none; }
/* lines under the head (list rows, measurements) draw from the right, against the main line, and their text rises out of them */
.ln { position: relative; clip-path: inset(-6px -6px 0 -6px); }
.aside li > span { display: block; } /* an inline span cannot move */
.ln::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, currentColor 25%, transparent); }
.motion .ln::after { transform: scaleX(0); transform-origin: right; transition: transform 1.3s var(--ease-io) calc(var(--k, 0) * .08s); }
.motion .ln.in::after { transform: none; }
.motion .ln > * { transform: translateY(var(--drop, 100vh)); transition: transform 1s var(--ease) calc(var(--wait, 1.05s) + var(--k, 0) * .08s); }
.motion .ln.in > * { transform: none; }
[data-even] .ch { display: inline-block; letter-spacing: 0; }
[data-even] .b, [data-even].nowrap { white-space: nowrap; }
.rule { height: 1px; background: currentColor; opacity: .9; }
.motion .rule { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-io); }
.motion .in .rule, .motion .rule.in { transform: scaleX(1); }

/* Photos rise out of their bottom edge (the photo is clipped, the frame is what gets watched) */
.ph { position: relative; overflow: hidden; display: block; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.motion .ph.reveal img { clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 1.1s var(--ease-io), transform 1.6s var(--ease); }
.motion .ph.reveal.in img { clip-path: inset(0 0 0 0); transform: none; }

/* HERO: the line in the middle, title on it, photos fly past in front while the line grows into the next section */
.pin { position: relative; height: 340vh; }
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: var(--ink-text); }
.hero .line { position: absolute; left: 0; right: 0; top: 50%; height: calc(1px + var(--p, 0) * 100vh); transform: translateY(-50%); background: var(--bone); z-index: 1; }
.motion .hero .line { transform: translateY(-50%) scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-io); }
.motion .hero.in .line { transform: translateY(-50%) scaleX(1); }
.hero .title { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(50% + .5px); z-index: 2;
  font-size: clamp(40px, calc((100vw - 2 * var(--gutter)) / 8), 214px); }
.hero .title .b { transform: translateY(calc(var(--q, 0) * 115%)); }
.hero .ticks { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(50% + 14px); z-index: 2; display: flex; justify-content: space-between; gap: 12px; }
.hero .kick { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; z-index: 2; }
.hero .ticks, .hero .kick { opacity: calc(1 - var(--q, 0) * 2); }
/* the line under the hero comes in from the left with the line */
.motion .hero .kick { transform: translateX(-100vw); transition: transform 1.3s var(--ease-io); }
.motion .hero.in .kick { transform: none; }
/* the words under the line slide in from the right, like the header, against the line that draws from the left */
.motion .hero .ticks span { display: inline-block; transform: translateX(100vw); transition: transform 1.3s var(--ease-io); }
.motion .hero.in .ticks span { transform: none; }
.motion .hero .ticks span:nth-last-child(2) { transition-delay: .04s; }
.motion .hero .ticks span:nth-last-child(3) { transition-delay: .08s; }
.motion .hero .ticks span:nth-last-child(4) { transition-delay: .12s; }
.motion .hero .ticks span:nth-last-child(5) { transition-delay: .16s; }
.motion .hero .ticks span:nth-last-child(6) { transition-delay: .2s; }
.fly { position: absolute; left: 0; aspect-ratio: 3 / 4; will-change: transform; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.fly img { width: 100%; height: 100%; object-fit: cover; }
/* the light on a flying photo follows its turn: a sheen slides across, the side turned away gets darker */
.fly::after, .peek::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, calc(.14 + var(--g, 0) * .3)) 49%, rgba(255, 255, 255, .06) 54%, transparent 64%) calc(50% - var(--d, 0) * 70%) 0 / 280% 100% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, calc(var(--d, 0) * .5)), transparent 45%, transparent 55%, rgba(0, 0, 0, calc(var(--d, 0) * -.5))); }
html:not(.motion) .pin { height: auto; }
html:not(.motion) .hero { position: relative; }
@media (max-width: 760px) {
  .pin { height: 260vh; }
  .hero .ticks span:nth-child(n+4) { display: none; }
}

/* The line between two sections: it grows on scroll until its colour is the next section */
.grow { position: relative; height: 60vh; overflow: hidden; }
.feature + .grow, .statement + .grow { margin-top: -60px; }
.grow .grow-line { position: absolute; left: 0; right: 0; top: 50%; height: calc(1px + var(--p, 0) * 100%); transform: translateY(-50%); }
.grow.dark .grow-line { background: var(--bone); }
.grow.light .grow-line { background: var(--ink); }
html:not(.motion) .grow { display: none; }

/* Board: the list of talents */
.board { padding: 120px 0 140px; }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 48px; }
.board-head .big { font-size: clamp(56px, 11vw, 200px); }
.filters { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.filters button { background: none; border: 0; cursor: pointer; padding: 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; position: relative; }
.filters button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.filters button:hover::after, .filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.list, .stats, .aside ul { position: relative; }
.list::before, .stats::before, .aside ul::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in srgb, currentColor 25%, transparent); }
.motion .list::before, .motion .stats::before, .motion .aside ul::before { transform: scaleX(0); transform-origin: right; transition: transform 1.3s var(--ease-io); }
.motion .list.in::before, .motion .stats.in::before, .motion .aside ul.in::before { transform: none; }
.list.is-grid::before { display: none; }
.r { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 160px 90px 140px; align-items: center; gap: 16px; padding: 18px 0; text-decoration: none; }
.r[hidden] { display: none; }
.r .n { display: block; overflow: hidden; position: relative; font: 800 clamp(24px, 2.8vw, 44px)/1 var(--head); text-transform: uppercase; letter-spacing: -.02em; padding: .06em 0; }
.r .roll { display: block; position: relative; transition: transform .55s var(--ease); }
.r .roll span { display: block; white-space: nowrap; }
.r .roll span + span { position: absolute; left: 0; top: 100%; margin-top: .12em; }
.r:hover .roll, .r:focus-visible .roll { transform: translateY(calc(-100% - .12em)); }
.r .x { text-align: right; }
.r .thumb { display: none; }
.list-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; }
.empty { padding: 40px 0; }
/* photo of the talent that follows the mouse over the list */
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(160px, 16vw, 280px); aspect-ratio: 3 / 4; pointer-events: none; opacity: 0;
  transition: opacity .3s; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.on { opacity: 1; }
/* grid view of the board */
.list.is-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; border-top: 0; }
.list.is-grid .r { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 0 0 14px; }
.list.is-grid .r .thumb { display: block; grid-column: 1 / -1; order: -1; aspect-ratio: 3 / 4; margin-bottom: 10px; }
.list.is-grid .r .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.list.is-grid .r:hover .thumb img { transform: scale(1.04); }
.list.is-grid .r > .mono:first-child, .list.is-grid .r .c, .list.is-grid .r .h { display: none; }
.list.is-grid .r .n { font-size: clamp(20px, 1.8vw, 28px); }
.view { display: flex; gap: 18px; }
@media (max-width: 1100px) { .list.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .r { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .r .c, .r .h { display: none; }
  .list:not(.is-grid) .r { grid-template-columns: 34px 56px minmax(0, 1fr) auto; }
  .list:not(.is-grid) .r .thumb { display: block; grid-column: 2; grid-row: 1; aspect-ratio: 3 / 4; }
  .list:not(.is-grid) .r .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .peek { display: none; }
}
/* phones: the name may wrap, the city moves under it (no hover here, so no rolling copy) */
@media (max-width: 600px) {
  .list:not(.is-grid) .r { grid-template-columns: 26px 56px minmax(0, 1fr); row-gap: 4px; }
  .list:not(.is-grid) .r .thumb { grid-row: 1 / span 2; }
  .list:not(.is-grid) .r .n { grid-column: 3; align-self: end; font-size: clamp(22px, 7vw, 30px); }
  .list:not(.is-grid) .r .x { grid-column: 3; text-align: left; align-self: start; }
  .r .roll span { white-space: normal; }
  .r .roll span + span { display: none; }
}
@media (hover: none) { .peek { display: none; } }

/* Featured talent on the home page */
.feature { padding: 140px 0; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.feature .ph { aspect-ratio: 4 / 5; }
.feature h2 { font-size: clamp(48px, 7vw, 124px); margin: 18px 0 32px; }
.feature p.lead { max-width: 46ch; margin-bottom: 36px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 40px; }
.stats div { padding: 14px 0; }
.stats dt { opacity: .58; }
.stats dd { font: 500 21px/1.3 var(--body); text-transform: none; letter-spacing: 0; }
@media (max-width: 760px) {
  .feature { padding: 96px 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Services, numbers, clients */
.services { padding: 130px 0 140px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(44px, 7vw, 120px); }
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.svc article { padding-top: 18px; }
.svc h3 { font: 800 clamp(26px, 2.4vw, 36px)/1 var(--head); text-transform: uppercase; letter-spacing: -.02em; margin: 18px 0 16px; }
.svc p { max-width: 40ch; }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 110px; }
.numbers b { display: block; font: 800 clamp(56px, 7vw, 120px)/.9 var(--head); letter-spacing: -.03em; }
.clients { margin-top: 90px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.clients span { font: 800 clamp(22px, 2.4vw, 34px)/1.1 var(--head); text-transform: uppercase; letter-spacing: -.02em; }
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; gap: 32px; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; margin-top: 80px; }
}

/* Call to action band */
.band { padding: 140px 0; text-align: left; }
.band h2 { font-size: clamp(48px, 9vw, 170px); margin-bottom: 40px; }
.band p { max-width: 52ch; margin-bottom: 36px; }

/* Page head (inner pages): the heading rises out of the line */
.phead { padding: 170px 0 0; }
.phead h1 { font-size: clamp(52px, 12vw, 230px); }
.phead .kick { margin-bottom: 26px; }

.phead-foot { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 18px 0 0; }
.phead + .board { padding-top: 56px; }

/* Talent pages */
.talent { padding: 150px 0 120px; }
.talent-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; }
.talent-photo { position: sticky; top: 100px; }
.talent-photo .ph { aspect-ratio: 4 / 5; }
.talent h1 { font-size: clamp(52px, 8vw, 150px); }
.talent .back { display: inline-block; margin-bottom: 26px; text-decoration: none; }
.talent .rule { margin: 0 0 34px; }
.talent .lead { font-size: 21px; line-height: 1.5; max-width: 40ch; margin: 34px 0; }
.worked { margin: 0 0 40px; }
.worked p:last-child { font: 800 22px/1.25 var(--head); text-transform: uppercase; letter-spacing: -.01em; margin-top: 8px; }
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 60px; }
.gal .ph { aspect-ratio: 3 / 4; }
.gal-wide { grid-column: 1 / -1; }
.cover { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.cover > .ph { position: absolute; inset: 0; }
.cover > .ph img { object-position: 50% 22%; } /* portraits: keep the face, which sits in the upper part */
.cover::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.cover-name { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; z-index: 2; color: var(--ink-text); }
.cover-name h1 { font-size: clamp(52px, 11vw, 210px); }
.cover-name .phead-foot { padding-top: 14px; }
.strip-info { padding-top: 90px; padding-bottom: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.strip-info .lead { font-size: 21px; line-height: 1.5; max-width: 42ch; margin-bottom: 34px; }
.reel { display: flex; gap: 20px; overflow-x: auto; padding: 40px var(--gutter) 30px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.reel .ph { flex: none; width: clamp(240px, 28vw, 440px); aspect-ratio: 3 / 4; scroll-snap-align: start; }
.next { display: block; padding-top: 90px; padding-bottom: 110px; text-decoration: none; }
.next.lt::before { background: color-mix(in srgb, currentColor 25%, transparent); }
.next .head { font-size: clamp(48px, 9vw, 170px); margin-top: 16px; }
.next:hover .head { opacity: .8; }
@media (max-width: 900px) {
  .talent-grid, .strip-info { grid-template-columns: 1fr; gap: 32px; }
  .talent-photo { position: static; }
  .talent { padding-top: 110px; }
}
@media (max-width: 760px) { .gal { gap: 12px; } .reel { gap: 12px; } }

/* Text pages: agency */
.statement { padding: 110px 0; }
.statement p { font: 800 clamp(30px, 4.4vw, 72px)/1.02 var(--head); text-transform: uppercase; letter-spacing: -.02em; max-width: 22ch; }
.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 120px; padding-bottom: 120px; }
.offices h3 { font: 800 clamp(36px, 4vw, 64px)/.95 var(--head); text-transform: uppercase; letter-spacing: -.02em; margin: 16px 0 18px; }
.offices article { padding-top: 18px; }
@media (max-width: 900px) { .offices { grid-template-columns: 1fr; gap: 40px; padding-top: 90px; padding-bottom: 90px; } }

/* Forms: become a model, book talent */
.form-sec { padding-top: 80px; padding-bottom: 140px; display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.aside > * + * { margin-top: 26px; }
.aside ul { list-style: none; }
.aside li { padding: 14px 0; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
.field { display: flex; flex-direction: column; gap: 10px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 14px; }
.field.full, .form .full { grid-column: 1 / -1; }
/* the line under a field is drawn (background), so it can draw in from the right like the other lines */
.field input, .field textarea { --line: color-mix(in srgb, currentColor 40%, transparent); width: 100%; border: 0; border-radius: var(--radius);
  background: linear-gradient(var(--line), var(--line)) right bottom / 100% 1px no-repeat transparent;
  padding: 10px 0 12px; font: 400 19px/1.4 var(--body); outline: none; transition: background-size .3s; }
.motion .form .field input, .motion .form .field textarea { background-size: 0 1px; transition: background-size 1.3s var(--ease-io) calc(var(--k, 0) * .08s); }
.motion .form .in input, .motion .form .in textarea { background-size: 100% 1px; }
.field textarea { min-height: 130px; resize: vertical; }
.form .field input:focus, .form .field textarea:focus { --line: currentColor; background-size: 100% 2px; transition-delay: 0s; transition-duration: .3s; }
.field .err { min-height: 18px; font: 400 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #b3402e; }
.dark .field .err { color: #ff8a73; }
.field.bad input, .field.bad textarea { --line: #b3402e; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 14px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; }
.chips label:hover span { border-color: currentColor; }
.chips input:checked + span { background: var(--bone-text); color: var(--bone); border-color: var(--bone-text); }
.dark .chips input:checked + span { background: var(--bone); color: var(--bone-text); border-color: var(--bone); }
.chips input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.check { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.check input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.check i { flex: none; width: 18px; height: 18px; border: 1px solid currentColor; margin-top: 3px; position: relative; }
.check input:checked + i::after { content: ""; position: absolute; inset: 3px; background: currentColor; }
.check input:focus-visible + i { outline: 2px solid currentColor; outline-offset: 2px; }
.form-msg { grid-column: 1 / -1; font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; min-height: 18px; }
@media (max-width: 900px) {
  .form-sec { grid-template-columns: 1fr; gap: 48px; padding-top: 60px; }
  .form { grid-template-columns: 1fr; }
}

/* 404 */
.lost { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 140px var(--gutter) 80px; }
.lost h1 { font-size: clamp(120px, 34vw, 600px); }
.lost p { max-width: 44ch; margin: 28px 0 30px; }

/* Footer */
.footer { background: var(--ink); color: var(--ink-text); padding: 110px 0 28px; border-top: 1px solid color-mix(in srgb, var(--ink-text) 18%, transparent); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 90px; }
.footer-ask { font: 800 clamp(32px, 4.6vw, 76px)/1 var(--head); text-transform: uppercase; letter-spacing: -.02em; max-width: 16ch; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: 15px; }
.footer-cols .label { opacity: .58; margin-bottom: 12px; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.footer-mark { font-size: 10vw; margin: 90px 0 22px; line-height: .8; }
.footer-small { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; opacity: .58; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

/* "Copied" note next to an e-mail link (the click also opens the mail app) */
.copied-tip { position: absolute; z-index: 60; padding: 6px 9px; background: var(--bone); color: var(--bone-text); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.copied-tip.on { opacity: 1; transform: none; }

/* Back to top */
.to-top { position: fixed; right: var(--gutter); bottom: 24px; z-index: 30; width: 46px; height: 46px; display: grid; place-items: center; background: var(--bone); color: var(--bone-text);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s; }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink-text); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.reel-note { padding-bottom: 80px; }
.lost-alt { margin-left: 24px; }