/* ==========================================================================
   MD Focus Studio — booking.css
   Booking page only (booking.html). Loads after style.css and reuses its
   tokens and primitives (.wrap .label .line .btn .btn-text .shot .cap .roll
   .sr-only …). Every class defined here is prefixed bk-.
   ========================================================================== */

.bk {
  --bk-line: rgba(236, 231, 221, .42);       /* field underline: 3.3:1 on --black */
  --bk-line-hover: rgba(236, 231, 221, .72);
  --bk-error: #e39b85;                        /* error text: 8.7:1 on --black */
  --bk-error-soft: rgba(227, 155, 133, .45);
  --bk-nav: 58px;                             /* scrolled nav height (style.css) */
}
.bk [hidden] { display: none !important; }

/* ---------- Shared section type ---------- */
.bk-title {
  font: 400 clamp(44px, 6vw, 116px)/.88 var(--serif);
  letter-spacing: -.028em;
  text-transform: uppercase;
}
.bk-title--md { font-size: clamp(42px, 4.6vw, 84px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.bk-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(36px, 7vh, 100px)) 0 clamp(72px, 11vh, 140px);
}
.bk-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--gutter);
  row-gap: clamp(26px, 3.4vw, 52px);
  align-items: start;
}
.bk-hero__label { grid-column: 1 / 8; grid-row: 1; flex-wrap: wrap; row-gap: 4px; }
.bk-hero__label-sep { color: var(--metal); }
.bk-hero__title {
  grid-column: 1 / 9; grid-row: 2;
  font: 400 clamp(64px, 10.2vw, 196px)/.86 var(--serif);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.bk-hero__title .line { padding-bottom: .06em; }
.bk-hero__title .line__in { overflow-wrap: anywhere; }  /* user text-spacing overrides wrap rather than clip */
.bk-hero__fig { grid-column: 9 / 13; grid-row: 1 / 4; }
.bk-hero__shot { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.bk-hero__body {
  grid-column: 2 / 8; grid-row: 3;
  display: grid; gap: 30px; justify-items: start;
  padding-top: clamp(4px, 1vw, 18px);
}
.bk-hero__lede {
  max-width: 30ch;
  font: 400 clamp(20px, 1.65vw, 28px)/1.36 var(--serif);
}
.bk-hero__picked {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  width: 100%; max-width: 30rem; padding: 14px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.bk-hero__picked-k { font: 500 10.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--metal); }
.bk-hero__picked-v { font: italic 400 21px/1.2 var(--serif); }
.bk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.bk .btn__label { white-space: nowrap; }

.bk-hero__facts {
  grid-column: 1 / -1; grid-row: 4;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--hair);
}
.bk-fact {
  display: grid; align-content: start; gap: 10px;
  padding: 22px clamp(14px, 2vw, 32px) 0;
  border-left: 1px solid var(--hair);
}
.bk-fact:first-child { border-left: 0; padding-left: 0; }
.bk-fact dt { font: 500 10.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
.bk-fact dd {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font: 400 clamp(17px, 1.3vw, 21px)/1.35 var(--serif);
}

/* Entrance — pure CSS, so the first paint never flashes before main.js runs.
   Fill mode "backwards" only: the end state is the element's own style, so the
   hover/parallax/magnetic effects take over cleanly afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .bk-hero__title .line__in { animation: bk-rise 1.5s var(--ease) .1s backwards; }
  .bk-hero__title .line:nth-child(2) .line__in { animation-delay: .22s; }
  .bk-hero__label { animation: bk-fade 1s var(--ease) .05s backwards; }
  .bk-hero__body > * { animation: bk-fade 1.2s var(--ease) .55s backwards; }
  .bk-hero__body > :nth-child(2) { animation-delay: .65s; }
  .bk-hero__body > :nth-child(3) { animation-delay: .75s; }
  .bk-hero__shot { animation: bk-unveil 1.6s var(--ease-io) .1s backwards; }
  .bk-hero__shot img { animation: bk-settle 2.4s var(--ease) .2s backwards; }
  .bk-hero__fig .cap { animation: bk-fade 1s var(--ease) 1s backwards; }
  .bk-fact { animation: bk-fade 1.1s var(--ease) backwards; animation-delay: calc(.85s + var(--d, 0s)); }
  .bk-fact:nth-child(2) { --d: .08s; }
  .bk-fact:nth-child(3) { --d: .16s; }
}
@keyframes bk-rise { from { transform: translateY(112%); } }
@keyframes bk-fade { from { opacity: 0; transform: translateY(18px); } }
@keyframes bk-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bk-settle { from { transform: scale(1.22); } }

/* ==========================================================================
   How it works
   ========================================================================== */
.bk-steps { padding: var(--section) 0; border-top: 1px solid var(--hair); }
.bk-steps__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(56px, 7vw, 110px); align-items: end;
}
.bk-steps__head { grid-column: 1 / 9; display: grid; gap: 28px; }
.bk-steps__intro { grid-column: 9 / 13; max-width: 36ch; color: var(--fg-muted); }
.bk-steps__list {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 48px; align-items: start;
}
.bk-step { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 26px; border-top: 1px solid var(--hair); }
@media (min-width: 1100px) {
  /* A quiet staircase: each step lands a little lower than the last */
  .bk-step:nth-child(2) { margin-top: clamp(40px, 4vw, 72px); }
  .bk-step:nth-child(3) { margin-top: clamp(80px, 8vw, 144px); }
  .bk-step:nth-child(4) { margin-top: clamp(120px, 12vw, 216px); }
}
.bk-step__num { font: italic 400 clamp(40px, 3.6vw, 64px)/1 var(--serif); color: var(--metal); margin-bottom: 6px; }
.bk-step__title { font: 500 12px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.bk-step__text { max-width: 34ch; color: var(--fg-muted); }

/* ==========================================================================
   Session types
   ========================================================================== */
.bk-types { position: relative; padding: var(--section) 0; background: var(--charcoal); }
.bk-types__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 28px; align-items: end;
}
.bk-types__head .label { grid-column: 1 / -1; }
.bk-types__head .bk-title { grid-column: 1 / 9; }
.bk-types__intro { grid-column: 9 / 13; max-width: 34ch; color: var(--fg-muted); }

.bk-types__list { margin-top: clamp(56px, 7vw, 110px); border-top: 1px solid var(--hair); }
.bk-type {
  position: relative;
  display: grid;
  grid-template-columns: clamp(44px, 5vw, 96px) minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: center; column-gap: clamp(18px, 2.4vw, 44px);
  padding: clamp(26px, 2.8vw, 42px) 0;
  border-bottom: 1px solid var(--hair);
}
/* A price column appears only once prices are added (.bk-type__price, see the note atop booking.html) */
.bk-type:has(.bk-type__price) { grid-template-columns: clamp(44px, 5vw, 96px) minmax(0, 1.25fr) minmax(0, 1fr) minmax(150px, .42fr) auto; }
.bk-type::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--metal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--ease);
}
.bk-type:focus-within::after, .bk-type.is-chosen::after { transform: none; }
.bk-type__num { align-self: start; padding-top: .95em; font: 500 12px/1 var(--sans); letter-spacing: .2em; color: var(--metal); }
.bk-type__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.bk-type__name {
  font: 400 clamp(28px, 3vw, 56px)/1 var(--serif);
  letter-spacing: -.02em; text-transform: uppercase;
  transition: transform .9s var(--ease);
}
.bk-type__chosen {
  display: none; align-items: center; gap: 8px;
  font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--metal-hi);
}
.bk-type__chosen::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bk-type.is-chosen .bk-type__chosen { display: inline-flex; }
.bk-type__desc { max-width: 40ch; color: var(--fg-muted); }
.bk-type__tags { margin-top: 10px; font: 500 10px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--metal); }
.bk-type__price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: italic 400 20px/1.2 var(--serif); }
.bk-type__from { font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
.bk-type__choose { justify-self: end; min-height: 44px; white-space: nowrap; }
@media (hover: hover) {
  .bk-type:hover::after { transform: none; }
  .bk-type:hover .bk-type__name { transform: translateX(12px); }
}

/* ==========================================================================
   Request — aside + form
   ========================================================================== */
.bk-request { padding: var(--section) 0; }
.bk-request__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: clamp(48px, 6vw, 80px); align-items: start;
}
.bk-request__aside { grid-column: 1 / 6; display: grid; gap: 28px; align-content: start; }
.bk-request__aside .bk-title { margin-top: 2px; }
.bk-request__intro { max-width: 36ch; color: var(--fg-muted); }
.bk-request__main { grid-column: 7 / 13; min-width: 0; }
@media (min-width: 1100px) and (min-height: 760px) {
  .bk-request__aside { position: sticky; top: calc(var(--bk-nav) + 44px); }
}

.bk-reach { padding-top: 26px; border-top: 1px solid var(--hair); }
.bk-reach__title { margin-bottom: 16px; font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); }
.bk-reach__list { display: grid; gap: 14px; }
.bk-reach__list li { display: grid; grid-template-columns: minmax(110px, 9.5em) minmax(0, 1fr); align-items: baseline; gap: 4px 18px; }
.bk-reach__k { font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
.bk-reach__v { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; }
a.bk-reach__v {
  justify-self: start; padding: 10px 0; margin: -10px 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .6s var(--ease);
}
a.bk-reach__v:focus-visible { background-size: 100% 1px; }
@media (hover: hover) { a.bk-reach__v:hover { background-size: 100% 1px; } }

/* ---------- Form ---------- */
.bk-form { display: grid; gap: clamp(52px, 5.4vw, 80px); }
.bk-form__intro { display: grid; gap: 22px; margin-bottom: -12px; }
.bk-form__req { font-size: 14px; color: var(--fg-muted); }
.bk-req { color: var(--metal-hi); font-family: var(--sans); }

.bk-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.bk-group__legend {
  float: left; width: 100%;
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 clamp(26px, 2.6vw, 38px); padding: 0 0 16px;
  border-bottom: 1px solid var(--hair);
  font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg);
}
.bk-group__legend + * { clear: both; }
.bk-group__num { font: italic 400 22px/1 var(--serif); letter-spacing: 0; color: var(--metal); }
.bk-group__fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 2.8vw, 42px) clamp(24px, 3vw, 48px);
}

.bk-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.bk-field--full { grid-column: 1 / -1; }
.bk-field__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted);
  transition: color .4s var(--ease);
}
.bk-field:focus-within .bk-field__label { color: var(--fg); }
.bk-field.is-invalid .bk-field__label { color: var(--bk-error); }
.bk-field__hint { font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.bk-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.bk-count { flex: none; font: 500 11px/1.5 var(--sans); letter-spacing: .08em; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.bk-count.is-near { color: var(--metal-hi); }

.bk-control { position: relative; }
.bk-control::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--metal-hi); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease), background-color .3s;
  pointer-events: none;
}
.bk-control:focus-within::after { transform: none; }

.bk-input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 54px; margin: 0;
  padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--bk-line); border-radius: 0;
  background: transparent; color: var(--fg);
  font: 400 clamp(19px, 1.35vw, 22px)/1.35 var(--serif);
  letter-spacing: 0;
  caret-color: var(--metal-hi);
  color-scheme: dark;
  transition: border-color .4s var(--ease), color .3s;
}
.bk-input:focus { outline: none; }  /* the 2px champagne underline (.bk-control::after) is the focus indicator */
@media (hover: hover) { .bk-input:hover { border-bottom-color: var(--bk-line-hover); } }
.bk-input[aria-invalid="true"] { border-bottom-color: var(--bk-error); }
.bk-input::placeholder { color: #8a857c; opacity: 1; }
.bk-input:-webkit-autofill,
.bk-input:-webkit-autofill:hover,
.bk-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bone);
  caret-color: var(--metal-hi);
  box-shadow: 0 0 0 1000px var(--black) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

textarea.bk-input {
  height: auto; min-height: 9.5em; max-height: 60vh; resize: vertical;
  padding-top: 14px; line-height: 1.5;
  field-sizing: content;
}

select.bk-input {
  padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ece7dd' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center / 14px 8px;
}
select.bk-input option { background: var(--charcoal); color: var(--bone); font: 400 16px/1.4 var(--sans); }
select.bk-input:has(option[value=""]:checked),
.bk-input[data-empty] { color: var(--fg-muted); }

.bk-input::-webkit-datetime-edit { padding: 0; }
.bk-input::-webkit-date-and-time-value { text-align: left; }
.bk-input::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px; padding: 6px; margin-right: -6px;
  opacity: .72; cursor: pointer; border-radius: 0;
  transition: opacity .3s;
}
.bk-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Error message — warm terracotta, never shouty */
.bk-field__error {
  display: flex; align-items: baseline; gap: 10px;
  font: 400 14px/1.5 var(--sans); color: var(--bk-error);
}
.bk-field__error::before { content: ""; flex: none; width: 14px; height: 1px; background: currentColor; transform: translateY(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .bk-field__error:not([hidden]) { animation: bk-fade .5s var(--ease) both; }
}

/* Checkbox */
.bk-field--check { gap: 12px; }
.bk-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: 16px; }
.bk-check__input {
  -webkit-appearance: none; appearance: none;
  display: grid; place-content: center;
  width: 24px; height: 24px; margin: 1px 0 0;
  border: 1px solid var(--bk-line); border-radius: 0; background: transparent;
  cursor: pointer;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.bk-check__input::before {
  content: ""; width: 11px; height: 6px;
  border-left: 1.5px solid var(--black); border-bottom: 1.5px solid var(--black);
  transform: translateY(-2px) rotate(-45deg) scale(0);
  transition: transform .4s var(--ease);
}
.bk-check__input:checked { background: var(--metal-hi); border-color: var(--metal-hi); }
.bk-check__input:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1); }
.bk-check__input:focus-visible { outline: 1px solid var(--metal-hi); outline-offset: 4px; }
.bk-check__input[aria-invalid="true"] { border-color: var(--bk-error); }
@media (hover: hover) { .bk-check__input:not(:checked):hover { border-color: var(--bk-line-hover); } }
.bk-check__label { padding: 0 0 2px; font-size: 15.5px; line-height: 1.55; cursor: pointer; }
.bk-check__hint { padding-left: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bk-field--check .bk-field__error { padding-left: 40px; }

/* Spam trap — off-screen, out of the tab order */
.bk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Error summary */
.bk-errors {
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--bk-error-soft); border-left: 2px solid var(--bk-error);
  background: rgba(227, 155, 133, .06);
}
.bk-errors:focus { outline: none; }
.bk-errors:focus-visible { outline: 1px solid var(--bk-error); outline-offset: 4px; }
.bk-errors__title { margin-bottom: 14px; font: 400 clamp(22px, 1.9vw, 30px)/1.15 var(--serif); }
.bk-errors__list { display: grid; gap: 0; }
.bk-errors__list a {
  display: inline-flex; align-items: baseline; gap: 12px; padding: 10px 0;
  color: var(--fg); font-size: 15px;
  text-decoration: underline; text-decoration-color: var(--bk-error-soft);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color .3s;
}
.bk-errors__list a::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--bk-error); transform: translateY(-4px); }
.bk-errors__list a:focus-visible { text-decoration-color: var(--bk-error); }
@media (hover: hover) { .bk-errors__list a:hover { text-decoration-color: var(--bk-error); } }
@media (prefers-reduced-motion: no-preference) {
  .bk-errors:not([hidden]) { animation: bk-fade .6s var(--ease) both; }
}

/* Draft notice */
.bk-draft {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font-size: 14px; color: var(--fg-muted);
}
.bk-draft__clear {
  min-height: 44px; padding: 0 2px;
  font: 500 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--bk-line); text-underline-offset: 6px;
}
@media (hover: hover) { .bk-draft__clear:hover { text-decoration-color: currentColor; } }

/* Send */
.bk-send { display: grid; justify-items: start; gap: 18px; padding-top: 4px; }
.bk-send__btn { min-width: min(100%, 300px); }
.bk-send__btn[aria-busy="true"] { cursor: progress; }
.bk-send__btn[aria-busy="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--metal); transform-origin: 0 50%;
  animation: bk-busy 1.2s var(--ease-io) infinite;
}
@keyframes bk-busy { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.bk-send__note { max-width: 52ch; font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.bk-send__error {
  display: grid; gap: 14px; justify-items: start; width: 100%;
  padding: 20px 22px; border-left: 2px solid var(--bk-error); background: rgba(227, 155, 133, .06);
  font-size: 15px;
}
.bk-send__error p { max-width: 52ch; }

.bk-nojs { display: none; font-size: 15px; color: var(--fg-muted); }
.bk-nojs a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
html:not(.js) .bk-nojs { display: block; }
html:not(.js) .bk-send { display: none; }

/* ---------- Submitted ---------- */
.bk-done {
  display: grid; justify-items: start; gap: 22px;
  padding: clamp(30px, 3.6vw, 52px) 0 0;
  border-top: 1px solid var(--metal);
}
.bk-done:focus { outline: none; }
.bk-done:focus-visible { outline: 1px solid var(--metal-hi); outline-offset: 8px; }
.bk-done__mark { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--metal-hi); }
.bk-done__title {
  font: 400 clamp(40px, 4.6vw, 84px)/.92 var(--serif);
  letter-spacing: -.025em; text-transform: uppercase;
}
.bk-done__text { max-width: 44ch; font: 400 clamp(18px, 1.4vw, 22px)/1.5 var(--serif); }
.bk-done__summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px;
  width: 100%; padding: 22px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.bk-done__summary div { display: grid; gap: 6px; min-width: 0; }
.bk-done__summary dt { font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
.bk-done__summary dd { margin: 0; font-size: 15.5px; overflow-wrap: anywhere; }
.bk-done__copy { display: grid; gap: 10px; width: 100%; }
.bk-done__textarea {
  width: 100%; min-height: 220px; padding: 18px 20px; resize: vertical;
  border: 1px solid var(--hair); border-radius: 0; background: var(--charcoal); color: var(--fg);
  font: 400 14px/1.6 var(--sans); color-scheme: dark;
}
.bk-done__textarea:focus-visible { outline: 1px solid var(--metal-hi); outline-offset: 2px; }
.bk-done__copied { min-height: 1.5em; font-size: 13.5px; color: var(--metal-hi); }
.bk-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (prefers-reduced-motion: no-preference) {
  .bk-done:not([hidden]) > * { animation: bk-fade .9s var(--ease) backwards; }
  .bk-done:not([hidden]) > :nth-child(2) { animation-delay: .06s; }
  .bk-done:not([hidden]) > :nth-child(3) { animation-delay: .12s; }
  .bk-done:not([hidden]) > :nth-child(n + 4) { animation-delay: .2s; }
}

/* Native cursor over form controls (the custom ring hides there) */
.bk-cursor-native .cursor { opacity: 0 !important; }
.has-cursor .bk-form :is(input:not([type="checkbox"]), textarea) { cursor: text !important; }
.has-cursor .bk-form :is(select, .bk-check__input, .bk-check__label) { cursor: pointer !important; }
.has-cursor .bk-done__textarea { cursor: text !important; }

/* ==========================================================================
   Prefer Instagram
   ========================================================================== */
.bk-insta { position: relative; isolation: isolate; overflow: hidden; padding: var(--section) 0; background: var(--charcoal); }
.bk-insta__mark {
  position: absolute; z-index: -1; right: -16vw; top: 54%;
  width: min(64vw, 960px); height: min(64vw, 960px);
  transform: translateY(-50%);
  fill: none; stroke: currentColor; stroke-width: .12; color: var(--metal); opacity: .11;
}
.bk-insta .btn--ghost { background-color: var(--charcoal); }
.bk-insta__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 28px; align-items: end;
}
.bk-insta__label { grid-column: 1 / -1; }
.bk-insta__title {
  grid-column: 1 / 9;
  font: 400 clamp(54px, 7.4vw, 144px)/.86 var(--serif);
  letter-spacing: -.03em; text-transform: uppercase;
}
.bk-insta__title .line__in { overflow-wrap: anywhere; }  /* text-spacing overrides wrap rather than clip */
.bk-insta__side { grid-column: 9 / 13; display: grid; gap: 28px; justify-items: start; padding-bottom: .8vw; }
.bk-insta__text { max-width: 34ch; color: var(--fg-muted); }
.bk-insta__text strong { font-weight: 500; color: var(--fg); }

/* Footer contact column on this page holds two links */
.bk-footer-links { display: grid; gap: 4px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Small desktop / tablet landscape */
@media (max-width: 1099.98px) {
  .bk-hero__title { grid-column: 1 / -1; font-size: clamp(64px, 12.6vw, 140px); }
  .bk-hero__fig { grid-column: 8 / 13; grid-row: 3; }
  .bk-hero__body { grid-column: 1 / 7; grid-row: 3; align-self: center; padding: 0; }
  .bk-hero__label { grid-column: 1 / -1; }

  .bk-steps__head { grid-column: 1 / -1; }
  .bk-steps__intro { grid-column: 1 / 9; }
  .bk-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bk-types__head .bk-title, .bk-types__intro { grid-column: 1 / -1; }
  .bk-type { grid-template-columns: clamp(44px, 6vw, 80px) minmax(0, 1fr) auto; row-gap: 14px; }
  .bk-type__num { grid-row: 1 / 4; }
  .bk-type__head { grid-column: 2 / 4; }
  .bk-type__body { grid-column: 2 / 4; }
  .bk-type__price { grid-column: 2; }
  .bk-type__choose { grid-column: 3; }

  .bk-request__aside, .bk-request__main { grid-column: 1 / -1; }
  .bk-request__aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: end;
  }
  .bk-request__aside > .label, .bk-request__aside > .bk-title { grid-column: 1 / -1; }
  .bk-request__intro { grid-column: 1; align-self: start; }
  .bk-reach { grid-column: 2; }

  .bk-insta__title, .bk-insta__side { grid-column: 1 / -1; }
}

@media (max-width: 899.98px) {
  .bk-hero__fig { grid-column: 6 / 13; }
  .bk-hero__body { grid-column: 1 / 6; }
  .bk-type__name { font-size: clamp(28px, 5.4vw, 46px); }
}

/* Phones: one column, big targets, nothing sticky */
@media (max-width: 599.98px) {
  .bk-hero { padding-top: calc(var(--nav-h) + 30px); padding-bottom: 72px; }
  .bk-hero__grid { grid-template-rows: none; row-gap: 26px; }
  .bk-hero__label, .bk-hero__title, .bk-hero__fig, .bk-hero__body, .bk-hero__facts { grid-column: 1 / -1; grid-row: auto; }
  .bk-hero__label-sep { display: none; }
  .bk-hero__title { font-size: 17vw; line-height: .86; }
  .bk-hero__fig { width: 84%; justify-self: end; margin-top: 4px; }
  .bk-hero__body { gap: 26px; padding: 6px 0 0; }
  .bk-hero__lede { font-size: 21px; }
  .bk-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 6px; }
  .bk-hero__actions .btn-text { justify-content: center; min-height: 48px; }
  .bk-hero__facts { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .bk-fact, .bk-fact:nth-child(n) {
    grid-template-columns: 7.5em minmax(0, 1fr); align-items: baseline; gap: 4px 16px;
    margin-top: 0; padding: 16px 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--hair);
  }
  .bk-fact dd { font-size: 18px; }

  .bk-steps__intro { grid-column: 1 / -1; }
  .bk-steps__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bk-step {
    display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; row-gap: 12px;
    padding: 28px 0 32px;
  }
  .bk-step__num { grid-row: 1 / 5; font-size: 34px; margin: 0; }

  .bk-type { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; padding: 30px 0 26px; }
  .bk-type__num { grid-row: auto; grid-column: 1 / -1; padding: 0; }
  .bk-type__head, .bk-type__body { grid-column: 1 / -1; }
  .bk-type__price { grid-column: 1; }
  .bk-type__choose { grid-column: 2; }
  .bk-type__name { font-size: clamp(28px, 8.6vw, 40px); }

  .bk-request__aside { grid-template-columns: minmax(0, 1fr); }
  .bk-request__intro, .bk-reach { grid-column: 1 / -1; }
  .bk-request__main { order: 2; }
  .bk-group__fields { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .bk-reach__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bk-send { justify-items: stretch; }
  .bk-send__btn { width: 100%; }
  .bk-done__summary { grid-template-columns: minmax(0, 1fr); }
  .bk-done__actions { flex-direction: column; align-items: stretch; }
  .bk-done__actions .btn-text { justify-content: center; min-height: 48px; }

  .bk-insta__mark { right: -30vw; width: 110vw; height: 110vw; top: 30%; }

  /* Display lines sized so the longest word always fits inside its mask */
  .bk-title { font-size: clamp(34px, 11.2vw, 46px); }
  .bk-title--md { font-size: clamp(36px, 12vw, 50px); }
  .bk-insta__title { font-size: 11.6vw; }
  .bk-insta__title .line--indent { padding-left: .4em; }
}

/* Very small phones */
@media (max-width: 359.98px) {
  .bk .btn { padding-inline: 20px; gap: 12px; }
  .bk-hero__fig { width: 100%; }
  .bk-type { grid-template-columns: minmax(0, 1fr); }
  .bk-type__price, .bk-type__choose { grid-column: 1; justify-self: start; }
}

/* ==========================================================================
   Forced colours (Windows High Contrast)
   ========================================================================== */
@media (forced-colors: active) {
  .bk-control::after, .bk-type::after,
  .bk-field__error::before, .bk-errors__list a::before, .bk-type__chosen::before { background: CanvasText; }
  .bk-input:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  .bk-check__input { border-color: CanvasText; }
  .bk-check__input:checked { background: Highlight; border-color: Highlight; }
  .bk-check__input::before { border-color: HighlightText; }
  .bk-insta__mark { display: none; }
}

/* ==========================================================================
   Print — the request details and answers, without chrome
   ========================================================================== */
@media print {
  .bk { --fg: #111; --fg-muted: #444; --hair: rgba(0, 0, 0, .2); color: #111; }
  .bk-hero__fig, .bk-hero__actions, .bk-types .bk-type__choose, .bk-send, .bk-insta__mark, .bk-insta .btn { display: none !important; }
  .bk-types, .bk-insta { background: none; }
  .bk [data-reveal], .bk .line__in, .bk .char, .bk .w, .bk-hero * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .bk-request__aside { position: static; }
}

/* ---------- Display optical size ----------
   Kept last: the font shorthands above reset font-variation-settings. A low optical
   size keeps Bodoni's hairlines solid at display sizes (audit F14). */
.bk-hero__title, .bk-title, .bk-insta__title, .bk-done__title { font-variation-settings: "opsz" 24; }
.bk-type__name, .bk-errors__title, .bk-hero__lede, .bk-step__num, .bk-group__num { font-variation-settings: "opsz" 36; }