/* Film leads; the interface supports it. Roboto remains the site's type anchor. */
:root{
  --ink:#f0f1e9;
  --muted:#acb8af;
  --surface-border:rgba(185,210,194,.19);
  --surface-shadow:inset 0 1px 0 rgba(232,248,238,.07),0 8px 24px rgba(0,0,0,.16);
  --radius-lg:10px;
}
header{background:linear-gradient(165deg,rgba(32,46,37,.94),rgba(13,24,17,.93));border-color:rgba(185,210,194,.24);box-shadow:inset 0 1px 0 rgba(232,248,238,.09),0 8px 24px rgba(0,0,0,.22)}
.hero-stage h1{font-size:clamp(3.5rem,6.7vw,7.25rem);font-weight:450;letter-spacing:-.045em;line-height:1.04;max-width:20ch}
.hero-stage h1 .accent{font-weight:550;color:#c0ddc8}
.hero-stage .trust-badge{font-size:.75rem;border-radius:8px;background:rgba(19,32,24,.88)}
.hero-meta{color:#c0c9c2}
.sec-head{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:64px;max-width:none;margin-bottom:42px}
.sec-head h2{font-size:clamp(2rem,3.4vw,3rem);font-weight:450;line-height:1.12;letter-spacing:-.035em;max-width:21ch}
.sec-head p{margin:0;max-width:42ch;color:var(--muted);font-size:.9375rem;line-height:1.65}
section:not(.hero){border-top-color:rgba(185,210,194,.1)}

/* Restrained, repeated light and grain replace the heavier green glow. */
.metric,.tier,.quote,.portfolio-mini-card{position:relative;isolation:isolate;border-radius:10px;background:linear-gradient(155deg,#1c2b22,#111c15);box-shadow:var(--surface-shadow)}
.metric:after,.tier:after,.quote:after,.portfolio-mini-card:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:url('assets/film-grain.svg') repeat;opacity:.045}
.metric{padding:26px 24px 22px}
.metric:before{background:none}
.metric-label{font-size:.6875rem;line-height:1.3;letter-spacing:.1em;color:#b6d2be}
.metric .n{margin-top:18px;font-weight:500;color:var(--ink)}
.metric .l{font-size:.8125rem;line-height:1.6;max-width:26ch}
.metric-client{font-size:.625rem;letter-spacing:.07em;color:#acb8af;padding-top:15px;margin-top:22px}
.metric.feat{background:linear-gradient(155deg,#243c2e,#14261b);border-color:rgba(185,210,194,.35);box-shadow:var(--surface-shadow)}
.metric.feat .n{text-shadow:none}
.metric:hover{transform:translateY(-3px);border-color:rgba(185,210,194,.4);box-shadow:inset 0 1px 0 rgba(232,248,238,.1),0 12px 28px rgba(0,0,0,.2)}

/* A varied film grid, with the small reference rows kept four across. */
.work{grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 28px;align-items:start}
.work .film:nth-child(4n+1),.work .film:nth-child(4n+4){grid-column:span 7}
.work .film:nth-child(4n+2),.work .film:nth-child(4n+3){grid-column:span 5}
.work .film:nth-child(even){margin-top:48px}
.poster{border-radius:10px;border-color:rgba(185,210,194,.22)}
.views{padding:5px 8px;font-size:.6875rem;background:rgba(13,25,18,.88);border-radius:5px;backdrop-filter:blur(8px)}
.meta{padding:16px 0 18px;border-color:rgba(185,210,194,.15)}
.meta:after{content:none}
.meta h3{font-size:1.0625rem;font-weight:550;line-height:1.4;letter-spacing:-.015em}
.meta p{font-size:.8125rem;color:var(--muted)}
.play{font-size:0;width:36px;height:36px;border-radius:8px;background:rgba(24,39,29,.9);box-shadow:inset 0 1px 0 rgba(232,248,238,.1)}
.play:before,.portfolio-watch span{content:'';display:inline-block;width:7px;height:7px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:rotate(45deg)}
.portfolio-watch span{font-size:0;flex:0 0 7px}
.portfolio-row{margin-top:52px}
.portfolio-row+.portfolio-row{margin-top:32px}
.portfolio-row-head h3{font-weight:500;color:#d5dfd7}
.portfolio-row-rule{background:linear-gradient(90deg,rgba(185,210,194,.24),rgba(185,210,194,.03))}
.portfolio-mini-card{padding:7px;border-color:rgba(185,210,194,.16)}
.portfolio-mini-preview{border-radius:5px}
.portfolio-mini-copy{padding:14px 8px 8px}
.portfolio-mini-copy h4{font-weight:550}
.portfolio-mini-copy p{color:var(--muted)}
.portfolio-watch{color:#c1d8c8;gap:10px}

.tier{padding:30px 26px}
.tier.feat{background:linear-gradient(155deg,#263e2f,#15261b);border-color:rgba(185,210,194,.4);box-shadow:inset 0 1px 0 rgba(232,248,238,.14),0 14px 36px rgba(0,0,0,.2)}
.tier-ribbon{color:#c2ddca;font-weight:600;letter-spacing:.015em}
.tier h3{font-weight:500;letter-spacing:-.025em}
.tier-summary,.price-caption{color:var(--muted)}
.tier-detail strong{color:#e0e9e2;font-weight:500}
.includes-label{color:#c4cec7}
.tier li{color:#c4cec7}
.quote{padding:28px}
.quote p{font-size:1.0625rem;line-height:1.7}
.founder .photo{border-radius:10px}
.founder h2{font-weight:450;letter-spacing:-.035em}

/* Quiet reading areas give the imagery room to stand out. */
#faq>.wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
#faq .sec-head{display:block;margin:0}
.faq{max-width:none;border-top:1px solid rgba(185,210,194,.22)}
.q{border:0;border-bottom:1px solid rgba(185,210,194,.16);border-radius:0;padding:0;margin:0;background:none;box-shadow:none}
.q button{font-size:1rem;font-weight:500;padding:23px 0;gap:24px}
.q .ico{font-size:0;display:block;width:8px;height:8px;flex:0 0 8px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:rotate(135deg);margin:0 4px 4px;color:#b9cdbf}
.q.open .ico{transform:rotate(-45deg);margin-bottom:0}
.q .a p{font-size:.9375rem;line-height:1.7;padding:0 28px 24px 0}
.launch-card{border-radius:10px;border-color:rgba(185,210,194,.25)}
.launch-copy h2{font-weight:450;letter-spacing:-.035em}
.launch-copy p{color:#ccd9ce}
footer{background:linear-gradient(#0d1a12,#090f0c)}

@media(max-width:1060px){.sec-head{gap:36px}.tier{padding:26px 20px}#faq>.wrap{gap:40px}.metric{padding:24px 20px}}
@media(max-width:860px){
  .hero-stage h1{font-size:clamp(3rem,8vw,4.5rem)}
  .sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:32px}
  .sec-head h2{max-width:24ch}
  .work{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .work .film:nth-child(n){grid-column:auto;margin-top:0}
  #faq>.wrap{grid-template-columns:1fr;gap:32px}
}
@media(max-width:560px){
  .hero-stage h1{font-size:clamp(2.5rem,10.5vw,3.5rem)}
  .work{grid-template-columns:1fr;gap:28px}
  .metric{padding:22px 17px 18px}
  .metric-label{font-size:.625rem}.metric .l{font-size:.75rem}.metric-client{font-size:.5625rem;letter-spacing:.04em}
  .portfolio-row{margin-top:36px}
  .q button{font-size:.9375rem}
}
@media(prefers-reduced-motion:reduce){.metric:hover{transform:none}.q .ico{transition:none}}

/* Let the statistics glow dissolve into the work section and its dot texture. */
.results-section{position:relative;isolation:isolate;background:none}
.results-section::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(130% 150% at 50% -30%,#15271c 0%,#0b130e 58%);mask-image:linear-gradient(transparent 0%,#000 110px,#000 48%,transparent 100%);-webkit-mask-image:linear-gradient(transparent 0%,#000 110px,#000 48%,transparent 100%)}
.results-section + #work{border-top:0}