/* Mockup Studio kit v2 — Swiss precision, premium-product finish.
   Type is the image: Instrument Serif (display only) + Inter Tight (everything else).
   Four sizes: --t-display, --t-head, --t-body, --t-small. Square. Mono + one brand field.
   Modes: html[data-mode=light|dark]. Per site: --field (brand colour) on :root. */

:root{
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --t-display:clamp(52px,min(10.4vw,17vh),208px);
  --t-head:clamp(26px,3vw,42px);
  --t-body:18px;
  --t-small:14px;
  --pad:24px; --max:1440px; --col-gap:20px;
  --band:clamp(80px,11vw,168px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --field:#111; --on-field:#fff;
  --bar-h:68px; --fade-h:40px;
}
@media (min-width:900px){ :root{ --pad:48px; --col-gap:32px } }
@media (max-width:599px){ :root{ --t-body:16px; --t-display:min(16vw,76px) } .display{-webkit-text-stroke:.5px currentColor} } /* phones: bigger, slightly heavier display type */

html[data-mode=light]{ --tint:color-mix(in srgb,var(--field) 9%,#F3F3F1); --bg:#F3F3F1; --ink:#111110; --muted:#6E6E6A; --rule:#D8D8D4; --ph:#E4E4E1; color-scheme:light }
html[data-mode=dark] { --tint:color-mix(in srgb,var(--field) 22%,#0E0E0D); --bg:#0E0E0D; --ink:#ECECE8; --muted:#8E8E89; --rule:#2B2B29; --ph:#1C1C1B; color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* body clips sideways overflow with `clip`, not `hidden`: hidden (or any overflow on html) turns body into a scroll box and breaks the sticky banner and nav */
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.5 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .35s,color .35s}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--field);color:var(--on-field)}

/* ---- Type (the only four sizes) ---- */
.display{font:400 var(--t-display)/.9 var(--serif);letter-spacing:-.025em;margin:0;text-wrap:balance}
.head{font:500 var(--t-head)/1.08 var(--sans);letter-spacing:-.03em;margin:0;text-wrap:balance}
.body{font-size:var(--t-body);line-height:1.5;margin:0}
.small{font-size:var(--t-small);line-height:1.45;margin:0}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
p{margin:0}
ol,ul{margin:0;padding:0}

/* ---- Grid ---- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px}
.grid>*{grid-column:1/-1}
@media (min-width:900px){
  .c-1-4{grid-column:1/5}.c-1-5{grid-column:1/6}.c-1-6{grid-column:1/7}.c-1-7{grid-column:1/8}
  .c-5-13{grid-column:5/13}.c-6-13{grid-column:6/13}.c-7-13{grid-column:7/13}.c-8-13{grid-column:8/13}.c-9-13{grid-column:9/13}
  .c-4-10{grid-column:4/10}
}

/* ---- Links & buttons (micro-details) ---- */
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease);padding-bottom:2px}
.ul:hover,.ul[aria-current]{background-size:100% 1px}
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 22px;background:var(--ink);color:var(--bg);font:500 var(--t-small)/1 var(--sans);letter-spacing:0;transition:background .25s,color .25s;white-space:nowrap}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover{background:var(--field);color:var(--on-field)}
.btn:hover .arr{transform:translateX(4px)}
.on-field .btn{background:var(--on-field);color:var(--field)}
.on-field .btn:hover{background:var(--ink);color:var(--bg)}
.on-ink .btn{background:var(--bg);color:var(--ink)}

/* ---- Nav: text-only row drawn as one "skin" per band style (paper / field / ink).
   JS clips each skin to exactly the part of its band behind the bar + fade, so the bar
   splits cleanly along band edges. The bar stays fixed at the top. ---- */
.site{position:sticky;top:var(--cbar-h);z-index:40;height:var(--bar-h)}
.skin{position:absolute;left:0;right:0;top:0;height:calc(var(--bar-h) + var(--fade-h));pointer-events:none;--sbg:var(--bg);color:var(--ink);background:linear-gradient(var(--sbg) 0 var(--bar-h),color-mix(in srgb,var(--sbg) 0%,transparent))}
.skin.on-field{--sbg:var(--field);color:var(--on-field)}
.skin.on-ink{--sbg:var(--ink);color:var(--bg)}
.skin.on-tint{--sbg:var(--tint);color:var(--ink)}
/* A logo drawn in the brand colour would vanish on the brand-colour band: draw it in the text colour there */
.skin.on-field .brand [fill="var(--field)"]{fill:currentColor}
.skin.on-field .brand [stroke="var(--field)"]{stroke:currentColor}
.skin.clone{clip-path:inset(100% 0 0 0)}
.skin,.skin.on-field,.skin.on-ink,.skin.on-tint{background:linear-gradient(var(--sbg) 0 var(--bar-h),color-mix(in srgb,var(--sbg) 0%,transparent))}
.skin a,.skin button{pointer-events:auto}
.site-bar{display:flex;align-items:center;gap:20px;height:var(--bar-h)}
.site-bar .brand{min-width:0}
/* Small phones: the bar keeps the name whole; the CTA lives in the hero and the menu instead (a cart stays) */
@media (max-width:419px){ .site-cta:not(.cart-btn){display:none} .site-bar .menu-btn{margin-left:auto} }
.brand{display:flex;align-items:center;gap:10px;font:500 var(--t-small)/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.brand svg{height:18px;width:auto;flex:none}
.site-nav{display:none;gap:28px;margin-left:auto}
.site-nav a{font-size:var(--t-small);color:var(--muted);transition:color .2s}
.site-nav a:hover,.site-nav a[aria-current]{color:inherit}
.site-cta{font:500 var(--t-small)/1 var(--sans);margin-left:auto;display:flex;gap:8px;align-items:center}
.site-cta .arr{transition:transform .3s var(--ease)}
.site-cta:hover .arr{transform:translateX(3px)}
.menu-btn{margin-left:24px;background:none;border:0;padding:8px 0;font-size:var(--t-small);cursor:pointer}
@media (min-width:900px){ .site-nav{display:flex} .site-cta{margin-left:8px} .menu-btn{display:none} }

/* Mobile menu: full-screen sheet below the concept bar (the bar stays visible), links at heading size */
.sheet{position:fixed;inset:var(--cbar-h) 0 0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:0 var(--pad) 32px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sheet.open{opacity:1;visibility:visible}
.sheet-top{display:flex;align-items:center;justify-content:space-between;height:68px}
.sheet-top button{background:none;border:0;font-size:var(--t-small);cursor:pointer;padding:8px 0}
.sheet nav{display:grid;gap:10px;margin-top:40px}
.sheet nav a{font:500 var(--t-head)/1.15 var(--sans);letter-spacing:-.03em}
.sheet .btn{margin-top:auto;justify-content:space-between}

/* ---- Bands: square, full-bleed, no gaps ---- */
.band{padding-top:var(--band);padding-bottom:var(--band)}
.on-ink{background:var(--ink);color:var(--bg);--muted:color-mix(in srgb,var(--bg) 58%,var(--ink));--rule:color-mix(in srgb,var(--bg) 18%,var(--ink));--ph:color-mix(in srgb,var(--bg) 10%,var(--ink))}
/* Tint: a pale wash of the brand colour, for one light section that needs its own ground */
.on-tint{background:var(--tint);--rule:color-mix(in srgb,var(--ink) 14%,var(--tint))}
.on-field{background:var(--field);color:var(--on-field);--muted:color-mix(in srgb,var(--on-field) 70%,var(--field));--rule:color-mix(in srgb,var(--on-field) 28%,var(--field))}
.band-head{margin-bottom:clamp(40px,6vw,88px)}
.band-head .body{margin-top:16px;max-width:46ch}

/* ---- Hero ---- */
/* Fills the first screen: banner + nav + hero = 100svh. Headline centred vertically; intro and CTA pinned to the bottom.
   min-height, never a fixed height: on short windows the hero grows rather than letting the intro spill into the next band. */
.hero{padding-top:clamp(32px,6vh,80px);padding-bottom:clamp(32px,6vh,80px);min-height:calc(100vh - var(--cbar-h) - var(--bar-h));min-height:calc(100svh - var(--cbar-h) - var(--bar-h));display:grid;grid-template-rows:1fr auto 1fr}
.hero>h1{grid-row:2;margin-bottom:calc(var(--cbar-h) + var(--bar-h))} /* centres on the screen, not just the hero */
.hero>.hero-foot{grid-row:3;align-self:end}
/* Phones: centre the headline in the open space between the nav and the intro */
@media (max-width:599px){ .hero{grid-template-rows:1fr auto 1fr auto} .hero>h1{margin-bottom:0} .hero>.hero-foot{grid-row:4} }
/* Short windows: drop the centring offset so the hero stays close to one screen */
@media (max-height:700px) and (min-width:600px){ .hero>h1{margin-bottom:0} }
.hero-foot{margin-top:clamp(28px,5vh,56px);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.hero-foot .body{max-width:44ch;color:var(--muted)}

/* Page hero (inner pages) */
.page-hero{padding-top:clamp(40px,9vh,120px);padding-bottom:clamp(48px,8vh,104px)}
.page-hero .body{margin-top:clamp(24px,4vh,40px);max-width:52ch;color:var(--muted)}

/* ---- Image slots ---- */
.ph{position:relative;aspect-ratio:4/5;background:var(--ph);overflow:hidden;margin:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:transform .8s var(--ease)}
.ph:hover img{transform:scale(1.02)}
.ph figcaption{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--muted)}
.ph img+figcaption{display:none}

/* ---- Rows & tables (data keeps its rules) ---- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:8px;padding:24px 0;border-bottom:1px solid var(--rule)}
.row>*{grid-column:1/-1}
@media (min-width:900px){ .row>:first-child{grid-column:1/6} .row>:nth-child(2){grid-column:6/13} }
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:18px 16px 18px 0;border-bottom:1px solid var(--rule);font-weight:400;vertical-align:baseline}
.table th{font-size:var(--t-small);color:var(--muted)}
.table td:last-child,.table th:last-child{text-align:right;padding-right:0}

/* ---- What happens next (homepages, before reviews): four numbered steps and one button ---- */
.steps{display:grid;gap:0 var(--col-gap);counter-reset:step}
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,1fr)} }
.steps li{list-style:none;display:grid;grid-template-columns:48px 1fr;gap:8px 16px;align-content:start;padding:20px 0 28px;border-top:1px solid var(--ink)}
@media (min-width:900px){ .steps li{grid-template-columns:1fr;padding-bottom:0} }
.steps .n{font:400 var(--t-head)/1 var(--serif);grid-row:span 2}
@media (min-width:900px){ .steps .n{grid-row:auto;margin-bottom:16px} }
.steps .head{font-size:var(--t-body);font-weight:500;letter-spacing:-.01em}
.steps-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:clamp(40px,5vw,64px)}

/* ---- Google review strip (homepages, last section before the footer): rating, count, four verbatim quotes.
   Phones scroll sideways; desktop shows all four. ---- */
.reviews{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
section:not(.on-field):not(.on-ink):not(.on-tint)+.reviews{border-top:1px solid var(--rule)}
.reviews-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-bottom:clamp(28px,3vw,40px)}
.reviews-list{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:var(--col-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scroll-padding:0 var(--pad)}
.reviews-list::-webkit-scrollbar{display:none}
@media (min-width:900px){ .reviews-list{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0} }
.reviews figure{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--ink)}
.reviews blockquote{margin:0}
.reviews .disclose{margin-top:28px;max-width:90ch}

/* ---- People ---- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:40px var(--col-gap)}
@media (min-width:900px){ .people{grid-template-columns:repeat(4,1fr)} }
.person .ph{margin-bottom:16px}
.person .body{font-weight:500}

/* ---- Map (visit / contact pages) ---- */
.map{position:relative;aspect-ratio:4/3;background:var(--ph);margin:0}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
html[data-mode=dark] .map iframe{filter:grayscale(1) invert(.9) contrast(.9)}
.visit-side .hours{margin-top:20px}
.visit-side .btn{margin-top:32px}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--muted);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;max-width:62ch;color:var(--muted)}

/* ---- Footer band (ink): address headline, then Visit · Hours · Site · Follow, then legal ---- */
.contact .display{margin-bottom:clamp(40px,6vw,88px)}
.display .ul{background-size:0 .05em;padding-bottom:0}.display .ul:hover{background-size:100% .05em}
.band.contact{padding-bottom:clamp(24px,3vw,40px);min-height:100vh;min-height:100svh;display:flex;box-shadow:0 2px 0 var(--ink)}
.band.contact>.wrap{flex:1;width:100%;display:flex;flex-direction:column}
.band.contact .legal{margin-top:auto}
.band.contact .wrap>:nth-last-child(2){margin-bottom:clamp(48px,5vw,72px)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px var(--col-gap)}
.foot-grid>.f-visit,.foot-grid>.f-hours{grid-column:1/-1}
@media (min-width:900px){ .foot-grid{grid-template-columns:4fr 2fr 2fr 3fr;gap:var(--col-gap)} .foot-grid>.f-visit,.foot-grid>.f-hours{grid-column:auto} }
.fcol h3{font-size:var(--t-small);font-weight:400;color:var(--muted);margin:0 0 14px}
.fcol ul{display:grid;gap:8px}
.fcol li{list-style:none}
.fcol address{font-style:normal;display:grid;gap:4px}
.fcol .btn{margin-top:28px}
.ext::after{content:' ↗';color:var(--muted)}
.status{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:var(--t-small)}
.status i{width:8px;height:8px;background:currentColor;flex:none}
.status.closed i{background:none;box-shadow:inset 0 0 0 1.5px var(--muted)}
.status.closed{color:var(--muted)}
.served{margin-top:clamp(40px,4vw,56px);max-width:90ch}
.hours{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.hours td{padding:8px 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.hours tr:first-child td{border-top:1px solid var(--rule)}
.hours td+td{text-align:right}
.hours tr.today td{color:inherit;font-weight:500}
.legal{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;margin-top:clamp(48px,5vw,72px);padding-top:20px;border-top:1px solid var(--rule);font-size:var(--t-small);color:var(--muted)}
.legal a{color:var(--muted);transition:color .2s}
.legal a:hover{color:var(--bg)}
.legal .concept{margin-left:auto}

/* ---- Concept bar: the maker's layer, not the client's. Braun orange in both modes; stays fixed at the top. ---- */
:root{--cbar-h:44px}
.cbar{position:sticky;top:0;z-index:45;height:var(--cbar-h);background:#FF5A1F;color:#111110;font:500 14px/1 var(--sans);letter-spacing:-.005em}
.cbar-in{height:100%;display:flex;align-items:center;gap:16px}
.cbar-by{white-space:nowrap}
.cbar-by a:hover{text-decoration:underline;text-underline-offset:3px}
.cbar-mid{display:grid;color:rgba(17,17,16,.62);white-space:nowrap}
.cbar-msg{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cbar-msg.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .cbar-msg{transform:none;transition:opacity .2s} }
.cbar-short{display:none}
.cbar .mode{width:32px;height:32px;margin-left:auto;margin-right:-6px;display:grid;place-items:center;background:none;color:inherit;border:0;cursor:pointer;flex:none}
.mode svg{width:18px;height:18px;transition:transform .45s var(--ease)}
html[data-mode=dark] .mode svg{transform:rotate(180deg)}
@media (min-width:900px){ .cbar-mid{position:absolute;left:50%;transform:translateX(-50%);justify-items:center} .cbar-in{position:relative} }
/* Tablets take the short centre lines. */
@media (max-width:899px){ .cbar-mid .cbar-long{display:none} .cbar-mid .cbar-short{display:inline} }
@media (max-width:599px){ .cbar-long{display:none} .cbar-short{display:inline} .cbar-in{gap:10px} .cbar{font-size:13px} }

/* Expired: the concept is locked behind a plain statement. */
.lock{position:absolute;top:var(--cbar-h);left:0;right:0;height:calc(100vh - var(--cbar-h));height:calc(100svh - var(--cbar-h));z-index:44;background:var(--bg);color:var(--ink);display:flex;align-items:center}
.lock .wrap{width:100%}
.lock .body{margin-top:clamp(24px,4vh,40px);max-width:44ch;color:var(--muted)}
.lock .btn{margin-top:32px}

/* ---- Reveal ---- */
.rv{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }