/* Generated from index.html by tools/build_pages.py. Do not edit by hand. */
/* Mioya (dotcolon.net, SIL Open Font License 1.1): headings + testimonials. Body/UI stays Switzer. TODO: convert to woff2 for production. */
@font-face{font-family:"Mioya";src:url(../fonts/Mioya-Light.otf) format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Mioya";src:url(../fonts/Mioya-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mioya";src:url(../fonts/Mioya-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* ========== Tokens (editorial direction: cream paper, oversized light type, red core) ========== */
:root{
  --bone:#FFFEF7; --paper:#F6F3EA; --ink:#0B0B0B; --graphite:#5F5F5F; --ash:#AAAAAA; --rule:#E4E0D3;
  --red:#991615; --red-on-dark:#C4302A; --red-700:#741110; --burgundy:#4F0618; --navy:#101731;
  --sans:"Switzer","Inter",system-ui,sans-serif; --display:"Mioya","Switzer",system-ui,sans-serif; --quote:var(--display);
  --page:1440px; --gutter:clamp(16px,3.2vw,48px); --section:clamp(80px,10vw,160px);
  --fs-mega:var(--fs-hero); --fs-h2:clamp(2.25rem,4.4vw,4.5rem); --fs-h3:clamp(1.875rem,3vw,3rem);
  --fs-lead:clamp(1.125rem,1.3vw,1.25rem); --fs-body:1rem; --fs-small:.875rem;
  --radius:4px;
  /* ---- design scales (Refactoring UI pass): pick from these, never ad hoc ---- */
  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-30:1.875rem;
  --fs-hero:clamp(3rem,8vw,8rem); --fs-h1:clamp(2.25rem,5.6vw,6rem);
  --fs-stat:clamp(1.5rem,2.4vw,2.25rem); --fs-quote:clamp(1.5rem,2.3vw,2.25rem); --fs-quote-sm:clamp(1.25rem,1.9vw,1.875rem);
  --grey-100:#F6F3EA; --grey-200:#E4E0D3; --grey-300:#CFCBC0; --grey-400:#AAAAAA; --grey-500:#77746B; --grey-600:#5F5F5F; --grey-700:#45433D; --grey-800:#2A2926; --grey-900:#0B0B0B;
  --on-dark:#FFFEF7; --on-dark-2:#CFCCC3; --on-dark-3:#A19E95; --on-red:#FFFEF7; --on-red-2:#F7DCD6;
  --shadow-1:0 1px 3px hsla(0,0%,0%,.2); --shadow-2:0 4px 6px hsla(0,0%,0%,.2); --shadow-3:0 5px 15px hsla(0,0%,0%,.2);
  --shadow-4:0 10px 24px hsla(0,0%,0%,.2); --shadow-5:0 15px 35px hsla(0,0%,0%,.2);
 --ease:cubic-bezier(.2,.7,.2,1); --hop:cubic-bezier(.87,0,.13,1); --bar-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overscroll-behavior:none}   /* no rubber-band bounce at the top and bottom of the page */
body{text-wrap:balance} /* even line lengths everywhere, so no word is left alone on a last line */
html{-webkit-text-size-adjust:100%}
/* smooth only for in-page links once the visitor is using the page; a #link arriving from another page jumps straight there */
html:focus-within{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.accent{color:var(--red)}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);display:flex;gap:.75rem;align-items:center}
.rule{border:0;border-top:1px solid var(--rule)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;line-height:1}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.25}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--graphite);max-width:38ch;text-wrap:balance}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;border-radius:999px;font-size:1rem;font-weight:500;line-height:1;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
.btn--primary{background:var(--red);color:var(--bone)}
.btn--primary:hover{background:var(--red-700)}
.btn--ghost{border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone)}
.btn--light{border:1px solid rgba(255,254,247,.4);color:var(--bone)}
.btn--light:hover{background:var(--bone);color:var(--ink)}
.btn--bone{background:var(--bone);color:var(--ink)}
.btn--bone:hover{background:var(--ink);color:var(--bone)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{display:inline-flex;gap:.5rem;align-items:center;border-bottom:1px solid currentColor;padding-bottom:2px;font-weight:500}
.link:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* "Call us" sheet, opened from the phone button on the mobile bar */
.call{margin:auto auto 0;width:100%;max-width:520px;max-height:none;border:0;padding:0;background:transparent;color:var(--ink)}
.call::backdrop{background:rgba(11,11,11,.5)}
.call__sheet{background:var(--bone);border-radius:16px 16px 0 0;padding:1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom))}
.call[open] .call__sheet{animation:call-up .45s var(--ease)}
@keyframes call-up{from{transform:translateY(100%)}}
.call__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.call h2{font-size:1.5rem;font-weight:300;letter-spacing:-.01em}
.call__close{width:40px;height:40px;border-radius:50%;font-size:1.5rem;line-height:1;color:var(--graphite)}
.call ul{list-style:none}
.call li a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.call li:last-child a{border-bottom:0}
.call li span{color:var(--graphite)}
.call li b{font-weight:500;font-size:1.125rem}
.call li a:hover b,.call li a:focus-visible b{color:var(--red)}
@media (prefers-reduced-motion:reduce){.call[open] .call__sheet{animation:none}}

/* ========== Header ========== */
/* transparent over the hero; .is-scrolled (set on <html>) brings the cream bar back */
header.site{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.is-scrolled header.site{background:rgba(255,254,247,.92);backdrop-filter:blur(10px);border-bottom-color:var(--rule)}
header.site .brand,nav.main a,.mega__trigger{transition:color .4s var(--ease)}
html:not(.is-scrolled):not(.mega-open) header.site .brand,html:not(.is-scrolled):not(.mega-open) nav.main a,html:not(.is-scrolled):not(.mega-open) .mega__trigger{color:var(--bone)}
html:not(.is-scrolled):not(.mega-open) nav.main > a::after{background:var(--bone)}
html:not(.is-scrolled):not(.mega-open) header.site .brand .mark{background:var(--bone)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:2rem}
/* Scrolled: the bar drops in as a cream band narrower than the page, its two ends cut to the
   Corrib coving profile (tools/make_profiles.py), as if run along the top of the window like a ceiling.
   The logo and CTA stay put: the band reaches past them into the gutter, and the profile shrinks to fit
   whatever gutter there is. It wipes down (clip-path) so it never covers the announcement bar above. */
header.site{--pad:12px;--pw:min(64px,calc(max(var(--gutter),calc((100vw - var(--page)) / 2 + var(--gutter))) - var(--pad)))}
.band{position:absolute;top:0;left:50%;height:100%;z-index:-1;pointer-events:none;transform:translateX(-50%);
  filter:drop-shadow(0 1px 2px rgba(11,11,11,.05)) drop-shadow(0 8px 18px rgba(11,11,11,.07))}  /* soft shadow that follows the profile */
header.site .band{width:calc(min(var(--page),100vw) - 2 * var(--gutter) + 2 * (var(--pw) + var(--pad)))}
.band::before{content:"";position:absolute;inset:0;background:var(--bone);
  clip-path:inset(0 0 100% 0);opacity:0;transition:opacity .25s var(--ease),clip-path 0s .25s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0L0 0L0 4C0 9 4 13 9 13L13 13L13 19C43.4 19 68 38.3 68 62C68 67 71.6 71 76 71C84.3 71 91 79.5 91 90L91 95L96 95L96 100L100 100Z'/%3E%3C/svg%3E") 0 0/var(--pw) 100% no-repeat,linear-gradient(#000 0 0) calc(var(--pw) - 1px) 0/calc(100% - 2 * var(--pw) + 2px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 4C100 9 96 13 91 13L87 13L87 19C56.6 19 32 38.3 32 62C32 67 28.4 71 24 71C15.7 71 9 79.5 9 90L9 95L4 95L4 100L0 100Z'/%3E%3C/svg%3E") 100% 0/var(--pw) 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0L0 0L0 4C0 9 4 13 9 13L13 13L13 19C43.4 19 68 38.3 68 62C68 67 71.6 71 76 71C84.3 71 91 79.5 91 90L91 95L96 95L96 100L100 100Z'/%3E%3C/svg%3E") 0 0/var(--pw) 100% no-repeat,linear-gradient(#000 0 0) calc(var(--pw) - 1px) 0/calc(100% - 2 * var(--pw) + 2px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 4C100 9 96 13 91 13L87 13L87 19C56.6 19 32 38.3 32 62C32 67 28.4 71 24 71C15.7 71 9 79.5 9 90L9 95L4 95L4 100L0 100Z'/%3E%3C/svg%3E") 100% 0/var(--pw) 100% no-repeat}
.is-scrolled header.site{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.is-scrolled .band::before{clip-path:inset(0);opacity:1;transition:clip-path .5s var(--ease),opacity 0s}  /* wipe in, fade out */
.menu-open .band::before{clip-path:inset(0 0 100% 0);opacity:0;transition:none}
.mega-open .band::before{clip-path:inset(0);opacity:1;transition:none}   /* the mega menu hangs from the band */
@media (prefers-reduced-motion:reduce){.band::before{transition:none}}
.brand{display:flex;align-items:center;gap:.75rem;font-size:1.125rem;font-weight:500;letter-spacing:-.02em}
.brand .mark{width:30px;aspect-ratio:353/335;background:var(--red);-webkit-mask:url(../assets/logo-arch.png) center/contain no-repeat;mask:url(../assets/logo-arch.png) center/contain no-repeat}
/* full logo lockup (assets/munster-coving-logo.svg), coloured by currentColor */
.brand .logo{display:block;height:36px;aspect-ratio:4204.64/615.55;background:currentColor;transition:background-color .4s var(--ease);-webkit-mask:url(../assets/munster-coving-logo.svg) left center/contain no-repeat;mask:url(../assets/munster-coving-logo.svg) left center/contain no-repeat}
.brand--footer{max-width:22rem}
.brand--footer .logo{width:100%;height:auto;color:var(--bone)}
nav.main{display:flex;gap:2rem;font-size:1rem}
nav.main a{position:relative;padding:.5rem 0}
nav.main > a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .3s var(--ease)}
nav.main > a:hover::after{right:0}

/* ---- key stats: full-width transparent strip along the bottom of the hero ---- */
.hb__stats{position:relative;list-style:none;display:grid;grid-template-columns:auto repeat(5,1fr);align-items:center;width:calc(100% - 2 * var(--gutter));max-width:var(--page);margin:0 auto;
  border-top:1px solid rgba(255,254,247,.2);padding:clamp(18px,2.6vh,28px) 0;color:var(--bone);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hb__stats.on{opacity:1;transform:none}
.hb__stats li{display:flex;flex-direction:column;gap:.25rem;padding:0 clamp(16px,2vw,28px);border-left:1px solid rgba(255,254,247,.2);min-width:0}
.hb__stats li:first-child{border-left:0;padding-left:0}
.hb__stats li:nth-child(2){padding-left:clamp(16px,2vw,28px)}
.hb__stats b{font-family:var(--display);font-weight:300;font-size:var(--fs-stat);letter-spacing:-.02em;line-height:1;white-space:nowrap}   /* the serif, as in the headings */
.hb__stats b .star{font-size:var(--fs-20);margin-right:.3em;vertical-align:.08em;color:inherit;letter-spacing:0;text-transform:none}
.hb__stats span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap}
.hb__stats a{color:inherit}
.hb__stats a:hover span{color:var(--bone)}
/* award logo: transparent PNG rendered as a single light-tone mark */
.hb__stats img{height:clamp(44px,5vh,58px);width:auto;filter:brightness(0) invert(1);opacity:.85}
.hb__stats li > a{display:flex;flex-direction:column;gap:.25rem}
@media (max-width:1100px){
  .hb__stats{grid-template-columns:repeat(5,minmax(max-content,1fr));overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hb__stats::-webkit-scrollbar{display:none}
  .hb__stats li:first-child{display:none}
  .hb__stats li:nth-child(2){border-left:0;padding-left:0}
}
@media (prefers-reduced-motion:reduce){ .hb__stats{opacity:1;transform:none;transition:none} }

/* ========== Desktop product mega menu ========== */
.mega__trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 0;font-size:1rem;color:inherit;position:relative}
.mega__trigger .chev{display:inline-block;width:7px;height:7px;border-right:1.25px solid currentColor;border-bottom:1.25px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.mega-open .mega__trigger .chev{transform:translateY(1px) rotate(-135deg)}
/* phone + email dropdown beside the quote button (replaces the old announcement bar) */
.header-end{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}
.reach{position:relative}
.reach__btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 0;font-size:1rem;color:inherit;transition:color .4s var(--ease)}
.reach__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.reach__btn .chev{display:inline-block;width:7px;height:7px;border-right:1.25px solid currentColor;border-bottom:1.25px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.reach.is-open .reach__btn .chev{transform:translateY(1px) rotate(-135deg)}
.reach__btn:hover{color:var(--red)}
html:not(.is-scrolled):not(.mega-open) .reach__btn{color:var(--bone)}
.reach__panel{position:absolute;right:0;top:calc(100% + 14px);width:300px;padding:.25rem 1.25rem;background:var(--bone);color:var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow-4);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.reach.is-open .reach__panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s}
.reach__panel a{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:.9375rem}
.reach__panel a:last-child{border-bottom:0}
.reach__panel span{color:var(--graphite)}
.reach__panel b{font-weight:500}
.reach__panel a:hover b,.reach__panel a:focus-visible b{color:var(--red)}
@media (max-width:1000px){.reach__num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}  /* icon only when space is tight */
/* capped to the band's flat underside (between the two profile ends), so it reads as hanging from it */
.mega__panel{position:absolute;top:100%;left:calc(50% - var(--mw) / 2);width:var(--mw);
  --mw:calc(min(var(--page),100vw) - 2 * var(--gutter) + 2 * var(--pad));
  background:var(--bone);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-4);
  clip-path:inset(0 -80px -80px -80px);   /* keep the shadow off the band above: sides and bottom only */
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s;color:var(--ink)}
.mega-open .mega__panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s}
.mega__inner{display:grid;grid-template-columns:.8fr 1.5fr 2.2fr;gap:clamp(24px,3vw,56px);--mp:clamp(32px,3.5vw,52px);padding:clamp(12px,1.4vw,20px) var(--mp) clamp(16px,1.6vw,24px)}  /* sides match the bottom; less above, as the band already gives air */
/* products as an even 6 × 2 grid of square photos, the group as a small tag under each name */
.mega__inner--grid{display:block;padding-bottom:clamp(24px,2.2vw,32px)}
.mega__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.75rem}
.mega__head h4{font-weight:400;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.mega__head .mega__all{margin-top:0}
.mega__grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px clamp(14px,1.4vw,22px)}
.mega__tile{display:block}
.mega__img{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper)}
.mega__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mega__tile:hover .mega__img img,.mega__tile:focus-visible .mega__img img{transform:scale(1.04)}
.mega__name{display:block;margin-top:.5rem;font-size:.9375rem;line-height:1.25;transition:color .2s}
.mega__tile:hover .mega__name{color:var(--red)}
.mega__tag{display:block;margin-top:.15rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.mega__all{display:inline-flex;gap:.5rem;margin-top:1rem;font-size:.875rem;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
.mega__all:hover{color:var(--red)}
.mega-open header.site{background:transparent;border-bottom-color:transparent;backdrop-filter:none}

/* ========== Mobile / tablet menu: push overlay (adapted from the Rigney Forge header) ==========
   The page slides down while a full-screen panel wipes in from the top and the links rise into view. */
.mbar{display:none}
.menu{display:none}
@media (max-width:900px){
  :root{--bar-h:64px}
  header.site{display:none}
  #page{padding-top:var(--bar-h);transition:transform 1s var(--hop)}
  .menu-open #page{transform:translateY(100svh)}
  .menu-open,.menu-open body{overflow:hidden}

  .mbar{display:flex;position:fixed;inset:0 0 auto;z-index:100;height:var(--bar-h);padding:0 var(--gutter);align-items:center;justify-content:space-between;
    background:rgba(255,254,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);transition:background .4s,border-color .4s}
  .menu-open .mbar{background:transparent;border-color:transparent;backdrop-filter:none}
  .mbar .brand{transition:color .4s}
  .mbar .brand .logo{height:26px}
  .menu-open .mbar .brand{color:var(--bone)}
  .mbar .brand .mark{transition:background .4s}
  .menu-open .mbar .brand .mark{background:var(--bone)}
  .mbar__actions{display:flex;gap:8px}
  .mbar__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);
    transition:transform .16s var(--ease),background-color .3s,border-color .3s,color .3s,opacity .3s}
  .mbar__btn:active{transform:scale(.94)}
  .mbar__call{color:var(--ink)}
  .mbar__call svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
  html:not(.is-scrolled) .mbar__call{color:var(--bone);border-color:rgba(255,254,247,.6)}
  .menu-open .mbar__call{opacity:0;pointer-events:none}
  .mbar__toggle{background:var(--ink);color:var(--bone);
    transition:transform .16s var(--ease),background-color .3s,border-color .3s,color .3s}
  .menu-open .mbar__toggle{background:var(--bone);border-color:var(--bone);color:var(--red)}
  .mbar__icon{position:relative;width:28px;height:28px;display:grid;place-items:center}
  .mbar__icon span{position:absolute;width:14px;height:1.25px;background:currentColor;transition:transform .75s var(--hop)}
  .mbar__icon span:first-child{transform:translateY(-3px)}
  .mbar__icon span:last-child{transform:translateY(3px)}
  .menu-open .mbar__icon span:first-child{transform:rotate(45deg)}
  .menu-open .mbar__icon span:last-child{transform:rotate(-45deg)}

  .menu{display:block;position:fixed;inset:0;z-index:99;height:100svh;overflow:hidden;background:var(--red);color:var(--bone);
    clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path 1s var(--hop);pointer-events:none}
  .menu-open .menu{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);pointer-events:auto}
  .menu__content{height:100%;transform:translateY(-50%);transition:transform 1s var(--hop)}
  .menu-open .menu__content{transform:none}
  .menu__body{height:100%;display:flex;flex-direction:column;padding:calc(var(--bar-h) + 24px) var(--gutter) 28px}
  .menu__main{margin-block:auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .menu ul{list-style:none;display:grid}
  .menu__col--links ul{gap:2px}
  .menu__col--tags ul{gap:8px}
  .menu .mask{display:block;overflow:hidden;padding-bottom:.08em}
  .menu .line{display:block;transform:translateY(-110%)}
  .menu-open .menu .line{transform:none;transition:transform 2s var(--hop) var(--d,0ms)}
  .menu-closing .menu .line{transform:none}
  .menu-closing .menu__main,.menu-closing .menu__footer{opacity:.25;transition:opacity 1s var(--hop)}
  .menu-reset .menu,.menu-reset .menu *{transition:none!important}
  .menu__col--links a{font-size:var(--fs-h2);font-weight:300;line-height:1.25;letter-spacing:-.02em}
  .menu__col--links a:hover{color:var(--on-red-2)}
  .menu__heading{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--on-red-2);margin-bottom:8px}
  .menu__col--tags a{font-size:1rem;color:var(--bone)}
  .menu__col--tags a:hover{color:var(--on-red-2)}
  .menu__cta{margin-top:24px}
  .menu__cta .line{display:inline-flex}
  .menu__col--links .menu__cta a.btn{font-size:1rem;letter-spacing:0;line-height:1}
  .menu__cta .btn--primary{background:var(--bone);color:var(--red)}
  .menu__cta .btn--primary:hover{background:var(--ink);color:var(--bone)}
  .menu__footer{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:48px;padding-top:16px;border-top:1px solid rgba(255,254,247,.2);font-size:var(--fs-small);color:var(--on-red-2)}
  .menu__footer > div{display:grid;gap:4px}
  .menu__footer a:hover{color:var(--bone)}
}
@media (max-width:767px){
  .menu__main,.menu__footer{grid-template-columns:1fr;row-gap:16px}
  .menu__col--tags{display:none}
}
@media (prefers-reduced-motion:reduce){
  #page,.menu,.menu *,.mbar *{transition-duration:.01ms!important;transition-delay:0s!important}
  .menu-open #page{transform:none}
}

/* ========== Hero ========== */
.hero{position:relative;display:flex;align-items:center;min-height:min(calc(100svh - 110px),880px);padding:clamp(40px,6vh,80px) 0;
  background:var(--bone) url(../assets/hero-coving.jpg) right top/cover no-repeat}
/* soften the left of the photo (plain wall) so the copy reads cleanly */
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,254,247,.92) 0%,rgba(255,254,247,.78) 42%,rgba(255,254,247,0) 68%);pointer-events:none}
.hero .wrap{position:relative;width:100%}
.hero__content{max-width:780px}
.hero h1{font-size:var(--fs-h1);max-width:17ch}
.hero h1 .accent{color:var(--red)}
.hero__body{margin-top:clamp(18px,2.4vw,28px)}
.hero__body p{font-size:var(--fs-lead);color:var(--graphite);max-width:46ch}
.hero__body p strong{color:var(--ink);font-weight:500}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero__call{margin-top:1rem;font-size:var(--fs-small);color:var(--graphite)}
.hero__call a{color:var(--ink);border-bottom:1px solid var(--rule)}
.hero__quote{position:absolute;right:var(--gutter);bottom:clamp(24px,5vh,56px);max-width:34ch;background:rgba(255,254,247,.88);backdrop-filter:blur(10px);border-radius:var(--radius);padding:1rem 1rem}
.hero__quote blockquote{font-family:var(--quote);font-weight:300;font-size:var(--fs-lead);line-height:1.25}
.hero__quote cite{display:block;margin-top:.75rem;font-style:normal;font-size:var(--fs-small);color:var(--graphite)}

/* ========== Scroll section: the finishing touch ========== */
/* tall track; the stage pins while --p goes 0 → 1 */
.finish{position:relative;height:180vh;margin-top:clamp(56px,7vw,112px)}
.finish__stage{position:sticky;top:var(--bar-h);height:calc(100svh - var(--bar-h));padding:0 var(--gutter) var(--gutter);display:flex}
.finish__frame{position:relative;flex:1;overflow:hidden;background:var(--paper)}
.finish__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 - var(--p,0) * .08));transform-origin:30% 20%}
/* coving "fitted" left to right: soft-edged wipe driven by --w */
.finish__with{--edge:calc(var(--w,0) * 130% - 30%);-webkit-mask-image:linear-gradient(90deg,#000 var(--edge),transparent calc(var(--edge) + 30%));mask-image:linear-gradient(90deg,#000 var(--edge),transparent calc(var(--edge) + 30%))}
.finish__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.62) 0%,rgba(11,11,11,.25) 38%,rgba(11,11,11,0) 60%);pointer-events:none}
.finish__copy{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);bottom:clamp(24px,5vw,64px);color:var(--bone);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.finish__title{font-family:var(--display);font-size:var(--fs-hero);font-weight:300;letter-spacing:-.02em;line-height:1}
.finish__title .w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.finish__title .w.on{opacity:1;transform:none}
.finish__aside{max-width:28ch;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.finish__aside.on{opacity:1;transform:none}
.finish__aside p{font-size:var(--fs-lead);line-height:1.5;color:var(--on-dark)}
.finish__aside .link{margin-top:1rem;color:var(--bone)}
@media (prefers-reduced-motion:reduce){
  .finish{height:auto}
  .finish__stage{position:relative;top:0;height:min(80vh,760px)}
  .finish__frame img{transform:none}
  .finish__with{-webkit-mask-image:none;mask-image:none}
  .finish__title .w,.finish__aside{opacity:1;transform:none;transition:none}
}

/* ========== Trust ========== */
.trust{margin-top:var(--section);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr)}
.trust li{padding:1.5rem 1rem 1.5rem 0;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:.25rem}
.trust li + li{padding-left:1rem}
.trust li:last-child{border-right:0}
.trust .num{font-size:var(--fs-stat);font-weight:300;letter-spacing:-.02em;line-height:1}
.trust .num .accent{color:var(--red)}
.trust .lbl{font-size:var(--fs-small);color:var(--graphite);white-space:nowrap}
.trust li > a{display:flex;flex-direction:column;gap:.25rem}
.trust li > a:hover .lbl{color:var(--red)}
.trust .num{display:flex;align-items:flex-start;height:1em}
.trust .star{font-size:var(--fs-20);margin-left:.12em;line-height:1.25}
.trust .tick{height:.78em;width:auto;margin-top:.12em;fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ========== About ========== */
.about{padding:var(--section) 0}
.about .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.about .eyebrow{grid-column:1/4}
.about h2{grid-column:4/13;max-width:18ch}
.about .body{grid-column:4/9;margin-top:2rem}
.about .body p{font-size:var(--fs-lead);color:var(--graphite)}
.about .body p + p{margin-top:1rem}
.about .steps{grid-column:9/13;margin-top:2rem;list-style:none;counter-reset:s}
.about .steps li{counter-increment:s;display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.about .steps li::before{content:"0" counter(s);font-size:var(--fs-small);color:var(--red);padding-top:.25rem;min-width:1.5rem}

/* ========== Coving callout ========== */
.coving{background:var(--red);color:var(--on-red);padding:var(--section) 0}
/* copy left, photo right on desktop; on phones the photo stays on top */
/* heading left, intro + buttons right, then the job photos (gallery grid + lightbox styles below) */
.coving__head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:end}
.coving h2{margin-top:1rem}
.coving .eyebrow{color:var(--on-red-2)}
.coving h2 .accent{color:var(--on-red-2)}
.coving .lead{color:var(--on-red-2)}
/* profile cards: the name and size sit on a cream tag; the whole card opens that profile */
.gal__item.cov-card{cursor:pointer;background:var(--red-700)}   /* links, not lightbox photos */
.cov-card__tag{position:absolute;left:12px;bottom:12px;right:12px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.75rem;text-align:left;
  padding:.7rem .9rem;border-radius:var(--radius);background:rgba(255,254,247,.94);backdrop-filter:blur(8px);color:var(--ink);font-size:.8125rem}
.cov-card__tag b{font-weight:500;font-size:.9375rem}
.cov-card__tag span{color:var(--graphite)}
.cov-card__tag b,.cov-card__tag span{grid-column:1;line-height:1.3}
.cov-card__tag .arr{grid-column:2;grid-row:1/3;color:var(--ink);transition:transform .25s var(--ease)}
.cov-card:hover .cov-card__tag .arr{transform:translateX(3px)}
.cov-card:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
@media (min-width:901px){ .gal__grid li:first-child .cov-card__tag{left:20px;bottom:20px;right:auto;min-width:260px;font-size:.875rem} .gal__grid li:first-child .cov-card__tag b{font-size:1.125rem} }
.coving .gal__grid{margin-top:clamp(32px,4vw,56px)}
.coving__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ========== Products ========== */
.products{padding:var(--section) 0}
.products__head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.products__head h2{max-width:none}
.tabs{display:flex;gap:.5rem}
.tabs button{padding:.75rem 1rem;border:1px solid var(--ink);border-radius:999px;font-size:.875rem;min-width:7.5rem}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px);list-style:none}
.card{position:relative;display:flex;flex-direction:column;height:100%}
.card[hidden]{display:none}
.card__img{aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__img img{transform:scale(1.04)}
.card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--ink)}
.card__meta span{font-size:var(--fs-small);color:var(--graphite)}
/* the whole card is the link, through the title's link stretched over it: one link per card, named by the product */
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:2px solid var(--red);outline-offset:6px;border-radius:var(--radius)}
.card h3{transition:color .2s}
.card:hover h3{color:var(--red)}
.card h3{font-size:1.5rem;margin-top:.25rem}
.card__img + h3{margin-top:1rem}
.card p{color:var(--graphite);font-size:1rem;margin-top:.25rem;flex:1}

/* ========== Testimonials ========== */
.testi{padding:var(--section) 0;border-top:1px solid var(--rule)}
.testi__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.testi .eyebrow{grid-column:1/4}
.testi__feature{grid-column:4/13}
/* every quote sits in the same grid cell, so the block is always as tall as the longest one: no jump when it changes */
.testi__stack{display:grid}
.testi__feature blockquote{grid-area:1/1;font-family:var(--quote);font-weight:300;font-size:var(--fs-quote);line-height:1.25;letter-spacing:-.02em;max-width:50ch;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.testi__feature blockquote.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease) .15s,visibility 0s}
.testi__feature footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--ink)}
.stars{color:var(--red);letter-spacing:.12em}
.testi__nav{display:flex;gap:.5rem}
.testi__nav button{width:48px;height:48px;border:1px solid var(--ink);border-radius:50%}
.testi__nav button:hover{background:var(--ink);color:var(--bone)}
.testi__more{grid-column:4/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(40px,5vw,72px)}
.testi__more figure{border-top:1px solid var(--rule);padding-top:1rem}
.testi__more blockquote{font-family:var(--quote);font-size:1rem;line-height:1.5;color:var(--graphite)}
.testi__more figcaption{margin-top:.75rem;font-size:var(--fs-small)}
.testi__google{grid-column:4/13;margin-top:2rem}
/* red section: cream type, pale-pink secondary text, cream rules and buttons */
.testi{position:relative;background:var(--red);color:var(--on-red);border-top:0}
.testi .eyebrow,.testi__more blockquote{color:var(--on-red-2)}
.testi .stars{color:var(--on-red)}
.testi__feature footer{border-top-color:rgba(255,254,247,.5)}
.testi__nav button{border-color:rgba(255,254,247,.5)}
.testi__nav button:hover{background:var(--bone);color:var(--red)}
.testi__more figure{border-top-color:rgba(255,254,247,.25)}
.testi .link:hover{color:var(--on-red-2)}

/* ========== Case study ========== */
.case{position:relative;overflow:hidden;color:var(--bone);padding:var(--section) 0;min-height:min(100svh,920px);display:flex;align-items:flex-end;
  background:#0B0B0B url(../assets/adare-ballroom.jpg) center 35%/cover no-repeat}
/* one black wash running corner to corner: deepest bottom left behind the copy, clearing to the top right so the ballroom ceiling shows.
   It stays at .66 or more behind the heading, which keeps the gold accent at 3:1 over the pale walls. */
.case::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,rgba(11,11,11,.92) 0%,rgba(11,11,11,.8) 40%,rgba(11,11,11,.66) 78%,rgba(11,11,11,.12) 100%)}
.case > .wrap{position:relative;width:100%}
.case .eyebrow{color:var(--on-dark-2)}
.case h2{font-size:var(--fs-mega);margin-top:1.5rem}
.case .eyebrow{color:var(--on-dark-2)}
.case h2{font-size:var(--fs-mega);margin-top:1.5rem}
/* the wash deepens from just above the eyebrow down to the foot of the section (one soft edge, no band), so the gold accent keeps 3:1 over the bright parts of the photo */
.case > .wrap::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:-2rem;bottom:-200vh;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0,rgba(11,11,11,.62) 4.5rem,rgba(11,11,11,.62) 100%)}
.case h2 .accent{color:#B8984D}
.case .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:clamp(40px,5vw,72px);align-items:end}
.case p{font-size:var(--fs-lead);color:var(--on-dark-2);max-width:42ch}
.case .stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,254,247,.4)}
.case .stats li{padding:1rem 1rem 0 0}
.case .stats b{display:block;font-weight:300;font-size:var(--fs-stat);letter-spacing:-.02em;line-height:1.25}
.case .stats span{font-size:var(--fs-small);color:var(--on-dark-2)}
/* Adare Manor logo (swap for project photography when the client supplies it) */
.case .cta-row{display:flex;gap:1.5rem;align-items:center;margin-top:2rem;flex-wrap:wrap}

/* ========== Photo gallery + lightbox (homepage coving section, product pages) ========== */
/* editorial grid: the first photo leads at double size */
.gal__grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-top:2rem}
.gal__grid li{aspect-ratio:1}
.gal__grid li:first-child{grid-column:span 2;grid-row:span 2}
/* with 8 photos the last row would end one short (4 or 2 columns alike): the last photo stretches across two columns */
.gal__grid li:first-child:nth-last-child(8) ~ li:last-child{grid-column:span 2;aspect-ratio:auto}
.gal__item{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--paper);cursor:zoom-in}
.gal__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal__item:hover img{transform:scale(1.04)}
.gal__item:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0;overflow:hidden}
.lightbox::backdrop{background:rgba(11,11,11,.8)}
.lightbox[open]{display:grid;place-items:center}
/* fixed stage, contained: small source photos are scaled up to fill the view */
.lightbox__img{width:min(88vw,1100px);height:min(72vh,760px);margin-bottom:6vh;object-fit:contain;transition:opacity .2s var(--ease)}
.lightbox__count{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);color:var(--on-dark-2);font-size:var(--fs-small);letter-spacing:.12em}
.lightbox__btn,.lightbox__close{position:fixed;width:48px;height:48px;border-radius:50%;background:var(--bone);color:var(--ink);font-size:1.25rem;display:grid;place-items:center;box-shadow:var(--shadow-3)}
.lightbox__btn:hover,.lightbox__close:hover{background:var(--red);color:var(--bone)}
.lightbox__prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox__close{top:24px;right:24px;font-size:1.5rem}
@media (max-width:900px){ .gal__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .gal__grid{gap:8px}
  .lightbox__prev{left:12px}.lightbox__next{right:12px}
  .lightbox__btn{top:auto;bottom:16px;transform:none}
  .lightbox__count{bottom:30px}
}

/* ========== Section dividers ========== */
/* A band of the next section's colour steps into its neighbour and ends in the Victorian Cove
   profile (tools/make_profiles.py), like a section through the coving itself. */
.coving,.products,.showroom,.contact{position:relative}
.cut{--h:clamp(36px,5vw,80px);--x:58%;position:absolute;left:0;right:0;height:var(--h);z-index:2;pointer-events:none;
  transform:scale(var(--sx,1),var(--sy,1))}
.cut::before,.cut::after{content:"";position:absolute;top:0;bottom:0;background:var(--fill,var(--bone))}
.cut::before{left:0;width:calc(var(--x) + 1px)}
.cut::after{left:var(--x);width:var(--h);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 100L100 95L93 95L93 90C52.7 90 20 58.7 20 20C20 14.5 16.4 10 12 10L8 10L8 0L0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 100L100 95L93 95L93 90C52.7 90 20 58.7 20 20C20 14.5 16.4 10 12 10L8 10L8 0L0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.cut--up{bottom:calc(100% - 1px)}               /* rises out of its section into the one above */
.cut--top{top:-1px;--sy:-1}                      /* hangs from the section above, like coving off a ceiling */
.cut--bottom{bottom:-1px}                        /* rises from the section below */
.cut--flip{--sx:-1}
@media (max-width:720px){.cut{--x:66%}}

/* ========== Contact ========== */
/* ========== Showroom ========== */
/* ========== Bespoke & renovations ========== */
.made{position:relative;background:var(--paper);padding:var(--section) 0}
.made__head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.made__head .eyebrow{grid-column:1/4;padding-top:.75rem}
.made__head h2{grid-column:4/13;max-width:18ch}
.made__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px)}
.made__img{aspect-ratio:3/2;overflow:hidden;background:var(--bone)}
.made__img img{width:100%;height:100%;object-fit:cover}
.made__img--draw{background:none}
.made__img--draw img{object-fit:contain;padding:clamp(16px,4vw,48px)}
.made__item h3{margin-top:1.5rem;font-size:clamp(1.5rem,2.2vw,2.25rem)}
.made__item p{margin-top:.75rem;color:var(--graphite);max-width:52ch}
.made__list{list-style:none;margin:1.5rem 0 1.75rem}
.made__list li{padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--rule);position:relative}
.made__list li::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:.6rem;height:.6rem;border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);border-bottom-left-radius:100%}  /* a cove in section: the quarter-round where wall meets ceiling */
@media (max-width:820px){
  .made__head{display:block}
  .made__head h2{margin-top:1rem}
  .made__grid{grid-template-columns:1fr}
}
.showroom{background:var(--paper);padding:var(--section) 0}
.showroom .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.showroom h2{margin-top:1rem}
.showroom .lead{margin-top:1rem;color:var(--graphite)}
.showroom dl{margin-top:2rem}
.showroom dl div{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.showroom dt{color:var(--graphite)}
.showroom dd{text-align:right}
.showroom__more{display:inline-flex;margin-top:1.5rem}
.showroom__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
/* sample board: the profile silhouettes on cream tiles, like the boards on the showroom wall */
.showroom__board{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.showroom__board li{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--bone);border-radius:var(--radius);font-size:.8125rem;color:var(--graphite)}
.showroom__board img{width:100%;aspect-ratio:1;object-fit:contain}
@media (max-width:900px){ .showroom .grid{grid-template-columns:1fr} .showroom__board{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .showroom__board li{padding:.6rem;font-size:.6875rem} }
@media (max-width:560px){ .showroom__board{grid-template-columns:repeat(2,minmax(0,1fr))} }

.contact{padding:var(--section) 0}
.contact .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px)}
.contact h2{margin-top:1rem}
.contact .lead{margin-top:1rem}
.contact dl{margin-top:2rem}
.contact dl div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.contact dl div:first-child{padding-top:0}
.contact dl div:last-child{border-bottom:0;padding-bottom:0}
.contact dt{color:var(--graphite)}
.contact dd a:hover{color:var(--red)}
form.enquire{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:var(--fs-small);color:var(--graphite)}
.field input,.field textarea,.field select{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.5rem 0;border-radius:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red)}
fieldset.field{border:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.chips label{position:relative}
.chips input{position:absolute;opacity:0}
.chips span{display:inline-block;padding:.5rem 1rem;border:1px solid var(--rule);border-radius:999px;font-size:.875rem;color:var(--ink);cursor:pointer;transition:all .2s}
.chips input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chips input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.form-foot small{color:var(--graphite)}
.sent{align-self:center;display:grid;gap:.5rem;padding:clamp(28px,4vw,48px);background:var(--paper);border-radius:var(--radius);animation:sentIn .6s var(--ease) both}
.sent h3{font-size:var(--fs-h3)}
.sent p{color:var(--graphite);font-size:var(--fs-lead)}
.sent__tick{width:44px;height:44px;border-radius:50%;background:var(--red);position:relative}
.sent__tick::after{content:"";position:absolute;left:15px;top:12px;width:12px;height:18px;border-right:2px solid var(--bone);border-bottom:2px solid var(--bone);transform:rotate(45deg)}
.sent:focus{outline:none}
@keyframes sentIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ========== Footer ========== */
footer.site{background:var(--ink);color:var(--bone);padding:clamp(64px,8vw,120px) 0 2rem}
footer.site .big{font-family:var(--display);font-size:var(--fs-mega);font-weight:300;letter-spacing:-.02em;line-height:1}
footer.site .big .accent{color:var(--red-on-dark)} /* brand red is 2.3:1 on ink; this one is 3.6:1 */
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--gutter);margin-top:clamp(48px,6vw,96px);padding-top:2rem;border-top:1px solid rgba(255,254,247,.2)}
footer.site h4{font-weight:400;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:1rem}
footer.site ul{list-style:none;display:grid;gap:.5rem}
footer.site a{color:var(--on-dark)}
footer.site a:hover{color:var(--bone)}
footer.site .footer__desc{margin-top:1rem;color:rgba(255,254,247,.65);max-width:34ch}
footer.site .footer__contact{margin-top:1.75rem;max-width:22rem;gap:0}
footer.site .footer__contact li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(255,254,247,.12)}
footer.site .footer__contact span{color:var(--on-dark-3);font-size:var(--fs-small)}
footer.site .footer__social{display:flex;gap:.5rem;margin-top:1.5rem}
footer.site .footer__social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,254,247,.3);border-radius:50%;transition:background .2s,color .2s,border-color .2s}
footer.site .footer__social a:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
footer.site .legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(48px,6vw,80px);padding-top:1.5rem;border-top:1px solid rgba(255,254,247,.2);font-size:.75rem;color:var(--on-dark-3)}
footer.site .brand .mark{background:var(--bone)}

/* ========== Motion ========== */
[data-in]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-in].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-in]{opacity:1;transform:none;transition:none}
}

/* ========== Responsive ========== */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .trust ul{grid-template-columns:repeat(3,1fr)}
  .trust li:nth-child(3){border-right:0}
  .trust li:nth-child(4){padding-left:0}
  .trust li:nth-child(n+4){border-top:1px solid var(--rule)}
}
@media (max-width:900px){
  .coving__head,.contact .grid,.case .grid{grid-template-columns:1fr}
  /* photo becomes a band at the top, copy sits below on paper */
  .hero__quote{position:static;margin-top:2rem;max-width:40ch}
  /* image shifted up so the coving corner, not just ceiling, fills the band */
  .hero{display:block;min-height:0;padding-top:64vw;background-size:180% auto;background-position:78% -18vw}
  .hero::before{background:linear-gradient(180deg,rgba(255,254,247,0) 0,rgba(255,254,247,0) 44vw,var(--bone) 66vw)}
  .about .eyebrow,.about h2,.about .body,.about .steps,.testi .eyebrow,.testi__feature,.testi__more,.testi__google{grid-column:1/-1}
  .testi__more{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* keep the ceiling line in frame: it's what the hero is about */
  .finish__frame img{object-position:30% 0%}
  .finish__copy{flex-direction:column;align-items:flex-start;gap:1rem}
  .trust ul{grid-template-columns:1fr 1fr}
  .trust li{padding:1.5rem 1rem 1.5rem 0}
  .trust li:nth-child(odd){border-right:1px solid var(--rule);padding-left:0}
  .trust li:nth-child(even){border-right:0;padding-left:1rem}
  .trust li:nth-child(n+3){border-top:1px solid var(--rule)}
  .trust li:last-child{grid-column:1/-1;border-right:0;padding-left:0}
  .trust .lbl{white-space:normal}
  .cards{grid-template-columns:1fr 1fr;gap:16px 12px}
  .card h3{font-size:1.125rem}
  .card p{display:none}
  form.enquire{grid-template-columns:1fr}
  .case .stats{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  .tabs{width:100%}
  .tabs button{flex:1;min-width:0}
}

/* ========== Variant: autoplay "finishing touch" hero ========== */
/* edge to edge: fills the screen below the header */
.hb{margin-top:calc(-1 * var(--bar-h) - 1px);height:100svh;min-height:560px;display:flex}
/* even 20% dark overlay so the cream type holds on the bright room, a touch deeper under the transparent nav */
.hb__frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,11,.34) 0,rgba(11,11,11,.2) 160px,rgba(11,11,11,.2) 100%)}
.hb__frame{position:relative;flex:1;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
/* pinned to the top so short/wide windows crop the floor, never the ceiling and coving */
.hb__frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:scale(calc(2.2 - var(--z,0) * 1.2));transform-origin:0% 0%}
/* --w sweeps the coving across the zoomed-in view (left ~60% of the photo); --z finishes the rest as the camera pulls out */
.hb__frame > img:first-child{filter:saturate(.35) brightness(.97);transition:filter 1.2s var(--ease)}
/* once the before/after is live, the "without" side gets its natural colour back */
.hb.is-live .hb__frame > img:first-child{filter:none}
.hb__with{--edge:calc(var(--w,0) * 105% - 45% + var(--z,0) * 45%);-webkit-mask-image:linear-gradient(90deg,#000 var(--edge),transparent calc(var(--edge) + 45%));mask-image:linear-gradient(90deg,#000 var(--edge),transparent calc(var(--edge) + 45%))}
/* after the intro: the pointer becomes a before/after divider (coving to the left of it, bare ceiling to the right) */
.hb.is-live .hb__frame{cursor:ew-resize}
.hb.is-live .hb__with{-webkit-mask-image:none;mask-image:none;clip-path:inset(0 calc(100% - var(--mx,100%)) 0 0)}
.hb__divider{position:absolute;top:0;bottom:0;left:var(--mx,100%);width:1px;margin-left:-.5px;background:rgba(255,254,247,.85);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.hb.is-hover .hb__divider{opacity:1}
/* wash sits behind the centred copy on the left, lighter toward the coving on the right */
/* no darkening: a light blur graded from the bottom-left corner toward the top-right, gone by about a third of the way,
   so the top of the image (the coving) stays pin-sharp and holds the focus */
.hb__scrim{position:absolute;inset:0;pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to top right,#000 0%,rgba(0,0,0,.55) 14%,rgba(0,0,0,.18) 26%,transparent 36%);
          mask-image:linear-gradient(to top right,#000 0%,rgba(0,0,0,.55) 14%,rgba(0,0,0,.18) 26%,transparent 36%)}
/* desktop: a lighter blur that is strongest at the left edge and thins steadily to nothing at the right edge of the body text; it still clears before the coving at the top */
@media (min-width:1001px){
  .hb__scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-size:var(--fs-lead);--hl:max(var(--gutter),calc((100vw - var(--page)) / 2));
    -webkit-mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.7) calc(var(--hl) + 14ch),rgba(0,0,0,.3) calc(var(--hl) + 34ch),transparent calc(var(--hl) + 52ch)),linear-gradient(to top,#000 0,#000 45%,transparent 72%);
            mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.7) calc(var(--hl) + 14ch),rgba(0,0,0,.3) calc(var(--hl) + 34ch),transparent calc(var(--hl) + 52ch)),linear-gradient(to top,#000 0,#000 45%,transparent 72%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
/* the faintest shadow so cream type separates from the softened wall */
.hb__copy{text-shadow:0 1px 18px rgba(11,11,11,.18)}
/* stats run over the bright window/lamp on the right, so they get a slightly firmer lift */
.hb__stats{text-shadow:0 1px 3px rgba(11,11,11,.35),0 2px 16px rgba(11,11,11,.35)}
.hb__body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding-top:var(--bar-h);pointer-events:none}
.hb__body a,.hb__body button{pointer-events:auto}
.hb__copy{position:relative;width:calc(100% - 2 * var(--gutter));max-width:var(--page);margin:auto;color:var(--bone);display:grid;grid-template-columns:1fr;justify-items:start;gap:1rem}
.hb__copy h1{font-family:var(--sans);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);grid-column:1/-1;font-size:var(--fs-small);font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--on-dark-2);display:flex;gap:.75rem;align-items:center}
.hb__copy h1.on{opacity:1;transform:none}
.hb__title{font-family:var(--display);font-size:var(--fs-hero);font-weight:300;letter-spacing:-.02em;line-height:1;word-spacing:-.06em}
.hb__title .w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .5s var(--ease),transform .65s var(--ease)}
.hb__title .w.on{opacity:1;transform:none}
.hb__aside{max-width:60ch;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hb__aside.on{opacity:1;transform:none}
.hb__aside p{font-size:var(--fs-lead);line-height:1.5;color:var(--on-dark);text-wrap:balance}
.hb__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
@media (max-width:900px){
  .hb{margin-top:calc(-1 * var(--bar-h));height:100svh;min-height:520px}
  html:not(.is-scrolled) .mbar{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
  html:not(.is-scrolled) .mbar .brand{color:var(--bone)}
  html:not(.is-scrolled) .mbar .brand .mark{background:var(--bone)}
  /* the profile band (.band) is the bar's background here too, with smaller ends; padding is the same
     scrolled or not, so the logo and Menu button never shift */
  .mbar{--pw:26px;--pad:8px;padding:0 calc(6px + var(--pw) + var(--pad));background:transparent;border-bottom-color:transparent;backdrop-filter:none}
  .mbar .band{width:calc(100% - 12px)}
  .hb__copy{grid-template-columns:1fr}
  /* copy spans the width on phones, so the blur rises from the bottom instead */
  .hb__scrim{-webkit-mask-image:linear-gradient(to top right,#000 0%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.18) 32%,transparent 42%);mask-image:linear-gradient(to top right,#000 0%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.18) 32%,transparent 42%)}
  .hb__frame > img{object-position:30% 0%}
}
@media (prefers-reduced-motion:reduce){
  .hb__frame > img{transform:none}
  .hb__with{-webkit-mask-image:none;mask-image:none}
  .hb__title .w,.hb__aside,.hb__copy h1{opacity:1;transform:none;transition:none}
}

/* weight rule: 300 is for display sizes only; card-level headings and small display lines use 400 */
h3,.card h3,.hb__stats b,.trust .num{font-weight:400}
/* header CTA is secondary so the hero/product primary is the only solid button in view */
.header-cta.btn--primary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.header-cta.btn--primary:hover{background:var(--red);color:var(--bone);box-shadow:inset 0 0 0 1px var(--red)}
html:not(.is-scrolled):not(.mega-open) .header-cta.btn--primary{color:var(--bone);box-shadow:inset 0 0 0 1px rgba(255,254,247,.6)}
html:not(.is-scrolled):not(.mega-open) .header-cta.btn--primary:hover{background:var(--bone);color:var(--ink);box-shadow:none}

/* ========== Touch: phones and tablets ========== */
/* every tappable thing is at least 44px tall on touch screens; nothing changes for a mouse */
@media (max-width:1024px),(pointer:coarse){
  footer.site .cols ul:not(.footer__social):not(.footer__contact){gap:0}
  footer.site .cols ul:not(.footer__social):not(.footer__contact) a{display:inline-flex;align-items:center;min-height:44px}
  footer.site .footer__contact li{padding:0;align-items:center}
  footer.site .footer__contact a{display:inline-flex;align-items:center;min-height:44px}
  footer.site .footer__social a{width:44px;height:44px}
  footer.site .legal a{display:inline-flex;align-items:center;min-height:44px}
  footer.site .legal{align-items:center}
  .field input,.field select{min-height:48px}
  .chips span{padding:.75rem 1rem}
  .link{padding-block:.5rem}
  .contact dd a{display:inline-flex;align-items:center;min-height:44px}
  .mbar .brand{min-height:44px}
}
/* ---- WhatsApp chat button: a round icon, bottom right on every page (its name is in aria-label) ---- */
.wa{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:45;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;font-size:var(--fs-small);font-weight:500;box-shadow:var(--shadow-3);transition:transform .25s var(--ease),box-shadow .25s}
.wa:hover{transform:translateY(-2px);box-shadow:var(--shadow-4)}
.wa:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wa svg{width:28px;height:28px;flex:none}
/* stays clear of the sticky quote bar on product pages, and hides behind the open mobile menu */
@media (max-width:900px){body:has(#pdpSticky) .wa{bottom:84px}}   /* same breakpoint as the sticky bar */
.menu-open .wa{opacity:0;pointer-events:none}
@media print{.wa{display:none}}