/* Resid: the booking page (booking phase 1, 2026-11-03; DESIGN 3.1, 3.2, 3.3, 3.4 and 9). One phone column, 560 px at
   most, 16 px gutters, 44 px targets, on the client pages' daylight paper. Borders are hairlines only; a choice shows by
   its ring and its tick, never by colour alone. In a frame (data-embed) the press sits at the end of the form and the
   page grows to fit; data-theme picks light or dark, and without it the system decides. A Pro studio's own color
   (phase 1b, 4.5) is --accent: book.js sets --accent-light and --accent-dark for each theme it reads in, and either
   one missing is ink.
   FROM 900 PX (Round 3, task 13; mock g-desktop-book.html, its renders g-desktop-light.png and g-desktop-dark.png): one
   column of 920 px with the studio across the top, packages as cards side by side, add-ons as tick boxes three a row,
   Address and Unit on one row, two weeks of days in a grid of seven, times four a row, Access as one segmented control
   and the order summary as a card in the column, never pinned to the screen. Nothing scrolls sideways. Below 900 px the
   page is the phone's, as it was, and what only a desk shows is hidden there. */
:root{
  --paper:#EBEBE7; --paper-2:#E1E1DC; --surface:#FFFFFF;
  --ink:#171613; --ink-2:#3A3833; --ink-muted:#605D55; --ink-faint:#6B6759;
  --hairline:#E5E4E0;
  --ice:#3F7C92;
  --accent:var(--accent-light,var(--ink));
  --track:var(--paper-2); --knob:var(--surface);
  --on:inset 0 0 0 2px var(--ink);
  --box:inset 0 0 0 1.5px var(--ink-faint);
  --lift:color-mix(in srgb,var(--surface),var(--ink) 4%);
  --shadow-card:0 2px 4px rgba(23,22,19,.05),0 16px 38px -18px rgba(23,22,19,.22);
  --scrim:rgba(23,22,19,.32);
  --hover:rgba(23,22,19,.06);
  --font-display:'Archivo','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,.84,.44,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15140F; --paper-2:#1B1A15; --surface:#1E1D18;
    --ink:#EBEBE7; --ink-2:#D2D0C8; --ink-muted:#A3A096; --ink-faint:#8B887E;
    --hairline:#2A2923; --ice:#74AEC1;
    --accent:var(--accent-dark,var(--ink));
    --track:rgba(255,255,255,.2); --knob:#FFFFFF;
    --shadow-card:0 1px 2px rgba(0,0,0,.28),0 10px 26px -22px rgba(0,0,0,.45);
    --scrim:rgba(0,0,0,.5);
    --hover:rgba(255,255,255,.08);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15140F; --paper-2:#1B1A15; --surface:#1E1D18;
  --ink:#EBEBE7; --ink-2:#D2D0C8; --ink-muted:#A3A096; --ink-faint:#8B887E;
  --hairline:#2A2923; --ice:#74AEC1;
  --accent:var(--accent-dark,var(--ink));
  --track:rgba(255,255,255,.2); --knob:#FFFFFF;
  --shadow-card:0 1px 2px rgba(0,0,0,.28),0 10px 26px -22px rgba(0,0,0,.45);
  --scrim:rgba(0,0,0,.5);
  --hover:rgba(255,255,255,.08);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--paper);}
body{color:var(--ink-2);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
[hidden]{display:none !important;}
button,input,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;text-align:inherit;}
a{color:var(--ink);text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px;}
[aria-disabled="true"]{cursor:default;}
/* Words for a reader only. */
.bkvh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.bkroot{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;}
/* In a frame (3.2, mock d): the panel fills the frame, paper with a 16 px corner, and the studio's own page shows
   around it. The form's H1 is a reader's only (.bkvh). At 720 px and wider, You is two across and the packages three
   or more (final look). */
[data-embed],[data-embed] body{background:transparent;}
[data-embed] .bkroot{max-width:none;min-height:0;background:var(--paper);border-radius:16px;}
[data-embed] .bkh1.bkvh + .bksec{margin-top:0;}
@media (min-width:720px){
  [data-embed] .bkwrap{padding:28px 32px 32px;}
  [data-embed] .bkpkgs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
  [data-embed] .bkyou{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:start;}
  [data-embed] .bkyou .bklabel{grid-column:1 / -1;margin-bottom:0;}
  [data-embed] .bkyou .bkf + .bkf{margin-top:0;}
}
.bkhead{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 16px;border-bottom:1px solid var(--hairline);}
.bklogo{height:30px;width:auto;max-width:140px;object-fit:contain;}
.bkname{font-weight:600;font-size:0.95rem;letter-spacing:-0.01em;color:var(--ink);}
.bkwrap{flex:1;padding:20px 16px 24px;}
.bkh1{font-family:var(--font-display);font-stretch:112%;font-weight:600;font-size:2rem;letter-spacing:-0.02em;line-height:1.05;color:var(--ink);outline:none;}
.bkdot{display:inline-block;width:0.15em;height:0.15em;border-radius:100%;background:var(--ice);margin-left:0.05em;}
:root[data-colors="own"] .bkdot{display:none;}
.bkfor{margin-top:6px;font-size:0.92rem;color:var(--ink-muted);}
.bkline{margin-top:12px;color:var(--ink-2);}
/* Round 3, task 9: a project, not a listing. */
.bkproj{margin-top:18px;font-size:0.92rem;color:var(--ink-muted);}
.bkpjkind{grid-template-columns:repeat(2,1fr);}
.bklede{font-size:1.1rem;color:var(--ink);}
.bkfine{margin-top:6px;font-size:0.84rem;color:var(--ink-muted);text-align:center;}

.bksec{margin-top:20px;}
.bklabel{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:0.72rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);}
.bkhd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.bkmonth{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);}
.bkzone{margin-left:10px;text-transform:none;letter-spacing:0;}

/* Packages and home sizes: name and price on each, before any address. */
.bkpkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.bkopt{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:64px;padding:10px 34px 10px 12px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;}
.bkpn{font-size:0.88rem;font-weight:500;line-height:1.3;color:var(--ink-2);}
.bkprice{margin-top:4px;font-size:0.98rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.bktick{position:absolute;top:10px;right:10px;width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity 160ms var(--ease),transform 160ms var(--ease);}
.bkopt.on{box-shadow:var(--on);}
.bkopt.on .bktick{opacity:1;transform:none;}
.bkopt.on .bkpn{color:var(--ink);}

/* Add-ons: one line each, its price and its switch. Off, the switch is the app's own in dark (a light track, a white
   knob), so it shows against the row in both themes; on, the ink track and the paper knob. */
.bkadds{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;}
.bkaddon{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px;}
.bkaddon + .bkaddon{border-top:1px solid var(--hairline);}
.bkaddn{font-size:0.92rem;font-weight:500;color:var(--ink);}
.bkaddp{margin-left:auto;font-size:0.88rem;font-weight:500;color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
/* A package's Description (Round 3, task 12): two lines on its tile, all of it once picked; an add-on's line, quiet. */
.bkpab{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:6px;font-size:0.8rem;line-height:1.4;color:var(--ink-muted);white-space:pre-line;}
.bkopt.on .bkpab{-webkit-line-clamp:unset;overflow:visible;}
.bkaddw{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 0;}
.bkaddab{font-size:0.8rem;line-height:1.35;color:var(--ink-muted);white-space:pre-line;}
.bkrows .bkrowab{align-items:flex-start;padding-top:12px;padding-bottom:12px;}
.bkdab{display:block;margin-top:4px;font-size:0.8rem;line-height:1.4;color:var(--ink-muted);white-space:pre-line;}
.bktg{position:relative;flex:none;width:38px;height:22px;border-radius:20px;background:var(--track);transition:opacity 160ms var(--ease);}
.bktg::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:100%;background:var(--knob);transition:transform 160ms var(--ease);}
.bkaddon.on .bktg{background:var(--accent);}
.bkaddon.on .bktg::after{background:var(--paper);transform:translateX(16px);}
/* A per-item add-on's count (Round 3, task 7): its name and count, then Fewer and More. */
.bksteps{margin-left:auto;display:flex;gap:8px;}
.bkstepb{width:36px;height:36px;border:1px solid var(--hairline);border-radius:100%;font-size:1.05rem;font-weight:500;color:var(--ink);}
.bkstepb[aria-disabled="true"]{opacity:.45;}

/* The address and its list. */
.bkfield{display:block;width:100%;min-height:48px;padding:10px 14px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;font-size:16px;color:var(--ink);}
textarea.bkfield{min-height:96px;resize:vertical;}
.bkfield::placeholder{color:var(--ink-faint);}
.bkfield:focus{outline:2px solid var(--ice);outline-offset:0;}
.bksugs{margin-top:6px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;box-shadow:var(--shadow-card);}
.bksug{display:flex;flex-direction:column;width:100%;min-height:48px;padding:8px 14px;}
.bksug + .bksug{border-top:1px solid var(--hairline);}
.bksugm{font-size:0.94rem;color:var(--ink);}
.bksugr{font-size:0.8rem;color:var(--ink-muted);}
.bkmark{padding:6px 14px 8px;font-size:0.72rem;color:var(--ink-muted);text-align:right;}
/* The brokerage list (Trevor, 11-03): the address list's look, a name a line; the line the arrows are on is tinted. */
.bkco{overflow:hidden;}
.bkco .bksug{justify-content:center;}
.bkco .bksug[aria-selected="true"]{background:var(--hover);}
@media (hover:hover){.bkco .bksug:hover{background:var(--hover);}}
.bktravel,.bkout{margin-top:8px;font-size:0.86rem;color:var(--ink-muted);}
.bkaddr .bkunit{margin-top:10px;max-width:10rem;}
.bksqft .bkfield{max-width:12rem;font-variant-numeric:tabular-nums;}

/* Days, times and the twilight row. */
/* The days row scrolls: with a mouse it shows a thin bar, so a desk sees the days go on; by touch, none. */
.bkdays{display:flex;gap:6px;overflow-x:auto;padding:2px;margin:0 -2px;}
@media (pointer:fine){.bkdays{scrollbar-width:thin;padding-bottom:8px;}}
@media (pointer:coarse){.bkdays{scrollbar-width:none;}.bkdays::-webkit-scrollbar{display:none;}}
.bkday{flex:0 0 56px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;}
.bkdw{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);line-height:1;}
.bkdd{font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:1.15rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.bkday.on{box-shadow:var(--on);}
.bkday.closed{background:transparent;}
.bkday.closed .bkdw,.bkday.closed .bkdd{color:var(--ink-faint);}
.bktimes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;}
.bktime{display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;font-size:0.92rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.bktime.on,.bktw.on{box-shadow:var(--on);}
.bktw{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 14px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;}
.bktwl{display:flex;flex-direction:column;}
.bktwt{font-size:0.92rem;font-weight:500;color:var(--ink);}
.bksun{font-size:0.8rem;color:var(--ink-muted);}
.bkadd{font-size:0.88rem;font-weight:500;color:var(--ink-muted);white-space:nowrap;}
.bkmore{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:0.88rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.bkfull{margin-top:12px;color:var(--ink-muted);}
/* Earlier and Later under the row of days, Later at the row's end (Round 3, task 2). */
.bkpages{display:flex;align-items:center;margin-top:4px;}
.bkpage{display:inline-flex;align-items:center;min-height:44px;font-size:0.88rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.bklater{margin-left:auto;}
.bknofit{margin-top:6px;font-size:0.86rem;color:var(--ink-muted);}
.bknofit a{color:var(--ink-muted);}
/* The way to the studio, a 44 px target wherever it stands; placed whole, so the name never splits. */
.bkreach{display:inline-flex;align-items:center;min-height:44px;}

/* Access, the code, you and notes. */
.bkseg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.bkseg1{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;font-size:0.88rem;font-weight:500;color:var(--ink-2);text-align:center;}
.bkseg1.on{box-shadow:var(--on);color:var(--ink);}
.bkcode{margin-top:10px;}
.bkcode label,.bkf label{display:block;margin-bottom:4px;font-size:0.84rem;font-weight:500;color:var(--ink-2);}
.bkhint{display:block;margin-top:4px;font-size:0.78rem;color:var(--ink-faint);}
.bkf + .bkf{margin-top:10px;}
.bknote summary,.bkpart summary,.bkalso summary{display:flex;align-items:center;min-height:44px;font-size:0.92rem;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.bknote[open] summary,.bkpart[open] summary,.bkalso[open] summary{margin-bottom:6px;}
/* Who is booking (Round 3, task 5): The agent under its switch, an email's fix under its field. */
.bkothers .bklink{margin-top:0;}
.bkagent{margin-top:8px;}
.bkahd{margin:0 0 8px;font-size:0.92rem;font-weight:600;color:var(--ink);}
.bkmean{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin-top:4px;font-size:0.84rem;color:var(--ink-2);}
.bkmean .bklink{margin-top:0;}
.bknotme{margin-top:0;}
/* Who else is on this project (phase 2): each partner its fields and its role, two roles a row on a phone. */
.bkpartner + .bkpartner{margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline);}
.bkprole{grid-template-columns:repeat(2,1fr);margin-top:10px;}
.bkhp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;}

/* The press: held at the foot of the screen, at the end of the form in a frame. */
.bkbar{position:sticky;bottom:0;margin:24px -16px 0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--hairline);}
[data-embed] .bkbar{position:static;margin:24px 0 0;padding:0;border:0;}
.bkpress{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 16px;border-radius:10px;background:var(--accent);color:var(--paper);font-weight:600;font-size:16px;text-align:center;transition:opacity 160ms var(--ease);}
.bkpress[aria-disabled="true"]{opacity:.45;}
.bkdanger{margin-top:12px;}
.bkunder{margin-top:8px;text-align:center;font-size:0.84rem;color:var(--ink-muted);}
/* The cancel fee's tick (phase 2): the whole line is the target. */
.bkpolicy{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:8px;font-size:0.88rem;color:var(--ink-2);cursor:pointer;}
.bkpolicy input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent);}
/* The booking terms (Round 3, task 14): the tick in the cancel fee's place with its link, the cancel line over it, and
   the agreed line for the person a link names. */
.bkterms a,.bkagreed a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.bkagreed{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;min-height:44px;margin-bottom:8px;font-size:0.88rem;color:var(--ink-muted);}
.bkagreed a{display:inline-flex;align-items:center;min-height:44px;}
.bkfee{margin:4px 0 6px;font-size:0.84rem;color:var(--ink-muted);text-align:center;}
a.bkpress{text-decoration:none;}
.bkunder b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.bkincl{margin-top:2px;text-align:center;font-size:0.84rem;color:var(--ink-muted);}
.bkincl summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.bkincl ul{list-style:none;max-width:320px;margin:0 auto 4px;text-align:left;}
.bkincl li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-variant-numeric:tabular-nums;}
.bknotice{font-size:0.92rem;color:var(--ink);text-align:center;}
.bknotice:empty{display:none;}
/* The two nearest: side by side when each fits on one line, else one above the other; a time keeps its am or pm. */
.bknear{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;}
.bknear .bkbtn{flex:1 1 auto;margin-top:0;white-space:nowrap;}

/* Buttons that are not the press, and the link that cancels. */
.bkbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;font-size:0.92rem;font-weight:500;color:var(--ink);text-decoration:none;margin-top:12px;}
.bkwide{display:flex;width:100%;}
.bklink{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:0.92rem;color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px;}
.bkacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
/* Manage's links in a row of their own, apart (Round 3, task 14). */
.bklinks{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:0;margin-top:8px;}
.bklinks .bklink{margin-top:0;}
.bklinks .bkerr{flex-basis:100%;}
.bkrows a.bkview{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.bkacts .bkbtn{margin-top:20px;}

/* The confirmation: a calendar tile, the time, the place, the rows. */
.bkwhen{display:flex;gap:14px;align-items:flex-start;margin-top:20px;}
.bktile{flex:none;width:60px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface);overflow:hidden;text-align:center;}
.bktm{display:block;padding:3px 0;background:var(--accent);color:var(--paper);font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.12em;}
.bktd{display:block;padding:6px 0 8px;font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:1.5rem;line-height:1;color:var(--ink);}
.bkwd{font-weight:600;color:var(--ink);}
.bkwr{color:var(--ink-2);font-variant-numeric:tabular-nums;}
.bkwhere{color:var(--ink-muted);}
.bkrows{margin-top:16px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;}
.bkrows div{display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;padding:0 14px;}
.bkrows div + div{border-top:1px solid var(--hairline);}
.bkrows dt{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);}
.bkrows dd{color:var(--ink);text-align:right;}
.bkcal{margin-top:20px;}
.bkcalb{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.bkcalb .bkbtn{margin-top:0;}
.bkfootl{text-align:center;}

/* The cancel sheet, over a scrim that closes it, clear of a phone's home bar. */
.bksheet{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);}
.bksheetin{width:100%;max-width:560px;padding:20px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:var(--paper);border-top:1px solid var(--hairline);box-shadow:var(--shadow-card);animation:bkup 240ms var(--ease);}
.bkq{font-weight:600;color:var(--ink);font-size:1.05rem;}
/* The booking terms as a document (Round 3, task 14): the sheet and the page (book-terms.js) read the same. The lines
   from the studio's settings between two hairlines, each with the house dot; then each heading over its words. */
.bksheetin.bkdoc{max-height:88dvh;overflow:auto;}
.bkdochd{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bkdochd .bkq{font-family:var(--font-display);font-stretch:108%;font-size:1.35rem;letter-spacing:-0.01em;outline:none;}
.bkx{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-10px;border-radius:100%;color:var(--ink-muted);}
.bkx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.bkdocset{list-style:none;margin:16px 0 0;padding:14px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.bkdocset li{position:relative;padding-left:16px;font-size:0.92rem;line-height:1.55;color:var(--ink);}
.bkdocset li + li{margin-top:6px;}
.bkdocset li::before{content:"";position:absolute;left:1px;top:0.62em;width:5px;height:5px;border-radius:100%;background:var(--ice);}
.bkdocsec{margin-top:20px;}
.bkdoch{font-size:0.95rem;font-weight:600;line-height:1.4;color:var(--ink);}
.bkdocsec p{margin-top:4px;font-size:0.92rem;line-height:1.6;color:var(--ink-2);}
.bkdocown{margin-top:20px;}
.bkdocown a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;}
.bkwrap.bkdoc{width:100%;max-width:680px;margin:0 auto;}
.bkwrap.bkdoc .bkfor{margin-top:8px;}
@media (hover:hover){ .bkx:hover{background:var(--hover);color:var(--ink);} }
@keyframes bkup{from{transform:translateY(16px);opacity:0;}to{transform:none;opacity:1;}}

.bkfoot{display:flex;justify-content:center;gap:18px;padding:16px;font-size:0.8rem;}
.bkfoot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted);}

/* What only a desk shows (Round 3, task 13): hidden on a phone, drawn from 900 px below. */
.bkhero,.bkweeks,.bkdows,.bkdn,.bkbox,.bksum,.bkchg{display:none;}
.bktwadd[aria-disabled="true"]{opacity:.5;}

@media (min-width:900px){
  .bkroot{max-width:920px;}
  .bkroot:has(.bkhero) .bkhead{display:none;}
  .bkwrap{padding:40px 24px 96px;}
  /* The studio: its photograph, 21 by 8 and rounded, its mark, name and city over it; with none, the same on the paper. */
  .bkhero{display:block;position:relative;margin-bottom:36px;}
  .bkhero.bkhasimg{aspect-ratio:21/8;border-radius:20px;overflow:hidden;background:var(--paper-2);}
  .bkheroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  /* The gallery cover's own scrim under its title (gallery.html #hero .ht), so the name and the town read on any sky. */
  .bkhero.bkhasimg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%, rgba(18,17,14,.72));}
  .bkwho{display:flex;align-items:center;gap:14px;color:var(--ink);}
  .bkhero.bkhasimg .bkwho{position:absolute;left:28px;bottom:24px;z-index:1;color:#FFFFFF;}
  .bkmono{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:100%;background:var(--ink);color:var(--paper);font-family:var(--font-display);font-weight:600;font-size:15px;}
  .bkhero.bkhasimg .bkmono{background:#FFFFFF;color:#171613;}
  .bkherologo{flex:none;height:44px;width:auto;max-width:160px;object-fit:contain;}
  .bkwhot{display:flex;flex-direction:column;}
  .bkwhon{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-0.01em;}
  .bkwhoc{font-size:14px;opacity:.85;}
  /* Book a shoot, and who it is for on its right. */
  .bktitle{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:8px;}
  .bkh1{font-size:40px;line-height:1.1;}
  .bkforbox{display:flex;align-items:baseline;gap:6px;}
  .bkforbox .bkfor{margin-top:0;font-size:15px;}
  .bkforbox .bkfor::after{content:".";}
  .bkforbox .bknotme{min-height:0;font-size:15px;color:var(--ink);}
  .bknotlong{display:none;}
  .bksec{margin-top:40px;}
  .bklabel{margin-bottom:12px;font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--ink-faint);}
  /* Packages: cards side by side, up to four a row, each saying what comes with it. */
  .bkpkgs{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
  .bkopt{justify-content:flex-start;gap:10px;min-height:180px;padding:18px 44px 20px 18px;border-radius:14px;}
  .bkpn{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.25;color:var(--ink);}
  .bkprice{margin-top:0;font-size:15px;font-weight:400;}
  .bkpab{display:block;margin-top:0;font-size:14px;line-height:1.55;-webkit-line-clamp:unset;overflow:visible;}
  .bktick{top:18px;right:16px;width:18px;height:18px;}
  .bksize .bkopt{min-height:0;}
  /* Add-ons: tick boxes, three a row; twilight is the first of them. */
  .bkadds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:none;border:0;border-radius:0;}
  .bkaddon{gap:14px;min-height:76px;padding:14px 18px;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;text-align:left;}
  .bkaddon + .bkaddon{border-top:1px solid var(--hairline);}
  .bkaddon.on{box-shadow:var(--on);}
  .bkbox{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;box-shadow:var(--box);}
  .bkbox .bktick{position:static;width:14px;height:14px;stroke:var(--paper);}
  .bkaddon.on .bkbox{background:var(--ink);box-shadow:var(--on);}
  .bkaddon.on .bkbox .bktick{opacity:1;transform:none;}
  .bkaddw{flex:1;padding:0;}
  .bkaddn{font-size:16px;}
  .bkaddab{font-size:14px;}
  .bkaddp{font-size:15px;color:var(--ink);}
  .bkaddon .bktg{display:none;}
  .bkstep{grid-column:1 / -1;}
  /* Address and Unit on one row, the unit's name inside its field. */
  .bkrow2{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;align-items:start;}
  .bkaddr .bkunit{position:relative;margin-top:0;max-width:none;}
  .bkunit label{position:absolute;top:9px;left:18px;margin:0;font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);}
  .bkfield{min-height:56px;padding:15px 18px;border-radius:14px;}
  .bkunit .bkfield{padding-top:24px;padding-bottom:6px;}
  textarea.bkfield{min-height:88px;}
  /* When: two whole weeks under the weekday names, the arrows beside the days they hold. */
  .bkwhensec{position:relative;}
  .bkmonth,.bkpages{display:none;}
  .bkweeks{display:flex;align-items:center;gap:8px;position:absolute;top:-10px;right:0;font-size:15px;color:var(--ink);}
  .bkarrow{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--hairline);border-radius:100%;color:var(--ink);font-size:16px;line-height:1;}
  .bkarrow[aria-disabled="true"]{opacity:.35;}
  .bkdows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding-bottom:6px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);text-align:center;}
  .bkdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;overflow:visible;padding:0;margin:0;}
  .bkday{height:58px;gap:2px;border-radius:12px;}
  .bkdw{display:none;}
  .bkdd{font-size:19px;}
  .bkdn{display:block;font-size:12px;line-height:1.2;color:var(--ink-muted);}
  .bkday.shut{background:transparent;border:0;}
  .bkday.shut .bkdd{font-weight:500;color:var(--ink-faint);}
  .bkday.shut .bkdn{color:var(--ink-faint);}
  .bktimes{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px;}
  .bktime{min-height:52px;border-radius:12px;font-size:16px;font-weight:400;}
  .bktw{border-radius:12px;padding:12px 18px;}
  .bknofit{margin-top:14px;font-size:15px;}
  .bknofit a{color:var(--ink);}
  /* Access: one segmented control, the code and the note under it. */
  .bkseg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--hairline);border-radius:12px;}
  .bkseg1{min-height:44px;padding:0 18px;background:transparent;border:0;border-radius:9px;font-size:15px;font-weight:400;color:var(--ink-muted);}
  .bkseg1.on{background:var(--surface);}
  .bkpjkind{display:inline-flex;}
  /* The order: a card in the column, its lines, the total and how it is paid, the press, until when it can change. */
  .bkbar{position:static;margin:44px 0 0;padding:24px 26px;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;}
  .bksum{display:block;}
  .bksl{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:15px;color:var(--ink-muted);}
  .bksl b{font-weight:400;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;}
  .bktot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;padding-top:16px;border-top:1px solid var(--hairline);font-size:14px;color:var(--ink-muted);}
  .bktot b{font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .bkbar .bknotice:not(:empty){margin-top:14px;}
  .bkpolicy{margin-top:14px;}
  .bkagreed{margin-top:14px;font-size:15px;}
  .bkfee{margin:14px 0 0;font-size:14px;text-align:left;}
  .bkfee + .bkpolicy{margin-top:6px;}
  /* The terms' sheet a page in the middle of the screen; the terms' page a column of its own. */
  .bksheetin.bkdoc{margin:auto 0;padding:28px 32px 32px;border:1px solid var(--hairline);border-radius:16px;}
  .bkwrap.bkdoc{padding:56px 24px 96px;}
  .bkpress{min-height:58px;margin-top:20px;border-radius:14px;font-size:17px;}
  .bkunder,.bkincl{display:none;}
  .bkchg{display:block;margin-top:12px;text-align:center;font-size:14px;color:var(--ink-muted);}
  .bkproj{margin-top:40px;text-align:center;font-size:15px;}
  /* Every card answers a pointer. */
  @media (hover:hover){
    .bkopt:hover,.bkaddon:hover,.bkday:not(.shut):hover,.bktime:hover,.bktw:hover{background:var(--lift);}
    .bkseg1:not(.on):hover{color:var(--ink);}
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
}