/* ==========================================================================
   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 8px; }
/* The questions were centred, so each one began at a different point -- 158px
   of spread between the shortest and the longest -- while the heading above
   them and the answers below them were left-aligned. They read as a list now:
   question left, arrow right, a rule between each, and the whole thing held to
   a readable measure instead of floating in the middle of a 1200px page. */
.faq-list { max-width: 760px; border-top: 1px solid var(--color-divider); }
.faq { padding: 20px 0; border-bottom: 1px solid var(--color-divider); }
.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  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;
  max-width: 68ch;
  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; }

/* The date and time fields open a calendar or a clock on a click anywhere in
   them, so they are pointed at like a control rather than a text box, and the
   icon that stands for the picker is drawn large enough to be seen. */
input[type="date"].input,
input[type="time"].input { cursor: pointer; }
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-left: 6px;
  cursor: pointer;
  opacity: .62;
  border-radius: 4px;
}
input[type="date"].input::-webkit-calendar-picker-indicator:hover,
input[type="time"].input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--color-accent-100);
}
.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);
}


/* --------------------------------------------------------------------------
   Service locations — the named areas, under Coverage zones
   Coverage zones says how deep the staffing is per zone; this says which
   areas are actually named, grouped by side of the city so a visitor can
   find their own without reading all seventeen.
   -------------------------------------------------------------------------- */
.areas { display: grid; gap: 24px; align-content: start; }
.area { padding-top: 16px; border-top: 2px solid var(--color-divider); }
.area__zone {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 12px;
}
.area__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area__list li {
  font-size: 14.5px;
  padding: 6px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Terms acceptance before a booking is sent
   A native <dialog>, so focus trapping, Escape, the inert background and the
   backdrop all come from the browser rather than from script.
   -------------------------------------------------------------------------- */
.send__terms {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.tcmodal {
  width: min(560px, calc(100vw - 32px));
  /* the dialog is taller than a laptop viewport once the three points are in
     it, so it scrolls inside itself rather than off the screen */
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 0;
  border: 2px solid var(--color-divider);
  border-radius: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.tcmodal::backdrop { background: rgba(10, 20, 20, .55); }
.tcmodal__inner { padding: clamp(22px, 4vw, 34px); display: grid; gap: 18px; }
.tcmodal__title { font-size: clamp(21px, 2.4vw, 26px); margin: 0; }
.tcmodal__body { margin: 0; font-size: 15px; line-height: 1.65; }
.tcmodal__points { margin: 0; }
.tcmodal__points li { font-size: 14.5px; line-height: 1.6; }

.tcmodal__check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: var(--color-mint);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.55;
  cursor: pointer;
}
.tcmodal__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); }
.tcmodal__error { margin: 0; font-size: 13.5px; color: #9e2b20; }

.tcmodal__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tcmodal__actions .btn { padding: 13px 22px; font-size: 15px; white-space: normal; }

/* on a phone the two buttons get their own rows rather than squeezing */
@media (max-width: 480px) {
  .tcmodal__actions { flex-direction: column; align-items: stretch; }
}


/* The homepage links here as /services#locations. Without a scroll margin the
   section lands underneath the sticky header, which is 65px tall. */
#locations { scroll-margin-top: 80px; }


/* a sub-heading inside a policy section (Terms, Privacy) */
.section__sub {
  font-size: 17px;
  margin: 26px 0 10px;
}

/* The policy pages are linked to by anchor from the footer and from Contact,
   so every section they can land on needs to clear the sticky header. */
#cancellations { scroll-margin-top: 80px; }

/* --------------------------------------------------------------------------
   A field that is wrong or missing
   Red is carried by the border, the message and an icon-free bold label, not
   by colour alone -- the message says what is wrong in words, so this does
   not depend on being able to tell red from grey.
   -------------------------------------------------------------------------- */
.input.is-invalid {
  border-color: #c0392b;
  border-width: 2px;
  background: #fdf6f5;
}
.input.is-invalid:focus-visible {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}
.field__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  /* 6.4:1 on the page ground; #c0392b alone is 4.0:1 and fails at this size */
  color: #9e2b20;
}
/* the summary above the button turns red once something is wrong, instead of
   staying the calm mint of an ordinary note */
.booking__error {
  background: #fdf6f5;
  border-left-color: #c0392b;
  color: #9e2b20;
}