/* ==========================================================================
   Front page — "Dark Editorial Hybrid". Loaded only on the front page.
   Dark: hero, featured projects, final band. Light/paper: process, reviews.
   ========================================================================== */
body.home{ background:var(--ink); }
body.home::before{ display:none; }
.home-body{ font-family:var(--f-body); }

/* section rhythm */
.home-body .section{ padding:clamp(80px,11vw,120px) 0; }

/* eyebrow */
.home-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-label); font-weight:600; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red-bright); margin:0 0 18px;
}
.home-eyebrow::before{ content:""; width:26px; height:2px; background:var(--red-bright); border-radius:2px; }

/* ===================== HERO (dark) ===================== */
.home-hero{ background:var(--ink); color:var(--cream); border-bottom:1px solid var(--ink-line); }
.home-hero .hero-wrap{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0; padding:0; }
.home-hero .hero-wrap::before{ display:none !important; }
/* The header is sticky (in normal flow) so it already occupies its height —
   this is just breathing room, not header clearance (removing the eyebrow made
   the old calc(88px+60px) read as an excessive gap). */
.home-hero .container{ padding-top:clamp(28px,4vw,60px); padding-bottom:clamp(56px,8vw,96px); }
.home-hero .hero-grid{ grid-template-columns:1fr; gap:52px; padding:0; align-items:center; }
/* leftover AI device-mockup image removed — clean editorial text hero */
.home-hero .hero-media{ display:none !important; }
.home-hero .pill{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06);
  border:1px solid var(--ink-line); color:rgba(242,240,236,.85); border-radius:2px;
  font-family:var(--f-label); font-weight:500; font-size:12.5px; padding:8px 14px;
}
.home-hero h1{
  font-family:var(--f-serif); font-weight:500; color:var(--cream);
  font-size:clamp(38px,6vw,80px); line-height:1.08; letter-spacing:-.015em; margin:0; max-width:15ch;
}
.home-hero h1 .accent{ font-style:italic; color:var(--red-bright); font-weight:500; }
.home-hero .lead{ color:rgba(242,240,236,.66); font-size:clamp(16px,1.6vw,19px); line-height:1.55; max-width:52ch; margin-top:20px; }
.home-hero .hero-cta{ margin-top:28px; align-items:center; }
.home-hero .hero-cta .tag{
  background:transparent; border:0; color:rgba(242,240,236,.5); font-family:var(--f-label); font-weight:500; padding:0 4px;
}
.home-hero .proof{ margin-top:34px; gap:12px; }
.home-hero .kpi{
  background:rgba(255,255,255,.04); border:1px solid var(--ink-line); border-radius:2px; padding:14px 16px; min-width:150px;
}
.home-hero .kpi b{ font-family:var(--f-label); font-weight:600; color:var(--cream); font-size:16px; }
.home-hero .kpi span{ color:rgba(242,240,236,.5); font-weight:500; }

/* hero buttons → red pill / ghost */
.home-body .btn{ border-radius:2px !important; font-family:var(--f-label); font-weight:600; box-shadow:none; }
.home-hero .btn.primary{ background:var(--red); border:1px solid var(--red); color:#fff; }
.home-hero .btn.primary:hover{ background:var(--red-bright); border-color:var(--red-bright); transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(181,18,27,.6); }
.home-hero .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--cream); }
.home-hero .btn.ghost:hover{ border-color:var(--cream); background:rgba(255,255,255,.05); }

/* hero media panel */
.home-hero .hero-media{ border:1px solid var(--ink-line); border-radius:2px; background:var(--ink-soft); box-shadow:0 40px 90px -40px rgba(0,0,0,.8); overflow:hidden; }
.home-hero .hero-media-placeholder, .home-hero .hero-media-image{ border-radius:0; }
.home-hero .hero-media-placeholder{ background:radial-gradient(600px 300px at 30% 20%, rgba(181,18,27,.16), transparent 60%), var(--ink-soft); height:340px; }

/* ===================== FEATURED (dark) ===================== */
.home-featured{ background:var(--ink); color:var(--cream); }
.home-featured h2{ font-family:var(--f-serif); font-weight:500; color:var(--cream); font-size:clamp(28px,3.4vw,46px); letter-spacing:-.01em; margin:0; }
.home-body .home-featured .sub{ color:rgba(242,240,236,.6); max-width:70ch; margin-top:14px; }
.home-featured .grid3{ margin-top:44px; gap:20px; }
.home-featured .case-card{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:2px; box-shadow:none; padding:0; overflow:hidden;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s; display:flex; flex-direction:column;
}
.home-featured .case-card:hover{ transform:translateY(-6px); border-color:rgba(212,34,44,.5); box-shadow:0 30px 70px -30px rgba(0,0,0,.7), 0 24px 60px -24px rgba(181,18,27,.35); }
.home-featured .proj-thumb{ border-radius:0; border:0; border-bottom:1px solid var(--ink-line); aspect-ratio:16/10; background-size:cover; background-position:center top; }
.home-featured .case-card h3{ font-family:var(--f-label); font-weight:600; color:var(--cream); font-size:18px; margin:18px 18px 4px; }
.home-featured .case-card .meta{ color:rgba(242,240,236,.5); font-family:var(--f-label); font-weight:500; margin:0 18px; }
.home-featured .case-card .list{ margin:12px 18px 0; }
.home-featured .case-card .list li{ color:rgba(242,240,236,.72); }
.home-featured .check{ background:rgba(212,34,44,.16); border:0; }
.home-featured .check::before{ color:var(--red-bright); }
.home-featured .card-actions{ margin:16px 18px 18px; margin-top:auto; padding-top:16px; }
.home-featured .btn.primary{ background:var(--red); border:1px solid var(--red); color:#fff; }
.home-featured .btn.primary:hover{ background:var(--red-bright); border-color:var(--red-bright); }
.home-featured .btn:not(.primary){ background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--cream); }

/* ===================== PROCESS (light/paper) ===================== */
.home-process{ background:var(--paper); color:var(--charcoal); }
.home-process h2{ font-family:var(--f-serif); font-weight:500; color:var(--charcoal); font-size:clamp(28px,3.4vw,46px); letter-spacing:-.01em; margin:0; }
.home-body .home-process .sub{ color:#57545d; max-width:70ch; margin-top:14px; }
.home-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:48px; }
/* minmax(0,1fr) + min-width:0 lets each track shrink and wrap instead of
   overflowing (which was clipping the 4th step's text on wide desktops). */
.home-step{ border-top:1px solid var(--paper-line); padding-top:22px; min-width:0; }
.home-step h3, .home-step p{ overflow-wrap:break-word; }
.home-step .n{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--red); font-size:44px; line-height:1; }
.home-step h3{ font-family:var(--f-label); font-weight:600; color:var(--charcoal); font-size:18px; margin:16px 0 6px; }
.home-step p{ color:#57545d; font-size:14.5px; line-height:1.55; margin:0; }
.home-process .cta-band{
  margin-top:56px; background:var(--charcoal) !important; border:0 !important; border-radius:2px;
  box-shadow:0 40px 80px -40px rgba(181,18,27,.4); padding:clamp(26px,3.5vw,42px) !important; color:var(--cream);
}
.home-process .cta-band h3{ font-family:var(--f-serif); font-weight:500; color:var(--cream); font-size:clamp(22px,2.4vw,30px); }
.home-process .cta-band p{ color:rgba(242,240,236,.66); }
.home-process .cta-band .btn.primary{ background:var(--red); border:1px solid var(--red); color:#fff; }
.home-process .cta-band .btn:not(.primary){ background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--cream); }

/* ===================== REVIEWS (light/paper) ===================== */
.home-reviews{ background:var(--paper); color:var(--charcoal); border-top:1px solid var(--paper-line); }
.home-reviews h2{ font-family:var(--f-serif); font-weight:500; color:var(--charcoal); font-size:clamp(28px,3.4vw,46px); letter-spacing:-.01em; margin:0; }
/* .home-body prefix (0,3,0) beats the legacy `.section p.sub{color:var(--muted)}`
   (0,2,1) in style.css that was leaking slate #475569 onto these subtitles. */
.home-body .home-reviews .sub{ color:#57545d; max-width:70ch; margin-top:14px; }
.home-reviews .grid2{ margin-top:44px; }
.home-reviews .card{ background:var(--paper-soft); border:1px solid var(--paper-line); border-radius:2px; box-shadow:none; transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
/* restrained hover (hairline warms to red) — like the Services cards, not the portfolio glow */
.home-reviews .card:hover{ border-color:rgba(181,18,27,.4); box-shadow:0 18px 40px -26px rgba(17,17,17,.2); transform:translateY(-3px); }
.home-reviews .quote p{ font-family:var(--f-serif); font-weight:400; font-style:italic; color:var(--charcoal); font-size:19px; line-height:1.5; }
.home-reviews .quote b{ font-family:var(--f-label); font-weight:600; color:#57545d; margin-top:12px; }
/* gold quote-mark glyph replaces the old empty pink avatar box (no client photos exist) */
.home-reviews .avatar{ background:transparent !important; border:0 !important; width:44px; min-width:44px; height:auto; }
.home-reviews .avatar::before{ content:"\201C"; display:block; font-family:var(--f-serif); font-weight:600; font-size:58px; line-height:.72; color:var(--gold); margin-top:-4px; }

/* ===================== word-reveal (hero) ===================== */
/* overflow:visible + a little bottom room so descenders (the "y" tails) are
   never clipped by the per-word wrapper. */
.reveal-words .w{ display:inline-block; overflow:visible; vertical-align:top; padding-bottom:.08em; }
/* Hidden start state only when JS is confirmed running (html.js). Without JS —
   or if motion.js fails — the headline renders fully visible, never blurred. */
html.js .reveal-words .wi{ display:inline-block; opacity:0; transform:translateY(24px); filter:blur(6px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s; }
.reveal-words.is-in .wi{ opacity:1 !important; transform:none !important; filter:none !important; }

/* ===================== responsive ===================== */
@media (max-width:980px){
  .home-hero .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .home-hero .hero-media{ display:none; }
  .home-steps{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .home-featured .grid3{ grid-template-columns:1fr; }
  .home-reviews .grid2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .home-steps{ grid-template-columns:1fr; }
  .home-hero .container{ padding-top:calc(64px + 40px); }
}
@media (prefers-reduced-motion:reduce){
  .reveal-words .wi{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .home-featured .case-card, .home-body .btn{ transition:none !important; }
}

/* ===================== SIGNATURE "WOW" — Home ===================== */
/* 2. keyword marquee under the hero */
.home-marquee{ background:var(--ink); border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line); overflow:hidden; }
.home-marquee .mq-track{ display:flex; width:max-content; will-change:transform; animation:wow-scroll 52s linear infinite; }
.home-marquee:hover .mq-track{ animation-play-state:paused; }
.home-marquee .mq-item{ display:inline-flex; align-items:center; gap:34px; padding:16px 34px 16px 0;
  font-family:var(--f-label); font-weight:600; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); white-space:nowrap; }
.home-marquee .mq-item::before{ content:""; width:6px; height:6px; flex:0 0 6px; border-radius:2px; background:var(--red-bright); box-shadow:0 0 10px 1px rgba(212,34,44,.6); }

/* 3. featured card — animated gradient border trace + stronger red ambient glow */
.home-featured .case-card{ position:relative; }
.home-featured .case-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:2; pointer-events:none;
  background:conic-gradient(from var(--wow-angle), transparent 0deg, var(--red) 70deg, var(--red-bright) 150deg, var(--gold) 235deg, transparent 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity .4s ease;
}
.home-featured .case-card:hover::after{ opacity:1; animation:wow-trace 3s linear infinite; }
.home-featured .case-card:hover{ box-shadow:0 30px 70px -30px rgba(0,0,0,.7), 0 26px 62px -22px rgba(181,18,27,.55) !important; }

@media (prefers-reduced-motion:reduce){
  .home-marquee .mq-track{ animation:none; transform:none; width:auto; flex-wrap:wrap; justify-content:center; gap:8px 0; padding:6px 16px; }
  .home-featured .case-card::after{ transition:none; }
  .home-featured .case-card:hover::after{ animation:none; }
}