:root{
  --paper:#F7F6F3;
  --paper-2:#FFFFFF;
  --ink:#0A0A0B;
  --red:#E63B2E;
  --red-soft:#FF8A7F;
  --sand:#EDE7DA;
  --slate:#6B6B73;
  --line:rgba(10,10,11,0.12);
  --line-soft:rgba(10,10,11,0.07);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --display:'Archivo', 'Arial Black', sans-serif;
  --body:'Instrument Sans', 'Inter', system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--display);
  font-stretch:112%;
  letter-spacing:-0.025em;
  line-height:1.03;
}
em{font-style:normal;}
.mono{font-family:var(--mono); letter-spacing:0.08em; text-transform:uppercase;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
img,video{display:block; max-width:100%;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
::selection{background:var(--red); color:#fff;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px;}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:300; pointer-events:none;}
.scroll-progress i{display:block; height:100%; width:0; background:var(--red); transition:width .1s linear;}

/* ---------- Custom cursor ---------- */
.cursor{position:fixed; inset:0; z-index:400; pointer-events:none; display:none; opacity:0; transition:opacity .3s;}
.cursor.ready{opacity:1;}
.cursor-dot,.cursor-ring{position:absolute; top:0; left:0; border-radius:999px; will-change:transform;}
.cursor-dot{width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--red);}
.cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(10,10,11,0.35);
  display:flex; align-items:center; justify-content:center;
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
             background-color .35s var(--ease), border-color .35s var(--ease);
}
.cursor-label{font-size:10px; opacity:0; color:var(--paper); white-space:nowrap; transition:opacity .2s;}
.cursor.is-link .cursor-ring{width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(10,10,11,0.06); border-color:rgba(10,10,11,0.2);}
.cursor.is-media .cursor-ring{width:88px; height:88px; margin:-44px 0 0 -44px; background:var(--red); border-color:var(--red);}
.cursor.is-media .cursor-label{opacity:1;}
.cursor.is-media .cursor-dot{opacity:0;}
body.cursor-on,body.cursor-on a,body.cursor-on button{cursor:none;}
@media (hover:hover) and (pointer:fine){ .cursor{display:block;} }

/* ---------- Frame + HUD ---------- */
.corner{
  position:fixed; width:22px; height:22px; z-index:150;
  border-color:#fff; mix-blend-mode:difference; pointer-events:none;
}
.corner.tl{top:20px; left:20px; border-top:2px solid; border-left:2px solid;}
.corner.tr{top:20px; right:20px; border-top:2px solid; border-right:2px solid;}
.corner.bl{bottom:20px; left:20px; border-bottom:2px solid; border-left:2px solid;}
.corner.br{bottom:20px; right:20px; border-bottom:2px solid; border-right:2px solid;}
@media (max-width:720px){ .corner{width:14px; height:14px;} }

.hud{
  position:fixed; bottom:24px; left:24px; z-index:200;
  display:flex; align-items:center; gap:10px;
  background:rgba(247,246,243,0.9);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  padding:8px 14px; border-radius:2px;
  font-size:11px;
}
.hud-dot{width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}
.hud-tc{color:var(--slate);}
@media (max-width:900px){ .hud{display:none;} }

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:100;
  background:rgba(247,246,243,0.82); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
nav.scrolled{border-bottom-color:var(--line); box-shadow:0 10px 30px -24px rgba(10,10,11,0.5);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px;}
.wordmark{
  font-family:var(--display); font-weight:800; font-size:18px;
  font-stretch:118%; letter-spacing:0.02em;
}
.wordmark span{color:var(--red);}
.navlinks{display:flex; align-items:center; gap:34px; font-size:14px; font-weight:500;}
.navlinks a:not(.navcta){position:relative; opacity:0.65; transition:opacity .2s;}
.navlinks a:not(.navcta)::after{
  content:''; position:absolute; left:0; bottom:-5px; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.navlinks a:not(.navcta):hover{opacity:1;}
.navlinks a:not(.navcta):hover::after{transform:scaleX(1); transform-origin:left;}
.navcta{
  background:var(--ink); color:var(--paper); padding:11px 20px;
  font-size:13px; font-weight:600; border-radius:2px;
  transition:background .25s, transform .25s var(--ease);
}
.navcta:hover{background:var(--red); transform:translateY(-1px);}

.navtoggle{display:none; width:34px; height:34px; position:relative;}
.navtoggle span{
  position:absolute; left:5px; width:24px; height:2px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s;
}
.navtoggle span:nth-child(1){top:13px;}
.navtoggle span:nth-child(2){top:20px;}
.navtoggle.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.navtoggle.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

.mobilemenu{
  position:fixed; top:74px; left:0; right:0; z-index:99;
  background:var(--paper); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; padding:8px 32px 24px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s var(--ease);
}
.mobilemenu.open{opacity:1; transform:none; pointer-events:auto;}
.mobilemenu a{padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:17px; font-weight:500;}
.mobilemenu .m-cta{border-bottom:0; margin-top:16px; background:var(--ink); color:var(--paper); text-align:center; padding:15px; border-radius:2px;}
@media (max-width:900px){
  .navlinks{display:none;}
  .navtoggle{display:block;}
}
@media (min-width:901px){ .mobilemenu{display:none;} }

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  padding:16px 28px; font-size:14px; font-weight:600; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .25s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn .arr{transition:transform .3s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--red);}
.btn-ghost{border:1px solid var(--line); background:transparent;}
.btn-ghost:hover{border-color:var(--ink); background:var(--ink); color:var(--paper);}
.btn-invert{background:var(--paper); color:var(--ink);}
.btn-invert:hover{background:var(--red); color:#fff;}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:140px 0 100px;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(230,59,46,0.10), transparent 70%),
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/96px 100%,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/100% 96px;
  mask-image:linear-gradient(to bottom, #000 40%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent 100%);
}
.hero .wrap{position:relative;}
.eyebrow{font-size:11px; color:var(--red); margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--red);}
.hero h1{
  font-size:clamp(40px, 6.2vw, 84px); font-weight:900; max-width:1120px;
  font-stretch:104%;
}
.hero h1 em{font-family:var(--serif); font-style:italic; color:var(--red); letter-spacing:-0.01em; padding-left:0.04em;}
.split .line{display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.09em;}
.split .w{display:inline-block; transform:translateY(110%); opacity:0;}
.split.in .w{
  transform:none; opacity:1;
  transition:transform .9s var(--ease), opacity .7s ease;
  transition-delay:calc(var(--i) * 55ms);
}
.hero-sub{font-size:19px; color:var(--slate); max-width:530px; margin-top:28px; line-height:1.6;}
.hero-ctas{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap;}
.hero-meta{
  margin-top:70px; display:flex; gap:56px; flex-wrap:wrap;
  font-size:13px; color:var(--slate);
}
.hero-meta b{
  color:var(--ink); font-family:var(--display); font-size:30px; display:block;
  font-weight:800; font-stretch:100%; margin-bottom:4px;
}
.scroll-hint{
  position:absolute; right:36px; bottom:38px; font-size:10px; color:var(--slate);
  display:flex; align-items:center; gap:8px;
}
.scroll-hint span{animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}
@media (max-width:900px){ .scroll-hint{display:none;} }

/* ---------- Marquee ---------- */
.marquee{
  background:var(--ink); color:var(--paper); overflow:hidden;
  padding:16px 0; border-bottom:1px solid var(--ink);
}
.marquee-track{display:flex; width:max-content; animation:slide 32s linear infinite;}
.marquee-track span{
  font-family:var(--display); font-weight:700; font-stretch:105%;
  font-size:15px; text-transform:uppercase; letter-spacing:0.06em;
  padding-right:24px; white-space:nowrap;
}
.marquee-track i{color:var(--red); font-style:normal; padding:0 14px;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Section shell ---------- */
section{padding:118px 0; border-bottom:1px solid var(--line);}
.section-head{max-width:660px; margin-bottom:62px;}
.section-head h2{font-size:clamp(30px,4.2vw,50px); font-weight:800; margin-top:16px;}
.section-head p{color:var(--slate); margin-top:18px; font-size:16.5px; line-height:1.65;}

/* ---------- Reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in{opacity:1; transform:none;}

/* ---------- Portfolio ---------- */
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
@media (max-width:1000px){.grid5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid5{gap:10px;}}
.card{
  border:1px solid var(--line); background:var(--paper-2); overflow:hidden;
  display:flex; flex-direction:column; text-align:left; padding:0;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover{transform:translateY(-6px); border-color:rgba(10,10,11,0.3); box-shadow:0 26px 50px -30px rgba(10,10,11,0.55);}
.card-media{position:relative; overflow:hidden; background:#111;}
.card video{width:100%; aspect-ratio:9/16; object-fit:cover; transition:transform .6s var(--ease), filter .4s;}
.card:hover video{transform:scale(1.04);}
.card-no{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10px; color:#fff; opacity:0.85; mix-blend-mode:difference;
}
.card-play{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,10,11,0.35), transparent 45%);
  opacity:0; transition:opacity .35s;
}
.card:hover .card-play{opacity:1;}
.card-label{padding:14px 14px 16px;}
.card-label .fmt{font-size:10px; color:var(--red);}
.card-label .name{font-family:var(--display); font-weight:700; font-size:15.5px; margin-top:6px; font-stretch:105%;}
.grid-note{margin-top:22px; font-size:10.5px; color:var(--slate);}

/* ---------- Process ---------- */
.days{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:820px){.days{grid-template-columns:1fr;}}
.day{background:var(--paper); padding:42px 34px; position:relative; transition:background .35s;}
.day::before{
  content:''; position:absolute; top:0; left:0; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease);
}
.day.in::before{transform:scaleX(1);}
.day:nth-child(2).in::before{transition-delay:.15s;}
.day:nth-child(3).in::before{transition-delay:.3s;}
.day:hover{background:var(--paper-2);}
.day .d{font-size:11px; color:var(--red);}
.day h3{font-size:25px; font-weight:800; margin-top:14px;}
.day p{color:var(--slate); margin-top:14px; font-size:15px; line-height:1.65;}

/* ---------- Pricing ---------- */
.price-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:22px;}
@media (max-width:820px){.price-grid{grid-template-columns:1fr;}}
.price-card{border:1px solid var(--line); padding:46px; background:var(--paper-2); display:flex; flex-direction:column;}
.price-card.featured{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.price-card .tag{font-size:11px; color:var(--red);}
.price-card.featured .tag{color:var(--red-soft);}
.price-card h3{font-size:27px; font-weight:800; margin-top:14px;}
.price-card .amount{font-family:var(--display); font-weight:900; font-size:52px; margin-top:20px; font-stretch:100%;}
.price-card .amount small{font-family:var(--body); font-size:14px; font-weight:500; opacity:0.55;}
.price-card ul{margin-top:26px; list-style:none; flex:1;}
.price-card li{padding:11px 0; font-size:15px; border-top:1px solid var(--line); display:flex; gap:10px;}
.price-card.featured li{border-top-color:rgba(247,246,243,0.16);}
.price-card li::before{content:'—'; color:var(--red);}
.price-card .btn{margin-top:32px; width:100%;}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr; gap:0;}}
#faq .section-head{margin-bottom:0;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; padding:24px 40px 24px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:18.5px; font-stretch:104%;
  letter-spacing:-0.01em; transition:color .25s;
}
.faq-q:hover{color:var(--red);}
.faq-icon{position:absolute; right:4px; top:50%; width:13px; height:13px; margin-top:-6px;}
.faq-icon::before,.faq-icon::after{
  content:''; position:absolute; left:0; top:6px; width:13px; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease);
}
.faq-icon::after{transform:rotate(90deg);}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:rotate(0);}
.faq-a{overflow:hidden; height:0; transition:height .4s var(--ease);}
.faq-a p{color:var(--slate); font-size:15.5px; line-height:1.7; padding:0 32px 26px 0; max-width:620px;}

/* ---------- Contact ---------- */
.contact{background:var(--ink); color:var(--paper); border-bottom:0; padding:118px 0 110px;}
.contact .eyebrow{color:var(--red-soft);}
.contact .eyebrow::before{background:var(--red-soft);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:48px;}}
.contact h2{font-size:clamp(32px,4.6vw,54px); font-weight:900;}
.contact-copy p{color:rgba(247,246,243,0.6); margin-top:20px; font-size:16.5px; max-width:440px; line-height:1.65;}
.contact-direct{margin-top:44px; display:flex; flex-direction:column; gap:10px;}
.contact-direct .mono{font-size:10.5px; color:rgba(247,246,243,0.45);}
.copymail{
  display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  font-size:17px; font-weight:500; border-bottom:1px solid rgba(247,246,243,0.25);
  padding-bottom:5px; transition:border-color .25s, color .25s;
}
.copymail:hover{border-color:var(--red-soft); color:var(--red-soft);}
.copyhint{font-size:9.5px; color:rgba(247,246,243,0.45); border:1px solid rgba(247,246,243,0.2); padding:3px 7px; border-radius:2px;}

.contact-form{display:grid; gap:18px;}
.field{display:grid; gap:8px;}
.field label{font-size:12px; letter-spacing:0.02em; color:rgba(247,246,243,0.55);}
.field input,.field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--paper);
  background:rgba(247,246,243,0.04); border:1px solid rgba(247,246,243,0.16);
  padding:14px 16px; border-radius:2px; resize:vertical;
  transition:border-color .25s, background-color .25s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(247,246,243,0.3);}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--red-soft); background:rgba(247,246,243,0.07);}
.field.invalid input,.field.invalid textarea{border-color:var(--red);}
.field .err{font-size:11.5px; color:var(--red-soft); display:none;}
.field.invalid .err{display:block;}
.form-submit{margin-top:6px; justify-self:start; padding-left:34px; padding-right:34px;}
.form-note{font-size:10px; color:rgba(247,246,243,0.4); letter-spacing:0.06em;}
.form-note.ok{color:var(--red-soft);}

footer{padding:34px 0; background:var(--ink); color:rgba(247,246,243,0.5);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; flex-wrap:wrap; gap:12px;}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;}
.lightbox[hidden]{display:none;}
.lb-backdrop{position:absolute; inset:0; background:rgba(6,6,7,0.92); backdrop-filter:blur(8px); opacity:0; transition:opacity .35s;}
.lightbox.open .lb-backdrop{opacity:1;}
.lb-inner{
  position:relative; z-index:1; width:auto; min-width:min(92vw, 320px); max-width:min(94vw, 620px);
  display:flex; flex-direction:column; gap:14px;
  opacity:0; transform:scale(.96) translateY(12px);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.lightbox.open .lb-inner{opacity:1; transform:none;}
.lb-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; color:var(--paper);}
.lb-fmt{font-size:10px; color:var(--red-soft);}
.lb-title{font-family:var(--display); font-weight:700; font-size:20px; margin-top:5px; font-stretch:106%;}
.lb-actions{display:flex; gap:8px; align-items:center;}
.lb-btn{
  border:1px solid rgba(247,246,243,0.25); color:var(--paper);
  padding:8px 13px; font-size:10px; border-radius:2px;
  transition:background-color .25s, border-color .25s;
}
.lb-btn:hover{background:rgba(247,246,243,0.12); border-color:rgba(247,246,243,0.5);}
.lb-close{font-size:13px; padding:7px 11px; font-family:var(--body);}
.lb-stage{position:relative; display:flex; align-items:center; justify-content:center; min-height:45vh;}
.lb-stage video{
  height:auto; width:auto; max-height:74vh; max-width:100%;
  background:#000; border:1px solid rgba(247,246,243,0.14); border-radius:2px;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; color:var(--paper);
  background:rgba(10,10,11,0.6); border:1px solid rgba(247,246,243,0.22);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  transition:background-color .25s, transform .25s var(--ease);
}
.lb-nav:hover{background:var(--red); border-color:var(--red);}
.lb-nav.prev{left:-66px;}
.lb-nav.next{right:-66px;}
.lb-count{color:rgba(247,246,243,0.45); font-size:10px; text-align:center;}
@media (max-width:760px){
  .lb-inner{width:min(94vw, 400px);}
  .lb-nav.prev{left:6px;} .lb-nav.next{right:6px;}
  .lb-nav{width:40px; height:40px; background:rgba(10,10,11,0.75);}
}
body.lb-open{overflow:hidden;}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1; transform:none;}
  .split .w{transform:none; opacity:1;}
  .cursor{display:none !important;}
}