/* ============================================================
   ErinVentures — Section & content styles
   LIGHT / EDITORIAL · ink + gold on cream
   ============================================================ */

/* ---------- Hero (INK editorial: dark, gold aurora, framed B&W portrait) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--ev-ink-800); color: var(--fg-on-dark); }
.hero-aurora { position:absolute; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(46% 52% at 86% 14%, rgba(218,165,32,0.22) 0%, transparent 60%),
  radial-gradient(40% 46% at 4% 98%, rgba(168,125,18,0.16) 0%, transparent 62%);
  animation: heroGlow 10s ease-in-out infinite; }
@keyframes heroGlow { 0%,100%{opacity:.82;} 50%{opacity:1;} }
.hero-grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.6;
  background-image: radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 4px 4px; }
.hero .wrap { position: relative; z-index: 2; padding-top: 132px; padding-bottom: clamp(56px,8vh,104px); width: 100%;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px,4.5vw,60px); align-items: center; }
.hero-copy { min-width: 0; }
.hero .eyebrow { color: var(--accent-soft); }
.hero-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 5.4vw, 96px); line-height: 0.98; letter-spacing: -0.025em; text-transform: uppercase;
  word-break: keep-all; overflow-wrap: normal; hyphens: none;
  color: #fff; margin: 22px 0 0; max-width: 20ch;
}
.hero-title .em { color: var(--accent-soft); font-style: normal; }
.hero-sub { margin-top: 26px; max-width: 46ch; font-size: clamp(17px,1.5vw,20px); line-height: 1.6; color: var(--fg-on-dark-2); }
.hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: clamp(36px,5vh,56px); display: flex; gap: clamp(20px,3vw,44px); flex-wrap: wrap; align-items: baseline; }
.hero-meta .hm { display: flex; flex-direction: column; gap: 6px; }
.hero-meta .hm .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px,3vw,42px); line-height: 1; letter-spacing: -0.02em; color: #fff; }
.hero-meta .hm .n .accent { color: var(--accent-soft); }
.hero-meta .hm .c { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-dark-2); }
.hero-meta .hm + .hm { padding-left: clamp(20px,3vw,44px); border-left: 1px solid rgba(244,242,234,0.16); }

/* Framed editorial portrait — black & white so the violet studio backdrop reads ink, not purple */
.hero-portrait { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 0.92/1;
  box-shadow: var(--shadow-lg); background: var(--ev-ink-700);
  border: 1px solid rgba(244,242,234,0.12); }
.hero-portrait img { width:100%; height:100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.05) brightness(1.02); }
.hero-portrait::after { content:''; position:absolute; inset:0; background:
  linear-gradient(180deg, transparent 55%, rgba(14,17,15,0.42) 100%); }
.hero-portrait .frame-tag { position:absolute; left:16px; bottom:16px; z-index:2;
  font-family: var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:#fff; background: rgba(14,17,15,0.5); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,0.16); border-radius: var(--r-pill); padding:8px 14px; }

/* Hero layout variants (tweakable) */
body[data-hero="stacked"] .hero .wrap { grid-template-columns: 1fr; max-width: 1000px; }
body[data-hero="stacked"] .hero-portrait { display: none; }
body[data-hero="centered"] .hero .wrap { grid-template-columns: 1fr; max-width: 920px; text-align: center; justify-items: center; }
body[data-hero="centered"] .hero-portrait { display: none; }
body[data-hero="centered"] .hero-title { max-width: none; }
body[data-hero="centered"] .hero-sub { margin-left:auto; margin-right:auto; }
body[data-hero="centered"] .hero-cta, body[data-hero="centered"] .hero-meta { justify-content: center; }
body[data-hero="centered"] .eyebrow { justify-content: center; }

@media (max-width: 860px){
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-portrait { max-width: 360px; order: -1; }
}
@media (min-width: 861px) and (max-width: 1180px){
  .hero-title { font-size: clamp(26px, 4vw, 46px); }
}

/* ---------- Generic section header ---------- */
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 64ch; margin-bottom: clamp(40px,5vw,64px); }
.sec-head.center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.stats .stat { padding: 0 clamp(14px,2vw,30px); }
.stats .stat:first-child { padding-left: 0; }
.stats .stat + .stat { border-left: 1px solid var(--border-1); }
.section-dark .stats .stat + .stat { border-left-color: var(--border-dark); }
.stats .stat .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px,4vw,60px); line-height: 1; letter-spacing: -0.02em; }
.stats .stat .n .accent { color: var(--accent); }
.section-dark .stats .stat .n .accent { color: var(--accent-soft); }
.stats .stat .c { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-top: 14px; }
.section-dark .stats .stat .c { color: rgba(244,242,234,0.55); }
@media (max-width: 760px){ .stats { grid-template-columns: repeat(2,1fr); gap: 32px 0; } .stats .stat:nth-child(odd){ padding-left:0; } .stats .stat:nth-child(even){ border-left:1px solid var(--border-1);} .section-dark .stats .stat:nth-child(even){border-left-color:var(--border-dark);} .stats .stat:nth-child(3),.stats .stat:nth-child(5){border-top:1px solid var(--border-1);padding-top:32px;} }

/* ---------- Product strategy model (5 steps) ---------- */
.model { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.model .step {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px,2vw,28px) clamp(18px,1.5vw,22px);
  border-radius: var(--r-lg);
  background: var(--bg-card); border: 1px solid var(--border-1); box-shadow: var(--shadow-sm);
}
.section-dark .model .step { background: rgba(244,242,234,0.04); border-color: rgba(244,242,234,0.10); box-shadow: none; }
.model .step .idx {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 16px; letter-spacing: 0.01em;
  background: var(--ev-gold-500); color: var(--ev-ink-800);
}
.section-dark .model .step .idx { background: rgba(218,165,32,0.18); color: var(--accent-soft); border: 1px solid rgba(218,165,32,0.4); }
.model .step .step-body { display: flex; flex-direction: column; gap: 10px; }
.model .step h4 { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px,1.35vw,19px); line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: var(--fg-1); }
.section-dark .model .step h4 { color: var(--fg-on-dark); }
.model .step p { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.section-dark .model .step p { color: var(--fg-on-dark-2); }
@media (max-width: 1000px){
  .model { grid-template-columns: 1fr; gap: 10px; }
  .model .step { flex-direction: row; align-items: flex-start; gap: clamp(16px,3vw,22px); padding: clamp(18px,4vw,22px) clamp(18px,4vw,24px); }
  .model .step .idx { width: 42px; height: 42px; font-size: 15px; }
}

/* ---------- Offerings (how I work) ---------- */
.offerings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.offer-card {
  position: relative; padding: clamp(26px,3vw,38px); border-radius: var(--r-xl);
  background: var(--bg-card); border: 1px solid var(--border-1); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  overflow: hidden;
}
.offer-card::before { content:''; position:absolute; inset:0; opacity:0; background: radial-gradient(80% 120% at 0% 0%, rgba(218,165,32,0.12), transparent 55%); transition: opacity var(--dur-base); }
.offer-card:hover { transform: translateY(-3px); border-color: rgba(218,165,32,0.45); box-shadow: var(--shadow-md); }
.offer-card:hover::before { opacity: 1; }
.offer-card .num { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); position: relative; }
.offer-card h3 { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px,2vw,26px); line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; margin: 16px 0 12px; color: var(--fg-1); position: relative; }
.offer-card p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; position: relative; }
/* Dark-surface variant */
.section-dark .offer-card { background: rgba(244,242,234,0.04); border-color: rgba(244,242,234,0.10); box-shadow: none; }
.section-dark .offer-card h3 { color: var(--fg-on-dark); }
.section-dark .offer-card p { color: var(--fg-on-dark-2); }
.section-dark .offer-card .num { color: var(--accent-soft); }
@media (max-width: 720px){ .offerings { grid-template-columns: 1fr; } }

/* ---------- Why work with me ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-1); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-1); }
.why-cell { background: var(--bg-card); padding: clamp(26px,3vw,36px); display: flex; flex-direction: column; gap: 14px; }
.why-cell .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ev-gold-100); color: var(--accent); border: 1px solid rgba(218,165,32,0.28); }
.why-cell .ic svg { width: 21px; height: 21px; }
.why-cell h4 { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; margin: 4px 0 0; color: var(--fg-1); }
.why-cell p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }
@media (max-width: 880px){ .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .why-grid { grid-template-columns: 1fr; } }