/* ==========================================================================
   Contact pages: page layout only, shared by the two pages of the Contact section.
   contact.html: hero (ink, sign photo + live clock HUD, contact channels) →
     quick message (CREAM, the original contact form) → visit (ink-2, map).
   engineer-booking.html: hero (ink, title + the page's line) → the booking
     enquiry (ink: multi-step form + sticky "session sheet").
   The hero base (.ct-hero, glow, CTAs) serves both. No section, channel, tile or
   step-heading numbers and no map coordinates (the client's request, 22 Oct 2026);
   the booking form's step indicator (.progress) keeps its numbers.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------ */
.ct-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vh, 4.5rem)) 0 clamp(3rem, 6vw, 5rem);
  background: var(--ink);
}
.ct-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 55% at 78% 30%, rgba(255, 106, 43, .14), rgba(255, 106, 43, 0) 70%),
    radial-gradient(45% 50% at 5% 100%, rgba(124, 204, 191, .1), rgba(124, 204, 191, 0) 70%);
}
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }   /* the title at the same height as on the booking page */
.ct-hero__copy { display: grid; gap: clamp(1.4rem, 3vh, 2rem); justify-items: start; }
.ct-hero__title { max-width: 8.6em; }   /* size: .t-hero (shared inner-page H1 scale), as on the booking page */
.ct-hero__title em { color: var(--cream); font-weight: 300; }
.ct-hero__lead { margin-top: 1rem; max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .84); }
.ct-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.ct-hero__photo {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-sm);
  aspect-ratio: 4 / 5; background: var(--ink-3); box-shadow: var(--shadow-2);
}
.ct-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 36% 50%; filter: saturate(.9) brightness(.86); }
.ct-hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 13, 12, 0) 50%, rgba(15, 13, 12, .82)), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 6, 5, .45));
}
.ct-hud { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .9rem; display: grid; gap: .3rem; color: var(--cream); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.ct-hud__row { display: flex; justify-content: space-between; gap: 1rem; }
.ct-hud__clock { font-variant-numeric: tabular-nums; }

.ct-channels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-strong);
}
.ct-channel { display: grid; gap: .55rem; align-content: start; padding: 1.4rem clamp(1rem, 2vw, 2rem) 0; border-left: 1px solid var(--line); }
.ct-channel:first-child { padding-left: 0; border-left: 0; }
.ct-channel__label { color: var(--muted); }
.ct-channel__big {
  justify-self: start;
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: clamp(1.45rem, 2.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 370;
  background: linear-gradient(var(--mint), var(--mint)) 0 100% / 0% 1px no-repeat;
  transition: background-size .6s var(--ease-out), color .3s;
  overflow-wrap: anywhere;
}
.ct-channel__big:hover, .ct-channel__big:focus-visible { color: var(--mint-hi); background-size: 100% 1px; }
.ct-channel__note { color: var(--muted); font-size: var(--fs-small); }

@media (max-width: 1100px) {
  .ct-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 900px) {
  .ct-channels { grid-template-columns: 1fr; }
  .ct-channel { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .ct-hero { padding-top: calc(var(--header-h) + 2rem); }
  .ct-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .ct-hero__ctas { width: 100%; gap: .6rem; }   /* one row from about 345px; stacked below */
  .ct-hero__ctas .btn { flex: 1 1 auto; min-height: 52px; padding-inline: .9rem; font-size: .9rem; }
  .ct-hero__ctas .btn__icon { display: none; }
  /* the sign becomes a wide, full-bleed band */
  .ct-hero__photo { aspect-ratio: 16 / 11; margin-inline: calc(var(--gutter) * -1); border-radius: 0; box-shadow: none; }
  .ct-hero__photo img { object-position: 40% 45%; }
  .ct-hud { left: var(--gutter); right: var(--gutter); }
  .ct-channels { margin-top: 1.5rem; border-top: 0; }
  .ct-channel { grid-template-columns: 1fr; }
  .ct-channel__big { font-size: clamp(1.5rem, 7.2vw, 1.9rem); }
}

/* ---- Booking hero (engineer-booking.html): title left, the page's line and the two ways in right ---- */
.ct-hero--book { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.ct-bhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); gap: 1.5rem clamp(2rem, 5vw, 6rem); align-items: end; }
.ct-bhead__title { max-width: 6em; }   /* size: .t-hero (shared inner-page H1 scale) */
.ct-bhead__aside { display: grid; gap: 1.25rem; justify-items: start; }
.ct-bhead__aside .lead { max-width: 40ch; color: rgba(243, 235, 224, .9); }
.ct-bhead__note { max-width: 50ch; color: var(--muted); }
.ct-bhead__aside .ct-hero__ctas { margin-top: .5rem; }
@media (max-width: 1000px) {
  .ct-bhead { grid-template-columns: 1fr; }
}

/* ---- Booking enquiry (engineer-booking.html) -------------------------------------- */
.ct-book { padding-top: clamp(2.5rem, 4.5vw, 4rem); background: var(--ink); border-top: 1px solid var(--line); }
.ct-book__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.ct-book__main { min-width: 0; }

.bk {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 2.75rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(124, 204, 191, .07), transparent 60%),
    var(--ink-2);
}
.bk__top { display: grid; gap: 1.1rem; }
.bk__progress .progress__num { background: var(--ink-2); }
.bk__progress .progress__step { align-content: start; }   /* the labels stay level when one step has a note */
/* the Engineer step when the chosen services do not need one: a dashed dot, "Not needed" under its label.
   The note's line is always there (shown only while the step is skipped), so ticking a service never
   moves the form; on phones, where the labels give way to the dots, only screen readers get the note. */
.bk__progress .progress__step.is-skipped { color: rgba(243, 235, 224, .42); }
.bk__progress .progress__step.is-skipped .progress__num { border-style: dashed; }
.bk__progress .progress__note { margin-top: -.4rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bk__progress .progress__step:not(.is-skipped) .progress__note { visibility: hidden; }
@media (max-width: 600px) {
  .bk__progress .progress__note {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
.bk__prefill { display: grid; gap: .35rem; padding: .9rem 1.1rem; border: 1px solid rgba(255, 106, 43, .35); border-radius: var(--r-sm); background: rgba(255, 106, 43, .06); }
.bk__prefill-kicker { color: var(--hot-soft); }
.bk__prefill-text { font-size: var(--fs-small); color: var(--cream); }
.bk__prefill-text b { font-weight: 600; }
.bk__count { color: var(--muted); }
.bk__count b { color: var(--cream); font-weight: 500; }
.bk__step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.bk__legend { display: flex; padding: 0; margin-bottom: 1.25rem; }
.bk__legend:focus { outline: none; }
.bk__legend:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
.bk__legend-title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-d3); line-height: 1.04; letter-spacing: -.025em; font-weight: 370; }
/* On its label's line, centred on the label (Kais, 25 Oct 2026: raised, it read as off-centre). A label is the same
   mono face, so the shared baseline centres them. Beside another face it rises by the difference of the two sizes:
   the text boxes of Fraunces, Inter Tight and JetBrains Mono are all centred .36em above the baseline. line-height: 1
   keeps the tag inside the label's line (a taller line would set an "(Optional)" field lower than the one beside it). */
.bk__opt { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--muted); margin-left: .4em; }
.bk__legend-title .bk__opt { vertical-align: calc((var(--fs-d3) - 1em) * .36); }
/* beside a tick box's text: centred on it, and level with its left edge when it wraps on a phone */
.bk-qty__crowd > span:last-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4em; }
.bk-qty__crowd .bk__opt { margin-left: 0; }
.bk__intro { color: var(--muted); max-width: 56ch; margin-top: -.5rem; }
.bk__error { margin-top: -.25rem; }
.bk__step.is-invalid .bk__error { display: block; }
.bk__step.is-invalid .bk-svc .choice__body { border-color: var(--error, #FF9A6B); }   /* no service chosen: the tiles say so too */
.bk__hint { padding: .9rem 1.1rem; border-left: 2px solid var(--mint); background: rgba(124, 204, 191, .06); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small); color: var(--cream); }

/* service tiles: checkboxes (several services can be chosen). Three columns with Music & Audio across two,
   so the eight tiles fill three rows; on phones two columns, Music & Audio and General question across both.
   The titles never get wider than a one-column tile: the longest word, "Accommodation", is about 7.6
   times the font size, so the size is capped at a column's text width / 7.8 (cqi: the tile grid).
   The tick box opens the tile, above the title (where the tile's number was until 22 Oct 2026): beside
   the title it would take that width from the longest word and shrink every title on phones and laptops. */
.bk__services { grid-template-columns: repeat(3, minmax(0, 1fr)); container-type: inline-size; }
.bk-svc .choice__body { gap: .45rem; align-content: start; padding: 1rem 1.1rem 1.1rem; }
.bk-svc .choice__title {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 400; line-height: 1.05; letter-spacing: -.015em;
  font-size: min(1.4rem, calc(((100cqi - 1.5rem) / 3 - 2.2rem - 2px) / 7.8));
}
.bk-svc__desc { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.bk-svc .choice__body::after, .bk-need .choice__body::after {   /* the tile's checkbox: the first row of the tile */
  content: ""; order: -1; width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--line-strong); background: center / 12px 12px no-repeat;
  transition: background-color .3s, box-shadow .3s, border-color .3s;
}
.bk-svc:hover .choice__body::after, .bk-need:hover .choice__body::after { border-color: var(--muted); }
.bk-svc input:checked + .choice__body::after, .bk-need input:checked + .choice__body::after {
  background-color: var(--mint); border-color: var(--mint); box-shadow: 0 0 12px rgba(124, 204, 191, .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230F0D0C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E");
}
.bk-svc--general .choice__body { border-style: dashed; }
/* the tile's input fills it, so keyboard focus scrolls the whole tile into view, not a 1px box in its corner */
.bk .choice input { inset: 0; width: 100%; height: 100%; cursor: pointer; }
/* Music & Audio: a wide tile with a link to what the service includes (a sibling of the label, so it is not
   part of the checkbox's name and does not tick it; it opens in a new tab so the form is kept) */
.bk-svc-cell { display: grid; }
.bk-svc-cell > .bk-svc { grid-area: 1 / 1; }
.bk-svc-cell--wide { grid-column: span 2; }
.bk-svc-cell .choice__body { padding-bottom: 3.6rem; }
.bk-svc__more {
  grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 1;
  min-height: 44px; margin: 0 0 .55rem 1.1rem; font-size: var(--fs-mono); color: var(--mint);
}
.bk-svc__more:hover, .bk-svc__more:focus-visible { color: var(--mint-hi); }

/* engineers */
.bk__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.bk__engineers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.bk-eng .choice__body { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: .9rem; padding: .7rem .9rem .7rem .7rem; }
.bk-eng__photo { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--mint); }
.bk-eng__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; transition: filter .6s var(--ease-out); }
.bk-eng:hover .bk-eng__photo img, .bk-eng input:checked + .choice__body .bk-eng__photo img { filter: none; mix-blend-mode: normal; }
.bk-eng__text { display: grid; gap: .2rem; min-width: 0; }
.bk-eng .choice__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.15rem; font-weight: 420; line-height: 1.1; }
.bk-eng .choice__meta { color: var(--muted); overflow-wrap: anywhere; }
.bk-eng__credit { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.bk-eng input:checked + .choice__body .choice__meta { color: var(--mint-hi); }
.bk-eng--none { grid-column: 1 / -1; }
.bk-eng__none-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px dashed var(--line-strong); font-family: var(--font-display); font-size: 1.85rem; color: var(--muted); }   /* the size of the photos, in their column: "No preference" starts where the names do */
.bk-eng.is-filtered { display: none; }
.bk__more { margin-top: -.25rem; }

/* details */
.bk-length, .bk-needs { margin: 0; padding: 0; border: 0; min-width: 0; }
.bk-length > legend { padding: 0; margin-bottom: .6rem; }
.bk-needs > legend { padding: 0; margin-bottom: .3rem; }
/* what the visitor needs from Music & Audio: tick boxes (several can be chosen; the tick as on the service tiles),
   the size of the session length tiles */
.bk-needs__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .1rem; }
.bk-need .choice__body { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: .6rem; padding: .8rem .9rem; border-radius: var(--r-sm); }
.bk-need .choice__title { font-size: .95rem; }
.bk-length__opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.bk-len .choice__body { padding: .8rem .9rem; border-radius: var(--r-sm); gap: .2rem; }
.bk-len .choice__title { font-size: .95rem; }
.bk-qty { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.bk-qty__note { color: var(--muted); }
.bk input[type="date"] { color-scheme: dark; }

/* review */
.bk-review { display: grid; margin: 0; border-top: 1px solid var(--line-strong); }
.bk-review > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px dashed var(--line-strong); }
.bk-review dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.bk-review dd { margin: 0; color: var(--cream); overflow-wrap: anywhere; white-space: pre-line; }
.bk-review__edit { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mint); min-height: 44px; padding: 0 .25rem; }
.bk-review__edit:hover { color: var(--cream); }
.bk-review--done > div { grid-template-columns: 9.5rem minmax(0, 1fr); }

.bk__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.bk__nav [data-bk-next], .bk__nav [data-bk-submit] { margin-left: auto; }
/* Chromium does not anchor scrolling on a fieldset's contents, so with the bar on screen it picked the bar as
   the scroll anchor, and a hint opening above it (Rehearsal Spaces, General question) scrolled the page 70-100px
   under the visitor's pointer. */
.bk__nav { overflow-anchor: none; }
.bk__skip { color: var(--muted); }
.bk__skip:hover { color: var(--mint); }

.bk-done { gap: 1.25rem; background: var(--ink-2); border-color: var(--line); }
.bk-done__kicker { display: flex; justify-content: space-between; gap: 1rem; width: 100%; color: var(--muted); }
.bk-done__kicker .rec { color: var(--mint); }
.bk-done__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-d2); line-height: .98; letter-spacing: -.03em; font-weight: 360; }
.bk-done__title em { font-style: italic; font-weight: 300; }
.bk-done__copy { max-width: 58ch; color: var(--muted); overflow-wrap: anywhere; }
.bk-done__copy strong { color: var(--cream); font-weight: 600; }
.bk-done .bk-review { width: 100%; }

/* the session sheet (sticky live summary) */
.ct-sheet { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.ct-sheet__inner {
  display: grid; gap: 1.1rem; padding: clamp(1.2rem, 2vw, 1.6rem);
  border-radius: var(--r-md); background: var(--cream); color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(15, 13, 12, .07) 31px 32px);
  transform: rotate(.6deg);
}
.ct-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); color: var(--ink); }
.ct-sheet__head .rec { color: #6B6157; }
.ct-sheet__rows { display: grid; margin: 0; }
.ct-sheet__rows > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .75rem; padding: .62rem 0; border-bottom: 1px dashed rgba(15, 13, 12, .25); }
.ct-sheet__rows dt { color: #6B6157; padding-top: .15em; }
.ct-sheet__rows dd { margin: 0; font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; transition: color .4s; }
.ct-sheet__rows dd.is-empty { color: rgba(15, 13, 12, .38); }
.ct-sheet__rows dd.is-flash { color: var(--mint-deep); }
.ct-sheet__note { font-size: var(--fs-xs); color: #6B6157; }
.ct-sheet__call { display: grid; gap: .2rem; padding-top: .9rem; border-top: 2px solid var(--ink); }
.ct-sheet__call .mono { color: #6B6157; }
.ct-sheet__phone { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); }
.ct-sheet__phone:hover { color: var(--mint-deep); }
.ct-sheet :focus-visible { outline-color: var(--ink); }

@media (max-width: 1100px) {
  .ct-book__grid { grid-template-columns: minmax(0, 1fr); }
  .ct-sheet { position: static; order: -1; }
  .ct-sheet__inner { transform: none; }
  /* compact sheet above the form on tablets: a 2-column strip */
  .ct-sheet__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .ct-sheet__note, .ct-sheet__call { display: none; }
  .bk-length__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* with JS the aside gives way to the collapsible bar inside the form (.bk-mini) */
  .ct-book__grid.has-mini .ct-sheet { display: none; }
}

/* ---- session sheet bar (below 1101px; built by contact.js) ------------------------
   A cream strip echoing the track sheet: one line (service · engineer · length), expands to
   every row. There from the first step ("—" until a service is ticked, so ticking one does not
   push the tiles down). Sticky under the header while the form scrolls; it follows the header
   up when the header hides. */
.bk-mini { display: none; }
@media (max-width: 1100px) {
  .bk-mini {
    display: grid; position: sticky; z-index: 6; top: calc(var(--header-h) + .5rem);
    border-radius: var(--r-sm); background: var(--cream); color: var(--ink);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
    transition: top .55s var(--ease-out);
  }
  html:has(.site-header.is-hidden) .bk-mini { top: .5rem; }
  .bk-mini__bar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .4rem .9rem;
    width: 100%; min-height: 48px; padding: .55rem .9rem; text-align: left; color: inherit; border-radius: inherit;
  }
  .bk-mini__bar:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
  .bk-mini__kicker { color: #6B6157; }
  .bk-mini__line { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.02rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bk-mini.is-empty .bk-mini__line { color: rgba(15, 13, 12, .38); }   /* nothing ticked yet: "—" */
  .bk-mini__icon { position: relative; width: 14px; height: 14px; }
  .bk-mini__icon::before, .bk-mini__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out); }
  .bk-mini__icon::after { transform: rotate(90deg); }
  .bk-mini.is-open .bk-mini__icon::after { transform: rotate(0deg); }
  .bk-mini__panel { display: grid; gap: .6rem; max-height: min(52vh, 26rem); overflow: auto; overscroll-behavior: contain; padding: 0 .9rem .9rem; border-top: 2px solid var(--ink); }
  .bk-mini__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; margin: 0; }
  .bk-mini__rows > div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed rgba(15, 13, 12, .25); }
  .bk-mini__rows dt { color: #6B6157; padding-top: .15em; }
  .bk-mini__rows dd { margin: 0; font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
  .bk-mini__rows dd.is-empty { color: rgba(15, 13, 12, .45); }
  .bk-mini__note { font-size: var(--fs-xs); color: #6B6157; }
}
@media (max-width: 560px) {
  .bk-mini__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-mini__kicker { display: none; }
  .bk-mini.is-empty .bk-mini__kicker { display: block; }   /* nothing ticked yet: the bar says what it is */
  .bk-mini.is-empty .bk-mini__line { display: none; }
  .bk-mini__rows { grid-template-columns: 1fr; }
}
.bk-qty__crowd { flex-basis: 100%; }
@media (max-width: 760px) {
  html:has([data-bk]) { scroll-padding-bottom: 8.5rem; }   /* keyboard focus lands clear of the sticky Back / Continue bar, at its tallest (with Skip) */
  .bk { padding: 1.1rem 1rem 1.25rem; margin-inline: calc(var(--gutter) * -.5); }
  .bk__services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .bk-svc--general { grid-column: 1 / -1; }
  .bk-svc .choice__body { padding: .85rem .8rem .9rem; }
  .bk-svc-cell .choice__body { padding-bottom: 3.4rem; }
  .bk-svc__more { margin-left: .8rem; margin-bottom: .45rem; }
  .bk-svc .choice__title { font-size: min(1.15rem, calc(((100cqi - .5rem) / 2 - 1.6rem - 2px) / 7.8)); }
  .bk__engineers { grid-template-columns: minmax(0, 1fr); }
  .bk-length__opts, .bk-needs__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-need .choice__body { gap: .5rem; padding: .7rem; }   /* "Production" fits a tile at 320 */
  .bk-review > div { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-review dt { grid-column: 1; }
  .bk-review dd { grid-column: 1 / -1; grid-row: 2; }
  .bk-review__edit { grid-column: 2; grid-row: 1; }
  .bk-review--done > div { grid-template-columns: 1fr; }
  .bk__nav { position: sticky; bottom: 0; z-index: 7; margin: 0 -1rem -1.25rem; padding: .9rem 1rem; background: rgba(23, 20, 19, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 0 0 var(--r-md) var(--r-md); }
  .bk__nav .btn { min-height: 50px; }
  .bk__skip { order: 3; width: 100%; justify-content: center; }
  .ct-sheet__rows { grid-template-columns: 1fr; }
  .ct-sheet__rows > div:nth-child(n + 4) { display: none; }   /* service, engineer, length on phones */
  .ct-sheet__inner { gap: .6rem; padding: 1rem 1.1rem; }
  .ct-sheet__rows dd { font-size: 1.02rem; }
}

/* ---- Quick message (cream, contact.html) ---------------------------------------------- */
.ct-msg__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.ct-msg__intro { display: grid; gap: 1.4rem; align-content: start; }
.ct-msg__intro .t-d2 { max-width: 9ch; }
.ct-msg__direct { display: grid; margin: .5rem 0 0; border-top: 1px solid var(--rule-strong); }
.ct-msg__direct > div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.ct-msg__direct dt { color: var(--fg-muted); }
.ct-msg__direct dd { margin: 0; text-transform: none; letter-spacing: .02em; }
.ct-msg__direct a { display: inline-flex; align-items: center; min-height: 32px; }
.ct-msg__form .req { color: #A3360A; }
.ct-msg__submit { display: grid; gap: 1rem; justify-items: start; padding-top: .5rem; }
.ct-msg__done { gap: 1.1rem; }
.ct-msg__done-copy, .ct-msg__done-title, .bk-done__title { overflow-wrap: anywhere; }
.ct-msg__done-kicker { display: flex; justify-content: space-between; width: 100%; color: var(--fg-muted); }
.ct-msg__done-title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-d3); line-height: 1.02; letter-spacing: -.025em; font-weight: 380; }
.ct-msg__done-title em { font-style: italic; font-weight: 320; }
@media (max-width: 900px) {
  .ct-msg__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ct-msg__submit .btn { width: 100%; }
}

/* ---- Visit (contact.html) -------------------------------------------------------------- */
.ct-visit { background: var(--ink-2); overflow: hidden; }
.ct-visit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ct-visit__copy { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); justify-items: start; }
.ct-visit__list { display: grid; width: 100%; margin: 0; border-top: 1px solid var(--rule); }
.ct-visit__list > div { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
.ct-visit__list dt { color: var(--muted); padding-top: .2em; }
.ct-visit__list dd { margin: 0; font-size: 1.08rem; }
.ct-visit__clock { font-family: var(--font-mono); font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--cream); }
.ct-visit__social { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
@media (pointer: coarse) { .ct-visit__list dd a { display: inline-flex; align-items: center; min-height: 44px; } }
.ct-visit__media { position: relative; padding-top: clamp(3.5rem, 7vw, 6rem); }
.ct-visit__map { --ratio: 16 / 11; box-shadow: var(--shadow-2), 0 0 0 1px var(--rule); }
.ct-visit__map.is-playing { --ratio: 16 / 11; }
.ct-visit__map .map-facade__label { justify-content: flex-end; }   /* "Load map" alone (no coordinates), where it was */
.ct-map__sea {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl;
  color: rgba(124, 204, 191, .75); letter-spacing: .32em; font-size: .62rem; pointer-events: none;
}
.ct-map__tag { position: absolute; left: calc(58% + 18px); top: calc(46% - .55em); color: var(--cream); font-size: .64rem; pointer-events: none; }
.ct-map__place { display: none; }   /* phones: the place name moves into the label, as on the About page's map */
.ct-visit__photo { position: absolute; left: clamp(-3rem, -3vw, -1rem); top: 0; z-index: 2; width: min(40%, 320px); box-shadow: var(--shadow-2), 0 0 0 1px var(--rule); }
@media (max-width: 1000px) {
  .ct-visit__grid { grid-template-columns: 1fr; }
  .ct-visit__photo { left: auto; right: -.5rem; }
}
@media (max-width: 560px) {
  .ct-visit__list > div { grid-template-columns: 1fr; gap: .25rem; }
  .ct-visit__map { --ratio: 4 / 5; }
  .ct-visit__map.is-playing { --ratio: 4 / 5; }
  .ct-visit__media { padding-top: 4.5rem; }
  .ct-visit__photo { width: 58%; left: auto; right: -.25rem; }
  .ct-map__tag { display: none; }
  .ct-map__place { display: inline; }
}