/* Reference pairing (self-hosted in public/fonts, OFL, both on the approved font shortlist):
   "A Display" = Gloock for upright display type, and Literata's light italic whenever the display face is set in
   italic (the second headline line, kickers, roles, captions): a heavy high-contrast roman over a fine book italic.
   "Literata A" = Literata (opsz + wght axes) for text. The engine font ids in design.ts are stand-ins. */
@font-face{font-family:"Vietnam A";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Vietnam A";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vietnam A";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Vietnam A";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vietnam A";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Vietnam A";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"A Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gloock-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"A Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gloock-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"A Display";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/literata-latin-ext-opsz-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"A Display";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/literata-latin-opsz-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata A";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/literata-latin-ext-opsz-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata A";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/literata-latin-opsz-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata A";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/literata-latin-ext-opsz-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata A";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/literata-latin-opsz-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* an accent word in a headline looks like the rest of the headline (design-rules §2) */
:is(h1,h2) em{font-style:inherit}
body.f-instrument{--ft:"Vietnam A",system-ui,sans-serif}
:root:has(>body.f-reference){--fd:"A Display",Georgia,serif;--ft:"Literata A",Georgia,serif}
/* the italic display lines in a light Literata weight (Gloock has one weight, so its roman is unaffected) */
.f-reference :is(.a-end-big,.fig dd) em,.f-reference :is(.hero .meta,.hs-k,.tri-k,.ph .k,.a-end h2,.a-more,.quote cite,.pair figcaption,.p .role,.ros .role,.a-end-f p){font-weight:340}
/* reference palette "celadon": pale celadon paper, green-black ink, wine accent, a deeper celadon band */
:root{--bg:#d1e3d9;--ink:#101e19;--mute:#4d5c56;--line:#a1b3aa;--clay:#7d2a32;--sage:#bdd5c7;--m2:#c9dacc;--m3:#c0d8d4;--m4:#d5d9c9}
*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--ink);font:400 calc(16px*var(--tune-size,1))/1.6 var(--ft),sans-serif}
a{color:inherit}.wrap{max-width:1360px;margin:auto;padding:0 clamp(20px,4vw,56px)}
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:calc(14px*var(--tune-size,1))}
nav .logo{font:400 calc(26px*var(--tune-size,1)) var(--fd);letter-spacing:.01em}nav ul{display:flex;gap:36px;list-style:none;padding:0}
/* buttons are small arches (round top, nearly square foot), the look's frame shape in miniature */
.btn{display:inline-block;text-decoration:none;font-size:calc(14px*var(--tune-size,1));padding:14px 26px;border-radius:calc(1.6em*var(--tune-radius,1)) calc(1.6em*var(--tune-radius,1)) calc(4px*var(--tune-radius,1)) calc(4px*var(--tune-radius,1));background:var(--ink);color:var(--bg)}
/* hero: reference. The arch photo takes the right half of the first screen, bled to the page edge from under the
   header to the fold. The headline, lede and action are one block on one left edge, centred on the arch's height, with
   the italic second line running into the photo and the kicker set vertically in the gutter under the logo. --free is
   the room left of the arch, so the lede and the buttons never run onto it; the headline may run 3vw further (only its
   tail touches the photo, whatever the photo) and is sized from its longest line (--hl letters; Gloock and Literata
   italic run about .45em a letter), never under 6.4vw. */
.hero{position:relative;display:grid;--free:calc(52vw - (100vw - min(100vw,1360px))/2 - clamp(20px,4vw,56px) - 19px - clamp(28px,5.4vw,80px) - 40px)}
.hero-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(28px,5.4vw,80px);align-items:center;width:100%;margin-block:0;padding-top:calc(40px*var(--tune-space,1));padding-bottom:calc(56px*var(--tune-space,1))}
.hero .meta{writing-mode:vertical-rl;transform:rotate(180deg);font:italic 400 calc(19px*var(--tune-size,1))/1 var(--fd);color:var(--mute);white-space:nowrap;margin-bottom:8px}
.hero h1{position:relative;z-index:2;max-width:calc(var(--free) + 40px + 3vw);font:400 calc(min(clamp(56px,10.4vw,156px),max(6.4vw,(var(--free) + 40px + 3vw)/(var(--hl,10)*.47)))*var(--tune-size,1))/.9 var(--fd);letter-spacing:-.03em;padding-top:.06em}
.hero h1 em{display:block;letter-spacing:-.02em;text-align:right}
.hs h1 em,.tri h1 em{padding-left:.75em}
.hero .arch{position:absolute;top:0;right:0;bottom:0;width:48%;margin:0;border-radius:999px 999px 0 0;background:linear-gradient(170deg,#c0d8cc,#7ea293 60%,#3b5e51);overflow:hidden}
.hero .arch svg{position:absolute;inset:0;width:100%;height:100%}
@media(min-width:821px){.hero{min-height:clamp(560px,calc(100svh - 91px),980px)}}
.hero .lede{position:relative;z-index:2;margin-top:calc(36px*var(--tune-space,1));font-size:calc(clamp(19px,1.45vw,22px)*var(--tune-size,1));line-height:1.45;max-width:min(30em,var(--free));text-wrap:pretty;hyphens:manual}
.hero .cta{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 32px;margin-top:30px;max-width:var(--free)}
.hero .btn{font-size:calc(17px*var(--tune-size,1));padding:18px 34px}
.a-more{font:italic 400 calc(clamp(20px,1.6vw,24px)*var(--tune-size,1))/1.2 var(--fd);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .35s ease}.a-more:hover{color:var(--clay)}
.rule{border-top:1px solid var(--ink)}
.idx{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:calc(90px*var(--tune-space,1)) 0}
.idx h2{grid-column:1/5;text-wrap:balance;font:400 calc(clamp(36px,4.5vw,64px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em}
.idx ol{grid-column:6/13;list-style:none;padding:0}
.idx li{display:grid;grid-template-columns:1fr 120px;gap:16px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline}
.idx li:last-child{border-bottom:1px solid var(--line)}
.idx li b{font:400 calc(30px*var(--tune-size,1))/1.1 var(--fd)}.idx li small{display:block;color:var(--mute);font-size:calc(14px*var(--tune-size,1));margin-top:6px;max-width:420px}
.idx li i{font-style:normal;text-align:right;font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
/* the quote band is the page's one deep colour: the accent sunk into the ink, the page colour as type */
.quote{background:color-mix(in srgb,var(--clay) 55%,var(--ink));color:var(--bg);padding:calc(110px*var(--tune-space,1)) 0}.quote .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.quote p{grid-column:3/11;font:400 calc(clamp(30px,4vw,60px)*var(--tune-size,1))/1.08 var(--fd);letter-spacing:-.015em}
.quote cite{grid-column:3/11;font:italic 400 calc(20px*var(--tune-size,1))/1.3 var(--fd);margin-top:20px}
.final{background:var(--clay);color:var(--bg);padding:calc(110px*var(--tune-space,1)) 0}.final .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.final h2{grid-column:1/9;font:400 calc(clamp(44px,7vw,110px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:-.025em}.final .btn{background:var(--bg);color:var(--ink);grid-column:10/13;justify-self:start}
footer{padding:30px 0;font-size:calc(13px*var(--tune-size,1));color:var(--mute);display:flex;justify-content:space-between}
@media(max-width:820px){nav ul{display:none}
/* phone: kicker, headline, then the arch (left, on the margin) with the italic line ending over its shoulder, the
   button, and the lede last so the button stays on the first screen whatever the language */
.hero{display:block}.hero-in{display:flex;flex-direction:column;align-items:stretch;padding-top:calc(6px*var(--tune-space,1));padding-bottom:calc(72px*var(--tune-space,1))}
.hero .meta{writing-mode:horizontal-tb;transform:none;white-space:normal;font-size:calc(17px*var(--tune-size,1));line-height:1.3;margin:0 0 14px}
.hero-t{display:flex;flex-direction:column}.hero h1{max-width:min(100%,520px);font-size:calc(clamp(44px,13vw,64px)*var(--tune-size,1))}
.hero .arch{position:relative;inset:auto;width:min(86%,440px);aspect-ratio:3/4;margin-top:18px}
.hero .cta{margin-top:22px;max-width:none}.hero .lede{order:1;margin-top:26px;max-width:30em}
.idx,.quote .wrap,.final .wrap{display:block}.idx ol{margin-top:30px}.idx li{grid-template-columns:1fr}.idx li i{display:none}.quote p,.quote cite{display:block}.final .btn{margin-top:30px}}
nav ul a{color:inherit;text-decoration:none}nav ul a:not([class*="m-hv-"]):hover{text-decoration:underline;text-underline-offset:4px}
/* motion set (data-motion marks): the rising photo window travels 5% (the photo sits 10% closer, not 20%) */
.m-lt-glide{--m-lt-rise:.05}
h1,h2,h3,h4,summary,.btn,b,p,li,td,dd,dt,figcaption,.n,.k,.logo{overflow-wrap:anywhere;hyphens:auto}.hero>*,.bento>*,.cards>*,.tr>*,.tg>*,.zz>*,.row>*,.idx li>*{min-width:0}
.hero .arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.strip{margin:0;height:clamp(260px,42vw,560px);overflow:hidden}.strip img{width:100%;height:100%;object-fit:cover;display:block}

/* polish: calm, slow */
.btn{transition:background .35s ease,color .35s ease}.btn:hover{background:var(--clay)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
@keyframes a-rise{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1,.ph h1{animation:a-rise 1.1s cubic-bezier(.2,.7,.2,1) both}.hero .lede{animation:a-rise 1.1s .15s cubic-bezier(.2,.7,.2,1) both}.hero .cta{animation:a-rise 1.1s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .arch{animation:a-rise 1.4s .1s cubic-bezier(.2,.7,.2,1) both}.hero .arch img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}}

/* --- services page --- */
.ph{padding:calc(50px*var(--tune-space,1)) 0 calc(70px*var(--tune-space,1));display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.ph .k{grid-column:1/4;font:italic 400 calc(20px*var(--tune-size,1))/1.3 var(--fd);color:var(--mute);padding-top:14px;max-width:18ch}
.ph h1{grid-column:4/12;font:400 calc(clamp(48px,7.5vw,116px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:-.025em}.ph h1 em{display:block;letter-spacing:-.015em}
.tr{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:calc(56px*var(--tune-space,1)) 0;border-top:1px solid var(--line)}
.tr h2{grid-column:1/8;font:400 calc(clamp(34px,4vw,58px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em}
.tr .d{grid-column:8/13}.tr .d p{margin-bottom:14px}.tr dl{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:6px 16px;font-size:calc(14px*var(--tune-size,1));color:var(--mute);border-top:1px solid var(--line);padding-top:14px}.tr dd{color:var(--ink)}
.faq{padding:calc(90px*var(--tune-space,1)) 0}.faq h2{font:400 calc(clamp(36px,4.5vw,64px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em;margin-bottom:34px}
details{border-top:1px solid var(--line);padding:22px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:400 calc(26px*var(--tune-size,1))/1.2 var(--fd);list-style:none;display:flex;justify-content:space-between;gap:20px}summary::after{content:"+";color:var(--clay);font-size:calc(30px*var(--tune-size,1));line-height:1}details[open] summary::after{content:"–"}
details p{max-width:640px;margin-top:12px;color:var(--mute)}
@media(max-width:820px){.ph,.tr{display:block}.ph .k{margin-bottom:14px}.tr .d{margin-top:18px}}
/* --- team page --- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:calc(40px*var(--tune-space,1)) 0 calc(90px*var(--tune-space,1));border-top:1px solid var(--line)}
.p .mono{aspect-ratio:3/4;border-radius:999px 999px calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1));display:grid;place-items:center;font:italic 400 calc(clamp(56px,6vw,96px)*var(--tune-size,1)) var(--fd);color:var(--ink);margin-bottom:18px}
.p:nth-child(1) .mono{background:var(--sage)}.p:nth-child(2) .mono{background:var(--m2,#e2d3bf)}.p:nth-child(3) .mono{background:var(--m3,#d9cbbd)}.p:nth-child(4) .mono{background:var(--m4,#cfd5cc)}
.p h2{font:400 calc(30px*var(--tune-size,1))/1.05 var(--fd);letter-spacing:-.01em}.p .role{font:italic 400 calc(19px*var(--tune-size,1))/1.3 var(--fd);color:var(--clay);margin:6px 0 10px}.p p{font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
.ctc{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:24px;padding:calc(70px*var(--tune-space,1)) 0 calc(90px*var(--tune-space,1));border-top:1px solid var(--line)}
.ctc h2{grid-column:1/6;font:400 calc(clamp(40px,5vw,76px)*var(--tune-size,1))/.98 var(--fd);letter-spacing:-.02em}
.ctc .ci{grid-column:1/6;grid-row:2;align-self:start}.ctc dl{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:10px 16px;font-size:calc(15px*var(--tune-size,1));border-top:1px solid var(--line);padding-top:18px;margin-top:10px}.ctc dt{color:var(--mute)}
.ctc form{grid-column:7/13;grid-row:1/3;display:grid;gap:18px;align-content:start}
label{display:grid;gap:6px;font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
input,textarea,select{font:400 calc(17px*var(--tune-size,1))/1.4 var(--ft),sans-serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0;width:100%}textarea{min-height:120px;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
form .btn{justify-self:start;border:0;cursor:pointer;font:inherit}.small{font-size:calc(13px*var(--tune-size,1));color:var(--mute)}
.legal{font-size:calc(13px*var(--tune-size,1));color:var(--mute);padding:0 0 calc(40px*var(--tune-space,1))}
@media(max-width:820px){.ph,.ctc{display:block}.ph .k{margin-bottom:14px}.team{grid-template-columns:1fr 1fr;gap:28px 18px}.ctc form{margin-top:40px}.ctc .ci{margin-top:24px}}
.team.few .p:first-child{grid-column:2}@media(max-width:820px){.team.few .p:first-child{grid-column:auto}}

/* --- curated variation (design.ts). Scoped by modifier classes; the reference look never matches these. --- */
.final .btn:hover{background:var(--ink);color:var(--bg)}
/* font pairings: even out the display sizes against Instrument Serif's tall, narrow cut */
.f-cormorant :is(.logo,h1,h2,summary,.idx li b,.quote p,.ldg b){font-size-adjust:.43}.f-cormorant :is(.p .role,.p .mono,.ldg .pr,.a-led b){font-size-adjust:.43}
/* (later and equally specific, so these win over the line above for the two hero headlines) */
body.f-cormorant .hs h1{font-size-adjust:.405}body.f-cormorant .hero h1{font-size-adjust:.385}
:is(.f-cormorant) :is(.idx h2,.ldg h2,.final h2,.ctc h2){text-wrap:balance}
.f-cormorant :is(.idx li b,.ldg b,.ldg .pr,summary,.p h2){font-weight:600;letter-spacing:-.01em}
/* Work Sans runs wider than Inter: let the CTA row wrap so a button never breaks mid-label */
body:not(.f-reference) .hero .cta{flex-wrap:wrap}

/* hero: split — a full-bleed image down the left half, type on the right */
.hs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(560px,calc(100svh - 91px),980px);margin-bottom:calc(100px*var(--tune-space,1))}
.hs-img{position:relative;margin:0;overflow:hidden;background:var(--sage);border-top-right-radius:min(22vw,320px)}
.hs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the kicker, headline, lede and buttons are one block at the foot of the column; the buttons end well above the fold */
.hs-body{display:flex;flex-direction:column;justify-content:flex-end;padding:8px max(clamp(20px,4vw,56px),calc((100vw - 1360px)/2 + 56px)) calc(64px*var(--tune-space,1)) clamp(40px,6vw,104px)}
.hs-k{margin-bottom:24px;font:italic 400 calc(22px*var(--tune-size,1))/1.3 var(--fd);color:var(--mute);max-width:34ch}
.hs h1{font:400 calc(max(44px,min(clamp(58px,8vw,136px),(50vw - clamp(40px,6vw,104px) - max(clamp(20px,4vw,56px),(100vw - 1360px)/2 + 56px))/(var(--hl,10)*.47)))*var(--tune-size,1))/.92 var(--fd);letter-spacing:-.025em}
.hs .lede{font-size:calc(18px*var(--tune-size,1));max-width:440px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.hs .cta{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;margin-top:28px}
@media(max-width:820px){.hs{display:block;min-height:0;margin-bottom:calc(80px*var(--tune-space,1))}.hs-img{height:clamp(260px,42svh,460px);border-top-right-radius:0}
.hs-body{padding:24px clamp(20px,4vw,56px) 0}.hs-k{margin-bottom:16px;font-size:calc(18px*var(--tune-size,1))}.hs h1{font-size:calc(clamp(44px,13vw,64px)*var(--tune-size,1))}.hs .cta{margin-top:22px}.hs .lede{order:1;margin-top:26px}}

/* home services: ledger — a calm price list, read like a menu */
.ldg{padding:calc(56px*var(--tune-space,1)) 0 calc(100px*var(--tune-space,1))}
.ldg h2{font:400 calc(clamp(40px,5.4vw,80px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em;max-width:14ch;margin-bottom:48px}
.ldg ul{list-style:none;padding:0;border-top:1px solid var(--ink)}
/* name | description | price, the price on the name's baseline and the duration right under it */
.ldg li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2.4fr);gap:6px 24px;padding:30px 0 32px;border-bottom:1px solid var(--line);align-items:baseline}
.ldg b{font:400 calc(clamp(26px,2.3vw,34px)*var(--tune-size,1))/1.1 var(--fd);letter-spacing:-.01em}
.ldg p{grid-column:2;grid-row:1/3;font-size:calc(16px*var(--tune-size,1));color:var(--mute);max-width:460px}
.ldg .t{grid-column:3;grid-row:2;text-align:right;font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
.ldg .pr{grid-column:3;grid-row:1;text-align:right;font:400 calc(clamp(28px,2.6vw,40px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.01em;font-variant-numeric:lining-nums;white-space:nowrap}
.ldg .pr small{font:italic 400 .55em var(--fd);color:var(--mute);letter-spacing:0}.ldg .pr .fr{margin-right:.4em}
@media(max-width:820px){.ldg{padding:0 0 calc(80px*var(--tune-space,1))}.ldg h2{margin-bottom:32px}
.ldg li{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:24px 0}.ldg p{grid-column:1/-1;grid-row:2}.ldg .t{grid-column:1/-1;grid-row:3;text-align:left}.ldg .t:empty{display:none}.ldg .pr{grid-column:2;grid-row:1}}

/* empty-fact layouts, footer legal links, legal pages */
footer{flex-wrap:wrap;gap:8px 24px}
.flegal{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;padding:0;margin:0}
.flegal a{color:inherit;text-underline-offset:3px}
.flegal a[aria-current]{color:var(--ink)}
.legal-page{padding:calc(clamp(40px,7vw,96px)*var(--tune-space,1)) 0;border-top:1px solid var(--line)}
.legal-lang{font-size:calc(14px*var(--tune-size,1));color:var(--mute);margin-bottom:18px}
article.legal{max-width:720px;font-size:calc(17px*var(--tune-size,1));line-height:1.6;color:var(--ink);padding:0}
article.legal h1{font:400 calc(clamp(44px,6vw,80px)*var(--tune-size,1))/1 var(--fd);margin-bottom:24px;overflow-wrap:break-word}
article.legal h2{font:400 calc(28px*var(--tune-size,1))/1.15 var(--fd);margin:44px 0 12px}
article.legal p,article.legal ul{margin:0 0 12px;max-width:66ch}
article.legal ul{padding-left:1.2em}
article.legal a{color:inherit;text-decoration-color:var(--clay);text-underline-offset:3px;overflow-wrap:anywhere}
article.legal .legal__notice{display:inline-block;border:1px solid var(--line);color:var(--ink);font-size:calc(14px*var(--tune-size,1));padding:8px 14px;border-radius:999px;margin-bottom:16px}
article.legal .legal__updated{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
article.legal dl{margin:0 0 12px;border-top:1px solid var(--line)}
article.legal dl div{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:2px 24px;padding:10px 0;border-bottom:1px solid var(--line)}
article.legal dt{color:var(--mute);font-size:calc(14px*var(--tune-size,1));padding-top:3px}
article.legal dd{margin:0;overflow-wrap:anywhere}
@media(max-width:820px){article.legal dl div{grid-template-columns:minmax(0,1fr)}}

/* 404 page (shared/NotFound.astro) */
.nf{padding:calc(clamp(40px,8vw,120px)*var(--tune-space,1)) 0 calc(clamp(60px,10vw,140px)*var(--tune-space,1));border-top:1px solid var(--line)}
.nf h1{font:400 calc(clamp(48px,7.5vw,116px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:-.025em;margin-bottom:24px;max-width:14ch}
.nf p{font-size:calc(18px*var(--tune-size,1));max-width:46ch;color:var(--mute)}
.nf ul{list-style:none;padding:0;margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}.nf ul a:not(.btn){text-underline-offset:4px}

/* hero: triptych — headline column, a tall arch picture in the middle, a small picture and the first service on the right */
.tri{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:calc(16px*var(--tune-space,1)) 0 calc(100px*var(--tune-space,1));align-items:stretch}
.tri-l{grid-column:1/6;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-top:6px}
.tri-k{font:italic 400 calc(20px*var(--tune-size,1))/1.3 var(--fd);color:var(--mute);max-width:24ch}
.tri h1{font:400 calc(clamp(52px,6.2vw,100px)*var(--tune-size,1))/.93 var(--fd);letter-spacing:-.025em;text-wrap:balance}
.tri h1 em{padding-left:.75em}
.tri .lede{font-size:calc(18px*var(--tune-size,1));max-width:420px;margin-top:30px}.tri .cta{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;margin-top:26px}
.tri-c{grid-column:6/10;margin:0;position:relative;overflow:hidden;aspect-ratio:3/4.3;border-radius:999px 999px calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1));background:var(--sage)}
.tri-c img,.tri-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tri-r{grid-column:10/13;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.tri-r figure{margin:0;position:relative;overflow:hidden;aspect-ratio:1/1;border-radius:calc(6px*var(--tune-radius,1));background:var(--m2)}
.tri-note{display:grid;gap:8px;text-decoration:none;border-top:1px solid var(--ink);padding-top:18px}
.tri-note b{font:400 calc(clamp(24px,2.2vw,32px)*var(--tune-size,1))/1.1 var(--fd);letter-spacing:-.01em}.tri-note span{font-size:calc(15px*var(--tune-size,1));color:var(--mute)}.tri-note small{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
.tri-note:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:820px){.tri{display:block;padding-bottom:calc(80px*var(--tune-space,1))}.tri-l{gap:22px}.tri-c{width:84%;margin:36px 0 0 auto}
.tri-r{flex-direction:row;align-items:end;margin-top:24px}.tri-r figure{flex:0 0 38%}.tri-note{flex:1}}

/* home services: arches — one arch-topped panel per service, the time and price set inside it */
.arc{padding:calc(56px*var(--tune-space,1)) 0 calc(100px*var(--tune-space,1))}.arc h2{font:400 calc(clamp(40px,5.4vw,80px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em;max-width:14ch;margin-bottom:48px}
.arc ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.arc ul.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.arc ul.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.arc-p{aspect-ratio:3/3.6;border-radius:999px 999px calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1));display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:24px 22px;margin-bottom:22px;background:var(--sage)}
.arc li:nth-child(4n+2) .arc-p{background:var(--m2)}.arc li:nth-child(4n+3) .arc-p{background:var(--m3)}.arc li:nth-child(4n+4) .arc-p{background:var(--m4)}
.arc ul:is(.n2,.n3) .arc-p{aspect-ratio:4/3.3}
.arc-p span{font:italic 400 calc(19px*var(--tune-size,1))/1.2 var(--fd)}.arc-p b{font:400 calc(clamp(30px,2.8vw,42px)*var(--tune-size,1))/1 var(--fd);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.arc h3{font:400 calc(clamp(26px,2.2vw,32px)*var(--tune-size,1))/1.1 var(--fd);letter-spacing:-.01em;margin-bottom:8px}.arc li p{font-size:calc(15px*var(--tune-size,1));color:var(--mute);max-width:34ch}
@media(max-width:820px){.arc{padding:0 0 calc(80px*var(--tune-space,1))}.arc ul,.arc ul.n3{grid-template-columns:1fr 1fr;gap:32px 16px}.arc ul.n2{grid-template-columns:1fr 1fr}.arc-p{padding:16px}.arc-p b{font-size:calc(26px*var(--tune-size,1))}}
@media(max-width:420px){.arc ul,.arc ul.n3,.arc ul.n2{grid-template-columns:1fr}.arc-p{aspect-ratio:3/2.2}}

/* reviews: pair — two testimonials side by side on the band, the second set lower */
.quote.pair .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,96px);align-items:start}
.pair figure{margin:0}.pair figure+figure{margin-top:clamp(40px,7vw,110px)}
.pair blockquote{margin:0;font:400 calc(clamp(26px,2.8vw,42px)*var(--tune-size,1))/1.12 var(--fd);letter-spacing:-.01em}
.pair figcaption{font:italic 400 calc(19px*var(--tune-size,1))/1.3 var(--fd);margin-top:20px}
@media(max-width:820px){.quote.pair .wrap{display:block}.pair figure+figure{margin-top:48px}}

/* team: roster — one row per person: a small arch monogram, the name and role, the bio beside it */
.ros{list-style:none;padding:0;margin:0 0 calc(90px*var(--tune-space,1));border-top:1px solid var(--ink)}
.ros li{display:grid;grid-template-columns:88px minmax(0,1.1fr) minmax(0,1.4fr);gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.ros .mono{aspect-ratio:3/4;border-radius:999px 999px calc(4px*var(--tune-radius,1)) calc(4px*var(--tune-radius,1));display:grid;place-items:center;font:italic 400 calc(40px*var(--tune-size,1)) var(--fd);background:var(--sage)}
.ros li:nth-child(4n+2) .mono{background:var(--m2)}.ros li:nth-child(4n+3) .mono{background:var(--m3)}.ros li:nth-child(4n+4) .mono{background:var(--m4)}
.ros h2{font:400 calc(clamp(30px,3vw,44px)*var(--tune-size,1))/1.05 var(--fd);letter-spacing:-.015em}.ros .role{font:italic 400 calc(19px*var(--tune-size,1))/1.3 var(--fd);color:var(--clay);margin-top:4px}.ros p{color:var(--mute);max-width:52ch}
@media(max-width:820px){.ros li{grid-template-columns:64px minmax(0,1fr);gap:8px 18px;align-items:start}.ros p{grid-column:1/-1}.ros .mono{font-size:calc(30px*var(--tune-size,1))}}

/* gallery sections (factory/sections/gallery): their colour and font tokens follow this look's */
:root{--g-max:1360px;--g-pad:clamp(20px,4vw,56px);--g-bg:var(--bg);--g-paper:var(--bg);--g-ink:var(--ink);--g-muted:var(--mute);--g-line:var(--line);--g-accent:var(--clay);--g-surface:var(--sage);--g-fd:var(--fd);--g-ft:var(--ft)}
.gal{margin:0}
/* opening hours as a week (hours: week): hairline per day, a capsule from opening to closing */
.wk{display:grid;grid-template-columns:3.4em minmax(0,1fr) auto;column-gap:18px}
.wk ol{grid-column:1/-1;display:grid;grid-template-columns:subgrid;list-style:none;margin:0;padding:0}
.wk li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:calc(17px*var(--tune-size,1))}
.wk-bar{position:relative;height:8px}
.wk-bar::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
.wk-bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--clay)}
.wk-t{text-align:right;white-space:nowrap;font:400 calc(21px*var(--tune-size,1))/1.15 var(--fd);font-variant-numeric:tabular-nums}
.wk li.off{color:var(--mute)}
.wk-scale{grid-column:2;display:flex;justify-content:space-between;margin:8px 0 0;font-size:calc(13px*var(--tune-size,1));color:var(--mute);font-variant-numeric:tabular-nums}
@media (max-width:760px){.wk{grid-template-columns:2.8em minmax(0,1fr) auto;column-gap:12px}.wk-t{font-size:calc(18px*var(--tune-size,1))}}
/* FAQ, all answers open (faq: open): title column on the left, questions as a hairline list */
.faq.open{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.faq.open h2{grid-column:1/5;align-self:start;position:sticky;top:110px}
.fo{grid-column:6/13;display:grid}
.fo article{display:grid;gap:10px;padding:26px 0 30px;border-top:1px solid var(--line)}
.fo h3{font:400 calc(clamp(23px,2vw,29px)*var(--tune-size,1))/1.2 var(--fd);letter-spacing:-.01em;text-wrap:balance}
.fo p{color:var(--mute);max-width:58ch}
@media (max-width:760px){.faq.open{display:block}.faq.open h2{position:static}}
/* contact without a form (contact: card, or a site with no form): call and email as large serif lines */
.ctc .reach{grid-column:7/13;grid-row:1/3;display:grid;align-content:start}
.reach a{display:grid;gap:6px;padding:24px 0 26px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.reach a:last-child{border-bottom:1px solid var(--line)}
.reach span{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
.reach b{font:400 calc(clamp(28px,3.2vw,46px)*var(--tune-size,1))/1.05 var(--fd);letter-spacing:-.01em;overflow-wrap:anywhere;transition:color .2s}
.reach a:hover b{color:var(--clay)}
@media(max-width:820px){.ctc .reach{margin-top:36px}}

/* Advanced hero moment, "the blind" (wow layer; .m-js = an Advanced page with its scripts running, see
   engine/shared/wow.js). A blind in the accent colour lifts off each hero photo while the photo settles; the
   photo then drifts slower than the page as you scroll, and the frames lean a few px toward the pointer.
   Transform and opacity only. Reduced motion or no scripts: the hero is simply there. */
@media (prefers-reduced-motion:no-preference){
.m-js [data-wow] :is(.arch,.hs-img,.tri-c,.tri-r figure)::after{content:"";position:absolute;inset:-1px;z-index:1;background:var(--clay);transform-origin:50% 0;pointer-events:none;animation:a-blind 1.3s cubic-bezier(.75,0,.2,1) .25s both}
.m-js [data-wow] .tri-r figure::after{animation-delay:.55s}
.m-js [data-wow] .hs-img.m-unveil{animation:none}
.m-js [data-wow] :is(.arch,.hs-img,.tri-c,.tri-r figure) img{scale:1.08;animation:a-settle 2.2s cubic-bezier(.2,.7,.2,1) .25s backwards}
.m-js [data-wow] [data-depth]{transition:translate 1.1s cubic-bezier(.2,.7,.2,1)}
@keyframes a-blind{to{transform:scaleY(0)}}
@keyframes a-settle{from{scale:1.22}}
@keyframes a-drift{to{translate:0 3.5%}}
@supports (animation-timeline:scroll()){
.m-js [data-wow] :is(.arch,.hs-img,.tri-c) img{animation:a-settle 2.2s cubic-bezier(.2,.7,.2,1) .25s backwards,a-drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}}}

/* closing "visit": the title on the left; on the right the phone and address in hairline rows with the book button
   under them, the button's bottom on the title's last baseline row */
.final.visit .wrap{align-items:end}
.final.visit h2{grid-column:1/8}
.vs{grid-column:8/13;display:grid;gap:28px}
.vs dl{margin:0;display:grid}
.vs dl div{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.vs dt{font-size:calc(14px*var(--tune-size,1))}
.vs dd{margin:0;font:400 calc(clamp(20px,1.8vw,26px)*var(--tune-size,1))/1.25 var(--fd);overflow-wrap:anywhere}
.vs dd a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.final.visit .btn{grid-column:auto;justify-self:start;margin-top:0}
@media(max-width:820px){.vs{margin-top:36px}}

/* key figures "figures": two or three numbers on a hairline, the number in the display face over its label, on the
   page's 12-column grid (one column-set per figure) */
.fig{padding:calc(10px*var(--tune-space,1)) 0 calc(100px*var(--tune-space,1))}
.fig dl{margin:0;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:24px}
.fig dl.n3{--n:3}
.fig dl.n4{--n:4}
.fig dl.n4 dd{font-size:calc(clamp(56px,6.5vw,112px)*var(--tune-size,1))}
.fig dl div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:14px;border-top:1px solid var(--ink);padding-top:22px}
.fig dd{margin:0;font:400 calc(clamp(64px,9vw,148px)*var(--tune-size,1))/.85 var(--fd);letter-spacing:-.03em;color:var(--clay)}
.fig dt{font-size:calc(16px*var(--tune-size,1));color:var(--mute);max-width:30ch}
@media(max-width:560px){.fig dl{grid-template-columns:1fr;gap:34px}}

/* prices and opening hours: one ledger across the page. The group title on the left, then rows of name, a dotted
   leader and the figure, all on one baseline. */
.a-led{display:grid;gap:clamp(48px,5vw,72px);padding:calc(64px*var(--tune-space,1)) 0 calc(72px*var(--tune-space,1));border-top:1px solid var(--ink)}
.a-led-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline}
.a-led h2{grid-column:1/6;font:400 calc(clamp(32px,3.2vw,48px)*var(--tune-size,1))/1.05 var(--fd);letter-spacing:-.015em}
.a-led-g>ul,.a-led-b{grid-column:6/13;min-width:0}
.a-led ul{list-style:none;padding:0;margin:0}.a-led .wk+ul{margin-top:8px}
.a-led ul>li{display:flex;align-items:baseline;gap:18px;padding:13px 0}
.a-led ul>li span{flex:0 1 auto;min-width:0;font:400 calc(clamp(21px,1.75vw,27px)*var(--tune-size,1))/1.25 var(--fd)}
.a-led ul>li i{flex:1 1 0;min-width:32px;height:2px;position:relative;top:-.28em;background:radial-gradient(circle,currentColor 0 1px,transparent 1.4px) 0 50%/8px 2px repeat-x;color:color-mix(in srgb,var(--ink) 40%,transparent)}
.a-led ul>li b{flex:0 0 auto;max-width:62%;overflow-wrap:anywhere;font:400 calc(clamp(22px,1.9vw,29px)*var(--tune-size,1))/1.25 var(--fd);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.a-led ul>li.off :is(span,b){color:var(--mute)}
.a-led .wk{margin-bottom:8px}
@media(max-width:820px){.a-led{padding:calc(72px*var(--tune-space,1)) 0 calc(80px*var(--tune-space,1))}.a-led-g{display:block}.a-led h2{margin-bottom:14px}.a-led ul>li{gap:12px;padding:11px 0}.a-led ul>li i{min-width:20px}}

/* closing: reference. The title as an italic line, then the phone number as one oversized serif line sized to fill
   the column (--w = its width in em, from Closing.astro), and a hairline row with the address and the book button. */
.final.a-end{background:none;color:var(--ink);padding:0 0 calc(28px*var(--tune-space,1))}
.a-end .wrap{display:block}.a-end-in{border-top:1px solid var(--ink);padding-top:clamp(64px,8vw,112px)}
.a-end h2{font:italic 400 calc(clamp(30px,3.4vw,52px)*var(--tune-size,1))/1.1 var(--fd);letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.a-end-big{display:block;width:max-content;max-width:100%;margin:.12em 0 0 -.04em;font:400 min(16vw,220px,calc((min(100vw,1360px) - 2*clamp(20px,4vw,56px))/var(--w)))/1.05 var(--fd);letter-spacing:-.035em;font-variant-numeric:lining-nums;white-space:nowrap;text-decoration:none;transition:color .35s ease}
.a-end-big:hover{color:var(--clay)}
.a-end-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid var(--line)}
.a-end-f p{font:italic 400 calc(clamp(19px,1.5vw,22px)*var(--tune-size,1))/1.3 var(--fd);color:var(--mute)}
.final.a-end .btn{background:var(--ink);color:var(--bg)}.final.a-end .btn:hover{background:var(--clay);color:var(--bg)}
@media(max-width:600px){nav{gap:16px;padding:14px 0}nav .logo{font-size:calc(21px*var(--tune-size,1));line-height:1.15}.nav-end .btn{padding:11px 16px;font-size:calc(13px*var(--tune-size,1));white-space:nowrap;max-width:52vw;overflow:hidden;text-overflow:ellipsis}.hero .cta{gap:14px 24px}.hero .btn{padding:17px 28px}}
/* reference pairing: ledger rows and the long quote in Literata (Gloock's hairline + and – are too faint at row size,
   and four lines of heavy roman would shout); headings, names and figures stay in Gloock */
.f-reference :is(.a-led ul>li span,.a-led ul>li b){font-family:var(--ft);font-weight:400}
.f-reference :is(.quote p,.pair blockquote){font-family:var(--ft);font-weight:360;letter-spacing:-.02em}
/* bento gallery: keep a long title clear of the photo count that shares its grid cell (Gloock runs wide) */
@media(min-width:901px){.gal .g-bn-head{padding-right:clamp(96px,9vw,132px)}}

/* long shop names on small screens (html.name-long / name-xl from engine/shared/site.ts; qa tests "Loodgietersbedrijf Jansen") */
@media(max-width:600px){html.name-xl header .logo{font-size:17px}}

/* --- polish: visible form fields, a calmer closing phone with its own button, the first phone screen clear of the action bar --- */
input,textarea,select{background:color-mix(in srgb,var(--bg) 55%,Canvas);border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:6px;padding:12px 14px;min-height:48px}
textarea{min-height:120px}
form .btn{min-height:52px;padding:16px 32px;font-size:calc(16px*var(--tune-size,1))}
.a-end-big{font-size:min(16vw,96px,calc((min(100vw,1360px) - 2*clamp(20px,4vw,56px))/var(--w)))}
.a-end-btn{margin-top:clamp(24px,3vw,36px);min-height:52px;padding:16px 34px;font-size:calc(17px*var(--tune-size,1))}
@media(max-width:820px){.hs-img{height:clamp(220px,32svh,380px)}.hs-body{padding-bottom:calc(var(--pb-h,64px) + 24px)}}
.quote{padding-bottom:calc(64px*var(--tune-space,1))}.quote:not(.pair) cite{margin-top:8px}
.hs-k{font-style:normal;font-size:calc(18px*var(--tune-size,1));letter-spacing:.01em}