/* Shared by the redesigned pages (front page, services, menus, Mahogany Ridge) and by the site header and footer.
   The site world in DESIGN.md: paper and cream grounds, wine as the only accent, relaunch gold for active states,
   Cormorant Garamond over Manrope, square corners, no cards, no drop shadows. Motion: strong ease-out, View Transitions
   for filters and photos, everything at rest for visitors who ask for less motion. Loaded last. */
:root{--gold:#d4b073;--ink-soft:#5a544b;--pw-top:96px;--row:clamp(120px,14vw,215px);
  --padx:max(clamp(20px,5vw,72px),calc((100vw - 1320px) / 2));
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
html:has(.pg-page){scrollbar-color:#b9aa9b var(--paper)}
html:has(.pw-viewer[open]){overflow:hidden;scrollbar-gutter:stable}
.pg-page ::selection{background:var(--wine);color:var(--paper)}
.pg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Page type and actions */
.pg-page{color:var(--ink);font-size:16px;line-height:1.65}
.pg-page :focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.pg-page h1,.pg-page h2{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.pg-page h1{font-size:clamp(44px,5.2vw,74px);line-height:1}
.pg-page h2{margin-bottom:14px;font-size:clamp(34px,3.6vw,52px);line-height:1.04}
.pg-page h3{margin:0 0 10px;font:600 15px/1.3 var(--sans);letter-spacing:0;color:var(--ink)}
.pg-page p{text-wrap:pretty}
.pg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.pg-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border:0;background:var(--wine);color:var(--paper);font:600 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.pg-btn svg{flex:none;transition:transform 200ms var(--ease-out)}
.pg-btn:active{transform:scale(.97)}
.pg-btn-small{min-height:40px;padding:0 16px;gap:10px;font-size:14px}
.pg-link{display:inline-flex;align-items:center;min-height:44px;color:var(--wine);font:600 15px/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
@media (hover:hover) and (pointer:fine){
  .pg-btn:hover{background:var(--wine-dark);color:var(--paper)}
  .pg-btn:hover svg{transform:translateX(3px)}
  .pg-link:hover{color:var(--wine-dark);text-decoration-thickness:2px}
}
.hp-close,.sv-close,.mn-close,.mr-close{padding:clamp(56px,7vw,104px) var(--padx);background:var(--cream);border-top:1px solid var(--line)}
.hp-close h2,.sv-close h2,.mn-close h2,.mr-close h2{max-width:18ch}
.hp-close p,.sv-close p,.mn-close p,.mr-close p{max-width:52ch;margin:0 0 26px;color:var(--ink-soft)}

/* Filter bar: sticks under the site header (--pw-top is measured by photo-wall.js) */
.pw-filter{position:sticky;top:var(--pw-top);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px 20px;margin:0 0 12px;padding:6px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.pw-filter-group{display:flex;flex-wrap:wrap;gap:0 24px;min-width:0}
.pw-filter-btn{position:relative;flex:none;min-height:44px;padding:0;border:0;background:none;color:var(--ink-soft);font:600 15px/1 var(--sans);cursor:pointer;transition:color 200ms ease}
.pw-filter-btn::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform 300ms var(--ease-out)}
.pw-filter-btn[aria-pressed="true"]{color:var(--wine)}
.pw-filter-btn[aria-pressed="true"]::after{transform:scaleX(1);transform-origin:left}
/* Hover (mouse): the gold line draws in under a tab from the left, as on the header links; the chosen tab keeps it. */
@media (hover:hover) and (pointer:fine){.pw-filter-btn:hover{color:var(--wine)}.pw-filter-btn:hover::after{transform:scaleX(1);transform-origin:left}}
.pw-short{display:none}
.pw-count{margin-left:3px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

/* Photo wall: justified rows, every photo keeps its shape, each row fills the width, the last row stays left */
.pw-grid{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.pw-grid::after{content:'';flex-grow:999}
.pw-tile{flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));margin:0;overflow:hidden;background:var(--cream)}
.pw-tile[hidden]{display:none}
.pw-shot{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pw-shot img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out),filter 1.3s var(--ease-out)}
.pw-shot::after{content:'';position:absolute;inset:10px;border:1px solid transparent;pointer-events:none;transition:border-color 300ms ease}
.pw-shot:focus-visible{outline-offset:-2px}
.pw-shot:focus-visible::after{border-color:#e7cf9a}
.pw-tile.is-waiting img{opacity:0;transform:scale(1.05);filter:saturate(.25) brightness(1.18) contrast(.85)}
@media (hover:hover) and (pointer:fine){
  .pw-shot:hover img{transform:scale(1.035)}
  .pw-shot:hover::after{border-color:#e7cf9a}
}

/* Photo viewer */
.pw-viewer{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:72px clamp(12px,7vw,104px) 24px;border:0;background:rgba(15,11,10,.95);color:#f3ece2;overscroll-behavior:contain}
.pw-viewer[open]{display:grid;place-items:center}
.pw-viewer::backdrop{background:transparent}
.pw-viewer ::selection{background:#f6ead6;color:var(--wine-dark)}
.pw-viewer :focus-visible{outline:2px solid #f6ead6;outline-offset:3px}
.pw-viewer-figure{display:grid;justify-items:center;gap:14px;margin:0;max-width:100%}
.pw-viewer-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);object-fit:contain}
.pw-viewer figcaption{max-width:70ch;font-size:14px;line-height:1.5;text-align:center}
.pw-viewer-meta{color:#c9bcae}
.pw-viewer-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(243,236,226,.12);color:#f3ece2;cursor:pointer;transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.pw-viewer-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.pw-viewer-btn:hover{background:rgba(243,236,226,.26)}}
.pw-viewer-close{top:14px;right:14px}
.pw-viewer-prev,.pw-viewer-next{top:50%;margin-top:-24px}
.pw-viewer-prev{left:clamp(8px,2vw,28px)}
.pw-viewer-next{right:clamp(8px,2vw,28px)}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.77,0,.175,1)}
::view-transition{pointer-events:none}
/* Keep unchanged page content opaque during photo/filter transitions. Only the
   named photo or tile animates; the whole website must never blink behind it. */
::view-transition-old(root){animation:none;opacity:0;mix-blend-mode:normal}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* Pages fetch their content after navigation. Automatic snapshots would capture
   an empty main and freeze it on screen. The quote has its own controlled cover. */
@view-transition{navigation:none}
html{background:var(--paper)}
.site-header{view-transition-name:site-header}

/* Site header (styles.css lays it out; these rules restyle it) */
.demo-bar{display:none;max-height:none;padding:6px 16px;font-size:12px;line-height:1.5;letter-spacing:0;color:#5f5148}
.site-header{height:112px;min-height:0;padding-inline:var(--padx);background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .header-animated-brand{width:134.4px;height:99.2px}
.site-header nav{gap:26px;font-size:16px;font-weight:600}
.site-header nav>a.pg-btn{font-size:inherit}
@media(min-width:1340px){.site-header nav{position:absolute;left:calc(50% + 67.2px);top:calc(50% + 14.4px);width:max-content;white-space:nowrap;transform:translate(-50%,-50%)}}
.site-header nav>a:not(.pg-btn){padding:10px 0;color:var(--ink)}
.site-header nav>a[href="/mahogany-ridge"],.site-header nav>a[aria-current=page]{color:var(--wine);font-weight:600}
.site-header nav>a[aria-current=page]:after{bottom:4px;height:2px;background:var(--gold)}
.site-header nav>a.pg-btn{padding:0 16px;color:var(--paper)}
.site-header nav>a.pg-btn::after{content:none}
.site-footer .brand-light{width:254px;height:auto;padding:8px;border-radius:14px;background:#fff}
html.quote-page .site-header nav>a.pg-btn[href="/request-quote"]{display:none}
/* While a page loads (page-transitions.js) the footer waits for the content, and the account link shows its last label. */
html.is-loading .site-footer{visibility:hidden}
html:not(.account-in) [data-account-link] [data-when="in"],html.account-in [data-account-link] [data-when="out"]{display:none}
/* Arrival on the menu's pages: the heading block and the next two settle into place, 70ms apart, once per visit.
   Our services and Mahogany Ridge have their own arrivals. */
@keyframes pg-settle{from{opacity:0;transform:translateY(12px)}}
html.is-arriving .pg-page:not(.sv-page):not(.mr-page):not(.hp-page)>:nth-child(-n+3){animation:pg-settle 460ms var(--ease-out) backwards}
html.is-arriving .pg-page:not(.sv-page):not(.mr-page):not(.hp-page)>:nth-child(2){animation-delay:70ms}
html.is-arriving .pg-page:not(.sv-page):not(.mr-page):not(.hp-page)>:nth-child(3){animation-delay:140ms}
/* Hover (mouse): a gold line draws in under a link from the left and leaves to the right; the current page keeps its line. */
.site-header nav>a:not(.pg-btn)::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform 200ms var(--ease-out)}
.site-header nav>a[aria-current=page]::after{transform:none}
.site-header nav>a[href="/mahogany-ridge"]:not(.pg-btn)::after{content:none}
@media (hover:hover) and (pointer:fine){
  .site-header nav>a:not(.pg-btn):hover{color:var(--wine);background:none}
  .site-header nav>a:not(.pg-btn):hover::after{transform:scaleX(1);transform-origin:left}
  .site-header nav>a.pg-btn:hover{color:var(--paper)}
}
.site-header :focus-visible,.site-footer :focus-visible{outline:2px solid var(--wine);outline-offset:3px}
@media (max-width:1200px){.site-header nav{gap:18px;font-size:15px}}

/* Site footer */
.site-footer{padding:64px var(--padx) 24px;background:#282e28;color:#e9e6dc}
/* The quote button floats low on phones and tablets (support.css); the footer's last line stays clear of it. */
@media (max-width:1000px){.site-footer{padding-bottom:88px}}
.site-footer .footer-top h2{margin:0 0 14px;font:500 24px/1.2 var(--serif);letter-spacing:-.01em;text-transform:none;color:#f6efe4}
.site-footer .footer-top p{margin-top:16px;font-size:15px;line-height:1.7;color:#c8cabf}
.site-footer .footer-top>div>a:not(.brand),.site-footer .socials a{display:flex;align-items:center;gap:6px;width:fit-content;min-height:32px;margin-bottom:4px;font-size:15px;color:#d6d8cd}
.site-footer .socials{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.site-footer .footer-location{margin-top:18px;font-size:14px;letter-spacing:0;color:#d8c4a4}
.site-footer .footer-bottom{font-size:13px;color:#b5b8ac}
.site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:24px;color:inherit}
/* Fingers need 44px: footer links and small buttons grow on touch screens. */
@media (pointer:coarse){
  .site-footer .footer-top>div>a:not(.brand),.site-footer .socials a{min-height:44px;margin-bottom:0}
  .site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  .pg-btn-small{min-height:44px}
}
.site-footer :focus-visible{outline-color:#f6ead6}
@media (hover:hover) and (pointer:fine){.site-footer a:hover{color:#fff}}

/* Front page */
/* Warm light, with a static garden band as the optional second backdrop. */
.hp-page[data-home-backdrop]{position:relative;isolation:isolate;overflow:clip;background:var(--cream);background:radial-gradient(ellipse at 90% 12%,color-mix(in srgb,var(--sage) 8%,transparent),transparent 48%),linear-gradient(155deg,var(--cream),color-mix(in srgb,var(--paper) 95%,var(--wine)) 46%,var(--paper))}
.hp-page[data-home-backdrop]::before,.hp-page[data-home-backdrop]::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.hp-page[data-home-backdrop]::before{opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hp-page[data-home-backdrop]::after{background:radial-gradient(ellipse 440px 360px at 6% 9%,var(--wine),transparent 72%),radial-gradient(ellipse 540px 440px at 94% 55%,var(--gold),transparent 72%);opacity:.1}
@keyframes hp-light-drift{0%,100%{transform:translate(0,0);opacity:.08}50%{transform:translate(22px,-24px);opacity:.12}}
@media (prefers-reduced-motion:no-preference){.hp-page[data-home-backdrop="a"]::after{animation:hp-light-drift 56s ease-in-out infinite}}
.hp-page[data-home-backdrop].hp-backdrop-paused::after{animation-play-state:paused}
.hp-page[data-home-backdrop].hp-backdrop-still::after{animation:none;transform:none;opacity:.1}
.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words,.hp-close){position:relative;background:var(--hp-band);border:0}
.hp-page[data-home-backdrop] .hp-serve{--hp-band:color-mix(in srgb,var(--cream) 92%,var(--sage))}
.hp-page[data-home-backdrop] .hp-words{--hp-band:var(--wine-dark)}
.hp-page[data-home-backdrop] .hp-close{--hp-band:color-mix(in srgb,var(--cream) 94%,var(--gold))}
.hp-page[data-home-backdrop] .hp-taste-row span{background:rgba(32,22,18,.86)}
.hp-page[data-home-backdrop] .hp-idea .pg-link{min-height:44px}
.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words,.hp-close)::before,.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words)::after{content:'';position:absolute;left:0;right:0;height:clamp(18px,2vw,32px);background:var(--hp-band);pointer-events:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'%3E%3Cpath d='M0 24C240 0 400 0 720 18S1200 32 1440 8V32H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words,.hp-close)::before{bottom:calc(100% - 1px)}
.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words)::after{top:calc(100% - 1px);transform:rotate(180deg)}
.hp-garden{display:none}
.hp-page[data-home-backdrop="b"] .hp-hero{position:relative;isolation:isolate}
.hp-page[data-home-backdrop="b"] .hp-garden{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hp-garden img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:blur(12px) saturate(.25);opacity:.24;transform:scale(1.04)}
.hp-page[data-home-backdrop="b"] .hp-hero-copy{padding:clamp(18px,2.2vw,32px);background:rgba(252,250,245,.94);background:color-mix(in srgb,var(--paper) 94%,transparent)}
.hp-page.hp-backdrop-still .hp-garden{display:none}
@media (max-width:720px){.hp-page[data-home-backdrop]::after{background-size:100% 65%;background-repeat:no-repeat}.hp-page[data-home-backdrop="b"] .hp-hero-copy{padding:20px 16px}}
@media (prefers-reduced-motion:reduce), (prefers-reduced-data:reduce){.hp-page[data-home-backdrop]::after{animation:none!important;transform:none;opacity:.1}}
@media (prefers-reduced-data:reduce){.hp-page[data-home-backdrop]::before,.hp-garden{display:none!important}}
@media print{.hp-page[data-home-backdrop]{background:#fff}.hp-page[data-home-backdrop]::before,.hp-page[data-home-backdrop]::after,.hp-garden,.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words,.hp-close)::before,.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words)::after{display:none!important}.hp-page[data-home-backdrop] :is(.hp-serve,.hp-words,.hp-close){background:#fff;color:var(--ink)}.hp-page[data-home-backdrop] .hp-words :is(p,figcaption,.hp-words-note,.pg-link){color:var(--ink)}.hp-page[data-home-backdrop]::after{animation:none!important}}
/* Photo-derived liquid colour flows continuously behind the hero. */
.hp-page.hp-photo-colours .hp-hero{position:relative;isolation:isolate;overflow:visible}
.hp-page.hp-photo-colours::after{display:none}
.hp-photo-atmosphere{position:absolute;inset:0 0 -180px;z-index:-1;pointer-events:none;overflow:hidden;background:var(--cream);-webkit-mask-image:linear-gradient(180deg,transparent,#000 96px,#000 65%,transparent);mask-image:linear-gradient(180deg,transparent,#000 96px,#000 65%,transparent)}
.hp-photo-atmosphere::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(252,250,245,.97),rgba(252,250,245,.92) 33%,rgba(252,250,245,.25) 55%,transparent 75%)}
.hp-photo-glow{position:absolute;width:85%;height:110%;background:radial-gradient(ellipse closest-side at 50% 50%,var(--photo-colour-1) 15%,color-mix(in srgb,var(--photo-colour-1) 90%,transparent) 50%,transparent 100%);opacity:.95;right:-24%;top:-32%;transform-origin:45% 55%}
.hp-photo-glow:nth-child(2){background:radial-gradient(ellipse closest-side at 50% 50%,var(--photo-colour-2) 12%,color-mix(in srgb,var(--photo-colour-2) 85%,transparent) 48%,transparent 100%);width:90%;height:100%;right:15%;top:24%;opacity:.8;transform-origin:65% 40%}
.hp-photo-glow:nth-child(3){background:radial-gradient(ellipse closest-side at 50% 50%,var(--photo-colour-1) 12%,var(--photo-colour-3) 46%,transparent 100%);width:80%;height:100%;right:-12%;top:42%;opacity:.9;transform-origin:35% 60%}
@keyframes hp-photo-flow{0%,100%{transform:translate(0,0) rotate(-12deg) scale(1.08,.9)}25%{transform:translate(-16%,18%) rotate(22deg) scale(.94,1.16)}50%{transform:translate(-30%,5%) rotate(48deg) scale(1.16,.96)}75%{transform:translate(-8%,-16%) rotate(16deg) scale(.96,1.1)}}
@media(prefers-reduced-motion:no-preference){.hp-photo-glow{animation:hp-photo-flow 12s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--photo-flow-age,0s)}.hp-photo-glow:nth-child(2){animation-duration:16s;animation-direction:reverse;animation-delay:calc(var(--photo-flow-age,0s) - 5s)}.hp-photo-glow:nth-child(3){animation-duration:14s;animation-delay:calc(var(--photo-flow-age,0s) - 8s)}}
.hp-backdrop-paused .hp-photo-glow{animation-play-state:paused}
.hp-backdrop-still .hp-photo-glow{animation:none}
@media(max-width:720px){.hp-photo-glow{width:170%;height:65%;right:-70%;top:-18%}.hp-photo-glow:nth-child(2){width:160%;height:75%;right:-40%;top:25%}.hp-photo-glow:nth-child(3){width:160%;height:75%;right:-60%;top:48%}.hp-photo-atmosphere::after{background:linear-gradient(180deg,transparent 12%,rgba(252,250,245,.6) 32%,rgba(252,250,245,.94) 47%,rgba(252,250,245,.88) 100%)}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce){.hp-photo-glow{animation:none!important}}
@media print{.hp-photo-atmosphere{display:none!important}}
/* Let the photograph and colour share an edge, instead of framing them as a card. */
body:has(.hp-page.hp-photo-colours) .site-header{border-bottom:0}
.hp-page.hp-photo-colours .hp-photo{--photo-feather:16px;border:0;border-radius:32px;box-shadow:none;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--photo-feather),#000 calc(100% - var(--photo-feather)),transparent),linear-gradient(180deg,transparent,#000 var(--photo-feather),#000 calc(100% - var(--photo-feather)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--photo-feather),#000 calc(100% - var(--photo-feather)),transparent),linear-gradient(180deg,transparent,#000 var(--photo-feather),#000 calc(100% - var(--photo-feather)),transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hp-page.hp-photo-colours .hp-suggest,.hp-page.hp-photo-colours .hp-menus a{border:0}
.hp-page.hp-photo-colours .hp-occasion{border-color:transparent;border-radius:999px;background:rgba(252,250,245,.78)}
.hp-page.hp-photo-colours .hp-occasion[aria-pressed="true"]{background:var(--wine);color:var(--paper)}
@media(hover:hover) and (pointer:fine){.hp-page.hp-photo-colours .hp-occasion:hover{background:rgba(252,250,245,.98)}.hp-page.hp-photo-colours .hp-occasion[aria-pressed="true"]:hover{background:var(--wine-dark)}}
@media(max-width:720px){.hp-page.hp-photo-colours .hp-photo{--photo-feather:8px}.hp-photo-atmosphere{inset:0 0 -100px}}
@media print{.hp-page.hp-photo-colours .hp-photo{-webkit-mask-image:none;mask-image:none}}

.hp-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:stretch;padding:clamp(18px,2.2vw,32px) var(--padx) clamp(32px,4vw,56px)}
.hp-hero-copy{display:flex;flex-direction:column;justify-content:center}
.hp-lede{max-width:46ch;margin:18px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--ink-soft)}
.pg-page .hp-prompt{margin:30px 0 12px;font:600 15px/1.3 var(--sans);letter-spacing:0}
.hp-occasions{display:flex;flex-wrap:wrap;gap:8px}
.hp-occasion{min-height:44px;padding:0 18px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer;transition:border-color 200ms ease,background-color 200ms ease,color 200ms ease}
.hp-occasion[aria-pressed="true"]{border-color:var(--wine);background:var(--wine);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.hp-occasion:hover{border-color:var(--wine)}}
.hp-suggest{margin:20px 0 24px;padding-top:16px;border-top:1px solid var(--line)}
.hp-idea{margin:0 0 6px;color:var(--ink-soft)}
.hp-idea .pg-link{min-height:0}
.hp-menus{margin:0;padding:0;list-style:none}
.hp-menus a{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.hp-menus li:first-child a{border-top:0}
.hp-menu-name{font:500 22px/1.2 var(--serif)}
.hp-menu-line{font-size:14px;line-height:1.45;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.hp-menus a:hover .hp-menu-name{color:var(--wine)}}
.hp-photo{position:relative;margin:0;width:100%;max-width:var(--photo-width);height:min(76vh,700px);align-self:center;justify-self:center;overflow:hidden;background:var(--cream)}
.hp-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hp-photo .hp-photo-outgoing{position:absolute;inset:0;z-index:1;pointer-events:none;animation:none!important}
/* The photograph and words carry names only while an occasion swaps (home-page.js), so leaving the page just cross-fades. */
html.hp-swapping .hp-photo img{view-transition-name:hp-photo}
/* Front page arrival, once per visit: the photograph opens from the right as the headline and its sentence rise, the
   occasions follow one by one, then the suggestion comes across. */
@keyframes hp-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes hp-pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes hp-unveil{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
html.is-arriving .hp-hero-copy>h1{animation:hp-rise 650ms var(--ease-out) backwards}
html.is-arriving .hp-lede{animation:hp-rise 650ms var(--ease-out) 110ms backwards}
html.is-arriving .hp-prompt{animation:hp-rise 600ms var(--ease-out) 220ms backwards}
html.is-arriving .hp-occasion{animation:hp-pop 420ms var(--ease-out) calc(300ms + var(--o) * 45ms) backwards}
html.is-arriving .hp-suggest>*,html.is-arriving .hp-hero-copy>.pg-actions{animation:sv-across 380ms var(--ease-out) 640ms backwards}
html.is-arriving .hp-photo img{animation:hp-unveil 900ms var(--ease-in-out) 120ms backwards}
/* Choosing an occasion: the new photograph wipes across from the right while the old one dims beneath it, and the new
   words come across line by line as the old ones fade. */
::view-transition-old(hp-photo){animation:hp-dim 600ms var(--ease-in-out) both}
::view-transition-new(hp-photo){animation:hp-wipe 600ms var(--ease-in-out) both}
@keyframes hp-dim{to{filter:brightness(.55)}}
@keyframes hp-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
html.hp-swapping .hp-hero-copy{view-transition-name:hp-copy}
::view-transition-old(hp-copy){animation:hp-out 160ms ease both}
::view-transition-new(hp-copy){animation:none}
@keyframes hp-out{to{opacity:0}}
.hp-swap .hp-idea,.hp-swap .hp-menus li,.hp-swap [data-quote]{animation:sv-across 300ms var(--ease-out) backwards}
.hp-swap .hp-menus li:nth-child(1){animation-delay:60ms}
.hp-swap .hp-menus li:nth-child(2){animation-delay:110ms}
.hp-swap .hp-menus li:nth-child(3){animation-delay:160ms}
.hp-swap [data-quote]{animation-delay:200ms}
.hp-taste{padding:clamp(32px,4vw,64px) var(--padx) clamp(40px,5vw,64px)}
.hp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 48px;margin-bottom:20px}
.hp-head h2{margin:0}
.hp-head p{max-width:44ch;margin:0;color:var(--ink-soft)}
.hp-taste-row{--row:clamp(100px,11vw,170px);display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.hp-taste-row li{flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));overflow:hidden;background:var(--cream)}
.hp-taste-row a{position:relative;display:block;color:#fff;text-decoration:none}
/* The tile clips anything outside it, so the focus ring is drawn inside the photo: wine, with an ivory line within. */
.pg-page .hp-taste-row a:focus-visible{outline:3px solid var(--wine);outline-offset:-3px}
.hp-taste-row a:focus-visible::after{content:'';position:absolute;inset:3px;border:2px solid #f6ead6;pointer-events:none}
.hp-taste-row img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;transition:transform 1.1s var(--ease-out)}
.hp-taste-row span{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;background:linear-gradient(0deg,rgba(20,12,10,.74),rgba(20,12,10,0));font:600 14px/1.3 var(--sans)}
@media (hover:hover) and (pointer:fine){.hp-taste-row a:hover img{transform:scale(1.035)}}
.hp-serve{padding:clamp(48px,6vw,88px) var(--padx);background:var(--cream)}
.hp-serve-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hp-serve-list li+li{border-left:1px solid var(--line)}
.hp-serve-list a{display:block;height:100%;padding:22px 24px 26px 0;color:var(--ink);text-decoration:none}
.hp-serve-list li+li a{padding-left:24px}
.pg-page .hp-serve-list h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:500 24px/1.15 var(--serif)}
.hp-serve-list h3 svg{flex:none;color:var(--wine);transition:transform 200ms var(--ease-out)}
.hp-serve-list p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.pg-page .hp-serve-list a:hover h3{color:var(--wine)}.hp-serve-list a:hover svg{transform:translateX(3px)}}
.hp-venue{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(28px,5vw,72px);padding:clamp(56px,7vw,104px) var(--padx)}
.hp-venue-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hp-venue-copy h2 img{display:block;width:clamp(300px,26vw,390px);height:auto;filter:saturate(.78)}
.hp-venue-copy p{max-width:44ch;margin:18px 0 8px;color:var(--ink-soft)}
.hp-words{padding:clamp(48px,6vw,88px) var(--padx);background:var(--wine-dark);color:#f6ead6;text-align:center}
.hp-words figure{margin:0}
.hp-words blockquote{margin:0}
.hp-words blockquote p{max-width:26ch;margin:0 auto;font:500 clamp(30px,3.6vw,48px)/1.15 var(--serif);color:#fff}
.hp-words figcaption{margin-top:14px;font-size:15px;color:#e2cdb8}
.hp-words-note{display:block;max-width:56ch;margin:6px auto 0;font-size:14px;line-height:1.5;color:#d9c3ad}
.pg-page .hp-words .pg-link{margin-top:8px;color:#f6ead6}
.hp-words :focus-visible{outline-color:#f6ead6}
.hp-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(28px,5vw,72px);padding:clamp(56px,7vw,104px) var(--padx)}
.hp-story p{max-width:56ch;margin:0 0 14px;color:var(--ink-soft)}

/* Our services */
.sv-head,.mn-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;padding:clamp(28px,4vw,56px) var(--padx) 18px}
.sv-head p,.mn-head p{max-width:50ch;margin:0;color:var(--ink-soft)}
/* Side by side: the three ways of serving as three tall photographs on the 4px gutter, each named up its edge in the
   serif. The chosen one opens wide (350ms, the on-screen curve) and its words arrive once it has opened; the others
   narrow and darken, one hover or tap away. On arrival the four come together into the row, once. Under 720px the
   photographs stack as strips and the chosen one opens tall. */
.sv-doors-wrap{padding:0 var(--padx) clamp(40px,5vw,72px)}
.sv-doors{display:flex;gap:4px;height:min(76vh,700px);min-height:520px;margin:0 0 12px;padding:0;list-style:none}
.sv-door{--rise:56px;position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--ink);color:#fff;transition:flex-grow 350ms var(--ease-in-out)}
.sv-door.is-open{flex-grow:6}
.sv-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-door video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity 500ms ease}
.sv-door video.is-playing{opacity:1}
.sv-door[data-style=bar] video{object-position:50% 58%}
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce),print{.sv-door video{display:none!important}}
.sv-door::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,12,10,.8),rgba(20,12,10,.52));transition:opacity 200ms ease}
.sv-door.is-open::after{background:linear-gradient(to top,rgba(20,12,10,.88) 0%,rgba(20,12,10,.55) 46%,rgba(20,12,10,.06) 78%)}
/* The gold line marks the open one. */
.sv-door.is-open::before{content:'';position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:var(--gold)}
.sv-door-open{position:absolute;inset:0;z-index:1;width:100%;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.sv-door.is-open .sv-door-open{cursor:default}
.sv-door-open:focus-visible{outline:2px solid #f6ead6;outline-offset:-6px}
.sv-door-side{position:absolute;left:50%;bottom:30px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;text-orientation:sideways;white-space:nowrap;font:500 clamp(30px,2.6vw,42px)/1 var(--serif);letter-spacing:-.01em;transition:opacity 200ms var(--ease-out) 220ms}
.sv-door.is-open .sv-door-side{opacity:0;transition:opacity 120ms ease}
/* The words: out of reach while a photograph is closed; they arrive once it has opened, and leave at once. */
.sv-door-details{position:absolute;z-index:2;left:clamp(24px,3vw,48px);bottom:clamp(26px,3vw,44px);width:min(560px,calc(60vw - 96px));opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 120ms ease,transform 120ms ease,visibility 0s linear 120ms}
.sv-door.is-open .sv-door-details{opacity:1;visibility:visible;transform:none;transition:visibility 0s linear 220ms}
/* The words come across: each line wipes in from the left as it slides into place, 45ms after the one above, starting
   as the photograph finishes opening. Quick (280ms each, all done by about 650ms), and replayed each time one opens. */
@keyframes sv-across{
  from{opacity:0;transform:translateX(-28px);clip-path:inset(-20% 100% -20% 0)}
  to{opacity:1;transform:none;clip-path:inset(-20% -10% -20% 0)}
}
.sv-door-details>*{--d:0ms}
.sv-door-details>p{--d:45ms}
.sv-door-details>ul{--d:90ms}
.sv-door-details>.pg-actions{--d:135ms}
.sv-door.is-open .sv-door-details>*{animation:sv-across 280ms var(--ease-out) calc(220ms + var(--d)) backwards}
.pg-page .sv-door-details h2{margin:0 0 12px;font-size:clamp(48px,5vw,80px);line-height:1;letter-spacing:-.02em;color:#fff}
.sv-door-details p{max-width:46ch;margin:0 0 16px;color:#efe6da}
.sv-checks{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 24px;padding:0;list-style:none}
.sv-checks li{display:flex;align-items:center;gap:10px;font-size:15px;color:#fff}
.sv-checks svg{flex:none;color:#f6ead6}
.sv-door .pg-link{color:#f6ead6}
.sv-credit{margin:0;font-size:13px;color:var(--muted)}
/* Arrival, once: the row waits (at most about half a second, services-page.js) until its photographs are ready, so no
   dark panel ever moves on its own. Then the photographs rise into place left to right, 90ms apart, in one long soft
   ease-out, each picture settling back from a slight zoom inside its frame; each name fades up as its photograph lands,
   then the open one's words come across. Only transform and opacity move. */
@keyframes sv-rise{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes sv-settle{from{transform:scale(1.12)}}
@keyframes sv-name{from{opacity:0;translate:0 12px}}
@keyframes sv-fade{from{opacity:0}}
.sv-doors.is-arriving .sv-door{animation:sv-rise 900ms cubic-bezier(.22,1,.36,1) calc(var(--i) * 90ms) backwards}
.sv-doors.is-arriving .sv-door img{animation:sv-settle 1500ms cubic-bezier(.22,1,.36,1) calc(var(--i) * 90ms) backwards}
.sv-doors.is-arriving .sv-door-side{animation:sv-name 500ms var(--ease-out) calc(560ms + var(--i) * 90ms) backwards}
.sv-doors.is-arriving .sv-door.is-open .sv-door-details>*{animation-delay:calc(780ms + var(--d))}
.sv-doors.is-holding,.sv-doors.is-holding *{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){
  .sv-door:not(.is-open):hover::after{opacity:.88}
  .sv-door .pg-link:hover{color:#fff}
}

/* The quotation moment (page-transitions.js). A quote button grows into this wine panel and the form page loads
   behind it; there the same panel is drawn from the first paint and lifts away (bottom first) as the title rises in. */
.qt-wipe,.qt-arrive body::before{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:0 var(--padx);background:var(--wine);color:#f6ead6;font:500 clamp(40px,5vw,64px)/1.05 var(--serif);letter-spacing:-.02em;text-align:center;pointer-events:none}
.qt-wipe{clip-path:inset(50%)}
.qt-arrive body::before{content:'Your occasion starts here.';content:'Your occasion starts here.' / '';transform:translateY(0)}
.qt-arrive.qt-revealing body::before{animation:qt-lift 600ms var(--ease-in-out) 80ms forwards}
@keyframes qt-lift{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes qt-fade{to{opacity:0}}
@keyframes qt-rise{from{opacity:0;transform:translateY(18px)}}
.qt-arrive.qt-revealing .qp-head>*{animation:qt-rise 500ms var(--ease-out) 380ms backwards}
.qt-arrive.qt-revealing .qp-head>p{animation-delay:460ms}

/* Messages: the launcher opens a wine cover, which drops off the screen.
   The destination stays still underneath; its entrance starts after the drop. */
.sd-wipe,.sd-arrive body::before{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:0 var(--padx);background:var(--wine);color:#f6ead6;font:500 clamp(40px,5vw,64px)/1.05 var(--serif);letter-spacing:-.02em;text-align:center;pointer-events:none}
.sd-wipe{clip-path:inset(50%)}
.sd-arrive body::before{content:'Let’s talk.';content:'Let’s talk.' / '';transform:translateY(0)}
.sd-account.sd-arrive body::before{content:'Your requests, all together.';content:'Your requests, all together.' / ''}
.sd-account.sd-arrive #main .in-page>.section{opacity:0}
.sd-arrive.sd-revealing body::before{animation:sd-drop 480ms var(--ease-in-out) 60ms forwards}
@keyframes sd-drop{from{transform:translateY(0)}to{transform:translateY(100%)}}
.sd-arrive #main .in-head,.sd-arrive #main .support-layout,.sd-arrive #main .support-signed-out{opacity:0}
@keyframes sd-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.sd-settling #main .in-head>*,.sd-settling #main .support-side>*,.sd-settling #main .support-chat,.sd-settling #main .support-signed-out>*{animation:sd-enter 300ms var(--ease-out) both}
.sd-settling #main .in-head>p{animation-delay:45ms}
.sd-settling #main .support-side>*{animation-delay:80ms}
.sd-settling #main .support-side>:nth-child(n+2){animation-delay:120ms}
.sd-settling #main .support-chat{animation-delay:100ms}
.sd-settling #main .support-chat .bubble{animation:sd-enter 250ms var(--ease-out) 180ms both}
.sd-settling #main .support-chat .quick-options{animation:sd-enter 250ms var(--ease-out) 230ms both}
.sd-account.sd-settling #main .in-page>.section>*{animation:sd-enter 300ms var(--ease-out) 80ms both}
.sd-account.sd-settling #account-orders .enquiry{animation:sd-enter 260ms var(--ease-out) 120ms both}
.sd-account.sd-settling #account-orders .enquiry:nth-child(n+2){animation-delay:160ms}
.sd-account.sd-settling #account-orders .enquiry:nth-child(n+3){animation-delay:200ms}
@media(prefers-reduced-motion:reduce){
  .sd-wipe,.sd-arrive body::before{display:none}
  .sd-arrive #main .in-head,.sd-arrive #main .support-layout,.sd-arrive #main .support-signed-out{opacity:1}
  .sd-account.sd-arrive #main .in-page>.section{opacity:1}
  .sd-account.sd-settling #main .in-page>.section>*,.sd-account.sd-settling #account-orders .enquiry{animation:none}
  .sd-settling #main .in-head>*,.sd-settling #main .support-side>*,.sd-settling #main .support-chat,.sd-settling #main .support-signed-out>*,.sd-settling #main .support-chat .bubble,.sd-settling #main .support-chat .quick-options{animation:none}
}

/* Menus (html's scroll-padding already clears the header; the margin clears the filter bar) */
.mn-page{interpolate-size:allow-keywords}
/* One gold underline glides between the menu tabs (menus-page.js places it); the tabs' own underlines step aside. */
.mn-filter .pw-filter-group{position:relative}
.mn-filter .pw-filter-btn::after{display:none}
.mn-ind{position:absolute;left:0;top:0;height:2px;background:var(--gold);pointer-events:none;transition:transform 380ms cubic-bezier(.65,0,.35,1),width 380ms cubic-bezier(.65,0,.35,1)}
/* The menus cascade in on arrival (menus-page.js), so the list itself does not also settle as a block. */
@media (prefers-reduced-motion:no-preference){html.is-arriving .pg-page.mn-page>.mn-list{animation:none}}
.mn-list{padding:0 var(--padx) clamp(40px,5vw,72px)}
.mn-group{margin-top:30px}
.pg-page .mn-group-title{margin:0 0 8px;font-size:clamp(28px,2.6vw,38px)}
.mn-menu{border-top:1px solid var(--line);scroll-margin-top:64px}
.mn-group .mn-menu:last-child{border-bottom:1px solid var(--line)}
.mn-summary{display:grid;grid-template-columns:96px minmax(0,1fr) 28px;align-items:center;gap:20px;padding:14px 0;list-style:none;cursor:pointer}
.mn-summary::-webkit-details-marker{display:none}
.mn-thumb{display:block;width:96px;height:72px;object-fit:cover;background:var(--cream)}
.mn-name{display:block;font:500 26px/1.15 var(--serif);color:var(--ink)}
.mn-desc{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.mn-chevron{display:grid;place-items:center;color:var(--wine);transition:transform 300ms var(--ease-out)}
.mn-menu[open] .mn-chevron{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.mn-summary:hover .mn-name{color:var(--wine)}}
.mn-menu::details-content{block-size:0;overflow:hidden;transition:block-size 350ms var(--ease-out),content-visibility 350ms allow-discrete}
.mn-menu[open]::details-content{block-size:auto}
.mn-body{padding:4px 0 28px 116px}
/* A set menu stays in one column; only a long list (.mn-long) flows on into the next. A heading never ends a column. */
.mn-sections{columns:3 220px;column-gap:40px}
.mn-sections section{margin:0 0 18px;break-inside:avoid}
.mn-sections .mn-long{break-inside:auto}
.pg-page .mn-sections h3{margin:0 0 6px;font-size:14px;color:var(--wine);break-after:avoid}
.mn-sections ul{margin:0;padding:0;list-style:none}
/* Each dish on its own line, with a small wine square and a hairline beneath, so a list never reads as one long dish. */
.mn-sections li{position:relative;padding:7px 0 7px 16px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;break-inside:avoid}
.mn-sections li:last-child{border-bottom:0}
.mn-sections li::before{content:'';position:absolute;left:0;top:calc(7px + .725em);width:5px;height:5px;background:var(--wine);transform:translateY(-50%)}
.mn-new-badge{display:inline-block;margin:0 8px 2px 0;padding:2px 7px;border:1px solid var(--gold);border-radius:999px;background:#f4ead7;color:var(--wine);font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.02em;vertical-align:middle}
/* Opening a menu: as it slides open, its headings and dishes come out one after another, each time it opens. */
@keyframes mn-dish{from{opacity:0;transform:translateX(-10px)}}
.mn-menu.mn-opening .mn-sections h3,.mn-menu.mn-opening .mn-sections li{animation:mn-dish 300ms var(--ease-out) calc(80ms + var(--k,0) * 22ms) backwards}
.mn-notes{max-width:68ch;margin-top:14px}
.mn-notes p{margin:0 0 6px;font-size:13px;color:var(--muted)}
.mn-body .pg-actions{margin-top:16px}

@media (max-width:1000px){
  .hp-hero,.hp-venue,.hp-story{grid-template-columns:minmax(0,1fr)}
  .hp-photo{order:-1;width:min(100%,var(--photo-width),calc(var(--photo-height) * 1.5));height:auto;min-height:0;aspect-ratio:3/2}
  .hp-serve-list li:nth-child(3){border-left:0}
  .hp-serve-list li:nth-child(3) a{padding-left:0}
  .hp-serve-list li:nth-child(n+3){border-top:1px solid var(--line)}
  .site-header nav{top:100%;gap:0;padding:8px var(--padx) 24px;background:#fff;font-size:18px;box-shadow:none;border-bottom:1px solid var(--line)}
  .site-header nav>a:not(.pg-btn){align-self:flex-start}
  .site-header nav>a.pg-btn{justify-content:center;min-height:48px;margin-top:12px}
}
@media (max-width:720px){
  :root{--row:94px}
  .site-header{height:91.2px}
  .site-header .header-animated-brand{width:110.4px;height:81.6px}
  .mn-menu{scroll-margin-top:0}
  .pw-filter-group{gap:0 18px}
  .pw-long,.pw-count{display:none}
  .pw-short{display:inline}
  .pg-btn-small{padding:0 14px;gap:8px}
  .mn-filter{position:static}
  .sv-doors{flex-direction:column;height:auto;min-height:0}
  .sv-door{--rise:28px;flex:none;height:84px;transition:none}
  /* Every strip keeps its words at its foot, so a closing strip's words fade where they were instead of jumping up. */
  .sv-door{display:flex;align-items:flex-end}
  .sv-door.is-open{flex:none;height:auto;min-height:520px}
  /* The words fill more of a phone-sized photograph, so the shade reaches higher. */
  .sv-door.is-open::after{background:linear-gradient(to top,rgba(20,12,10,.9) 0%,rgba(20,12,10,.72) 60%,rgba(20,12,10,.3) 100%)}
  .sv-door-side{left:20px;top:50%;bottom:auto;transform:translateY(-50%);writing-mode:horizontal-tb;font-size:30px}
  .sv-door-details{position:relative;left:auto;bottom:auto;width:auto;padding:28px 20px}
  .pg-page .sv-door-details h2{font-size:44px}
  /* A strip opens in 420ms (services-page.js); its words come across as it finishes. */
  .sv-door.is-open .sv-door-details>*{animation-delay:calc(300ms + var(--d))}
  .hp-occasion{flex:1 1 calc(50% - 4px)}
  .hp-taste-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-taste-row img{aspect-ratio:4/3}
  .hp-serve-list{grid-template-columns:minmax(0,1fr)}
  .hp-serve-list li+li{border-left:0;border-top:1px solid var(--line)}
  .hp-serve-list li+li a{padding-left:0}
  .mn-summary{grid-template-columns:64px minmax(0,1fr) 24px;gap:14px}
  .mn-thumb{width:64px;height:48px}
  .pg-page .mn-name{font-size:22px}
  .mn-body{padding-left:0}
  .pw-viewer{padding:64px 10px 84px}
  .pw-viewer-prev,.pw-viewer-next{top:auto;bottom:max(16px,env(safe-area-inset-bottom));margin:0}
  .pw-viewer-prev{left:calc(50% - 60px)}
  .pw-viewer-next{right:calc(50% - 60px)}
  .pw-viewer-figure img{max-height:calc(100dvh - 230px)}
  .site-footer{padding:48px var(--padx) 88px}
}
/* Polish across the site. Colours ease instead of snapping (160ms); motion that answers a hover stays small; sections
   ease into place as they scroll into view, driven by the scroll itself (no script to stall, and browsers without it
   simply show the page). Pages with their own motion (Our services' photographs, Mahogany Ridge, the photo walls) are
   left to it. Everything that moves is off under reduced motion. */
.pg-link,.text-link,.site-header nav>a,.site-footer a,.mn-name,.hp-menus .hp-menu-name,.ct-list a{transition:color 160ms ease,text-decoration-color 160ms ease,text-decoration-thickness 160ms ease}
.qp-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea),.in-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea){transition:border-color 160ms ease}
.qp-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus,.in-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--wine)}
.qp-page :is(.mode-card,.format-card,.meal-tile,.drink-tile,.option-row){transition:border-color 160ms ease,background-color 160ms ease}
/* The menu button's two lines turn into a cross while the phone menu is open. */
.nav-toggle span{transition:transform 220ms var(--ease-out)}
/* While the phone menu is open the page below the header dims; a tap there closes the menu (app.js setMenu). */
@media (max-width:1000px){
  .site-header::before{content:'';position:fixed;top:var(--nav-top,80px);left:0;right:0;bottom:0;z-index:-1;background:rgba(20,12,10,.4);opacity:0;pointer-events:none}
  html.nav-open .site-header::before{opacity:1;pointer-events:auto}
  /* "Message us" steps aside while the menu is open, then comes back. */
  html .support-launcher{transition:background-color .2s,transform .2s,opacity 200ms ease}
  html.nav-open .support-launcher{opacity:0;pointer-events:none}
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (prefers-reduced-motion:no-preference){
  /* Reserve its final place beside Sign in; play on page navigation, after loading. */
  @media (min-width:1001px) and (hover:hover) and (pointer:fine){
    @keyframes nav-quote-arrive{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    html.header-quote-arrival .site-header nav>a.pg-btn[href="/request-quote"]{animation:nav-quote-arrive 520ms var(--ease-out) 220ms backwards}
    html.header-quote-arrival:is(.is-loading,.app-intro-pending) .site-header nav>a.pg-btn[href="/request-quote"]{animation-play-state:paused}
  }
  @media (hover:hover) and (pointer:fine){
    .mn-menu:not([open]) .mn-summary:hover .mn-chevron{transform:translateY(2px)}
  }
  /* The phone menu drops open like a blind from under the header, its links dropping in one after another with the
     quote button last; closing lifts it away (app.js setMenu keeps it on screen for the 200ms). */
  @media (max-width:1000px){
    @keyframes nav-drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
    @keyframes nav-lift{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
    @keyframes nav-item{from{opacity:0;transform:translateY(-12px)}}
    .site-header nav.open{animation:nav-drop 360ms var(--ease-out)}
    .site-header nav.open>a{animation:nav-item 340ms var(--ease-out) calc(60ms + var(--n,0) * 35ms) backwards}
    .site-header nav.open>a:nth-child(2){--n:1}
    .site-header nav.open>a:nth-child(3){--n:2}
    .site-header nav.open>a:nth-child(4){--n:3}
    .site-header nav.open>a:nth-child(5){--n:4}
    .site-header nav.open>a:nth-child(6){--n:5}
    .site-header nav.open>a:nth-child(7){--n:6}
    .site-header nav.open>a:nth-child(n+8){--n:7}
    .site-header nav.closing{animation:nav-lift 200ms var(--ease-in-out) forwards}
    .site-header nav.closing>a{animation:none;opacity:0;transition:opacity 120ms ease}
    .site-header::before{transition:opacity 260ms ease}
  }
  /* "Message us" settles in once the page has arrived, instead of appearing with a jump. */
  html.is-first-page .support-launcher{animation:pg-settle 420ms var(--ease-out) 900ms backwards}
  /* Sections ease up into place as they scroll into view, done once their top is 220px into the screen, however tall. */
  @supports (animation-timeline:view()){
    @keyframes rv-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
    :is(.hp-taste,.hp-serve-list>li,.hp-venue,.hp-words figure,.hp-story,.hp-close,.mn-group,.mn-close,.kw-list li,.ct-list li,.ct-quote,.sv-close,.in-close,.footer-top>*){animation:rv-in linear both;animation-timeline:view();animation-range:entry 0px entry 220px}
  }
}

/* After the Mahogany Ridge introduction: as its logo dissolves, the page settles in beneath it (mahogany-animation.js
   adds html.mr-landing for two seconds). The heading and words drop into place one after another, the film drops open
   like a blind, and the photo wall's heading follows. */
@keyframes mr-drop{from{opacity:0;transform:translateY(-16px)}}
@keyframes mr-blind{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){
  html.mr-landing .mr-hero-copy>*{animation:mr-drop 640ms var(--ease-out) calc(220ms + var(--n,0) * 80ms) backwards}
  html.mr-landing .mr-hero-copy>:nth-child(2){--n:1}
  html.mr-landing .mr-hero-copy>:nth-child(3){--n:2}
  html.mr-landing .mr-hero-copy>:nth-child(4){--n:3}
  html.mr-landing .mr-hero-copy>:nth-child(n+5){--n:4}
  html.mr-landing .mr-hero-film{animation:mr-blind 760ms var(--ease-in-out) 380ms backwards}
  html.mr-landing .mr-wall-head{animation:mr-drop 640ms var(--ease-out) 700ms backwards}
}
/* styles.css still has an old rule that lifts every button in a window out of the layout (dialog button{position:absolute},
   from a retired photo viewer). The newer windows lay their buttons out normally; only their close buttons sit in a corner. */
.ce-dialog button:not(.enq-close),.vf-dialog button:not(.vf-close),.te-dialog button,.regular-editor button{position:relative}
/* The "Save for next time" window (regular-order-ui.js) has a cream card, so it needs dark text, not the old dialog white. */
dialog.regular-editor{color:var(--ink)}
/* Careers: the openings load after the page, so their space is held (the footer doesn't jump) and they settle in. */
.vacancy-list:has(> .loading){min-height:min(60vh,520px)}
/* The held space rarely matches the answer (one short card when there are no openings), so the footer waits unseen
   until the list has loaded and then fades in where it belongs, instead of jumping up the screen. */
body:has(#vacancy-list>.loading) .site-footer{visibility:hidden;opacity:0}
body:has(#vacancy-list) .site-footer{transition:opacity 360ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){body:has(#vacancy-list) .site-footer{transition:opacity 360ms ease!important}}
@media (prefers-reduced-motion:no-preference){.vacancy-list>*{animation:pg-settle 420ms var(--ease-out) backwards}.vacancy-list>:nth-child(2){animation-delay:60ms}.vacancy-list>:nth-child(n+3){animation-delay:120ms}}
/* Photographs still downloading fade in as they arrive (app.js marks them), rather than appearing in one go. */
img.img-wait{opacity:0}
img.img-in{transition:opacity 500ms ease!important}

@media (prefers-reduced-motion:reduce){
  .pg-btn,.pg-btn svg,.pw-shot img,.pw-filter-btn::after,.pw-viewer-btn,.hp-occasion,.hp-taste-row img,.hp-serve-list h3 svg,.mn-chevron,.sv-door,.sv-door::after{transition:none}
  /* Fewer, gentler: no gathering and no sliding, but the words still fade in so the change reads. */
  .sv-doors.is-arriving .sv-door,.sv-doors.is-arriving .sv-door img,.sv-doors.is-arriving .sv-door-side{animation:none}
  .site-header nav>a:not(.pg-btn)::after{transition:none}
  /* Pages still arrive, as a short fade without movement. These gentle fades are marked
     !important to come through styles.css, which switches every animation off under reduced motion. */
  html.is-arriving .pg-page>*{animation:sv-fade 360ms ease backwards!important}
  /* The phone menu fades in and out; an opened strip on Our services and an opened menu fade in. */
  .site-header nav.open{animation:sv-fade 200ms ease!important}
  .site-header nav.closing{animation:hp-out 180ms ease forwards!important}
  .site-header::before{transition:opacity 200ms ease!important}
  .sv-door.is-open img{animation:sv-fade 300ms ease!important}
  .mn-menu.mn-opening .mn-sections{animation:sv-fade 260ms ease!important}
  html.is-arriving .hp-hero *{animation:none!important}
  /* A new occasion's suggestions fade in together. */
  .hp-swap :is(.hp-idea,.hp-menus li,[data-quote]){animation:sv-fade 300ms ease backwards!important}
  .qt-arrive.qt-revealing body::before{animation:qt-fade 400ms ease 80ms forwards!important}
  .qt-arrive .qp-head>*{animation:none}
  .sv-door-details,.sv-door.is-open .sv-door-details{transform:none}
  .sv-door.is-open .sv-door-details{transition:visibility 0s}
  .sv-door.is-open .sv-door-details>*,.sv-doors.is-arriving .sv-door.is-open .sv-door-details>*{animation:sv-fade 200ms ease backwards!important}
  /* On its own: a browser without ::details-content would drop the whole list above. */
  .mn-menu::details-content{transition:none}
  .mn-menu.mn-opening .mn-sections h3,.mn-menu.mn-opening .mn-sections li{animation:none}
  .pg-btn:active,.pw-viewer-btn:active{transform:none}
  .pw-shot:hover img,.hp-taste-row a:hover img{transform:none}
  .pw-tile.is-waiting img{opacity:1;transform:none;filter:none}
  /* Page changes still cross-fade, without anything moving. */
  ::view-transition-group(*){animation:none!important}
  ::view-transition-old(*){animation:hp-out 260ms ease both!important}
  ::view-transition-new(*){animation:sv-fade 260ms ease both!important}
  /* The header doesn't change, so it stays solid instead of turning see-through halfway (the photo wall's filters and viewer). */
  ::view-transition-old(site-header),::view-transition-new(site-header){animation:none!important}
  /* Sections fade in as they scroll into view, and the header quote button fades in on arrival, without moving. */
  @supports (animation-timeline:view()){
    :is(.hp-taste,.hp-serve-list>li,.hp-venue,.hp-words figure,.hp-story,.hp-close,.mn-group,.mn-close,.kw-list li,.ct-list li,.ct-quote,.sv-close,.in-close,.footer-top>*){animation:sv-fade linear both!important;animation-timeline:view()!important;animation-range:entry 0px entry 220px!important}
  }
  @media (min-width:1001px) and (hover:hover) and (pointer:fine){
    html.header-quote-arrival .site-header nav>a.pg-btn[href="/request-quote"]{animation:sv-fade 360ms ease 220ms backwards!important}
    html.header-quote-arrival:is(.is-loading,.app-intro-pending) .site-header nav>a.pg-btn[href="/request-quote"]{animation-play-state:paused!important}
  }
}
/* Seasonal menu note at the top of the home page (home-page.js), only while staff have a seasonal menu switched on. */
.hp-season{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:18px var(--padx);background:var(--wine);color:#f6ead6;font:500 15px/1.45 var(--sans);animation:hp-season-in 650ms var(--ease-out) calc(120ms + var(--season-delay,0ms)) both}
.hp-season+.hp-season{border-top:2px solid #dfc68f}
.hp-season[data-season="independence"]{background:#172f56}
.hp-season>span:not(.hp-season-particles){position:relative;z-index:1}
.hp-season::after{content:"";position:absolute;inset:0 auto 0 -32%;width:30%;background:linear-gradient(100deg,transparent,#fff2,transparent);pointer-events:none;animation:hp-season-shimmer 1800ms ease-out calc(180ms + var(--season-delay,0ms)) both}
.hp-season-particles{position:absolute;inset:0;pointer-events:none;color:#fff;z-index:0}
.hp-season-particle{position:absolute;left:var(--particle-x);top:24%;width:15px;height:15px;opacity:0;animation:hp-season-spark 3200ms ease-out calc(200ms + var(--season-delay,0ms) + var(--particle-delay,0ms)) both;pointer-events:none}
.hp-season[data-season="independence"] .hp-season-particle{width:23px;height:16px}
.hp-season-particle svg{display:block;width:100%;height:100%}
html.is-loading .hp-season,html.app-intro-pending .hp-season,html.is-loading .hp-season::after,html.app-intro-pending .hp-season::after,html.is-loading .hp-season-particle,html.app-intro-pending .hp-season-particle{animation-play-state:paused}
.hp-season-name{font:500 25px/1.15 var(--serif);color:#fff}
.hp-season-line{flex:1 1 320px;color:#ead8c8}
.hp-season-go{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.hp-season-go svg{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hp-season:hover .hp-season-go svg{transform:translateX(3px)}}
@keyframes hp-season-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes hp-season-shimmer{from{opacity:0;transform:translateX(0)}20%{opacity:.7}to{opacity:0;transform:translateX(450%)}}
@keyframes hp-season-spark{0%{opacity:0;transform:translate3d(0,14px,0) rotate(0)}18%{opacity:.55}70%{opacity:.28}100%{opacity:0;transform:translate3d(var(--particle-drift),-22px,0) rotate(var(--particle-turn))}}
@media (prefers-reduced-motion:reduce),(prefers-reduced-data:reduce){.hp-season{animation:none!important}.hp-season::after,.hp-season-particles{display:none}}
@media print{.hp-season{animation:none!important}.hp-season::after,.hp-season-particles{display:none}}

/* Keep slideshow controls outside the feathered photograph. */
.hp-photo-panel{align-self:center;min-width:0;width:100%;display:grid;gap:12px}
.hp-photo-controls{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.hp-photo-controls button{min-width:44px;min-height:44px;border:0;border-radius:999px;background:rgba(252,250,245,.88);color:var(--wine);cursor:pointer;display:grid;place-items:center;padding:8px 14px;font:inherit}
.hp-photo-controls button:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.hp-photo-controls button[hidden]{display:none}
@media(max-width:1000px){.hp-photo-panel{order:-1}.hp-photo-panel .hp-photo{order:0}}
@media(max-width:720px){.hp-page.hp-photo-colours .hp-photo{border-radius:24px;--photo-feather:12px}.hp-photo-panel{gap:6px}}
@media print{.hp-photo-controls{display:none}}

/* The opening section is a quiet canvas around a small collection of photographs. */
.hp-hero.hp-hero--rebuild{position:relative;isolation:isolate;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3vw,48px);align-items:center;padding:clamp(32px,3.5vw,52px) var(--padx) clamp(44px,4.5vw,68px);background:var(--paper)}
.hp-hero--rebuild .hp-garden{display:none!important}
.hp-hero--rebuild .hp-hero-copy{padding:0;background:transparent;min-width:0}
.hp-hero--rebuild .hp-hero-copy::before{content:'';display:block;width:48px;height:3px;margin-bottom:22px;background:var(--wine);border-radius:2px}
.pg-page .hp-hero--rebuild h1{font-size:clamp(48px,4.3vw,66px);line-height:1.06;max-width:16ch}
.hp-hero--rebuild .hp-lede{margin-top:18px;max-width:48ch;font-size:16px;line-height:1.6}
.pg-page .hp-hero--rebuild .hp-prompt{margin-top:25px}
.hp-hero--rebuild .hp-occasions{gap:7px}
.hp-hero--rebuild .hp-occasion{border-radius:999px;padding:0 16px;font-size:14px;background:transparent}
.hp-hero--rebuild .hp-occasion[aria-pressed="true"]{background:var(--wine)}
.hp-hero--rebuild .hp-suggest{margin:19px 0 23px;padding:0;border:0}
.hp-hero--rebuild .hp-idea{margin-bottom:15px;font-size:15px;line-height:1.55}
.hp-hero--rebuild .hp-idea .pg-link{min-height:0}
.hp-hero--rebuild .hp-menus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.hp-hero--rebuild .hp-menus a{border:0;border-top:1px solid var(--line);padding:12px 0 0;gap:6px}
.hp-hero--rebuild .hp-menus li:first-child a{border-top:1px solid var(--line)}
.hp-hero--rebuild .hp-menu-name{font-size:21px}
.hp-hero--rebuild .hp-menu-line{font-size:13px;line-height:1.55}
.hp-hero--rebuild .pg-actions{gap:14px 22px}
.hp-hero--rebuild .hp-photo-panel{gap:14px;max-width:720px;justify-self:center}
.hp-photo-frame{padding:14px;border:1px solid #ddd4c7;border-radius:28px;background:#fffcf6;box-shadow:0 22px 56px rgba(65,43,28,.09)}
.hp-hero--rebuild .hp-photo{max-width:none;width:100%;height:clamp(340px,32vw,440px);aspect-ratio:auto;border-radius:18px;outline:0;border:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}
.hp-hero--rebuild .hp-photo img{max-width:none!important;max-height:none!important;object-position:center 42%}
.hp-photo-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.hp-photo-details img{display:block;width:100%;height:108px;object-fit:cover;border-radius:12px;background:var(--cream)}
.hp-hero--rebuild .hp-photo-controls{justify-content:flex-end;gap:10px;font-size:13px;padding:0 3px}
.hp-hero--rebuild .hp-photo-controls button{background:transparent;border:1px solid var(--line);padding:8px 12px}
.hp-hero--rebuild .hp-photo-controls [data-photo-position]{margin-right:auto;color:var(--ink-soft)}
.hp-hero--rebuild .hp-photo-controls [data-photo-pause]{border-color:transparent}
html.is-arriving .hp-hero--rebuild .hp-photo img{animation:hp-rise 650ms var(--ease-out) 120ms backwards}
@media(max-width:1000px){
  .hp-hero.hp-hero--rebuild{grid-template-columns:minmax(0,1fr);gap:30px}
  .hp-hero--rebuild .hp-photo-panel{order:-1;width:100%;max-width:680px}
  .hp-hero--rebuild .hp-photo{height:clamp(260px,47vw,420px);order:0}
  .hp-hero--rebuild .hp-hero-copy{max-width:680px;justify-self:center;width:100%}
}
@media(max-width:720px){
  .hp-hero.hp-hero--rebuild{padding-top:22px;padding-bottom:42px;gap:24px}
  .hp-photo-frame{padding:9px;border-radius:23px;box-shadow:0 12px 30px rgba(65,43,28,.07)}
  .hp-hero--rebuild .hp-photo{height:clamp(215px,58vw,340px);border-radius:15px}
  .hp-photo-details{gap:7px;margin-top:7px}
  .hp-photo-details img{height:64px;border-radius:10px}
  .hp-hero--rebuild .hp-photo-panel{gap:8px}
  .hp-hero--rebuild .hp-hero-copy::before{width:36px;margin-bottom:16px}
  .pg-page .hp-hero--rebuild h1{font-size:clamp(41px,10vw,54px)}
  .hp-hero--rebuild .hp-lede{font-size:15px}
  .hp-hero--rebuild .hp-menus{gap:18px}
  .hp-hero--rebuild .hp-menu-name{font-size:20px}
}
@media(max-width:380px){.hp-hero--rebuild .hp-menus{grid-template-columns:1fr}.hp-hero--rebuild .hp-occasion{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){html.is-arriving .hp-hero--rebuild .hp-photo img{animation:none}}
@media print{.hp-hero--rebuild .hp-photo-frame{box-shadow:none}.hp-hero--rebuild .hp-photo-panel{order:0}}

/* Photographs on a tilted orbit: soft frames, real depth and a calm surface. */
.hp-hero--rebuild .hp-photo-panel:has(.hp-photo-orbit){max-width:900px;gap:14px}
.hp-photo-orbit{position:relative;width:100%;height:clamp(420px,40vw,580px);perspective:none;touch-action:pan-y;cursor:grab;outline:0;isolation:isolate;overflow:hidden;border-radius:28px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hp-photo-orbit:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.hp-photo-orbit.is-dragging{cursor:grabbing}
.hp-orbit-group{position:absolute;inset:0;transform-style:flat;pointer-events:none;translate:0 var(--follow-y,0px)}
.hp-orbit-card{position:absolute;left:50%;top:50%;width:88%;height:82%;margin:0;transform-style:flat;backface-visibility:hidden;will-change:transform,opacity}
.hp-orbit-float{width:100%;height:100%;transform-style:preserve-3d}
.hp-orbit-mat{width:100%;height:100%;padding:9px;border:1px solid #dfd5c8;border-radius:24px;background:#fffcf6;box-shadow:0 24px 40px rgba(65,43,28,.17),0 6px 12px rgba(65,43,28,.08);overflow:hidden}
.hp-orbit-mat img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px;pointer-events:none}
.hp-photo-orbit .hp-orbit-mat{position:relative}
.hp-orbit-video{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;border-radius:16px;pointer-events:none;opacity:0;transition:opacity 200ms ease-out}
.hp-orbit-video.is-video-ready{opacity:1}
.hp-photo-orbit.is-still .hp-orbit-video{display:none;transition:none}
@media(max-width:720px){.hp-orbit-video{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:12px}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce){.hp-orbit-video{display:none!important;transition:none}}
@media print{.hp-orbit-video{display:none!important;transition:none}}
.hp-orbit-card.is-missing{visibility:hidden}
.hp-orbit-shadow{position:absolute;left:17%;bottom:6px;width:66%;height:38px;translate:0 var(--follow-y,0px);background:radial-gradient(ellipse,rgba(65,43,28,.17),rgba(65,43,28,.04) 48%,transparent 72%);pointer-events:none}
@keyframes hp-orbit-float{0%,100%{transform:translate3d(6px,0,0) rotateZ(0deg)}25%{transform:translate3d(0,-7px,0) rotateZ(.3deg)}50%{transform:translate3d(-6px,0,0) rotateZ(0deg)}75%{transform:translate3d(0,7px,0) rotateZ(-.3deg)}}
@media(prefers-reduced-motion:no-preference){.hp-orbit-float{animation:hp-orbit-float 12s ease-in-out infinite;animation-delay:var(--float-delay,0s)}}
.hp-photo-orbit.is-paused .hp-orbit-float,.hp-photo-orbit.is-dragging .hp-orbit-float{animation-play-state:paused}
.hp-photo-orbit.is-still .hp-orbit-float{animation:none;transform:none}
.hp-photo-orbit.is-tilting:not(.is-still) .hp-orbit-float{animation:none;transform:translate3d(var(--tilt-x,0px),var(--tilt-y,0px),0) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg)) rotateZ(var(--tilt-rz,0deg))}
.hp-photo-orbit.is-still .hp-orbit-card:not(.is-front){visibility:hidden}
.hp-photo-orbit.is-still .hp-orbit-card.is-front{transform:translate(-50%,-50%)!important;opacity:1!important;width:88%!important;height:88%!important}
/* Still photos (Reduce Motion, reduced data): the one being replaced stays in place underneath while the next fades in. */
.hp-orbit-card.is-under{visibility:visible!important;transform:translate(-50%,-50%)!important;opacity:1!important;width:88%!important;height:88%!important}
@media(max-width:1000px){.hp-hero--rebuild .hp-photo-panel:has(.hp-photo-orbit){max-width:760px}.hp-photo-orbit{height:clamp(390px,62vw,520px)}}
@media(max-width:720px){.hp-photo-orbit{height:clamp(300px,88vw,420px);perspective:none;border-radius:22px}.hp-orbit-mat{padding:6px;border-radius:18px;box-shadow:0 16px 26px rgba(65,43,28,.17),0 4px 8px rgba(65,43,28,.07)}.hp-orbit-mat img{border-radius:12px}.hp-orbit-shadow{height:28px;bottom:0}.hp-hero--rebuild .hp-photo-panel:has(.hp-photo-orbit){gap:12px}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce){.hp-orbit-float{animation:none!important}.hp-orbit-card:not(.is-front){visibility:hidden}.hp-orbit-card.is-front{transform:translate(-50%,-50%)!important;opacity:1!important;width:88%!important;height:88%!important}}
@media print{.hp-photo-orbit{height:340px;perspective:none;overflow:visible}.hp-orbit-card:not(.is-front),.hp-orbit-shadow{display:none}.hp-orbit-card.is-front{transform:translate(-50%,-50%)!important;opacity:1!important}.hp-orbit-float{animation:none!important}.hp-orbit-mat{box-shadow:none}}

/* Menu PDF preview shares the quotation dialog, with a zoomable, bounded scrollport. */
.menu-pdf-dialog{height:92vh;height:92dvh;max-height:94vh;max-height:94dvh;overflow:hidden;animation:none;transition:none;opacity:1;transform:none}
.menu-pdf-dialog>header{gap:12px}
.menu-pdf-dialog>header>strong{min-width:0;overflow-wrap:anywhere;font-size:17px}
.menu-pdf-dialog>header>button{font:600 14px var(--sans);padding:8px;min-height:44px}
.menu-pdf-dialog .pdf-actions>a{min-height:44px;justify-content:center}
.menu-pdf-zoom{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 14px 12px;flex-shrink:0}
.menu-pdf-zoom button{position:static;inset:auto;transform:none;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #b9ada5;border-radius:4px;background:#fff;color:#651227;font:600 14px var(--sans);cursor:pointer}
.menu-pdf-zoom button:disabled{opacity:.45;cursor:default}
.menu-pdf-zoom output{min-width:46px;text-align:center;font-size:14px;color:#302d28}
.menu-pdf-dialog :is(button,a,.pdf-pages):focus-visible{outline:3px solid #651227;outline-offset:2px}
.menu-pdf-dialog .pdf-pages{min-height:0;padding:0;overflow:auto;scroll-behavior:auto;overflow-anchor:none;touch-action:auto}
.menu-pdf-sheet-list{box-sizing:content-box;padding:10px}
.menu-pdf-dialog .pdf-page{width:100%;max-width:none;min-height:0;margin:0 0 16px}
.menu-pdf-dialog .pdf-page figcaption{box-sizing:border-box;height:30px;padding:6px 12px}
.menu-pdf-dialog .pdf-page canvas{width:100%;aspect-ratio:auto}
@media print{.menu-pdf-dialog{display:none!important}}

/* Phone layout audit, 18 October 2026: long closed service names need two lines inside the strip. */
@media (max-width:720px){
  .sv-door-side{right:20px;white-space:normal;line-height:1.1}
}