/* Shared components for OGS industry landing pages (loads after ogs-v4.css) */

/* ---------- Page hero ---------- */
.ind-hero{
  padding-top: clamp(140px, 18vh, 210px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.ind-hero .hero-kicker{ margin-bottom: 24px }
.ind-hero h1{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 6.4rem);
  line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance; max-width: 18ch;
}
.ind-hero h1 em{ font-style: italic; color: var(--cta) }
.ind-hero .lede{
  margin-top: 26px; max-width: 54ch;
  font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-soft); text-wrap: pretty;
}
.ind-hero .hero-actions{ margin-top: 34px }

/* ---------- VSL frame ---------- */
.vsl{ padding-block: clamp(20px, 4vh, 56px) clamp(70px, 10vh, 130px) }
.vsl-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #17140F;
  box-shadow: 0 50px 100px -40px oklch(0.25 0.03 60 / .5);
}
.vsl-frame video{ width: 100%; height: 100%; object-fit: cover; display: block }
.vsl-ph{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px;
}
.vsl-play{
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(0.95 0.02 90 / .12);
  border: 1px solid oklch(0.95 0.02 90 / .3);
  backdrop-filter: blur(4px);
}
.vsl-play::after{
  content: ""; margin-left: 6px;
  border-left: 22px solid var(--cream);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.vsl-ph .t{ font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); color: var(--cream) }
.vsl-ph .m{ font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: oklch(0.8 0.02 90) }
.vsl-cap{
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
}

/* ---------- Pains (numbered rules, reused pattern) ---------- */
.pains{ padding-block: clamp(80px, 12vh, 150px) }
.pains-grid{
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(40px, 6vw, 110px);
}
.pains-lede{
  font-family: var(--serif); font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  line-height: 1.35; text-wrap: pretty;
  position: sticky; top: 120px; align-self: start;
}
.pains-lede em{ font-style: italic; color: var(--cta) }
.pains-list{ list-style: none }
.pains-list li{
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding-block: 30px; border-top: 1px solid var(--paper-line);
}
.pains-list li:last-child{ border-bottom: 1px solid var(--paper-line) }
.pains-list .num{ font-family: var(--mono); font-size: 13px; color: var(--ink-mute); padding-top: 6px }
.pains-list h3{ font-family: var(--serif); font-weight: 400; font-size: 23px; margin-bottom: 8px; letter-spacing: -.01em }
.pains-list p{ color: var(--ink-soft); max-width: 54ch; text-wrap: pretty }

/* ---------- Approach (dark band) ---------- */
.approach{
  background: var(--olive-ink); color: var(--cream);
  padding-block: clamp(80px, 12vh, 150px);
}
.approach .sec-title{ color: var(--cream) }
.approach .sec-title em{ color: var(--tangerine) }
.approach .mono-tag{ color: oklch(0.78 0.03 100) }
.approach .pillar h3{ color: var(--cream) }

/* ---------- Client proof strip ---------- */
.proof-strip{
  padding-block: clamp(70px, 10vh, 120px);
  border-block: 1px solid var(--paper-line);
  background: var(--cream-deep);
}
.proof-strip .names{
  display: flex; flex-wrap: wrap; gap: 24px 44px;
  align-items: center; justify-content: center;
  margin-top: clamp(28px, 4vh, 44px);
}
.proof-strip .names .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--orange); opacity: .7 }
.proof-quote{
  max-width: 760px; margin: clamp(40px, 6vh, 64px) auto 0;
  text-align: center;
}
.proof-quote blockquote{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.45;
  text-wrap: balance;
}
.proof-quote cite{
  display: block; margin-top: 18px;
  font-family: var(--mono); font-style: normal; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}

/* ---------- What you get ---------- */
.gets{ padding-block: clamp(80px, 12vh, 150px) }
.gets-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.gets .pkg-list{ margin-top: 8px }
.gets-cta{
  border-top: 2px solid var(--cta);
  padding-top: 28px;
  position: sticky; top: 120px;
}
.gets-cta h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.01em; margin-bottom: 12px }
.gets-cta p{ color: var(--ink-soft); margin-bottom: 24px; text-wrap: pretty }
.gets-cta .pkg-price{ margin-bottom: 24px }

/* ---------- FAQ ---------- */
.faq{ padding-block: clamp(80px, 12vh, 150px); background: var(--cream-deep); border-top: 1px solid var(--paper-line) }
.faq-list{ max-width: 860px }
.faq-list details{ border-top: 1px solid var(--paper-line) }
.faq-list details:last-child{ border-bottom: 1px solid var(--paper-line) }
.faq-list summary{
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center;
  padding: 24px 0;
  font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -.01em;
}
.faq-list summary::-webkit-details-marker{ display: none }
.faq-list summary::after{
  content: "+";
  font-family: var(--mono); font-size: 22px; color: var(--cta);
  text-align: center;
  transition: transform .25s var(--ease-out);
}
.faq-list details[open] summary::after{ transform: rotate(45deg) }
.faq-list summary:hover{ color: var(--cta) }
.faq-a{ padding: 0 0 26px; max-width: 64ch; color: var(--ink-soft); text-wrap: pretty }

/* ---------- Photo collage strip ---------- */
.collage{ padding-block: 0 clamp(70px, 10vh, 130px) }
.collage-grid{
  display: grid; grid-template-columns: 5fr 4fr 3fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
}
.collage-grid .c1{ aspect-ratio: 4 / 3 }
.collage-grid .c2{ aspect-ratio: 3 / 4; margin-top: clamp(24px, 4vh, 56px) }
.collage-grid .c3{ aspect-ratio: 3 / 4 }
.collage-cap{
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
}

/* ---------- Results / analytics band ---------- */
.results{
  background: var(--olive-ink); color: var(--cream);
  padding-block: clamp(80px, 12vh, 150px);
}
.results .sec-title{ color: var(--cream) }
.results .sec-title em{ color: var(--tangerine) }
.results .mono-tag{ color: oklch(0.78 0.03 100) }
.results-grid{
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(36px, 5vw, 90px); align-items: start;
}
.big-stats{ list-style: none; display: flex; flex-direction: column }
.big-stats li{
  padding-block: clamp(22px, 3.4vh, 36px);
  border-top: 1px solid oklch(0.4 0.03 120 / .6);
}
.big-stats li:last-child{ border-bottom: 1px solid oklch(0.4 0.03 120 / .6) }
.big-stats b{
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.02em;
  color: var(--tangerine);
}
.big-stats span{
  display: block; margin-top: 10px;
  color: oklch(0.85 0.02 100); max-width: 34ch; text-wrap: pretty;
}
.shots{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px) }
.shot{ display: flex; flex-direction: column; gap: 12px }
.shot-frame{
  aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden;
  border: 1px solid oklch(0.42 0.03 110);
  background: oklch(0.28 0.03 110);
}
.shot .mono-tag{ text-align: center }
.shots .wide{ grid-column: 1 / -1 }
.shots .wide .shot-frame{ aspect-ratio: 16 / 9 }
.results-note{
  margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: oklch(0.72 0.02 100);
}

/* ---------- In-flow photo slots ---------- */
.pains-media{ display: flex; flex-direction: column; gap: clamp(14px, 2vw, 24px) }
.pains-media .pm1{ aspect-ratio: 4 / 5 }
.pains-media .pm2{ aspect-ratio: 5 / 4 }

@media (max-width: 960px){
  .collage-grid{ grid-template-columns: 1fr 1fr }
  .collage-grid .c1{ grid-column: 1 / -1 }
  .results-grid{ grid-template-columns: 1fr }
}

/* ---------- Local NAP band ---------- */
.nap{
  padding-block: clamp(50px, 7vh, 80px);
  border-top: 1px solid var(--paper-line);
}
.nap-inner{
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.nap-inner a{ color: var(--ink-soft) }

@media (max-width: 960px){
  .pains-grid, .gets-grid{ grid-template-columns: 1fr }
  .pains-lede, .gets-cta{ position: static }
}