/*
  philsalt.com  |  Phil Salt, Character Actor
  ------------------------------------------------
  Everything here is plain CSS. No build step, no framework.
  Colours and fonts are defined as variables at the top so
  they can be swapped in one place and the whole site follows.

  The file runs top to bottom in the order the page reads:
  variables, reset, layout, header, hero, pitch, reels,
  spotlight, stats, training, contact, footer, skills page,
  and mobile rules at the bottom.
*/

/* 1. VARIABLES ---------------------------------------------- */
:root{
  /* WARM PASTEL PALETTE
     If you want the background a touch warmer/cooler, adjust --bg
     (--bg-panel should be about 8% darker, --bg-card about 5% lighter) */
  --bg:         #EDE7D9;   /* warm bone cream */
  --bg-panel:   #E3DCCB;   /* deeper cream, used for range/training */
  --bg-card:    #F5F0E4;   /* elevated card colour, lighter than bg */
  --ink:        #1A1A2E;   /* primary text */
  --ink-soft:   #45455A;
  --ink-mute:   #7E7B6E;
  --line:       #C8C2B1;
  --gold:       #B8860B;   /* accent */
  --gold-soft:  #D4A843;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --radius: 3px;
  --shadow-card: 0 2px 16px rgba(26,26,46,.06), 0 8px 40px rgba(26,26,46,.04);

  --container: 960px;
}

/* 2. RESET + BASE ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-decoration:none;transition:color .15s,opacity .15s}
a:hover{color:var(--ink)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--ink)}
ul{list-style:none}

/* 3. LAYOUT ------------------------------------------------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
section{padding:80px 0}
.rule{height:1px;background:var(--line);max-width:var(--container);margin:0 auto}
.kicker{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.section-title{
  font-size:clamp(28px,3.2vw,38px);letter-spacing:-.01em;margin-bottom:20px;
}

/* 4. HEADER ------------------------------------------------- */
header.site{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
}
header.site .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:18px;padding-bottom:18px;
}
.brand{
  font-family:var(--serif);font-size:24px;font-weight:500;
  letter-spacing:-.005em;color:var(--ink);
  display:inline-flex;align-items:baseline;gap:14px;
}
.brand::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--gold);align-self:center;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(184,134,11,.12);
}
.brand .brand-name{display:inline-block}
.brand em{
  font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;
  color:var(--gold);margin-left:2px;letter-spacing:.22em;text-transform:uppercase;
  border-left:1px solid var(--line);padding-left:14px;
}

/* Hamburger button, hidden on desktop, shown on mobile */
.hamburger{
  display:none;background:transparent;border:1px solid var(--line);
  width:42px;height:42px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  transition:border-color .2s;
}
.hamburger:hover,.hamburger[aria-expanded="true"]{border-color:var(--gold)}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav{display:flex;gap:28px;align-items:center;font-size:14px;letter-spacing:.04em}
.nav a{color:var(--ink-soft);font-weight:500}
.nav a:hover{color:var(--gold)}
.nav .btn{
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--radius);
  font-size:13px;letter-spacing:.08em;font-weight:500;
}
.nav .btn:hover{background:var(--gold);color:var(--bg)}

/* 5. HERO --------------------------------------------------- */
.hero{
  padding:70px 0 50px;text-align:center;
}
.hero-kicker{
  font-family:var(--sans);font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:24px;
  display:inline-flex;align-items:center;gap:14px;
}
.hero-kicker::before,.hero-kicker::after{
  content:"";display:block;width:32px;height:1px;background:var(--gold);
}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(56px,10vw,128px);line-height:.95;letter-spacing:-.025em;
  color:var(--ink);margin:0 auto 40px;max-width:15ch;
}
.hero-headshot{
  width:min(520px,92%);margin:0 auto 30px;
  aspect-ratio:4/5;overflow:hidden;border-radius:2px;
  box-shadow:var(--shadow-card);
  background:var(--ink);
}
.hero-headshot img{width:100%;height:100%;object-fit:cover}
.hero-rep{
  font-family:var(--sans);font-size:14px;letter-spacing:.02em;
  color:var(--ink-soft);margin:0 auto;max-width:580px;
}
.hero-rep a{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:1px;transition:color .2s}
.hero-rep a:hover{color:var(--gold)}

/* 6. PITCH -------------------------------------------------- */
.pitch{text-align:center;padding:30px 0 70px}
.pitch blockquote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.2vw,27px);line-height:1.5;
  max-width:780px;margin:0 auto;color:var(--ink);letter-spacing:-.005em;
}
.pitch blockquote::before{
  content:""; display:block;width:38px;height:2px;background:var(--gold);margin:0 auto 30px;
}

/* Availability callout, the sentence that makes Phil bookable right now */
.availability{
  margin:40px auto 0;display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.availability .av-label{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}
.availability .av-line{
  font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--ink);letter-spacing:-.005em;
}
.availability .av-line em{font-style:italic;color:var(--ink-soft)}
/* Additional-skills line lives in the footer now, not the pitch */
.foot-meta{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;flex:1}
.foot-skills{font-size:12px;color:rgba(245,245,245,.6);max-width:54ch;line-height:1.55;letter-spacing:.01em}
.foot-skills a{color:var(--gold-soft);border-bottom:1px dotted var(--gold-soft);padding-bottom:1px}
.foot-skills a:hover{color:var(--bg);border-color:var(--bg)}

/* 8. REELS -------------------------------------------------- */
.reel{padding:80px 0}
.reel + .reel{padding-top:0}

/* Additional reel, a proper preview card, visible but secondary */
.reel-extra{padding:10px 0 80px}
.extra-reel{
  max-width:640px;margin:0 auto;
  border:1px solid var(--line);background:var(--bg-card);
  box-shadow:0 1px 10px rgba(26,26,46,.04);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.extra-reel:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 22px rgba(26,26,46,.08)}
.extra-reel summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:18px;padding:14px 18px 14px 14px;
}
.extra-reel summary::-webkit-details-marker{display:none}
.extra-reel summary .thumb{
  position:relative;width:120px;aspect-ratio:16/9;flex-shrink:0;overflow:hidden;border-radius:2px;background:#000;
}
.extra-reel summary .thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.extra-reel summary .thumb .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.extra-reel summary .thumb .play::after{
  content:"";display:block;width:0;height:0;margin-left:3px;
  border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.extra-reel:hover summary .thumb .play{background:var(--gold);transform:translate(-50%,-50%) scale(1.08)}
.extra-reel summary .text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.extra-reel summary .kicker{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:2px;
}
.extra-reel summary .label{
  font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-.005em;
}
.extra-reel summary .meta{font-family:var(--sans);font-size:13px;color:var(--ink-mute);font-style:italic}
.extra-reel summary .chev{
  width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s ease;flex-shrink:0;
}
.extra-reel[open] summary .chev{transform:rotate(-135deg)}
.extra-reel .video-frame{margin:0;border-top:1px solid var(--line)}
.extra-reel .video-frame video{border-radius:0}
.reel-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:30px;flex-wrap:wrap}
.reel-head h2{font-size:clamp(28px,3.4vw,40px)}
.reel-head .meta{font-family:var(--sans);font-size:13px;color:var(--ink-mute);letter-spacing:.04em;text-align:right}
.reel-head .meta b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}

.video-frame{
  width:100%;aspect-ratio:16/9;background:#000;
  border-radius:3px;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block}

.reel-note{
  margin-top:14px;font-size:13px;color:var(--ink-mute);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

.voice-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:center}
.voice-player{background:var(--bg-card);padding:30px;border-radius:3px;box-shadow:var(--shadow-card)}
.voice-player audio{width:100%;margin-top:14px}
.voice-player h3{font-size:26px;margin-bottom:4px}
.voice-player p{color:var(--ink-soft);font-size:15px;margin-bottom:18px}
.voice-image{aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--ink)}
.voice-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}

/* 9. SPOTLIGHT --------------------------------------------- */
.spotlight{
  padding:70px 0;text-align:center;
  background:var(--ink);color:var(--bg);
  position:relative;overflow:hidden;
}
.spotlight .kicker{color:var(--gold-soft)}
.spotlight h2{color:var(--bg);font-size:clamp(28px,3.2vw,38px);margin-bottom:14px}
.spotlight p{max-width:540px;margin:0 auto 28px;color:rgba(245,245,245,.75);font-size:16px}
.spotlight .btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--ink);
  padding:16px 30px;border-radius:3px;
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s,transform .2s;
}
.spotlight .btn-primary:hover{background:#fff;transform:translateY(-1px)}
.spotlight .btn-primary .arrow{width:16px;height:1px;background:currentColor;position:relative}
.spotlight .btn-primary .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.spotlight .pending{font-size:11px;color:rgba(245,245,245,.55);letter-spacing:.2em;text-transform:uppercase;margin-top:16px}

/* 10. STATS -------------------------------------------------- */
.stats{padding:80px 0;background:var(--bg)}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  background:var(--bg-card);border-radius:3px;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.stats-grid dt,.stats-grid dd{padding:22px 28px;border-bottom:1px solid var(--line)}
.stats-grid dt{
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600;
  background:var(--bg-panel);
}
.stats-grid dd{font-size:16px;color:var(--ink)}
.stats-grid dd b{font-weight:500}
.stats-grid > *:nth-last-child(-n+2){border-bottom:0}
.char-list{display:flex;flex-wrap:wrap;gap:8px}
.char-list span{
  font-size:13px;padding:5px 12px;border:1px solid var(--line);
  border-radius:100px;color:var(--ink-soft);letter-spacing:.02em;
}

/* CREDITS ·  Styles are ready whenever the section in index.html
   is uncommented. Follows the standard Spotlight layout (medium,
   project, role, director/CD, production/venue). */
.credits{padding:80px 0;background:var(--bg)}
.credits-head{text-align:center;margin-bottom:50px}
.credits-head h2{font-size:clamp(28px,3.4vw,40px);margin-top:6px}
.credits h3{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:36px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.credits h3:first-of-type{margin-top:0}
.credits-list{max-width:800px;margin:0 auto;padding:0}
.credits-list li{
  display:grid;grid-template-columns:2fr 1.2fr 1.4fr 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);
  align-items:baseline;
}
.credits-list .c-title{font-family:var(--serif);font-size:17px;font-weight:500}
.credits-list .c-role{color:var(--ink-soft);font-style:italic}
.credits-list .c-extra{color:var(--ink-mute);font-size:13px;letter-spacing:.01em}
.credits-list .c-co{color:var(--ink-mute);font-size:13px;text-align:right;letter-spacing:.02em}
@media (max-width:760px){
  .credits-list li{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .credits-list .c-co{text-align:left}
}

/* 11. TRAINING --------------------------------------------- */
.training{padding:90px 0;background:var(--bg-panel)}
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.training-img{aspect-ratio:4/3;overflow:hidden;border-radius:3px;box-shadow:var(--shadow-card)}
.training-img img{width:100%;height:100%;object-fit:cover}
.training h2{font-size:clamp(28px,3.4vw,38px);margin-bottom:18px}
.training p{color:var(--ink-soft);margin-bottom:14px;max-width:48ch}
.training .oscar{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bg-card);border:1px solid var(--line);
  padding:10px 16px;border-radius:100px;
  font-size:13px;color:var(--ink);margin-top:12px;letter-spacing:.04em;
}
.training .oscar b{color:var(--gold);font-weight:600}
.training-link{display:inline-block;margin-top:18px;font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* 12. CONTACT --------------------------------------------- */
.contact{padding:100px 0}
.contact-head{text-align:center;margin-bottom:50px}
.contact-head h2{font-size:clamp(32px,4vw,46px);margin-bottom:10px}
.contact-head p{color:var(--ink-soft);max-width:560px;margin:0 auto}

.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
.contact-card{
  background:var(--bg-card);border-radius:3px;padding:38px 36px;
  box-shadow:var(--shadow-card);
}
.contact-card.primary{border-top:3px solid var(--gold)}
.contact-card .tag{
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:12px;
}
.contact-card.secondary .tag{color:var(--ink-mute)}
.contact-card h3{font-size:24px;margin-bottom:20px;letter-spacing:-.005em}
.contact-card .detail{
  display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:15px;
}
.contact-card .detail:last-child{border-bottom:0}
.contact-card .detail b{
  min-width:62px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600;padding-top:4px;
}
.contact-card .detail a,.contact-card .detail span{color:var(--ink);font-weight:500;word-break:break-word}
.contact-card .detail a:hover{color:var(--gold)}
.contact-card .note{margin-top:20px;font-size:13px;color:var(--ink-mute);font-style:italic;line-height:1.55}

/* 13. FOOTER ----------------------------------------------- */
footer.site{
  padding:50px 0 40px;
  background:var(--ink);color:rgba(245,245,245,.75);
  font-size:13px;
}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer.site .brand{color:var(--bg);font-size:17px;gap:10px}
footer.site .brand::before{background:var(--gold-soft);box-shadow:0 0 0 3px rgba(212,168,67,.15)}
footer.site .brand em{color:rgba(245,245,245,.55);font-size:10px;border-color:rgba(245,245,245,.2)}
footer.site a{color:var(--gold-soft)}
footer.site a:hover{color:var(--bg)}
footer.site .legal{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,245,.45)}

/* 14. SKILLS PAGE ------------------------------------------ */
.skills-hero{
  padding:110px 0 70px;text-align:center;position:relative;
  /* Gradient uses the --bg colour rgb values so the fade matches the page background.
     If --bg changes, update these rgba values to match (rgb of the new colour). */
  background-image:linear-gradient(180deg,rgba(237,231,217,.25),rgba(237,231,217,.96)),url('../images/skills-hero.jpg');
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--line);
}
.skills-hero h1{font-size:clamp(40px,5.5vw,64px);margin-bottom:12px;letter-spacing:-.015em}
.skills-hero p{max-width:640px;margin:0 auto;color:var(--ink-soft);font-size:17px}

.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:70px 0}
.skill-card{
  background:var(--bg-card);border-radius:3px;padding:38px 36px;
  box-shadow:var(--shadow-card);border-top:3px solid var(--gold);
  display:flex;flex-direction:column;gap:12px;
}
.skill-card .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.skill-card h3{font-size:26px;letter-spacing:-.005em;margin:0}
.skill-card .lead{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:17px;margin-bottom:6px}
.skill-card p{color:var(--ink-soft);font-size:15px;line-height:1.65}
.skill-card ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.skill-card li{
  font-size:13px;padding:5px 12px;border:1px solid var(--line);
  border-radius:100px;color:var(--ink-soft);
}

.back-to-home{text-align:center;padding:30px 0 100px}
.back-to-home a{
  font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:4px;
}

/* 15. MOBILE ----------------------------------------------- */

/* Prevent horizontal scroll on small screens. Lives on body, not html,
   because putting it on html breaks vertical scroll in mobile Safari. */
body{overflow-x:hidden}

@media (max-width:760px){
  body{font-size:16px;line-height:1.6}
  .wrap{padding:0 20px}
  section{padding:56px 0}

  /* Header shrinks on scroll, stacked brand, hamburger menu */
  header.site{transition:padding .2s ease;position:relative}
  header.site .wrap{padding-top:12px;padding-bottom:12px;transition:padding .2s ease}
  header.site.compact .wrap{padding-top:9px;padding-bottom:9px}

  /* Brand stacks vertically: "Phil Salt" over "CHARACTER ACTOR" with the dot
     running tall alongside both rows. CSS grid handles this cleanly. */
  .brand{
    display:grid;grid-template-columns:auto 1fr;column-gap:10px;gap:0 10px;
    font-size:20px;align-items:center;
  }
  .brand::before{width:7px;height:7px;grid-row:1 / span 2;align-self:center}
  .brand .brand-name{grid-column:2;line-height:1.05}
  .brand em{
    grid-column:2;display:block;font-size:9px;letter-spacing:.22em;
    padding-left:0;border-left:0;margin-left:0;margin-top:3px;line-height:1;
  }

  /* Hamburger visible on mobile */
  .hamburger{display:inline-flex;margin-left:auto}

  /* Inline nav becomes a dropdown panel, hidden by default */
  .nav{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;gap:0;
    background:var(--bg-card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:6px 20px 14px;box-shadow:0 12px 30px -10px rgba(26,26,46,.18);
    font-size:15px;
  }
  .nav.open{display:flex}
  .nav .skills-link{
    display:block;padding:16px 4px;border-bottom:1px solid var(--line);
    font-weight:500;color:var(--ink);letter-spacing:.01em;
  }
  .nav .skills-link:hover{color:var(--gold)}
  .nav .btn{
    margin-top:14px;padding:14px 18px;font-size:13px;letter-spacing:.1em;
    min-height:46px;text-align:center;
  }

  /* Hero */
  .hero{padding:24px 0 30px}
  .hero-kicker{font-size:10px;letter-spacing:.24em;gap:10px;margin-bottom:18px}
  .hero-kicker::before,.hero-kicker::after{width:18px}
  .hero h1{font-size:clamp(52px,14vw,84px);margin:0 auto 26px}
  .hero-headshot{width:100%;margin-bottom:24px;border-radius:2px}
  .hero-rep{font-size:13px;padding:0 4px;line-height:1.6}

  /* Pitch + availability */
  .pitch{padding:20px 0 40px}
  .pitch blockquote{font-size:18px;line-height:1.5;padding:0 4px}
  .pitch blockquote::before{width:30px;margin-bottom:22px}
  .availability{margin-top:30px;padding:16px 22px;gap:6px;width:calc(100% - 8px)}
  .availability .av-label{font-size:9px;letter-spacing:.28em}
  .availability .av-line{font-size:17px;line-height:1.35}

  /* Primary reel */
  .reel{padding:50px 0}
  .reel-head{flex-direction:column;align-items:flex-start;margin-bottom:18px;gap:6px}
  .reel-head h2{font-size:clamp(26px,6vw,32px)}
  .reel-head .meta{text-align:left;font-size:12px}
  .reel-note{font-size:12px;gap:10px}
  .video-frame{aspect-ratio:16/9}

  /* Additional reel preview card */
  .reel-extra{padding:0 20px 50px}
  .extra-reel summary{gap:12px;padding:10px 12px 10px 10px;min-height:72px}
  .extra-reel summary .thumb{width:92px;border-radius:2px}
  .extra-reel summary .thumb .play{width:26px;height:26px}
  .extra-reel summary .thumb .play::after{border-left-width:7px;border-top-width:5px;border-bottom-width:5px}
  .extra-reel summary .kicker{font-size:9px;letter-spacing:.22em}
  .extra-reel summary .label{font-size:16px;line-height:1.25}
  .extra-reel summary .meta{font-size:12px}
  .extra-reel summary .chev{display:none}

  /* Voice reel */
  .voice-grid{grid-template-columns:1fr;gap:22px}
  .voice-image{aspect-ratio:3/2;max-height:240px;order:-1}
  .voice-player{padding:24px}
  .voice-player h3{font-size:22px}
  .voice-player audio{width:100%;height:42px}

  /* Spotlight dark CTA block */
  .spotlight{padding:56px 0}
  .spotlight h2{font-size:clamp(24px,6vw,30px)}
  .spotlight .btn-primary{padding:16px 26px;font-size:12px;min-height:48px;width:calc(100% - 44px);justify-content:center}
  .spotlight .pending{font-size:10px;letter-spacing:.18em}

  /* Stats */
  .stats{padding:50px 0}
  .stats-grid{grid-template-columns:1fr}
  .stats-grid dt,.stats-grid dd{padding:14px 22px}
  .stats-grid dt{border-bottom:0;padding-bottom:4px;background:transparent;font-size:10px;letter-spacing:.24em}
  .stats-grid dd{padding-top:4px;font-size:15px}
  .char-list{gap:6px}
  .char-list span{font-size:12px;padding:4px 10px}

  /* Training */
  .training{padding:60px 0}
  .training-grid{grid-template-columns:1fr;gap:28px}
  .training-img{aspect-ratio:3/2;max-height:260px;order:-1}
  .training h2{font-size:clamp(26px,6vw,34px)}
  .training p{font-size:15px}
  .training .oscar{padding:10px 14px;font-size:12px;line-height:1.4}

  /* Contact cards, tap-friendly phone and email rows */
  .contact{padding:70px 0}
  .contact-head h2{font-size:clamp(30px,7.5vw,40px)}
  .contact-grid{grid-template-columns:1fr;gap:18px}
  .contact-card{padding:28px 24px}
  .contact-card h3{font-size:22px;margin-bottom:18px}
  .contact-card .detail{padding:14px 0;gap:14px;min-height:44px}
  .contact-card .detail b{min-width:52px;font-size:10px;letter-spacing:.22em}
  .contact-card .detail a{font-size:15px;display:inline-block;padding:2px 0}

  /* Footer */
  footer.site{padding:40px 0 30px;text-align:center}
  footer.site .wrap{justify-content:center;flex-direction:column;gap:16px}
  footer.site .brand{font-size:19px;justify-content:center}
  .foot-meta{gap:10px}
  .foot-skills{font-size:12px;line-height:1.5}
  footer.site .legal{font-size:10px;letter-spacing:.18em}

  /* Skills page */
  .skills-hero{padding:110px 0 50px}
  .skills-hero h1{font-size:clamp(34px,8vw,44px)}
  .skills-hero p{font-size:16px}
  .skills-grid{grid-template-columns:1fr;gap:16px;padding:40px 0}
  .skill-card{padding:28px 24px}
  .skill-card h3{font-size:23px}
  .skill-card .lead{font-size:16px}
}

/* Small phones */
@media (max-width:420px){
  .wrap{padding:0 18px}
  .brand{font-size:18px;column-gap:9px}
  .brand em{font-size:8.5px;letter-spacing:.2em}

  .hero{padding:20px 0 26px}
  .hero-kicker{font-size:9px;letter-spacing:.2em;gap:8px;margin-bottom:16px}
  .hero-kicker::before,.hero-kicker::after{width:14px}
  .hero h1{font-size:48px;margin-bottom:22px}

  .pitch blockquote{font-size:17px}
  .availability{padding:14px 18px}
  .availability .av-line{font-size:16px}

  .extra-reel summary{padding:10px 10px 10px 8px;gap:10px}
  .extra-reel summary .thumb{width:80px}
  .extra-reel summary .label{font-size:15px}

  .stats-grid dd{font-size:14px}
}

/* Touch devices, disable hover-lift so nothing feels stuck after a tap */
@media (hover:none){
  .extra-reel:hover{transform:none;box-shadow:0 1px 10px rgba(26,26,46,.04)}
  .extra-reel:hover summary .thumb .play{background:rgba(255,255,255,.9);transform:translate(-50%,-50%) scale(1)}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}