/* ==========================================================================
   components.css — Reusable UI pieces
   Owns WHAT things look like. layout.css owns where they sit.
   Naming: BEM-ish — .block, .block__element, .block--modifier, .is-state
   ========================================================================== */

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
  background-color: rgba(250, 244, 236, 0.82);
  backdrop-filter: saturate(180%) var(--glass-blur);
  -webkit-backdrop-filter: saturate(180%) var(--glass-blur);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--transition-base) var(--ease-out),
    box-shadow var(--transition-base) var(--ease-out);
}

.site-nav.is-stuck {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--space-md);
}

/* The circular badge carries the full lockup — cow, wordmark and the
   "PURE · TRADITIONAL · TRUSTED" line — so no text sits beside it.
   Below about 56px the inner text stops being legible, which sets the
   floor for the nav size. */
.logo__badge {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: transform var(--transition-base) var(--ease-spring);
}

/* Wordmark beside the badge. The badge repeats this text inside its ring,
   but at 60px that ring is decorative — the type here is what actually
   reads, so the badge carries an empty alt and this carries the name. */
.logo__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.logo__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--color-primary);
}

.logo__sub {
  font-size: 0.5rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-mute);
}

.site-footer .logo__name {
  color: var(--color-text-invert);
}

.site-footer .logo__sub {
  color: rgba(250, 244, 236, 0.6);
}

.logo:hover .logo__badge {
  transform: scale(1.06);
}

.logo__badge--footer {
  width: 90px;
  height: 90px;
}

@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo__badge {
    transform: none;
  }
}

/* Nav links with animated underline + scroll-spy active state */
.nav-link {
  position: relative;
  padding-block: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  transition: color var(--transition-fast) var(--ease-out);
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base) var(--ease-out);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-primary-deep);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The nav CTA is a .btn, and .btn sets display:inline-flex later in this
   file, so hiding it from layout.css would lose the cascade. Same reason the
   hamburger's media query lives here rather than with the other layout rules. */
.site-nav.site-nav .site-nav__cta {
  display: none;
}

@media (min-width: 768px) {
  .site-nav.site-nav .site-nav__cta {
    display: inline-flex;
  }
}

/* Hamburger — hidden from the tablet breakpoint up.
   The media query lives here, not in layout.css, because that file loads
   first and its `display: none` would lose the cascade to this rule. */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  margin-block: 4px;
  border-radius: 2px;
  background-color: var(--color-text);
  transition:
    transform var(--transition-base) var(--ease-out),
    opacity var(--transition-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu panel */
.mobile-menu__inner {
  background-color: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding-block: var(--space-sm) var(--space-xl);
}

.mobile-menu .nav-link {
  padding-block: var(--space-lg);
  font-size: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu .nav-link:last-of-type {
  border-bottom: none;
}

.mobile-menu .btn {
  margin-top: var(--space-lg);
  width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  min-height: 48px;              /* comfortably clears the 44px touch floor */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;              /* clips the ripple */
  isolation: isolate;
  transition:
    transform var(--transition-fast) var(--ease-spring),
    box-shadow var(--transition-base) var(--ease-out),
    background-color var(--transition-base) var(--ease-out),
    border-color var(--transition-base) var(--ease-out),
    color var(--transition-base) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn__icon {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base) var(--ease-out);
}

.btn:hover .btn__icon {
  transform: translateX(4px);
}

/* Primary — brand gradient */
.btn--primary {
  background: var(--gradient-brand);
  background-size: 200% 200%;
  color: var(--color-text-invert);
  box-shadow: var(--shadow-primary);
}

.btn--primary:hover {
  color: var(--color-text-invert);
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-accent);
  animation: gradientShift 3s var(--ease-out) infinite;
}

/* Secondary — outlined */
.btn--secondary {
  background-color: transparent;
  color: var(--color-primary-deep);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  color: var(--color-primary-deep);
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-md);
}

/* Light — for use on dark or coloured backgrounds */
.btn--light {
  background-color: var(--color-light);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.btn--light:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
  transform: translateY(-3px) scale(1.03);
}

/* min-height keeps the small button on the 44px touch-target floor; the
   padding alone gave it 36px. */
.btn--sm {
  padding: var(--space-md) var(--space-xl);
  min-height: 44px;
  font-size: var(--font-size-xs);
}

.btn--block {
  width: 100%;
}

/* Ripple — element injected by js/interactions.js */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  animation: ripple var(--transition-slow) var(--ease-out) forwards;
}

.btn--secondary .ripple {
  background-color: rgba(85, 21, 18, 0.22);
}

/* ==========================================================================
   Eyebrow, rule, badge
   ========================================================================== */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* --color-amber (#d9a441) drops to 4.27:1 against the light end of the CTA
   gradient, just under the 4.5:1 AA floor for 12px text. The lighter gold
   holds 6.26:1 there and 8.4:1 on the dark section. */
.section--dark .eyebrow,
.cta .eyebrow {
  color: var(--color-gold-light);
}

.rule {
  width: 56px;
  height: 3px;
  margin: 0 auto var(--space-xl);
  border-radius: 2px;
  background: var(--gradient-warm);
  background-size: 200% 200%;
  animation: gradientShift 6s var(--ease-out) infinite;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-deep);
}

.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent);
  animation: pulse 2.4s var(--ease-out) infinite;
}

/* ==========================================================================
   Hero pieces
   ========================================================================== */
.hero {
  background:
    radial-gradient(900px 520px at 80% 8%, rgba(238, 175, 43, 0.20), transparent 62%),
    radial-gradient(760px 480px at 6% 84%, rgba(85, 21, 18, 0.10), transparent 60%),
    linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-light) 100%);
}

.hero__title .gradient-text {
  background: var(--gradient-brand);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s var(--ease-out) infinite;
}

.hero__tagline {
  margin-block: var(--space-xl);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--color-primary-deep);
}

.hero__description {
  max-width: 560px;
  color: var(--color-text-soft);
}

.stat__number {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary-deep);
}

.stat__suffix {
  font-size: 0.55em;
}

/* max-width lets the longest label ("Step traditional method") wrap onto two
   lines instead of stretching its column to 216px. Three stats plus gaps
   otherwise exceed the 609px content column and the third drops to its own
   row — a wrap that looks like a bug rather than a decision. */
.stat__label {
  margin-top: var(--space-sm);
  max-width: 15ch;
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}

/* Centred layout below the desktop breakpoint, where the stats are centred
   as a group and the cap would push them off-centre. */
@media (max-width: 1023px) {
  .stat__label {
    margin-inline: auto;
  }
}

/* Hero product photograph */
/* The packshot is a cutout on transparency, so it gets no card of its own:
   a rounded panel and a box shadow would draw a rectangle around a jar that
   has no rectangle, and hide the decorative rings sitting behind it. */
.hero__product {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  margin: 0;
  animation: float 7s ease-in-out infinite;
}

/* object-fit is deliberately absent. It only applies when a fixed box is
   imposed on the image, and any crop here would cut the lid or the base —
   the jar is already trimmed and centred in the file. */
.hero__product img {
  display: block;
  width: 100%;
  height: auto;
  /* Shadow follows the jar's silhouette rather than its bounding box. Two
     layers: a tight contact shadow and a wider ambient one. */
  filter:
    drop-shadow(0 8px 14px rgba(85, 21, 18, 0.20))
    drop-shadow(0 26px 44px rgba(85, 21, 18, 0.26));
}

/* pointer-events: none is load-bearing, not a tidy-up. These rings are
   oversized absolutely-positioned circles (the outer one insets by -56px)
   that spill out of .hero__visual and cover the hero buttons on desktop.
   They are decorative and aria-hidden, but without this they still sit on
   top as hit targets and swallow every click on "Experience SSV" and
   "Learn Our Process" — the buttons look fine and simply do nothing. */
.hero__ring {
  position: absolute;
  inset: -28px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 50%;
  pointer-events: none;
  animation: spin 40s linear infinite;
}

.hero__ring--outer {
  inset: -56px;
  border-style: solid;
  border-color: var(--color-border);
  animation-duration: 64s;
  animation-direction: reverse;
}

/* ==========================================================================
   Process steps
   ========================================================================== */
.step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-xl);
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background-color: var(--color-light);
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base) var(--ease-spring),
    background var(--transition-base) var(--ease-out),
    color var(--transition-base) var(--ease-out),
    border-color var(--transition-base) var(--ease-out),
    box-shadow var(--transition-base) var(--ease-out);
}

.step__icon svg {
  width: 34px;
  height: 34px;
  transition: transform var(--transition-base) var(--ease-spring);
}

.step:hover .step__icon {
  transform: translateY(-6px) scale(1.05);
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-text-invert);
  box-shadow: var(--shadow-accent);
}

.step:hover .step__icon svg {
  transform: scale(1.1) rotate(-6deg);
}

/* Gold (#eeaf2b) on the cream band measures 1.72:1 — far below the 4.5:1
   AA floor for 12px text, which left "STEP ONE" almost invisible. The deep
   brown below carries the same warmth at 7.4:1. */
.step__number {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-brown-deep);
}

.step h3 {
  margin-bottom: var(--space-md);
}

.step p {
  max-width: 260px;
  margin-inline: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.process__note {
  padding: clamp(var(--space-2xl), 4vw, var(--space-3xl));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-light);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.process__note p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  position: relative;
  padding: clamp(var(--space-xl), 3vw, var(--space-2xl));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--transition-base) var(--ease-spring),
    box-shadow var(--transition-base) var(--ease-out),
    border-color var(--transition-base) var(--ease-out);
}

/* Gradient bar that wipes in on hover */
.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

.card:hover::before {
  transform: scaleX(1);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(238, 175, 43, 0.22), rgba(85, 21, 18, 0.12));
  color: var(--color-primary-deep);
  transition: transform var(--transition-base) var(--ease-spring);
}

.card__icon svg {
  width: 28px;
  height: 28px;
}

.card:hover .card__icon {
  transform: scale(1.1) rotate(-6deg);
}

.card h3 {
  margin-bottom: var(--space-md);
}

.card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

/* ---------- Glassmorphic card (memory section) ---------- */
.card--glass {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: none;
}

.card--glass::before {
  background: var(--gradient-gold);
}

.card--glass:hover {
  background-color: var(--glass-bg-hover);
  border-color: rgba(238, 175, 43, 0.5);
  box-shadow: var(--shadow-lg);
}

.card--glass h3 {
  color: var(--color-text-invert);
}

.card--glass p {
  color: var(--color-text-invert-soft);
}

.card--glass .card__icon {
  background-color: rgba(238, 175, 43, 0.18);
  color: var(--color-gold);
}

/* ---------- Trust pillar ---------- */
.pillar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding: clamp(var(--space-xl), 3vw, var(--space-2xl));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-light);
  transition:
    transform var(--transition-base) var(--ease-spring),
    box-shadow var(--transition-base) var(--ease-out),
    background-color var(--transition-base) var(--ease-out);
}

.pillar:hover {
  transform: translateY(-6px);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.pillar__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--gradient-gold);
  color: var(--color-text);
  transition: transform var(--transition-base) var(--ease-spring);
}

.pillar__icon svg {
  width: 24px;
  height: 24px;
}

.pillar:hover .pillar__icon {
  transform: scale(1.1) rotate(-8deg);
}

.pillar h3 {
  margin-bottom: var(--space-sm);
  font-size: 1.1875rem;
}

.pillar p {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-xl), 3vw, var(--space-2xl));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base) var(--ease-spring),
    box-shadow var(--transition-base) var(--ease-out),
    border-color var(--transition-base) var(--ease-out);
}

.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

/* Oversized opening quote as a watermark. Decorative, so it is hidden from
   assistive tech and never selectable. */
.testimonial__mark {
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0.8;
  height: 2rem;
  color: var(--color-accent);
  opacity: 0.45;
  user-select: none;
}

.testimonial blockquote p {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--color-text);
}

/* margin-top:auto pins the attribution to the bottom, so names line up
   across cards of differing quote length. */
.testimonial__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--space-xl);
}

.testimonial__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-deep);
}

.testimonial__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-mute);
}

/* ==========================================================================
   FAQ accordion

   Built on <details>/<summary>. The panel is animated with a
   grid-template-rows 0fr -> 1fr transition, the same technique the mobile
   menu uses, because it animates to the content's real height without
   measuring it in JavaScript. max-height would need a magic number that is
   either too small (clipping) or too large (a lazy, floaty close).
   ========================================================================== */
.faq__list {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    border-color var(--transition-base) var(--ease-out),
    box-shadow var(--transition-base) var(--ease-out),
    background-color var(--transition-base) var(--ease-out);
}

.faq-item:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.faq-item[open] {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* ---------- Summary (the clickable row) ---------- */
.faq-item__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  padding: clamp(var(--space-lg), 2.4vw, var(--space-xl));
  min-height: 64px;
  cursor: pointer;
  list-style: none;                /* strips the default disclosure triangle */
  user-select: none;
}

/* Safari keeps its own marker behind a pseudo-element. */
.faq-item__summary::-webkit-details-marker {
  display: none;
}

/* The outline goes on the row itself rather than the whole <details>, so
   keyboard focus frames the control the user is actually operating. */
.faq-item__summary:focus-visible {
  outline: 3px solid var(--color-amber);
  outline-offset: -3px;
  border-radius: var(--radius-lg);
}

.faq-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(238, 175, 43, 0.22), rgba(85, 21, 18, 0.12));
  color: var(--color-primary-deep);
  transition:
    transform var(--transition-base) var(--ease-spring),
    background var(--transition-base) var(--ease-out),
    color var(--transition-base) var(--ease-out);
}

.faq-item__icon .icon {
  width: 22px;
  height: 22px;
}

.faq-item[open] .faq-item__icon {
  background: var(--gradient-brand);
  color: var(--color-text-invert);
}

.faq-item__summary:hover .faq-item__icon {
  transform: scale(1.06) rotate(-6deg);
}

.faq-item__question {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.9vw, 1.1875rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  text-wrap: balance;
}

.faq-item[open] .faq-item__question {
  color: var(--color-primary-deep);
}

/* ---------- Marker: a plus that becomes a minus ---------- */
.faq-item__marker {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.faq-item__marker::before,
.faq-item__marker::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base) var(--ease-spring);
}

/* Only the upright stroke rotates, so open/close reads as a plus folding
   into a minus rather than the whole glyph spinning. */
.faq-item__marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__marker::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ---------- Panel ---------- */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base) var(--ease-out);
}

/* No-JS fallback, and the state the browser paints before the script runs:
   an open <details> shows its panel immediately. Without this the panel
   would sit at 0fr with `open` set and the answer would be invisible to
   anyone whose JavaScript is blocked or slow. Scoped to :not(.js) plus the
   pre-hydration window so it never fights the animated rule. */
html:not(.js) .faq-item[open] .faq-item__panel,
.faq-item[open] .faq-item__panel:not(.is-open):not(.is-closing) {
  grid-template-rows: 1fr;
}

/* .is-open is set by js/interactions.js one frame after `open` lands, which
   is what gives the row something to animate from. */
.faq-item__panel.is-open {
  grid-template-rows: 1fr;
}

/* The collapsing child carries no padding of its own. Padding on this
   element does not collapse with the 0fr row, so it would leave every
   closed item with a ghost gap the height of that padding; the inset lives
   on .faq-item__answer inside instead. */
.faq-item__panel > .faq-item__answer {
  min-height: 0;                   /* lets the 0fr row actually collapse */
  overflow: hidden;
}

.faq-item__inner > :first-child {
  /* the summary already provides the space above */
  margin-block-start: 0;
}

.faq-item__inner {
  padding-inline: clamp(var(--space-lg), 2.4vw, var(--space-xl));
  /* Aligned to the question text, past the 44px icon and its 16px gap. */
  padding-inline-start: calc(clamp(var(--space-lg), 2.4vw, var(--space-xl)) + 44px + var(--space-lg));
  padding-block-end: clamp(var(--space-lg), 2.4vw, var(--space-xl));
}

.faq-item__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--color-primary-deep);
}

.faq-item__lead + p {
  margin-top: var(--space-md);
}

.faq-item__answer p:not(.faq-item__lead) {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

/* ---------- The three-part promise (Q4) ---------- */
.faq-pillars {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* This answer is the pillars alone, with no lead paragraph above them, so
   they need the breathing room the lead would otherwise have provided. */
.faq-item__inner > .faq-pillars:first-child {
  margin-block-start: var(--space-sm);
}

.faq-pillars li {
  padding-inline-start: var(--space-lg);
  border-inline-start: 3px solid var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

/* Below this width the icon rail costs more than the alignment buys, so the
   answer returns to the row's own padding and uses the full column. */
@media (max-width: 640px) {
  .faq-item__inner {
    padding-inline-start: clamp(var(--space-lg), 2.4vw, var(--space-xl));
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__summary:hover .faq-item__icon,
  .faq-item__marker::before,
  .faq-item__marker::after {
    transition: none;
  }

  .faq-item__summary:hover .faq-item__icon {
    transform: none;
  }

  /* Drive the panel from `open` alone, with no transition. The animated
     path leans on .is-open, which the reduced-motion branch in
     js/interactions.js never sets; without these rules a just-closed panel
     keeps its old grid row until something else forces a reflow, which
     showed up as a closed item holding full height for most of a second. */
  .faq-item__panel {
    transition: none;
    grid-template-rows: 0fr;
  }

  .faq-item[open] .faq-item__panel {
    grid-template-rows: 1fr;
  }
}

/* ==========================================================================
   Media band — a full-width photograph used to break up long text runs
   ========================================================================== */
.media-band {
  margin: clamp(var(--space-3xl), 6vw, var(--space-4xl)) auto 0;
  max-width: 900px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.media-band--wide {
  max-width: 1000px;
}

/* The source crops are wide letterbox strips, so a fixed aspect ratio plus
   object-fit keeps them from becoming either squat or cropped oddly. */
.media-band img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  transition: transform var(--transition-slow) var(--ease-out);
}

/* family-table.jpg, the only band left on the page, is 614x262 — small for a
   slot that would otherwise display it at ~1000px, a 1.63x upscale that
   reads as soft and worse again on a retina screen. This cap holds it to
   ~1.3x while keeping the band wide enough not to look cramped.

   REPLACE THE SOURCE IMAGE, then raise this back to 1000px. For crisp
   rendering at that size the file wants to be ~2000px wide (2x the CSS
   display width). */
.media-band--wide {
  max-width: 800px;
}

.media-band:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .media-band:hover img {
    transform: none;
  }
}

/* ==========================================================================
   Quote
   ========================================================================== */
.quote {
  max-width: 780px;
  margin-inline: auto;
  margin-block-start: clamp(var(--space-3xl), 6vw, var(--space-4xl));
  text-align: center;
}

.quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  line-height: 1.55;
  color: var(--color-text-invert);
}

.quote cite {
  display: block;
  margin-top: var(--space-xl);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.cta {
  background: var(--gradient-cta);
  background-size: 180% 180%;
  animation: gradientShift 10s var(--ease-out) infinite;
  color: var(--color-text-invert);
}

.cta h2 {
  margin-bottom: var(--space-xl);
  color: var(--color-text-invert);
}

.cta p {
  margin-bottom: var(--space-2xl);
  color: rgba(250, 244, 236, 0.9);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

/* Outlined sibling for the light CTA button — gives the secondary path
   (WhatsApp) real presence without competing with the primary one. */
.btn--outline-light {
  background-color: transparent;
  color: var(--color-text-invert);
  border-color: rgba(250, 244, 236, 0.5);
}

.btn--outline-light:hover {
  color: var(--color-text-invert);
  background-color: rgba(250, 244, 236, 0.14);
  border-color: var(--color-text-invert);
  transform: translateY(-3px) scale(1.03);
}

.btn--outline-light .ripple {
  background-color: rgba(250, 244, 236, 0.4);
}

/* .cta__inner caps its children at 720px, which forces these three onto two
   rows. Negative inline margins let just this row use the fuller width so it
   holds a single line on desktop; it still wraps and stacks on narrow
   screens, where the margins collapse to nothing. */
.cta__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-2xl);
  width: auto;
  margin-top: var(--space-2xl);
  margin-inline: clamp(-5rem, -4vw, 0rem);
  padding: 0;
  list-style: none;
}

.cta__assurances li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: rgba(250, 244, 236, 0.92);
}

.cta__assurances .icon {
  width: 18px;
  height: 18px;
  color: var(--color-gold-light);
}

.cta__note {
  margin-top: var(--space-xl);
  font-size: var(--font-size-xs);
  color: rgba(250, 244, 236, 0.78);
}

/* <address> is italic by default in every browser; this is contact data, not
   an aside, so it reads as normal text. */
.cta__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-style: normal;
  font-size: var(--font-size-sm);
}

.cta__contact a {
  /* inline-flex + min-height lifts the hit area to the 44px touch floor
     without moving the text off its line. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* 8.8:1 on the CTA gradient — comfortably past AA. */
  color: var(--color-text-invert);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(250, 244, 236, 0.45);
  transition: text-decoration-color var(--transition-fast) var(--ease-out);
  /* Long address must not force a horizontal scrollbar on a 320px screen. */
  overflow-wrap: anywhere;
}

.cta__contact a:hover {
  color: var(--color-text-invert);
  text-decoration-color: var(--color-gold-light);
}

.cta__contact span {
  color: rgba(250, 244, 236, 0.45);
}

/* ==========================================================================
   Form
   ========================================================================== */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 480px;
  margin-top: var(--space-2xl);
}

.form-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: var(--space-lg) var(--space-xl);
  border: 2px solid rgba(250, 244, 236, 0.28);
  border-radius: var(--radius-pill);
  background-color: rgba(250, 244, 236, 0.12);
  color: var(--color-text-invert);
  font-size: var(--font-size-sm);
  transition:
    border-color var(--transition-base) var(--ease-out),
    background-color var(--transition-base) var(--ease-out);
}

.form-input::placeholder {
  color: rgba(250, 244, 236, 0.62);
}

.form-input:hover {
  border-color: rgba(250, 244, 236, 0.45);
}

.form-input:focus {
  background-color: rgba(250, 244, 236, 0.2);
  border-color: var(--color-gold);
}

.form-input[aria-invalid="true"] {
  border-color: var(--color-gold);
}

.newsletter-form .btn--primary {
  flex: 0 0 auto;
  background: var(--color-light);
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-md);
}

.newsletter-form .btn--primary:hover {
  color: var(--color-primary-deep);
  background: var(--color-surface);
  animation: none;
}

.newsletter-form .btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Full-width status line below both fields */
.form-status {
  flex: 1 0 100%;
  min-height: 1.4em;
  margin: 0;
  font-size: var(--font-size-xs);
  color: rgba(250, 244, 236, 0.86);
}

.form-status.is-error {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer__tagline {
  margin-top: var(--space-lg);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-gold);
}

/* Keeps the motto tucked directly under the copyright line it belongs to,
   rather than letting the row's flex layout space them apart. */
.site-footer__credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Same serif italic gold as .site-footer__tagline, a touch smaller so the
   brand line above stays the louder of the two. It inherits its alignment
   from the credit block, so it sits flush under the copyright on desktop
   and stays left-aligned with it on mobile. */
/* Sized to sit with the copyright line it follows (--font-size-xs, 13px)
   rather than compete with it. A serif at the same nominal size reads a
   little smaller than the sans beside it, so the nudge up to 0.875rem keeps
   the two lines looking equal weight. */
.site-footer__motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gold);
}

/* The credit link sits in muted grey body text, so it needs to read as a
   link without shouting: same colour as its sentence, underlined on hover. */
.footer-credit {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(250, 244, 236, 0.35);
  transition:
    color var(--transition-fast) var(--ease-out),
    text-decoration-color var(--transition-fast) var(--ease-out);
  /* The link sits inline in the middle of a sentence, so it cannot take a
     min-height without breaking the line box. Vertical padding grows the
     touch area to ~44px instead; because the element is inline, that
     padding overflows the line rather than pushing the text apart, so the
     credit line looks unchanged. */
  padding-block: 14px;
}

.footer-credit:hover {
  color: var(--color-gold);
  text-decoration-color: var(--color-gold);
}

/* inline-flex + min-height lifts the hit area to 44px without moving the
   text; the links measured 27px tall before. */
.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--font-size-sm);
  color: rgba(250, 244, 236, 0.7);
}

.footer-link:hover {
  color: var(--color-gold);
}

/* The shared .link-underline draws its rule 2px below the box. Now that the
   box is padded out to a 44px target, that would float well clear of the
   text, so pull it back to sit under the baseline. */
.footer-link.link-underline::after {
  inset-block-end: calc(50% - 0.85em);
}

.social-links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.social-link {
  display: grid;
  place-items: center;
  width: 44px;                     /* touch-target floor */
  height: 44px;
  border: 1px solid var(--color-border-invert);
  border-radius: 50%;
  color: rgba(250, 244, 236, 0.7);
  transition:
    transform var(--transition-base) var(--ease-spring),
    background-color var(--transition-base) var(--ease-out),
    color var(--transition-base) var(--ease-out);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

.social-link:hover {
  transform: translateY(-3px) scale(1.08);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* ==========================================================================
   Scroll-to-top button
   ========================================================================== */
.scroll-top {
  position: fixed;
  inset-block-end: var(--space-xl);
  inset-inline-end: var(--space-xl);
  z-index: var(--z-top);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--transition-base) var(--ease-out),
    visibility var(--transition-base) var(--ease-out),
    transform var(--transition-base) var(--ease-spring),
    box-shadow var(--transition-base) var(--ease-out);
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: var(--shadow-accent);
}

.scroll-top svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Icons — shared sizing via the inline sprite
   ========================================================================== */

/* The sprite itself is markup, not UI: it must occupy no space and never be
   read out. `display:none` alone is enough for <symbol>, which is never
   rendered directly, but the extra properties keep it inert if a symbol is
   ever promoted to a drawable element during editing. */
.icon-sprite {
  display: none !important;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  /* flex: none stops an icon being squashed when it sits beside text in a
     flex row — without it the arrow in .btn collapses as the label grows. */
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}