/* Delvo Digital — site v4 · /contact, the booking page: refs/walk-booking.png in the dark build's tokens and type.
   Loads after ../styles.css and adds only the page's own blocks (class prefix bk-). No raw colour is written here: every
   value is a token from the token block of styles.css, a mix of two tokens named where it happens, or one of the page's
   own mixes, declared once in the block below with what each was measured against. The comp was drawn at 1418 px
   wide, read as the 1380 panel × 1.0, so a comp px is a page px; the dark build's radii hold (card 16, controls 10,
   pills 999) and its gutter (52) replaces the comp's 125 so the page lines up with the fixed nav's mark. */

/* ── THE PAGE'S OWN TOKENS (judge round 1, 2026-10-07) — declared once, here, on the section; read only by this file ──
   Each is a mix of the site's tokens (styles.css), no new colour. Every target below was MEASURED ON THE PICTURE,
   refs/walk-booking.png (1418 × 840), with sharp; every mix was computed in OKLab against it (ΔE = 100 × OKLab distance).
   Colours are written r-g-b in decimal; luma = .299 r + .587 g + .114 b.
   --bk-sweep-a/-b  the headline sweep on "works for you.". Picture: the word run's ink (x 258–644, y 292–348) is pale
                    lavender → periwinkle, mean luma 160.5 (core 169.3; core thirds 188-174-223 · 175-156-217 ·
                    164-135-211, luma 184 · 169 · 152). Ours was the site's --hl sweep, mean luma 107.4. Button 40 % into
                    --text = 192-180-240 (luma 190), button 70 % = 155-128-228 (luma 148), midpoint luma 169: ΔE 2.7 · 2.7 · 3.8.
   --bk-card        the booking card AND the contact strip: the picture paints both one indigo-cast grey (card 17-23-41,
                    luma 23.3; strip 20-22-42, luma 23.7). Button 10 % into --surface = 23-22-35, luma 23.8, ΔE 1.5 to
                    both (8 % into --surface-2 would land luma 27.4, ΔE 2.2). The page canvas stays the site's token.
   --bk-slot        a time pill's fill. Picture 28-28-54, luma 31.0; button 10 % into the card = 32-27-51, luma 31.2, ΔE 0.9.
   --bk-slot-line   a time pill's 1 px border. Picture mean 71-71-102, luma 74.5 (top 66-66-96, bottom 79-79-113): a
                    desaturated indigo, not the violet. --tint-fg 50 % into the card = 73-72-96, luma 75.0, ΔE 1.2 (the
                    violet at 35 % lands 54-40-92, luma 50, ΔE 9.8).
   --bk-more-line   View more times' 1 px border. Picture mean 49-48-79, luma 51.8; button 25 % into --tint-bg (its fill)
                    = 49-40-88, luma 48.2, ΔE 3.2.
   --bk-medal-hi/lo the strip's three medallions: light top-left → deep bottom-right, below the picture's own button
                    (luma 88.9). Picture top-left quadrant 114-70-154 (92.8), bottom-right 84-61-141 (77.2), whole
                    100-67-148 (86.3). hi = (button 90 % into --text) 80 % into the panel = 106-76-174 (96.1); lo = button
                    65 % into the panel = 80-53-139 (70.9); the gradient's quadrants land between them.
   --bk-glow        the soft violet glow behind the section's top. Picture ground (25th percentile per 40 px cell): 9 at
                    the edges → 25–27 at x ≈ 700, y ≈ 200, halved at ≈ ±560 px across and ±130 px down/up (it sits over
                    the gap between the headline and the card, not the card's top-right). Button at 12 % alpha over the
                    panel = 27-23-42, luma 26.4 at the centre. */
.bk {
  --bk-sweep-a: color-mix(in oklab, var(--button) 40%, var(--text));
  --bk-sweep-b: color-mix(in oklab, var(--button) 70%, var(--text));
  --bk-card: color-mix(in oklab, var(--button) 10%, var(--surface));
  --bk-slot: color-mix(in oklab, var(--button) 10%, var(--bk-card));
  --bk-slot-line: color-mix(in oklab, var(--tint-fg) 50%, var(--bk-card));
  --bk-more-line: color-mix(in oklab, var(--button) 25%, var(--tint-bg));
  --bk-medal-hi: color-mix(in oklab, color-mix(in oklab, var(--button) 90%, var(--text)) 80%, var(--panel));
  --bk-medal-lo: color-mix(in oklab, var(--button) 65%, var(--panel));
  --bk-glow: color-mix(in srgb, var(--button) 12%, transparent);
}

/* ── the section: one panel, the comp's airy top (pill at 152 under the panel's top; the fixed nav's row sits 22–94) and
   its glow (--bk-glow above: an ellipse halved at ±580 × ±130 px, centred where the picture's is) ── */
.bk { padding-top: 152px; padding-bottom: 72px; background-image: radial-gradient(ellipse 84% 260px at 49% 230px, var(--bk-glow), transparent); }

/* the comp's contour waves in BOTH bottom corners: one set of 1 px arcs in the panel-border grey, the left the right's
   mirror. Both stand on the strip's bottom edge so they run up past its two ends and behind it, as the picture's do (picture:
   left x 0–330, y 420–650; right x 1290–1418, y 520–740; the strip 607–778), and fade out toward the content (the mask)
   instead of stopping on the box's edge */
.bk-lines {
  position: absolute; z-index: 0; bottom: 72px; width: 180px; height: 360px; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, var(--text) 35%, transparent);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, var(--text) 35%, transparent);
}
.bk-lines--l { left: 0; transform: scaleX(-1); }
.bk-lines--r { right: 0; }
.bk-arcs circle { fill: none; stroke: var(--panel-border); stroke-width: 1; opacity: .75; }

/* ── the two columns: copy + features left, the card right (comp: card 580 wide at x 713–1293; our inner width 1276) ── */
.bk-grid, .bk-contact { position: relative; z-index: 1; }
.bk-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 580px; grid-template-areas: "copy side" "feats side";
  column-gap: 64px; align-items: start;
}
.bk-copy { grid-area: copy; }
.bk-feats { grid-area: feats; }
.bk-side { grid-area: side; min-width: 0; }

/* the eyebrow pill (comp: a dot + small caps in a bordered pill, 24 tall drawn; the hero pill's type and height here) */
.bk-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 12px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px; background: var(--pill-bg);
  font-size: clamp(12px, calc(13 * var(--k)), 13px); line-height: 1; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--pill-fg); white-space: nowrap;
}
.bk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--button); flex: none; }

/* H1: the comp draws its two lines at two sizes (78 / 62 drawn); one size here, the mean, with the H1 role's weight,
   tracking and the sweep on "works for you." only — the page's own pale lavender → periwinkle pair (--bk-sweep-a/-b),
   not the site's darker --hl */
.bk-h1 { margin-top: 32px; font-size: clamp(38px, calc(72 * var(--k)), 72px); line-height: 1.04; }
.bk-h1 .grad { display: inline; --grad-text: linear-gradient(90deg, var(--bk-sweep-a), var(--bk-sweep-b)); --grad-solid: var(--bk-sweep-b); }

/* the sub: two written lines (comp 17 drawn × T = 18, the body role; line-height 1.5 is the floor) */
.bk-sub { margin-top: 24px; font-size: 18px; line-height: 27px; color: var(--text-2); max-width: 34em; }
.bk-sub .ln { display: block; }

/* the three features: 44 px medallion + title + two short lines, parted by 1 px rules (comp: x 125 / 308 / 512); set to
   the top so the three titles share one line whatever the body's length (comp: medallion top 457, titles 462) */
.bk-feats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.bk-feat { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 6px 16px 6px 0; }
.bk-feat + .bk-feat { padding-left: 20px; border-left: 1px solid var(--border); }
.bk-feat > div { min-width: 0; }
/* the medallion: the comp fills it with its button violet at about a third over the panel (drawn 33-28-50); the same
   arithmetic on our tokens — no new colour */
.bk-medal {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: color-mix(in oklab, var(--button) 30%, var(--panel)); border: 1px solid color-mix(in oklab, var(--button) 22%, var(--panel));
  color: var(--text);
}
.bk-medal svg { width: 22px; height: 22px; }
.bk-feat-t { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text); }
.bk-feat-p { margin-top: 4px; font-size: 15px; line-height: 21px; color: var(--text-2); }
/* a time range never breaks ("9am–5pm", one format on the page: the sub, the Weekdays feature, the Hours item) */
.bk-nw { white-space: nowrap; }

/* ── the booking card (comp: 580 × 378, radius 16, the indigo-cast --bk-card, padding 24) ── */
.bk-card { padding: 24px; background: var(--bk-card); border: 1px solid var(--border); border-radius: 16px; }
.bk-card-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.bk-card-head > div { min-width: 0; }
/* the calendar tile: the comp paints it in its button violet (drawn 69-47-9F = its own button) → --button, white icon */
.bk-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--button); color: var(--button-label); }
.bk-tile svg { width: 22px; height: 22px; }
.bk-card-t { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text); }
.bk-card-s { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--text-2); }

/* day rows: label | four slots (comp: label col 172, slots 84–85 wide with 6 between, rows 63 apart, rules between). The
   slots take the picture's width again (84: 13 px type and 14 px each side around "11:00 AM"); the label column keeps 170,
   so the label is 15 px (the picture draws it at ≈ 13.5) and a long real date ("Wednesday, September 30") may take two
   lines of 22 — the row stays 44 + 24 tall either way */
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 84px); column-gap: 6px; align-items: center; padding: 12px 0; }
.bk-row + .bk-row { border-top: 1px solid var(--border); }
.bk-row[hidden] { display: none; }
.bk-day { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); text-wrap: balance; }
.bk-slots { display: contents; }
/* a slot is a mailto: link drawn as a button, in the picture's indigo pill (--bk-slot, --bk-slot-line), 13 px / 500 type and
   14 px each side. The trade: 44 tall where the picture draws 36 — the tap floor beats the picture — so the pill is 8 px
   taller than drawn and the rows sit 69 apart where the picture's sit 63; radius 10 */
.bk-slot {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; min-width: 0;
  border: 1px solid var(--bk-slot-line); border-radius: 10px; background: var(--bk-slot); color: var(--text);
  font-size: 13px; line-height: 1; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .16s var(--ui), border-color .16s var(--ui), color .16s var(--ui);
}
.bk-slot:hover { background: color-mix(in oklab, var(--button) 20%, var(--bk-card)); border-color: color-mix(in oklab, var(--tint-fg) 70%, var(--bk-card)); }
.bk-slot.is-on { background: var(--btn); border-color: var(--btn); color: var(--btn-label); }

/* View more times: the comp's full-width tinted pill (41 tall drawn → 44), its 1 px border visible (--bk-more-line) and a
   16 px chevron (the comp's draws 10 × 6 of ink, the symbol's 9 × 4.5 at 16) */
.bk-more {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 44px; margin-top: 20px; padding: 0 16px;
  border: 1px solid var(--bk-more-line); border-radius: 999px; background: var(--tint-bg); color: var(--text);
  font-size: 15px; line-height: 1; font-weight: 500; cursor: pointer;
  transition: border-color .16s var(--ui), background-color .16s var(--ui);
}
.bk-more:hover { border-color: color-mix(in oklab, var(--button) 45%, var(--tint-bg)); }
.bk-chev { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ui); }
.bk-more[aria-expanded="true"] .bk-chev { transform: rotate(180deg); }
html:not(.js) .bk-more { display: none; }

/* without JS the card says the rule and gives the address */
.bk-nojs { padding-top: 20px; font-size: 17px; line-height: 26px; color: var(--text-2); }
.bk-nojs a { color: var(--text); }

/* after a slot is picked: the chosen time and the rule (a live region, empty until then) */
.bk-note { margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.bk-note:empty { display: none; }
.bk-note b { font-weight: 600; color: var(--text); }
.bk-note a { color: var(--text); }
/* the line under the card: what this page does (sends nothing), in place of the comp's security claim. Icon + words are one
   unit, centred as a whole, the words set left; on a phone the two sentences take a line each, so the unit shrinks to the
   longer one and the icon sits on the first line beside it, not alone at the gutter */
.bk-fine { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--text-2); text-align: left; }
.bk-fine svg { width: 14px; height: 14px; flex: none; margin-top: 4px; }
.bk-fine-t { min-width: 0; }

/* ── the contact card: three items on one flush card (comp: 1168 × 171, radius 16, items ~68 in), the same --bk-card as the
   booking card. 40 above it: the comp's gap from the note's ink to the strip is 44 (563 → 607), and the note's line box ends
   4 under its ink, so 40 lands 44 (the order's 48 would land 52) ── */
.bk-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; background: var(--bk-card); border: 1px solid var(--surface-border); border-radius: 16px; }
.bk-ci { position: relative; display: flex; align-items: center; gap: 20px; min-width: 0; padding: 48px 24px 48px 68px; }
.bk-ci > div { min-width: 0; }
/* the dividers: 64 px rules centred on the items (comp: 65 px at full strength, y 663–727, centred on the 171 strip) */
.bk-ci + .bk-ci::before { content: ""; position: absolute; left: 0; top: calc(50% - 32px); width: 1px; height: 64px; background: var(--border); }
/* the big medallion: a soft radial, lighter top-left and deeper bottom-right, more muted than the button (--bk-medal-hi/lo,
   measured above); white icon */
.bk-medal--lg { width: 64px; height: 64px; background: radial-gradient(circle at 30% 25%, var(--bk-medal-hi), var(--bk-medal-lo)); border: 0; color: var(--button-label); }
.bk-medal--lg svg { width: 26px; height: 26px; }
.bk-ci-l { font-size: 15px; line-height: 22px; color: var(--text-2); }
.bk-ci-v { display: block; margin-top: 2px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.bk-ci-v { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }   /* a 44 px target around a 24 px line, nothing moves */
a.bk-ci-v:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-ci-n { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--text-2); }

/* ── narrower desktops: the card 520, the slots still 84 (the label column 110: the day on two lines of 22, the row unchanged) ── */
@media (max-width: 1279px) {
  .bk-grid { grid-template-columns: minmax(0, 1fr) 520px; column-gap: 48px; }
  .bk-ci { padding-left: 40px; }
}

/* ── under 1024: stacked — copy, then the card (first thing after the headline), then the features, then the contact card ── */
@media (max-width: 1023px) {
  .bk { padding-top: 84px; padding-bottom: 56px; }
  .bk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side" "feats"; row-gap: 32px; }
  .bk-feats { margin-top: 0; }
  .bk-sub { max-width: none; }
  .bk-contact { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .bk-ci { padding: 20px 24px; }
  .bk-ci + .bk-ci::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px; }
  .bk-lines { bottom: 56px; }
}

/* ── 390: one column; body copy ≥ 16; the slots two by two under their day ── */
@media (max-width: 639px) {
  .bk { padding-top: 76px; padding-bottom: 48px; }
  .bk-h1 { margin-top: 20px; }
  .bk-sub { margin-top: 20px; font-size: 17px; line-height: 26px; }
  .bk-card { padding: 20px 16px; }
  .bk-card-head { gap: 12px; }
  .bk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; padding: 14px 0; }
  .bk-day { grid-column: 1 / -1; padding: 0 0 2px; font-size: 16px; line-height: 24px; }
  .bk-feats { grid-template-columns: minmax(0, 1fr); }
  .bk-feat { padding: 14px 0; }
  .bk-feat + .bk-feat { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .bk-feat-p, .bk-card-s, .bk-note, .bk-fine, .bk-ci-l, .bk-ci-n { font-size: 16px; line-height: 24px; }
  .bk-fine svg { margin-top: 5px; }
  .bk-fine-s { display: block; }
  .bk-nojs { font-size: 16px; line-height: 24px; }
  .bk-slot, .bk-more { font-size: 16px; }
  .bk-ci { padding: 18px 16px; gap: 16px; }
  .bk-ci + .bk-ci::before { left: 16px; right: 16px; }
  .bk-medal--lg { width: 52px; height: 52px; }
  .bk-medal--lg svg { width: 22px; height: 22px; }
  .bk-lines { display: none; }
}
/* the narrowest phones: the card's sub keeps 16 px and one line beside the 44 px tile — "Pacific Time (PT)" only */
@media (max-width: 419px) { .bk-card-s-pre { display: none; } }

/* reduced motion and the page's own switch: no transitions on the page's controls (the still disables all already) */
@media (prefers-reduced-motion: reduce) { .bk-slot, .bk-more, .bk-chev { transition: none; } }
html.motion-off .bk-slot, html.motion-off .bk-more, html.motion-off .bk-chev { transition: none; }

/* (2026-10-18, Refero pick 5) the note, once a slot is picked, sits right under that slot's row inside the card: a tinted
   panel the width of the row; with motion allowed it fades in over .3s */
.bk-note.is-inline { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--tint-bg); border: 1px solid var(--bk-more-line); }
html.mo .bk-note.is-inline { animation: bk-note-in .3s var(--arrive) both; }
@keyframes bk-note-in { from { opacity: 0; } }   /* a fade, no travel: the page scrolls the note into view as it opens, and a note still 6 px off its place was measured 6 px short (2026-10-18) */