/* ==========================================================================
   Home page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 88% 8%, var(--teal-050) 0%, transparent 60%),
    radial-gradient(70% 55% at 4% 90%, var(--gold-100) 0%, transparent 62%),
    var(--bg);
}

.hero__inner {
  display: grid;
  gap: clamp(var(--sp-10), 5vw, var(--sp-16));
  align-items: center;
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-20)) clamp(var(--sp-10), 5vw, var(--sp-16));
}

@media (min-width: 58rem) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

.hero__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-4xl);
  max-width: 22ch;
}

.hero__lead {
  margin-top: var(--sp-6);
  max-width: 52ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.hero__actions { margin-top: var(--sp-8); }

.hero__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-subtle);
}
.hero__note svg { width: 1.1rem; height: 1.1rem; color: var(--teal-600); flex: none; }

/* --- Hero media ------------------------------------------------------- */
.hero__media { position: relative; }

.hero__photo {
  position: relative;
  box-shadow: var(--shadow-lg);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A portrait hero is right beside the copy on desktop, but stacked on a phone it
   pushes the trust strip and everything after it far below the fold. Cropping to
   a wider ratio keeps the photograph generous without costing a screen of scroll. */
@media (max-width: 57.99rem) {
  .hero__photo { aspect-ratio: 5 / 4; }
  .hero__photo img { height: 100%; }
}

/* Floating ratio chip. Hidden on the narrowest screens where it would crowd
   the photograph rather than add to it. */
.hero__chip {
  display: none;
  position: absolute;
  bottom: var(--sp-8);
  left: calc(-1 * var(--sp-6));
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text-muted);
}
.hero__chip strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--navy-800);
}
.hero__chip-icon {
  width: 1.6rem; height: 1.6rem;
  flex: none;
  color: var(--teal-600);
}
@media (min-width: 34rem) { .hero__chip { display: flex; } }

/* --- Trust strip ------------------------------------------------------ */
.hero__trust {
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   Comparison block
   -------------------------------------------------------------------------- */

.compare-block { margin-top: clamp(var(--sp-12), 6vw, var(--sp-20)); }

.compare-block__title {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-2xl);
}

.compare-block__foot {
  display: flex;
  gap: var(--sp-3);
  max-width: 68ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.compare-block__foot svg {
  width: 1.15rem; height: 1.15rem;
  flex: none;
  margin-top: 0.15em;
  color: var(--teal-600);
}

/* --------------------------------------------------------------------------
   Care plan strip
   -------------------------------------------------------------------------- */

.care-plan {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  border-radius: var(--r-xl);
}
@media (min-width: 48rem) {
  .care-plan { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-8); }
}

.care-plan__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--gold-700);
  box-shadow: var(--shadow-sm);
}
.care-plan__icon svg { width: 1.7rem; height: 1.7rem; }
.care-plan h3 { margin-bottom: var(--sp-4); }
.care-plan p { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Photo peek
   -------------------------------------------------------------------------- */

.peek {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 48rem) {
  .peek {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto;
  }
  .peek__item--tall { grid-row: span 2; }
}

.peek__item { margin: 0; }
.peek__item > picture,
.peek__item > img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.peek__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.peek__item--tall img { min-height: 18rem; }

.peek__item figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   What's included list
   -------------------------------------------------------------------------- */

.includes {
  list-style: none;
  margin: 0;
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.includes li + li {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.includes svg {
  width: 1.2rem; height: 1.2rem;
  flex: none;
  margin-top: 0.1em;
  color: var(--teal-600);
}

/* --------------------------------------------------------------------------
   Self-assessment
   -------------------------------------------------------------------------- */

.assess {
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.assess__q {
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 0;
}
.assess__q legend {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: 0;
  font-size: var(--fs-base);
  font-weight: 650;
  color: var(--navy-900);
}

.assess__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-700);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.assess__opts {
  display: grid;
  gap: var(--sp-3);
  padding-left: 2.5rem;
}
@media (min-width: 34rem) {
  .assess__opts { grid-template-columns: repeat(3, 1fr); }
}

/* Radios styled as selectable cards, sized well past the 44px target floor
   because a shaky hand on a phone is the expected input method here. */
.assess__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.assess__opt:hover { border-color: var(--teal-500); background: var(--teal-050); }

.assess__opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.assess__opt:has(input:checked) {
  border-color: var(--teal-600);
  background: var(--teal-050);
  color: var(--teal-700);
  box-shadow: inset 0 0 0 1px var(--teal-600);
}
.assess__opt:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.assess__result {
  margin-top: var(--sp-8);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  background: var(--navy-050);
  border: 1px solid var(--navy-100);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--r-lg);
}
.assess__result h3 { margin-bottom: var(--sp-4); }
.assess__result > p { color: var(--text-muted); }

.assess__disclaimer {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--navy-100);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.cta-facts {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.cta-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-invert-muted);
}
.cta-facts svg {
  width: 1.2rem; height: 1.2rem;
  flex: none;
  margin-top: 0.1em;
  color: var(--teal-500);
}
.cta-facts a { color: var(--white); font-weight: 600; }

.tour-card {
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  background: var(--bg-raised);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.tour-card h3 { color: var(--navy-900); }
.tour-card__sub {
  margin: var(--sp-2) 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.tour-card__fine {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-align: center;
}
.tour-card__fine a { font-weight: 700; }

/* --------------------------------------------------------------------------
   Build-time content marker
   Deliberately loud. This must never survive to launch unnoticed.
   -------------------------------------------------------------------------- */

.content-needed {
  padding: var(--sp-6);
  border: 2px dashed var(--gold-600);
  border-radius: var(--r-lg);
  background: var(--gold-100);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.content-needed p + p { margin-top: var(--sp-3); }
.content-needed code {
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.8);
  font-size: 0.92em;
}