/* Artisan Genesis - styles
   Ported verbatim from the Claude Design source. Design tokens are in :root below;
   the body[data-voice|data-gold|data-atmos] blocks are optional theme variants (see README). */

  :root {
    --bg: #0a0a0a;
    --bg-2: #111110;
    --bg-3: #16150f;
    --ink: #f4f1ea;
    --ink-mute: #c9c4b8;      /* lifted for contrast */
    --ink-faint: #a8a294;     /* lifted again: the small mono labels read better */
    --gold: #c8a04a;
    --gold-soft: #d9b768;
    --line: rgba(244, 241, 234, 0.08);
    --line-strong: rgba(244, 241, 234, 0.18);
    --focus: #e2c072;
    --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --sans: "Inter", -apple-system, system-ui, sans-serif;
    --maxw: 1440px;
    --pad: 88px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }

  /* film grain */
  .grain {
    position: fixed; inset: -50%; width: 200%; height: 200%;
    pointer-events: none; z-index: 100; opacity: 0.18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: grainShift 1.4s steps(6) infinite;
  }
  @keyframes grainShift {
    0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}
  }
  .ambient {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background:
      radial-gradient(ellipse 80% 60% at 80% 0%, rgba(200,160,74,0.06), transparent 60%),
      radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0,0,0,0.6), transparent 70%);
  }

  .shell { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

  /* nav */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(to bottom, rgba(10,10,10,0.96), rgba(10,10,10,0.72) 70%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .nav-inner {
    max-width: var(--maxw); margin: 0 auto; padding: 26px var(--pad);
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); background: none; border: 0; cursor: pointer; }
  .logo-mark { width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 18px rgba(200,160,74,0.5); }
  .nav-links { display: flex; gap: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); }
  .nav-links a { color: inherit; text-decoration: none; transition: color .25s ease; position: relative; padding: 4px 0; }
  .nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--gold); transition:right .3s ease; }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a:hover::after { right: 0; }
  .nav-toggle { display: none; }

  section { position: relative; padding: 140px 0; scroll-margin-top: 90px; }
  .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 14px; }
  .label .dash { width: 28px; height: 1px; background: var(--gold); display: inline-block; }
  .gold { color: var(--gold); }
  .italic-gold { font-style: italic; color: var(--gold); font-weight: 500; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; color: var(--ink); letter-spacing: -0.005em; }

  /* HERO */
  .hero { padding-top: 76px; padding-bottom: 120px; }
  .hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent 80%);
    opacity: 0.6;
  }
  .hero-inner { position: relative; }
  .hero-meta { margin-bottom: 60px; color: var(--ink-mute); }
  .hero-meta .dash { background: var(--gold); }
  .hero-lockup { width: fit-content; max-width: 100%; }
  .hero-meta { display: flex; }
  .hero-meta .dash { flex: 1 1 28px; min-width: 12px; }   /* equal lines either side, together as wide as the headline */
  .hero-meta .meta-text { flex: none; white-space: nowrap; margin-right: -0.28em; }   /* letter-spacing also trails the last letter: cancel it so the words sit truly centred */
  .hero-meta .dash:first-child { background: linear-gradient(to left, var(--gold), rgba(200,160,74,0)); }   /* both lines fade out toward the edges */
  .hero-meta .dash:last-child { background: linear-gradient(to right, var(--gold), rgba(200,160,74,0)); }
  @media (min-width: 1025px) { .hero-meta { font-size: 12px; } }
  .hero h1 { font-size: clamp(50px, 7vw, 112px); line-height: 0.98; letter-spacing: -0.015em; font-weight: 500; max-width: 15ch; text-wrap: balance; }
  .hero h1 .l3 { display: inline; font-style: italic; color: var(--gold); font-weight: 500; }
  /* headline lockup: one sentence per line, the gold line scaled so both lines end at the same edge */
  .hero h1 { max-width: none; }
  .hero h1 .l1 { display: block; white-space: nowrap; }
  .hero h1 .l3 { display: block; white-space: nowrap; font-size: 1.70em; line-height: 0.9; padding-bottom: 0.12em;   /* room for the g/y tails */
    animation: agRise .9s cubic-bezier(.2,.7,.2,1) .35s both; }   /* the gold line lands a beat after the first */
  @keyframes agRise { from { opacity: 0; transform: translateY(0.14em); } to { opacity: 1; transform: none; } }
  .hero-sub { margin-top: 38px; max-width: 560px; color: var(--ink-mute); font-size: 16px; line-height: 1.75; }
  .hero-sub .em { color: var(--ink); font-weight: 400; }
  .hero-cta {
    margin-top: 44px; display: inline-flex; align-items: center; gap: 14px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink); padding: 6px 0; transition: color .25s ease, gap .25s ease;
  }
  .hero-cta .arw { color: var(--gold); transition: transform .35s ease; }
  .hero-cta:hover { color: var(--gold); gap: 20px; }
  .hero-cta:hover .arw { transform: translateY(4px); }

  /* video player / showreel poster */
  .player {
    margin-top: 84px; aspect-ratio: 16 / 7.6;
    background: radial-gradient(ellipse 60% 70% at 50% 60%, #1a1612, #0d0c0a 70%), #0a0a0a;
    border: 1px solid var(--line); position: relative; overflow: hidden;
    width: 100%; display: block; padding: 0; cursor: pointer; text-align: left;
    transition: border-color .35s ease;
  }
  .player:hover { border-color: rgba(200,160,74,0.4); }
  .player .framec { position: absolute; width: 28px; height: 28px; border: 1px solid var(--gold); z-index:2; }
  .player .tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
  .player .tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
  .player .bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
  .player .br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
  .play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 88px; height: 88px; border-radius: 50%; border: 1.5px solid var(--gold);
    background: rgba(10,10,10,0.4); display: grid; place-items: center; pointer-events: none;
    transition: transform .3s ease, background .3s ease;
  }
  .player:hover .play-btn { transform: translate(-50%,-50%) scale(1.06); background: rgba(200,160,74,0.1); }
  .play-btn svg { fill: var(--gold); margin-left: 5px; }
  /* showreel poster: a very light frost + darkening that clears on hover, so the play button leads */
  .player::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(10,10,10,0.24);
    -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px); transition: opacity .6s ease; }
  .player .play-btn, .player .player-meta { z-index: 2; }
  @media (hover: hover) { .player:hover::before, .player:focus-visible::before { opacity: 0; } }
  .player-meta { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; padding-left: 0.32em; }   /* balances the letter-spacing after the last letter, so the text sits truly centred */

  .divider { height: 1px; background: var(--line); }

  /* WORK */
  .work-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 40px; }
  .work-head h2 { font-size: clamp(44px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.01em; }
  .work-intro { max-width: 460px; color: var(--ink-mute); font-size: 15px; margin: 0 0 72px; line-height: 1.7; }
  .work-grid { display: grid; grid-template-columns: 1.65fr 1fr; grid-template-rows: auto auto; gap: 28px; }
  .card {
    position: relative; background: var(--bg-2); border: 1px solid var(--line);
    overflow: hidden; transition: border-color .35s ease; cursor: pointer;
    text-align: left; padding: 0; color: inherit; font: inherit; display: block; width: 100%;
  }
  .card:hover, .card:focus-visible { border-color: rgba(200,160,74,0.55); }
  .thumb { position: relative; width: 100%; overflow: hidden; }
  .thumb-img { position:absolute; inset:0; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .card:hover .thumb-img, .card:focus-visible .thumb-img { transform: scale(1.05); }
  .thumb::after { content:""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 38%, rgba(10,10,10,0.88)); z-index:1; }
  .card-body { position: absolute; left: 32px; right: 32px; bottom: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; z-index: 2; }
  .card-body > .cb-main { min-width: 0; }
  .card-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
  .card-title { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.12; color: var(--ink); margin: 0 0 6px; }
  .card-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); }
  .card-open { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; display:inline-flex; align-items:center; gap:8px; opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
  .card:hover .card-open, .card:focus-visible .card-open { opacity: 1; transform: translateY(0); }

  /* hover preview (js/app.js): muted video over the poster, fades in once playing, never takes clicks */
  .card-preview { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .35s ease; container-type: size; }
  .card-preview.is-playing { opacity: 1; }
  .card-preview iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 0;
    width: max(100cqw, 100cqh * 16 / 9); height: max(100cqh, 100cqw * 9 / 16); }   /* cover the frame like the poster */
  .card-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* vertical (9:16) previews keep their real shape, centred, dark either side: no crop, no stretch.
     Posters are sized separately (and may still cover the card). */
  .card-preview.is-vertical { background: #050505; }
  .card-preview.is-vertical iframe { width: min(100cqw, 100cqh * 9 / 16); height: min(100cqh, 100cqw * 16 / 9); }
  .card-preview.is-vertical video { object-fit: contain; }
  /* letterbox (horizontal footage inside a 9:16 video): scale the player so the footage band covers the card */
  /* REEL HOVER ZOOM (desktop hover video only; the cover photo always fills the card): 1 = fills the card; lower = zoomed out, with dark strips */
  .c-reel { --lb-zoom: 0.62; }
  .card-preview.is-letterboxed { background: #050505; }
  .card-preview.is-letterboxed iframe { width: calc(max(100cqw, 100cqh * 16 / 9) * var(--lb-zoom)); height: calc(max(100cqw * 16 / 9, 100cqh * 256 / 81) * var(--lb-zoom)); }
  /* posterFit: 'cover' on the reel card: poster and preview fill the whole card instead of the 9:16 frame */
  .c-reel.poster-fill .reel-frame { display: none; }
  .c-reel.poster-fill .thumb-fill { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .c-reel.poster-fill:hover .thumb-fill, .c-reel.poster-fill:focus-visible .thumb-fill { transform: scale(1.05); }

  .c-large { grid-column: 1; grid-row: 1; }
  .c-large .thumb { aspect-ratio: 16 / 9.5; }
  .c-large .thumb-img { background: radial-gradient(ellipse 70% 80% at 70% 40%, rgba(200,140,60,0.55), transparent 60%), radial-gradient(ellipse 50% 60% at 30% 70%, rgba(120,70,30,0.6), transparent 70%), linear-gradient(135deg, #2b1d10, #0a0807); }
  .c-small { grid-column: 2; grid-row: 1; }
  .c-small .thumb { aspect-ratio: 4 / 3; }
  .c-small .thumb-img { background: radial-gradient(ellipse 80% 80% at 80% 30%, rgba(60,90,140,0.5), transparent 65%), linear-gradient(160deg, #0f1726, #050709); }
  .c-small .card-title { font-size: 25px; }
  .c-med { grid-column: 1; grid-row: 2; max-width: 56%; }
  .c-med .thumb { aspect-ratio: 4 / 3.1; }
  .c-med .thumb-img { background: radial-gradient(ellipse 70% 70% at 30% 30%, rgba(180,60,50,0.55), transparent 65%), linear-gradient(150deg, #2a0d0d, #0a0606); }
  .c-med .card-title { font-size: 25px; }
  /* lower-left: medium landscape card + one Reel project card — equal blocks, same system */
  .lower-left { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .lower-left .c-med { grid-column: auto; grid-row: auto; max-width: none; }
  .c-reel .thumb { aspect-ratio: 4 / 3.1; }
  .c-reel .thumb-fill { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 22%, rgba(150,110,60,0.26), transparent 62%), linear-gradient(160deg, #201811, #0a0807); }
  .c-reel .reel-frame { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; overflow: hidden; box-shadow: 0 0 0 1px rgba(244,241,234,0.10), 0 18px 48px rgba(0,0,0,0.5); }
  .c-reel .reel-frame .thumb-img { position: absolute; inset: 0; background: radial-gradient(ellipse 92% 52% at 50% 30%, rgba(212,162,92,0.6), transparent 60%), linear-gradient(165deg, #3a2a16, #0c0a07); }
  .c-reel .card-title { font-size: 25px; }
  .c-wide { grid-column: 2 / 3; grid-row: 2; align-self: stretch; }
  .c-wide .thumb { height: 100%; min-height: 320px; }
  /* desktop: the two lower-left cards stretch to the Short-Form Ad Set card's height (it sets the row);
     tablet/mobile keep their own shapes, since the grid stacks below 1025px */
  @media (min-width: 1025px) {
    .lower-left { align-items: stretch; }
    .lower-left .card .thumb { aspect-ratio: auto; height: 100%; }
  }
  .c-wide .thumb-img { background: radial-gradient(ellipse 70% 70% at 60% 40%, rgba(180,160,140,0.35), transparent 65%), linear-gradient(140deg, #1a1815, #060605); }

  /* ABOUT */
  .about-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 120px; }
  .about-label-col { position: relative; }
  @media (min-width: 1025px) { .about-label-col { padding-top: 6px; } }   /* label sits on the same baseline as the paragraph's first line */
  .about-deco { position: sticky; top: 140px; width: 1px; height: 220px; background: linear-gradient(to bottom, var(--gold), transparent); margin-left: 4px; margin-top: 60px; }
  .about-copy { font-family: var(--sans); font-size: 19px; line-height: 1.7; color: var(--ink); font-weight: 400; max-width: 640px; }   /* body text in the sans for readability; headings stay serif */
  .about-copy p { margin: 0 0 1em; text-wrap: pretty; }
  .about-copy .hl { background: rgba(200,160,74,0.35); color: var(--ink); font-size: 1.1em; padding: 0 0.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* "I did my job.": the same gold as selected text */
  .about-copy .sig { font-family: var(--serif); font-size: 18px; color: var(--ink-mute); font-style: italic; margin-top: 1.4em; }
  /* stats strip — flat, editorial, not cards */
  .stats { margin-top: 72px; padding-top: 52px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 640px; align-items: start; }
  /* first stat on the line's left end, last on its right end, middle centred; each label centred under its number */
  .stats > div { text-align: center; }
  .stats > :nth-child(1) { justify-self: start; }
  .stats > :nth-child(2) { justify-self: center; }
  .stats > :nth-child(3) { justify-self: end; }
  .stats .stat-label { padding-left: 0.24em; }   /* balance the letter-spacing after the last letter */
  .stat-num { font-family: var(--serif); font-size: 60px; font-weight: 500; color: var(--gold); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
  .stat-label { margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.7; }

  /* CONTACT */
  .contact { min-height: 100vh; display: flex; flex-direction: column; }
  .contact-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
  .contact h2 { font-size: clamp(56px, 8vw, 140px); line-height: 0.98; font-weight: 500; max-width: 14ch; margin-top: 48px; text-wrap: balance; }
  .contact h2 .ital { font-style: italic; color: var(--gold); }
  /* contact lockup, mirroring the hero: first line as wide as "Need a project done?", gold line scaled to match */
  .contact h2 { font-size: clamp(43px, 6vw, 96px); max-width: none; }
  .contact h2 .l1 { display: block; white-space: nowrap; }
  .contact h2 .ital { display: block; white-space: nowrap; font-size: 1.26em; line-height: 0.9; padding-bottom: 0.12em; }
  .contact-sub { margin-top: 34px; max-width: 520px; color: var(--ink-mute); font-size: 17px; line-height: 1.7; }
  .contact-actions { margin-top: 52px; max-width: 680px; }
  .contact-primary { display: inline-flex; align-items: baseline; gap: 13px; text-decoration: none; flex-wrap: wrap; }
  .contact-primary .ig-glyph { width: 23px; height: 23px; flex: none; color: var(--gold); align-self: center; }
  .ig-text { font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; transition: color .3s ease; }
  .ig-arw { font-family: var(--serif); font-size: 17px; color: var(--gold); transition: transform .3s ease; }
  .contact-primary:hover .ig-text { color: var(--gold); }
  .contact-primary:hover .ig-arw { transform: translate(3px,-3px); }
  .ig-handle { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-faint); margin-left: 4px; }
  .contact-row { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 18px 40px; flex-wrap: wrap; }
  .contact-email { display: inline-block; font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 4px; transition: color .3s ease; }
  .contact-email:hover { color: var(--gold); }
  .assist-invite {
    display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
    transition: color .25s ease;
  }
  .assist-invite:hover { color: var(--gold); }
  .assist-invite .mini-orb { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 34% 30%, #f4e2b0, var(--gold) 42%, #6e5220 100%); box-shadow: 0 0 14px rgba(200,160,74,0.5); }

  footer { border-top: 1px solid var(--line); margin-top: 120px; padding: 40px 0 56px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); }
  .foot-links { display: flex; gap: 44px; }
  .foot-links a { color: inherit; text-decoration: none; transition: color .25s; }
  .foot-links a:hover { color: var(--gold); }

  /* ============ MODAL SHELL ============ */
  .modal-root { position: fixed; inset: 0; z-index: 200; display: none; }
  .modal-root.open { display: block; }
  .modal-scrim { position: absolute; inset: 0; background: rgba(6,6,6,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
  .modal-root.open .modal-scrim { opacity: 1; }
  body:has(.modal-root.open) .grain { animation-play-state: paused; }   /* the scrim's blur re-rendered the moving grain under a playing video (flicker on phones) */
  /* rounded square; on hover the whole box turns, the border goes gold and an inset gold outline
     appears. The button itself stays still (stable hover/click area); ::before draws the box. */
  .modal-close {
    position: absolute; top: 26px; right: 26px; z-index: 3; width: 46px; height: 46px; border-radius: 13px;
    border: 0; background: none; color: var(--ink); cursor: pointer; padding: 0;
    display: grid; place-items: center; transition: color .3s ease, top .45s cubic-bezier(.2,.7,.2,1);
  }
  .modal-close::before, .modal-close::after, .modal-close svg { transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, border-color .3s ease; }
  .modal-close::before {
    content: ""; position: absolute; inset: 0; border-radius: 13px;
    border: 1px solid rgba(244,241,234,0.85); background: rgba(10,10,10,0.20);
  }
  .modal-close::after {
    content: ""; position: absolute; inset: 3px; border-radius: 10px; border: 1px solid var(--gold);
    opacity: 0; transform: scale(1.06); pointer-events: none;
  }
  .modal-close svg { position: relative; width: 18px; height: 18px; }
  .modal-close:hover { color: var(--gold); }
  .modal-close:hover::before { border-color: var(--gold); transform: rotate(90deg); }
  .modal-close:hover::after { opacity: 1; transform: rotate(90deg); }
  .modal-close:hover svg { transform: rotate(90deg); }
  .modal-close:focus-visible { border-radius: 13px; }   /* the global focus rule would square it off */
  /* once a video is loaded, slide down below YouTube's top bar (in line with its settings icon) and stay */
  .proj-shell:has(.proj-video iframe) .modal-close,
  .vid-shell:has(.vid-frame iframe) .modal-close { top: 64px; }

  /* showreel + project video modal */
  .vid-modal { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; }
  .vid-shell { position: relative; width: min(1120px, 100%); transform: translateY(12px) scale(.985); opacity: 0; transition: opacity .35s ease, transform .35s ease; }
  .modal-root.open .vid-shell { transform: none; opacity: 1; }
  .vid-frame { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(ellipse 60% 70% at 50% 55%, #1a1612, #0c0b09 72%); border: 1px solid var(--line-strong); overflow: hidden; }
  .vid-frame video, .vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
  /* video placeholder — play glyph at TRUE centre of the video area; note anchored lower, out of the way */
  .vid-placeholder { position: absolute; inset: 0; }
  .vid-placeholder .vp-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; background: rgba(10,10,10,0.32); transition: transform .3s ease, background .3s ease; }
  .vid-placeholder .vp-glyph svg { fill: var(--gold); margin-left: 4px; }
  .vp-note { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: calc(100% - 48px); text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); max-width: 380px; line-height: 1.9; }
  .vid-caption { margin-top: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .vid-caption h3 { font-size: 30px; }
  .vid-caption .vc-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }

  /* project detail modal */
  .proj-modal { position: absolute; inset: 0; overflow-y: auto; padding: 40px; display: flex; }
  .proj-shell { position: relative; margin: auto; width: min(1080px, 100%); background: var(--bg-2); border: 1px solid var(--line-strong); transform: translateY(16px); opacity: 0; transition: opacity .35s ease, transform .35s ease; }
  .modal-root.open .proj-shell { transform: none; opacity: 1; }
  .proj-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
  .proj-video .thumb-img { position: absolute; inset: 0; }
  .proj-video .vid-placeholder { z-index: 2; }
  /* click-to-play: the placeholder is a button so it looks identical until a video exists */
  button.vid-placeholder { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  button.vid-placeholder:disabled { cursor: default; }
  button.vid-placeholder:not(:disabled):hover .vp-glyph { transform: translate(-50%,-50%) scale(1.06); background: rgba(200,160,74,0.1); }
  .proj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 2; }   /* below .modal-close (z 3) */
  /* ad sets: arrows step through the videos inside one project (bottom Prev/Next still switches projects) */
  .set-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0;
    display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(244,241,234,0.4);
    background: rgba(10,10,10,0.35); color: var(--ink); cursor: pointer;
    transition: border-color .3s ease, color .3s ease, background .3s ease, opacity .3s ease; }
  .set-nav svg { width: 16px; height: 16px; }
  .set-prev { left: 18px; }
  .set-next { right: 18px; }
  @media (hover: hover) { .set-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: rgba(10,10,10,0.6); } }   /* touch would keep it gold after a tap */
  .set-nav:disabled { opacity: .25; cursor: default; }
  .set-nav:focus-visible { border-radius: 12px; }   /* the global focus rule would square it off */
  .set-count { position: absolute; top: 22px; left: 22px; z-index: 3; pointer-events: none;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute);
    background: rgba(10,10,10,0.55); border: 1px solid var(--line); border-radius: 40px; padding: 6px 12px; }
  .set-nav[hidden], .set-count[hidden] { display: none; }
  /* sets: each video can carry its own details; empty ones hide, and the text fades briefly on switch */
  .proj-specs[hidden], .proj-cols[hidden] { display: none; }
  /* volume for the full video (js/app.js): small, top-right of the details, clear of the player's own controls */
  .proj-body { position: relative; }
  .vol { position: absolute; top: 38px; right: 52px; display: flex; align-items: center; gap: 10px; color: var(--ink-faint); transition: color .25s ease; }
  .vol[hidden] { display: none; }
  .vol:hover, .vol:focus-within { color: var(--gold); }
  .vol-icon { width: 14px; height: 14px; flex: none; }
  .vol input { -webkit-appearance: none; appearance: none; width: 96px; height: 20px; margin: 0; background: transparent; cursor: pointer; }
  .vol input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--gold) var(--vol, 35%), var(--line-strong) var(--vol, 35%)); }
  .vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--gold); }
  .vol input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
  .vol input::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--gold); }
  .vol input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--gold); }
  .proj-eyebrow, .proj-body h3, .proj-specs, .proj-cols { transition: opacity .16s ease; }
  .proj-body.is-swapping .proj-eyebrow, .proj-body.is-swapping h3,
  .proj-body.is-swapping .proj-specs, .proj-body.is-swapping .proj-cols { opacity: 0; }
  .proj-body { padding: 44px 52px 52px; }
  .proj-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
  .proj-body h3 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; margin: 16px 0 28px; max-width: 18ch; }
  .proj-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .spec-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
  .spec-v { font-size: 18px; color: var(--ink); font-family: var(--serif); }
  .proj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 34px; }
  .proj-cols h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; font-weight: 500; }
  .proj-cols p { margin: 0; color: var(--ink-mute); font-size: 15.5px; line-height: 1.75; }
  .proj-paras p + p { margin-top: 1em; }
  /* small print under the story (e.g. why a video is hosted on BMR's channel): quiet, never competing */
  .proj-pnote { margin: 30px 0 0; max-width: 680px; font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); font-style: italic; }
  .proj-pnote .pn-k { font-style: normal; color: var(--ink-mute); }
  .proj-pnote[hidden], .proj-proof[hidden] { display: none; }
  /* viewer feedback: BMR's screenshots at their own proportions; a tap/click opens the full size */
  .proj-proof { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
  .proj-proof h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; font-weight: 500; }
  .proof-shot[hidden], .proof-quotes[hidden] { display: none; }
  /* the screenshot: its own size (never blown up), a click/tap opens it full size */
  .proof-img { display: block; max-width: 100%; border: 1px solid var(--line-strong); background: #050505; transition: border-color .3s ease; vertical-align: top; }
  .proof-img:hover, .proof-img:focus-visible { border-color: rgba(200,160,74,0.55); }
  .proof-img img { display: block; width: auto; max-width: 100%; height: auto; }
  .proof-cap { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
  /* comments: a centred headline quote, then two rows of real comment screenshots gliding past in opposite
     directions, faded at the edges; drag (mouse) or swipe to browse, which pauses them (js/app.js glide) */
  .proof-quotes { margin: 56px -52px 0; }   /* rows run to the window's edges */
  .proof-head { text-align: center; padding: 0 52px; }
  .proof-kicker { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
  .proof-headline { margin: 14px auto 0; max-width: 17ch; font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); line-height: 1.06; font-weight: 500; color: var(--ink); text-wrap: balance; }
  .proof-sub { margin: 14px 0 0; font-size: 15px; color: var(--ink-mute); }
  .proof-rows { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
  .proof-row { overflow-x: auto; scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none; }
  .proof-row::-webkit-scrollbar { display: none; }
  .proof-row.is-dragging { cursor: grabbing; }
  .proof-track { display: flex; align-items: stretch; width: max-content; }   /* moved by js/app.js (glide) */
  .proof-card { flex: 0 0 auto; width: 392px; margin: 0 18px 0 0; box-sizing: border-box; padding: 14px; border-radius: 16px; background: #0f0f0f; border: 1px solid #262626; }
  .proof-card img { display: block; width: calc(var(--nw, 364) / 364 * 100%); height: auto; }   /* one scale for every card */
  .proof-card.is-key { border-color: rgba(200,160,74,0.5); }   /* same background as the screenshot, so no inner rectangle shows */
  /* still layout (proof.still): a few cards side by side, each image at its own size */
  .proof-still { margin-top: 40px; padding: 0 52px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px; }
  .proof-still .proof-card { width: auto; max-width: 100%; margin: 0; background: var(--card-bg, #1a1d21); }
  .proof-still .proof-card img { width: auto; max-width: 100%; }
  .proof-tag { margin: 2px 0 2px 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
  .proj-note { margin-top: 30px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); border: 1px dashed var(--line-strong); padding: 14px 18px; }
  .proj-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
  .proj-navbtn { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 12px; transition: color .25s ease; padding: 6px; }
  .proj-navbtn:hover:not(:disabled) { color: var(--gold); }
  .proj-navbtn:disabled { opacity: 0.3; cursor: default; }
  .proj-navbtn .pn-label { font-family: var(--serif); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ink); }

  /* ============ STUDIO ASSISTANT ORB ============ */
  .orb-dock {
    position: fixed; bottom: 30px; right: 30px; z-index: 150;
    display: flex; align-items: center; gap: 14px;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .6s ease, transform .6s ease;
  }
  .orb-dock.show { opacity: 1; transform: none; pointer-events: auto; }
  .orb-hint {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-mute); background: rgba(12,12,12,0.7); border: 1px solid var(--line);
    padding: 8px 14px; border-radius: 40px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: opacity .4s ease, transform .4s ease; white-space: nowrap;
  }
  .orb-btn {
    position: relative; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
    background: radial-gradient(circle at 34% 30%, #f6e6b6 0%, #d9b768 34%, var(--gold) 54%, #6e5220 100%);
    box-shadow: 0 6px 26px rgba(0,0,0,0.5), 0 0 22px rgba(200,160,74,0.35);
    overflow: visible; transition: transform .35s ease, box-shadow .35s ease;
  }
  .orb-inner { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
  /* soft warm-gold outer glow that breathes independently of the orb body */
  .orb-glow { position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(circle, rgba(200,160,74,0.42), rgba(200,160,74,0) 68%);
    animation: orbGlow 5.5s ease-in-out infinite; }
  @keyframes orbGlow { 0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:.9; transform:scale(1.14)} }
  /* internal liquid / cloudy movement */
  .orb-btn .orb-liquid { position: absolute; inset: -18%; border-radius: 50%; mix-blend-mode: screen;
    background: radial-gradient(circle at 38% 38%, rgba(255,244,208,0.75), transparent 44%), radial-gradient(circle at 66% 62%, rgba(214,150,58,0.7), transparent 42%);
    filter: blur(3px); animation: orbLiquid 9s ease-in-out infinite; }
  @keyframes orbLiquid { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(7%,-6%) rotate(42deg)} 66%{transform:translate(-6%,5%) rotate(-32deg)} }
  .orb-btn::before {
    content:""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 60% 68%, rgba(255,255,255,0.35), transparent 45%), radial-gradient(circle at 30% 40%, rgba(255,240,200,0.5), transparent 40%);
    animation: orbSwirl 7s ease-in-out infinite;
  }
  .orb-btn::after {
    content:""; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid rgba(200,160,74,0.5);
    animation: orbBreathe 4s ease-in-out infinite;
  }
  @keyframes orbSwirl { 0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,6%) scale(1.12)} }
  @keyframes orbBreathe { 0%,100%{opacity:.5; transform:scale(1)}50%{opacity:.9; transform:scale(1.05)} }
  .orb-btn:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(0,0,0,0.55), 0 0 34px rgba(200,160,74,0.6); }
  .orb-btn:hover::before { animation-duration: 3.5s; }
  .orb-btn:hover .orb-liquid { animation-duration: 5s; }
  /* brief reaction when the assistant panel opens */
  .orb-btn.reacting { animation: orbReact .7s ease; }
  @keyframes orbReact { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} }
  /* FUTURE SAM STATES — prepared visuals only, not wired to any live capability */
  .orb-btn.is-listening .orb-glow { animation-duration: 2.4s; background: radial-gradient(circle, rgba(120,200,160,0.4), transparent 68%); }
  .orb-btn.is-thinking .orb-liquid { animation-duration: 3.2s; }
  .orb-btn.is-thinking::after { animation-duration: 1.8s; }
  .orb-btn.is-speaking .orb-glow { animation-duration: 1.6s; }

  /* ============ ASSISTANT PANEL ============ */
  .panel-root { position: fixed; inset: 0; z-index: 210; display: none; }
  .panel-root.open { display: block; }
  .panel-scrim { position: absolute; inset: 0; background: rgba(6,6,6,0.55); opacity: 0; transition: opacity .3s ease; }
  .panel-root.open .panel-scrim { opacity: 1; }
  .panel {
    position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
    background: linear-gradient(180deg, #100f0d, #0a0a09); border-left: 1px solid var(--line-strong);
    display: flex; flex-direction: column; transform: translateX(24px); opacity: 0;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; box-shadow: -30px 0 60px rgba(0,0,0,0.5);
  }
  .panel-root.open .panel { transform: none; opacity: 1; }
  .panel-head { padding: 26px 26px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 16px; }
  .panel-head .p-orb { width: 40px; height: 40px; border-radius: 50%; flex: none; background: radial-gradient(circle at 34% 30%, #f6e6b6, var(--gold) 46%, #6e5220 100%); box-shadow: 0 0 18px rgba(200,160,74,0.4); position: relative; overflow: hidden; }
  .panel-head .p-orb::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 62% 66%, rgba(255,255,255,0.4), transparent 44%); animation: orbSwirl 7s ease-in-out infinite; }
  .panel-head .p-name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
  .panel-head .p-role { font-family: var(--serif); font-size: 21px; color: var(--ink); margin-top: 4px; line-height: 1.2; }
  .panel-close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink-mute); cursor: pointer; display: grid; place-items: center; flex: none; transition: color .25s, border-color .25s; }
  .panel-close:hover { color: var(--gold); border-color: var(--gold); }
  .panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
  .msg { max-width: 90%; font-size: 14px; line-height: 1.6; }
  .msg.bot { align-self: flex-start; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line); border-radius: 3px 14px 14px 14px; padding: 14px 16px; }
  .msg.bot .sample-tag { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 12px; }
  .msg.user { align-self: flex-end; color: var(--bg); background: var(--gold); border-radius: 14px 3px 14px 14px; padding: 12px 16px; font-weight: 400; }
  .panel-intro { color: var(--ink-mute); font-size: 13px; line-height: 1.65; }
  .panel-intro strong { color: var(--ink); font-weight: 500; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); background: none; border: 1px solid var(--line-strong); border-radius: 40px; padding: 8px 13px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
  .chip:hover { color: var(--gold); border-color: var(--gold); background: rgba(200,160,74,0.06); }
  /* SAM: chat and coming-soon note (sam.mode in js/content.js); the links reuse the chip style */
  .sam-chat, .sam-soon { display: flex; flex-direction: column; gap: 16px; }
  .sam-chat[hidden], .sam-soon[hidden] { display: none; }
  .sam-soon-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  a.chip { display: inline-block; text-decoration: none; }
  .panel-root.sam-preview .input-row { display: none; }
  .panel-foot { padding: 16px 18px 20px; border-top: 1px solid var(--line); }
  .panel-note { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--ink-faint); line-height: 1.7; margin-bottom: 12px; text-transform: uppercase; }
  .input-row { display: flex; align-items: center; gap: 10px; background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 40px; padding: 6px 6px 6px 18px; transition: border-color .25s; }
  .input-row:focus-within { border-color: var(--gold); }
  .input-row input { flex: 1; background: none; border: 0; color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 8px 0; }
  .input-row input::placeholder { color: var(--ink-faint); }
  .input-row input:focus { outline: none; }
  .mic-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink-faint); cursor: not-allowed; display: grid; place-items: center; flex: none; position: relative; }
  /* Tooltip sits on .mic-slot, not .mic-btn: the button is natively disabled and so may
     never receive :hover. The wrapper stays interactive purely to show this label. */
  .mic-slot { position: relative; display: inline-flex; flex: none; cursor: not-allowed; }
  .mic-slot[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: 120%; right: 0; white-space: nowrap; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); background: #0c0c0b; border: 1px solid var(--line); padding: 6px 9px; border-radius: 4px; pointer-events: none; }
  .send-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--gold); color: #0a0a0a; cursor: pointer; display: grid; place-items: center; flex: none; transition: transform .2s, background .2s; }
  .send-btn:hover { transform: scale(1.06); background: var(--gold-soft); }

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

  /* text selection: headlines, labels, cards, buttons and nav can't be dragged/highlighted (they're
     design, not text to copy). Paragraphs, the email address and the Instagram handle stay selectable,
     so clients can copy how to reach BMR. Any highlight is gold, not the browser's blue. */
  ::selection { background: rgba(200,160,74,0.35); color: var(--ink); }
  h1, h2, h3, .label, .nav, .hero-cta, .player, .work-grid, .stats, .about-copy .sig, .proj-eyebrow, .proj-specs, .proj-cols h4,
  .proj-nav, .set-count, .vol, .contact-primary, .assist-invite, footer, .orb-dock, .panel-head, .chip, .vc-meta {
    -webkit-user-select: none; user-select: none; }
  .ig-handle, .contact-email { -webkit-user-select: text; user-select: text; }

  /* ============ ENTRANCE ============ */
  /* page load: the hero rises in, top to bottom ("I'm your guy." keeps its own beat) */
  @keyframes agUp { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  .hero-meta, .hero h1 .l1, .hero-sub, .hero-cta, .player { animation: agUp .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 .l1 { animation-delay: .1s; }
  .hero-sub { animation-delay: .5s; }
  .hero-cta { animation-delay: .6s; }
  .player { animation-delay: .7s; }
  /* scroll: the rest rises in as it comes into view (js/app.js adds .reveal / .in; without JS everything just shows) */
  .js-reveal .reveal:not(.in) { opacity: 0; }
  .js-reveal .reveal.in { animation: agUp .8s cubic-bezier(.2,.7,.2,1) both; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    :root { --pad: 44px; }
    section { padding: 110px 0; }
    .work-grid { grid-template-columns: 1fr; }
    .c-large, .c-small, .c-med, .c-wide, .lower-left { grid-column: 1; grid-row: auto; max-width: none; }
    .lower-left { display: block; }
    .lower-left .c-reel { margin-top: 28px; }
    .c-wide .thumb { min-height: 0; aspect-ratio: 16/9; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-deco { display: none; }
    .proj-cols { grid-template-columns: 1fr; gap: 28px; }
    .proof-quotes { margin: 44px -26px 0; }
    .proof-head { padding: 0 26px; }
    .proof-rows { margin-top: 30px; gap: 14px; }
    .proof-still { margin-top: 30px; padding: 0 26px; gap: 14px; }
    .proof-card { width: 300px; margin-right: 14px; padding: 12px; border-radius: 14px; }
    .proj-specs { grid-template-columns: repeat(2, 1fr); }
    /* 9:16 projects (Ad Set, Reel): a tall frame instead of a small picture inside a 16:9 box */
    .proj-video.is-vertical { width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 18px); max-height: calc(100svh - 18px); background: #000; }   /* 9:16 at full width, so the video's sides touch the window's (capped at the screen height) */
    .proj-video.is-vertical .set-nav { top: 50%; bottom: auto; margin-top: -22px; }   /* clear of the player's control bar */
    /* Prev/Next: "← Prev" on top, the project name on one line below it */
    .proj-nav { gap: 20px; }
    .proj-navbtn { flex-wrap: wrap; row-gap: 6px; max-width: 48%; min-height: 44px; }
    #projNext { justify-content: flex-end; text-align: right; }
    .proj-navbtn .pn-label { order: 3; flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }
  /* phones held sideways (short screens): videos fit the screen's height */
  @media (max-height: 520px) and (orientation: landscape) {
    .vid-modal, .proj-modal { padding: 12px; }
    .vid-modal { overflow-y: auto; }
    .vid-shell { width: min(1120px, 100%, (100vh - 24px) * 16 / 9); width: min(1120px, 100%, (100svh - 24px) * 16 / 9); margin: auto; }
    .proj-shell { width: min(1080px, 100%, (100vh - 24px) * 16 / 9); width: min(1080px, 100%, (100svh - 24px) * 16 / 9); }
    .proj-video.is-vertical { max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); }
    /* turning the phone sideways while a video plays: the video fills the screen (like YouTube's
       app); turning it back restores the window. Works on every phone, no fullscreen permission needed. */
    .proj-shell:has(.proj-video iframe) .proj-video,
    .vid-shell:has(.vid-frame iframe) .vid-frame { position: fixed; inset: 0; z-index: 5; width: auto; height: auto; max-height: none; aspect-ratio: auto; border: 0; background: #000; }
    .modal-close { display: none; }   /* phones sideways: no × either (BMR's call); Back or turning the phone upright again */
  }
  /* touch screens: bigger tap areas (44px+) without moving anything; the invisible ::before is the hit area */
  @media (hover: none), (pointer: coarse) {
    .nav-links a, .foot-links a, .hero-cta, .assist-invite, .contact-email, .contact-primary { position: relative; }
    .nav-links a::before, .foot-links a::before, .hero-cta::before, .assist-invite::before, .contact-email::before, .contact-primary::before {
      content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 48px; transform: translateY(-50%); }
    .nav-links a::before { left: -10px; right: -10px; }   /* short words ("Work"): wider too; the rest sit near the screen edge */
  }
  @media (max-width: 720px) {
    :root { --pad: 22px; }
    .nav-inner { padding: 20px var(--pad); }
    .nav-links { gap: 26px; }
    .nav-links a { font-size: 10px; letter-spacing: 0.18em; }
    .logo span:last-child { display: none; }
    section { padding: 84px 0; scroll-margin-top: 8px; }   /* nav links: the section's first line lands ~28px under the nav */
    .contact-inner { padding-top: 0; justify-content: flex-start; }
    .modal-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,6,6,0.9); }   /* no live blur behind a playing video on phones */
    .hero { padding-top: 52px; }
    .hero h1 { font-size: clamp(30px, 11vw, 60px); }   /* min lowered so the lockup fits phones under ~345px */
    .contact h2 { font-size: clamp(26px, 9.4vw, 51px); }
    .hero-meta { margin-bottom: 40px; font-size: 10px; }
    /* phones: the full wording stays on one line between the gold lines; the size follows the screen width */
    .hero-meta { gap: 8px; font-size: clamp(6.5px, calc((100vw - 2 * var(--pad) - 40px) / 36.5), 10px); }
    .hero-meta .meta-text { letter-spacing: 0.06em; margin-right: -0.06em; }
    .player { margin-top: 56px; aspect-ratio: 16/10; }
    .play-btn { width: 66px; height: 66px; }
    .about-copy { font-size: 17px; }
    .work-head { align-items: flex-start; }
    .work-head .label { margin-top: var(--wl-nudge, 16px); }   /* centred on the "Selected" line */
    .ig-handle { margin-left: 36px; }
    footer { letter-spacing: 0.16em; display: grid; grid-template-columns: max-content; justify-content: start; gap: 24px; }   /* links row spans the copyright line's width */
    .foot-links { justify-content: space-between; gap: 24px; }
    .assist-invite { padding-left: 0; }   /* orb lines up with the email and the Instagram icon */   /* "© 2026 Artisan Genesis · Founded by BMR" stays on one line */
    .foot-copy { white-space: nowrap; }
    @media (max-width: 359px) { footer { font-size: 9px; letter-spacing: 0.1em; } }   /* the narrowest phones */   /* lines up with "DM me on Instagram" (icon 23px + 13px gap) */
    .card-open { display: none; }   /* hover-only label: never visible on phones, but it was taking width from the card text */
    .c-large .card-title { font-size: 25px; }   /* same as the other cards on phones */
    .c-large .thumb::after { background: linear-gradient(to bottom, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.6) 35%, rgba(10,10,10,0.93) 75%); }   /* busy YouTube-screenshot poster: text needs a darker base */
    .proj-body { padding: 30px 26px 36px; }
    .proj-specs { grid-template-columns: 1fr 1fr; gap: 18px; }
    .vid-caption { flex-direction: column; gap: 8px; }
    .modal-close { top: 16px; right: 16px; }
    /* BMR's call: no × on phones (project window and showreel). Windows close with the phone's
       Back / swipe-back or a tap on the dark area around them (js/app.js). */
    .modal-close { display: none; }
    .proj-shell:has(.proj-video iframe) .modal-close,
    .vid-shell:has(.vid-frame iframe) .modal-close { top: 52px; }
    .vid-modal, .proj-modal { padding: 16px; }
    .set-nav { top: 50%; bottom: auto; margin-top: -22px; }   /* mid-video, clear of the player's control bar (no × on phones now) */
    .set-prev { left: 10px; }
    .set-next { right: 10px; }
    .set-count { top: 14px; left: 14px; }
    .vol { top: 24px; right: 26px; }
    .vol input { width: 88px; height: 32px; }
    .orb-dock { bottom: 20px; right: 16px; }
    .orb-hint { display: none; }
    .panel { width: 100%; border-left: 0; }
    .contact-actions { gap: 24px; }
    .stats { gap: 24px; margin-top: 52px; padding-top: 40px; }
    .stat-num { font-size: 42px; }
    .stats > :nth-child(1), .stats > :nth-child(3) { width: min-content; }   /* labels wrap to two lines: as wide as their widest word, so they sit on the line's ends */
  }

  /* ============ REDUCED MOTION ============ */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .grain { animation: none; }
    .orb-btn::before, .orb-btn::after, .panel-head .p-orb::before, .orb-glow, .orb-liquid { animation: none; }
    .orb-btn.reacting { animation: none; }
    .hero h1 .l3, .hero-meta, .hero h1 .l1, .hero-sub, .hero-cta, .player { animation: none; }
    .proof-card[aria-hidden="true"] { display: none; }   /* no gliding: one copy, swipe/drag to scroll */
    * { transition-duration: .01ms !important; }
    .thumb-img, .card:hover .thumb-img { transition: none; transform: none; }
    .c-reel.poster-fill .thumb-fill, .c-reel.poster-fill:hover .thumb-fill { transition: none; transform: none; }
  }
  /* ============ TWEAKS: expressive feel controls (data-* on <body>) ============ */
  /* Atmosphere — reshapes the whole room: base surfaces + ambient wash */
  body[data-atmos="warm"]{--bg:#0d0a06;--bg-2:#14100a;--bg-3:#1d160d;--ink:#f7f1e5;--ink-mute:#d0c8b6;--ink-faint:#948d7c;}
  body[data-atmos="warm"] .ambient{background:radial-gradient(ellipse 80% 60% at 78% 0%,rgba(216,158,70,0.12),transparent 60%),radial-gradient(ellipse 100% 80% at 50% 100%,rgba(0,0,0,0.6),transparent 70%);}
  body[data-atmos="cold"]{--bg:#07080b;--bg-2:#0e1015;--bg-3:#13161f;--ink:#eef1f6;--ink-mute:#bdc3ce;--ink-faint:#828793;}
  body[data-atmos="cold"] .ambient{background:radial-gradient(ellipse 80% 60% at 78% 0%,rgba(96,140,196,0.10),transparent 60%),radial-gradient(ellipse 100% 80% at 50% 100%,rgba(0,0,0,0.64),transparent 70%);}
  body[data-atmos="ember"]{--bg:#0c0605;--bg-2:#150a08;--bg-3:#1d0f0b;--ink:#f6ece4;--ink-mute:#cebfb3;--ink-faint:#928176;}
  body[data-atmos="ember"] .ambient{background:radial-gradient(ellipse 80% 60% at 78% 0%,rgba(198,86,52,0.13),transparent 60%),radial-gradient(ellipse 100% 80% at 50% 100%,rgba(0,0,0,0.64),transparent 70%);}
  /* Gold presence — how loud the accent runs, everywhere gold appears */
  body[data-gold="restrained"]{--gold:#ad9350;--gold-soft:#c2a866;}
  body[data-gold="restrained"] .orb-glow{inset:-4px;}
  body[data-gold="restrained"] .logo-mark{box-shadow:0 0 10px rgba(173,147,80,0.35);}
  body[data-gold="opulent"]{--gold:#e4bd66;--gold-soft:#f1d084;}
  body[data-gold="opulent"] .orb-glow{inset:-16px;}
  body[data-gold="opulent"] .logo-mark{box-shadow:0 0 28px rgba(228,189,102,0.75);}
  body[data-gold="opulent"] .italic-gold,body[data-gold="opulent"] .hero h1 .l3,body[data-gold="opulent"] .contact h2 .ital{text-shadow:0 0 22px rgba(228,189,102,0.28);}
  /* Editorial voice — swaps the display personality across every heading */
  body[data-voice="dramatic"]{--serif:"Playfair Display",Georgia,serif;}
  body[data-voice="modern"]{--serif:"Space Grotesk",system-ui,sans-serif;}
  body[data-voice="modern"] h1,body[data-voice="modern"] h2,body[data-voice="modern"] h3,body[data-voice="modern"] .card-title,body[data-voice="modern"] .stat-num{font-weight:600;letter-spacing:-0.03em;}
  body[data-voice="modern"] .hero h1{letter-spacing:-0.045em;}
  body[data-voice="modern"] .italic-gold,body[data-voice="modern"] .hero h1 .l3,body[data-voice="modern"] .contact h2 .ital,body[data-voice="modern"] .about-copy .sig{font-style:normal;}