/* The Memorable Brief: the booking funnel (/book, where /find-out-more and /contact land) as a
   one-question-at-a-time intake. Desktop is a split screen: a sticky brand canvas (photo + blue
   headline plate) on the left, the questionnaire on the right. Tablet and phone stack the canvas
   as a short strip above the first question. Spec: design_handoff_memorable_brief/README.md.
   The site's nav is a fixed 80px bar, so every "100vh" here is 100vh minus that. */
.mb{ --blue:#2c7ef4; --blue-h:#1f6fe8; --ink:#0f172a; --body:#334155; --muted:#64748b; --ph:#94a3b8; --line:#e2e8f0; --line-h:#cbd5e1;
  --soft:#f7faff; --row-h:#f8fafc; --sel-h:#eef5ff; --ghost-h:#f1f5f9; --err:#b42318; --green:#16b364; --nav:80px;
  --ring-row:rgba(44,126,244,.18); --ring-input:rgba(44,126,244,.16); --ring-btn:rgba(44,126,244,.3); --ring-check:rgba(44,126,244,.22);
  --ease-out:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; color:var(--body); background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  width:100%; display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); align-items:start; min-height:calc(100vh - var(--nav)); }
.mb *{ box-sizing:border-box; }
/* :where keeps these resets at class specificity so the component rules below win by order */
.mb :where(h1,h2,p,dl,dd){ margin:0; }
.mb :where(a){ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.mb :where(a):hover{ color:var(--blue); }
.mb b,.mb strong{ color:inherit; }

/* Brand canvas */
.mb-canvas{ position:sticky; top:var(--nav); height:calc(100vh - var(--nav)); height:calc(100dvh - var(--nav)); min-width:0; overflow:hidden; background:var(--ink); }
.mb-media{ position:absolute; inset:0; }
.mb-media img,.mb-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.mb-media video{ pointer-events:none; }
.mb-media video[hidden]{ display:none; }

/* Questionnaire column */
.mb-side{ min-width:0; min-height:calc(100vh - var(--nav)); padding:clamp(36px,6vh,72px) clamp(32px,5vw,88px) 96px; display:flex; flex-direction:column; }
.mb-col{ width:100%; max-width:600px; margin:0 auto; flex:1; display:flex; flex-direction:column; }

/* Band: back, counter, progress */
.mb-band{ position:static; z-index:3; background:#fff; }
.mb-band-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; }
.mb-back{ display:inline-flex; align-items:center; gap:4px; height:36px; padding:0 12px 0 6px; margin-left:-8px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; transition:background-color .15s ease,color .15s ease; }
.mb-back:hover{ background:var(--ghost-h); color:var(--ink); }
.mb-back:focus-visible{ box-shadow:0 0 0 3px var(--ring-btn); }
.mb-back[hidden]{ display:none; }
.mb-back svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mb-count{ margin-left:auto; font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.mb-track{ margin-top:10px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; }
.mb-fill{ height:100%; width:0; background:var(--blue); border-radius:2px; transition:width .55s var(--ease-out); }

/* A question */
.mb-step{ display:flex; flex-direction:column; flex:0 0 auto; margin-top:40px; }
.mb-form{ margin:0; display:flex; flex-direction:column; flex:0 0 auto; }
.mb-form-body{ flex:0 0 auto; }
.mb-screen{ display:none; }
.mb-screen.is-on{ display:block; }
.mb-eyebrow{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.mb-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.mb-h1{ margin:14px 0 0; outline:none; font-size:clamp(32px,2.9vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.08; color:var(--ink); text-wrap:balance; max-width:20ch; }
.mb-sub{ margin:12px 0 0; font-size:17px; line-height:1.5; color:var(--muted); text-wrap:pretty; }
.mb-sub[hidden]{ display:none; }
.mb-alert{ margin:0 0 20px; padding:12px 16px; border:1px solid #fecaca; border-radius:12px; background:#fff; color:var(--err); font-size:14px; font-weight:500; }

/* Answer rows */
.mb-answers{ display:flex; flex-direction:column; gap:10px; margin-top:32px; }
.mb-answers[hidden]{ display:none; }
.mb-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:64px; padding:18px 22px; margin:0; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:inset 0 0 0 0 transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .12s ease; }
.mb-row:hover{ border-color:var(--line-h); background:var(--row-h); }
.mb-row:active{ transform:scale(.985); }
.mb-row:focus-visible{ box-shadow:inset 0 0 0 0 transparent,0 0 0 4px var(--ring-row); }
.mb-row[aria-checked="true"]{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); background:var(--soft); }
.mb-row[aria-checked="true"]:hover{ border-color:var(--blue); background:var(--sel-h); }
.mb-row[aria-checked="true"]:focus-visible{ box-shadow:inset 0 0 0 1px var(--blue),0 0 0 4px var(--ring-row); }
.mb-row-label{ font-size:18px; font-weight:500; letter-spacing:-.012em; line-height:1.25; }
.mb-row[aria-checked="true"] .mb-row-label{ font-weight:600; }
.mb-mark{ flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ph); background:transparent; display:grid; place-items:center; transition:background-color .18s ease,border-color .18s ease; }
.mb-row[role="checkbox"] .mb-mark{ border-radius:6px; }
.mb-mark svg{ width:12px; height:12px; fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.4); transition:transform .28s var(--spring),opacity .16s ease; }
.mb-row[aria-checked="true"] .mb-mark{ border-color:var(--blue); background:var(--blue); }
.mb-row[aria-checked="true"] .mb-mark svg{ opacity:1; transform:scale(1); }
.mb-error{ margin:12px 0 0; font-size:13px; color:var(--err); }
.mb-error[hidden]{ display:none; }

/* Dropdown variant of the qualifying question */
.mb-selwrap{ position:relative; max-width:420px; margin-top:32px; }
.mb-selwrap[hidden]{ display:none; }
.mb-select{ appearance:none; -webkit-appearance:none; width:100%; height:58px; padding:0 48px 0 18px; border-radius:14px; border:1px solid var(--line); font:inherit; font-size:17px; color:var(--ink); background:#fff; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease; }
.mb-select.is-empty{ color:var(--muted); }
.mb-select:hover{ border-color:var(--ph); }
.mb-select:focus-visible{ border-color:var(--blue); box-shadow:0 0 0 4px var(--ring-input); }
.mb-select[aria-invalid="true"]{ border-color:var(--err); }
.mb-selwrap svg{ position:absolute; right:18px; top:50%; width:18px; height:18px; transform:translateY(-50%); pointer-events:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Contact fields */
.mb-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:20px 16px; margin-top:32px; }
.mb-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.mb-field.is-wide{ grid-column:1 / -1; }
.mb-field label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; font-weight:500; line-height:1.3; color:var(--ink); }
.mb-opt{ color:var(--muted); font-weight:400; font-size:13px; }
.mb-input{ height:54px; padding:0 16px; border-radius:12px; border:1px solid var(--line); font:inherit; font-size:16px; line-height:1.4; color:var(--ink); background:#fff; width:100%; transition:border-color .15s ease,box-shadow .15s ease; }
.mb-input::placeholder{ color:var(--ph); opacity:1; }
.mb-input:hover{ border-color:var(--ph); }
.mb-input:focus-visible{ border-color:var(--blue); box-shadow:0 0 0 4px var(--ring-input); }
.mb-input[aria-invalid="true"]{ border-color:var(--err); }
textarea.mb-input{ display:block; height:auto; min-height:96px; padding:14px 16px; line-height:1.5; resize:vertical; }
.mb-ferr{ font-size:13px; color:var(--err); }
.mb-ferr[hidden]{ display:none; }
.mb-consent{ margin-top:24px; display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; align-items:start; }
.mb-check{ position:relative; display:block; width:22px; height:22px; margin-top:1px; }
.mb-check input{ position:absolute; inset:0; width:22px; height:22px; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; }
.mb-check-box{ position:absolute; inset:0; border-radius:6px; border:1.5px solid var(--ph); background:#fff; display:grid; place-items:center; transition:background-color .18s ease,border-color .18s ease,box-shadow .15s ease; }
.mb-check-box svg{ width:13px; height:13px; fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.4); transition:transform .28s var(--spring),opacity .16s ease; }
.mb-check input:checked + .mb-check-box{ background:var(--blue); border-color:var(--blue); }
.mb-check input:checked + .mb-check-box svg{ opacity:1; transform:scale(1); }
.mb-check input:focus-visible + .mb-check-box{ box-shadow:0 0 0 4px var(--ring-check); }
.mb-check input[aria-invalid="true"] + .mb-check-box{ border-color:var(--err); }
.mb-consent label{ font-size:13px; line-height:1.55; color:var(--muted); cursor:pointer; }
.mb-consent .mb-ferr{ display:block; margin-top:6px; }
.mb-consent .mb-ferr[hidden]{ display:none; }
.mb-hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Actions */
.mb-actions{ position:static; bottom:0; z-index:2; margin-top:36px; padding:0; background:#fff; }
.mb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px; min-width:176px; width:auto; padding:0 24px 0 30px; border-radius:999px; border:0; background:var(--blue); color:#fff; font:inherit; font-size:16px; font-weight:600; line-height:1; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background-color .15s ease,transform .12s ease,opacity .15s ease; }
.mb-btn:hover{ background:var(--blue-h); color:#fff; text-decoration:none; }
.mb-btn:active{ transform:scale(.98); }
.mb-btn:focus-visible{ box-shadow:0 0 0 4px var(--ring-btn); }
.mb-btn:disabled{ opacity:.85; cursor:default; }
.mb-btn[hidden]{ display:none; }
.mb-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mb-spin{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:mbSpin .8s linear infinite; flex:none; }
.mb-btn.is-busy .mb-spin{ display:inline-block; }
.mb-btn.is-busy svg{ display:none; }
@keyframes mbSpin{ to{ transform:rotate(360deg); } }
.mb-btn-2{ height:52px; min-width:0; padding:0 24px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:15px; font-weight:500; transition:background-color .15s ease,border-color .15s ease; }
.mb-btn-2:hover{ background:var(--soft); border-color:var(--ph); color:var(--ink); }
.mb-btn-2:focus-visible{ box-shadow:0 0 0 4px var(--ring-check); }
.mb-hint{ margin:0; font-size:13px; color:var(--muted); line-height:56px; }
.mb-hint[hidden]{ display:none; }
.mb-note{ margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }

/* Next steps: scheduler, summary */
.mb-sched{ margin-top:32px; border:1px solid var(--line); border-radius:16px; background:var(--soft); min-height:360px; padding:24px; }
.mb-loading{ min-height:312px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--muted); font-size:14px; font-weight:500; }
.mb-loading[hidden]{ display:none; }
.mb-loader{ width:28px; height:28px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--blue); animation:mbSpin .8s linear infinite; }
.mb-tz{ font-size:13px; color:var(--muted); margin:0 0 16px; }
.mb-tz b{ font-weight:600; color:var(--ink); }
.mb-two{ display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:24px; align-items:start; }
.mb-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mb-cal-title{ font-size:14px; font-weight:600; color:var(--ink); }
.mb-cal-nav{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; font:inherit; font-size:18px; line-height:1; transition:border-color .15s ease; }
.mb-cal-nav:hover:not(:disabled){ border-color:var(--ph); }
.mb-cal-nav:disabled{ color:var(--line-h); cursor:default; }
.mb-cal-nav:focus-visible{ box-shadow:0 0 0 4px var(--ring-check); }
.mb-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mb-dow{ text-align:center; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-bottom:6px; }
.mb-day{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:13px; font-weight:500; color:var(--line-h); border:0; background:transparent; padding:0; font-family:inherit; }
.mb-day.is-avail{ color:var(--blue); background:#fff; border:1px solid var(--line); cursor:pointer; transition:border-color .15s ease,background-color .15s ease; }
.mb-day.is-avail:hover{ border-color:var(--blue); }
.mb-day.is-avail:focus-visible{ box-shadow:0 0 0 3px var(--ring-row); }
.mb-day.is-sel,.mb-day.is-sel:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.mb-times-head{ font-size:14px; font-weight:600; color:var(--ink); margin:0 0 10px; }
.mb-times{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mb-times-empty{ grid-column:1 / -1; color:var(--muted); font-size:13px; padding:8px 0; }
.mb-time{ min-height:44px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-weight:500; font-size:14px; padding:9px 6px; border-radius:12px; cursor:pointer; transition:border-color .15s ease,background-color .15s ease,color .15s ease; }
.mb-time:hover{ border-color:var(--blue); }
.mb-time:focus-visible{ box-shadow:0 0 0 3px var(--ring-row); }
.mb-time.is-sel,.mb-time.is-sel:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.mb-confirm{ margin-top:20px; }
.mb-confirm .mb-btn:disabled{ background:var(--line); color:var(--muted); opacity:1; }
.mb-frame{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.mb-frame iframe{ display:block; width:100%; border:0; background:#fff; height:min(760px,calc(100dvh - 200px)); min-height:440px; }
.mb-summary{ margin-top:36px; border-top:1px solid var(--line); padding-top:24px; }
.mb-summary[hidden]{ display:none; }
.mb-label{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.mb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:18px 24px; margin-top:16px; }
.mb-grid dt{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.mb-grid dd{ font-size:15px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.mb-final-actions{ margin-top:32px; padding-bottom:40px; display:flex; gap:12px; flex-wrap:wrap; }

/* Booked */
.mb-when{ display:inline-block; margin-top:24px; background:var(--blue); color:#fff; font-weight:600; font-size:17px; padding:12px 18px; border-radius:12px; }
.mb-join{ margin-top:16px; font-size:15px; overflow-wrap:anywhere; }
.mb-addcal{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.mb-body{ margin-top:24px; font-size:16px; line-height:1.55; color:var(--body); max-width:56ch; text-wrap:pretty; }
.mb-small{ margin-top:10px; font-size:14px; color:var(--muted); }
.mb-backlink{ display:inline-flex; align-items:center; min-height:44px; margin-top:12px; color:var(--ink); font-weight:500; }

/* Desktop contact screen: tightened so the whole question fits a laptop viewport without scrolling.
   Name, email and phone share one row, company and website the next, the note runs full width. */
@media (min-width:900px){
  .mb[data-screen="contact"] .mb-side{ padding-top:clamp(24px,4vh,48px); padding-bottom:40px; }
  .mb[data-screen="contact"] .mb-step{ margin-top:28px; }
  .mb[data-screen="contact"] .mb-fields{ margin-top:20px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px 16px; }
  .mb[data-screen="contact"] .mb-field{ grid-column:span 3; gap:6px; }
  .mb[data-screen="contact"] .mb-field.is-third{ grid-column:span 2; }
  .mb[data-screen="contact"] .mb-field.is-wide{ grid-column:1 / -1; }
  .mb[data-screen="contact"] .mb-field label{ font-size:13px; }
  .mb[data-screen="contact"] .mb-input{ height:48px; }
  .mb[data-screen="contact"] textarea.mb-input{ min-height:48px; padding:12px 16px; }
  .mb[data-screen="contact"] .mb-consent{ margin-top:16px; }
  .mb[data-screen="contact"] .mb-actions{ margin-top:20px; }
}
/* Short laptop viewports (a 768px screen minus browser chrome): tighter still */
@media (min-width:900px) and (max-height:740px){
  .mb[data-screen="contact"] .mb-side{ padding-top:20px; }
  .mb[data-screen="contact"] .mb-step{ margin-top:18px; }
  .mb[data-screen="contact"] .mb-h1{ font-size:34px; margin-top:10px; }
  .mb[data-screen="contact"] .mb-sub{ margin-top:8px; }
  .mb[data-screen="contact"] .mb-fields{ margin-top:16px; }
  .mb[data-screen="contact"] .mb-consent{ margin-top:12px; }
  .mb[data-screen="contact"] .mb-actions{ margin-top:14px; }
}

/* Tablet: one column, the canvas becomes a 340px strip */
@media (max-width:899px){
  .mb{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .mb-canvas{ position:relative; top:auto; height:340px; }
  .mb-side{ min-height:0; padding:8px 32px 72px; }
  .mb-band{ padding-top:24px; }
  .mb-step{ margin-top:32px; }
  .mb-h1{ font-size:34px; }
}
/* Phone: a 272px strip, sticky band under the nav, sticky full-width button at the bottom */
@media (max-width:639px){
  .mb-canvas{ height:272px; }
  .mb-side{ padding:0 20px; }
  .mb-band{ position:sticky; top:var(--nav); padding:14px 0 12px; }
  .mb-step{ margin-top:24px; flex:1 1 auto; }
  .mb-form,.mb-form-body{ flex:1 1 auto; }
  .mb-h1{ font-size:clamp(26px,7vw,30px); }
  .mb-sub{ font-size:16px; }
  .mb-answers,.mb-fields,.mb-selwrap{ margin-top:22px; }
  .mb-row{ min-height:58px; padding:15px 18px; }
  .mb-row-label{ font-size:16px; }
  .mb-actions{ position:sticky; bottom:0; margin-top:20px; padding:12px 0 20px; }
  .mb-actions .mb-btn{ width:100%; min-width:0; }
  .mb-sched{ padding:16px; }
  .mb-two{ grid-template-columns:1fr; gap:20px; }
  .mb-cal-grid{ gap:2px; }
  .mb-times{ grid-template-columns:repeat(2,1fr); }
  .mb-final-actions .mb-btn{ width:100%; }
}
@media (pointer:coarse){ .mb-back{ height:44px; } }
@media (prefers-reduced-motion:reduce){ .mb *,.mb *::before,.mb *::after{ transition:none !important; animation:none !important; } }