/* ===========================================================
   STUDIO SOUL — Bauhaus concept, live stylesheet
   Single committed palette (cream + Bauhaus primaries/accents) —
   see BAUHAUS-README.md and config.js for editing notes.
   =========================================================== */

:root{
  --cream:#F2E7D2; --ink:#17130D; --ink-soft:#4a4335;
  --red:#D9332A; --red-ink:#FFFAF4;
  --yellow:#EAAB1D; --yellow-ink:#1B1710;
  --blue:#1C5A93; --blue-ink:#F2E7D2;
  --pink:#EF7FA0; --pink-ink:#1B1710;
  --orange:#E17A3B; --orange-ink:#1B1710;
  --green:#227A4E; --green-ink:#F6EEDE;
  --line: rgba(23,19,13,.16);
  --display:"Poppins", "Helvetica Neue", Arial, sans-serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.5}
img{display:block;max-width:100%}
svg{display:block}
a{color:inherit}

/* ---- nav ---- */
.nav{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:50;
  background:transparent; border-bottom:3px solid transparent; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(24px,5vw,64px);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nav--solid{background:var(--cream); color:var(--ink); border-bottom-color:var(--ink)}
.nav__logo{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:10px; text-decoration:none}
.nav__links{display:flex; gap:28px; list-style:none; margin:0; padding:0; font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.nav__links a{text-decoration:none}
.nav__links a:hover{opacity:.7}
.nav__toggle{display:none; background:none; border:none; color:inherit; cursor:pointer; padding:4px}
.nav__drawer{display:none}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav__drawer{
    position:fixed; inset:0; background:var(--ink); z-index:49;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    padding:0 40px; transform:translateY(-100%); transition:transform .35s ease;
  }
  .nav__drawer.is-open{transform:translateY(0)}
  .nav__drawer a{font-family:var(--display); color:var(--cream); font-size:26px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; text-decoration:none}
}

/* ---- hero ---- */
.cover{position:relative; background:var(--ink)}
.cover__media{width:100%; height:100svh; object-fit:cover; display:block}
.cover__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,9,.5) 0%, rgba(15,12,9,.08) 26%, rgba(15,12,9,.15) 60%, rgba(15,12,9,.72) 100%)}

/* ---- generic block ---- */
.block{padding:clamp(76px,13vw,150px) clamp(24px,6vw,64px); position:relative; overflow:hidden}
.block__eyebrow{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.75; display:block; margin-bottom:18px}
.block h2{font-family:var(--display); font-weight:800; line-height:1.15; letter-spacing:.015em; margin:0; text-transform:uppercase; text-wrap:balance}
.block p{font-family:var(--sans); font-weight:500; line-height:1.55; margin:0}
.block mark{background:none; color:var(--yellow); font-weight:700}

/* mission block */
.mission{text-align:center}
.mission h2{font-size:clamp(30px,5vw,58px); max-width:15ch; margin:0 auto}
.mission__rule{width:64px; height:4px; background:var(--ink); margin:28px auto; opacity:.7}
.mission p{max-width:44ch; margin:0 auto; font-size:16px; opacity:.8}

/* about block */
.about h2{font-size:clamp(30px,4.6vw,50px); max-width:12ch; margin-bottom:26px}
.about p{font-size:clamp(18px,2.1vw,22px); max-width:32ch; position:relative; z-index:1}

/* ---- page hero (services etc) ---- */
.page-hero{position:relative; height:66vh; min-height:440px; background:var(--ink)}
.page-hero img{width:100%; height:100%; object-fit:cover; display:block}
.page-hero__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,9,.55) 0%, rgba(15,12,9,.15) 40%, rgba(15,12,9,.72) 100%)}
.page-hero__content{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(24px,6vw,64px) clamp(40px,6vw,64px)}
.page-hero__eyebrow{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); display:block; margin-bottom:16px}
.page-hero h1{font-family:var(--display); font-weight:800; color:#fdfaf4; text-transform:uppercase; font-size:clamp(30px,5.2vw,58px); line-height:1.1; letter-spacing:.015em; margin:0 0 20px; max-width:16ch}
.page-hero p{font-family:var(--sans); font-weight:500; color:#fdfaf4; opacity:.9; font-size:16px; max-width:52ch; margin:0}

/* ---- services list ---- */
.service{padding:clamp(64px,10vw,120px) clamp(24px,6vw,64px); display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,64px); align-items:start}
.service__num{font-family:var(--display); font-weight:800; font-size:clamp(48px,7vw,96px); line-height:.8; opacity:.35}
.service h2{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.015em; line-height:1.15; font-size:clamp(26px,3.6vw,42px); margin:0 0 20px; max-width:16ch}
.service p{font-family:var(--sans); font-weight:500; line-height:1.6; font-size:17px; max-width:56ch; margin:0; opacity:.92}
@media (max-width:640px){ .service{grid-template-columns:1fr; gap:16px} .service__num{font-size:40px} }

/* ---- testimonials page — full-bleed photo blocks ---- */
.chip-bar{display:flex; height:8px}
.chip-bar span{flex:1}
.t-block{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--ink)}
.t-block img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.t-block img.is-mobile-only{display:none}
@media (max-width:700px){
  .t-block img.is-desktop-only{display:none}
  .t-block img.is-mobile-only{display:block}
}
.t-block__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,9,.3) 0%, rgba(15,12,9,.15) 30%, rgba(15,12,9,.45) 75%, rgba(15,12,9,.7) 100%)}
.t-block__content{position:relative; z-index:1; padding:clamp(90px,12vw,140px) clamp(24px,6vw,64px) clamp(48px,7vw,80px)}
.t-block__eyebrow{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); display:block; margin-bottom:22px}
.t-block__attr{font-family:var(--sans); font-weight:600; font-size:14px; color:#fdfaf4; opacity:.9; margin:0 0 40px}
.t-block__attr b{font-weight:700}
.t-block__quote{font-family:var(--sans); font-weight:700; font-size:clamp(26px,4vw,44px); line-height:1.3; color:var(--yellow); margin:0 0 32px}
.t-block__quote mark{background:none; color:var(--yellow); font-weight:700}
.t-block__body p{font-family:var(--sans); font-weight:500; font-size:15px; line-height:1.7; color:#fdfaf4; opacity:.9; margin:0 0 16px}
.t-block__body p:last-child{margin-bottom:0}

/* testimonial block — one featured quote, two smaller stacked beside it */
.testimonial__grid{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,56px); position:relative; z-index:1}
.testimonial__feature .testimonial__quote{font-family:var(--sans); font-weight:700; text-transform:none; font-size:clamp(24px,3.4vw,34px); line-height:1.3; max-width:22ch; margin:0 0 20px}
.testimonial__side{display:flex; flex-direction:column; gap:28px}
.testimonial__mini{padding-top:24px; border-top:1px solid rgba(248,233,217,.25)}
.testimonial__mini:first-child{padding-top:0; border-top:none}
.testimonial__mini .testimonial__quote{font-family:var(--sans); font-weight:500; font-size:14px; line-height:1.5; margin:0 0 14px}
.testimonial__name{font-family:var(--display); font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.02em; margin:0 0 4px}
.testimonial__mini .testimonial__name{font-size:12.5px}
.testimonial__role{font-family:var(--sans); font-weight:500; font-size:13px; color:var(--yellow); margin:0}
.testimonial__mini .testimonial__role{font-size:11.5px}
@media (max-width:820px){ .testimonial__grid{grid-template-columns:1fr; gap:36px} }

.work__heading{padding:64px clamp(24px,5vw,64px) 0}
.work__heading .block__eyebrow{margin-bottom:0}

/* ---- image spread (showreel + selected work) ---- */
.image-spread{padding:64px clamp(24px,5vw,64px)}
.image-spread figure{margin:0 auto; max-width:900px}
.image-spread .frame{border:6px solid var(--ink); position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink)}
.image-spread .frame img{width:100%; height:100%; object-fit:cover; display:block}
.image-spread figcaption{
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink-soft); letter-spacing:.02em;
  margin-top:16px; display:flex; justify-content:space-between; max-width:900px; margin-left:auto; margin-right:auto;
}
.image-spread .num{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:var(--cream); font-size:11px; font-weight:700; margin-right:8px;
}

/* showreel / work video embed — click the frame itself to play, no button overlay */
.showreel__frame{cursor:pointer}
.showreel__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.showreel__frame:focus-visible{outline:3px solid var(--yellow); outline-offset:-3px}

/* ---- clients (auto-scrolling carousel) ---- */
.clients{padding:40px 0; border-top:4px solid var(--ink); border-bottom:4px solid var(--ink)}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{display:flex; align-items:center; gap:clamp(40px,6vw,72px); width:max-content; padding:0 clamp(24px,5vw,64px); animation:marquee 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee__item{display:flex; align-items:center; flex:none}
.marquee__item img{height:30px; width:auto; display:block}
.marquee__item img.is-big{height:46px}
.marquee__item img.is-xl{height:70px}
.marquee__item span{font-family:var(--sans); font-weight:600; font-size:20px; color:var(--ink-soft); white-space:nowrap}

/* ---- footer ---- */
.footer{background:var(--ink); color:var(--cream); padding:clamp(70px,10vw,110px) clamp(24px,5vw,64px) 40px; position:relative; overflow:hidden}
.footer__eyebrow{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); display:block; margin-bottom:20px}
.footer__chips{display:flex; gap:8px; margin-bottom:24px; position:relative; z-index:1}
.footer__chips span{width:16px; height:16px; display:block}
.footer__base{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:56px; padding-top:22px; border-top:1px solid rgba(242,231,210,.2); font-family:var(--sans); font-weight:500; font-size:13px; opacity:.65; position:relative; z-index:1}
.footer__base a:hover{opacity:.8}
.footer__social{display:flex; gap:16px}
.footer__social svg{width:16px; height:16px}
.footer__social a{color:var(--cream); opacity:.85; transition:opacity .2s ease}
.footer__social a:hover{opacity:1}
.footer__acknowledgement{font-family:var(--sans); font-weight:400; font-size:12px; line-height:1.65; opacity:.5; max-width:620px; margin:28px 0 0; position:relative; z-index:1}

/* ---- about page — shared section furniture ---- */
.section{padding:clamp(64px,9vw,110px) clamp(24px,6vw,64px)}
.section__label{
  display:flex; align-items:center; gap:clamp(20px,4vw,48px);
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:clamp(40px,6vw,64px);
}
.section__label::after{content:""; flex:1; height:2px; background:currentColor; opacity:.35}
h2.section__title{
  font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(34px,6vw,72px); line-height:1.02; margin:0 0 clamp(28px,4vw,40px);
}
.prose p{font-family:var(--sans); font-weight:500; font-size:17px; line-height:1.7; margin:0 0 20px; max-width:100ch}
.prose p:last-child{margin-bottom:0}

/* ---- about page — values ---- */
.values{display:flex; flex-direction:column}
.value{padding:26px 0; border-top:1px solid rgba(242,231,210,.22)}
.value:first-child{border-top:none; padding-top:0}
.value:last-child{padding-bottom:0}
.value__label{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(15px,1.7vw,19px); margin:0 0 8px; color:var(--blue-ink)}
.value__body{font-family:var(--sans); font-weight:500; font-size:16px; line-height:1.65; margin:0; max-width:78ch; opacity:.92}

/* ---- about page — about Nat ---- */
.nat__intro{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start; margin-bottom:clamp(36px,5vw,56px)}
.nat__portrait{border:6px solid var(--ink); display:block; width:100%; height:auto}
.nat__headline{
  font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.015em; color:var(--red-ink);
  font-size:clamp(30px,4.4vw,56px); line-height:1.06; margin:0 0 clamp(24px,3vw,32px);
}
.nat__lead{font-family:var(--sans); font-weight:600; font-size:clamp(18px,1.9vw,22px); line-height:1.55; margin:0 0 clamp(24px,3vw,32px)}
.nat__rule{width:64px; height:4px; background:var(--yellow); margin:0}
@media (max-width:820px){ .nat__intro{grid-template-columns:1fr} }

/* ---- motion: hero load sequence ---- */
.nav{opacity:0; transform:translateY(-10px); transition:opacity .6s ease, transform .6s ease, background .3s ease, color .3s ease, border-color .3s ease}
.nav.is-ready{opacity:1; transform:translateY(0)}

.cover__media, .page-hero img{opacity:0; transform:scale(1.045); transition:opacity 1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cover__media.is-ready, .page-hero img.is-ready{opacity:1; transform:scale(1)}

.page-hero__eyebrow, .page-hero h1, .page-hero p{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.page-hero__eyebrow.is-ready{opacity:1; transform:translateY(0); transition-delay:.2s}
.page-hero h1.is-ready{opacity:1; transform:translateY(0); transition-delay:.34s}
.page-hero p.is-ready{opacity:1; transform:translateY(0); transition-delay:.5s}

/* ---- motion: scroll-triggered reveals ---- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1; transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  .nav, .cover__media, .page-hero img, .page-hero__eyebrow, .page-hero h1, .page-hero p, .reveal{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}