/* Homepage only. Linked from / alone by build_pages.py. The shared parts it leans on
   (.vhero, .section, .reel, .cred, .cta, .btn, .link-arrow, .notch) live in
   _shell/site.css. Design system v1 (September 26, 2026): see assets/css/system.css. */

/* Section titles on this page: Archivo 700, one width, sentence case. */
.section__title { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.028em; max-width: 20ch; text-wrap: balance; }
.section__lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }

/* ============================ 1. Hero ============================ */
/* Same video hero, 68vh. The second term caps the headline at what the measure holds:
   "manufacturers" must fit a 320px screen without sideways scroll. */
.vhero--home { min-height: 68vh; min-height: 68svh; }
.vhero--home .vhero__content { padding-top: 160px; padding-bottom: 104px; }
.vhero--home .vhero__title {
  font-size: min(clamp(2.4rem, 5.4vw, 5rem), calc((min(100vw, 1240px) - 64px) * 0.105));
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: none;
  margin-bottom: 40px;
}
.vhero--home .vhero__sub { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; }

/* ============================ 2. A note from our founder ============================ */
/* A letter on a notched paper sheet, on the wash ground, set as a two-page spread: the
   problem on the left, the answer on the right, a hairline between. About 300 words, so
   both columns fit on one screen. If it grows past about 400 words, go back to one
   column. Under 900px it's one column. */
.letter__sheet { background: var(--paper); padding: clamp(28px, 5vw, 72px); }
.letter__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.letter__col { padding-right: clamp(24px, 4vw, 56px); }
.letter__col + .letter__col { padding: 0 0 0 clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); }
.letter__col p { font-size: clamp(1.0625rem, 1.3vw, 1.125rem); line-height: 1.75; max-width: 52ch; }
.letter__col p + p { margin-top: 1.1em; }
.letter__col strong { font-weight: 600; }
/* The opening line in the display face at a text weight: Jay's voice, not a heading. */
.letter__col .letter__open { font-family: var(--f-display); font-variation-settings: 'wdth' 100; font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.012em; max-width: 26ch; margin-bottom: 0.4em; }
/* The sign-off under an ink rule. */
.letter .signoff { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ink); }
@media (max-width: 900px) {
  .letter__cols { grid-template-columns: minmax(0, 1fr); }
  .letter__col { padding-right: 0; }
  .letter__col + .letter__col { margin-top: 1.1em; padding: 0; border-left: 0; }
}

/* ============================ 3. Problems ============================ */
/* One row per problem, each a link to its service: icon, the problem, the answer and
   the service's name, an arrow. Hover fills the row blue from the bottom. */
.problems { border-top: 1px solid var(--ink); }
.problem {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 5fr) minmax(0, 6fr) 28px;
  gap: 24px 32px;
  align-items: start;
  padding: 28px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.problem::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease); }
.problem:hover::before, .problem:focus-visible::before { transform: scaleY(1); }
.problem:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.problem__icon { font-size: 32px; color: var(--blue); transition: color 0.3s var(--ease); }
.problem__name { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 24ch; }
.problem__body { display: block; }
.problem__text { display: block; color: var(--muted); max-width: 54ch; transition: color 0.3s var(--ease); }
.problem__svc { display: inline-block; margin-top: 10px; font-weight: 600; }
.problem__arrow { font-size: 24px; margin-top: 4px; transition: transform 0.35s var(--ease); }
.problem:hover, .problem:hover .problem__icon, .problem:hover .problem__text,
.problem:focus-visible, .problem:focus-visible .problem__icon, .problem:focus-visible .problem__text { color: var(--on-dark); }
.problem:hover .problem__arrow { transform: translateX(4px); }

/* ============================ 4. The work ============================ */
.work__item { padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--rule); }
.sh + .work__item { padding-top: 0; margin-top: 0; border-top: 0; }
.work__title { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 14px; }
.work__intro { color: var(--ink-2); font-size: 1.0625rem; max-width: 62ch; }
.work__slider { margin-top: 32px; }
/* Big blue figures over ink rules, labels in mono. */
.work__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.work__stat { padding-top: 20px; border-top: 1px solid var(--ink); }
.work__stat dt { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 600; font-size: clamp(2.8rem, 5.5vw, 4.75rem); line-height: 1; letter-spacing: -0.035em; color: var(--blue); font-variant-numeric: tabular-nums; }
.work__stat dd { margin-top: 16px; color: var(--muted); max-width: 26ch; }
.tools { margin-top: 24px; border-top: 1px solid var(--rule); max-width: 72ch; }
.tools p { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.tools strong { color: var(--ink); font-weight: 600; }
.work__item--video { margin-bottom: 40px; }
.work .reel { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.work .video-slot__play { background: var(--blue); }
.work .video-slot:hover .video-slot__play { background: var(--blue-deep); }
.work__video-link { margin-top: 28px; }

/* The testimonial in full, on paper. The big opening mark is the accent; the closing
   blue band is the page's only blue band. */
.work__quote { margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; }
.work__quote::before { content: '\201C'; font-family: var(--f-display); font-weight: 700; font-size: 5rem; line-height: 0.8; color: var(--blue); }
.work__quote blockquote p { font-family: var(--f-display); font-variation-settings: 'wdth' 104; font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 60ch; color: var(--ink); }
.work__quote figcaption { grid-column: 2; margin-top: 20px; color: var(--muted); }
.work__quote strong { font-weight: 600; color: var(--ink); }
.work-quote .section__cta { margin: 48px 0 0 72px; }

/* ============================ 5. The EchoSurge Growth System ============================ */
/* A compact pillar diagram: four paper cells standing on a full-width foundation cell,
   weights as blue display figures, the foundation under an ink rule. */
.sysmap { display: grid; gap: 12px; }
.sysmap__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sysmap__cell { display: flex; flex-direction: column; gap: 10px; background: var(--paper); padding: clamp(20px, 2.4vw, 28px); }
.sysmap__weight { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.sysmap__name { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.2; letter-spacing: -0.015em; }
.sysmap__foundation { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 20px; border-top: 3px solid var(--ink); }
.sysmap__tag { color: var(--muted); margin-left: auto; }
.system__cta { margin-top: 40px; }

/* ============================ 6. How to get started ============================ */
/* Three notched panels in order, joined by arrows; the Audit panel is the widest and the
   blue one. The arrow is a sibling of the panel, centered in the gap. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: stretch; }
.steps__item { position: relative; display: flex; }
.steps__next { position: absolute; top: 50%; right: -42px; font-size: 28px; color: var(--blue); transform: translateY(-50%); }
.step { flex: 1; background: var(--wash); padding: clamp(28px, 3.5vw, 48px); }
.step__icon { font-size: 40px; color: var(--blue); }
.step h3 { margin-top: 24px; font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.15; }
.step p { margin-top: 10px; color: var(--muted); max-width: 40ch; }
.step--marked { background: var(--blue); color: var(--on-dark); }
.step--marked h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.step--marked .step__icon { color: var(--on-dark); }
.step--marked p { color: var(--on-blue-muted); font-size: 1.0625rem; }
.steps__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }

/* ============================ 7. Who you'll work with ============================ */
.cred__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); }
.jay .section__title { margin-bottom: 24px; }
.jay__body { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.cred__portrait { object-position: top; }

/* ============================ 8. Closing band ============================ */
.cta--band { background: var(--blue); color: var(--on-dark); text-align: center; }
.cta--band h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.028em; max-width: 18ch; margin: 0 auto; }
.cta--band .cta__lead { margin: 24px auto 0; max-width: 52ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--on-blue-muted); }
.cta--band .steps__cta { justify-content: center; }

@media (max-width: 960px) {
  .work__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sysmap__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* One column; each arrow turns down and sits in the gap under its panel. */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .steps__next { top: auto; right: auto; bottom: -38px; left: clamp(28px, 3.5vw, 48px); transform: rotate(90deg); }
}
@media (max-width: 480px) {
  .sysmap__pillars { grid-template-columns: minmax(0, 1fr); }
  .sysmap__tag { margin-left: 0; }
}
@media (max-width: 860px) {
  .vhero--home .vhero__content { padding-top: 100px; padding-bottom: 56px; }
  .vhero--home .vhero__title { margin-bottom: 26px; }
  .problem { grid-template-columns: 32px minmax(0, 1fr) 24px; gap: 8px 16px; padding: 24px 8px; }
  .problem__icon { font-size: 28px; grid-row: span 2; }
  .problem__body { grid-column: 2; }
  .problem__arrow { grid-column: 3; grid-row: 1; }
  .cred__grid { grid-template-columns: minmax(0, 1fr); }
  .work__quote { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .work__quote figcaption { grid-column: 1; }
  .work-quote .section__cta { margin-left: 0; }
}
@media (max-width: 420px) {
  .work__stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .problem::before, .problem__arrow { transition: none; }
}

/* The hero's blue primary button: a white focus ring so it shows against the video. */
.vhero__cta .btn:focus-visible { outline-color: var(--on-dark); }