/* Two independent service funnels. These styles also bridge the original suites. */
[hidden] { display: none !important; }
html[data-suite=blueprint] { --book-paper:#12161b; --book-ink:#edf0ee; --book-soft:#20272c; --book-accent:#f2c629; --book-on:#12161b; --book-line:#465157; }
html[data-suite=harbor] { --book-paper:#f7efec; --book-ink:#1c2438; --book-soft:#efdcd5; --book-accent:#c23b57; --book-on:#f7efec; --book-line:#cbb7b4; }
html:is([data-suite=grove],[data-suite=rally],[data-suite=atelier],[data-suite=confetti]) { --book-paper:var(--paper); --book-ink:var(--ink); --book-soft:var(--soft); --book-accent:var(--accent); --book-on:var(--on-accent); --book-line:var(--line); }
.journey-controls { display:flex;align-items:center;gap:10px;font:12px/1.4 system-ui,sans-serif; }
.journey-controls select { font:inherit;padding:7px 10px;max-width:190px;background:#f4f2eb;color:#292a24;border:1px solid #aaa; }
.spec > .journey-controls { padding:0 var(--gut) 12px;max-width:var(--page);margin:auto; }
.booking-screen { background:var(--book-paper);color:var(--book-ink);font-family:var(--body); }
.booking-screen * { box-sizing:border-box; }
.booking-nav { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 6vw;border-bottom:1px solid var(--book-line); }
.booking-nav a { color:inherit;text-decoration:none; }
.booking-brand { font:400 28px/1 var(--display); }
.booking-nav > a:last-child { font-size:12px;text-underline-offset:5px;text-decoration:underline; }
.booking-kicker { font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 24px;font-weight:600; }
.booking-screen h1 { font:400 clamp(52px,6.6vw,98px)/1.03 var(--display);letter-spacing:-.035em;margin:0 0 28px;text-wrap:balance; }
.booking-screen h2 { font:400 clamp(32px,4vw,58px)/1.1 var(--display);letter-spacing:-.025em;margin:0 0 22px; }
.booking-lede { font-size:clamp(17px,1.5vw,21px);line-height:1.65;max-width:600px;margin:0 0 30px; }
.booking-hero { padding:70px 6vw 85px;display:grid;grid-template-columns:1.2fr 1fr;gap:7vw;align-items:center; }
.booking-button { display:inline-flex;justify-content:space-between;align-items:center;gap:26px;padding:18px 25px;background:var(--book-accent);color:var(--book-on);border:1px solid var(--book-accent);font:600 15px/1.3 var(--body);text-decoration:none;cursor:pointer;transition:transform 250ms cubic-bezier(.16,1,.3,1); }
.booking-button:hover { transform:translateY(-2px); }
.booking-button:disabled { opacity:.55;cursor:not-allowed;transform:none; }
.booking-screen :is(a,button,input,select,textarea):focus-visible { outline:3px solid var(--book-accent);outline-offset:4px; }
.booking-screen input, .booking-screen select, .booking-screen textarea { font:inherit; }
.session-meta { display:flex;gap:20px;flex-wrap:wrap;font-size:12px;padding:20px 0;margin:0 0 25px;border-top:1px solid var(--book-line);border-bottom:1px solid var(--book-line); }
.booking-fine { font-size:12px;line-height:1.65;margin:16px 0;max-width:660px; }
.session-art { position:relative;min-height:470px;background:var(--book-soft);padding:45px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden; }
.session-art .session-title { font:400 clamp(46px,5vw,80px)/1.05 var(--display);max-width:370px;position:relative;z-index:1; }
.session-art .session-caption { font-size:11px;text-transform:uppercase;letter-spacing:.12em;position:relative;z-index:1; }
.session-shape { position:absolute;width:240px;height:240px;border:1px solid var(--book-ink);border-radius:50%;bottom:-55px;right:-35px;opacity:.3; }
.booking-section { padding:80px 6vw;border-top:1px solid var(--book-line); }
.session-agenda { display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:45px; }
.session-point { border-top:1px solid var(--book-line);padding-top:22px; }
.session-point h3 { font:400 28px/1.2 var(--display);margin:12px 0; }
.session-point p { font-size:15px;line-height:1.65;max-width:370px; }
.booking-layout { display:grid;grid-template-columns: .8fr 1.2fr;gap:6vw;padding:70px 6vw;align-items:start; }
.booking-layout h1 { font-size:clamp(44px,5vw,74px); }
.booking-panel { padding:35px;background:var(--book-soft);min-width:0; }
.booking-panel h2 { font-size:32px; }
.booking-panel fieldset { border:0;padding:0;margin:25px 0;min-width:0; }
.booking-panel legend { font-size:13px;margin-bottom:14px;font-weight:600; }
.booking-panel .field-label { display:block;font-size:13px;margin:18px 0 8px; }
.booking-panel :is(input:not([type=radio]):not([type=checkbox]),textarea,select) { width:100%;background:var(--book-paper);color:var(--book-ink);border:1px solid var(--book-line);padding:12px;border-radius:0; }
.booking-panel textarea { resize:vertical; }
.demo-dates { display:flex;gap:8px;flex-wrap:wrap; }
.demo-dates button { flex:1;min-width:80px;padding:13px 8px;background:transparent;color:var(--book-ink);border:1px solid var(--book-line);font:inherit;cursor:pointer; }
.demo-dates button[aria-pressed=true] { background:var(--book-ink);color:var(--book-paper); }
.demo-slots { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.slot-choice { position:relative;cursor:pointer; }
.slot-choice input { position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer; }
.slot-choice span { display:block;text-align:center;padding:12px;border:1px solid var(--book-line);font-size:14px; }
.slot-choice input:checked + span { background:var(--book-accent);color:var(--book-on);border-color:var(--book-accent); }
.slot-choice input:focus-visible + span { outline:3px solid var(--book-accent);outline-offset:3px; }
.booking-panel .booking-button { width:100%;margin-top:24px; }
.booking-panel .selected-time { font-size:13px;border-left:2px solid var(--book-accent);padding-left:12px;margin-top:22px; }
.session-receipt { padding:32px 0;border-top:1px solid var(--book-line);border-bottom:1px solid var(--book-line);margin:26px 0; }
.session-receipt dl { display:grid;grid-template-columns:1fr auto;gap:14px;font-size:14px;margin:0; }
.session-receipt dd { margin:0;text-align:right; }
.booking-success { padding:90px 6vw;max-width:1050px;margin:auto;min-height:650px; }
.booking-success .booking-lede { max-width:700px; }
.booking-summary { padding:24px;background:var(--book-soft);margin:28px 0;line-height:1.8;font-size:15px;max-width:650px; }
.booking-inline-link { display:inline-block;margin-top:22px;font-size:14px;color:inherit;text-underline-offset:5px; }
.booking-screen .booking-note { font:12px/1.6 var(--body);border-top:1px solid var(--book-line);margin:0;padding:22px 6vw; }
/* Layouts are intentionally different, beyond fonts and colour. */
html[data-suite=blueprint] .booking-screen h1 { text-transform:uppercase;line-height:1.02;letter-spacing:0; }
html[data-suite=blueprint] .booking-hero { grid-template-columns:1.5fr .8fr; }
html[data-suite=blueprint] .session-art { background:repeating-linear-gradient(135deg,transparent 0 16px,#ffffff05 16px 32px),var(--book-soft);border:1px solid var(--book-line); }
html[data-suite=blueprint] .session-meta { font-family:var(--mono); }
html[data-suite=blueprint] .session-shape { border-radius:0;rotate:45deg; }
html[data-suite=harbor] .booking-hero { grid-template-columns:1fr 1.15fr; }
html[data-suite=harbor] .session-art { border-radius:200px 200px 25px 25px;padding-top:110px;text-align:center;align-items:center; }
html[data-suite=harbor] .booking-button, html[data-suite=harbor] .demo-dates button { border-radius:50px; }
html[data-suite=harbor] .booking-panel { border-radius:28px; }
html[data-suite=grove] .booking-hero { grid-template-columns:1fr;max-width:1050px;margin:auto;text-align:center;padding-bottom:55px; }
html[data-suite=grove] .booking-hero .booking-lede { margin-left:auto;margin-right:auto; }
html[data-suite=grove] .booking-hero .session-meta { justify-content:center; }
html[data-suite=grove] .session-art { min-height:210px;border-radius:100px 100px 0 0;text-align:left;flex-direction:row;align-items:center;gap:35px; }
html[data-suite=grove] .session-art .session-title { font-size:46px; }
html[data-suite=grove] .session-shape { background:var(--book-accent);border:0;border-radius:0 100% 0 100%;rotate:-30deg;width:180px;height:260px; }
html[data-suite=grove] .booking-layout { grid-template-columns:1fr;max-width:1050px;margin:auto;gap:30px; }
html[data-suite=grove] .booking-layout > aside { display:grid;grid-template-columns:1fr 1fr;gap:15px 40px; }
html[data-suite=grove] .booking-layout > aside .booking-kicker { grid-column:1/-1; }
html[data-suite=rally] .booking-hero { grid-template-columns:1.4fr .8fr;align-items:stretch; }
html[data-suite=rally] .booking-screen h1 { font-weight:800;line-height:.95; }
html[data-suite=rally] .session-art { background:var(--book-accent);color:var(--book-on);rotate:3deg;min-height:430px; }
html[data-suite=rally] .session-art .session-title { font-weight:800;text-transform:uppercase; }
html[data-suite=rally] .booking-button { box-shadow:5px 5px 0 var(--book-ink); }
html[data-suite=rally] .booking-panel { border:2px solid var(--book-ink);box-shadow:8px 8px 0 var(--book-ink); }
html[data-suite=rally] .booking-layout { grid-template-columns:1.2fr .8fr; }
html[data-suite=rally] .booking-layout > aside { order:2; }
html[data-suite=rally] .session-meta { border-width:2px; }
html[data-suite=atelier] .booking-hero { grid-template-columns:1.4fr 1fr;min-height:750px;align-items:end; }
html[data-suite=atelier] .booking-brand { font:500 12px var(--body);letter-spacing:.2em; }
html[data-suite=atelier] .session-art { min-height:520px;padding:40px;background:transparent;border-left:1px solid var(--book-line); }
html[data-suite=atelier] .session-art .session-title { font-size:80px;font-style:italic; }
html[data-suite=atelier] .session-shape { width:200px;height:290px;border-radius:50%;background:linear-gradient(110deg,var(--book-soft),var(--book-paper));opacity:1;right:10%;bottom:40px;border:0; }
html[data-suite=atelier] .booking-button { background:transparent;color:var(--book-ink);border:0;border-bottom:1px solid var(--book-ink);padding:15px 0;min-width:220px;font-weight:400; }
html[data-suite=atelier] .booking-panel { background:transparent;border-top:1px solid var(--book-ink);padding:30px 0; }
html[data-suite=atelier] .booking-panel .booking-button { background:var(--book-accent);color:var(--book-on);padding:18px; }
html[data-suite=atelier] .session-agenda { grid-template-columns:1fr;max-width:850px; }
html[data-suite=atelier] .session-point { display:grid;grid-template-columns:40px 1fr 1fr;gap:30px;align-items:baseline; }
html[data-suite=confetti] .booking-hero { grid-template-columns:1.25fr 1fr; }
html[data-suite=confetti] .session-art { rotate:-5deg;border:2px solid var(--book-ink);box-shadow:7px 8px 0 var(--book-ink);min-height:400px;overflow:visible; }
html[data-suite=confetti] .session-art::before { content:'';position:absolute;top:-17px;left:38%;width:100px;height:35px;background:#bec49ccc;rotate:8deg; }
html[data-suite=confetti] .session-shape { border-radius:0;width:125px;height:125px;bottom:-25px;right:-20px;background:var(--book-paper);opacity:1;rotate:15deg;box-shadow:3px 3px 0 var(--book-ink); }
html[data-suite=confetti] .booking-button { border:2px solid var(--book-ink);border-radius:40px;box-shadow:3px 4px 0 var(--book-ink); }
html[data-suite=confetti] .booking-panel { border:2px solid var(--book-ink);border-radius:20px;box-shadow:7px 8px 0 var(--book-ink); }
html[data-suite=confetti] .booking-layout { grid-template-columns:.85fr 1.15fr; }
html[data-suite=confetti] .session-point:nth-child(2) { rotate:2deg; }
@media(max-width:760px) {
  .booking-nav { padding:24px 6vw; }.booking-brand { font-size:24px; }
  .booking-screen .booking-hero, .booking-screen .booking-layout { grid-template-columns:1fr!important;gap:35px;padding:45px 6vw 60px;min-height:0!important; }
  .booking-screen h1 { font-size:clamp(44px,11.8vw,65px)!important; }
  .booking-screen .session-art { min-height:330px!important;rotate:0deg; }
  .booking-screen .session-art .session-title { font-size:48px!important; }
  .booking-screen .booking-layout > aside { order:0;display:block!important; }
  .booking-panel { padding:24px; }.demo-slots { grid-template-columns:repeat(2,1fr); }
  .booking-section { padding:55px 6vw; }.session-agenda { grid-template-columns:1fr;gap:20px; }
  .booking-screen .session-point { display:block!important;rotate:0deg; }
  .booking-screen .session-art { max-width:100%;padding:35px; }
  html[data-suite=grove] .session-art { flex-direction:column;align-items:flex-start;justify-content:space-between; }
  html[data-suite=confetti] .session-art { margin:0 12px 20px 0; }
  .booking-success { padding:55px 6vw; }.session-receipt dl { grid-template-columns:1fr;gap:7px; }.session-receipt dd { text-align:left;margin-bottom:10px; }
}

/* Size artwork lettering to its panel, including the narrow poster variants. */
.session-art { container-type: inline-size; }
.booking-screen .session-art .session-title { font-size:clamp(30px,10cqw,52px)!important; }

html[data-suite=grove] .session-art { display:block;min-height:280px; }
html[data-suite=grove] .session-art .session-title { display:block;max-width:70%;margin:20px 0 35px;line-height:1; }
html[data-suite=grove] .session-art .session-caption:last-child { position:absolute;bottom:25px;left:45px;max-width:60%;font-size:10px; }

/* Confetti's sticky note: lettering sized to fill the note, not float in it.
   Captions stay clear of the small square pinned over the bottom corner. */
html[data-suite=confetti] .session-art { padding:50px 55px 60px; }
html[data-suite=confetti] .session-art .session-caption { font-size:14px;letter-spacing:.1em;line-height:1.5;max-width:72%; }
@media(min-width:761px) { html[data-suite=confetti] .booking-screen .session-art .session-title { font-size:clamp(38px,16cqw,72px)!important;max-width:none;line-height:1; } }

/* ── Live booking form in steps (booking-live.js) ───────────────────── */
.live-step[hidden], .live-nav [hidden] { display: none !important; }
.live-progress { margin: 4px 0 22px; }
.live-progress p { margin: 0; font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.live-progress [data-count] { opacity: .7; }
.live-progress strong { font-weight: 600; }
.live-bar { height: 4px; margin-top: 10px; background: color-mix(in srgb, var(--book-ink) 12%, transparent); border-radius: 99px; overflow: hidden; }
.live-bar i { display: block; height: 100%; width: 0; background: var(--book-accent); border-radius: inherit; transition: width .3s ease; }
.live-progress .live-chosen { margin-top: 10px; font-size: 13px; opacity: .8; }
.live-step .live-field { margin-bottom: 4px; }
.live-nav { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.live-nav .booking-button { flex: 1; width: auto !important; margin-top: 0 !important; justify-content: center; text-align: center; }
.live-back { background: none; border: 0; padding: 12px 4px; color: inherit; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .live-bar i { transition: none; } }

/* Booking questions with tick boxes or a single choice: the box sits beside
   its words. The full-width text-field rule above used to catch checkboxes,
   stretching each one across its row with the words pushed underneath. */
.booking-panel .live-choice { display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:8px; }
.booking-panel .live-choice label { display:flex;align-items:flex-start;gap:10px;line-height:1.5;cursor:pointer; }
.booking-panel .live-choice input { flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;accent-color:var(--book-ink); }
