/* Insight Media Agency — global styles. Source of truth: DESIGN.md */

/* ---------- tokens ---------- */
:root{
  --color-bg:#0B0C0E;
  --color-bg-2:#101216;
  --color-surface:#15181D;
  --color-ink:#ECE6D8;
  --color-ink-soft:#9C988C;
  --color-ink-faint:#5E5B54;
  --color-primary:#E50914;
  --color-primary-hover:#FF1E2A;
  --color-border:rgba(236,230,216,0.10);
  --color-border-strong:rgba(236,230,216,0.18);
  --color-success:#7FB069;
  --color-danger:#E50914;

  --max:1200px;
  --gutter:64px;
  --measure:64ch;

  --xs:8px; --sm:16px; --md:24px; --lg:48px; --xl:80px; --xxl:128px;

  --fast:150ms; --base:280ms; --slow:600ms;
  --ease:cubic-bezier(0.22,1,0.36,1);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--color-primary);color:var(--color-bg)}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-0.01em}
.display{font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,6vw,5.5rem);line-height:1.04;letter-spacing:-0.02em}
.h1{font-size:clamp(2.2rem,4vw,3.4rem)}
.h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.h3{font-size:1.3rem}
em,.it{font-style:normal;color:var(--color-primary)}
.accent-word{font-style:normal;color:var(--color-primary)}

.lead{font-size:1.18rem;color:var(--color-ink-soft);max-width:var(--measure);line-height:1.55}
.body{max-width:var(--measure)}
.soft{color:var(--color-ink-soft)}
.faint{color:var(--color-ink-faint)}

/* mono eyebrow / labels */
.eyebrow{
  font-family:var(--mono);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--color-primary);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--color-primary);display:inline-block}
.eyebrow.no-rule::before{display:none}
.mono{font-family:var(--mono);letter-spacing:0.04em}
.micro{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--color-ink-faint)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.wide{max-width:1320px}
section{padding:var(--xxl) 0}
.section-head{margin-bottom:var(--lg)}
.section-head .h2{margin-top:var(--md);max-width:18ch}
.section-head .lead{margin-top:var(--md)}
.divider{height:1px;background:var(--color-border);width:100%}

.grid{display:grid;gap:var(--md)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease),padding var(--base) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,12,14,0.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  padding:16px var(--gutter);
}
.wordmark{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:-0.01em;display:flex;align-items:baseline;gap:7px}
.wordmark .ms{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.22em;color:var(--color-primary);text-transform:uppercase;transform:translateY(-2px)}
.logo-img{height:21px;width:auto;display:block;transition:height var(--base) var(--ease)}
.nav.scrolled .logo-img{height:18px}
.footer .logo-img{height:28px}
.mobile-menu .logo-img{height:24px}
.nav-links{display:flex;align-items:center;gap:var(--lg)}
.nav-links a{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;color:var(--color-ink-soft);text-transform:uppercase;transition:color var(--fast)}
.nav-links a:hover,.nav-links a.active{color:var(--color-ink)}
.nav-toggle{display:none;background:none;border:none;color:var(--color-ink);cursor:pointer;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase}

/* mobile overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--color-bg);
  display:flex;flex-direction:column;justify-content:center;gap:var(--md);
  padding:var(--gutter);
  opacity:0;pointer-events:none;transform:translateY(-12px);
  transition:opacity var(--base) var(--ease),transform var(--base) var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mobile-menu a{font-family:var(--serif);font-size:2rem;color:var(--color-ink);display:flex;align-items:baseline;gap:16px}
.mobile-menu a .idx{font-family:var(--mono);font-size:0.8rem;color:var(--color-primary)}

/* ---------- buttons ---------- */
.btn,.btn-solid{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;
  padding:15px 28px;border:1px solid var(--color-primary);
  transition:all var(--base) var(--ease);cursor:pointer;
}
.btn{color:var(--color-primary);background:transparent}
.btn:hover{background:var(--color-primary);color:#fff}
.btn-solid{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-solid:hover{background:#C20811;border-color:#C20811;color:#fff}
.btn .arrow,.btn-solid .arrow{transition:transform var(--base) var(--ease)}
.btn:hover .arrow,.btn-solid:hover .arrow{transform:translateX(4px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-ink);
  padding-bottom:4px;position:relative;
}
.btn-ghost::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--base) var(--ease)}
.btn-ghost:hover::after{transform:scaleX(1)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--md);align-items:center;margin-top:var(--lg)}

/* text link underline */
.link{color:var(--color-primary);position:relative}
.link:hover{color:var(--color-primary-hover)}

/* ---------- hero ---------- */
.hero{min-height:92vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding-bottom:var(--xl)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-grade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,12,14,0.55) 0%,rgba(11,12,14,0.2) 35%,rgba(11,12,14,0.85) 100%);}
.hero .wrap{position:relative;z-index:2}
.hero .display{max-width:16ch;margin-top:var(--md)}
.hero .lead{margin-top:var(--md)}
.scroll-cue{position:absolute;bottom:var(--lg);left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-ink-faint);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:40px;background:linear-gradient(var(--color-primary),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{opacity:.2;transform:scaleY(.4)}50%{opacity:1}100%{opacity:.2;transform:scaleY(.4)}}

/* cinematic placeholder panel (until real stills) */
.film-panel{
  position:relative;background:
    radial-gradient(120% 80% at 70% 20%,rgba(229,9,20,0.13),transparent 60%),
    linear-gradient(160deg,#15181D 0%,#0B0C0E 70%);
  border:1px solid var(--color-border);overflow:hidden;
}
.film-panel::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px);}
.film-panel .tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:0.68rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--color-ink-faint)}
.film-panel .rec{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.16em;color:var(--color-ink-soft)}
.film-panel .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-danger);animation:rec 1.6s infinite}
@keyframes rec{50%{opacity:.25}}
.ar-16-9{aspect-ratio:16/9}
.ar-3-2{aspect-ratio:3/2}
.ar-4-5{aspect-ratio:4/5}

/* ---------- cards ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border-strong);padding:var(--md);transition:transform var(--base) var(--ease),border-color var(--base) var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--color-primary)}

.service-block{padding:var(--lg) 0;border-top:1px solid var(--color-border)}
.service-block .idx{font-family:var(--mono);color:var(--color-primary);font-size:0.8rem;letter-spacing:0.1em}
.service-block .h2{margin:var(--sm) 0 var(--md)}
.deliverables{list-style:none;display:grid;gap:10px;margin-top:var(--md)}
.deliverables li{padding-left:24px;position:relative;color:var(--color-ink-soft)}
.deliverables li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--color-primary)}

/* work cards */
.work-card{display:block;group:work}
.work-card .thumb{overflow:hidden;border:1px solid var(--color-border)}
.work-card .thumb .film-panel{transition:transform var(--slow) var(--ease)}
.work-card:hover .thumb .film-panel{transform:scale(1.04)}
.work-card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--sm);gap:var(--md)}
.work-card .client{font-family:var(--serif);font-size:1.4rem}
.work-card .idx{font-family:var(--mono);font-size:0.72rem;color:var(--color-primary)}
.work-card .result{color:var(--color-ink-soft);margin-top:6px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lg);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--lg) 0}
.stat .num{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--color-ink)}
.stat .label{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-primary);margin-top:12px}
.stat .sub{color:var(--color-ink-soft);font-size:0.9rem;margin-top:8px}

/* logo strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lg);margin-top:var(--md)}
.logos span{font-family:var(--serif);font-size:1.15rem;color:var(--color-ink-faint);transition:color var(--fast)}
.logos span:hover{color:var(--color-ink-soft)}

/* quote */
.quote{max-width:24ch;margin:0 auto;text-align:center}
.quote .mark{font-family:var(--serif);color:var(--color-primary);font-size:3rem;line-height:0;display:block;margin-bottom:var(--md)}
.quote blockquote{font-family:var(--serif);font-style:normal;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.3;max-width:none}
.quote .attr{font-family:var(--mono);font-size:0.74rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-ink-soft);margin-top:var(--lg)}

/* founder note */
.founder{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--xl);align-items:center}
.founder .portrait{align-self:stretch}

/* cta block */
.cta{background:var(--color-bg-2);text-align:center;border-top:1px solid var(--color-border)}
.cta .display{margin:var(--md) auto 0;max-width:18ch}
.cta .btn-row{justify-content:center}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md);margin-top:var(--lg)}
.step .idx{font-family:var(--mono);color:var(--color-primary);font-size:0.8rem}
.step .h3{margin:var(--sm) 0 10px}
.step p{color:var(--color-ink-soft);font-size:0.95rem}

/* faq */
.faq{border-top:1px solid var(--color-border)}
.faq:last-child{border-bottom:1px solid var(--color-border)}
.faq button{width:100%;background:none;border:none;color:var(--color-ink);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:var(--md);
  padding:var(--md) 0;text-align:left;font-family:var(--serif);font-size:1.25rem}
.faq .toggle{font-family:var(--mono);color:var(--color-primary);font-size:1.2rem;transition:transform var(--base) var(--ease);flex-shrink:0}
.faq.open .toggle{transform:rotate(45deg)}
.faq .answer{max-height:0;overflow:hidden;transition:max-height var(--base) var(--ease)}
.faq .answer p{color:var(--color-ink-soft);padding-bottom:var(--md);max-width:var(--measure)}

/* form */
.field{margin-bottom:var(--lg)}
.field label{display:block;font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--color-primary);margin-bottom:12px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--color-border-strong);
  color:var(--color-ink);font-family:var(--sans);font-size:1.05rem;padding:10px 0;transition:border-color var(--fast)}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--color-primary)}
.field input::placeholder,.field textarea::placeholder{color:var(--color-ink-faint)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--color-border);padding:var(--xl) 0 var(--lg)}
.footer-top{display:flex;justify-content:space-between;gap:var(--xl);flex-wrap:wrap}
.footer .wordmark{font-size:1.6rem;margin-bottom:var(--sm)}
.footer .tagline{color:var(--color-ink-soft);max-width:30ch}
.footer-cols{display:flex;gap:var(--xl);flex-wrap:wrap}
.footer-col h4{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--color-ink-faint);margin-bottom:var(--md);font-weight:400}
.footer-col a{display:block;color:var(--color-ink-soft);margin-bottom:12px;font-size:0.95rem;transition:color var(--fast)}
.footer-col a:hover{color:var(--color-primary)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--md);
  margin-top:var(--xl);padding-top:var(--md);border-top:1px solid var(--color-border);flex-wrap:wrap}
.footer-bottom span{font-family:var(--mono);font-size:0.72rem;color:var(--color-ink-faint);letter-spacing:0.06em}

/* page hero (sub-pages) */
.page-hero{padding:calc(var(--xxl) + 40px) 0 var(--lg)}
.page-hero .display{margin-top:var(--md);max-width:18ch}
.page-hero .lead{margin-top:var(--md)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  :root{--gutter:48px;--xxl:96px;--xl:64px}
  .founder{grid-template-columns:1fr;gap:var(--lg)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  :root{--gutter:24px;--xxl:80px;--xl:56px;--lg:36px}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:var(--md)}
  .stat{padding:var(--md) 0;border-bottom:1px solid var(--color-border)}
  .steps{grid-template-columns:1fr}
  .footer-top{flex-direction:column;gap:var(--lg)}
  .hero{min-height:88vh}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}