/* The chooser + the engine's motion board on the home page (25 Oct 2026). Copied from creator.css and SCOPED under .avs / .chooser
   so the home page's own front.css design is untouched. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/mona-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/mona-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Roboto");
  size-adjust: 103%; ascent-override: 106%; descent-override: 31%; line-gap-override: 0%; }

.avs, .chooser {
  --ink: #0b0b0b;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);      /* 10:1 on ink */
  --soft: rgba(255, 255, 255, 0.55);       /* headline second lines, 6.2:1 */
  --faint: rgba(255, 255, 255, 0.62);
  --card: #151515;
  --card-2: #1a1a1a;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --paper: #f2efe8;
  --p-ink: #111111;
  --p-muted: #57534c;                      /* 6.3:1 on paper */
  --p-soft: #6b665e;                       /* 4.9:1 on paper, large type only */
  --p-card: #ffffff;
  --p-hair: #e4ddcd;
  --green: #1d9c63;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sans: "Mona Sans", "Mona Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --sec: clamp(84px, 10vw, 140px);
  --r: 28px;
  color-scheme: dark;
}
.avs { font-family: var(--sans); }
.avs .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.avs .sec { position: relative; z-index: 1; padding: var(--sec) 0 calc(var(--sec) * 0.7 + 40px); background: var(--ink); }
.avs .sheet { margin-top: -40px; border-radius: 40px 40px 0 0; }
.avs .paper { background: var(--paper); color: var(--p-ink); }
.avs .h2 { font: 300 clamp(38px, 5.2vw, 76px)/1 var(--sans); letter-spacing: -0.035em; text-wrap: balance; max-width: 17ch; }
.avs .h2 .two { color: var(--soft); }
.avs .paper .h2 .two { color: var(--p-soft); }
.avs .body { margin-top: 20px; font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); max-width: 52ch; }
.avs .paper .body { color: var(--p-muted); }
/* ---- Audience chooser (full-screen, before the page) ---- */
.chooser { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; display: grid; place-items: center; padding: 24px var(--gut); overflow-y: auto;
  opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-out), visibility 0s linear 0s; }
.chooser.is-out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }
.aud-set .chooser { display: none; }
.ch-open { overflow: hidden; }
.ch-in { width: 100%; max-width: 1100px; display: grid; gap: clamp(20px, 3.4vh, 36px); }
.ch-mark { color: #fff; }
.ch-hi { font: 400 clamp(20px, 2.2vw, 28px)/1.2 var(--sans); letter-spacing: -0.02em; color: var(--muted); }
.ch-h { font: 300 clamp(34px, 5.6vw, 76px)/1 var(--sans); letter-spacing: -0.035em; text-wrap: balance; max-width: 14ch; }
.ch-opts { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ch-opts { grid-template-columns: 1fr 1fr; gap: 18px; } }
.ch-opt { position: relative; text-align: left; display: grid; align-content: space-between; gap: 28px; min-height: clamp(168px, 30vh, 340px); padding: clamp(22px, 2.6vw, 34px);
  border: 0; border-radius: 30px; color: #fff; font: inherit; cursor: pointer; background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.ch-opt[data-pick="creator"] { background: radial-gradient(120% 90% at 0% 0%, #2a2118 0%, #111 62%); }
.ch-opt[data-pick="agency"] { background: radial-gradient(120% 90% at 0% 0%, #17212b 0%, #111 62%); }
.ch-opt.is-hint { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.ch-label { font: 300 clamp(34px, 4.4vw, 60px)/1 var(--sans); letter-spacing: -0.035em; }
.ch-line { display: block; max-width: 34ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.4; color: var(--muted); padding-right: 64px; }
.ch-go { position: absolute; right: clamp(18px, 2vw, 28px); bottom: clamp(18px, 2vw, 28px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-size: 20px;
  transition: transform 200ms var(--ease-out); }
.ch-opt:active { transform: scale(0.97); }
.ch-opt:focus-visible, .aud-switch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ch-opt:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
  .ch-opt:hover .ch-go { transform: translateX(4px); }
}
.ch-open .ch-mark, .ch-open .ch-hi, .ch-open .ch-h, .ch-open .ch-opt { animation: ch-in 320ms var(--ease-out) both; }
.ch-open .ch-h { animation-delay: 40ms; } .ch-open .ch-opt:nth-child(1) { animation-delay: 90ms; } .ch-open .ch-opt:nth-child(2) { animation-delay: 140ms; }
@keyframes ch-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ch-open .ch-mark, .ch-open .ch-hi, .ch-open .ch-h, .ch-open .ch-opt { animation-name: ch-fade; }
  @keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }
  .ch-opt:active { transform: none; } .ch-opt:hover .ch-go { transform: none; }
}
.aud-switch { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 6px; padding: 0; border: 0; background: none; color: var(--soft); font: 400 14.5px/1 var(--sans);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.3); cursor: pointer; transition: color 160ms var(--ease-out); }
.aud-switch:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .aud-switch:hover { color: #fff; } }

/* ---- What our engine makes (films, looks, "Your look") ---- */
.mo-eyebrow { display: block; margin-bottom: 18px; font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
.mo .body { color: var(--p-muted); }
.mo-films { list-style: none; margin: clamp(32px, 4vw, 56px) calc(var(--gut) * -1) 0; padding: 4px var(--gut) 16px; scroll-padding-inline: var(--gut); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.mo-films::-webkit-scrollbar, .mo-row::-webkit-scrollbar { display: none; }
.mo-film { flex: 0 0 min(64vw, 270px); scroll-snap-align: start; }
@media (min-width: 1100px) { .mo-films { overflow: visible; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; } .mo-film { flex: none; } }
.mo-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #1a1a18; isolation: isolate; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.mo-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-film h3 { margin-top: 14px; font: 500 17px/1.25 var(--sans); letter-spacing: -0.015em; }
.mo-k { margin-top: 4px; font-size: 13.5px; color: var(--p-soft); }
.mo-for { margin-top: 2px; font-size: 13.5px; color: var(--p-muted); }
.mo-head { margin-top: clamp(64px, 8vw, 110px); }
.mo-h2 { font-size: clamp(34px, 4.4vw, 62px); }
.mo-wall { margin: clamp(24px, 3vw, 40px) calc(50% - 50vw) 0; display: grid; gap: 14px; }
.mo-row { list-style: none; display: flex; gap: 12px; overflow-x: auto; padding: 4px max(var(--gut), calc((100vw - var(--wrap)) / 2)); scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.mo-row:focus-visible { outline: 2px solid var(--p-ink); outline-offset: -2px; border-radius: 12px; }
.mo-look { flex: 0 0 clamp(124px, 15vw, 172px); scroll-snap-align: start; }
.mo-look .mo-frame { border-radius: 16px; }
.mo-look span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.25; color: var(--p-muted); }
.mo-know { margin-top: clamp(64px, 8vw, 110px); padding: clamp(22px, 3.4vw, 48px); border-radius: 32px; background: var(--p-ink); color: #fff; display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .mo-know { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.mo-know .body { color: var(--muted); }
.mo-know .mo-eyebrow { color: var(--faint); }
.mo-tag { display: inline-block; margin-bottom: 16px; padding: 7px 13px; border-radius: 999px; font: 500 13px/1 var(--sans); background: #fff; color: var(--p-ink); }
.mo-h3 { font: 300 clamp(32px, 4vw, 54px)/1.02 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.mo-h3 .two { color: var(--soft); }
.mo-three { list-style: none; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.mo-three li { padding: 10px 15px; border-radius: 999px; font-size: 14.5px; line-height: 1.2; box-shadow: inset 0 0 0 1px var(--hair-2); }
.mo-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 38%); gap: 14px; align-items: start; }
.mo-meter { list-style: none; display: grid; gap: 6px; }
.mo-meter li { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.mo-meter b { font-weight: 500; font-size: 14px; } .mo-meter span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.mo-ref-out { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.mo-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 12px; line-height: 1.25; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }

[tabindex="-1"]:focus { outline: none; }
.mo { overflow-x: clip; }

/* the home page sets its own type on p/li/h*; the board keeps Mona Sans */
.avs p, .avs h2, .avs h3, .avs li, .avs span, .avs figcaption, .avs a { font-family: var(--sans); }
.avs .ag-mail { color: #fff; }