/* Desktronic identity skin, 2026-10-12 (second pass). Load after the original kit and pitch.css.
   Colors, type treatment and the CTA come from the September Desktronic pitch (desktronic-pitch-working-2026-09-17,
   src/styles.css) and the captured website palette (S14/S27/S28). Skin only: every layout, scroll, reveal, curtain,
   player and responsive rule of the template stays authoritative. */
:root {
  /* Brand refresh (14 Oct 2026, owner): Desktronic's current website identity. Instrument Sans display (free stand-in for the site's commercial Friends) + InterVariable body,
     white / cream #F5EFE8 / near-black #19191C surfaces, body grey #595959, no lavender. Previous values: ROLLBACK/2026-10-14-before-brand-refresh. */
  --font: "InterVariable", "Inter", sans-serif;
  --font-display: "Instrument Sans", sans-serif;   /* OFL stand-in for the site's commercial Friends */
  --black: #19191C;
  --black2: #29282D;
  --black3: #29282D;
  --black-80: #595959;   /* the site's body grey (--color-body-dark) */
  --black-60: #595959;
  --black-20: rgba(25,25,28,.2);
  --black-10: rgba(25,25,28,.1);
  --white: #FFFFFF;
  --white-80: rgba(255,255,255,.8);
  --white-60: rgba(255,255,255,.66);
  --white-20: rgba(255,255,255,.2);
  --grey-light: #F5EFE8;
  /* lavender retired: the old accent hooks now carry the ink (on light) and soft white (on dark) */
  --purple2: #19191C;
  --purple3: #19191C;
  --purple4: #19191C;
  --purple5: rgba(255,255,255,.66);
  --purple7: #19191C;
  --dt-cream: #F5EFE8;   /* --color-accent */
  --dt-card: #FFFFFF;
  --dt-paper-2: #F5EFE8;
  --qc-paper: #F5EFE8;
}

/* ---------- Color pacing: paper everywhere; Desktronic dark only for the closing invitation ---------- */
html, body { background: var(--white); }
body { color: var(--black); }
.bg-black{ color: var(--white); }
.episode, .creative-versions, .team, .rotate-note { background: var(--white); }
.rotate-note { color: var(--black); }
.bg-grey { background: var(--dt-paper-2); }
.hero-lead { color: var(--black-60); }
:focus-visible { outline-color: var(--purple3); }
.final :focus-visible { outline-color: var(--purple4); }
.q-curtain { color: var(--black); }
.q-curtain .qc-for, .q-curtain .qc-credit { color: rgba(41,40,45,.72); }
/* Keep the old logo's image box, fitting the exact wide wordmark inside it.
   Its width, safe zones and existing loading animation are unchanged. */
.q-curtain .qc-logo { aspect-ratio: 375.615 / 90.562; object-fit: contain; }
/* Recolor only the animated cover pixels; keep the signature atlas unchanged. */
.q-curtain .qc-sign > i { filter: url(#desktronic-curtain-paper); }
/* Episode on paper: the small print in ink, the decorative light in lavender only. The phone and the
   video controls keep their own colours (they sit on the device and the film). */
.episode::before { background: radial-gradient(42% 50% at 50% 55%, rgba(102,103,170,.2), rgba(102,103,170,0) 70%); }
/* The lifting sheet's shadow keeps its reach below the section but no longer bleeds above it, where paper meets paper. */
.episode { box-shadow: 0 1px 0 rgba(25,25,28,.06), 0 32px 48px -24px rgba(25,25,28,.25); }
@media (max-width: 639px) { .episode { box-shadow: 0 16px 32px -20px rgba(25,25,28,.25); } }

@media (max-width: 1023px) {
  .episode::before { background: radial-gradient(60% 30% at 50% 70%, rgba(102,103,170,.18), rgba(102,103,170,0) 70%); }
}
@media (max-width: 639px) {
  .hero-lead { color: var(--black-60); }
}
.proof a{ color: var(--black); }
.proof a:hover { border-color: var(--black); }
.segmented { background: color-mix(in srgb, var(--dt-paper-2) 94%, var(--black)); }
.segmented .thumb { background: var(--dt-card); }
.segmented:not(.glass) button[aria-selected="true"] { color: var(--black); }

/* ---------- Type treatment (September pitch): SemiBold display, untracked Oakes, 1.04-1.07 display leading, 1.47 body leading ---------- */
.hero-title, .title-64, .title-48, .rotate-line { font-weight: 600; letter-spacing: 0; }
.creds b { font-weight: 600; letter-spacing: 0; }
.hero-title { letter-spacing: -.015em; }   /* Apple: the largest display size reads as one shape with slightly tighter tracking */
.text-20, .hero-lead, .proof, .creds span, .segmented button { letter-spacing: 0; }
/* The word and line masks keep their exact size and animation. A clipped inline-block sits its bottom edge on the
   baseline, which added the descent to every line; top alignment and a matching negative bottom margin make the
   visible line step the brand's 1.04/1.07. */
.animated-title .word { margin-bottom: -.11em; vertical-align: top; }
.hero-title .line { margin-bottom: -.1em; }
@media (min-width: 640px) {
  .hero-title { line-height: 1.04; }
  .animated-title.title-64, .animated-title.title-48{ line-height: 1.07; }
  .text-20, .hero-lead, .proof { line-height: 1.47; }
}
/* Eyebrow labels: the September pitch's small lavender SemiBold line, without Questum's slash ornament */
.section-label { font-size: 15px; line-height: 1.28; font-weight: 600; letter-spacing: 0; }
.section-label::before, .section-label.has-after::after { display: none; }
@media (max-width: 1199px) { .section-label { font-size: 15px; } }
@media (max-width: 639px) { .section-label { font-size: 14px; line-height: 1.28; } }

/* ---------- Desktronic CTA (the September pitch's .desktronic-cta, unmixed) ----------
   The link keeps every template class, so its entrance timing and position are untouched; the visible pill is the
   inner .dt-cta. Lavender pill, white Oakes Medium label, a two-arrow slide and a 1px lift on hover/focus.
   Hero (on paper): the header variant, which empties to a lavender outline. Close (on dark): the footer
   variant, which stays filled and sweeps its shine once when it appears. */
.hero-cta.btn, .final .btn-cta.btn { padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; line-height: normal; letter-spacing: 0; }
.hero-cta.btn:hover, .final .btn-cta.btn:hover, .hero-cta.btn:focus-visible, .final .btn-cta.btn:focus-visible { color: inherit; border-color: transparent; }
.hero.is-settled .hero-cta:active, .final .btn-cta.press:active { transform: translate3d(0, 0, 0); }   /* the brand button has no press shrink */
.dt-cta { --dt-accent: var(--purple2); position: relative; display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px;
  padding: 0 26px; overflow: hidden; border: 1px solid var(--dt-accent); border-radius: 999px; background: var(--dt-accent); color: #fff;
  font: 500 16px/1 var(--font); letter-spacing: 0; white-space: nowrap;
  transition: color .25s, background-color .25s, border-color .25s, transform .25s; }
.dt-cta > span { position: relative; z-index: 3; }
.final .dt-cta { --dt-accent: var(--purple3); min-height: 62px; padding: 0 32px; font-size: 17px; }
/* Hover only where a real pointer can hover (a tap must not leave the outline stuck); keyboard focus shows the same state. */
.hero-cta:focus-visible .dt-cta { background: transparent; color: var(--dt-accent); transform: translateY(-1px) scale(1.035); }
.final .btn-cta:focus-visible .dt-cta { transform: translateY(-1px) scale(1.035); }
@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover .dt-cta { background: transparent; color: var(--dt-accent); transform: translateY(-1px) scale(1.035); }
  .final .btn-cta:hover .dt-cta { transform: translateY(-1px) scale(1.035); }
}
/* Press: answers the instant a finger or button goes down (about 3% smaller than the state it was in). */
.btn:active .dt-cta { transform: scale(.97); transition: color .25s, background-color .25s, border-color .25s, transform .1s ease-out; }
@media (hover: hover) and (pointer: fine) { .btn:hover:active .dt-cta { transform: none; } }
.dt-cta .btn-icon { position: relative; z-index: 3; display: flex; width: 17px; min-width: 17px; height: 15px; align-items: center; justify-content: center; overflow: hidden; color: inherit; }
.dt-cta .btn-icon svg { position: absolute; width: 17px; height: 15px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.dt-cta .btn-icon svg:first-of-type { transform: translate3d(0, 0, 0); }
.dt-cta .btn-icon svg:last-of-type { transform: translate3d(-200%, 0, 0); }
.btn:focus-visible .dt-cta .btn-icon svg:first-of-type { transform: translate3d(180%, 0, 0); }
.btn:focus-visible .dt-cta .btn-icon svg:last-of-type { transform: translate3d(0, 0, 0); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .dt-cta .btn-icon svg:first-of-type { transform: translate3d(180%, 0, 0); }
  .btn:hover .dt-cta .btn-icon svg:last-of-type { transform: translate3d(0, 0, 0); }
}
.dt-cta--shine { contain: paint; clip-path: inset(0 round 999px); }
.dt-cta--shine::before { content: ""; position: absolute; top: -50%; left: 0; z-index: 2; width: 38%; height: 200%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent); opacity: 0; transform: translateX(-120%) skewX(-20deg); }
.btn-cta.in-view .dt-cta--shine::before, .btn-cta:hover .dt-cta--shine::before, .btn-cta:focus-visible .dt-cta--shine::before {
  animation: dt-cta-shine 1.3s cubic-bezier(.85, 0, .15, 1) .72s 1 forwards; }   /* September's .32s, after the close's own .4s button delay */
@keyframes dt-cta-shine { 0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(220%) skewX(-20deg); opacity: 0; } }
@media (max-width: 639px) { .final .dt-cta { min-height: 54px; padding: 0 26px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .dt-cta, .dt-cta .btn-icon svg { transition: none; }
  .dt-cta--shine::before { animation: none !important; }
}

/* Oakes SemiBold is wider in the credentials. Fit its labels inside the unchanged
   three-column grid on the narrowest phones, retaining all spacing. */
@media (max-width: 409px) {
  .creds b { font-size: min(24px, 5.5vw); }
}

/* ---------- Footer: one quiet line on the close's dark. Credit left; email and LinkedIn right; centred stack on phones ---------- */
.dt-footer { position: relative; z-index: 1; background: var(--black); color: var(--white-60); }
.dt-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px;
  border-top: 1px solid rgba(239,238,233,.1); font-size: 14px; line-height: 1.47; letter-spacing: 0; }
.dt-footer p { margin: 0; }
.dt-footer__links { display: flex; align-items: center; gap: 12px; }
.dt-footer a { color: inherit; text-decoration: none; border-radius: 4px; transition: color .25s; }
.dt-footer__icon { display: grid; place-items: center; width: 44px; height: 44px; margin: calc((.78em - 44px) / 2); }   /* a 44px target around the cap-height mark; the margin cancels the padding, so the mark sits 12px from the address and flush with the column edge */
.dt-footer__icon svg { width: .78em; height: .78em; fill: currentColor; transform: translateY(-.125em); }   /* Oakes cap height (10.5 of 14px), sitting on the text's baseline rather than the line box's centre */
.dt-footer :focus-visible { outline-color: var(--purple4); }
@media (hover: hover) and (pointer: fine) { .dt-footer a:hover { color: var(--white); } }
@media (max-width: 639px) {
  .dt-footer__inner { flex-direction: column; gap: 12px; text-align: center; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .final { padding-bottom: 64px; }   /* the safe-area inset now belongs to the footer, the page's last edge */
}

/* ---------- Visitor settings: Reduce transparency and Increase contrast (where the browser reports them) ---------- */

@media (prefers-contrast: more) {
  :root { --black-60: rgba(25,25,28,.8); --black-80: rgba(25,25,28,.9); --black-10: rgba(25,25,28,.24);
    --white-60: rgba(239,238,233,.82); --white-80: rgba(239,238,233,.92); --purple2: color-mix(in srgb, #6667AA 80%, #19191C); }
  :focus-visible { outline-width: 3px; }
  .proof a { border-bottom-color: var(--black-60); }
}

/* ---------- Portrait depth (desktronic-portrait.js adds the classes and the shadow copy; without the script nothing here applies) ----------
   No rotation or perspective: the person slides toward the pointer and comes up to 1.8% closer (uniform scale from the
   bottom edge); the shadow and the wall light slide the other way. The cut-out is at least 5% larger and 16px lower
   so its edges never show; the frame never moves. */
.final .maker .photo.dt-depth-on { contain: paint;
  /* The card's light fill stops at 87%, behind the jacket (which covers both edges below ~84% at every measured position,
     320–1440px): the rounded bottom corners then have nothing light under the photo to leak as a thin line along the curve. */
  background: linear-gradient(to bottom, var(--grey-light) 87%, transparent 87%); }
.final .maker .photo.dt-depth-on::before { content: ""; position: absolute; inset: -20%; pointer-events: none; will-change: transform;
  background: radial-gradient(55% 45% at 50% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0); }
.final .maker .photo img.dt-depth { position: relative; z-index: 1; transform-origin: 50% 100%; will-change: transform;
  transform: translate3d(var(--nx, 0px), calc(var(--ny, 0px) + 16px), 0) scale(var(--z, 1.05)); }
.final .maker .photo img.dt-shadow { position: absolute; left: 50%; bottom: 0; height: 90%; width: auto; max-width: none; pointer-events: none;
  filter: blur(16px) brightness(0); opacity: .14; transform-origin: 50% 100%; will-change: transform;
  transform: translate3d(calc(-50% + 8px + 3px * var(--zs, 0) + var(--fx, 0px)), calc(6px + 2px * var(--zs, 0) + var(--fy, 0px) + 16px), 0) scale(var(--z, 1.05)); }

/* ---------- Portrait window: a faint inner shadow cast by the frame's edge onto the portrait (static; strongest at the
   top, softer at the sides, none at the bottom where the cut-out meets the frame). Remove this block to switch it off. */
.final .maker .photo::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 16px 28px -14px rgba(25,25,28,.16), inset 14px 0 26px -16px rgba(25,25,28,.10), inset -14px 0 26px -16px rgba(25,25,28,.10); }

/* ---------- 2. HomePro: the approved storyboard v3 as a scroll film. The canvas fills the pinned stage; the words sit in
   the free space of each moment (positions from the desk's projected box: --dt-head, --dt-sub, --dt-above, --dt-claim,
   set by homepro-section.js). Opacity, rise and focus of each line are driven by the scroll, so no CSS transitions. ---------- */
.episode.dt-film { display: block; min-height: 0; padding: 0; overflow: clip; }   /* clip, not hidden: sticky needs no scroll container */
.episode.dt-film::before { display: none; }
.dt-film__runway { position: relative; height: 650svh; }
.dt-film__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--white); }
.dt-film__view { position: absolute; inset: 0; }
.dt-film__view canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.dt-film.is-ready .dt-film__view canvas { opacity: 1; }
.dt-film__copy { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dt-film__under { position: absolute; inset: 0; z-index: 0; pointer-events: none; }   /* behind the canvas: the desk masks the opening words */
.dt-film__copy > *, .dt-film__under > * { position: absolute; margin: 0; opacity: 0; visibility: hidden; color: var(--black); font-weight: 600; letter-spacing: 0; will-change: opacity, transform, filter; }
.dt-film__head { left: 24px; right: 24px; text-align: center; bottom: var(--dt-head, 64%); }
.dt-film__sub { font-weight: 400; color: var(--black-80); text-align: center; top: var(--dt-sub, 66%); text-wrap: pretty; }
.dt-film__line { text-wrap: balance; }
.dt-film.is-still .dt-film__copy > * { transition: opacity .3s ease, visibility 0s; }

/* Desktop and landscape tablets: full bleed; the desk centred at the opening, the three-quarter views and the close. */
@media (min-width: 1024px) and (orientation: landscape) {
  .dt-film { --dt-side: max(var(--gutter), 6.67vw); --dt-sub-w: min(560px, 40vw); --dt-above-w: min(780px, 56vw); }
  .dt-film__head { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.07; }
  .dt-film__sub { left: calc(50% - var(--dt-sub-w) / 2); width: var(--dt-sub-w); font-size: clamp(17px, 1.39vw, 20px); line-height: 1.47; }
  .dt-film__line { width: min(460px, 32vw); font-size: clamp(40px, 4vw, 58px); line-height: 1.04; }   /* statements: the claim's weight, a step smaller */
  .dt-film__line--above { left: calc(50% - var(--dt-above-w) / 2); width: var(--dt-above-w); text-align: center; bottom: var(--dt-above, 68%); }
  .dt-film__line--right-low { right: var(--dt-side); top: 70%; translate: 0 -50%; text-align: right; }
  .dt-film__line--left { left: var(--dt-side); top: 50%; translate: 0 -50%; }
  .dt-film__line--right { right: var(--dt-side); top: 50%; translate: 0 -50%; text-align: right; }
  .dt-film__phone-br { display: none; }
  .dt-film__claim { left: 24px; right: 24px; width: auto; text-align: center; bottom: var(--dt-claim, 68%); font-size: clamp(52px, 5vw, 72px); line-height: 1.04; }
}
/* Phones and portrait tablets: the opening full screen; then the desk in the top 62 % and one line beneath it. */
@media not all and (min-width: 1024px) and (orientation: landscape) {
  .dt-film { --dt-col: min(560px, calc(100% - 48px)); }
  .dt-film__head { font-size: 34px; line-height: 38px; }
  .dt-film__sub { left: calc(50% - var(--dt-col) / 2 + 8px); width: calc(var(--dt-col) - 16px); font-size: 16px; line-height: 23px; }
  .dt-film__line { left: calc(50% - var(--dt-col) / 2); width: var(--dt-col); bottom: calc(120px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 28px; line-height: 32px; }
  .dt-film__claim { font-size: 54px; line-height: 52px; }
  .dt-film__claim span { display: block; }
  .dt-film__line--phone-top { bottom: auto; top: calc(96px + env(safe-area-inset-top, 0px)); }   /* controls and rear view: line above, picture below */
}
@media (min-width: 640px) and (orientation: portrait), (min-width: 640px) and (max-width: 1023px) {
  .dt-film__head { font-size: 48px; line-height: 1.07; } .dt-film__sub { font-size: 18px; line-height: 1.47; }
  .dt-film__line { font-size: 36px; line-height: 1.1; } .dt-film__claim { font-size: 64px; line-height: 1.02; }
}
@media (max-width: 359px) {
  .dt-film__head { font-size: 30px; line-height: 34px; } .dt-film__line { font-size: 25px; line-height: 29px; bottom: 96px; } .dt-film__line--phone-top { top: 72px; bottom: auto; }
  .dt-film__claim { font-size: 46px; line-height: 45px; }
}
@media (prefers-reduced-motion: reduce) { .dt-film__view canvas { transition: none; } }

/* ---------- 5. Team: the eyebrow sits over the headline, on its left axis (centred on phones like every head) ---------- */
.team-head .section-label { justify-content: flex-start; }
@media (max-width: 639px) { .team-head .section-label { justify-content: center; } }

/* ---------- 6. Close: "More of my work", the second action (owner, 2026-10-15) ----------
   An outline button: the same size, corners and type as "Let's talk", white hairline border, no icon; on hover a faint
   white fill. Beside the light action on desktop, under it on phones. */
.final .dt-more { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; margin: 40px 0 0 12px; padding: 0 32px;
  box-sizing: border-box; vertical-align: top; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; color: #FFFFFF; background: transparent;
  font: 500 18px/1.33 var(--font-display); text-decoration: none;
  transition: background-color .3s, border-color .3s, opacity .8s cubic-bezier(.33, 0, .15, 1), transform 1s var(--ease-out-expo); transition-delay: 0s, 0s, .5s, .5s; }
.final .dt-more:focus-visible { outline: none; border-color: #FFFFFF; background: rgba(255,255,255,.08); }
@media (hover: hover) and (pointer: fine) { .final .dt-more:hover { border-color: #FFFFFF; background: rgba(255,255,255,.08); } }
.final .dt-more:active { background: rgba(255,255,255,.12); }
@media (max-width: 639px) {                                     /* phones: the two actions stacked, one width */
  .final .dt-more { order: 5; margin: 12px 0 0; width: min(100%, 320px); }
  .final .btn-cta { width: min(100%, 320px); } .final .btn-cta .dt-cta { width: 100%; box-sizing: border-box; }
}

/* ---------- 1. Hero, English copy: four phrases. Desktop sets them as two lines (pairs side by side); phones stack the four
   phrases as title cards. Sized so the longer English line never wraps (a wrap would split it into one card per word). ---------- */
.hero-title .line { display: inline-block; vertical-align: top; }
@media (min-width: 640px) { .hero-title { font-size: clamp(40px, 6vw, 88px); } }
@media (max-width: 639px) {
  .hero-title { font-size: 40px; line-height: 44px; }
  .hero-title .line { display: block; }
  .hero-title br { display: none; }
}
/* the cascade in reading order (pitch.css counted children; the <br> now sits among them) */
.hero-title .line:nth-of-type(1) > span, .hero-title .line:nth-of-type(2) > span { transition-delay: .1s; }
.hero-title .line:nth-of-type(3) > span, .hero-title .line:nth-of-type(4) > span { transition-delay: .35s; }
@media (max-width: 639px) {
  .hero-title .line:nth-of-type(1) > span { transition-delay: .1s; }
  .hero-title .line:nth-of-type(2) > span { transition-delay: .2s; }
  .hero-title .line:nth-of-type(3) > span { transition-delay: .3s; }
  .hero-title .line:nth-of-type(4) > span { transition-delay: .4s; }
  .hero-title .line:nth-of-type(n+5) > span { transition-delay: .5s; }
}
@media (max-width: 379px) { .hero-title { font-size: 34px; line-height: 38px; } }   /* the smallest phones keep the four phrases whole */

/* ================= Brand refresh, 14 Oct 2026 (owner's picks 1-9) =================
   Desktronic's current website (official-website-design-system, captured 13 Oct): the cube logo, Friends Regular for
   display and actions, InterVariable for body, white / cream / near-black pacing, the native 8px dark action, 24px
   media corners. Scroll, motion, section order and responsiveness are unchanged. */
/* Pacing: white opening, the beige studio film, white, cream band, white, near-black close */
html, body, .hero, .episode, .creative-versions, .team, .rotate-note { background: #FFFFFF; }
.bg-grey { background: var(--dt-cream); }
.episode::before{ background: none; }
.final :focus-visible, .dt-footer :focus-visible { outline-color: #FFFFFF; }
.q-curtain .qc-for, .q-curtain .qc-credit { color: #595959; }
.q-curtain .qc-logo { aspect-ratio: 114 / 16; object-fit: contain; }   /* the new mark's own box (the old Questum-sized box left ~32px of air above and below it) */
/* Curtain spacing for the cube mark: "For" sits about a quarter of the mark's height above it, the signature about
   0.4 of it below (the mark still grows 10% while the name is written) */
.q-curtain .qc-brand { gap: 22px; }
.q-curtain .qc-inner { gap: 36px; }
@media (max-width: 639px) { .q-curtain .qc-brand { gap: 12px; } .q-curtain .qc-inner { gap: 22px; } }

/* Type: Instrument Sans Medium for display, sentence case, the site's ~1.17 display leading; Inter for body in the site's grey */
body { font-family: var(--font); }
.hero-title, .title-64, .title-48, .rotate-line, .creds b, .section-label, .dt-film__head, .dt-film__line, .segmented button { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; }   /* Medium: bolder headlines (owner, 14 Oct) */
.hero-title { letter-spacing: 0; }
@media (min-width: 640px) {
  .hero-title { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.12; }
  .animated-title.title-64, .animated-title.title-48{ line-height: 1.14; }
  .text-20, .hero-lead, .proof { line-height: 1.5; }
}
@media (max-width: 639px) { .hero-title { font-size: 36px; line-height: 42px; } }
.text-20, .hero-lead, .proof, .creds span{ color: #595959; }
.bg-black .text-20, .bg-black .creds span { color: var(--white-60); }
.section-label { font-size: 16px; line-height: 1.3; color: #595959; }
.bg-black .section-label { color: var(--white-60); }
.dt-film__sub { color: #595959; }
.dt-film__claim { font-weight: 600; }   /* the one heavier moment: SemiBold */

/* The native Desktronic action, unmixed: near-black, 8px corners, 18px display font, a fill change on hover (all .3s).
   On the dark close: the light action. No arrows, shine, lift or press shrink. */
.hero-cta.btn, .final .btn-cta.btn, .btn:focus-visible { border-radius: 8px; }
.dt-cta { min-height: 56px; padding: 0 32px; gap: 10px; border: 0; border-radius: 8px; background: #19191C; color: #FFFFFF;
  font: 500 18px/1.33 var(--font-display); transition: all .3s; }
.dt-cta .btn-icon, .dt-cta--shine::before { display: none; }
.hero-cta:focus-visible .dt-cta, .final .btn-cta:focus-visible .dt-cta, .btn:active .dt-cta { background: #3A3D42; color: #FFFFFF; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover .dt-cta, .final .btn-cta:hover .dt-cta { background: #3A3D42; color: #FFFFFF; transform: none; }
  .final .btn-cta:hover .dt-cta { background: var(--dt-cream); color: #19191C; }
}
.final .dt-cta { min-height: 56px; padding: 0 32px; font-size: 18px; background: #FFFFFF; color: #19191C; }
.final .btn-cta:focus-visible .dt-cta, .final .btn-cta:active .dt-cta { background: var(--dt-cream); color: #19191C; }
@media (max-width: 799px) { .hero-cta .dt-cta { min-height: 48px; padding: 0 24px; font-size: 16px; line-height: 1.3125; } }
@media (max-width: 639px) { .final .dt-cta { min-height: 56px; padding: 0 32px; font-size: 18px; } }

/* the closing link stays centred on the 56px action (its margin was set for the 62px pill) */
/* (the "More of my work" link once sat 1px up to centre on the action; it is now a button of the same height) */
/* the old shine clip was a pill; the native action is an 8px box */
.dt-cta--shine { clip-path: inset(0 round 8px); }

/* Media corners: the site's 24px panels */
.variant-stage .frame { border-radius: 24px; }

/* Section 2 as a studio set: a very light beige sweep behind the transparent 3D canvas (the ad's look, toned down) */
.dt-film__stage { background: radial-gradient(120% 95% at 50% 46%, #F8F3ED 0%, #F2EAE1 58%, #EAE0D5 100%); }

/* ================= Phones only: mobile refinement (2026-10-15, qa/MOBILE AUDIT 2026-10-15.md) =================
   Scoped to max-width 639px, so desktop and tablets are untouched. Rollback: ROLLBACK/2026-10-15-before-mobile-fixes. */
@media (max-width: 639px) {
  /* 1. Section 2's pinned stage fills the LARGE viewport (the screen with Safari's toolbars collapsed), like section 3
        and the ad ring already do; its bottom lines lift by the toolbar's height so they never sit under it. */
  .dt-film__stage { height: 100lvh; }
  .dt-film__line { bottom: calc(120px + 100lvh - 100svh + env(safe-area-inset-bottom, 0px)); }
  .dt-film__line--phone-top { bottom: auto; }   /* the controls and rear-view lines stay anchored at the top */
  /* 2. Safari 26 tints its bars from the pinned layer at each edge: pinned layers carry their section's colour, so a
        see-through one never lets the 3D backdrop beneath decide the bar colour. */
  .reveal-screen { background: #FFFFFF; }   /* (.af-sticky stays see-through, as on desktop: a white one wiped over the held subhead as the ads rose; the page base under it is white anyway, rule 3) */
  /* 3. One edge colour for every phone browser. The page's base (html + body) is what Safari 26 paints its bars with
        when no pinned layer touches an edge, and what every browser shows when you pull past either end; theme-color
        tints Chrome / Samsung's address bar on Android. pitch.js switches them together: white through the page,
        the close's black once the close arrives (.edge-dark), so the bars, the strip under Safari's glass bar and
        the overscroll never disagree with the screen. */
  html, body { background: #FFFFFF; }
  html.edge-dark, html.edge-dark body { background: #19191C; }
  /* 4. Type: Apple's iPhone-page steps. Section headlines 40 → 32, the film's sizes a step down, the headline → copy gap
        tightened so the pair reads as one block. */
  :root { --t-h2: 32px; --t-h2-lh: 36px; }
  .dt-film__head { font-size: 30px; line-height: 34px; }
  .dt-film__line { font-size: 24px; line-height: 28px; }
  .dt-film__claim { font-size: 40px; line-height: 44px; }
  .head .text-20, .team-copy, .team-head--centre .team-copy { margin-top: 20px; }
  /* at 32px "What could come next" fits one line: keep the authored break (hiding it joined "next" and "for") */
  .final h2 br { display: inline; }
  /* 5. Section 4 (mobile pass 2): the cards' shadow is shorter (it reached ~42 px and lay on the pill) and the pill sits
        32 px under the cards instead of ~20. */
  .variant-stage .frame { box-shadow: 0 1px 2px rgba(25,25,28,.05), 0 10px 24px -14px rgba(25,25,28,.24); }
  .variant-stage { margin-bottom: -16px; }
  /* 6. The close, shorter (1151 → ~976 px): a portrait card instead of a full-width poster, the subhead a step down. */
  .final { padding-top: 72px; }
  .final .subhead { font-size: 15px; line-height: 22px; margin-top: 24px; }
  .final .maker { width: 100%; }
  .final .maker .photo { width: 260px; margin-inline: auto; }
}