/* Stoski Films — production polish layer v3
   Keeps the approved visual direction while improving perceived image quality,
   hierarchy, responsiveness, accessibility and conversion. */

:root{
  --gold:#c9a86a;
  --gold-soft:#f0d6a0;
  --ink:#090909;
  --ivory:#f5f1e9;
}

html{scroll-padding-top:86px}
body{background:#080808}
main>section:not(.hero){content-visibility:auto;contain-intrinsic-size:900px}

/* Global focus + text rendering */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:4px;
}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Header + brand */
.site-header{
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  box-shadow:0 14px 50px rgba(0,0,0,.28);
}
.brand-full{display:flex;align-items:center;min-width:0}.brand-logo{display:block;width:clamp(158px,15vw,205px);height:auto;filter:drop-shadow(0 8px 22px rgba(201,168,106,.14));transition:transform .35s var(--ease),filter .35s ease}.brand-full:hover .brand-logo{transform:translateY(-1px) scale(1.012);filter:drop-shadow(0 10px 28px rgba(201,168,106,.25))}

/* Cinematic hero.
   The current source image is intentionally treated like a film frame instead
   of being sharpened artificially beyond its real detail. */
.hero{
  min-height:100svh;
  background-position:center 42%;
  background-color:#080808;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 34%,rgba(240,214,160,.10),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 46%,rgba(0,0,0,.10)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;
}
.hero::after{
  background:
    linear-gradient(90deg,rgba(4,4,4,.86) 0%,rgba(4,4,4,.58) 36%,rgba(4,4,4,.16) 70%,rgba(4,4,4,.42) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,transparent 44%,rgba(0,0,0,.74) 100%);
}
.hero-content{
  width:min(920px,100%);
  padding-bottom:8px;
}
.hero h1{
  text-shadow:0 12px 48px rgba(0,0,0,.48);
}
.hero h1 em{
  text-shadow:0 10px 36px rgba(93,61,24,.18);
}
.hero-text{max-width:610px}
.hero-proof{
  display:flex;
  align-items:center;
  gap:10px 14px;
  flex-wrap:wrap;
  margin-top:26px;
  color:#d0cbc3;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.hero-proof span{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.hero-proof span::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,168,106,.08);
}
.hero-actions .btn{
  min-height:50px;
}
.btn-primary{
  box-shadow:0 12px 34px rgba(0,0,0,.20);
}
.btn-primary:hover{box-shadow:0 16px 44px rgba(0,0,0,.28)}

/* Portfolio */
.work-grid{gap:16px}
.work-card{
  border-color:rgba(255,255,255,.10);
  background:#0d0d0d;
  box-shadow:0 18px 55px rgba(0,0,0,.16);
}
.media-placeholder .work-image{
  image-rendering:auto;
  filter:saturate(.90) contrast(1.055) brightness(.96);
  backface-visibility:hidden;
}
.media-placeholder::before{
  background:
    linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.20) 54%,rgba(0,0,0,.04) 100%);
}
.media-placeholder::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 50% 45%,transparent 40%,rgba(0,0,0,.28) 100%);
  opacity:.7;
}
.work-card .media-placeholder>span{
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
}
.work-meta{
  display:grid;
  align-content:end;
}
.work-meta p{color:#e1d5bd}
.work-open{
  width:max-content;
  border-bottom:1px solid rgba(224,197,143,.34);
  padding-bottom:4px;
}
.work-card::after{
  content:"▶";
  position:absolute;
  top:24px;
  left:24px;
  z-index:4;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(8,8,8,.50);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  color:#f4e4c4;
  font-size:12px;
  padding-left:2px;
  opacity:.82;
  transition:transform .28s var(--ease),background .28s ease,opacity .28s ease;
}
.work-card:hover::after,
.work-card:focus::after{
  transform:scale(1.08);
  background:rgba(201,168,106,.18);
  opacity:1;
}

/* Services */
.services-intro{
  position:sticky;
  top:110px;
  align-self:start;
}
.service-row{
  transition:background .25s ease,padding .25s ease;
}
.service-row:hover{
  background:rgba(255,255,255,.018);
}
.service-row h3{letter-spacing:-.025em}

/* About: avoid stretching the tiny portrait over a huge surface */
.portrait-placeholder{
  min-height:560px;
  place-items:center;
  background:
    radial-gradient(circle at 50% 38%,rgba(201,168,106,.17),transparent 28%),
    linear-gradient(145deg,#191713,#0b0b0b 65%);
}
.portrait-placeholder::after{
  content:"HS";
  position:absolute;
  right:-10px;
  bottom:-28px;
  z-index:0;
  font-family:"Manrope",sans-serif;
  font-size:clamp(110px,15vw,220px);
  line-height:1;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.025);
  font-weight:600;
}
.portrait-placeholder .henrique-photo{position:relative;z-index:2;width:min(60%,245px);height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 28%;border:1px solid rgba(240,214,160,.28);box-shadow:0 24px 70px rgba(0,0,0,.48);filter:contrast(1.035) saturate(.90)}
.about-portrait>p{
  margin-top:15px;
  color:#8e887e;
}

/* Trust strip */
.trust-grid article{
  position:relative;
  overflow:hidden;
}
.trust-grid article::after{
  content:"";
  position:absolute;
  right:-50px;
  bottom:-70px;
  width:160px;
  height:160px;
  border:1px solid rgba(201,168,106,.07);
  border-radius:50%;
}
.trust-grid strong{color:#f1ede6}

/* Process */
.process-grid li{
  position:relative;
}
.process-grid li::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:42px;
  height:2px;
  background:var(--gold);
}
.process-grid li+li::before{left:28px}

/* FAQ */
.faq{
  background:#0c0c0c;
  border-top:1px solid var(--line);
}
.faq-inner{
  width:min(var(--max),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(240px,.72fr) 1.35fr;
  gap:clamp(46px,8vw,120px);
}
.faq-intro h2{
  font-family:"Manrope",sans-serif;
  font-weight:500;
  letter-spacing:-.04em;
  font-size:clamp(38px,5vw,68px);
  line-height:1.02;
  margin:10px 0 18px;
}
.faq-intro p{
  color:#969089;
  line-height:1.75;
  max-width:42ch;
}
.faq-list{
  border-top:1px solid var(--line);
}
.faq-list details{
  border-bottom:1px solid var(--line);
}
.faq-list summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:center;
  min-height:84px;
  padding:22px 0;
  font-family:"Manrope",sans-serif;
  font-size:clamp(18px,2vw,25px);
  font-weight:500;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  color:var(--gold-soft);
  transition:transform .25s var(--ease),background .25s ease;
}
.faq-list details[open] summary::after{
  transform:rotate(45deg);
  background:rgba(201,168,106,.08);
}
.faq-list details p{
  max-width:730px;
  margin:-4px 58px 28px 0;
  color:#9f9991;
  line-height:1.8;
}

/* Budget */
.budget{
  position:relative;
  overflow:hidden;
}
.budget::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border:1px solid rgba(111,82,43,.10);
  border-radius:50%;
  left:-210px;
  bottom:-210px;
}
.budget-intro,.budget-form{position:relative;z-index:1}
.budget-form{
  padding:clamp(24px,4vw,42px);
  border:1px solid rgba(16,16,16,.13);
  background:rgba(255,255,255,.25);
  box-shadow:0 25px 80px rgba(56,42,23,.08);
}
.field input,.field select,.field textarea{
  transition:border-color .2s ease,background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:rgba(255,255,255,.24);
}
.form-help{max-width:62ch}

/* Floating CTA */
.whatsapp-float{
  min-width:52px;
  min-height:52px;
  justify-content:center;
}
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(201,168,106,.10);
  border-radius:inherit;
  pointer-events:none;
}
.whatsapp-float strong{font-weight:500}

/* Footer */
.site-footer{
  background:
    radial-gradient(circle at 85% 20%,rgba(201,168,106,.055),transparent 23%),
    #070707;
}
.footer-logo{width:min(220px,70vw);height:auto;filter:drop-shadow(0 8px 22px rgba(201,168,106,.16))}
.footer-links a{padding:7px 0}

/* Scroll progress */
.scroll-progress{
  position:fixed;
  inset:0 auto auto 0;
  z-index:130;
  height:2px;
  width:0;
  background:linear-gradient(90deg,#8a6837,#f0d6a0);
  pointer-events:none;
  box-shadow:0 0 16px rgba(201,168,106,.24);
}

/* Story dialog */
.story-modal{
  border-color:rgba(240,214,160,.16);
}
.story-media{
  position:relative;
}
.story-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.26);
}
.story-media img{
  filter:saturate(.92) contrast(1.04);
}

/* Responsive refinements */
@media(max-width:900px){
  main>section:not(.hero){content-visibility:visible}
  .services-intro{position:static}
  .faq-inner{grid-template-columns:1fr;gap:38px}
  .portrait-placeholder{min-height:520px}
}

@media(max-width:560px){
  .hero{
    background-position:60% center;
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(3,3,3,.14) 0%,rgba(3,3,3,.30) 42%,rgba(3,3,3,.90) 78%,rgba(3,3,3,.96) 100%),
      linear-gradient(90deg,rgba(0,0,0,.50),transparent 74%);
  }
  .hero-proof{
    margin-top:21px;
    font-size:9px;
    line-height:1.6;
  }
  .work-card::after{
    width:38px;
    height:38px;
    top:18px;
    left:18px;
  }
  .portrait-placeholder{
    min-height:440px;
  }
  .portrait-placeholder .henrique-photo{
    width:min(74%,280px);
  }
  .process-grid li::before,
  .process-grid li+li::before{left:0}
  .faq-list summary{
    min-height:76px;
    font-size:18px;
  }
  .faq-list details p{margin-right:0}
  .budget-form{
    margin-inline:-4px;
    padding:24px 18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .brand-mark,.work-card::after,.faq-list summary::after{transition:none}
}


/* Portfolio video player */
.work-card::after{display:none!important}
.work-play{
  position:absolute;
  top:24px;
  left:24px;
  z-index:6;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(8,8,8,.52);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#f4e4c4;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  transition:transform .22s var(--ease),background .22s ease,border-color .22s ease;
}
.work-play span{font-size:13px;line-height:1;transform:translateX(1px)}
.work-play:hover,
.work-play:focus-visible{
  transform:scale(1.08);
  background:rgba(201,168,106,.20);
  border-color:rgba(224,197,143,.68);
  outline:none;
}
.work-play:focus-visible{box-shadow:0 0 0 4px rgba(201,168,106,.14),0 10px 28px rgba(0,0,0,.26)}

.video-modal{
  width:min(94vw,1100px);
  max-width:1100px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:#050505;
  color:#fff;
  overflow:visible;
  box-shadow:0 40px 120px rgba(0,0,0,.72);
}
.video-modal::backdrop{
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.video-modal[open]{display:block}
.video-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:4;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,20,.94);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 36px rgba(0,0,0,.4);
}
.video-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:21px;
  overflow:hidden;
  display:grid;
  place-items:center;
}
#portfolio-video,
#portfolio-video-embed{
  width:100%;
  height:100%;
  border:0;
  background:#000;
  object-fit:contain;
}
#portfolio-video[hidden],
#portfolio-video-embed[hidden]{display:none!important}
.video-loading{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  padding:24px;
  text-align:center;
  color:#bdb7ad;
  background:#050505;
  font-size:13px;
  letter-spacing:.04em;
}
.video-loading[hidden]{display:none!important}

@media(max-width:700px){
  .work-play{top:18px;left:18px;width:44px;height:44px}
  .video-modal{
    width:100vw;
    max-width:none;
    margin:auto;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .video-stage{border-radius:0;aspect-ratio:16/9}
  .video-close{
    top:12px;
    right:12px;
    width:44px;
    height:44px;
    background:rgba(16,16,16,.96);
  }
}


/* Featured showreel */
.showreel{
  max-width:calc(var(--max) + var(--pad)*2);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);
  gap:clamp(34px,6vw,90px);
  align-items:center;
  border-bottom:1px solid var(--line);
}
.showreel-copy h2{
  margin:10px 0 22px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(38px,5vw,72px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:500;
}
.showreel-copy>p:not(.section-kicker){
  color:#9f9a92;
  line-height:1.75;
  max-width:560px;
}
.showreel-card{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  background:#080808;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.showreel-card[hidden]{display:none!important}
.showreel-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease),filter .5s ease;
  filter:saturate(.92) contrast(1.04) brightness(.92);
}
.showreel-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.08) 58%),
    radial-gradient(circle at 50% 50%,transparent 42%,rgba(0,0,0,.22));
}
.showreel-play-icon{
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(5,5,5,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#f1dcc0;
  font-size:20px;
  padding-left:4px;
  box-shadow:0 12px 38px rgba(0,0,0,.28);
  transition:transform .28s var(--ease),background .28s ease,border-color .28s ease;
}
.showreel-play-label{
  position:absolute;
  left:26px;
  bottom:23px;
  color:#f2eee7;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.showreel-card:hover img,
.showreel-card:focus-visible img{transform:scale(1.025);filter:saturate(1) contrast(1.04) brightness(.96)}
.showreel-card:hover .showreel-play-icon,
.showreel-card:focus-visible .showreel-play-icon{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(199,166,107,.22);
  border-color:rgba(224,197,143,.75);
}
.showreel-card:focus-visible{outline:2px solid var(--accent-light);outline-offset:4px}

@media(max-width:850px){
  .showreel{grid-template-columns:1fr}
  .showreel-copy{max-width:700px}
}
@media(max-width:560px){
  .showreel-play-icon{width:62px;height:62px;font-size:17px}
  .showreel-play-label{left:18px;bottom:16px;font-size:9px}
}