/* ============================================================
   Kolos Productions — design tokens
   ============================================================ */
:root{
  --bg:        #F6F1E7;
  --bg-alt:    #ECE4D4;
  --bg-alt-2:  #E2D7C0;
  --ink:       #1B1912;
  --ink-soft:  #5C5648;
  --ink-faint: #948C77;
  --green:     #1E3328;
  --green-deep:#122019;
  --gold:      #B8874A;
  --gold-soft: #D6B27F;
  --gold-brand:#E8A94F;
  --line:      rgba(27,25,18,.14);
  --line-invert: rgba(246,241,231,.2);
  --cream:     #F6F1E7;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --gutter: clamp(20px, 4.5vw, 68px);
  --section-pad: clamp(88px, 12vw, 168px);
  --radius: 3px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:400; }

.h-serif{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:440;
  letter-spacing:-.01em;
  line-height:1.08;
  color:var(--ink);
  font-size:clamp(2rem, 3.6vw, 3.4rem);
}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.eyebrow-invert{ color:var(--gold-soft); }

.section-head{
  max-width:760px;
  margin:0 auto clamp(40px,6vw,84px);
  padding:0 var(--gutter);
  text-align:left;
}
.section-sub{
  margin-top:1.1rem;
  max-width:52ch;
  color:var(--ink-soft);
  font-size:1.05rem;
  line-height:1.7;
}

/* grain overlay */
.grain{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:200; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
}

/* scroll progress rail */
.progress-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; }
.progress-fill{ height:100%; width:0%; background:var(--gold); }

/* ============================================================
   reveal primitives (animated via GSAP in js/main.js)
   ============================================================ */
[data-reveal], [data-reveal-line]{
  opacity:0;
  transform:translateY(22px);
  clip-path:inset(0% 0% 100% 0%);
  will-change:transform,opacity,clip-path;
}
.reveal-ready [data-reveal],
.reveal-ready [data-reveal-line]{
  transition:none;
}
.no-js [data-reveal], .no-js [data-reveal-line]{
  opacity:1; transform:none; clip-path:none;
}

/* ============================================================
   header
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,3vw,26px) var(--gutter);
  color:#F6F1E7;
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(246,241,231,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ width:15px; height:auto; fill:var(--gold-brand); flex-shrink:0; }
.brand-word{ display:flex; flex-direction:column; gap:.15rem; line-height:1; }
.brand-word-main{
  font-family:var(--sans); font-weight:700; font-size:1rem;
  letter-spacing:.03em; text-transform:uppercase; color:var(--gold-brand);
}
.brand-word-sub{
  font-family:var(--sans); font-weight:500; font-size:.56rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-brand); opacity:.85;
}

.site-nav{ display:flex; gap:2.2rem; font-size:.88rem; letter-spacing:.02em; }
.site-nav a{ position:relative; padding:.2rem 0; }
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-cta{
  font-size:.8rem; letter-spacing:.04em; padding:.6rem 1.1rem;
  border:1px solid currentColor; border-radius:999px; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{ background:currentColor; color:var(--green-deep); }

.nav-burger{ display:none; width:34px; height:28px; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; padding:0; }
.nav-burger span{ display:block; height:1px; background:currentColor; transition:transform .3s var(--ease), opacity .3s var(--ease); }

.mobile-nav{
  position:fixed; inset:0 0 auto 0; top:0; z-index:90;
  background:var(--green-deep); color:var(--cream);
  display:flex; flex-direction:column; gap:1.6rem;
  padding:clamp(96px,20vh,140px) var(--gutter) 40px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
  font-family:var(--serif); font-size:1.6rem;
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{ border-bottom:1px solid var(--line-invert); padding-bottom:1rem; }

/* ============================================================
   buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  padding:1rem 1.7rem; border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn-line{ border:1px solid rgba(246,241,231,.5); color:var(--cream); }
.btn-line:hover{ border-color:var(--cream); background:rgba(246,241,231,.08); }
.btn-solid{ background:var(--gold); color:var(--green-deep); }
.btn-solid:hover{ background:var(--gold-soft); transform:translateY(-1px); }
.btn-invert{ background:var(--cream); color:var(--green-deep); }
.btn-invert:hover{ background:var(--gold-soft); transform:translateY(-1px); }

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; color:var(--cream);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-layer{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.12);
  filter:saturate(.85) brightness(.82) contrast(1.03);
  transition:opacity 2.6s ease, transform 9s linear;
}
.hero-bg-layer.is-active{ opacity:1; transform:scale(1); }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,10,7,.32) 0%, rgba(8,10,7,.34) 45%, rgba(8,10,7,.8) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(8,10,7,.35), transparent 60%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:1080px;
  padding:clamp(120px,20vh,220px) var(--gutter) clamp(48px,7vh,96px);
}
.hero-eyebrow{ color:var(--gold-soft); }
.hero-headline{
  font-family:var(--serif); font-optical-sizing:auto; font-weight:420;
  font-size:clamp(2.1rem, 4.6vw, 4.4rem);
  line-height:1.1; letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.hero-headline .line{ display:block; }
.hero-sub{
  margin-top:1.6rem; max-width:46ch; font-size:1.08rem; line-height:1.72;
  color:rgba(246,241,231,.86);
  text-shadow:0 1px 16px rgba(0,0,0,.24);
}
.hero-actions{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero-foot{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter) clamp(20px,3vw,34px);
}
.hero-tags{ display:flex; gap:1.4rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,231,.62); }
.scroll-cue{ width:1px; height:34px; background:rgba(246,241,231,.35); position:relative; overflow:hidden; }
.scroll-cue span{
  position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold-soft);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform:translateY(-100%); } 50%{ transform:translateY(0); } 100%{ transform:translateY(100%); }
}

/* ============================================================
   2. PORTFOLIO / GALLERY
   ============================================================ */
.portfolio{ padding:var(--section-pad) 0; background:var(--bg); }
.gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:220px;
  grid-auto-flow:dense;
  gap:clamp(10px, 1.6vw, 22px);
  padding:0 var(--gutter);
}
.g-item{ grid-column:span 2; grid-row:span 1; display:flex; flex-direction:column; }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 4; }

.g-frame{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  flex:1; background:var(--bg-alt-2);
}
.g-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); transition:opacity .3s ease;
}
.g-item[data-hover-distort] .g-frame{ cursor:pointer; }
.g-frame canvas{ position:absolute; inset:0; width:100%!important; height:100%!important; }

.play-glyph{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(246,241,231,.16); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(246,241,231,.5);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.play-glyph svg{ width:16px; height:16px; fill:var(--cream); margin-left:2px; }
.g-item:hover .play-glyph{ transform:translate(-50%,-50%) scale(1.08); background:rgba(246,241,231,.26); }
.clip-tag{
  position:absolute; top:14px; right:14px; font-size:.68rem; letter-spacing:.05em;
  color:var(--cream); background:rgba(12,14,10,.45); padding:.3rem .55rem; border-radius:2px;
  font-variant-numeric:tabular-nums;
}

.g-item figcaption{
  display:flex; align-items:baseline; gap:.6rem; padding-top:.85rem;
  font-size:.85rem; color:var(--ink-soft);
}
.g-item figcaption span{
  text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--gold); flex-shrink:0;
}
.g-item figcaption em{ font-style:italic; font-family:var(--serif); color:var(--ink); }

/* ---------- showreel carousel ---------- */
.reel{ position:relative; }
.reel-track{
  display:flex; width:100%; gap:clamp(16px,2vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:calc(50% - clamp(200px,40vw,320px) / 2);
  padding-block:10px 30px;
  padding-inline:calc(50% - clamp(200px,40vw,320px) / 2);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.reel-track::-webkit-scrollbar{ display:none; }
.reel-track{ cursor:grab; }
.reel-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.reel-track.is-snap-suspended{ scroll-snap-type:none; }

.reel-card{
  flex:0 0 auto; width:clamp(200px,40vw,320px);
  scroll-snap-align:center;
  opacity:.62; transform:scale(.92);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.reel-card.is-active, .reel-card:hover{ opacity:1; transform:scale(1); }

.reel-card-media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-alt-2);
}
.reel-card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  -webkit-user-drag:none; user-select:none;
}
.reel-card[data-has-video] .reel-card-media{ cursor:pointer; }

.reel-grad-1{ background:linear-gradient(135deg, var(--green) 0%, var(--gold-brand) 100%); }
.reel-grad-2{ background:linear-gradient(150deg, var(--green-deep) 0%, var(--gold) 100%); }
.reel-grad-3{ background:linear-gradient(120deg, var(--gold-brand) 0%, var(--green) 100%); }
.reel-grad-4{ background:linear-gradient(160deg, var(--green) 10%, var(--gold-soft) 100%); }
.reel-grad-5{ background:linear-gradient(135deg, var(--gold) 0%, var(--green-deep) 100%); }
.reel-grad-6{ background:linear-gradient(145deg, var(--green-deep) 0%, var(--gold-brand) 90%); }

.reel-play-glyph{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}
.reel-play-glyph svg{ width:16px; height:16px; fill:#fff; margin-left:2px; }

.reel-card-caption{
  display:flex; align-items:baseline; gap:.6rem; padding-top:.85rem; font-size:.85rem; color:var(--ink-soft);
}
.reel-card-caption span{
  text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--gold); flex-shrink:0;
}
.reel-card-caption em{ font-style:italic; font-family:var(--serif); color:var(--ink); }

.reel-arrow{
  position:absolute; top:42%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; transition:background .3s var(--ease);
}
.reel-arrow svg{ width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.reel-arrow:hover{ background:var(--gold); }
.reel-arrow:hover svg{ stroke:var(--green-deep); }
.reel-arrow-prev{ left:calc(var(--gutter) - 22px); }
.reel-arrow-next{ right:calc(var(--gutter) - 22px); }

@media (max-width:900px){
  .reel-arrow{ display:none; }
}

.reel-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.reel-lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.reel-lightbox-backdrop{ position:absolute; inset:0; background:rgba(8,10,7,.88); }
.reel-lightbox-body{
  position:relative; width:min(1040px, 92vw); aspect-ratio:16/9;
}
.reel-lightbox-frame{ width:100%; height:100%; }
.reel-lightbox-frame iframe, .reel-lightbox-frame video{ width:100%; height:100%; border:0; }

body.reel-lightbox-locked{ overflow:hidden; }
.reel-lightbox-close{
  position:absolute; top:-48px; right:0; width:36px; height:36px;
  background:transparent; border:1px solid rgba(246,241,231,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s var(--ease);
}
.reel-lightbox-close svg{ width:14px; height:14px; stroke:var(--cream); fill:none; stroke-width:1.6; stroke-linecap:round; }
.reel-lightbox-close:hover{ background:rgba(246,241,231,.12); }

/* ============================================================
   3. SERVICES
   ============================================================ */
.services{ padding:var(--section-pad) 0; background:var(--bg-alt); }
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:1360px; margin:0 auto; padding:0 var(--gutter);
}
.pillar{ padding:0 clamp(20px,3vw,44px); border-left:1px solid var(--line); }
.pillar:first-child{ border-left:none; padding-left:0; }
.pillar-num{
  display:block; font-family:var(--serif); font-weight:300; font-size:1rem;
  color:var(--gold); margin-bottom:1.6rem; letter-spacing:.04em;
}
.pillar h3{ font-family:var(--serif); font-size:1.6rem; font-weight:450; margin-bottom:.9rem; }
.pillar p{ color:var(--ink-soft); line-height:1.7; margin-bottom:1.6rem; }
.pillar ul li{
  font-size:.88rem; color:var(--ink); padding:.65rem 0; border-top:1px solid var(--line);
}
.pillar ul li:last-child{ border-bottom:1px solid var(--line); }
.pillar ul li::before{ content:"— "; color:var(--gold); }

.services-locked{
  max-width:520px; margin:0 auto; padding:clamp(48px,7vw,88px) var(--gutter) clamp(20px,4vw,40px);
  text-align:center;
}
.lock-icon{
  width:30px; height:30px; margin:0 auto 1.8rem; display:block;
  stroke:var(--gold); stroke-width:1.3; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.services-locked-text{
  font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--ink); margin-bottom:.9rem;
}
.services-locked-sub{ color:var(--ink-soft); line-height:1.7; font-size:.98rem; }

/* ============================================================
   4. STUDIO / ABOUT (pinned)
   ============================================================ */
.studio{ position:relative; background:var(--bg-alt); min-height:180vh; }
.studio-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(32px,5vw,90px); padding:0 var(--gutter);
}
.studio-media{ position:relative; height:min(70vh,620px); border-radius:var(--radius); overflow:hidden; }
.studio-media img{
  width:100%; height:100%; object-fit:cover;
  clip-path:inset(10% 10% 10% 10%);
}
.wheat-motif{
  position:absolute; right:-18px; bottom:-16px; width:64px; height:128px;
  stroke:var(--gold); stroke-width:1.1; fill:none; stroke-linecap:round;
  opacity:.9;
}
.wheat-motif path{ stroke-dasharray:220; stroke-dashoffset:220; }

.studio-text{ max-width:44ch; }
.studio-text p{ color:var(--ink-soft); line-height:1.75; margin-bottom:1.3rem; font-size:1.03rem; }
.studio-note{
  padding-top:1.4rem; margin-top:.4rem; border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic; color:var(--ink); font-size:1.08rem;
}
.studio-note em{ font-style:normal; color:var(--green); }

/* ============================================================
   5. HOW IT WORKS
   ============================================================ */
.how-it-works{ padding:var(--section-pad) 0; background:var(--bg-alt); }

/* ============================================================
   6. ENQUIRE / CTA
   ============================================================ */
.enquire{
  position:relative; background:var(--green-deep); color:var(--cream);
  padding:var(--section-pad) var(--gutter); text-align:center; overflow:hidden;
}
.enquire::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, var(--gold) 0 1px, transparent 1px 120px);
}
.enquire-inner{ position:relative; max-width:760px; margin:0 auto; }
.enquire-h{ color:var(--cream); font-size:clamp(2.1rem,4.6vw,3.6rem); }
.enquire-sub{ margin:1.4rem auto 2.4rem; max-width:46ch; color:rgba(246,241,231,.78); font-size:1.08rem; line-height:1.7; }
.enquire-meta{ margin-top:1.6rem; font-size:.82rem; color:rgba(246,241,231,.55); letter-spacing:.02em; }

/* ============================================================
   footer
   ============================================================ */
.site-footer{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding:1.8rem var(--gutter); font-size:.78rem; color:var(--ink-faint);
  border-top:1px solid var(--line); background:var(--bg);
}
.footer-social{ display:flex; gap:1rem; }
.footer-social a{ letter-spacing:.06em; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:900px){
  .site-nav, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }

  .pillars{ grid-template-columns:1fr; gap:2.6rem; }
  .pillar{ border-left:none; border-top:1px solid var(--line); padding:2.6rem 0 0; }
  .pillar:first-child{ border-top:none; padding-top:0; }

  .studio{ min-height:auto; }
  .studio-sticky{ position:relative; top:auto; height:auto; grid-template-columns:1fr; padding:var(--section-pad) var(--gutter); gap:2.6rem; }
  .studio-media{ height:52vh; }

  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .g-wide{ grid-column:span 2; }
  .g-tall{ grid-row:span 2; }
}

@media (max-width:600px){
  .gallery{ grid-template-columns:1fr; }
  .g-tall, .g-wide, .g-item{ grid-column:span 1; grid-row:span 1; height:280px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

@media (prefers-reduced-motion:reduce){
  [data-reveal], [data-reveal-line]{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .scroll-cue span{ animation:none; }
  .hero-bg-layer{ transition:none; }
}