/* ═══════════════════════════════════════════════════════════════════════
   HOME — three panels: an expanding hero, then problem+solution and
   faq+cta, each sized to roughly fill the viewport and scaling gently
   toward the reader as it centers (home-scroll.js's panel-zoom).

   Every section reuses the site's existing editorial-* classes (defined
   in site-subpage-chrome.css) so it inherits the same type, spacing, and
   GSAP scroll-reveal wiring every other page gets. This file only styles
   what is genuinely new: the expanding hero, the problem grid, the FAQ
   accordion under its own class, and the panel layout/zoom hookup.

   Everything here is scoped to body.home-scroll.
   ═══════════════════════════════════════════════════════════════════════ */

body.home-scroll .shell {
  padding-top: var(--topbar-h);
}

/* Kill the hero's default top clearance — the expanding frame sits flush
   under the top bar and provides its own breathing room. */
body.home-scroll .editorial-hero {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   HS-HERO — vanilla port of the ScrollExpand pattern (react bits), driven
   by public/js/home-scroll.js. A resting card grows to full-bleed as the
   visitor scrolls the first screen, then releases into normal document
   flow for the sections beneath it.
   ═══════════════════════════════════════════════════════════════════════ */

.hs-hero {
  position: relative;
  width: 100%;
}

.hs-hero__track {
  position: relative;
  width: 100%;
}

.hs-hero__stage {
  position: sticky;
  top: 0;
  width: 100%;
  overflow: hidden;
  background: var(--chalk);
}

.hs-hero__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(21% 29% 21% 29% round 20px);
  will-change: clip-path;
}

.hs-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  will-change: transform;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

.hs-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.05) 45%, rgba(10, 10, 10, 0.28));
  opacity: 0;
}

/* The resting-state claim: sits centered over the small card, and lifts
   away as the frame opens. */
.hs-hero__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0 6%;
  text-align: center;
  pointer-events: none;
  will-change: opacity, transform;
}

.hs-hero__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Sized for the resting card, not the viewport: the frame this text sits
   over starts small (see cfg.startWidth in home-scroll.js), so the claim
   has to read comfortably inside roughly 40% of the stage width, not the
   full stage the sibling .hs-hero__title box spans. It fades out well
   before the frame finishes opening, so it never needs to carry a
   full-bleed moment — the overlay lead + CTA do that instead. */
.hs-hero__heading {
  margin: 0;
  max-width: min(86%, 30ch);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.hs-hero__heading em {
  font-style: italic;
  color: var(--terracotta);
}

/* Full-bleed overlay: fades and lifts in once the frame is open, holding
   the CTA over the image at the top of the hold. */
.hs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--s-4);
  padding: clamp(28px, 5vw, 64px);
  opacity: 0;
  will-change: opacity, transform;
}

.hs-hero__overlay-lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

.hs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
}

.hs-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--chalk);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.hs-hero__cta:hover,
.hs-hero__cta:focus-visible {
  background: var(--chalk);
  color: var(--ink);
  transform: translateY(-1px);
}

.hs-hero__quiet {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--chalk);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}

.hs-hero__quiet:hover,
.hs-hero__quiet:focus-visible {
  border-bottom-color: var(--chalk);
}

.hs-hero__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-6);
  z-index: 2;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thread);
  pointer-events: none;
  will-change: opacity, transform;
}

.hs-hero__hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  margin: 10px auto 0;
  background: var(--thread);
  opacity: 0.5;
}

@media (max-width: 700px) {
  .hs-hero__frame {
    clip-path: inset(14% 8% 14% 8% round 16px);
  }

  .hs-hero__overlay {
    padding: 20px;
  }

  .hs-hero__overlay-lead {
    max-width: 30ch;
    font-size: 15px;
  }
}

/* No JS, or reduced motion: skip the whole mechanic and show the claim
   plainly over a static, already-settled image. The CTA still has to be
   reachable from here without scrolling past it — a min-height keeps the
   title (top-anchored) and the overlay (bottom-anchored) from colliding
   even where 16:10 alone would leave too little room. */
.hs-hero.hs-hero--static .hs-hero__frame {
  position: relative;
  clip-path: none;
  aspect-ratio: 16 / 10;
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
}

.hs-hero.hs-hero--static .hs-hero__stage {
  position: static;
  height: auto !important;
}

.hs-hero.hs-hero--static .hs-hero__media {
  position: relative;
  transform: none !important;
}

/* The static hero puts white type over the full, largely pale image, so it
   needs more scrim than the expanding version ever does. */
.hs-hero.hs-hero--static .hs-hero__scrim {
  opacity: 1;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.42));
}

.hs-hero.hs-hero--static .hs-hero__eyebrow {
  color: var(--chalk);
  opacity: 0.75;
}

/* Top-anchored rather than centered: the overlay below needs the bottom
   third for the lead and the CTA, and static mode has no scroll-driven
   fade to keep the two from ever occupying the same space at once. */
.hs-hero.hs-hero--static .hs-hero__title {
  position: absolute;
  justify-content: flex-start;
  padding-top: clamp(28px, 8vh, 64px);
  color: var(--chalk);
}

.hs-hero.hs-hero--static .hs-hero__heading {
  max-width: min(90%, 22ch);
  font-size: clamp(26px, 4.4vw, 48px);
  color: var(--chalk);
}

/* The overlay is what carries "Book a scoping call" — reduced-motion and
   no-JS visitors need it as much as anyone, so unlike the resting state
   of the animated version (which fades this in on expand), static mode
   ships it on screen from the start instead of hiding it. */
.hs-hero.hs-hero--static .hs-hero__overlay {
  opacity: 1;
}

.hs-hero.hs-hero--static .hs-hero__hint {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section rhythm — thin overrides on top of .editorial-section so the
   long page reads as one calm scroll rather than six separate pages
   stapled together.
   ═══════════════════════════════════════════════════════════════════════ */

/* The homepage is meant to be walked in about three scroll movements, so it
   runs tighter than the reference-style subpages: 64px between sections
   instead of the site's usual 96px. */
body.home-scroll .editorial-main {
  gap: var(--s-7);
  padding-bottom: var(--s-6);
}

body.home-scroll .editorial-section {
  scroll-margin-top: calc(var(--topbar-h) + var(--s-5));
}

@media (max-width: 780px) {
  body.home-scroll .editorial-main {
    gap: var(--s-7);
  }
}

/* ── Problem: three plain statements, no card chrome ─────────────────── */

.hs-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-6);
}

.hs-problem-grid article {
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.hs-problem-grid .hs-no {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.1em;
  color: var(--terracotta);
}

.hs-problem-grid h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1.15;
  color: var(--ink);
}

.hs-problem-grid p {
  margin: 0;
  color: var(--thread);
  font-size: var(--fs-15);
  line-height: 1.6;
}

@media (max-width: 780px) {
  .hs-problem-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}

/* ── FAQ — same accordion treatment as .aeo-faq (site-subpage-chrome.css),
   under its own class: the SEO build strips any literal .aeo-faq section
   from every page but /faq to keep answers from duplicating site-wide,
   and the homepage's four questions are meant to stay right here. ──── */

.hs-faq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.hs-faq details {
  border-top: 1px solid var(--hairline);
  padding: var(--s-4) 0;
}

.hs-faq details:first-of-type {
  border-top: 0;
}

.hs-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.hs-faq summary:hover {
  color: var(--terracotta);
}

.hs-faq summary::-webkit-details-marker {
  display: none;
}

.hs-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--terracotta);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: 1;
}

.hs-faq details[open] summary::after {
  content: "\2212";
}

.hs-faq details p {
  margin-top: var(--s-3);
  color: var(--thread);
  font-size: var(--fs-15);
  line-height: 1.7;
  max-width: 76ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   PANELS — each section scales toward the reader as it reaches the middle
   of the viewport (home-scroll.js). The start state only arms once JS is
   running (body.hs-js), so without JS every panel sits at its natural
   size and full opacity.
   ═══════════════════════════════════════════════════════════════════════ */

body.hs-js .hs-panel {
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
}

/* A panel is a screenful: the zoom reads as a card coming forward only if
   each one roughly fills the view it is scaling within. */
body.home-scroll .hs-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(72vh, 720px);
}

/* The problem trio loses its paragraphs on the compressed page — the
   headline of each is the whole point. */
body.home-scroll .hs-problem-grid h3 {
  font-size: var(--fs-20, 20px);
}

.hs-answer {
  margin-top: var(--s-6);
}

/* Four layers as one compact band rather than four full-width rows: the
   name and the tags carry it, the prose lives on /platform. */
body.home-scroll .hs-stack-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-5);
}

/* The site's .stack-layer is a three-column row (148px | name | body).
   In the compact band each layer becomes a plain column instead, or the
   name and the tags land on top of each other. */
body.home-scroll .hs-stack-compact .stack-layer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-bottom: 0;
  border-right: 1px solid var(--hairline);
}

body.home-scroll .hs-stack-compact .stack-layer:last-child {
  border-right: 0;
}

body.home-scroll .hs-stack-compact .stack-layer__name {
  font-size: var(--fs-20, 20px);
  margin-bottom: var(--s-3);
}

.hs-close {
  margin-top: var(--s-6);
}

@media (max-width: 900px) {
  body.home-scroll .hs-stack-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.home-scroll .hs-stack-compact .stack-layer:nth-child(2n) {
    border-right: 0;
  }

  body.home-scroll .hs-stack-compact .stack-layer:nth-child(-n + 2) {
    border-bottom: 1px solid var(--hairline);
  }
}

@media (max-width: 560px) {
  body.home-scroll .hs-stack-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  body.home-scroll .hs-stack-compact .stack-layer {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  body.home-scroll .hs-stack-compact .stack-layer:last-child {
    border-bottom: 0;
  }

  body.home-scroll .hs-panel {
    min-height: 0;
  }
}