/* WhiteGold Media — premium restraint pass (owner chose Look B, 8 Nov 2026).
   Loaded after site.css by app/views/_look.php on every page, ad landing pages (/lp/) included (9 Nov).
   Look A (body.look-a): flat buttons, quiet cursor, gold only as a thin accent.
   Look B (body.look-b): Look A + condensed uppercase headlines (Big Shoulders Display). */

/* ============ LOOK A — restraint ============ */
:root { --gold-grad: var(--gold); }   /* every remaining gold gradient becomes flat gold */

/* ---- Buttons: flat. Ivory on dark, near-black on light. ---- */
.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.btn-gold {
  overflow: visible; isolation: auto; transform: none;
  background: var(--ivory); color: var(--black);
  box-shadow: none; border: 1px solid transparent;
}
.btn-gold::before, .btn-gold::after { content: none; animation: none; }
.btn-gold:hover { background: var(--white); box-shadow: none; transform: translateY(-1px); transition: background-color .25s ease, transform .25s ease; }
.btn-gold:active { background: var(--ivory-2); box-shadow: none; transform: none; }
.btn-gold:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* on light sections and the light-state header */
.scope-light .btn-gold, .tone-ivory .btn-gold, .svc-card .btn-gold, .site-header.on-light .btn-gold {
  background: var(--black); color: var(--ivory);
}
.scope-light .btn-gold:hover, .tone-ivory .btn-gold:hover, .svc-card .btn-gold:hover, .site-header.on-light .btn-gold:hover { background: #2a2824; }
/* dark islands inside light sections go back to ivory */
.scope-light :is(.scope-dark, .tone-dark, .tone-image, .next-project, .wf-turn-card, .invite, .hero, [data-tone="dark"]) .btn-gold { background: var(--ivory); color: var(--black); }
.scope-light :is(.scope-dark, .tone-dark, .tone-image, .next-project, .wf-turn-card, .invite, .hero, [data-tone="dark"]) .btn-gold:hover { background: var(--white); }

/* secondary: 1px outline, gold on hover */
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--gold); color: var(--text); }

/* landing-page phone bar */
.lp-bar .lp-bar-form { background: var(--ivory); color: var(--black); }

/* ---- Cursor: small, thin, quiet. No glow, no blend. ---- */
.cursor-ring {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 1px solid var(--gold); opacity: .45; mix-blend-mode: normal; background: none;
}
.cursor-ring.is-link { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: none; opacity: .8; }
.cursor-ring.is-down { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: none; }
.cursor-ring.is-hidden { opacity: 0; }
/* "View / Play" bubble over media: flat ivory disc, smaller */
.cursor { background: var(--ivory); box-shadow: none; transform: translate(-50%, -50%); }
.cursor.is-on { width: 72px; height: 72px; }
.cursor-preview { box-shadow: 0 20px 50px -24px rgba(0,0,0,.5); }

/* ---- Gold as accent only: remove washes, glows, shine and gradient text ---- */
.media { background: linear-gradient(160deg, #1f1d1a, #0f0e0c); }
.cta { background: var(--black); }
.wf-turn-card { background: var(--black); border: 1px solid var(--line); }
.wf-turn-card:hover .display, .cta .display a:hover, .cat-card:hover .cat-name { color: var(--text); }
.wordmark span, .intro-mark em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-2); }
.tone-gold { background: var(--ivory-2); color: var(--black); }
.tone-gold .meta { color: #8a6a2f; }
.process-line i { background: var(--gold); }
.notice-ok { background: transparent; }

/* play buttons: hairline ring, no pulsing gold halo, ivory fill on hover */
.play-ring::before { animation: none; opacity: 0; }
.play-ring { border-color: rgba(243,237,226,.5); }
.play-btn:hover .play-ring, .reel-play:hover .play-ring, .film-play:hover .play-ring, .film-play:focus-visible .play-ring { background: var(--ivory); border-color: var(--ivory); }
.play-btn:hover .play-ring svg, .reel-play:hover .play-ring svg, .film-play:hover .play-ring svg { fill: var(--black); }
.lp-film .play-ring { border-color: rgba(243,237,226,.5); }

/* bento tiles: no white sheen glow, gentler lift */
.tile::before { content: none; }
.tile:hover { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-2px); }

/* links: thin gold underline stays the signature */
.link-arrow { border-bottom-width: 1px; }

/* ============ LOOK B — condensed headlines ============ */
.look-b {
  --cond: "Big Shoulders Display", "Inter Tight", system-ui, sans-serif;
}
.look-b :is(.display, .h2, .idx-title, .svc-name, .manifesto-text, .step h3, .tile h3, .tile-body h3, .tile-stat,
  .menu nav a, .lp-title, .lp-offer-line, .work-row h2, .case-block h2, .wf-title, .footer-promise, .band span,
  .lp-form-title, .holding-line, .cat-name) {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0; font-style: normal;
}
.look-b :is(.display, .h2, .idx-title, .svc-name, .manifesto-text, .step h3, .tile h3, .tile-stat, .menu nav a, .band span) em,
.look-b .svc-titles .is-active .svc-name,
.look-b .index-list a:hover .idx-title,
.look-b .reel-play:hover .reel-play-label .display,
.look-b .wf-turn-card:hover .display,
.look-b .cat-card:hover .cat-name { font-style: normal; }

.look-b .display { font-size: clamp(48px, 8.8vw, 150px); line-height: .88; }
.look-b .lp-title { font-size: clamp(44px, 7vw, 110px); }
.look-b .h2 { font-size: clamp(38px, 5.4vw, 84px); line-height: .9; }
.look-b .idx-title { font-size: clamp(34px, 4.6vw, 70px); line-height: .9; }
.look-b .svc-name { font-size: clamp(32px, 4.6vw, 76px); line-height: .92; }
.look-b .manifesto-text { font-size: clamp(36px, 5.4vw, 88px); line-height: .92; font-weight: 700; }
.look-b .step h3 { font-size: clamp(40px, 4.8vw, 68px); line-height: .9; }
.look-b .tile h3, .look-b .tile-body h3 { font-size: clamp(26px, 2.4vw, 38px); line-height: .92; font-weight: 700; }
.look-b .tile-stat { font-size: clamp(48px, 5.4vw, 80px); line-height: .9; }
.look-b .menu nav a { font-size: clamp(48px, 13vw, 80px); line-height: .95; }
.look-b .work-row h2, .look-b .wf-title { line-height: .9; }
.look-b .footer-promise { line-height: .92; }
.look-b .band span { line-height: .9; }
/* testimonial quotes keep Instrument Serif italic */
.look-b .proof blockquote { font-family: var(--serif); text-transform: none; }
@media (max-width: 760px) {
  .look-b .svc-name { font-size: clamp(28px, 8vw, 40px); }
}
/* condensed caps are narrower per character: let page headings run wider so they don't stack */
.look-b .page-head .display { max-width: 22ch; }

/* ============ HUD diet (all premium looks) ============
   The camera read-outs stacked words on every slide. Desktop keeps one quiet "01 / 06" counter
   and the progress line; phones keep only the headline, the frame brackets and the progress line. */
/* gone everywhere: REC + timecode, "Stills // 06 frames", exposure read-outs, "Full screen mode" */
.look-a :is(.hero-hud, .frame-hud, .invite-hud, .reel-mode) { display: none; }
/* hero bottom bar: the slide title + category repeated what the photo shows */
.look-a .hero-now { display: none; }
.look-a .hero-counter { font: 400 11px/1 var(--sans); letter-spacing: .08em; color: var(--muted); }
.look-a .hero-counter b { font-weight: 400; color: var(--text); }
.look-a .hud-sep { display: none; }
.look-a .hud-sep-alt { display: inline; }
/* work category cards: just the number, not "// 3 jobs" */
.look-a .hud-extra { display: none; }

@media (max-width: 760px) {
  /* phones: no words over the photos — headline + thin progress bar only */
  .look-a :is(.hero-counter, .hero-kicker, .reel-top, .reel-credit, .reel-play-label .meta, .invite-flow, .cat-copy > .meta) { display: none; }
  .look-a .hero-index { grid-template-columns: 1fr; }
  .look-a .hero-line { grid-column: 1 / -1; }
}

/* ============ Desktop composition (owner, 8 Nov): words were sitting over faces ============
   Phones are right as they are, so everything here is ≥ 761px only. Text over photographs keeps to a
   defined lower-left block, at a size that leaves the subject clear, with a soft shade behind it only. */
@media (min-width: 761px) {
  /* home hero */
  .look-b .hero-copy { max-width: min(46vw, 760px); bottom: clamp(96px, 13vh, 140px); }
  .look-b .hero-copy .display { font-size: clamp(46px, 4.6vw, 92px); line-height: .9; margin: 14px 0 18px; }
  .look-b .hero-intro { max-width: 40ch; }
  .look-a .hero .hero-shade {
    background: linear-gradient(to right, rgba(11,11,10,.62) 0%, rgba(11,11,10,.34) 30%, rgba(11,11,10,0) 55%),
                linear-gradient(to top, rgba(11,11,10,.85) 0%, rgba(11,11,10,.2) 38%, rgba(11,11,10,0) 60%),
                linear-gradient(to bottom, rgba(11,11,10,.35) 0%, rgba(11,11,10,0) 18%);
  }
  /* case-study opening photo */
  .look-b .case-hero-copy { max-width: min(52vw, 860px); bottom: 48px; }
  .look-b .case-hero-copy .display { font-size: clamp(44px, 4.2vw, 84px); line-height: .9; }
  /* "Start a production" photo cards (home) */
  .look-b .invite-copy { max-width: min(44vw, 640px); }
  .look-b .invite-title { font-size: clamp(42px, 4.4vw, 80px); line-height: .9; }
  .look-b .invite-l .invite-title { font-size: clamp(48px, 5.2vw, 100px); }
  .look-a .invite-shade { background: linear-gradient(to right, rgba(22,21,19,.7) 0%, rgba(22,21,19,.3) 35%, rgba(22,21,19,0) 60%), linear-gradient(to top, rgba(22,21,19,.6), rgba(22,21,19,0) 50%); }
  /* Work page category cards: the name fits the card */
  .look-b .cat-name { font-size: clamp(30px, 2.8vw, 52px); line-height: .92; }
}
/* Owner, 8 Nov: home hero slide 2 (Chandree studio portrait) a little to the viewer's right on desktop.
   A tall photo fills the full width there, so its focal point can only move it up/down (set in Admin → Focal points,
   wide screens 50% 30%); this nudges it sideways. Zoom 5% so the left edge stays covered. */
@media (min-width: 761px) {
  .hero-slide .media img[src*="chandree-studio-08"] { scale: 1.05; translate: 2.2vw 0; }
}

/* ============ Phones (owner, 9 Nov): words clear of faces, no black band ============
   On a real phone (browser bars, ~550–740px visible) the hero words rose to mid-frame and covered faces.
   Photos stay full-bleed; the words are smaller and sit at the very bottom over a soft fade only.
   Tablets and up (≥ 761px) are unchanged. */
@media (max-width: 760px) {
  /* home hero */
  .look-a .hero-copy { bottom: 52px; }
  .look-b .hero-copy .display { font-size: clamp(28px, 8.6vw, 38px); line-height: .92; margin: 0 0 8px; }
  .look-a .hero-intro { font-size: 14px; max-width: 34ch; }
  .look-a .hero-copy .play-btn { margin-top: 12px; }
  .look-a .hero-copy .play-ring { width: 40px; height: 40px; }
  .look-a .hero .hero-shade { background: linear-gradient(to top, rgba(11,11,10,.78) 0%, rgba(11,11,10,.35) 24%, rgba(11,11,10,0) 42%), linear-gradient(to bottom, rgba(11,11,10,.45) 0%, rgba(11,11,10,0) 18%); }

  /* job page opening photo */
  .look-a .case-hero-copy { bottom: 26px; }
  .look-b .case-hero-copy .display { font-size: clamp(28px, 8.6vw, 38px); line-height: .92; margin: 8px 0 8px; }
  .look-a .case-hero > .hero-shade { background: linear-gradient(to top, rgba(11,11,10,.8) 0%, rgba(11,11,10,.3) 26%, rgba(11,11,10,0) 44%); }

  /* "Your turn" / "Start a production" cards */
  .look-a .invite-copy { padding: 20px 20px 22px; gap: 10px; }
  .look-b .invite-title, .look-b .invite-l .invite-title { font-size: clamp(30px, 9vw, 40px); line-height: .92; }
  .look-a .invite-line { font-size: 14px; }
  .look-a .invite-shade { background: linear-gradient(to top, rgba(22,21,19,.8) 0%, rgba(22,21,19,.3) 30%, rgba(22,21,19,0) 50%); }

  /* Work page category cards */
  .look-b .cat-name { font-size: clamp(26px, 7.6vw, 34px); line-height: .92; }
  .look-a .cat-copy { left: 16px; right: 16px; bottom: 14px; gap: 4px; }
  .look-a .cat-label { font-size: 13px; }
  .look-a .cat-card .hero-shade { background: linear-gradient(to top, rgba(11,11,10,.8) 0%, rgba(11,11,10,.25) 30%, rgba(11,11,10,0) 48%); }
}

/* ============ Type system (font audit, 9 Nov 2026 — font-audit-20261109.md) ============
   Big Shoulders Display caps: page and section headlines. Instrument Serif: testimonial quotes and italic accent lines,
   long editorial statements (LP story), job-card titles. Inter Tight: everything else (body, labels, buttons, forms, nav). */
/* section headings that were still serif next to condensed ones on the same page */
.look-b :is(.page-category .svc-h2, .text-page h2, .lp-pain-line) {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0; font-style: normal;
}
.look-b.page-category .svc-h2 { line-height: 1; }   /* same size as the form title on these pages (26–32px) */
.look-b .text-page h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: .95; }
.look-b .lp-pain-line { font-size: clamp(36px, 5.4vw, 80px); line-height: .92; }
/* FAQ questions: one style site-wide (the service pages' Inter Tight; the Services page still had serif) */
.look-b .faq-list summary { font: 400 clamp(19px, 1.6vw, 22px)/1.3 var(--sans); padding: 18px 40px 18px 0; }
.look-b .faq-list summary::after { top: 14px; }
/* service-page intro: the first paragraph was serif at body size; same face as the rest of the intro */
.look-b.page-category .svc-intro p:first-child { font-family: var(--sans); }
/* small-caps labels (.meta) keep their 12px size inside 17px text blocks ("Rather talk?", "Last updated") */
.look-b :is(.lp-contact, .text-page) p.meta { font-size: 12px; line-height: 1.4; }
/* Ad pages on phones: the Call / WhatsApp / Enquire bar is fixed at the bottom, so the hero words keep their
   old height (128px up) and stay clear of it; everything else follows the phone rules above. */
@media (max-width: 760px) {
  .look-a .lp-hero2 .hero-copy { bottom: 128px; }
  /* the words sit higher here, so the soft fade reaches higher behind them (still no solid band) */
  .look-a .lp-hero2 .hero-shade { background: linear-gradient(to top, rgba(11,11,10,.88) 0%, rgba(11,11,10,.62) 34%, rgba(11,11,10,.18) 58%, rgba(11,11,10,0) 72%), linear-gradient(to bottom, rgba(11,11,10,.45) 0%, rgba(11,11,10,0) 18%); }
}