/* v4 Stone, shared by every page: palette, fonts, header and footer. The homepage adds stone.css, inner pages add style.css. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans.woff2) format('woff2')}
:root{--navy:#2E2B26;--red:#5F6F52;--cream:#EFEBE4;--on:#FBFAF7;--n60:rgba(46,43,38,0.7);--n15:rgba(46,43,38,0.15);--c70:rgba(239,235,228,0.75);--c20:rgba(239,235,228,0.2);
--serif:'Instrument Serif',Georgia,serif;--sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--gut:clamp(16px,4vw,56px);--tile:#FDFCFA;--sage-lt:#A9B89A;--brand-red:#D62828;--saffron:#E8641A;--colgap:clamp(32px,6vw,96px);--sec:clamp(64px,8vw,112px);--ease:cubic-bezier(.16,1,.3,1)}

/* header */
.hd{position:sticky;top:0;z-index:10;background:var(--cream);border-bottom:1px solid var(--n15)}
.hd .wrap{display:flex;align-items:center;gap:40px;height:76px}
.hd img{width:120px;height:auto}
.hd nav{display:flex;gap:32px;margin-left:auto;font-size:15px}
.hd nav a{text-decoration:none}
.hd nav a:hover,.hd nav a[aria-current]{color:var(--red)}
/* the page you are on: a short saffron underline from the seal */
.hd nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--saffron)}
.hd .btn{min-height:44px;padding:0 20px;font-size:15px}
/* phones and small tablets: the menu becomes one row you can swipe; call and WhatsApp sit in the bottom bar */
@media (max-width:900px){.hd .wrap{gap:20px;height:64px}.hd img{width:96px}.hd nav{gap:20px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}.hd nav::-webkit-scrollbar{display:none}.hd .btn{display:none}}

/* footer */
.ft{background:var(--navy);color:var(--cream);padding:80px 0 40px;font-size:15px}
.ft .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
.ft b{display:block;font-weight:600;margin-bottom:12px}
.ft a{display:block;text-decoration:none;color:var(--c70);padding:4px 0}
.ft a:hover{color:var(--cream)}
.ft p{margin:0;color:var(--c70)}
.ft__legal{grid-column:1/-1;border-top:1px solid var(--c20);padding-top:24px;margin-top:24px;font-size:13px}
@media (max-width:860px){.ft .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* signed-in editors: keep the header below the WordPress admin bar */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}

/* floating contact: WhatsApp + the "Call Chef" tab, on every page */
.fab{position:fixed;right:clamp(16px,2vw,28px);bottom:calc(clamp(16px,2vw,28px) + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;font-family:var(--sans)}
.fab a{text-decoration:none;color:var(--on);box-shadow:0 0 0 1px var(--c20),0 14px 30px -14px rgba(30,28,25,.55);transition:transform .35s var(--ease),background .3s}
.fab a:hover{transform:translateY(-2px)}
.fab svg{width:22px;height:22px;flex:none}
.fab__b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--red)}
.fab__l{display:none}
.fab__call{display:flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 8px;border-radius:999px;background:var(--navy)}
.fab__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--navy)}
.fab__ic svg{width:18px;height:18px}
.fab__t{display:grid;line-height:1.15}
.fab__t b{font:400 21px/1 var(--serif);letter-spacing:-.01em}
.fab__t small{font-size:12px;color:var(--c70);margin-top:3px}
.fab__call:hover{background:#3A3630}
.fab a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* phones: one bar along the bottom so nothing covers the text */
@media (max-width:640px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .fab{left:0;right:0;bottom:0;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(239,235,228,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--n15)}
  .fab a{box-shadow:none}
  .fab__b{width:auto;height:52px;padding:0 16px;border-radius:14px;display:flex;align-items:center;gap:8px;color:var(--on)}
  .fab__l{display:inline;font-weight:600;font-size:15px}
  .fab__call{flex:1;height:52px;border-radius:14px;padding:0 14px 0 6px}
  .fab__t b{font-size:19px}
  .fab__hrs{display:none}
}

/* service illustrations (inc/art.php): line art in the text colour, one accent */
.art{display:inline-block;--art-accent:var(--saffron)}
.art svg{display:block;width:100%;height:auto;overflow:visible}
.art .a-fill{fill:var(--art-accent)}
.art .a-fill--soft{fill-opacity:.28}
.art [class*="a-"]{transform-box:fill-box;transform-origin:center}
.art--icon{width:44px;flex:none}
.art--hero{width:min(100%,380px);justify-self:center;color:var(--navy)}
/* every loop starts and ends at rest, so a paused icon still looks complete */
@media (prefers-reduced-motion:no-preference){
  .art .a-steam>*{animation:a-steam 2.6s var(--ease) infinite}
  .art .a-steam>*:nth-child(2){animation-delay:.4s}.art .a-steam>*:nth-child(3){animation-delay:.8s}
  .art .a-fall{animation:a-fall 3.2s ease-in-out infinite}.art .a-fall--late{animation-delay:1.1s}
  .art .a-drift{animation:a-drift 4s ease-in-out infinite}
  .art .a-dash{animation:a-dash 1.4s ease-in-out infinite}
  .art .a-lift{animation:a-lift 3s var(--ease) infinite}.art .a-lift--small{animation-duration:2.2s}
  .art .a-rise>*{animation:a-rise 2.2s ease-in-out infinite}.art .a-rise>*:nth-child(2){animation-delay:.5s}.art .a-rise>*:nth-child(3){animation-delay:1s}
  .art .a-sway{transform-origin:top center;animation:a-sway 2.8s ease-in-out infinite}.art .a-sway--b{animation-delay:-1.4s}
  .art .a-draw{stroke-dasharray:60;animation:a-draw 3.4s var(--ease) infinite}
  .art .a-tilt{transform-box:view-box;transform-origin:60px 32px;animation:a-tilt 3.6s ease-in-out infinite}
  .art .a-flame{transform-origin:bottom center;animation:a-flame .9s ease-in-out infinite}.art .a-flame--b{animation-delay:-.45s}
  .art .a-bob{animation:a-bob 2.8s ease-in-out infinite}
  .art .a-swing{transform-box:view-box;transform-origin:60px 20px;animation:a-swing 3s ease-in-out infinite}
  /* small icons wait for a hover or keyboard focus; the big service drawing always moves */
  .art--icon *{animation-play-state:paused!important}
  :is(a,li,article):is(:hover,:focus-within) .art--icon *{animation-play-state:running!important}
}
@keyframes a-steam{50%{transform:translateY(-7px);opacity:.3}}
@keyframes a-fall{50%{transform:translateY(12px) rotate(40deg)}}
@keyframes a-drift{50%{transform:translateX(9px)}}
@keyframes a-dash{50%{transform:translateX(-7px);opacity:.4}}
@keyframes a-lift{40%,60%{transform:translateY(-8px)}}
@keyframes a-rise{50%{transform:translateY(-9px);opacity:.25}}
@keyframes a-sway{50%{transform:rotate(9deg)}}
@keyframes a-draw{50%{stroke-dashoffset:60}}
@keyframes a-tilt{50%{transform:rotate(-6deg)}}
@keyframes a-flame{50%{transform:scale(.9,1.16)}}
@keyframes a-bob{50%{transform:translateY(-5px)}}
@keyframes a-swing{50%{transform:rotate(7deg)}}
/* where the art sits */
.ph--art .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);gap:var(--colgap);align-items:center}
@media (max-width:860px){.ph--art .wrap{grid-template-columns:minmax(0,1fr)}.ph--art .art--hero{order:-1;width:150px;justify-self:start}}
.svl-spec__card .art--icon{display:block;width:52px;margin-bottom:16px}
.svc li h2,.spec h2{display:flex;align-items:center;gap:16px}
.spec .art--icon{width:34px}
.cq .art--icon{display:block;width:72px;margin-bottom:24px}
.svc,.chef{--art-accent:var(--sage-lt)}
.svc .art,.chef .art{--art-accent:var(--sage-lt)}

/* the Gourmet Guys seal, bottom right above the call tab (clear of left-aligned text); it turns as you scroll where the browser can link animation to scroll */
.seal{position:fixed;right:clamp(16px,2vw,28px);bottom:calc(clamp(16px,2vw,28px) + 70px + env(safe-area-inset-bottom,0px));z-index:39;width:clamp(84px,7vw,112px);pointer-events:none;filter:drop-shadow(0 10px 14px rgba(30,28,25,.22))}
.seal img{display:block;width:100%;height:auto}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.seal img{animation:seal-turn linear both;animation-timeline:scroll(root)}}}
@keyframes seal-turn{to{transform:rotate(540deg)}}
@media (max-width:640px){.seal{display:none}} /* no free corner on phones: it would cover text */

/* the wordmark as a neon sign (inc/art.php): letters warm up, then the red U flickers on and stays lit */
.neon{background:#1E1C19;padding:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px);transition:background .8s var(--ease) 1.4s;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 48px -28px rgba(30,28,25,.7)}
.neon svg{display:block;width:100%;height:auto;overflow:visible}
.neon .neon__l,.neon .neon__u{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.neon .neon__l{stroke:#F6EBDA;stroke-width:1.6;filter:url(#gg-neon-w);transition:opacity .9s var(--ease) .2s}
.neon .neon__u{stroke:#FF4A3D;stroke-width:2.8;filter:url(#gg-neon-r)}
/* lit by default; only while the script waits to switch it on is the sign dark */
.js .neon:not(.is-on) .neon__l{opacity:.16;filter:none}
.js .neon:not(.is-on) .neon__u{opacity:.12;filter:none}
/* the lit U throws a little red light onto the panel */
.neon.is-on{background:radial-gradient(ellipse 34% 60% at 40% 52%,rgba(255,74,61,.16),transparent 70%),#1E1C19}
@media (prefers-reduced-motion:no-preference){
  /* the U struggles on like a real tube, then hums now and then */
  .neon.is-on .neon__u{animation:neon-on 1.5s steps(1) .9s both,neon-hum 9s 4s infinite}
}
@keyframes neon-on{0%{opacity:.12}10%{opacity:1}16%{opacity:.25}26%{opacity:1}31%{opacity:.4}46%,100%{opacity:1}}
@keyframes neon-hum{0%,95%,100%{opacity:1}96%{opacity:.55}97%{opacity:1}98%{opacity:.7}}
.ftc .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--colgap);align-items:center}
@media (max-width:860px){.ftc .wrap{grid-template-columns:minmax(0,1fr)}}
.ct .neon{margin-top:32px}
.seal{transition:opacity .4s,transform .4s var(--ease)}
.seal--off{opacity:0;transform:translateY(12px)}

/* footer: city pages */
.ft__cities{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;border-top:1px solid var(--c20);padding-top:24px;margin-top:8px}
.ft__cities b{margin:0 6px 0 0}
.ft .ft__cities a{display:inline;padding:4px 0}
/* phones: logo on top, all five menu links on one full-width row below, nothing hidden off-screen */
@media (max-width:560px){
  .hd .wrap{flex-wrap:wrap;height:auto;padding-block:10px 8px;row-gap:4px}
  .hd nav{order:3;width:100%;margin-left:0;justify-content:space-between;overflow:visible;-webkit-mask:none;mask:none;font-size:13.5px;gap:8px}
  .hd nav a{padding:9px 0}
}

/* brand accents, used sparingly: the logo red for numbers and the seal saffron for underlines */
.facts b{color:var(--brand-red)}
.link{text-decoration-color:var(--saffron)}
.ft .ft__cities a:hover{color:#F4A06A}