/* The quotation form (/request-quote) and its confirmation, brought into the site's design system (DESIGN.md): the
   page title without a kicker, Manrope at 15 to 16px for everything read or filled in, 48px fields, square corners,
   wine for actions and the current step, the gold current line, notes on cream without coloured side bars. The form's
   steps, wording and behaviour are unchanged. Scoped to .qp-page (app.js requestQuote and the confirmation). */
/* typography.css sets some sizes with !important from these variables, so the page sets the variables. */
.qp-page{--fs-note:14px;--fs-body:16px;--fs-label:15px;--fs-lead:16px;color:var(--ink);font-size:16px;line-height:1.55;font-variant-numeric:lining-nums}
.qp-page .draft-bar,.qp-page .check-row a{font-size:15px}
.qp-page ::selection{background:var(--wine);color:var(--paper)}
.qp-page :focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.qp-head{padding:clamp(28px,4vw,56px) var(--padx) 8px}
.qp-head h1{margin:0;font:500 clamp(40px,4.6vw,64px)/1.02 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.qp-head p{max-width:58ch;margin:12px 0 0;font-size:clamp(16px,1.2vw,18px);color:var(--ink-soft)}
.qp-page>.section{padding:24px var(--padx) clamp(56px,7vw,96px)}

/* Steps: square markers, the current step in wine with the gold line */
.qp-page .form-steps{gap:16px;margin:0 0 28px;padding:0;border-bottom:1px solid var(--line)}
.qp-page .form-step{position:relative;gap:10px;min-height:52px;font:600 15px/1.2 var(--sans);color:var(--ink-soft)}
.qp-page .form-step>span{width:30px;height:30px;flex:none;border:1px solid #cfc6b8;border-radius:0;background:#fff;color:var(--ink-soft);font:700 14px/1 var(--sans)}
.qp-page .form-step.complete>span{background:var(--cream);border-color:var(--wine);color:var(--wine)}
.qp-page .form-step.active{color:var(--wine)}
.qp-page .form-step.active>span{background:var(--wine);border-color:var(--wine);color:#fff}
.qp-page .form-step.active::after{content:'';position:absolute;left:0;right:8px;bottom:-1px;height:2px;background:var(--gold)}

/* Headings, text, labels and fields */
.qp-page :is(#form-body,.qp-body-snapshot) :is(h2,h3)+p:not(.help-text){font-size:16px;color:var(--ink-soft)}
.qp-page .field label,.qp-page .field-label,.qp-page legend{font:600 15px/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.qp-page .required{color:var(--wine);font-size:15px}
.qp-page input:not([type=checkbox]):not([type=radio]),.qp-page select,.qp-page textarea{min-height:48px;border:1px solid #cfc6b8;border-radius:0;background:#fff;color:var(--ink);font:400 16px/1.4 var(--sans)}
.qp-page textarea{min-height:110px}
.qp-page [aria-invalid="true"]{border-color:#a3333a}
.qp-page .help-text,.qp-page .small-note,.qp-page .field small,.qp-page .field-error{font-size:14px;line-height:1.5}
.qp-page .help-text,.qp-page .small-note{color:var(--ink-soft)}
.qp-page .check-row{min-height:44px;align-items:center;gap:10px;font-size:15px;line-height:1.45}
.qp-page .check-row input,.qp-page .mode-card input,.qp-page .meal-tile input,.qp-page .drink-tile input,.qp-page .option-row input,.qp-page .format-card input{width:20px;height:20px;accent-color:var(--wine)}
.qp-page .form-error-summary{border-radius:0;font-size:15px;line-height:1.5}
.qp-page .text-link,.qp-page :is(#form-body,.qp-body-snapshot) a:not(.button):not(.pg-btn){color:var(--wine);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:.2em}
.qp-page .text-link svg,.qp-page :is(#form-body,.qp-body-snapshot) a svg{display:inline;vertical-align:-2px;margin-left:4px}

/* Notes: cream with a hairline, never a coloured side bar */
.qp-page .account-note,.qp-page .info-box,.qp-page .preview-note,.qp-page .menu-note{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-left:1px solid var(--line);background:var(--cream);color:var(--ink);font-size:15px;line-height:1.55}
.qp-page .account-note{margin:0 0 24px}

/* Food step: the two modes, the numbered questions, option rows and tiles */
.qp-page .mode-card{padding:18px 20px;background:#fff}
.qp-page .mode-card>span{display:flex;flex-direction:column}
.qp-page .mode-card strong{margin:0 0 6px}
.qp-page .mode-tag{order:3;align-self:flex-start;margin-top:10px;padding:2px 8px;border:1px solid var(--line);background:var(--paper);color:var(--wine);font:600 13px/1.4 var(--sans);letter-spacing:0;text-transform:none}
.qp-page .mode-copy{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.qp-menu-viewport{min-width:0}
@media(max-width:720px){
  .qp-page .menu-mode{padding-bottom:18px;border-bottom:1px solid var(--line);position:relative;z-index:1}
  .qp-menu-viewport.is-mode-switching{overflow:hidden;overflow:clip;pointer-events:none;overflow-anchor:none}
}
.qp-page .simple-menu .simple-question-title>span{border-radius:0;font-family:var(--sans);font-size:15px;font-weight:700}
.qp-page .simple-question>.help-text,.qp-page .planning-section>.help-text{font-size:14px}
.qp-page .simple-menu-link{font-size:15px}
.qp-page :is(#form-body,.qp-body-snapshot) :is(.option-row,.format-card,.meal-tile,.drink-tile) strong{font-size:15px;font-weight:700;color:var(--ink)}
.qp-page :is(#form-body,.qp-body-snapshot) .mode-card strong{margin:0 0 6px;font:500 23px/1.15 var(--serif);color:var(--ink)}
.qp-page :is(#form-body,.qp-body-snapshot) :is(.option-row,.format-card,.meal-tile,.drink-tile) strong~span,.qp-page :is(#form-body,.qp-body-snapshot) :is(.option-row,.format-card) span span{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.qp-page :is(.option-row,.format-card,.meal-tile,.drink-tile){border-radius:0}

/* The dish-by-dish and set-menu paths */
.qp-page :is(.meal-heading p,.planning-empty,.set-preview,.set-preview .check-row,.meal-time-row>span,.takeaway-row,.coconut-row){font-size:14px;line-height:1.5}
.qp-page :is(.drink-tile,.meal-times label,.drink-group-label){font-size:15px}
.qp-page .remove-meal{min-height:44px;padding:0 4px;color:var(--wine);font:600 15px var(--sans)}
.qp-page .dish-notes{font-size:14px}
.qp-page .dish-notes summary{display:flex;align-items:center;min-height:44px;color:var(--wine);font-weight:600}
.qp-page .meal-section-label{font:600 15px/1.35 var(--sans)}

/* Review */
.qp-page .review-group h3{font:700 16px/1.3 var(--sans);color:var(--ink)}
.qp-page .review-group button{min-height:44px;padding:0 4px;font:600 15px var(--sans);color:var(--wine);text-underline-offset:.2em}
.qp-page .review-group dl{grid-template-columns:180px minmax(0,1fr);gap:8px 18px;font-size:15px}
.qp-page .review-group dt{color:var(--ink-soft)}

/* Actions */
.qp-page .form-actions{gap:16px;flex-wrap:wrap}
.qp-page .form-actions>span{font-size:14px;color:var(--ink-soft)}
.qp-page .back-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;color:var(--wine);font:600 15px var(--sans)}
.qp-page .button{min-height:48px;gap:10px;padding:0 22px;border-radius:0;font:600 15px/1.2 var(--sans);letter-spacing:0;transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.qp-page .button-small{min-height:44px;padding:0 16px;font-size:14px}
@media (hover:hover) and (pointer:fine){.qp-page .button:hover{transform:none}}
.qp-page .button:active:not(:disabled){transform:scale(.97)}

/* The column beside the form */
.qp-page .form-aside{top:116px;padding:24px;background:var(--cream)}
.qp-page .form-aside h3{margin-bottom:6px;font:500 30px/1.1 var(--serif)}
.qp-page .form-aside ol{margin:16px 0;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.qp-page .form-aside li{margin-bottom:12px}
.qp-page .form-aside .aside-contact{font-size:15px;color:var(--ink-soft)}
.qp-page .aside-contact a{margin-top:2px;font:700 18px/1.4 var(--sans);color:var(--wine)}

/* Confirmation */
.qp-page .success-panel{max-width:680px;margin:0;padding:0;text-align:left}
.qp-page .success-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 0 16px;border-radius:0;background:var(--wine);color:#fff}
.qp-page .success-panel h2{font:500 clamp(30px,3vw,40px)/1.1 var(--serif)}
.qp-page .success-panel>p{margin:12px 0 18px;font-size:16px;color:var(--ink-soft)}
.qp-page .reference{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 16px;border:1px solid var(--line);background:var(--cream)}
.qp-page .reference span{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.qp-page .reference strong{font:700 20px/1.3 var(--sans);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.qp-page .next-steps{display:flex;gap:14px;align-items:flex-start;margin:18px 0;padding:16px;border:0;border-radius:0;background:var(--cream);text-align:left}
.qp-page .next-steps-icon{flex:none;color:var(--wine)}
.qp-page .next-steps strong{font-size:16px}
.qp-page .next-steps p{font-size:15px}
.qp-page .success-panel .hero-actions{justify-content:flex-start;align-items:center;gap:12px 24px;margin-top:20px}

/* Live progress (above 30% completion): a thin wine bar under the steps that fills as the request is completed. It
   stays pinned under the header while the form scrolls, so it is always in sight, on a phone too: the percentage on
   the left (counting up), what is left on the right. It drops into view the first time it appears; at 100% "Ready to
   send" drops in. Focused fields scroll clear of the header and the bar. */
.qp-page .qp-progress{position:sticky;top:96px;z-index:5;margin:-12px 0 26px;padding:12px 0 14px;background:var(--paper)}
html:has(.qp-progress){scroll-padding-top:170px}
@media (max-width:720px){.qp-page .qp-progress{top:91.2px;padding:10px 0 12px}html:has(.qp-progress){scroll-padding-top:150px}}
.qp-progress-text{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.qp-progress-label{margin:0;font:600 15px/1.35 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.qp-progress-label [data-progress-num]{color:var(--wine)}
.qp-progress-left{margin:0;font:500 14px/1.35 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.qp-progress.is-ready .qp-progress-left{color:var(--wine);font-weight:600}
.qp-progress-track{height:4px;overflow:hidden;background:var(--line)}
.qp-progress-fill{display:block;height:100%;background:var(--wine);transform:scaleX(var(--p,0));transform-origin:left;transition:transform 500ms var(--ease-out)}
.qp-progress-track{position:relative}
.qp-progress-track::after{content:"";position:absolute;inset:0 auto 0 0;width:30%;pointer-events:none;background:linear-gradient(100deg,transparent,#f6dfb5 45%,#fff7e8 55%,transparent);opacity:0;transform:translateX(-100%)}
.qp-progress-left::before{content:"";display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) 4px 4px/1.5px 5px no-repeat,linear-gradient(currentColor,currentColor) 4px 7.5px/7px 1.5px no-repeat;opacity:0;transform:scale(.65);position:absolute}
.qp-progress.is-ready .qp-progress-left::before{position:static;opacity:1;transform:rotate(-45deg) scale(1)}
@keyframes qp-complete-sweep{0%{opacity:0;transform:translateX(-100%)}8%{opacity:1}72%{opacity:1}82%,100%{opacity:0;transform:translateX(340%)}}
@keyframes qp-complete-check{from{opacity:0;transform:rotate(-45deg) scale(.5)}70%{opacity:1;transform:rotate(-45deg) scale(1.12)}to{opacity:1;transform:rotate(-45deg) scale(1)}}
@media(prefers-reduced-motion:no-preference){
  .qp-progress.is-ready .qp-progress-track::after{animation:qp-complete-sweep 2s cubic-bezier(.4,0,.2,1) 480ms infinite both}
  .qp-progress.is-ready.just-ready .qp-progress-left::before{animation:qp-complete-check 240ms cubic-bezier(.16,1,.3,1) 480ms backwards}
}
/* A quick, quiet glide keeps the quote steps connected without making the form feel like a page flip. */
@keyframes qp-drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes qp-in-next{from{opacity:0;transform:translate3d(16px,3px,0)}}
@keyframes qp-in-back{from{opacity:0;transform:translate3d(-16px,3px,0)}}
@keyframes qp-marker{from{transform:scale(.7)}}
@keyframes qp-line{from{transform:scaleX(0)}}
/* The enquiry slips into an envelope, a gold seal stamps it, and it flies onto the Corbin's tray from the logo
   before the wine cover rises. Keep all motion inside one bounded SVG, with no page resizing. */
.qt-wipe.qp-sending{align-content:center;gap:12px;padding:24px 20px;font-size:clamp(30px,4vw,48px);pointer-events:auto;isolation:isolate;overflow:hidden}
.qp-mail-scene{display:block;width:min(260px,64vw);height:auto;overflow:visible}
.qp-sending-words{display:block;min-height:1.1em}
.qp-mail-mark,.qp-mail-dome,.qp-mail-packet,.qp-mail-envelope,.qp-mail-paper,.qp-mail-card,.qp-mail-back-flap,.qp-mail-flap,.qp-mail-seal,.qp-mail-steam,.qp-mail-sparks,.qp-mail-check{transform-box:view-box}
.qp-mail-mark{transform-origin:200px 150px}
.qp-mail-dome{transform-origin:132.2px 133.6px}
.qp-mail-packet,.qp-mail-envelope{transform-origin:200px 479px}
.qp-mail-card{transform-origin:200px 372px}
.qp-mail-back-flap,.qp-mail-flap{transform-origin:200px 420px}
.qp-mail-seal{transform-origin:200px 486px}
.qp-mail-sparks{transform-origin:200px 100px}
.qp-mail-check{transform-origin:200px 470px}
.qp-mail-glow,.qp-mail-flap,.qp-mail-seal,.qp-mail-steam,.qp-mail-sparks,.qp-mail-check{opacity:0}
@media(max-height:640px){.qp-mail-scene{width:230px}}
@media(max-height:450px){.qp-mail-scene{width:150px}.qt-wipe.qp-sending{gap:0;font-size:28px}}
.qp-stamp{display:grid;place-items:center;width:64px;height:64px;margin:0 0 18px;background:var(--wine);color:#fff}
.qp-stamp path{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes qp-stamp{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
@keyframes qp-tick{from{stroke-dashoffset:1}}
/* The receipt is prepared behind the sending cover. Freeze the stamp's entrance and draw until
   sendPanel removes that cover, so neither animation is spent out of sight. */
.qp-sent.is-awaiting-reveal .qp-stamp,.qp-sent.is-awaiting-reveal .qp-stamp path{animation-play-state:paused}
@media (prefers-reduced-motion:no-preference){
  .qp-progress.is-new{animation:qp-drop 420ms var(--ease-out) backwards}
  .qp-progress.just-ready .qp-progress-left{animation:qp-drop 360ms var(--ease-out) backwards}
  .qp-step-next{animation:qp-in-next 240ms cubic-bezier(.16,1,.3,1) backwards}
  .qp-step-back{animation:qp-in-back 240ms cubic-bezier(.16,1,.3,1) backwards}
  .qp-page .qp-moved .form-step.active>span{animation:qp-marker 220ms cubic-bezier(.16,1,.3,1) backwards}
  .qp-page .qp-moved .form-step.active::after{transform-origin:left;animation:qp-line 240ms cubic-bezier(.16,1,.3,1) 25ms backwards}
  .qp-sent .qp-stamp{animation:qp-stamp 460ms var(--ease-out) var(--sd,0ms) backwards}
  .qp-sent .qp-stamp path{animation:qp-tick 420ms var(--ease-out) calc(var(--sd,0ms) + 320ms) backwards}
  .qp-sent .qp-head h1{animation:hp-rise 600ms var(--ease-out) calc(var(--sd,0ms) + 420ms) backwards}
  .qp-sent .qp-head p{animation:hp-rise 600ms var(--ease-out) calc(var(--sd,0ms) + 520ms) backwards}
  .qp-sent .success-panel>*{animation:pg-settle 460ms var(--ease-out) calc(var(--sd,0ms) + 640ms) backwards}
  .qp-sent .success-panel>:nth-child(2){animation-delay:calc(var(--sd,0ms) + 700ms)}
  .qp-sent .success-panel>:nth-child(n+3){animation-delay:calc(var(--sd,0ms) + 760ms)}
}
@media (prefers-reduced-motion:reduce){
  .qp-progress-fill{transition:none}
  /* Fewer, gentler: a new step and the confirmation fade in without moving. */
  .qp-step-next,.qp-step-back{animation:sv-fade 240ms ease backwards!important}
  .qp-sent .qp-head,.qp-sent .success-panel{animation:sv-fade 320ms ease var(--sd,0ms) backwards!important}
  /* The progress bar arriving, the step marker moving on and the bar reaching 100% fade in place too. */
  .qp-progress.is-new,.qp-page .qp-moved .form-step.active>span,.qp-page .qp-moved .form-step.active::after{animation:sv-fade 240ms ease backwards!important}
  .qp-progress.is-ready.just-ready .qp-progress-fill{animation:sv-fade 400ms ease backwards!important}
  /* "Ready to send" and its check fade in with it. */
  .qp-progress.just-ready .qp-progress-left{animation:sv-fade 400ms ease backwards!important}
}

/* The "continue your request" reminder shown on other pages */
.draft-reminder div{font-size:14px}
.draft-reminder strong{font-size:15px}
.draft-reminder-close{display:grid;place-items:center;width:44px;height:44px;padding:0}

@media (max-width:720px){
  /* On phones the form comes first; the reassurance column and the phone number follow it. */
  .qp-page .form-aside{order:0}
  .qp-page .form-steps{gap:8px}
  .qp-page .form-step:not(.active){flex:none;font-size:0;gap:0}
  .qp-page .form-step.active{flex:1}
  .qp-page .review-group dl{grid-template-columns:120px minmax(0,1fr)}
  .qp-page .form-actions .button{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.qp-page .button{transition:none}.qp-page .button:active{transform:none}}
/* Quote controls: gentle opening, a steady search panel, and a reversible tick. */
.qp-page .dish-picker-panel{opacity:1;transform:translateY(0) scale(1);transition:opacity 200ms cubic-bezier(.16,1,.3,1),transform 200ms cubic-bezier(.16,1,.3,1),display 200ms allow-discrete}
.qp-page .dish-picker-panel[hidden]{opacity:0;transform:translateY(-5px) scale(.98);pointer-events:none;transition-duration:140ms}
@starting-style{.qp-page .dish-picker-panel:not([hidden]){opacity:0;transform:translateY(-5px) scale(.98)}}
.qp-page .dish-browse svg{transition:transform 200ms cubic-bezier(.16,1,.3,1)}
.qp-page .dish-browse[aria-expanded=true] svg{transform:rotate(180deg)}
.qp-page input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;flex-shrink:0;width:20px;height:20px;min-height:20px;padding:0;border:1.5px solid #a99b8d;border-radius:0;background:#fff;cursor:pointer;vertical-align:middle}
.qp-page input[type=checkbox]::after{content:'';position:absolute;inset:-1.5px;background:var(--wine);border-radius:0;opacity:0;transform:scale(.7);transition:opacity 160ms ease,transform 200ms cubic-bezier(.16,1,.3,1)}
.qp-page input[type=checkbox]::before{content:'';position:absolute;z-index:1;left:4px;top:4px;width:10px;height:6px;border-left:2px solid white;border-bottom:2px solid white;opacity:0;transform:rotate(-45deg) scale(.25);transition:opacity 120ms ease,transform 180ms cubic-bezier(.16,1,.3,1)}
.qp-page input[type=checkbox]:checked::after{opacity:1;transform:scale(1)}
.qp-page input[type=checkbox]:checked::before{opacity:1;transform:rotate(-45deg) scale(1)}
.qp-page input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
.qp-page input[type=checkbox]:active:not(:disabled){transform:scale(.94)}
.bar-preview-trigger{background:transparent;border-top:0;border-left:0;border-right:0;line-height:inherit;gap:12px}
.bar-preview-trigger:hover{gap:12px}
.bar-preview{width:min(940px,calc(100vw - 32px));max-width:none;max-height:min(850px,calc(100dvh - 40px));padding:0;border:1px solid var(--line);border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #302d2840;overflow:hidden}
.bar-preview[open]{display:flex;flex-direction:column}
.bar-preview::backdrop{background:#302d2870;animation:bar-backdrop-in 200ms ease both}
@keyframes bar-backdrop-in{from{opacity:0}to{opacity:1}}
.bar-preview-header{display:flex;align-items:flex-start;gap:18px;justify-content:space-between;padding:28px 30px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.bar-preview-eyebrow{display:block;font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:var(--wine);font-weight:700;margin-bottom:10px}
.bar-preview-header h2{font-size:clamp(29px,4vw,42px);letter-spacing:-.8px}
.bar-preview-header p{font-size:13px;margin-top:10px}
.bar-preview-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--cream);color:var(--wine)}
.bar-preview-close:active{transform:scale(.94)}
.bar-preview-body{padding:24px 30px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.bar-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bar-preview-card{padding:22px;border:1px solid var(--line);border-radius:17px;background:#fffdf9}
.bar-preview-card h3,.bar-preview-included h3{font-size:27px;color:var(--wine);margin-bottom:14px}
.bar-preview-card ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7}
.bar-preview-card li+li{margin-top:4px}
.bar-preview-card li::marker{color:var(--wine)}
.bar-preview-included{margin-top:22px;padding:20px 22px;background:var(--cream);border-radius:17px}
.bar-preview-included h3{font-size:24px}
.bar-preview-included ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding-left:18px;font-size:13px}
.bar-preview-note{font-size:12px;margin-top:18px}
.bar-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 30px;border-top:1px solid var(--line);flex-shrink:0;background:var(--paper)}
.bar-preview-footer>span{font-size:12px;color:var(--muted)}
.bar-preview-footer .button{border-radius:8px}
@media(max-width:600px){.bar-preview{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:20px}.bar-preview-header{padding:20px 18px 17px}.bar-preview-body{padding:18px}.bar-preview-grid{grid-template-columns:1fr;gap:12px}.bar-preview-card{padding:18px}.bar-preview-footer{padding:14px 18px}.bar-preview-footer>span{display:none}.bar-preview-footer .button{width:100%}}
@media(prefers-reduced-motion:reduce){.qp-page .dish-picker-panel,.qp-page .dish-picker-panel[hidden]{transform:none;transition:opacity 80ms ease,display 80ms allow-discrete!important}.qp-page .dish-browse svg,.qp-page input[type=checkbox]::before,.qp-page input[type=checkbox]::after{transition:none}.qp-page input[type=checkbox]:active:not(:disabled){transform:none}.bar-preview::backdrop{animation:none}.bar-preview-close:active{transform:none}}
@media(forced-colors:active){.qp-page input[type=checkbox]{appearance:auto;-webkit-appearance:auto}.qp-page input[type=checkbox]::before,.qp-page input[type=checkbox]::after{display:none}}
/* Override the retired photo viewer's generic dialog button positioning. */
.bar-preview button{position:static;inset:auto}
.bar-preview .bar-preview-close{padding:0}
.bar-preview::backdrop{transition:opacity 150ms ease}
.bar-preview.is-closing::backdrop{opacity:0;animation:none}
@media(prefers-reduced-motion:reduce){.bar-preview::backdrop{transition-duration:80ms}}
/* The scrollbar keeps its space while a modal is open, so the header never slides sideways. */
html{scrollbar-gutter:stable}
/* Radio dots grow and settle instead of appearing in one frame. */
.qp-page input[type=radio]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;flex-shrink:0;width:20px;height:20px;min-height:20px;padding:0;border:1.5px solid #a99b8d;border-radius:50%;background:#fff;cursor:pointer;vertical-align:middle}
.qp-page input[type=radio]::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--wine);opacity:0;transform:scale(.2);transition:opacity 130ms ease,transform 200ms cubic-bezier(.16,1,.3,1)}
.qp-page input[type=radio]:checked::before{opacity:1;transform:scale(1)}
.qp-page input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
@keyframes qp-reveal-tick{from{opacity:0;transform:rotate(-45deg) scale(.25)}to{opacity:1;transform:rotate(-45deg) scale(1)}}
@keyframes qp-reveal-fill{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes qp-reveal-dot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.qp-page input[type=checkbox][data-qp-reveal]::before{animation:qp-reveal-tick 200ms cubic-bezier(.16,1,.3,1) var(--qp-control-delay,0ms) backwards}
.qp-page input[type=checkbox][data-qp-reveal]::after{animation:qp-reveal-fill 180ms cubic-bezier(.16,1,.3,1) var(--qp-control-delay,0ms) backwards}
.qp-page input[type=radio][data-qp-reveal]::before{animation:qp-reveal-dot 210ms cubic-bezier(.16,1,.3,1) var(--qp-control-delay,0ms) backwards}
.qp-body-outgoing{position:absolute;z-index:8;background:var(--paper);pointer-events:none;overflow:hidden;margin:0}
.qp-body-outgoing .qp-body-snapshot{margin:0}
.meal-time-row .qp-select{min-width:150px}
@media(max-width:720px){.meal-time-row .qp-select{min-width:0}}
@keyframes qp-reveal-fade{from{opacity:0}}
/* Reduce Motion: revealed ticks, fills and dots fade in without growing (beats the blanket rule in styles.css). */
@media(prefers-reduced-motion:reduce){.qp-page input[type=radio]::before,.qp-select-arrow{transition:none}.qp-page input[data-qp-reveal]::before,.qp-page input[data-qp-reveal]::after{animation:qp-reveal-fade 180ms ease var(--qp-control-delay,0ms) backwards!important}}
@media(forced-colors:active){.qp-page input[type=radio]{appearance:auto;-webkit-appearance:auto}.qp-page input[type=radio]::before{display:none}.qp-select-trigger,.qp-select-panel{border-color:ButtonText}.qp-select-panel [role=option][aria-selected=true]{outline:2px solid Highlight;outline-offset:-2px}}
/* A link in the form has one line under it: the underline above. The site-wide link style also draws a bottom border, which
   showed as a second line under "privacy notice", "request terms", "Browse our menus" and the bar preview. */
.qp-page .text-link,.qp-page .text-link:hover{border-bottom:0;padding-bottom:0}
.qp-page .check-row a.text-link{display:inline}
/* Native step 1 sections: no opening motion, including under reduced motion. */
.qp-page .event-sections{display:grid;gap:18px;min-width:0;margin-top:24px}
.qp-page .event-section{min-width:0;border:1px solid var(--line);background:var(--paper)}
.qp-page .event-section>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:64px;padding:16px 20px;cursor:pointer;list-style:none}
.qp-page .event-section>summary::-webkit-details-marker{display:none}
.qp-page .event-section-title{grid-column:1;min-width:0;font:500 28px/1.15 var(--serif)}
.qp-page .event-section-answer{display:none;grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 15px/1.5 var(--sans);color:var(--ink-soft,#5a544b)}
.qp-page .event-section:not([open]) .event-section-title{font-size:22px}
.qp-page .event-section:not([open]) .event-section-answer{display:block}
.qp-page .event-section-edit{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;color:var(--wine);text-decoration:underline;font:600 15px/1.4 var(--sans)}
.qp-page .event-section[open] .event-section-edit{visibility:hidden}
.qp-page .event-section-body{min-width:0;padding:0 20px 20px}
.qp-page .event-section-body .form-grid{min-width:0;margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.qp-page .event-section-body .field{min-width:0}
/* Every containing grid/flex item must shrink before Safari's native controls can fit. */
.qp-page .quote-layout>div,.qp-page #quote-form,.qp-page #form-body,.qp-page .form-section{min-width:0;max-width:100%}
.qp-page .event-section-body .form-grid>*,.qp-page .event-section-body .field>*,.qp-page .event-section>summary>*{min-width:0;max-width:100%}
.qp-page .event-section-body :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.qp-select,.qp-select-trigger){min-width:0;max-width:100%;box-sizing:border-box}
/* iOS date/time controls otherwise retain their intrinsic width and native bezel. */
.qp-page .event-section input:is([type=date],[type=time]){width:100%;min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;height:48px;min-height:48px;padding:12px 13px;line-height:22px}
.qp-page .event-section input:is([type=date],[type=time])::-webkit-date-and-time-value{min-width:0;text-align:left;line-height:22px;margin:0}
.qp-page .event-section input:is([type=date],[type=time])::-webkit-calendar-picker-indicator{flex:none;margin:0;padding:0;max-width:20px}
@media(max-width:720px){
  .qp-page .event-section>summary{padding:16px}
  .qp-page .event-section-title{font-size:25px}
  .qp-page .event-section-body{padding:0 16px 16px}
}

/* The complete image never disappears. Only its arrival transform and six solid
   gold flecks animate; play state lives on #main, outside the form's morph. */
.qp-page .quote-choice-tick{margin-top:14px}
.qp-page .mr-venue-choice{position:relative;display:inline-flex;align-items:center;justify-content:center;width:180px;max-width:100%;padding:8px 14px 20px;border:0;background:transparent;cursor:pointer}
.qp-page .mr-venue-choice>input{position:absolute;width:1px;height:1px;opacity:0}
.qp-page .mr-venue-choice:has(input:focus-visible){outline:2px solid #c7a175;outline-offset:4px}
.qp-page .mr-venue-choice:has(input:checked){background:transparent}
.qp-page .mr-venue-art{width:150px;max-width:100%;aspect-ratio:1474/882;position:relative;display:block}
.qp-page .mr-venue-art img{display:block;width:100%;height:100%;object-fit:contain;opacity:1}
.qp-page .mr-venue-sparkle{position:absolute;left:var(--sx);top:var(--sy);width:var(--ss);height:var(--ss);background:#c9a461;border-radius:.5px;opacity:0;pointer-events:none}
.qp-page .mr-venue-tick{position:absolute;right:7px;top:5px;color:var(--wine);font-size:14px;display:inline-block;opacity:0;transform:scale(.6);transition:opacity 160ms ease,transform 200ms ease}
.qp-page .mr-venue-choice:has(input:checked) .mr-venue-tick{opacity:1;transform:scale(1)}
@keyframes mr-quote-arrive{0%{transform:translateY(3px) scale(.96)}65%{transform:translateY(-1px) scale(1.01)}100%{transform:translateY(0) scale(1)}}
@keyframes mr-quote-sparkle{0%,18%,100%{opacity:0;transform:translateY(0) scale(.5) rotate(0deg)}32%{opacity:.75;transform:translateY(2px) scale(1) rotate(45deg)}58%{opacity:0;transform:translateY(8px) scale(.6) rotate(90deg)}}
@keyframes mr-quote-fade{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .qp-page .mr-venue-choice:has(input:checked) .mr-venue-base{animation:mr-quote-arrive 650ms cubic-bezier(.23,1,.32,1);animation-play-state:paused}
  .qp-page .mr-venue-choice:has(input:checked) .mr-venue-sparkle{animation:mr-quote-sparkle 5.6s ease-in-out var(--sd) infinite;animation-play-state:paused}
  #main[data-mr-quote-playing] .qp-page .mr-venue-base,#main[data-mr-quote-playing] .qp-page .mr-venue-sparkle{animation-play-state:running}
  #main[data-mr-quote-playing][data-mr-quote-arriving] .qp-page .mr-venue-base{will-change:transform}
  #main[data-mr-quote-playing] .qp-page .mr-venue-choice:has(input:checked) .mr-venue-sparkle{will-change:transform,opacity}
}
@media(prefers-reduced-motion:reduce){
  .qp-page .mr-venue-tick{transition:none}
  .qp-page .mr-venue-base{transform:none!important;opacity:1}
  .qp-page .mr-venue-sparkle{display:none;animation:none!important;will-change:auto}
  .qp-page .mr-venue-choice:has(input:checked) .mr-venue-base{animation:mr-quote-fade 160ms ease both!important;animation-play-state:paused!important}
  #main[data-mr-quote-playing] .qp-page .mr-venue-choice:has(input:checked) .mr-venue-base{animation-play-state:running!important}
  #main[data-mr-quote-playing][data-mr-quote-arriving] .qp-page .mr-venue-base{will-change:opacity}
}

/* The budget advice is a real editable value, with room to shrink on phones. */
.qp-page .budget-field #budget{width:100%;min-width:0;max-width:100%;min-height:48px;box-sizing:border-box;color:var(--ink);opacity:1}
.qp-page .budget-field #budget:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* Location changes reserve their real height while decorative departure copies fade. */
.qp-page .location-fields,.qp-page #location-extras{min-width:0;grid-column:1/-1}
.qp-page #location-fields[hidden],.qp-page #location-extras[hidden],.qp-page #location-tbc-note[hidden]{display:none!important}
.qp-page .event-section-body.location-resizing{position:relative;overflow:clip;overflow-anchor:none}
.qp-page .location-leaving{position:absolute;pointer-events:none;margin:0;max-width:100%;z-index:1}
.qp-page #location-tbc-note{display:block;overflow-wrap:anywhere}
.qp-page .location-value{position:relative;min-width:0;max-width:100%}
.qp-page .location-value input{width:100%}
.qp-page .location-value-reveal{display:none;position:absolute;inset:0;align-items:center;border:1px solid transparent;padding:12px 13px;font:400 16px/1.4 var(--sans);white-space:nowrap;overflow:hidden;pointer-events:none;color:var(--ink)}
.qp-page input:not([type=checkbox]):not([type=radio]).location-typing{color:transparent;caret-color:var(--ink)}
.qp-page input.location-typing+.location-value-reveal{display:flex}
.qp-page [data-location-type].location-typing{position:relative;color:transparent}
.qp-page .location-type-reveal{position:absolute;inset:0;color:var(--muted);pointer-events:none;overflow-wrap:anywhere}
@keyframes location-fade{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .qp-page .location-fade{animation:location-fade 120ms ease both!important}
  .qp-page .location-leaving{display:none!important}
  .qp-page .event-section-body.location-resizing{height:auto!important;transform:none!important}
  .qp-page input:not([type=checkbox]):not([type=radio]).location-typing{color:var(--ink)!important}
  .qp-page [data-location-type].location-typing{color:var(--muted)!important}
  .qp-page .location-value-reveal,.qp-page .location-type-reveal{display:none!important}
}

/* A regular order opened in the quotation form: a close button, and the "leave without saving?" question. */
.qp-page .regular-source{position:relative;padding-right:64px}
.qp-page .regular-close{position:absolute;top:6px;right:6px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--wine);cursor:pointer}
.qp-page .regular-close:hover{background:#702b3d14}
.qp-page .regular-close:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.qp-page .regular-source:has([data-regular-stay]){padding-right:16px}
.qp-page .regular-leave-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qp-page .regular-save{margin-top:20px}
.qp-page .regular-save .form-grid{margin-top:12px}

/* Phone layout audit, 18 October 2026: keep each meal's time and headcount together. */
@media (max-width:720px){
  .qp-page .meal-time-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px 12px;min-width:0}
  .qp-page .meal-time-row>span{grid-column:1/-1;min-width:0;padding-bottom:0}
  .qp-page .meal-time-row>label{min-width:0}
  .qp-page .meal-time-row input[type=number],.qp-page .meal-time-row select,.qp-page .meal-time-row .qp-select{width:100%;min-width:0;max-width:100%}
  .qp-page .qp-progress[data-platter-progress] .qp-progress-left{font-size:13px}
  html.quote-page:has([data-platter-progress]){scroll-padding-top:210px}
}