/* ==========================================================================
   Yadhan — inner-page sections
   Loaded after main.css by every page except the homepage. Holds the
   patterns the inner pages share: page ledes, ruled fact/detail rows, the
   5fr/7fr split, panels, pricing tables, cards and the closing teal band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.section { padding-top: 80px; padding-bottom: 80px; }
.section--tight { padding-top: 0; }

/* a full-bleed band, tinted the same mint the homepage uses */
.band { padding-top: 80px; padding-bottom: 80px; }
.band--mint { background: var(--color-mint); }
@media (max-width: 900px) { .band { padding-top: 56px; padding-bottom: 56px; } }

/* an intro column beside a wider detail column */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
}
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.cols--center { align-items: center; }

/* --------------------------------------------------------------------------
   Page lede
   -------------------------------------------------------------------------- */
.lede { padding-top: clamp(40px, 6vw, 72px); padding-bottom: 40px; }
.lede__title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0 0 16px;
  margin-left: -0.04em;
  max-width: 20ch;
}
.lede__body { font-size: 15px; line-height: 1.65; max-width: 52ch; margin: 0; }
.lede .kicker { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Ruled rows — the "label … value" lists used for facts, add-ons, details
   -------------------------------------------------------------------------- */
.rows { display: grid; gap: 0; border-top: 2px solid var(--color-divider); }
.row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14.5px;
}
.rows .row:last-child { border-bottom-width: 2px; }
.row__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-accent);
  white-space: nowrap;
}
.row__value--ink { color: var(--color-text); }
.rows--roomy .row { padding: 16px 0; font-size: 15.5px; }

/* the fact rows under a page lede wipe in from the left */
.rows--facts { margin-top: 32px; }
.rows--facts > .row {
  align-items: baseline;
  animation: fact-in .6s cubic-bezier(.2,.75,.3,1) both;
}
.rows--facts > .row:nth-child(1) { animation-delay: .10s; }
.rows--facts > .row:nth-child(2) { animation-delay: .22s; }
.rows--facts > .row:nth-child(3) { animation-delay: .34s; }
.rows--facts > .row:nth-child(4) { animation-delay: .46s; }
@keyframes fact-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Bulleted lists with the small accent square
   -------------------------------------------------------------------------- */
.ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.ticks li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.6;
}
.ticks .tick { width: 8px; height: 8px; background: var(--color-accent); margin-top: 8px; }

/* checkmark list (About us trust panel) */
.checks { display: grid; gap: 0; }
.checks p {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-accent-200);
  font-size: 14.5px;
  line-height: 1.55;
}
.checks p:last-child { border-bottom: 0; }
.checks svg { flex: none; margin-top: 2px; color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 6px;
}
.tag-accent { background: var(--color-mint); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-solid { background: var(--color-accent); color: var(--color-bg); border: 0; }

/* --------------------------------------------------------------------------
   Two service types, divided by a rule
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0;
}
.svc { padding: 0 clamp(20px, 3vw, 40px) 32px 0; border-right: 2px solid var(--color-divider); }
.svc + .svc { padding: 0 0 32px clamp(20px, 3vw, 40px); border-right: 0; }
.svc__tag { display: inline-block; margin-bottom: 16px; }
.svc__title { font-size: 30px; margin: 0 0 14px; }
.svc__body {
  font-size: 15.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   Pricing panel and tables
   -------------------------------------------------------------------------- */
.price-panel {
  scroll-margin-top: 90px;
  max-width: var(--page-max);
  margin: 32px auto;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 48px);
  background: var(--color-mint);
  border: 1px solid var(--color-accent-200);
  border-radius: 16px;
  transition: box-shadow .3s ease;
}
.price-panel:hover { box-shadow: 0 12px 34px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.price-panel__title { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 8px; color: var(--color-accent-800); }
.price-panel__note {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 28px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
/* The two columns have headings of different heights — one carries a tag —
   and blurbs of different lengths, which left the tables starting on
   different lines. The grid already stretches both columns to the same
   height, so pushing each table to the bottom of its column lines them up;
   the tables hold the same three rows, so their tops meet as well. */
.price-grid > div { display: flex; flex-direction: column; }
.price-grid .price-table { margin-top: auto; }
.price-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.price-head h3 { font-size: 20px; margin: 0; color: var(--color-accent-800); }
.price-blurb {
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 14px;
}

.price-table {
  width: 100%;
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.price-table thead th {
  text-align: left;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 14px 16px;
  border: 0;
}
.price-table tbody td {
  padding: 15px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--color-accent-200);
  vertical-align: middle;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-mint) 55%, transparent); }
.price-table tbody td:first-child { font-weight: 600; color: var(--color-accent-800); }
.price-table tbody td:nth-child(2) {
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: 14px;
}
.price-table tbody td:nth-child(3) {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.price-table tbody tr {
  position: relative;
  transition: background .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.price-table tbody tr:hover {
  background: var(--color-mint);
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 var(--color-accent);
}
.price-table tbody tr:hover td:nth-child(3) { color: var(--color-accent-800); }

/* rows cascade in when the panel scrolls into view (JS adds .is-in) */
.price-table.is-armed tbody tr { opacity: 0; }
.price-table tbody tr.is-in { animation: row-in .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes row-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Coverage zones
   -------------------------------------------------------------------------- */
.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
  border-top: 2px solid var(--color-divider);
}
.zone { padding: 16px 20px; border-bottom: 1px solid var(--color-divider); }
.zone:nth-child(3n+1) { padding-left: 0; }
.zone__name { font-size: 15px; margin: 0; font-weight: 600; }
.zone__meta {
  font-size: 13px;
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* --------------------------------------------------------------------------
   Column cards — beliefs, vetting steps, numbered features
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.card-col { padding-top: 20px; border-top: 2px solid var(--color-divider); }
.card-col--accent { padding-top: 18px; border-top: 2px solid var(--color-accent); }
.card-col h3 { font-size: 17px; margin: 0 0 10px; line-height: 1.3; }
.card-col--accent h3 { margin: 8px 0 10px; }
.card-col p {
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.card-col__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}

/* --------------------------------------------------------------------------
   Common section headings and helpers
   -------------------------------------------------------------------------- */
.section__title { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 16px; }
.section__body {
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.actions--top { margin-top: 28px; }
.note-link { font-size: 14px; margin: 20px 0 0; }
.note-link a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  /* the two service types stack, and the rule between them turns horizontal */
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc { padding: 0 0 28px; border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .svc + .svc { padding: 28px 0 0; border-bottom: 0; }
  .zone, .zone:nth-child(3n+1) { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rows--facts > .row,
  .price-table tbody tr.is-in { animation: none; }
  .price-table.is-armed tbody tr { opacity: 1; }
  .price-table tbody tr,
  .price-panel { transition: none; }
  .price-table tbody tr:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   About us
   -------------------------------------------------------------------------- */
.kicker--wide { letter-spacing: 0.09em; }

.about-hero { padding-top: clamp(36px, 5vw, 64px); padding-bottom: 56px; }
.about-hero .kicker { margin-bottom: 18px; }
.about-hero__title {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.04;
  margin: 0 0 22px;
  margin-left: -0.04em;
  max-width: 18ch;
}
.about-hero__body { font-size: 15.5px; line-height: 1.7; max-width: 52ch; margin: 0 0 28px; }
/* The logo, not a photograph: it is set on the page ground with no frame and
   no crop, so the ring is never clipped and the strapline stays readable. */
.about-hero__figure { margin: 0; display: flex; justify-content: center; }
.about-hero__logo {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
}

.pull-quote {
  margin: 0;
  padding: 22px 24px;
  background: var(--color-mint);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.35;
  color: var(--color-accent-800);
  max-width: 34ch;
}

.note-band { background: var(--color-mint); margin: clamp(24px, 3vw, 40px) 0; }
.note-band .wrap {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  gap: clamp(28px, 4vw, 56px);
}
.note-band__body { font-size: 15px; line-height: 1.7; max-width: 48ch; margin: 0 0 14px; }
.note-band__body:last-of-type { margin-bottom: 0; }
.note-band .actions { margin-top: 26px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }

.detail-list { display: grid; gap: 2px; align-content: start; }
.detail { padding: 18px 0; border-top: 2px solid var(--color-accent-200); }
.detail--last { border-bottom: 2px solid var(--color-accent-200); }
.detail__label {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.detail__value { font-size: 16px; margin-top: 6px; }

.about-section { padding-top: clamp(48px, 6vw, 88px); }
.about-section__title { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 36px; max-width: 24ch; }
.about-section__title--wide { max-width: 26ch; }
.about-tail { height: clamp(56px, 7vw, 96px); }

/* what we are not | photo | why families trust us */
.band3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}
.band3__panel { background: var(--color-mint); padding: 28px 26px; }
.band3__title { font-size: 20px; line-height: 1.25; margin: 0 0 14px; max-width: 18ch; }
.band3__body {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.band3__body--last { margin-bottom: 0; }
.band3__figure { min-width: 0; overflow: hidden; display: flex; }
.band3__figure img { width: 100%; height: 100%; min-height: 320px; max-height: 520px; object-fit: cover; }

@media (max-width: 1000px) {
  .band3 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.how-title {
  font-size: min(46px, 3.9vw);
  line-height: 1.06;
  margin: 0 0 20px;
  margin-left: -0.058em;
}
.how-lede { font-size: 17px; line-height: 1.65; max-width: 58ch; margin: 0; }

.steps-section { padding-top: 76px; padding-bottom: 76px; }
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 3.4vw, 52px);
}
/* three to a row: the outer cells lose their outside padding */
.how-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px clamp(16px, 2vw, 28px) 28px;
}
.how-step:nth-child(3n+1) { padding-left: 0; }
.how-step:nth-child(3n) { padding-right: 0; }
.how-step__label { font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin: 0 0 12px; }
/* A fixed height, not a ratio: the outer cells in each row drop their outside
   padding, so the columns are not all the same width. Sized by ratio the
   boxes came out different heights and the titles under them stopped lining
   up across a row. */
.how-step__photo {
  width: 100%;
  max-width: 340px;
  height: 150px;
  flex: none;
  margin: 0 0 18px;
  overflow: hidden;
}
/* The step artwork is 3:2 and the slot is 2.27:1, so cover would crop the
   bottom third off — the four numbered sub-steps with it. contain fits it
   whole inside the slot instead. The img has no background of its own, so
   the spare width beside it is page ground, not a visible letterbox, and
   object-position lines its left edge up with the title underneath. */
.how-step__photo--art {
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
}

.how-step__title { font-size: 21px; margin: 0 0 10px; }
.how-step__body {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.pay-section {
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}
.pay-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 24px;
  background: var(--color-mint);
  border: none;
  border-radius: var(--radius-md);
}
.pay-card__kicker {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pay-card__title { font-size: 19px; margin: 0 0 8px; }
.pay-card__body {
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__heading { font-size: clamp(26px, 3vw, 38px); margin: 0 0 28px; }
.faq { padding: 26px 0; }
.faq > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq__arrow {
  flex: none;
  font-size: 13px;
  line-height: 1;
  color: var(--color-accent);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.faq[open] .faq__arrow { transform: rotate(180deg); }
.faq > p {
  font-size: 15px;
  line-height: 1.7;
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.faq[open] > p { animation: faq-open .3s cubic-bezier(.2,.75,.3,1) both; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .steps-section { padding-top: 56px; padding-bottom: 56px; }
  .how-step,
  .how-step:nth-child(3n+1),
  .how-step:nth-child(3n) { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__arrow { transition: none; }
  .faq[open] > p { animation: none; }
}

/* --------------------------------------------------------------------------
   Data table (design-system .table)
   -------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  padding: var(--space-2);
  border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* wide tables scroll inside their own box rather than widening the page */
.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 520px; }

/* a full-width button may wrap its label on the narrowest phones */
@media (max-width: 420px) {
  .btn-block { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Booking wizard
   -------------------------------------------------------------------------- */
.book {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--page-pad) 64px;
}
.book .kicker { margin-bottom: 14px; }
.book__title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  margin: 0 0 28px;
  margin-left: -0.058em;
}


.book__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.step-title { font-size: 24px; margin: 0 0 6px; }
.step-note {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 20px;
}
.step-sub { font-size: 19px; margin: 0 0 12px; }
.step-sub--sm { font-size: 17px; }
.step-fineprint {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 22px;
}
.step-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-step { min-height: 46px; }
.btn-primary.btn-step { padding-inline: 22px; }

/* radio cards */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.choice {
  display: block;
  padding: 18px;
  cursor: pointer;
  background: var(--color-surface);
  border: 2px solid var(--color-divider);
  transition: border-color .18s ease;
}
.choice--sm { padding: 16px; border-radius: var(--radius-md); }
.choice:hover { border-color: var(--color-accent-300); }
.choice:has(input:checked) { border-color: var(--color-accent); }
.choice__head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.choice--sm .choice__head { margin-bottom: 6px; }
.choice__name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.choice__name--sm { font-size: 16px; }
.choice__body {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.choice__body--sm { font-size: 13.5px; }


/* form rows */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 20px; }
.field-row--2-1 { grid-template-columns: 2fr 1fr; }
.field-row--gap-lg { margin-bottom: 24px; }
.field--gap { margin-bottom: 16px; }
.field--gap-lg { margin-bottom: 24px; }
.input--tall { min-height: 44px; }
.inline-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.inline-check input { margin-top: 3px; }

/* selectable chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--color-divider);
  transition: border-color .18s ease, background .18s ease;
}
.chip:hover { border-color: var(--color-accent-300); }
.chip:has(input:checked) { border-color: var(--color-accent); background: var(--color-mint); }


/* confirmation */
.done__tag { display: inline-block; margin-bottom: 16px; }
.done__title { font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; }
.done__body {
  font-size: 16px;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 24px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* sticky summary */
.summary {
  border: 2px solid var(--color-divider);
  padding: 24px;
  background: var(--color-surface);
  position: sticky;
  top: 120px;
}
.summary__title { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; }
.summary__rows { display: grid; gap: 12px; font-size: 14.5px; }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 10px;
}
.summary__row--total { border-bottom: 0; padding-bottom: 0; align-items: baseline; }
.summary__key { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.summary__val { text-align: right; }
.summary__total { font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.summary__note {
  font-size: 13px;
  line-height: 1.6;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.summary__note--ink { margin-top: 12px; color: var(--color-text); }

@media (max-width: 900px) {
  .book__layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}

@media (max-width: 620px) {
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .field-row, .field-row--3, .field-row--2-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .choice, .chip { transition: none; }
}

/* --------------------------------------------------------------------------
   Labelled cells and side panels
   These began on the removed My bookings page; Contact's three ways to reach
   the desk and its Quick answers panel, and the two panels on Work as a
   companion, are what still use them.
   -------------------------------------------------------------------------- */
.cell__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.cell__value { font-family: var(--font-heading); font-weight: 800; font-size: 19px; margin: 0 0 4px; }
.cell__meta {
  font-size: 13.5px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* side panels */
.panel { border: 2px solid var(--color-divider); padding: 20px; }
.panel--surface { background: var(--color-surface); }
.panel__title { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.panel__title--tight { margin-bottom: 12px; }
.panel__name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.panel__body {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.panel__body--last { margin-bottom: 16px; }
.panel__rows { display: grid; gap: 12px; margin-bottom: 16px; }
.panel__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 10px;
  font-size: 14.5px;
}
.panel__row--last { border-bottom: 0; padding-bottom: 0; }
.panel__meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.panel__limit { font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }


/* --------------------------------------------------------------------------
   Contact & careers
   -------------------------------------------------------------------------- */
.contact,
.careers {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--page-pad) 64px;
}
.contact .kicker,
.careers .kicker { margin-bottom: 20px; }
.contact__title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  margin: 0 0 36px;
  margin-left: -0.058em;
  max-width: 16ch;
}
.careers__title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  margin: 0 0 20px;
  margin-left: -0.058em;
  max-width: 18ch;
}
.careers__lede { font-size: 17px; line-height: 1.65; max-width: 58ch; margin: 0 0 40px; }
.contact__h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 8px; }
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.contact__aside { display: grid; gap: 20px; }
.field--gap-md { margin-bottom: 20px; }
.careers__sub { margin-top: 8px; }
.inline-check--sm { font-size: 14px; margin-bottom: 20px; }

/* With the application form gone the page's two panels are all that is left
   of its body, so they sit side by side across the full width rather than in
   the old 7fr/5fr column beside the form. */
.careers__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* the three ways to reach the desk */
.reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0;
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  margin-bottom: 44px;
}
.reach__cell { padding: 24px; border-right: 2px solid var(--color-divider); }
.reach__cell:first-child { padding-left: 0; }
.reach__cell:last-child { padding-right: 0; border-right: 0; }
.reach .cell__label { margin-bottom: 10px; }
.reach__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0 0 6px;
}
.reach__value--accent { color: var(--color-accent); }
.reach__value--sm { font-size: clamp(20px, 2vw, 26px); }
/* the address is one long unbreakable word — let it wrap rather than push
   the page sideways */
.reach__value--email { font-size: clamp(16px, 1.5vw, 20px); overflow-wrap: anywhere; }
.reach__value a { text-decoration: none; color: inherit; }
.reach__value a:hover { color: var(--color-accent); }
.reach__meta {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* the stat strip on careers */
.perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  margin-bottom: 44px;
}
.perk { padding: 22px; border-right: 2px solid var(--color-divider); }
.perk:first-child { padding-left: 0; }
.perk:last-child { padding-right: 0; border-right: 0; }
.perk__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  color: var(--color-accent);
  margin: 0 0 8px;
}
.perk__label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* the receipt shown after sending */
.receipt { border: 2px solid var(--color-accent); padding: 24px; }
.receipt--lg { padding: 28px; }
.receipt__tag { display: inline-block; margin-bottom: 14px; }
.receipt__title { font-size: 22px; margin: 0 0 10px; }
.receipt__title--lg { font-size: 26px; }
.receipt__body {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.receipt__body--tight { margin-bottom: 8px; }
.receipt__body--last { margin-bottom: 0; }

.panel--lg { padding: 22px; }
.panel--accent { border-color: var(--color-accent); background: var(--color-mint); }
.panel__title--accent { color: var(--color-accent-800); margin-bottom: 10px; }
.panel__address { font-size: 15px; line-height: 1.7; margin: 0 0 10px; }
.panel__hours {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.panel__partner { font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; color: var(--color-accent-900); }
.panel__phone { font-size: 14.5px; line-height: 1.7; margin: 0; }

.quick-links { display: grid; gap: 12px; }
.quick-links a { font-size: 15px; text-decoration: none; }

.ticks--tight { margin-bottom: 0; gap: 12px; }
.ticks--tight li { font-size: 14.5px; }
.tick--sm { margin-top: 7px; }

.hiring { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hiring li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14.5px;
}
.hiring li:last-child { border-bottom: 0; }
.hiring__num { font-family: var(--font-heading); font-weight: 800; }

@media (max-width: 900px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr); }
  .reach__cell, .perk { padding-left: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .reach__cell:last-child, .perk:last-child { border-bottom: 0; }
}

/* the intro line above these forms sits a touch further from the fields */
.contact .step-note,
.careers .step-note { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   Following the visit (How it works)
   -------------------------------------------------------------------------- */
.follow__body { margin-top: 14px; }
.follow .rows { margin-top: 4px; }
.follow__note {
  font-size: 13px;
  line-height: 1.65;
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* --------------------------------------------------------------------------
   Photographs are never cropped once their column has stacked
   -------------------------------------------------------------------------- */
/* Each photo box carries a framing ratio for the multi-column desktop
   layout. Once that column stacks the box goes full width, where the ratio
   would crop the picture hard — so below each grid's stacking width the box
   takes the photograph's own proportions and the whole image shows. */
@media (max-width: 1000px) {
  /* the portrait photograph would otherwise fill the stacked column and
     tower over the panels either side of it */
  .band3__figure { justify-content: flex-start; }
  .band3__figure img { height: auto; min-height: 0; max-height: none; max-width: 420px; }
}
@media (max-width: 700px) {
  /* stacked under the heading, the lockup only needs to read as a signature */
  .about-hero__logo { max-width: 300px; }
}

/* --------------------------------------------------------------------------
   Booking request form
   -------------------------------------------------------------------------- */
.book__lede {
  font-size: 16px;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 32px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.booking { display: block; }
.field__opt { color: color-mix(in srgb, var(--color-text) 68%, transparent); }

.pick { border: 0; padding: 0; margin: 0 0 20px; }
.pick__legend {
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
}
.pick .choice-grid { margin-bottom: 0; }

.booking__error {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--color-mint);
  border-left: 3px solid var(--color-accent);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-accent-800);
}

.summary--book { top: 100px; }
.send { display: grid; gap: 10px; margin-top: 22px; }
.btn-send { min-height: 48px; font-size: 15px; }
.send__or {
  font-size: 13.5px;
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.send__done {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--color-mint);
  border-left: 3px solid var(--color-accent);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-accent-800);
}

.preview-message { margin-top: 36px; max-width: 62ch; }
.preview-message > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--color-accent);
}
.preview-message__body {
  margin: 12px 0 0;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Work as a companion — the band closing the Contact page
   -------------------------------------------------------------------------- */
.join .wrap { gap: clamp(28px, 4vw, 64px); }
.join__points { margin: 0; }
.join__points li { font-size: 15px; }

/* a note under a field — used by the hospital list */
.field__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);