/* =====================================================================
   HOMEPAGE — page-only layout on top of the shared components.
   Loaded by src/index.njk via extra_css. Tokens only.
   Section rhythm follows the approved HTML pack (#1001659):
   ivory hero → sage → ivory cards → deep green → sand → ivory → sand
   steps → ivory FAQ → sand about → contact band → footer.
   ===================================================================== */

/* The homepage H1 carries the full target phrase + name (80 chars), so it
   runs smaller than the pack's 76px. Text-only hero since #1001694 (Mike:
   photo, arcs block and quote card removed — the harbour video fills the
   right side instead). */
.page-home .hero__title { font-size: clamp(2.375rem, 1.6rem + 2.9vw, 4rem); }

/* Hello — pack "Does this sound familiar?" band: 5 / 7 columns on sage */
/* Texture + depth (#1001694): light pooling top-left, deeper sage
   bottom-right, a fine paper grain and the pack's arcs fading off the
   corner. All decoration sits under the text (z-index -1, isolate). */
.home-hello-band {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in srgb, var(--color-bg) 50%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in srgb, var(--green-400) 55%, transparent), transparent 75%),
    var(--color-surface-quiet);
}
.home-hello-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .2 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.35;
}
.home-hello__arcs { right: 0; bottom: 0; z-index: -1; width: min(560px, 80vw); height: auto; color: var(--color-bg); opacity: 0.45; }
.home-hello .callout { box-shadow: var(--shadow-lift); }
.home-hello { display: grid; gap: var(--space-l); }
.home-hello__head > * + * { margin-top: var(--space-m); }
.home-hello__body > * + * { margin-top: var(--space-xl); }
.home-hello__lead { font-size: var(--step-1); line-height: 1.58; }
@media (min-width: 900px) {
  .home-hello { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l); }
  .home-hello__head { padding-right: var(--space-l); }
}

/* Line under the issue grid */
.home-more { margin-top: var(--space-xl); max-width: var(--measure); color: var(--color-text-muted); }

/* How I work — pack "My approach" deep-green band, italic serif statement */
.home-how { background: var(--color-primary); }
.home-how__head { max-width: 1000px; }
.home-how__head > * + * { margin-top: 1.75rem; }
.home-how h2 { font-style: italic; font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem); line-height: 1.19; }
.home-how h2 em { color: var(--green-300); }
.home-how__cols { display: grid; gap: var(--space-m); margin-top: var(--space-2xl); }
/* Icon cards (#1001694): raised deep-green panels, sage icon ring, serif
   title, faint arcs in the top-right corner echoing the pack motif. */
.home-how__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-s);
  padding: var(--space-l);
  border: var(--border-w) solid var(--color-dark-border);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--green-800), var(--green-900) 65%);
  box-shadow: var(--shadow-lift);
}
.home-how__card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 180px; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 0, transparent 0 34px, color-mix(in srgb, var(--green-300) 16%, transparent) 34px 36px);
  mask-image: radial-gradient(circle at 100% 0, var(--color-bg), transparent 75%);
}
.home-how__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--green-300) 14%, transparent);
  border: var(--border-w) solid color-mix(in srgb, var(--green-300) 35%, transparent);
  color: var(--green-300);
}
.home-how__icon svg { width: 26px; height: 26px; }
.home-how__title { margin-top: var(--space-2xs); font-size: var(--step-2); line-height: 1.2; color: var(--color-dark-text); }
.home-how__card p { font-size: 1.0625rem; line-height: 1.65; color: var(--color-dark-text); }
@media (min-width: 900px) { .home-how__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-how__card { padding: 2.5rem; } }

/* Question-led fact cards (R5) */
.home-qa__eyebrow { margin-bottom: var(--space-l); }
/* Equal heights (#1001694): every card in a row matches, and both rows
   match each other once the grid is two columns. */
.home-qa { align-items: stretch; }
@media (min-width: 600px) { .home-qa { grid-auto-rows: 1fr; } }
.home-qa .icon-disc { margin-bottom: var(--space-2xs); }
.home-qa h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.25; margin-top: var(--space-s); }
.home-qa ul { list-style: disc; }
.home-qa__price { font-family: var(--font-serif); font-size: clamp(2.75rem, 2.3rem + 1.6vw, 3.25rem); line-height: 1.1; color: var(--color-primary); }
.home-qa__price span { font-size: 1rem; font-family: var(--font-body); color: var(--color-text-muted); }

/* About Brian: the arcs block bleeds off the left edge of the sand band */
.home-about { overflow-x: clip; }

/* In-body crisis note (the footer crisis box stays too — R8) */
.home-now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-m); align-items: start; max-width: 880px; }
.home-now > div > * + * { margin-top: var(--space-2xs); }
.home-now__title { font-size: var(--step-2); font-weight: var(--weight-medium); }
.home-now p { font-size: var(--text-note); color: var(--color-text-muted); max-width: var(--measure); }
.home-now a { font-weight: var(--weight-semi); }

/* Home hero clip plays through to the man turning and smiling at camera, then
   holds (#1001685). The shared flipped window (0%) left that last close-up's
   face under the text scrim; centred, he looks out to sea towards the words at
   the start and ends with his whole face in the clear right-hand side. */
.page-home .hero__video--flip { object-position: 50% 60%; }