/* ================================================================
   TOM — PERSONAL PORTFOLIO V3 / APPROVED STUDIO HERO
   Independent from TOM production. All controls remain real HTML.
   Cutout from user's original photograph; face and clothing unchanged.
   ================================================================ */
:root { --v3-stone:#d5cfca; --v3-ink:#1a1918; }
.site-header{background:#e5e0dc;color:#191818;border-color:rgba(30,26,24,.14)}
.site-header .nav-subtitle{color:#68605b}
.site-header .nav-subtitle strong{color:#24211e}
.site-header .desktop-nav a span{color:#8d847c}
.site-header .nav-contact{border-color:#26231f}
.site-header .nav-contact:hover{background:#171513;color:#fff}
.site-header .menu-toggle span{background:#171513}
.hero{color:var(--v3-ink);min-height:max(780px,calc(100svh - 88px));padding-top:30px;
  background:linear-gradient(90deg,rgba(237,232,228,.30),rgba(215,208,202,.12)),url('assets/studio-backdrop.webp') center center/cover no-repeat}
/* The cinematic film remains subtly visible as ambient light, not footage pasted on a photo */
.hero-motion{z-index:0;inset:0}
.hero-motion-video{left:-14%;top:-14%;width:128%;height:128%;filter:grayscale(1) blur(24px) contrast(1.22) brightness(1.13);mix-blend-mode:multiply;opacity:.36}
.hero-motion::after{background:linear-gradient(90deg,rgba(232,227,222,.16),rgba(232,227,222,.07)),linear-gradient(0deg,rgba(211,205,199,.40),transparent 23%,transparent 80%,rgba(235,231,226,.30))}
.hero::after{z-index:1;inset:0;opacity:.08;background-image:url('assets/studio-backdrop.webp');background-size:cover;pointer-events:none}
.hero-orbit{border-color:rgba(40,36,32,.13);z-index:1;width:59vw;height:59vw;left:46%;top:1%;}
.hero-orbit::after{border-color:rgba(40,36,32,.065)}
.hero-topline,.hero-grid,.hero-bottom{z-index:3;position:relative}
.hero-topline,.hero-topline .eyebrow,.hero-topline .edition{color:#423b35}
.hero-grid{min-height:clamp(650px,calc(100svh - 205px),860px);padding-top:clamp(56px,9.7vh,107px);padding-bottom:65px}
.hero-copy{position:relative;z-index:5}
.hero-prelude{color:#48413c;letter-spacing:.31em;margin-bottom:31px}
.hero h1{color:#171615;font-size:clamp(67px,7.15vw,126px);font-weight:650;line-height:.985;letter-spacing:-.073em;position:relative;z-index:3}
.hero h1 em{color:#211f1d}
.hero-intro{color:#393531;max-width:420px;font-size:clamp(14px,1.08vw,17px);line-height:1.8;margin:37px 0 32px}
.hero .primary-action{background:transparent;color:#171615;border-color:#181715}
.hero .primary-action:hover{background:#1c1b19;color:#fff}
.hero .text-action{color:#201e1b;border-color:#5b534c}
.hero .text-action:hover{color:#b9443b;border-color:#b9443b}
.hero-portrait{position:absolute;pointer-events:none;z-index:2;right:3.0%;bottom:-13px;width:clamp(470px,38vw,640px);height:clamp(640px,54vw,805px);margin:0;opacity:1}
.hero-portrait .portrait-frame{position:relative;inset:0;width:100%;height:100%;overflow:visible;background:transparent}
.hero-portrait .portrait-frame::after{display:none}
.hero-portrait .portrait-frame img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none;mix-blend-mode:normal;-webkit-mask-image:none!important;mask-image:none!important}
.portrait-contact-shadow{position:absolute;z-index:1;left:4%;right:0;bottom:13px;height:23%;background:radial-gradient(ellipse at 56% 68%,rgba(46,40,37,.33),rgba(64,56,51,.13) 37%,transparent 74%);filter:blur(23px);transform:scaleX(1.3);pointer-events:none}
.hero-portrait figcaption{position:absolute;right:4px;bottom:5px;z-index:4;font-size:8px;font-weight:700;letter-spacing:.14em;color:#655f58;gap:30px}
.hero-bottom{color:#4c453d;border-color:rgba(48,41,35,.23)}
.hero-bottom a:hover{color:#171514}.hero-bottom .scroll-arrow{border-color:#766c63;color:#352e28}
@media(min-width:1600px){.hero h1{font-size:clamp(97px,7.35vw,145px)}.hero-portrait{width:min(41vw,690px);height:min(81vh,850px);right:4%}.hero-grid{min-height:clamp(690px,calc(100svh - 190px),910px);padding-top:clamp(72px,9vh,125px)}}
@media(max-width:1200px){.hero h1{font-size:clamp(65px,7.2vw,95px)}.hero-grid{min-height:715px;padding-top:105px}.hero-portrait{right:-2%;height:680px;width:440px;bottom:3px}}
@media(max-width:900px){.hero{min-height:760px}.hero-grid{min-height:680px;padding-top:125px}.hero h1{font-size:clamp(57px,8.1vw,78px)}.hero-portrait{width:390px;height:655px;right:-10%;bottom:0;opacity:1}.hero-motion-video{opacity:.29}}
@media(max-width:720px){
  .site-header{background:#e4dfdb}.mobile-nav{background:#e5dfdb;color:#171514}.mobile-nav a{border-color:rgba(26,20,16,.18)}
  .hero{min-height:auto;padding-top:22px;background-position:58% top}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-top:67px;padding-bottom:0}
  .hero-copy{order:0;z-index:5}
  .hero h1{font-size:clamp(52px,11vw,79px);line-height:1.01;letter-spacing:-.075em;white-space:normal}
  .hero h1 .line-last{white-space:normal}
  .hero-intro{font-size:14px;margin:29px 0 26px;max-width:375px}
  .hero-prelude{font-size:9px;letter-spacing:.2em;margin-bottom:25px}
  .hero-actions{gap:16px;max-width:none}
  .hero-portrait{position:relative;order:1;align-self:flex-end;margin:0 -5vw -15px 0;right:auto;bottom:auto;opacity:1;width:min(92vw,470px);height:clamp(480px,116vw,670px)}
  .hero-portrait .portrait-frame img{object-fit:contain;-webkit-mask-image:none!important;mask-image:none!important}
  .hero-portrait figcaption{bottom:16px;right:10px;font-size:7px}
  .portrait-contact-shadow{bottom:19px;filter:blur(16px)}
  .hero-bottom{height:66px}.hero-motion-video{opacity:.26}
  .hero-orbit{width:115vw;height:115vw;left:32%;top:37%}
}
@media(max-width:420px){
  .hero h1{font-size:clamp(47px,12.0vw,60px)}
  .hero-actions{gap:12px}.hero .primary-action{padding:17px 15px;gap:18px;font-size:9px}
  .hero-portrait{height:clamp(440px,119vw,535px);width:96vw;margin-right:-7vw}
  .hero-portrait figcaption span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-motion-video{display:none}}
