/* ==========================================================================
   ATHLI — Inner pages
   Extends css/style.css. Same tokens, same motion language (GSAP + Lenis),
   but its own editorial layout system so the inner pages read as a
   deliberate second act rather than a re-run of the home page.

   Components here:
     .page-hero      — full-bleed dark opening with masked display type
     .rule-row       — hairline meta bar (the editorial spine of the site)
     .index-list     — numbered editorial list with hover image preview
     .stack          — sticky stacking cards (process / how it works)
     .bento          — asymmetric feature grid
     .story          — sticky media + scrolling narrative
     .matrix         — comparison table
     .form-card      — enquiry / contact form
   ========================================================================== */

/* ==========================================================================
   Page-level texture — a very fine grain over the dark sections only.
   Kept as a single inline SVG so there is no extra network request.
   ========================================================================== */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Global small pieces used across the inner pages
   ========================================================================== */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--forest);
  border-bottom: 1.5px solid rgba(var(--ink-rgb), 0.18);
  padding-bottom: 3px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.link:hover { border-color: var(--accent); color: var(--accent); }
.link svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.link:hover svg { transform: translateX(3px); }
.link--light { color: var(--off-white); border-color: rgba(var(--paper-rgb), 0.28); }
.link--light:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

/* Active nav item */
.nav-links a.is-current:not(.btn) { color: var(--accent); }
.nav-links a.is-current:not(.btn)::after { width: 100%; background: var(--accent); }

/* Tag pills */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  color: var(--forest);
  background: transparent;
}
.tag--light { border-color: rgba(var(--paper-rgb), 0.22); color: rgba(var(--paper-rgb), 0.86); }
.tag--accent { border-color: var(--accent); color: var(--accent); }
.tag--solid { background: var(--accent); border-color: var(--accent); color: var(--off-white); }

/* Section number — the editorial spine */
.sec-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 20px;
}

/* ==========================================================================
   PAGE HERO
   Full-bleed forest opening. Oversized outlined ghost word behind, a hairline
   grid overlay, masked display headline, and a meta rule-row along the base.
   ========================================================================== */
.page-hero {
  position: relative;
  /* Same ground as the home page hero — cream falling to off-white, with
     the same two soft colour washes bleeding in from the corners. */
  background: linear-gradient(180deg, var(--cream) 0%, var(--off-white) 100%);
  color: var(--ink);
  padding: 140px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28), transparent 68%);
  top: -220px; right: -160px;
  pointer-events: none;
  z-index: 0;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sage-rgb), 0.2), transparent 70%);
  bottom: -140px; left: -120px;
  pointer-events: none;
  z-index: 0;
}
.page-hero__ghost {
  position: absolute;
  right: -3vw;
  top: 8%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(9rem, 22vw, 22rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--ink-rgb), 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.page-hero__inner { position: relative; z-index: 2; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
  margin-bottom: 26px;
}
.breadcrumb a { transition: color 0.3s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--forest); }
.breadcrumb svg { width: 13px; height: 13px; opacity: 0.5; }

.page-hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 60px;
  align-items: end;
  padding-bottom: 48px;
}
.page-hero h1 {
  color: var(--forest);
  font-size: clamp(2.15rem, 3.9vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.page-hero__lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.page-hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--forest-soft);
}
.page-hero__media img,
.page-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0) 45%, rgba(var(--ink-rgb), 0.6) 100%);
}
.page-hero__caption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--off-white);
}
.page-hero__caption svg { width: 15px; height: 15px; color: var(--accent); }

/* Hairline meta bar along the base of every page hero */
.rule-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
}
.rule-row > div {
  padding: 24px 26px 30px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.14);
}
.rule-row > div:first-child { padding-left: 0; }
.rule-row > div:last-child { border-right: none; padding-right: 0; }
.rule-row strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: var(--forest);
  letter-spacing: -0.01em;
}
/* Direct child only — a count-up <span> nested inside the <strong> must
   keep the big display size, not the caption size. */
.rule-row > div > span {
  display: block;
  margin-top: 8px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rule-row strong span { font-size: inherit; color: inherit; display: inline; margin: 0; }

/* Light variant used mid-page on cream sections */
.rule-row--ink { border-top-color: rgba(var(--ink-rgb), 0.14); }
.rule-row--ink > div { border-right-color: rgba(var(--ink-rgb), 0.14); padding-bottom: 30px; }
.rule-row--ink strong { color: var(--forest); }
.rule-row--ink > div > span { color: var(--ink-soft); }

/* ==========================================================================
   TEXT MARQUEE STRIP — thin accent band between sections
   ========================================================================== */
.strip {
  background: var(--accent);
  color: var(--off-white);
  padding: 20px 0;
  overflow: hidden;
}
.strip--forest { background: var(--forest); }
.strip--tan { background: var(--tan); color: var(--forest); }
.strip__track { display: flex; width: max-content; }
.strip__group { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.strip__group span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.strip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.55; flex-shrink: 0; }

/* ==========================================================================
   INDEX LIST — numbered editorial rows that reveal a floating image on hover.
   Used for the Clubs & Quests line-up and the corporate inclusions.
   ========================================================================== */
.index-list { position: relative; border-top: 1px solid rgba(var(--ink-rgb), 0.13); }
.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 8px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.13);
  transition: padding-left 0.45s var(--ease), background 0.45s var(--ease);
}
.index-row:hover { padding-left: 26px; background: rgba(var(--ink-rgb), 0.025); }
.index-row__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.35);
  transition: color 0.4s var(--ease);
}
.index-row:hover .index-row__num { color: var(--accent); }
.index-row__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.3vw, 1.75rem);
  letter-spacing: -0.015em;
  color: var(--forest);
  transition: color 0.4s var(--ease);
}
.index-row:hover .index-row__name { color: var(--accent); }
.index-row__meta {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.index-row__meta.is-soon { color: var(--accent); }
.index-row__desc {
  grid-column: 2 / 3;
  margin-top: 4px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Floating preview that follows the cursor (desktop only, set up in pages.js) */
.index-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  box-shadow: var(--shadow-soft);
}
.index-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Dark variant */
.index-list--light { border-top-color: rgba(var(--paper-rgb), 0.16); }
.index-list--light .index-row { border-bottom-color: rgba(var(--paper-rgb), 0.16); }
.index-list--light .index-row:hover { background: rgba(var(--paper-rgb), 0.04); }
.index-list--light .index-row__num { color: rgba(var(--paper-rgb), 0.35); }
.index-list--light .index-row__name { color: var(--off-white); }
.index-list--light .index-row__meta { color: rgba(var(--paper-rgb), 0.55); }
.index-list--light .index-row__desc { color: rgba(var(--paper-rgb), 0.6); }

/* ==========================================================================
   STACK — sticky stacking cards. Each card pins under the one before it,
   so the process reads as a physical deck being dealt.
   ========================================================================== */
.stack { display: flex; flex-direction: column; gap: 26px; }
.stack__card {
  position: sticky;
  top: 118px;
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: var(--radius-lg);
  padding: 46px 50px;
  display: grid;
  grid-template-columns: 92px 1fr 0.72fr;
  gap: 38px;
  align-items: start;
  box-shadow: 0 -10px 40px rgba(var(--ink-rgb), 0.05);
  /* Explicit starting value: GSAP reads a computed `none` as brightness(0),
     which flashes the card to black mid-scrub. */
  filter: brightness(1);
}
.stack__card:nth-child(2) { top: 138px; }
.stack__card:nth-child(3) { top: 158px; }
.stack__card:nth-child(4) { top: 178px; }
.stack__card:nth-child(5) { top: 198px; }
.stack__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(var(--ink-rgb), 0.3);
}
.stack__card h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.stack__card p { margin-top: 14px; color: var(--ink-soft); line-height: 1.72; font-size: 1rem; }
.stack__list { display: flex; flex-direction: column; gap: 11px; }
.stack__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.stack__list svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.stack__card--dark {
  background: var(--forest);
  border-color: rgba(var(--paper-rgb), 0.12);
}
.stack__card--dark h3 { color: var(--off-white); }
.stack__card--dark p, .stack__card--dark .stack__list li { color: rgba(var(--paper-rgb), 0.7); }
.stack__card--dark .stack__num { -webkit-text-stroke-color: rgba(var(--paper-rgb), 0.35); }

/* ==========================================================================
   BENTO — asymmetric feature grid
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.bento__cell {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: var(--radius-md);
  padding: 34px 32px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.bento__cell:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--ink-rgb), 0.2);
  box-shadow: var(--shadow-card);
}
.bento__cell--2 { grid-column: span 2; }
.bento__cell--3 { grid-column: span 3; }
.bento__cell--4 { grid-column: span 4; }
.bento__cell--6 { grid-column: span 6; }
.bento__cell--tall { grid-row: span 2; display: flex; flex-direction: column; }
.bento__cell--dark { background: var(--forest); border-color: transparent; color: rgba(var(--paper-rgb), 0.75); }
.bento__cell--dark h4 { color: var(--off-white); }
.bento__cell--accent { background: var(--accent); border-color: transparent; color: rgba(var(--paper-rgb), 0.9); }
.bento__cell--accent h4 { color: var(--off-white); }
.bento__cell--tan { background: var(--tan); border-color: transparent; }
.bento__cell h4 { font-size: 1.14rem; margin-top: 20px; letter-spacing: -0.01em; }
.bento__cell p { margin-top: 10px; font-size: 0.94rem; line-height: 1.68; color: inherit; opacity: 0.86; }
.bento__cell--dark p, .bento__cell--accent p { opacity: 1; }
.bento__cell:not(.bento__cell--dark):not(.bento__cell--accent):not(.bento__cell--on-dark) p { color: var(--ink-soft); }

/* Cells that sit ON a dark section keep a translucent ground but must take
   light type — without this the body copy inherited the dark ink colour and
   disappeared against the forest background. */
.bento__cell--on-dark {
  background: rgba(var(--paper-rgb), 0.05);
  border-color: rgba(var(--paper-rgb), 0.16);
  color: rgba(var(--paper-rgb), 0.8);
}
.bento__cell--on-dark:hover { border-color: rgba(var(--paper-rgb), 0.32); box-shadow: none; }
.bento__cell--on-dark h4 { color: var(--off-white); }
.bento__cell--on-dark p { color: rgba(var(--paper-rgb), 0.8); opacity: 1; }
.bento__cell--on-dark .check-list li { color: rgba(var(--paper-rgb), 0.86); }
.bento__cell--on-dark .check-list svg { color: var(--accent); }
.bento__big {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.bento__cell--dark .bento__big, .bento__cell--accent .bento__big { color: var(--off-white); }
.bento__media { margin-top: auto; padding-top: 26px; }
.bento__media img { border-radius: var(--radius-sm); }

/* ==========================================================================
   STORY — sticky media column beside a scrolling narrative. Used for the
   founder story on About.
   ========================================================================== */
.story { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.story__media { position: sticky; top: 120px; }
.story__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.story__frame img { width: 100%; height: 100%; object-fit: cover; }
.story__body > * + * { margin-top: 26px; }
.story__body p { font-size: 1.06rem; line-height: 1.85; color: var(--ink-soft); }
.story__body p.is-lead {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.45;
  color: var(--forest);
  letter-spacing: -0.015em;
}
.story__pull {
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 26px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--forest);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   MATRIX — comparison table, treated as a designed object rather than a
   default HTML table. Forest header bar, sticky row-label column so the
   thing you are comparing never scrolls away, accent check pills for the
   yes cells, and full-width accent bands for the group rows.
   ========================================================================== */
.matrix-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.matrix {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.93rem;
}

/* --- Header bar --- */
.matrix thead th {
  background: var(--forest);
  color: var(--off-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px 18px;
  white-space: nowrap;
  border: none;
}
.matrix thead th:first-child {
  text-align: left;
  padding-left: 28px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--forest);
}
.matrix thead th::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 9px auto 0;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.85;
}
.matrix thead th:first-child::after { margin-left: 0; }

/* --- Body cells --- */
.matrix tbody th,
.matrix tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  vertical-align: middle;
  text-align: center;
  color: var(--ink-soft);
  transition: background 0.3s var(--ease);
}
.matrix tbody th {
  text-align: left;
  padding-left: 28px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--forest);
  width: 26%;
  min-width: 220px;
  /* The label column stays put while the plan columns scroll sideways. */
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--white);
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: none; }

/* Row hover — highlights the whole comparison line you're reading. */
.matrix tbody tr:hover th,
.matrix tbody tr:hover td { background: rgba(231, 211, 191, 0.3); }
.matrix tbody tr:hover th { background: rgba(231, 211, 191, 0.55); }

/* --- Group bands --- */
.matrix tr.matrix__group th {
  background: var(--cream);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 13px 28px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  position: static;
  width: auto;
}
.matrix tr.matrix__group:hover th { background: var(--cream); }

/* --- Value styling --- */
.matrix .yes {
  color: var(--forest);
  font-weight: 700;
}
.matrix .yes::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  vertical-align: -4px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf9f8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.matrix .no {
  color: rgba(var(--ink-rgb), 0.28);
  font-size: 1.15rem;
  line-height: 1;
}

/* Scroll affordance on narrow screens */
.matrix-hint {
  display: none;
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 992px) {
  .matrix-hint { display: block; }
  .matrix tbody th { min-width: 180px; width: auto; }
  .matrix thead th:first-child, .matrix tbody th { padding-left: 20px; }
}

/* ==========================================================================
   FORM CARD — contact / corporate enquiry
   ========================================================================== */
.form-card {
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: var(--radius-lg);
  padding: 44px 46px;
  box-shadow: var(--shadow-soft);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--off-white);
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--forest);
  background: var(--white);
}
.field__hint { font-size: 0.82rem; color: var(--ink-soft); }
.form-note { margin-top: 18px; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; }
.form-status {
  margin-top: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent);
  min-height: 1.2em;
}

/* Contact channel cards */
.channels { display: flex; flex-direction: column; gap: 14px; }
.channel {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 26px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--paper-rgb), 0.14);
  background: rgba(var(--paper-rgb), 0.03);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.channel:hover { border-color: rgba(var(--paper-rgb), 0.34); background: rgba(var(--paper-rgb), 0.06); transform: translateX(4px); }
.channel svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.channel h4 { font-size: 1.02rem; color: var(--off-white); }
.channel p { margin-top: 5px; font-size: 0.9rem; line-height: 1.6; color: rgba(var(--paper-rgb), 0.6); }
.channel strong { display: block; margin-top: 9px; font-family: var(--font-head); font-size: 0.96rem; color: var(--accent-soft); }

/* ==========================================================================
   SPLIT — 50/50 media + copy, alternating
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split--flip .split__media { order: 2; }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; }
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }
.split__copy h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.split__copy p { margin-top: 20px; font-size: 1.04rem; line-height: 1.78; color: var(--ink-soft); }
.split__copy .btn, .split__copy .link { margin-top: 30px; }
.section--forest .split__copy p { color: rgba(var(--paper-rgb), 0.72); }

/* Checklist */
.check-list { display: grid; gap: 12px; margin-top: 28px; }
.check-list--two { grid-template-columns: 1fr 1fr; gap: 12px 30px; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.97rem; line-height: 1.55; color: var(--ink-soft); }
.check-list svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.section--forest .check-list li { color: rgba(var(--paper-rgb), 0.75); }

/* ==========================================================================
   CTA BAND — closing call to action, reused on every inner page
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--forest);
  color: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 78px 70px;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.4) 0%, transparent 68%);
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: var(--off-white); font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 16px; }
.cta-band p { margin-top: 18px; max-width: 56ch; margin-inline: auto; color: rgba(var(--paper-rgb), 0.72); line-height: 1.75; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* ==========================================================================
   PRICING NOTICE — used wherever a confirmed price is not yet available
   ========================================================================== */
.quote-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 1px dashed rgba(var(--ink-rgb), 0.28);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  background: rgba(231, 211, 191, 0.28);
}
.quote-box svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.quote-box h4 { font-size: 1.05rem; }
.quote-box p { margin-top: 8px; font-size: 0.95rem; line-height: 1.68; color: var(--ink-soft); }

/* ==========================================================================
   TEAM CARDS
   ========================================================================== */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.person {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
}
.person__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.person:hover .person__photo img { transform: scale(1.05); }
.person__body { padding: 30px 32px 34px; }
.person__body h3 { font-size: 1.4rem; }
.person__role {
  display: block;
  margin-top: 7px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.person__body blockquote {
  margin: 20px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--forest);
}
.person__body p { margin-top: 16px; font-size: 0.96rem; line-height: 1.72; color: var(--ink-soft); }

/* ==========================================================================
   AWAITING-CONTENT PLACEHOLDER — visible, honest, and easy to swap out
   ========================================================================== */
.awaiting {
  border: 1px dashed rgba(var(--ink-rgb), 0.25);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  background: rgba(244, 237, 229, 0.5);
}
.awaiting h4 { font-size: 1.05rem; }
.awaiting p { margin-top: 10px; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.65; max-width: 46ch; margin-inline: auto; }

/* ==========================================================================
   APP PAGE — device frame
   ========================================================================== */
.device {
  position: relative;
  width: min(300px, 78vw);
  margin-inline: auto;
  border-radius: 42px;
  border: 9px solid #10261d;
  background: #10261d;
  box-shadow: 0 40px 90px rgba(var(--ink-rgb), 0.35);
  overflow: hidden;
}
.device img { width: 100%; display: block; }
.device__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 20px;
  border-radius: 0 0 14px 14px;
  background: #10261d;
  z-index: 3;
}
.device-row { display: flex; justify-content: center; gap: 30px; align-items: center; }
.device-row .device:nth-child(2) { transform: translateY(-34px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .story { grid-template-columns: 1fr; gap: 44px; }
  .story__media { position: static; }
  .stack__card { grid-template-columns: 70px 1fr; padding: 36px 34px; gap: 26px; }
  .stack__list { grid-column: 2 / -1; }
}

@media (max-width: 992px) {
  .page-hero { padding-top: 150px; }
  .page-hero__grid { grid-template-columns: 1fr; gap: 44px; padding-bottom: 54px; }
  .page-hero__media { aspect-ratio: 16 / 10; }
  .page-hero__ghost { font-size: 30vw; top: auto; bottom: 4%; right: -6vw; }
  .rule-row { grid-auto-flow: row; grid-auto-columns: auto; }
  .rule-row > div {
    padding: 22px 0;
    border-right: none;
    border-bottom: 1px solid rgba(var(--paper-rgb), 0.14);
  }
  .rule-row > div:last-child { border-bottom: none; }
  .rule-row--ink > div { border-bottom-color: rgba(var(--ink-rgb), 0.14); }
  .split, .split--flip .split__media { grid-template-columns: 1fr; order: 0; }
  .split { gap: 36px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--2, .bento__cell--3, .bento__cell--4, .bento__cell--6 { grid-column: span 2; }
  .bento__cell--tall { grid-row: auto; }
  .people { grid-template-columns: 1fr; }
  .form-card { padding: 32px 26px; }
  .cta-band { padding: 54px 28px; }
  .device-row { flex-direction: column; gap: 24px; }
  .device-row .device:nth-child(2) { transform: none; }
  .index-preview { display: none; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .check-list--two { grid-template-columns: 1fr; }
  .index-row { grid-template-columns: 46px 1fr; row-gap: 6px; padding: 20px 4px; }
  .index-row__meta { grid-column: 2 / -1; }
  .index-row__desc { grid-column: 2 / -1; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--2, .bento__cell--3, .bento__cell--4, .bento__cell--6 { grid-column: span 1; }
  .stack__card { grid-template-columns: 1fr; padding: 30px 24px; }
  .stack__card { position: static; }
}

/* ==========================================================================
   Fixes / overrides
   ========================================================================== */

/* A device frame sitting inside a page-hero media panel must not inherit the
   full-bleed cover rules meant for a photo. */
.page-hero__media .device { position: relative; z-index: 3; }
.page-hero__media .device img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}
.page-hero__media:has(.device)::after { display: none; }

/* Photo cells inside a bento grid: fixed ratio so the row height is defined
   even when every cell in it is an image. */
.bento__cell--photo {
  padding: 0;
  border: none;
  background: none;
  aspect-ratio: 4 / 3;
}
.bento__cell--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.bento__cell--photo:hover { transform: translateY(-5px); box-shadow: none; }

/* Section numbers sit above a centred head without knocking it off-centre. */
.section-head--center .sec-num { text-align: center; }

/* Stacked rule-rows (used on the app page) shouldn't double up their borders. */
.rule-row + .rule-row { border-top: none; }


/* ==========================================================================
   DARK-HERO HEADER
   Inner pages open on a forest hero, so until the header picks up its
   scrolled cream background it has to invert: light wordmark, light nav,
   light icon button and a reversed primary button.
   ========================================================================== */
.brand__mark--light { display: none; }

body.has-dark-hero .site-header:not(.is-scrolled) .brand__mark--dark { display: none; }
body.has-dark-hero .site-header:not(.is-scrolled) .brand__mark--light { display: block; }

body.has-dark-hero .site-header:not(.is-scrolled) .nav-links a:not(.btn) { color: var(--off-white); }
body.has-dark-hero .site-header:not(.is-scrolled) .nav-links a.is-current:not(.btn) { color: var(--accent-soft); }

body.has-dark-hero .site-header:not(.is-scrolled) .nav-icon-btn {
  background: rgba(var(--paper-rgb), 0.1);
  color: var(--off-white);
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-icon-btn:hover { background: rgba(var(--paper-rgb), 0.2); }

body.has-dark-hero .site-header:not(.is-scrolled) .btn--primary {
  background: var(--off-white);
  color: var(--forest);
}
body.has-dark-hero .site-header:not(.is-scrolled) .btn--primary:hover {
  background: var(--accent);
  color: var(--off-white);
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-toggle { background: var(--accent); }

/* App page — the store capture already carries its own phone frame, so it
   needs no panel behind it. The base .page-hero__media is a 4:3 cropped
   photo frame with a forest ground; on a portrait screenshot that showed
   up as a green box around the phone. This strips the frame back to the
   screenshot alone, with a soft accent glow for presence.
   Every size here is the capture's own 184 x 392, never larger — an
   upscaled bitmap is what made these look soft. */
.page-hero__media--app {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  min-height: 440px;
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.page-hero__media--app::after { display: none; }
.page-hero__media--app::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.24), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.page-hero__media--app img {
  position: relative;
  z-index: 1;
  width: 184px;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: none;
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(var(--ink-rgb), 0.3);
}

/* ==========================================================================
   APP SCREENSHOTS — real captures from the published app
   The source files are store-listing assets, so they already carry the
   phone frame and top out at 196px wide. Everything below is sized to
   that native width rather than scaled up, which is what keeps them sharp.
   ========================================================================== */
.shot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 26px;
}
.shot {
  margin: 0;
  width: 184px;
  flex: none;
  text-align: center;
}
.shot img {
  display: block;
  width: 184px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(var(--ink-rgb), 0.16);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.shot:hover img {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(var(--ink-rgb), 0.22);
}
.shot figcaption {
  margin-top: 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Two shots side by side, used opposite the download copy. */
.shot-pair {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.shot-pair .shot:last-child { margin-top: 38px; }

@media (max-width: 560px) {
  .shot-pair { gap: 14px; }
  .shot-pair .shot,
  .shot-pair .shot img { width: 46vw; max-width: 184px; }
  .shot-pair .shot:last-child { margin-top: 26px; }
}

.shot-frame {
  max-width: 760px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #16332a 0%, #0c2119 100%);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}
.shot-frame img { border-radius: var(--radius-md); }


/* A form card can sit inside a forest section; its own headings stay dark. */
.section--forest .form-card h2,
.section--forest .form-card h3,
.section--forest .form-card h4 { color: var(--forest); }

/* A matrix sitting on cream keeps its sticky label column on cream too. */
.section--cream .matrix tbody th { background: var(--white); }

/* ==========================================================================
   PRICING
   Every figure on the site is wrapped in .price so the whole set can be found
   and swapped in one pass. They are the client's Product Matrix figures
   (15 Sep), so the dotted "provisional" underline they used to carry is gone.
   ========================================================================== */
.price {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--forest);
}
.price--light { color: var(--off-white); }

.notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-md);
  background: rgba(var(--accent-rgb), 0.07);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.notice svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.notice p { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); }
.notice strong { color: var(--forest); }

/* Pricing cards */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Remote is priced at two block sizes, so its row runs two-up rather than
   leaving an empty third column. */
.price-grid--two { grid-template-columns: repeat(2, 1fr); max-width: calc((100% - 40px) / 3 * 2 + 20px); }
.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  border-radius: var(--radius-md);
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(var(--ink-rgb), 0.24); box-shadow: var(--shadow-card); }
.price-card--featured { border-color: var(--accent); border-width: 1.5px; }
.price-card__flag {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--accent);
  color: var(--off-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
}
.price-card__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.price-card__amount {
  display: block;
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--forest);
  padding-bottom: 6px;
  align-self: flex-start;
}
.price-card__unit { display: block; margin-top: 12px; font-size: 0.88rem; color: var(--ink-soft); }
.price-card__meta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Plan hero block on a product page */
.product {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
}
.product:first-of-type { border-top: none; padding-top: 0; }
.product--flip .product__media { order: 2; }
.product__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
/* The badge art is a square tile with its own cream ground, so it is clipped
   to a circle and allowed to fill the badge — the old inset padding left a
   visible square sitting inside a white circle. */
.product__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), 0.18);
  padding: 0;
  display: block;
}
.product__badge img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.product__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.product__head h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.product__kicker {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.product p { margin-top: 18px; font-size: 1.03rem; line-height: 1.78; color: var(--ink-soft); }
.product__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 30px; }
.product__from {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--forest);
}

/* ==========================================================================
   LEGAL PAGES — long-form prose with a sticky contents rail
   ========================================================================== */
.legal { display: grid; grid-template-columns: 250px 1fr; gap: 70px; align-items: start; }
.legal__toc { position: sticky; top: 118px; }
.legal__toc h4 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.legal__toc a {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid rgba(var(--ink-rgb), 0.12);
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.legal__toc a:hover, .legal__toc a.is-active { color: var(--accent); border-color: var(--accent); }

.legal__body h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
  scroll-margin-top: 120px;
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal__body h3 { font-size: 1.08rem; margin-top: 30px; }
.legal__body p { margin-top: 16px; font-size: 1rem; line-height: 1.82; color: var(--ink-soft); }
.legal__body ul { margin-top: 16px; display: grid; gap: 11px; }
.legal__body ul li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-soft);
}
.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal__body strong { color: var(--forest); }
.legal__body a:not(.btn):not(.link) { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.35); }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding: 18px 0 30px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.legal__meta strong { color: var(--forest); }

/* ==========================================================================
   GUIDES — the hub, the guide cards and the long-form article
   ========================================================================== */

/* Hub hero — one column with the meta rule-row along its base */
.guides-hero__grid { grid-template-columns: 1fr; max-width: 820px; }
.guides-hero .eyebrow { margin-bottom: 22px; }

/* Article hero — the question on the left, the short answer card beside it */
.guide-hero__grid { grid-template-columns: 1.12fr 0.88fr; align-items: end; padding-bottom: 72px; }
.guide-hero h1 { font-size: clamp(2rem, 3.5vw, 3.15rem); }
.guide-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 24px;
}
.guide-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.58);
}
.guide-hero__fact svg { width: 14px; height: 14px; color: var(--accent); }

.guide-author { display: flex; align-items: center; gap: 14px; max-width: none; margin-top: 30px; }
.guide-author__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--band);
  color: var(--band-ink);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}
.guide-author__text { display: grid; gap: 3px; font-size: 0.95rem; line-height: 1.4; color: var(--ink-soft); }
.guide-author__text strong { color: var(--forest); }
.guide-author__text small { font-size: 0.82rem; color: rgba(var(--ink-rgb), 0.55); }

.guide-answer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 34px 34px 30px;
  border-radius: var(--radius-lg);
  background: var(--band);
  color: var(--band-ink);
  box-shadow: var(--shadow-soft);
}
.guide-answer::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  top: -150px;
  right: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.45), transparent 68%);
}
.guide-answer__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.guide-answer__label svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--band-ink);
}
.guide-answer__text p { margin-top: 16px; font-size: 1rem; line-height: 1.72; color: rgba(var(--band-ink-rgb), 0.84); }
.guide-answer__text a { color: var(--band-ink); border-bottom: 1px solid rgba(var(--accent-rgb), 0.7); transition: color 0.3s var(--ease); }
.guide-answer__text a:hover { color: var(--accent-soft); }
.guide-answer__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--accent-soft);
}
.guide-answer__more svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 0.3s var(--ease); }
.guide-answer__more:hover svg { transform: rotate(90deg) translateX(3px); }

/* Article body — contents rail on the left, numbered sections on the right */
.guide-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 80px; }
.guide-rail { position: sticky; top: 118px; display: grid; gap: 30px; }
.guide-rail .legal__toc { position: static; }
.guide-toc a { display: flex; align-items: baseline; gap: 12px; line-height: 1.45; }
.guide-toc__num {
  flex: none;
  min-width: 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.38);
  transition: color 0.3s var(--ease);
}
.guide-toc a:hover .guide-toc__num, .guide-toc a.is-active .guide-toc__num { color: var(--accent); }
.guide-rail__card { padding: 26px 24px; border-radius: var(--radius-md); background: var(--cream); }
.guide-rail__card strong { display: block; font-family: var(--font-head); font-size: 1rem; line-height: 1.35; color: var(--forest); }
.guide-rail__card p { margin: 8px 0 18px; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.guide-rail__card .btn { font-size: 0.82rem; }

.guide-main { min-width: 0; max-width: 780px; }
.guide-body { counter-reset: guide-h2; }
/* The opening paragraph (the section with no heading) reads as a lead. */
.guide-body > p:first-child { margin-top: 0; font-size: 1.16rem; line-height: 1.75; color: var(--ink); }
.guide-body h2[id] { counter-increment: guide-h2; }
.guide-body h2[id]::before {
  content: counter(guide-h2, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.guide-body h3 {
  margin-top: 34px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-size: 1.12rem;
  line-height: 1.35;
}
.guide-body h3 + p { margin-top: 12px; }
.guide-body ul {
  margin-top: 22px;
  padding: 24px 28px;
  gap: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius-md);
  background: var(--white);
}
.guide-body ul li { padding-left: 32px; }
.guide-body ul li::before { left: 0; top: 4px; width: 20px; height: 20px; background: rgba(var(--accent-rgb), 0.13); }
.guide-body ul li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 6px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.guide-body ol { margin-top: 22px; padding-left: 22px; display: grid; gap: 11px; }
.guide-body ol li { padding-left: 6px; font-size: 1rem; line-height: 1.72; color: var(--ink-soft); }
.guide-body ol li::marker { font-family: var(--font-head); font-weight: 700; color: var(--accent); }
.guide-body .matrix-wrap { margin-top: 28px; }
.guide-body .matrix { min-width: 640px; }

.guide-signoff {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 60px;
  padding: 24px 26px;
  border-radius: var(--radius-md);
  background: var(--cream);
}
.guide-signoff p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }
.guide-signoff strong { display: block; font-family: var(--font-head); font-size: 0.98rem; color: var(--forest); }

.guide-closing { margin-top: 34px; max-width: 62ch; font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.guide-closing a { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.35); }

/* Guide cards — the hub and "Keep reading" */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.guide-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 340px;
  padding: 36px 36px 30px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.guide-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--ink-rgb), 0.2);
  box-shadow: var(--shadow-soft);
}
.guide-card__num {
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 26px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--ink-rgb), 0.14);
}
.guide-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}
.guide-card h2 { max-width: 22ch; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -0.015em; }
.guide-card p { margin-top: 14px; max-width: 46ch; font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
.guide-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 30px;
}
.guide-card__cta {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--accent);
}
.guide-card__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: 50%;
  color: var(--forest);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.guide-card__arrow svg { width: 16px; height: 16px; }
.guide-card:hover .guide-card__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--band-ink);
  transform: rotate(-45deg);
}

/* The first guide on the hub sits on the dark band */
.guide-card--featured { border-color: transparent; background: var(--band); color: var(--band-ink); }
.guide-card--featured::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 380px;
  height: 380px;
  right: -140px;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.38), transparent 68%);
}
.guide-card--featured:hover { border-color: transparent; }
.guide-card--featured h2 { color: var(--band-ink); }
.guide-card--featured p { color: rgba(var(--band-ink-rgb), 0.74); }
.guide-card--featured .guide-card__meta { color: rgba(var(--band-ink-rgb), 0.6); }
.guide-card--featured .guide-card__num { -webkit-text-stroke-color: rgba(var(--band-ink-rgb), 0.16); }
.guide-card--featured .guide-card__cta { color: var(--accent-soft); }
.guide-card--featured .guide-card__arrow { border-color: rgba(var(--band-ink-rgb), 0.3); color: var(--band-ink); }

/* On short screens the sticky rail would run off the bottom — contents only. */
@media (max-height: 820px) {
  .guide-rail__card { display: none; }
}
@media (max-width: 1100px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-rail { position: static; }
  .guide-rail__card { display: none; }
  .guide-toc a { display: inline-flex; }
}
@media (max-width: 992px) {
  .guide-hero__grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 56px; }
  .guide-answer { max-width: 640px; }
}
@media (max-width: 767px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 0; padding: 30px 26px 26px; }
  .guide-card__num { top: 14px; right: 18px; font-size: 4.6rem; }
}

/* ==========================================================================
   SITEMAP — every published page, in its parent/child order
   ========================================================================== */
.sitemap { display: grid; gap: 64px; max-width: 980px; }
.sitemap__title {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.sitemap__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.sitemap__list .sitemap__list { grid-template-columns: 1fr; padding-left: 22px; border-left: 2px solid rgba(var(--ink-rgb), 0.12); }
.sitemap__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  transition: color 0.3s var(--ease);
}
.sitemap__text { display: grid; gap: 6px; }
.sitemap__text strong { font-family: var(--font-head); font-size: 1.12rem; color: var(--forest); transition: color 0.3s var(--ease); }
.sitemap__text span { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.sitemap__link svg { flex: none; width: 18px; height: 18px; color: var(--accent); transition: transform 0.3s var(--ease); }
.sitemap__link:hover strong { color: var(--accent); }
.sitemap__link:hover svg { transform: translateX(4px); }
.sitemap__xml { font-size: 0.9rem; color: var(--ink-soft); }
.sitemap__xml a { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.35); }

@media (max-width: 768px) {
  .sitemap { gap: 44px; }
  .sitemap__list { grid-template-columns: 1fr; }
  .sitemap__link { padding: 16px 0; }
  .sitemap__text strong { font-size: 1rem; }
}

/* A page hero with no media panel (used by the legal pages) */
.page-hero--simple .page-hero__grid { grid-template-columns: 1fr; max-width: 860px; }

@media (max-width: 1100px) {
  .legal { grid-template-columns: 1fr; gap: 34px; }
  .legal__toc { position: static; }
  .legal__toc a { display: inline-block; border-left: none; border-bottom: 2px solid rgba(var(--ink-rgb), 0.12); margin-right: 14px; padding: 6px 0; }
}
@media (max-width: 992px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-grid--two { max-width: none; }
  .product, .product--flip .product__media { grid-template-columns: 1fr; order: 0; }
  .product { gap: 32px; padding: 44px 0; }
}

/* The amount already carries the placeholder underline; don't double it up
   when a .price span sits inside one. */
.price-card__amount .price { border-bottom: none; }


/* Legal heroes have no media column, so they get their breathing room from
   padding rather than from an image. */
.page-hero--simple .page-hero__grid {
  padding-bottom: 64px;
  /* No media column to set the height, so the grid is given the same
     footprint by hand — keeps every hero on the site the same depth. */
  min-height: 413px;
  align-content: end;
}
.page-hero--simple .page-hero__lead { max-width: 58ch; }

/* No panel to pad any more -- just give the glow less room on tablet. */
.page-hero__media--app { min-height: 400px; }

/* ==========================================================================
   TILE GRID — compact square tiles, used for the Sport Clubs line-up.
   Ten short names with no descriptions read badly as a list, so they get a
   grid instead: the whole tile is the target, and it fills with forest on
   hover with the index number sliding up behind the name.
   ========================================================================== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--forest);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  z-index: 0;
}
.tile:hover { border-color: var(--forest); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tile:hover::before { transform: translateY(0); }
.tile > * { position: relative; z-index: 1; }

.tile__num {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--ink-rgb), 0.22);
  transition: -webkit-text-stroke-color 0.45s var(--ease);
}
.tile:hover .tile__num { -webkit-text-stroke-color: var(--accent); }

.tile__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--forest);
  transition: color 0.45s var(--ease);
}
.tile:hover .tile__name { color: var(--off-white); }

.tile__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.45s var(--ease);
}
.tile:hover .tile__status { color: rgba(var(--paper-rgb), 0.65); }
.tile__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Clubs that have not opened yet read in the muted sage rather than accent. */
.tile__status.is-soon { color: var(--sage); }
.tile__status.is-soon::before { background: var(--sage); }

/* ==========================================================================
   QUEST CARDS — a third treatment again, for the dark Quests section.
   Wider cards with a rule that draws across the top on hover, so the
   Quests read as a distinct set rather than more of the same list.
   ========================================================================== */
.quest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.quest-card {
  position: relative;
  padding: 30px 28px 28px;
  border: 1px solid rgba(var(--paper-rgb), 0.15);
  border-radius: var(--radius-md);
  background: rgba(var(--paper-rgb), 0.035);
  overflow: hidden;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.quest-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}
.quest-card:hover {
  background: rgba(var(--paper-rgb), 0.07);
  border-color: rgba(var(--paper-rgb), 0.3);
  transform: translateY(-4px);
}
.quest-card:hover::after { width: 100%; }

.quest-card__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(var(--paper-rgb), 0.28);
  transition: -webkit-text-stroke-color 0.45s var(--ease);
}
.quest-card:hover .quest-card__num { -webkit-text-stroke-color: var(--accent); }

.quest-card h4 {
  margin-top: 22px;
  font-size: 1.28rem;
  letter-spacing: -0.015em;
  color: var(--off-white);
}
.quest-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--paper-rgb), 0.14);
}
.quest-card__status {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb), 0.6);
}
.quest-card__status.is-soon { color: var(--accent); }
.quest-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .quest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 16px 16px 18px; }
  .tile__name { font-size: 1rem; }
  .quest-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOUNDER CARDS
   Two horizontal cards in a single row: portrait on the left running the
   full height of the card, copy on the right. Nothing sits over the face.
   ========================================================================== */
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.founder {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--forest);
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.founder:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(var(--ink-rgb), 0.18); }

.founder__photo {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  min-height: 100%;
}
.founder__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  transition: transform 1s var(--ease);
}
.founder:hover .founder__photo img { transform: scale(1.05); }
/* A narrow fade on the inner edge only, so the portrait meets the copy
   panel cleanly without dimming the face. */
.founder__photo::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 28%;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), 0) 0%, rgba(var(--ink-rgb), 0.55) 100%);
  pointer-events: none;
}

.founder__body {
  padding: 32px 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.founder__role {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-soft);
  line-height: 1.4;
}
.founder__role::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.founder h3 {
  margin-top: 12px;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: var(--off-white);
  letter-spacing: -0.02em;
}
.founder blockquote {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(var(--paper-rgb), 0.82);
}
.founder__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.founder__meta .tag { font-size: 0.66rem; padding: 6px 12px; }
.founder__btn { margin-top: 24px; align-self: flex-start; }
.founder__full { display: none; }

@media (max-width: 1200px) {
  .founder { grid-template-columns: 36% 1fr; }
  .founder__body { padding: 26px 24px 28px; }
}
@media (max-width: 992px) {
  /* One card per row, so each one gets a roomier portrait column. */
  .founders { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 34% 1fr; }
  .founder__body { padding: 32px 32px 34px; }
}
@media (max-width: 620px) {
  .founder { grid-template-columns: 1fr; }
  .founder__photo { aspect-ratio: 4 / 3; min-height: 0; }
  .founder__photo::after {
    top: auto; width: 100%; left: 0; height: 28%;
    background: linear-gradient(180deg, rgba(var(--ink-rgb), 0) 0%, rgba(var(--ink-rgb), 0.6) 100%);
  }
  .founder__body { padding: 26px 24px 28px; }
}

/* --------------------------------------------------------------------------
   BIO MODAL — single column. The old two-column layout squeezed a square
   portrait into a tall narrow strip and cropped it to an eye.
   -------------------------------------------------------------------------- */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.bio-modal.is-open { opacity: 1; visibility: visible; }
.bio-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.72);
  backdrop-filter: blur(6px);
}
.bio-modal__dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 800px);
  background: var(--off-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(var(--ink-rgb), 0.35);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.45s var(--ease);
}
.bio-modal.is-open .bio-modal__dialog { transform: none; }

.bio-modal__content {
  padding: 44px 48px 46px;
  overflow-y: auto;
  max-height: min(86vh, 800px);
}

.bio-modal__head {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.bio-modal__avatar {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream);
}
.bio-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.bio-modal__role {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.bio-modal__role::before { content: ""; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; }
.bio-modal__content h3 { margin-top: 12px; font-size: clamp(1.8rem, 2.8vw, 2.3rem); letter-spacing: -0.02em; }

.bio-modal__quote {
  margin: 26px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--forest);
}
.bio-modal__body { margin-top: 26px; }
.bio-modal__body p { margin-top: 16px; font-size: 1rem; line-height: 1.85; color: var(--ink-soft); }
.bio-modal__body p:first-child { margin-top: 0; }

.bio-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--forest);
  color: var(--off-white);
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.bio-modal__close:hover { background: var(--accent); transform: rotate(90deg); }
.bio-modal__close svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .bio-modal__content { padding: 40px 24px 30px; }
  .bio-modal__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .bio-modal__avatar { width: 108px; height: 108px; }
}

/* ==========================================================================
   PHOTO STRIP — the "every body" band. A tight filmstrip of portrait frames
   with alternating vertical offsets, rather than a grid of oversized images.
   ========================================================================== */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: start;
}
.photo-strip figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--forest-soft);
}
.photo-strip figure:nth-child(even) { margin-top: 40px; }
.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.92);
}
.photo-strip figure:hover img { transform: scale(1.06); filter: saturate(1.05); }

@media (max-width: 992px) {
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
  .photo-strip figure:nth-child(even) { margin-top: 0; }
}
@media (max-width: 640px) {
  .photo-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* ==========================================================================
   Inner-page heroes now sit on the same light ground as the home page hero.
   A .rule-row placed inside a dark section needs the reverse treatment,
   which is what .rule-row--light restores.
   ========================================================================== */
.section--forest .rule-row,
.rule-row--light { border-top-color: rgba(var(--paper-rgb), 0.14); }
.section--forest .rule-row > div,
.rule-row--light > div { border-right-color: rgba(var(--paper-rgb), 0.14); }
.section--forest .rule-row strong,
.rule-row--light strong { color: var(--off-white); }
.section--forest .rule-row > div > span,
.rule-row--light > div > span { color: rgba(var(--paper-rgb), 0.55); }

@media (max-width: 992px) {
  .rule-row > div { border-bottom-color: rgba(var(--ink-rgb), 0.14); }
  .section--forest .rule-row > div,
  .rule-row--light > div { border-bottom-color: rgba(var(--paper-rgb), 0.14); }
}

/* The header no longer opens on a dark panel, so it keeps its default
   dark wordmark and nav on every page. */

/* ==========================================================================
   BOOKING
   A real "pick a plan, pick a package, book it" flow. The form on the left,
   a live summary on the right that updates as choices are made. There is no
   booking backend yet, so a completed form produces a pre-filled WhatsApp
   message — the booking still reaches Athli rather than dying on submit.
   ========================================================================== */
.booking { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: start; }

.booking__steps { display: grid; gap: 34px; }
.booking__step { position: relative; padding-left: 56px; }
.booking__step::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: var(--off-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
}
.booking__step h3 { font-size: 1.12rem; }
.booking__step > p { margin-top: 6px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.booking__step .form-grid { margin-top: 20px; }

/* Plan chooser — radio cards */
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick label {
  display: block;
  cursor: pointer;
  padding: 18px 18px 20px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.pick label:hover { border-color: rgba(var(--ink-rgb), 0.35); transform: translateY(-2px); }
.pick input:checked + label {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}
.pick input:focus-visible + label { outline: 2px solid var(--forest); outline-offset: 2px; }
.pick__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--forest);
}
.pick__meta { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); }
.pick__price {
  display: block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

/* Live summary */
.summary {
  position: sticky;
  top: 118px;
  background: var(--forest);
  color: rgba(var(--paper-rgb), 0.75);
  border-radius: var(--radius-lg);
  padding: 32px 30px 34px;
  overflow: hidden;
}
.summary__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.summary h3 { margin-top: 12px; font-size: 1.75rem; color: var(--off-white); }
.summary__kicker { display: block; margin-top: 6px; font-size: 0.88rem; color: rgba(var(--paper-rgb), 0.6); }

.summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.14);
  font-size: 0.92rem;
}
.summary__line:first-of-type { margin-top: 22px; border-top: 1px solid rgba(var(--paper-rgb), 0.14); }
.summary__line strong { color: var(--off-white); font-family: var(--font-head); font-weight: 700; text-align: right; }

.summary__list { margin-top: 20px; display: grid; gap: 10px; }
.summary__list li { display: flex; gap: 10px; font-size: 0.88rem; line-height: 1.5; }
.summary__list svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.summary__note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--paper-rgb), 0.14);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(var(--paper-rgb), 0.5);
}

/* Confirmation panel, shown after submit */
.booked {
  display: none;
  text-align: center;
  padding: 54px 40px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  box-shadow: var(--shadow-soft);
}
.booked.is-shown { display: block; }
.booked h3 { margin-top: 20px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.booked p { margin-top: 14px; font-size: 1rem; line-height: 1.72; color: var(--ink-soft); max-width: 52ch; margin-inline: auto; }
.booked__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.booked__recap {
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--cream);
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.booked__recap strong { color: var(--forest); }

/* Small "book this" action on a price card */
.price-card .btn { margin-top: 22px; }
.price-card__meta + .btn { margin-top: auto; }

@media (max-width: 992px) {
  .booking { grid-template-columns: 1fr; }
  .summary { position: static; }
  .pick { grid-template-columns: 1fr; }
  .booking__step { padding-left: 0; padding-top: 52px; }
  .booking__submit { padding-left: 0; }
  .booking__step::before { top: 0; }
}

/* ==========================================================================
   COMPACT HERO — used on the booking page, where the form is the point and
   the hero only needs to say where you are.
   ========================================================================== */
.page-hero--compact { padding-top: 128px; }
.page-hero--compact .page-hero__grid {
  grid-template-columns: 1fr;
  max-width: 780px;
  min-height: 0;
  padding-bottom: 52px;
}
.page-hero--compact h1 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.page-hero--compact .page-hero__lead { margin-top: 16px; max-width: 60ch; font-size: 1rem; }

/* ==========================================================================
   BOOKING — package chooser and payment options
   The package cards make step 2 visibly a different question from step 1
   (which path vs. how much of it), and they carry the amount that a card
   payment would actually charge.
   ========================================================================== */
.pick--pkg { grid-template-columns: repeat(4, 1fr); }
.pick--pay { grid-template-columns: repeat(2, 1fr); }

.pick__rate {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.pick__flag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--off-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pick--pay label { padding: 22px 22px 24px; }
.pick--pay .pick__name { font-size: 1.1rem; }
.pick__amount {
  display: block;
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--forest);
  letter-spacing: -0.02em;
}
.pick__amount small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* Card brand row under the pay option */
.pay-marks { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pay-marks span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
}
.pay-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.pay-secure svg { width: 15px; height: 15px; color: var(--accent); }
.pay-secure[hidden],
.booking__step[hidden] { display: none; }

/* The submit sits after whichever steps are showing, lined up with them. */
.booking__submit { margin-top: 34px; padding-left: 56px; }
.booking__submit .btn { margin-top: 0; }

/* Total line in the summary, only shown when paying now */
.summary__total {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--paper-rgb), 0.22);
}
.summary__total.is-shown { display: flex; }
.summary__total span { font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--paper-rgb), 0.6); }
.summary__total strong { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--accent-soft); }

@media (max-width: 992px) {
  .pick--pkg, .pick--pay { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-hero--compact { padding-top: 116px; }
}

/* ==========================================================================
   BOOKING CTAs
   Every "book this" action across the site shares one treatment, so the
   path from a price to a booking always looks the same. The outline
   variant fills forest on hover rather than just tinting, which reads far
   better on the cream pricing sections than a hairline border does.
   ========================================================================== */
.btn--book {
  justify-content: center;
  font-weight: 700;
  padding: 15px 28px;
  letter-spacing: 0.005em;
}

.btn--book.btn--outline {
  background: var(--white);
  border-color: rgba(var(--ink-rgb), 0.38);
  color: var(--forest);
}
.btn--book.btn--outline:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--off-white);
}

.btn--book.btn--accent {
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.26);
}
.btn--book.btn--accent:hover {
  background: #b8420f;
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.32);
}

/* Price cards: the CTA is pinned to the bottom so every button in a row
   sits on the same line regardless of how long the copy above it runs. */
.price-card { padding-bottom: 30px; }
.price-card .btn,
.price-card__meta + .btn {
  margin-top: auto;
  width: 100%;
}
.price-card__meta { margin-bottom: 24px; }
.price-card .link { margin-top: 16px; align-self: center; }
/* Straight-to-checkout link under the booking button. The coaching toggle
   hides it for combinations the rate card does not price. */
.price-card__buy { margin-top: 14px; }
.price-card__buy[hidden] { display: none; }
.price-card__buy-row {
  margin-top: 14px;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.price-card__buy-row a {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.price-card__buy-row a:hover { color: var(--accent); }

/* Product blocks (Elite / Remote / Blueprint / Flex): price on the left,
   the booking action and the secondary link on the right, on one baseline. */
.product__foot {
  align-items: center;
  gap: 16px 22px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
}
.product__from {
  margin-right: auto;
  font-size: 1rem;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.product__from .price { font-size: 1.15rem; }

/* Home page path panels: booking first, exploring second. */
.path-panel__foot .btn + .btn { margin-left: -8px; }

/* Header CTA — a touch more presence than a default primary button. */
.nav-actions .btn--primary {
  padding: 14px 24px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--ink-rgb), 0.14);
}
.nav-actions .btn--primary:hover { box-shadow: 0 12px 26px rgba(var(--ink-rgb), 0.2); }
.nav-actions .btn--primary svg { width: 15px; height: 15px; }

/* "Book a Free Consultation" is a long label; on narrower desktops the nav
   gives up some air so the row never wraps. */
@media (min-width: 769px) and (max-width: 1280px) {
  .nav-links { gap: 22px; }
  .nav-actions { gap: 10px; }
  .nav-actions .btn--primary { padding: 12px 18px; font-size: 0.88rem; }
}

@media (max-width: 992px) {
  .product__foot { align-items: flex-start; }
  .product__from { margin-right: 0; width: 100%; }
  .product__foot .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   HOME PLAN CARDS — the pricing strip.
   The figure leads, the package it buys sits on its baseline, and the
   caveat drops to a quiet second line. The old single middot-separated
   run made all three read as equally important, which made none of them
   readable. Two columns only: price block left, action pinned right.
   ========================================================================== */
.plan-card__pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 24px;
  padding-right: 22px;
}

.plan-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.plan-card__price-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Amount and unit share a baseline so "AED 2,399 for 10 sessions" reads
   as one phrase rather than two stacked labels. */
.plan-card__price-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
}
.plan-card__price-main .price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.plan-card__price-quote {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--forest);
}
.plan-card__price-for {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.plan-card__price-rate {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
}

.plan-card__cta {
  padding: 12px 22px;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.plan-card__cta svg { width: 14px; height: 14px; }
.plan-card__cta.btn--outline { background: var(--white); }

@media (max-width: 820px) {
  .plan-card__pricing {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 22px;
  }
  .plan-card__price-rate { max-width: none; }
  .plan-card__cta { width: 100%; justify-content: center; }
}

/* =========================================================
   HOME — FREE CONSULTATION BAND
   Full-bleed forest band that introduces the paths explorer. It breaks
   the run of light sections, so the consultation message reads as its
   own statement rather than another card inside the section.
   ========================================================= */
.consult-band {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
  background: var(--forest);
  color: var(--off-white);
  isolation: isolate;
}

/* Warm glow bleeding in from the right, same device as the app teaser. */
.consult-band__glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -240px;
  width: 720px;
  height: 720px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.26), transparent 66%);
  pointer-events: none;
}

.consult-band__ghost {
  position: absolute;
  z-index: 0;
  left: -0.03em;
  bottom: -0.26em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(5rem, 15vw, 12rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--paper-rgb), 0.07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.consult-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px 64px;
}

/* --- copy --- */
.consult-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(232, 112, 58, 0.34);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.consult-band__eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }

.consult-band__text h2 {
  margin: 20px 0 0;
  max-width: 19ch;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--off-white);
  text-wrap: balance;
}
.consult-band__text h2 em {
  font-style: normal;
  color: var(--accent-soft);
}
.consult-band__text p {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(var(--paper-rgb), 0.7);
}

/* --- actions, held apart by a hairline on desktop --- */
.consult-band__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-left: 64px;
  border-left: 1px solid rgba(var(--paper-rgb), 0.16);
}
.consult-band__actions .btn { justify-content: center; white-space: nowrap; }

.consult-band__note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  font-size: 0.86rem;
  color: rgba(var(--paper-rgb), 0.58);
}
.consult-band__note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent-soft);
}

@media (max-width: 1024px) {
  .consult-band__inner { grid-template-columns: 1fr; gap: 34px; }
  .consult-band__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(var(--paper-rgb), 0.16);
  }
  .consult-band__note { margin-top: 0; }
}

@media (max-width: 768px) {
  .consult-band { padding: 56px 0; }
  .consult-band__text h2 { max-width: none; }
  .consult-band__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .consult-band__actions .btn { width: 100%; }
  .consult-band__note { justify-content: flex-start; margin-top: 6px; }
}

/* =========================================================
   COACHING — Solo / Buddy / Group price switch
   ========================================================= */
.fmt-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
}
.fmt-toggle__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 26px;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--forest);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.fmt-toggle__btn small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.fmt-toggle__btn:hover { background: var(--cream); }
.fmt-toggle__btn.is-active { background: var(--forest); color: var(--off-white); }
.fmt-toggle__btn.is-active small { color: rgba(var(--paper-rgb), 0.72); }
.fmt-toggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fmt-toggle__note {
  margin: 0 0 30px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (max-width: 768px) {
  .fmt-toggle { width: 100%; }
  .fmt-toggle__btn { flex: 1 1 0; padding: 10px 12px; font-size: 0.86rem; }
  .fmt-toggle__btn small { font-size: 0.66rem; }
}

/* Small print inside a bento cell — used where an inclusion depends on the
   commercial model the client picks. */
.bento__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(var(--paper-rgb), 0.18);
  font-size: 0.82rem !important;
  line-height: 1.55;
  opacity: 0.72;
}
.bento__cell:not(.bento__cell--dark):not(.bento__cell--accent):not(.bento__cell--on-dark) .bento__note {
  border-top-color: rgba(var(--ink-rgb), 0.12);
}

/* =========================================================
   BOOK — the free-consultation reassurance list under the page hero
   ========================================================= */
.hero-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.hero-assure li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--forest);
}
.hero-assure svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

@media (max-width: 768px) {
  .hero-assure { flex-direction: column; gap: 10px; }
}

/* Booking-form variant of the format switch — the buttons are built in JS,
   so the label sits in a <span> rather than as a bare text node. */
.fmt-toggle--booking { margin: 4px 0 10px; }
.fmt-toggle--booking .fmt-toggle__btn span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.94rem;
}
.fmt-toggle__note[hidden] { display: none; }

/* "Reach out on WhatsApp" line under the booking submit button. */
.form-note--wa { margin-top: 10px; }
.form-note--wa a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--forest);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.25);
}
.form-note--wa a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.form-note--wa svg { width: 15px; height: 15px; flex-shrink: 0; }

/* =========================================================
   FEATURE LISTS — Read more / Read less
   Long inclusion lists on the plan cards and product blocks fold to five
   items behind a toggle (see js/script.js). The button inherits its
   colour from the surface it sits on, so it works on the cream cards,
   the white product blocks and the dark sections alike.
   ========================================================= */
.plan-card__list li.is-folded,
.check-list li.is-folded { display: none; }

/* Only the items revealed by the toggle animate -- the ones that were
   visible all along must not re-animate on load. */
.list-extra { animation: list-unfold 0.32s var(--ease) both; }
@keyframes list-unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.list-more {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 6px 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  transition: color 0.25s var(--ease);
}
.list-more__label {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.list-more__chev {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.list-more.is-open .list-more__chev { transform: rotate(180deg); }
.list-more:hover { color: var(--forest); }
.list-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* On the dark sections the forest hover would disappear. */
.section--forest .list-more,
.bento__cell--dark .list-more,
.bento__cell--on-dark .list-more { color: var(--accent-soft); }
.section--forest .list-more:hover,
.bento__cell--dark .list-more:hover,
.bento__cell--on-dark .list-more:hover { color: var(--off-white); }

/* Inside a plan card the list sits in a padded body — keep the control
   aligned to the ticks above it rather than the card edge. */
.plan-card__body .list-more { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .list-extra { animation: none; }
  .list-more__chev { transition: none; }
}

/* ==========================================================================
   "THE APP IS LIVE" BANNER
   A launch announcement that behaves like a notification rather than an ad:
   it arrives after the page has settled, sits out of the reading column, and
   goes away for good once dismissed. Desktop gets a card in the corner;
   the phone gets a full-width bar above the tab bar (see css/mobile.css).
   Built in js/app-banner.js.
   ========================================================================== */
.app-live {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 997;
  width: min(380px, calc(100vw - 56px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon text close"
    "cta  cta  cta";
  align-items: start;
  gap: 14px 13px;
  padding: 18px 18px 18px 18px;
  border-radius: var(--radius-md);
  background: var(--band);
  color: var(--band-ink);
  border: 1px solid rgba(var(--band-ink-rgb), 0.12);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);

  /* Parked out of sight until js adds .is-in — never mid-flight on load. */
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.52s var(--ease), opacity 0.42s var(--ease), visibility 0.52s;
}
.app-live.is-in { transform: translateY(0); opacity: 1; visibility: visible; }

/* --band-ink, not --off-white: the banner is a dark band in both themes, and
   --off-white flips to near-black in dark mode, which would swallow the mark. */
.app-live__icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--band-ink);
  padding: 5px;
  flex: none;
}
.app-live__text { grid-area: text; min-width: 0; }

.app-live__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  color: var(--band-ink);
}
/* A live dot, because the news is that it is live. */
.app-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent-soft);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  animation: app-live-pulse 2.4s ease-out infinite;
}
@keyframes app-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.app-live__sub {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(var(--band-ink-rgb), 0.72);
}

.app-live__cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--band-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.app-live__cta:hover { background: var(--accent-soft); transform: translateY(-1px); }
.app-live__cta svg { width: 15px; height: 15px; flex: none; }

.app-live__close {
  grid-area: close;
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  margin: -2px -2px 0 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--band-ink-rgb), 0.1);
  color: rgba(var(--band-ink-rgb), 0.7);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.app-live__close:hover { background: rgba(var(--band-ink-rgb), 0.2); color: var(--band-ink); }
.app-live__close svg { width: 13px; height: 13px; }
.app-live__close:focus-visible,
.app-live__cta:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

/* On desktop the banner sits bottom-left and WhatsApp bottom-right, so they
   no longer share a corner and nothing needs moving. The phone still does --
   see css/mobile.css. (The old .app-live ~ .wa-float never fired: the button
   is earlier in the DOM than the appended banner, and ~ only looks forward.) */
.wa-float { transition: transform 0.45s var(--ease), bottom 0.5s var(--ease), box-shadow 0.45s var(--ease); }

/* The menu sheet takes the screen; the banner should not sit under it. */
body.m-locked .app-live {
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .app-live { transition: opacity 0.2s linear; transform: none; }
  .app-live__dot { animation: none; }
}

/* ==========================================================================
   404 — page not found
   ==========================================================================
   The numeral is the whole design here, so it is drawn larger and warmer than
   the ghost on other pages and allowed to sit behind the copy rather than off
   to one side. Underneath, the routes a visitor was most likely after, as
   cards that borrow the tile treatment: an outlined number, and the forest
   rising to fill the card on hover.
   ========================================================================== */
/* Centred, because there is no second column to balance against and nothing
   below the fold to lead the eye down to — the numeral, the copy and the two
   ways out sit on one axis. */
.page-hero--lost {
  overflow: hidden;
  padding-top: 168px;
  padding-bottom: 112px;
  text-align: center;
}
.page-hero--lost .breadcrumb { justify-content: center; }
/* The simple hero caps its column at 860px and leaves it against the left
   edge of the container, which is right when the copy is ranged left and
   wrong the moment it is centred. */
.page-hero--lost .page-hero__grid {
  min-height: 0;
  padding-bottom: 0;
  justify-items: center;
  margin-inline: auto;
}
.page-hero--lost .page-hero__lead { margin-inline: auto; }
.page-hero--lost .page-hero__actions { justify-content: center; }
.page-hero__ghost--lost {
  right: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  /* Large enough to be the backdrop, small enough that it still reads as a
     number rather than three abstract strokes running off the edges. */
  font-size: clamp(9rem, 25vw, 21rem);
  -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), 0.08);
  /* Fades out downwards so the buttons never fight the strokes behind them. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 88%);
}
.lost-badge { margin-bottom: 22px; display: inline-block; }

.lost { padding-top: 0; }

.lost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lost-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  color: var(--ink);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.lost-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--forest);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  z-index: 0;
}
.lost-card > * { position: relative; z-index: 1; }
.lost-card:hover {
  border-color: var(--forest);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.lost-card:hover::before { transform: translateY(0); }
.lost-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

.lost-card__num {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--ink-rgb), 0.22);
  transition: -webkit-text-stroke-color 0.45s var(--ease);
}
.lost-card:hover .lost-card__num { -webkit-text-stroke-color: rgba(var(--paper-rgb), 0.38); }

.lost-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(var(--sage-rgb), 0.12);
  color: var(--forest);
  margin-bottom: 20px;
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
.lost-card__icon svg { width: 22px; height: 22px; }
.lost-card:hover .lost-card__icon {
  background: rgba(var(--paper-rgb), 0.14);
  color: var(--tan);
}

.lost-card__name {
  font-size: 1.12rem;
  line-height: 1.2;
  margin: 0;
  transition: color 0.45s var(--ease);
}
.lost-card__text {
  margin: 10px 0 20px;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--ink-soft);
  transition: color 0.45s var(--ease);
}
.lost-card:hover .lost-card__name { color: var(--off-white); }
.lost-card:hover .lost-card__text { color: rgba(var(--paper-rgb), 0.74); }

.lost-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.45s var(--ease);
}
.lost-card__go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.45s var(--ease);
}
.lost-card:hover .lost-card__go { color: var(--tan); }
.lost-card:hover .lost-card__go svg { transform: translateX(5px); }

@media (max-width: 992px) {
  .lost-grid { grid-template-columns: repeat(2, 1fr); }
}