/* ============================================================
   JMP MEDIA — home.css
   Homepage v2 — "Hybrid": lead with the lens, sell the system.
   Outcome-led hero · proof · differentiator · Attract/Convert/
   Compound · services-as-navigation · verticals · growth quiz band.
   Builds on brand.css / themes.css tokens. Loads last.
   ============================================================ */

/* ---- local light/dark skins for the new sections (don't use
   .skin — dir-signature overrides it; set tokens locally instead) ---- */
.home-light{
  --bg:var(--bone); --fg:var(--ink);
  --muted:rgba(26,20,17,0.64); --hair:rgba(26,20,17,0.13);
  --seam:var(--brass-2); --accent:var(--bordeaux); --accent-fg:var(--bone);
  background:var(--bg); color:var(--fg);
}
.home-bone2{ background:var(--bone-2); }
.home-light .eyebrow{ color:var(--brass-2); }
.home-light .section-head h2 em{ color:var(--bordeaux); }

/* ============================================================
   NAV — brass-outlined "Free Growth Audit" CTA
   ============================================================ */
.nav__cta--audit{
  background:transparent; color:var(--brass); border-color:var(--brass);
}
.nav__cta--audit::after{ border-color:rgba(184,147,90,0.0); }
.nav__cta--audit:hover{ background:rgba(184,147,90,0.12); color:var(--champagne); transform:translateY(-2px); }
.nav__cta--audit:hover::after{ border-color:rgba(184,147,90,0.0); }

/* ============================================================
   HERO — bordeaux→oxblood gradient, grain, proof + work strip
   ============================================================ */
.home-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,var(--bordeaux) 0%,var(--oxblood) 100%);
  color:var(--bone);
  padding-top:calc(var(--nav-h) + clamp(46px,9vw,104px));
  padding-bottom:clamp(48px,7vw,86px);
}
.home-hero::before{ /* grain */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.5) 1px,transparent 1px);
  background-size:3px 3px; opacity:0.09; mix-blend-mode:overlay;
}
.home-hero::after{ /* brass glow upper-right */
  content:''; position:absolute; right:-10%; top:-24%; width:58%; height:150%; z-index:0;
  background:radial-gradient(ellipse at center,rgba(184,147,90,0.20) 0%,rgba(0,0,0,0) 64%);
  pointer-events:none;
}
.home-hero .wrap{ position:relative; z-index:2; }
.home-hero__eyebrow{ color:var(--brass); }
.home-hero h1{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(44px,7.2vw,92px); line-height:1.0; letter-spacing:0.004em;
  color:var(--champagne); max-width:14ch; margin:clamp(20px,3vw,30px) 0 0; text-wrap:balance;
}
.home-hero h1 .u{ color:var(--bone); font-style:normal; }
.home-hero__sub{
  font-family:var(--serif); font-weight:400; font-size:clamp(18px,2.1vw,23px);
  line-height:1.5; color:var(--bone); opacity:0.92; max-width:31em;
  margin-top:clamp(18px,2.4vw,26px);
}
.home-hero__actions{
  margin-top:clamp(26px,3.4vw,38px); display:flex; flex-wrap:wrap;
  align-items:center; gap:18px;
}
.home-hero .btn--brass{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.home-hero .btn--brass::after{ border-color:rgba(15,14,13,0.22); }
.home-hero .btn--brass:hover{ background:var(--champagne); transform:translateY(-2px); }
.home-hero .tlink{ color:var(--champagne); }

/* proof stats — pulled up into the hero */
.hstats{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:clamp(34px,4vw,46px);
  border-top:1px solid rgba(184,147,90,0.34); width:fit-content; max-width:100%;
}
.hstats .hs{
  padding:clamp(18px,2.2vw,24px) clamp(28px,3.4vw,46px) 4px 0;
  margin-right:clamp(28px,3.4vw,44px);
  border-right:1px solid rgba(184,147,90,0.26);
}
.hstats .hs:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hstats .f{
  font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.4vw,44px);
  color:var(--brass); line-height:1; margin-bottom:7px;
}
.hstats .l{
  font-family:var(--serif); font-style:italic; font-size:clamp(12px,1.4vw,13.5px);
  color:var(--champagne); opacity:0.86; line-height:1.36; max-width:13em;
}

/* 4-tile work strip (placeholders → real reels drop in) */
.media-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,13px);
  margin-top:clamp(34px,4.4vw,50px); position:relative; z-index:2;
}
.media-strip .frame{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  border:1px solid rgba(232,220,196,0.22); display:block;
}
.media-strip .frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); filter:saturate(0.82) brightness(0.78);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter 1.1s ease;
}
.media-strip .frame:hover img{ transform:scale(1.0); filter:saturate(1) brightness(0.92); }
.media-strip .frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(8,7,6,0.7));
}
.media-strip .frame .tag{
  position:absolute; bottom:clamp(8px,1vw,12px); left:clamp(10px,1.2vw,14px); z-index:2;
  font-family:var(--sans); font-size:clamp(8.5px,1vw,10px); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--champagne); opacity:0.92;
}
.media-strip .frame .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.86);
  width:46px; height:46px; border:1px solid rgba(245,239,227,0.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--bone);
  opacity:0; transition:opacity .5s ease,transform .5s ease; z-index:2;
}
.media-strip .frame .play .ico{ width:15px; height:15px; }
.media-strip .frame:hover .play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* anonymization flag note */
.hmicro{
  margin-top:clamp(16px,2vw,22px); display:flex; align-items:flex-start; gap:10px;
  font-family:'DM Sans',var(--sans); font-size:11px; letter-spacing:0.02em;
  color:rgba(232,220,196,0.62); line-height:1.45; max-width:64ch;
}
.hmicro::before{
  content:''; flex-shrink:0; margin-top:5px; width:7px; height:7px; border-radius:50%;
  background:var(--brass); box-shadow:0 0 0 3px rgba(184,147,90,0.22);
}

@media (max-width:680px){
  .media-strip{ grid-template-columns:repeat(2,1fr); }
  .hstats{ width:100%; }
  .hstats .hs{ flex:1 1 40%; padding-right:clamp(14px,4vw,24px); margin-right:clamp(14px,4vw,24px); }
}

/* ============================================================
   DIFFERENTIATOR — "Not a camera for hire."
   ============================================================ */
.diff .wrap{
  display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,72px); align-items:center;
}
@media (min-width:900px){ .diff .wrap{ grid-template-columns:1fr 1fr; } }
.diff__lead{
  font-family:var(--serif); font-size:clamp(17px,1.9vw,19.5px); line-height:1.62;
  color:var(--ink-2); max-width:36em; margin-top:24px;
}
.diff__lead strong{ color:var(--bordeaux); font-weight:600; }
.vs{ display:flex; flex-direction:column; border-top:1px solid var(--hair); }
.vrow{
  display:grid; grid-template-columns:8.5em 1fr; gap:clamp(14px,2vw,24px);
  padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--hair); align-items:start;
}
.vrow .x{
  font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.7vw,18px);
  color:var(--brass-2); white-space:nowrap;
}
.vrow .t{
  font-family:var(--serif); font-size:clamp(14.5px,1.6vw,16.5px); line-height:1.5; color:var(--ink-2);
}
.vrow .t em{ font-style:italic; color:var(--bordeaux); }
.vrow.us{ background:linear-gradient(90deg,rgba(92,21,24,0.05),rgba(92,21,24,0)); }
.vrow.us .x{ color:var(--bordeaux); font-weight:600; font-style:normal; font-family:var(--sans);
  font-size:clamp(13px,1.5vw,15px); letter-spacing:0.04em; }

/* ============================================================
   HOW IT WORKS — Attract. Convert. Compound.
   ============================================================ */
.flow{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,40px); margin-top:clamp(40px,5.5vw,66px); }
@media (min-width:780px){ .flow{ grid-template-columns:repeat(3,1fr); gap:0; } }
.fstep{ position:relative; padding:clamp(4px,1vw,10px) clamp(24px,2.6vw,40px) clamp(20px,2.4vw,30px) 0; }
@media (min-width:780px){
  .fstep{ padding-left:clamp(26px,2.6vw,40px); }
  .fstep + .fstep{ border-left:1px solid var(--hair); }
  .fstep:first-child{ padding-left:0; }
}
.fstep .n{ font-family:var(--serif); font-style:italic; font-size:clamp(46px,5.4vw,68px); line-height:0.9; color:var(--brass-2); }
.fstep h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,30px); color:var(--bordeaux); margin:clamp(12px,1.4vw,16px) 0 0; }
.fstep p{ font-family:var(--serif); font-size:clamp(15px,1.6vw,16.5px); line-height:1.56; color:var(--ink-2); margin:11px 0 0; max-width:30ch; }
.fstep p em{ font-style:italic; color:var(--brass-2); }
.fstep .bar{ height:2px; background:var(--brass); width:42px; margin-top:clamp(16px,2vw,22px); opacity:0.75; }

/* ============================================================
   VERTICALS — "Built around your industry."
   ============================================================ */
.verts{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,14px); margin-top:clamp(28px,3.4vw,40px); }
.vert{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--brass); color:var(--bordeaux);
  font-family:var(--sans); font-size:clamp(12px,1.4vw,14px); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; padding:13px 22px;
  transition:background .4s ease,color .4s ease,transform .4s ease;
}
.vert .ar{ width:14px; height:14px; opacity:0; transform:translateX(-6px); transition:opacity .4s ease,transform .4s ease; }
.vert:hover{ background:var(--bordeaux); color:var(--bone); transform:translateY(-2px); }
.vert:hover .ar{ opacity:1; transform:translateX(0); }

/* ============================================================
   QUIZ / CTA BAND — dark gradient
   ============================================================ */
.quiz-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--bordeaux) 0%,var(--oxblood) 100%); color:var(--bone);
}
.quiz-band::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.5) 1px,transparent 1px);
  background-size:3px 3px; opacity:0.09; mix-blend-mode:overlay;
}
.quiz-band .wrap{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,50px);
  align-items:center; padding-block:clamp(56px,7vw,92px);
}
@media (min-width:860px){ .quiz-band .wrap{ grid-template-columns:1.35fr 1fr; } }
.quiz-band .eyebrow{ color:var(--brass); }
.quiz-band h2{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(34px,4.6vw,52px); line-height:1.06; color:var(--champagne);
  margin:clamp(16px,2vw,22px) 0 0; text-wrap:balance;
}
.quiz-band p{
  font-family:var(--serif); font-size:clamp(16px,1.8vw,18.5px); line-height:1.56;
  color:var(--bone); opacity:0.9; margin-top:16px; max-width:34em;
}
.quiz-band__right{ display:flex; flex-direction:column; gap:14px; }
@media (min-width:860px){ .quiz-band__right{ align-items:flex-end; text-align:right; } }
.quiz-band .btn--brass{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.quiz-band .btn--brass::after{ border-color:rgba(15,14,13,0.22); }
.quiz-band .btn--brass:hover{ background:var(--champagne); transform:translateY(-2px); }
.quiz-band__sub{ font-family:var(--sans); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(232,220,196,0.7); }

/* the 60-sec quiz line gets a subtle progress motif */
.quiz-meter{ display:flex; gap:6px; margin-top:6px; }
.quiz-band__right .quiz-meter{ justify-content:flex-end; }
.quiz-meter span{ width:26px; height:3px; background:rgba(184,147,90,0.35); }
.quiz-meter span:first-child{ background:var(--brass); }