/* Layout: dark editorial. Full-bleed photo hero, then bands that alternate light, cream and dark.
   Light/cream bands follow the theme; dark bands stay dark in both. Square corners throughout. */

/* critical: the home page has everything from here to "end of critical" inline in its <head> (copied in by
   scripts/prefill.mjs), so its header and hero draw before this file has loaded. Rules the home page needs
   for its first paint go above that line; everything else goes below it. */

/* Fonts, served from /fonts (latin and latin-ext, only the weights used; Cormorant and Manrope are variable
   fonts, one file for every weight). Until they load, the text shows in a local font scaled to the same width
   and line height (the "Fallback" faces, measured from the font files), so nothing moves when they swap in. */
@font-face{font-family:'Cormorant Garamond';font-weight:500 600;font-display:swap;src:url(/fonts/cormorant-garamond-500-600-latin.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:'Cormorant Garamond';font-weight:500 600;font-display:swap;src:url(/fonts/cormorant-garamond-500-600-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-weight:400 700;font-display:swap;src:url(/fonts/manrope-400-700-latin.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:'Manrope';font-weight:400 700;font-display:swap;src:url(/fonts/manrope-400-700-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.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:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.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:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* the name next to the logo: Cinzel 600, only the letters of JOSHUA HIGGS */
@font-face{font-family:'Cinzel';font-weight:600;font-display:swap;src:url(/fonts/cinzel-600-subset.woff2) format('woff2');unicode-range:U+20,U+41,U+47-4A,U+4F,U+53,U+55}
/* "2" faces are for Android, which has none of Georgia, Arial or Courier New */
@font-face{font-family:'Cormorant Garamond Fallback';src:local('Georgia');size-adjust:88.51%;ascent-override:104.39%;descent-override:32.42%;line-gap-override:0%}
@font-face{font-family:'Cormorant Garamond Fallback 2';src:local('Noto Serif'),local('NotoSerif-Regular');size-adjust:83.31%;ascent-override:110.92%;descent-override:34.45%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT');size-adjust:101.06%;ascent-override:105.48%;descent-override:29.69%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:98.05%;ascent-override:108.72%;descent-override:30.60%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback 2';src:local('Roboto'),local('Roboto-Regular');size-adjust:102%;ascent-override:104.51%;descent-override:29.41%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono Fallback';src:local('Courier New'),local('CourierNewPSMT');size-adjust:99.98%;ascent-override:102.52%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono Fallback 2';src:local('Roboto Mono'),local('RobotoMono-Regular'),local('Droid Sans Mono');size-adjust:99.98%;ascent-override:102.52%;descent-override:27.5%;line-gap-override:0%}

:root{
  --l-bg:#faf8f4; --l-panel:#ffffff; --l-panel2:#f0ebe2; --l-line:#e3dbcf; --l-fg:#1b1814; --l-muted:#675e52;
  --c-bg:#f1eadf; --c-panel:#faf6ef; --c-panel2:#e7dece; --c-line:#dbd0bf;
  --t-gold:#765a2f; --t-gold-hi:#8d6f3f; --t-ink:#ffffff; --err:#a3392b;
  --f-display:'Cormorant Garamond','Cormorant Garamond Fallback','Cormorant Garamond Fallback 2',Georgia,'Times New Roman',serif;
  --f-body:'Manrope','Manrope Fallback','Manrope Fallback 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono','IBM Plex Mono Fallback','IBM Plex Mono Fallback 2',ui-monospace,Menlo,Consolas,monospace;
  --wrap:1240px; --gut:clamp(16px,4vw,48px);
  --lift-shadow:0 10px 20px -10px rgba(52,38,14,.45);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --l-bg:#141210; --l-panel:#1b1814; --l-panel2:#23201b; --l-line:#322c24; --l-fg:#eee7da; --l-muted:#a99e8b;
  --c-bg:#1a1712; --c-panel:#211d17; --c-panel2:#29241d; --c-line:#3a3329;
  --t-gold:#c2a571; --t-gold-hi:#dcc391; --t-ink:#17130c; --err:#ef8f78; color-scheme:dark;
  --lift-shadow:0 12px 22px -10px rgba(0,0,0,.8);
}
.band-light,body{--bg:var(--l-bg);--panel:var(--l-panel);--panel-2:var(--l-panel2);--line:var(--l-line);--fg:var(--l-fg);--muted:var(--l-muted);--gold:var(--t-gold);--gold-hi:var(--t-gold-hi);--ink-on-gold:var(--t-ink)}
.band-cream{--bg:var(--c-bg);--panel:var(--c-panel);--panel-2:var(--c-panel2);--line:var(--c-line);--fg:var(--l-fg);--muted:var(--l-muted)}
.band-dark,.lb{--bg:#0b0a08;--panel:#151310;--panel-2:#1d1a16;--line:#2f2921;--fg:#eee7da;--muted:#a99e8b;--gold:#c9ad78;--gold-hi:#dcc391;--ink-on-gold:#17130c;color-scheme:dark}
.band-light,.band-cream,.band-dark{background:var(--bg);color:var(--fg)}
/* Light theme: the dark bands (header, media walls, reels, services, footer) turn a warm sand so the
   page reads light all the way down. The hero keeps its dark shade over the photo. */
:root:not([data-theme="dark"]) .band-dark:not(.hero){--bg:#e5dac8;--panel:#f3ede2;--panel-2:#dacebb;--line:#cdbfa8;--fg:var(--l-fg);--muted:#5c5448;--gold:#705529;--gold-hi:#8a6c3d;--ink-on-gold:#fff;color-scheme:light}
/* form fields need a border you can see on a light background */
:root:not([data-theme="dark"]) :is(input,select,textarea){border-color:#968871}
:root:not([data-theme="dark"]) .drop{border-color:#968871}
:root:not([data-theme="dark"]) .top{background:rgba(250,248,244,.9);--bg:var(--l-bg)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.02;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font:500 .72rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.h2{font-size:clamp(2.4rem,5.2vw,4.1rem)}
.lede{color:var(--muted);font-size:1.06rem;max-width:62ch}
.note{font-size:.88rem;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 .95rem/1 var(--f-body);padding:1rem 1.45rem;border-radius:0;text-decoration:none;border:1px solid var(--gold);cursor:pointer;position:relative}
.btn-gold{background:var(--gold);color:var(--ink-on-gold)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-on-gold)}
/* Buttons lift a little with a soft shadow on hover and press down on click; cards and tiles lift too. Only
   transform, opacity and colour change (the shadow is drawn once and faded in). Reduced motion: colour only. */
.btn,.chip,.theme-btn,.menu-btn,.g-link{transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.btn::after,.chip::after,.theme-btn::after,.menu-btn::after,.g-link::after{content:'';position:absolute;inset:0;box-shadow:var(--lift-shadow);opacity:0;transition:opacity .18s ease;pointer-events:none}
.chip,.theme-btn,.menu-btn{position:relative}
:is(.btn,.chip,.theme-btn,.menu-btn,.g-link):is(:hover,:focus-visible){transform:translateY(-1px)}
:is(.btn,.chip,.theme-btn,.menu-btn,.g-link):is(:hover,:focus-visible)::after{opacity:1}
:is(.btn,.chip,.theme-btn,.menu-btn,.g-link):active{transform:translateY(0) scale(.98)}
:is(.btn,.chip,.theme-btn,.menu-btn,.g-link):active::after{opacity:.4}
.link{font:500 .78rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2rem}
.link:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* section rhythm */
section.block{padding-block:clamp(72px,10vw,136px)}
/* the first section sits closer under the header, and the last one leaves less blank before the footer */
main > section.block:first-child:not(.contact){padding-top:clamp(40px,5vw,64px)}
main > section.block:not([hidden]):not(:has(~ section.block:not([hidden]))){padding-bottom:clamp(48px,6vw,80px)}
.head{display:grid;grid-template-columns:1fr minmax(0,.9fr);gap:1.2rem clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.head h2{margin-top:.9rem}
.head > p{color:var(--muted);max-width:62ch}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* photo frame / placeholder */
.ph{position:relative;background:repeating-linear-gradient(135deg,var(--panel) 0 14px,var(--panel-2) 14px 28px);border:1px solid var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);font:500 .74rem/1.4 var(--f-mono);overflow:hidden;max-width:100%}
.ph span{background:var(--bg);padding:.45rem .7rem;border:1px solid var(--line);position:relative;z-index:1;margin:1rem}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph[data-pos=top] img,.ph[data-pos=top] video{object-position:50% 0}.ph[data-pos=bottom] img,.ph[data-pos=bottom] video{object-position:50% 100%} /* the photo's Top / Centre / Bottom choice */
.ph picture,.hero-bg picture{display:contents} /* <picture> only picks the file (WebP or JPG); the <img> in it is laid out as before */

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(11,10,8,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:76px;position:relative;transition:min-height .25s}
.top.small .wrap{min-height:62px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{width:52px;height:52px;transition:width .25s,height .25s}
.top.small .brand img{width:42px;height:42px}
.brand .name{font-family:"Cinzel",var(--f-display);font-size:1.46rem;font-weight:600;letter-spacing:.06em;line-height:1.1} /* Cinzel caps, as wide as the tagline under it */
.brand .name small{display:block;margin-top:.1rem;font:500 .58rem/1.3 var(--f-mono);letter-spacing:.2em;color:var(--gold);text-transform:uppercase;white-space:nowrap}
@media (max-width:480px){.brand .name{font-size:1.18rem}.brand .name small{letter-spacing:.1em;font-size:.54rem}.brand img{width:44px;height:44px}}
@media (max-width:359px){.brand .name{font-size:1rem}.brand .name small{font-size:.47rem;letter-spacing:.06em}.brand img{width:38px;height:38px}.top .wrap{gap:.6rem}} /* very small phones */
.nav{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
.nav a{text-decoration:none;font-size:.88rem;color:var(--muted)}
.nav a:hover,.nav a.on,.nav a:focus-visible{color:var(--fg)}
.nav a:not(.btn){transition:color .18s ease,background-color .18s ease}
@media (min-width:1101px){
  .nav a:not(.btn):not(.tel){position:relative;padding-block:.4rem}
  .nav a:not(.btn):not(.tel)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .18s ease}
  .nav a:not(.btn):not(.tel):is(:hover,:focus-visible,.on)::after{transform:scaleX(1)}
  .nav a:not(.btn):not(.tel):focus-visible{outline:none}
}
.nav a.tel{color:var(--fg);font:500 .84rem var(--f-mono);white-space:nowrap}
.nav a.btn{color:var(--ink-on-gold);padding:.8rem 1.1rem}
.nav a{white-space:nowrap}
@media (max-width:1320px) and (min-width:1101px){.nav{gap:1.1rem}.nav a.tel{display:none}}
.theme-btn{background:none;border:1px solid var(--line);color:var(--fg);width:40px;height:40px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0;order:3}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
.menu-btn{order:4;display:none;background:none;border:1px solid var(--line);color:var(--fg);padding:.6rem .85rem;border-radius:0;font:600 .85rem var(--f-body);cursor:pointer}
@media (max-width:1100px){
  .menu-btn{display:block}
  .theme-btn{margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem var(--gut) 1.2rem}
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}
  .nav a:not(.btn):active{background:color-mix(in srgb,var(--gold) 14%,transparent)}
  .nav a.btn{margin-top:1rem;border-bottom:1px solid var(--gold)}
}

/* hero */
.hero{position:relative;min-height:clamp(580px,88vh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg{overflow:hidden}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* video mode: the cover photo shows until the video is really playing, then is hidden completely */
.hero-bg video{opacity:0;transition:opacity 1.2s ease}
.hero-bg video.on{opacity:1}
.hero-bg img.gone{visibility:hidden}
/* slideshow mode: slow crossfade with a gentle zoom on the showing slide */
.hero-bg .slide{opacity:0;transition:opacity 1.8s ease-in-out;will-change:opacity,transform;backface-visibility:hidden}
.hero-bg .slide.on{opacity:1}
.hero-bg .slide.zin{animation:zin var(--slide-ms,9600ms) linear forwards}
.hero-bg .slide.zout{animation:zout var(--slide-ms,9600ms) linear forwards}
@keyframes zin{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes zout{from{transform:scale(1.06)}to{transform:scale(1)}}
/* reduced motion: the slides still change, with a plain fade and no zoom */
@media (prefers-reduced-motion:reduce){.hero-bg .slide{transition:opacity 1.8s ease-in-out!important}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,7,6,.94) 0%,rgba(8,7,6,.82) 30%,rgba(8,7,6,.4) 56%,rgba(8,7,6,0) 78%),linear-gradient(0deg,rgba(8,7,6,.6) 0%,rgba(8,7,6,0) 34%)}
.hero-in{width:100%;padding-block:clamp(96px,14vh,150px) clamp(88px,12vh,128px)}
.hero-copy{max-width:640px}
.hero h1{font-size:clamp(3.1rem,7.6vw,6.6rem);line-height:.95;letter-spacing:-.025em;margin:1.1rem 0 1.4rem}
.hero .lede{color:#cfc5b3;font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero-facts{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font:500 .74rem/1.4 var(--f-mono);letter-spacing:.06em;color:#cfc5b3}
.hero-facts li::before{content:'◆';color:var(--gold);margin-right:.5rem;font-size:.55rem;vertical-align:2px}
.hero-cap{position:absolute;right:var(--gut);bottom:1.4rem;font:500 .7rem/1.5 var(--f-mono);letter-spacing:.08em;color:rgba(238,231,218,.78);max-width:min(46%,440px);text-align:right;display:flex;gap:.6rem;align-items:center;justify-content:flex-end}
.hero-cap::before{content:'';width:28px;height:1px;background:var(--gold);flex:none}
/* phones: photo on top, words underneath, so the headline never sits on a busy part of the photo */
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .hero-bg{position:relative;height:min(58vh,520px);z-index:0}
  .hero-shade{bottom:auto;height:min(58vh,520px);z-index:0;background:linear-gradient(0deg,#0b0a08 0%,rgba(11,10,8,.55) 26%,rgba(11,10,8,0) 55%)}
  .hero-in{position:relative;margin-top:-72px;padding-block:0 2.2rem}
  .hero h1{margin:.9rem 0 1.1rem}
  .hero-cap{position:static;max-width:none;text-align:left;justify-content:flex-start;padding:0 var(--gut) 2.4rem}
}

/* Home: the hero is the whole page, filling the screen under the header (--chrome: the header's 76px and its
   border, measured again by site.js in case it differs, so the hero is the right height from the first paint) */
body.home .hero{min-height:calc(100vh - var(--chrome,77px));min-height:calc(100svh - var(--chrome,77px))}
body.home .hero-cap{bottom:5.4rem}
@media (max-width:760px){
  body.home .hero{display:flex;flex-direction:column;justify-content:flex-end}
  body.home .hero-bg{position:absolute;inset:0;height:auto;z-index:-2}
  body.home .hero-shade{inset:0;height:auto;z-index:-1;background:linear-gradient(0deg,rgba(8,7,6,.96) 0%,rgba(8,7,6,.88) 55%,rgba(8,7,6,.45) 75%,rgba(8,7,6,.08) 100%)}
  body.home .hero-in{margin-top:0;padding-block:5rem 1.2rem}
  body.home .hero-cap{position:static;padding:0 var(--gut) calc(5rem + env(safe-area-inset-bottom,0px))}
}

.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:opacity .25s,transform .25s,visibility .25s}
.wa.away{opacity:0;transform:translateY(10px);pointer-events:none;visibility:hidden} /* faded out while the footer is in view (site.js); hidden from Tab too */
/* Phones (under 700px): a contact bar along the bottom, Call · WhatsApp · Free quote, instead of the floating WhatsApp
   button (not on the quote page, which has its own). site.js slides it away while scrolling down and while the footer
   is in view; × closes it for the rest of the visit (data-bar="off", set in the <head> so it never flashes back). */
.abar{display:none}
@media (max-width:699px){
  .wa{display:none}
  .abar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:6px;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px)) 8px;background:rgba(11,10,8,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);transition:transform .2s ease,visibility .2s}
  .abar.away{transform:translateY(100%);visibility:hidden}
  .abar a{flex:1 1 0;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:0 .3rem;font:600 .88rem/1 var(--f-body);color:var(--fg);text-decoration:none;border:1px solid var(--line);white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .abar a:active{background:color-mix(in srgb,var(--gold) 16%,transparent)}
  .abar a.ab-quote{background:var(--gold);border-color:var(--gold);color:var(--ink-on-gold)}
  .abar svg{width:18px;height:18px;flex:none}
  .abar .ab-x{flex:none;width:40px;min-height:48px;padding:0;background:none;border:0;color:var(--muted);font:400 1.6rem/1 var(--f-body);cursor:pointer}
  :root[data-bar="off"] .abar{display:none}
  /* the end of the page stays clear of the bar */
  :root:not([data-bar="off"]) body:has(.abar) footer.site{padding-bottom:calc(2rem + 60px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:359px){.abar svg{display:none}}
:root:not([data-theme="dark"]) .abar{background:rgba(250,248,244,.94)} /* light, like the header */
/* end of critical */

/* details trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px)}
.trio figure{margin:0;display:grid;gap:.9rem;align-content:start}
.trio .ph{aspect-ratio:4/5}
.trio figcaption{font-size:.95rem;color:var(--muted);display:flex;gap:.7rem}
.trio figcaption b{font:500 .72rem var(--f-mono);color:var(--gold);padding-top:.2rem}
@media (max-width:760px){.trio{grid-template-columns:1fr 1fr}.trio figure:first-child{grid-column:1/-1}.trio figure:first-child .ph{aspect-ratio:4/3}}

/* services */
.services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{padding:1.6rem 1.4rem 1.8rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:.6rem;align-content:start;min-width:0;transition:background .2s}
.svc:hover{background:var(--panel)}
.svc .n{font:500 .72rem var(--f-mono);color:var(--gold)}
.svc h3{font-size:1.55rem}
.svc p{color:var(--muted);font-size:.92rem}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.services{grid-template-columns:1fr}}

/* media walls */
/* list on the left, the chosen style's photo and/or reel on the right; both columns share a top and bottom edge */
.mw-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.styles{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);display:flex;flex-direction:column}
.styles li{flex:1;display:flex;scroll-margin-top:110px} /* room for the sticky header when opened at a style */
@media (min-width:901px){.styles li{max-height:8.5rem}} /* a short list stays compact instead of stretching to the photo */
.styles button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:2.6rem 1fr;align-content:center;gap:.2rem 1rem;padding:1rem .2rem 1rem 0;border-bottom:1px solid var(--line);transition:padding .25s,background .25s}
.styles button .n{grid-row:span 2;font:500 .74rem var(--f-mono);color:var(--muted);padding-top:.5rem}
.styles button b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.4rem,2.1vw,1.8rem);line-height:1.1;color:var(--muted);transition:color .2s}
.styles button span.spec{font-size:.86rem;color:var(--muted);opacity:.8}
.styles button[aria-pressed="true"]{padding-left:.9rem;box-shadow:inset 2px 0 0 var(--gold)}
.styles button[aria-pressed="true"] b,.styles button:hover b{color:var(--fg)}
.styles button[aria-pressed="true"] .n{color:var(--gold)}
.styles button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px}
.mw-media{display:flex;gap:clamp(10px,1.4vw,16px);min-height:clamp(440px,44vw,600px)}
.mw-media figure{margin:0;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.mw-media .fp{flex:1.45}.mw-media .fr{flex:1}.mw-media figure:only-child{flex:1}
.mw-media .ph{flex:1;min-height:0}
/* Automatic: the photo, with the video fading in over it in the same frame once it plays */
.mw-media .layered video{opacity:0;transition:opacity .9s ease}
.mw-media .layered video.on{opacity:1}
.mw-media figcaption{font:500 .7rem/1.4 var(--f-mono);letter-spacing:.06em;color:var(--muted);display:flex;gap:.55rem;align-items:center}
.mw-media figcaption::before{content:'';width:20px;height:1px;background:var(--gold);flex:none}
button.ph{all:unset;box-sizing:border-box;position:relative;display:block;cursor:pointer;background:#000;border:1px solid var(--line);overflow:hidden}
button.ph:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.ph .state{position:absolute;right:.6rem;bottom:.6rem;z-index:2;width:34px;height:34px;display:grid;place-items:center;background:rgba(11,10,8,.72);color:#eee7da;font-size:.8rem;border:1px solid rgba(238,231,218,.25);margin:0;padding:0}
.mw-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.6rem 3rem;margin-top:clamp(28px,4vw,44px)}
.mw-foot .ticks{margin:0;flex:1 1 420px}
@media (max-width:900px){
  .mw-grid{grid-template-columns:1fr}
  .styles li{flex:none;flex-direction:column}
  /* on phones the chosen style's media opens under it, like an accordion */
  .mw-media{flex-direction:column;min-height:0;padding:.4rem 0 1.4rem;border-bottom:1px solid var(--line)}
  .mw-media .fp .ph,.mw-media figure:only-child .ph{flex:none;aspect-ratio:4/3}
  .mw-media .fr{flex:none;align-self:center;width:min(100%,340px)}
  .mw-media .fr .ph{flex:none;aspect-ratio:9/16}
  .mw-media .fr:only-child{width:min(100%,340px)}
  .mw-media .fr:only-child .ph{aspect-ratio:9/16}
}
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
.ticks li{display:flex;gap:.6rem;font-size:.92rem;color:var(--muted)}
.ticks li::before{content:'—';color:var(--gold)}
@media (max-width:520px){.ticks{grid-template-columns:1fr}}
.reels{border-top:1px solid var(--line);padding-top:clamp(28px,4vw,44px)}
/* straight after the media walls section it carries on as part of it; on its own it's a normal section */
main>.block:first-child:not([hidden])+.reels-sec{padding-top:0;margin-top:calc(-1 * clamp(24px,4vw,56px))} /* the strip sits straight under the styles */
.reels .eyebrow{margin-bottom:1.4rem}
.reel-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,20px);max-width:900px}
@media (max-width:560px){.reel-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reel{all:unset;cursor:pointer;display:grid;gap:.6rem}
.reel .ph{aspect-ratio:9/16}
.reel .state{position:absolute;right:.6rem;bottom:.6rem;z-index:2;width:34px;height:34px;display:grid;place-items:center;background:rgba(11,10,8,.72);color:#eee7da;font-size:.8rem;border:1px solid rgba(238,231,218,.25)}
.reel small{font-size:.84rem;color:var(--muted)}
.reel:focus-visible .ph{outline:2px solid var(--gold-hi);outline-offset:2px}

/* work */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.chip{font:500 .76rem var(--f-mono);letter-spacing:.04em;background:transparent;color:var(--muted);border:1px solid var(--line);padding:.6rem .95rem;border-radius:0;cursor:pointer}
.chip:hover{color:var(--fg);border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
.chip b{font-weight:500;opacity:.7;margin-left:.35rem}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px) clamp(10px,1.6vw,20px)}
@media (max-width:1040px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{all:unset;box-sizing:border-box;display:grid;gap:.7rem;align-content:start;cursor:zoom-in;min-width:0}
.tile .ph{aspect-ratio:4/5;transition:border-color .2s}
/* Hover (computers only, not touch screens): the photo zooms in a little (it only ever scales evenly, inside its frame) and
   the caption slides up. Reduced motion: neither. */
.tile .ph img,.tile .ph video{transition:transform .4s ease}
.tile .t{transition:transform .2s ease}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tile:hover .ph img,.tile:hover .ph video{transform:scale(1.04)}
  .tile:hover .t{transform:translateY(-4px)}
}
.ph .vbadge{position:absolute;margin:0;top:.6rem;right:.6rem;z-index:2;font:500 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(11,10,8,.75);color:#eee7da;padding:.3rem .5rem;border:1px solid rgba(238,231,218,.25)}
@media (hover:hover){.tile:hover .ph{border-color:var(--gold)}}
.tile:focus-visible .ph{outline:2px solid var(--gold-hi);outline-offset:2px}
.tile .t{display:grid;gap:.2rem}
.tile .t span{font:500 .64rem var(--f-mono);color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.tile .t b{font-weight:600;font-size:.96rem;line-height:1.35}
.tile .t small{font-size:.84rem;color:var(--muted);line-height:1.45}
.more{display:flex;justify-content:center;margin-top:clamp(28px,4vw,44px)}

/* before & after */
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
@media (max-width:760px){.ba-grid{grid-template-columns:1fr}}
/* a single before & after pair (Kitchens, Wardrobes) sits beside its heading instead of leaving half the row empty */
@media (min-width:861px){
  .ba .wrap:has(.ba-grid > :only-child){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
  .ba .wrap:has(.ba-grid > :only-child) .head{grid-template-columns:1fr;margin-bottom:0}
  .ba .wrap:has(.ba-grid > :only-child) .ba-grid{grid-template-columns:1fr}
}
.ba figure{margin:0;display:grid;gap:1rem}
.ba figcaption{display:grid;gap:.25rem}
.ba figcaption b{font-family:var(--f-display);font-weight:500;font-size:1.7rem;line-height:1.1}
.ba figcaption span{color:var(--muted);font-size:.93rem}
.compare{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);user-select:none;-webkit-user-select:none;touch-action:pan-y;max-width:100%;cursor:ew-resize}
.compare .layer{position:absolute;inset:0}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .ph{position:absolute;inset:0;border:0}
.compare .tag{position:absolute;top:.8rem;font:500 .66rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;background:var(--bg);border:1px solid var(--line);padding:.32rem .58rem;z-index:2}
.compare .tag.l{left:.8rem}.compare .tag.r{right:.8rem;color:var(--gold)}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--gold);transform:translateX(-1px);z-index:3;pointer-events:none}
/* the handle: a round knob with arrows on the line. It's dragged from anywhere on the photo (site.js), and the range input
   underneath it is for the keyboard (arrow keys, 5% a press) and screen readers, ringed when it has focus */
.compare .bar::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 14px rgba(0,0,0,.45)}
.compare .bar::before{content:'';position:absolute;top:50%;left:50%;z-index:1;width:30px;height:16px;transform:translate(-50%,-50%);background:var(--ink-on-gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M9 2 3 8l6 6M21 2l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M9 2 3 8l6 6M21 2l6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.compare:has(input:focus-visible) .bar::after{outline:2px solid var(--gold-hi);outline-offset:4px}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:4;margin:0;pointer-events:none}
.compare .ph.before{background:repeating-linear-gradient(135deg,var(--panel-2) 0 14px,var(--bg) 14px 28px)}

/* process */
.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.process > div{padding:1.8rem 1.6rem 0 0;display:grid;gap:.6rem;align-content:start}
.process .n{font-family:var(--f-display);font-size:3.4rem;line-height:1;color:var(--gold)}
.process h3{font-size:1.6rem}
.process p{color:var(--muted);font-size:.93rem}
@media (max-width:900px){.process{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}}
@media (max-width:520px){.process{grid-template-columns:1fr}}

/* about */
.about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:center}
@media (max-width:900px){.about .wrap{grid-template-columns:1fr}}
.about .ph{aspect-ratio:4/5}
.about-fig{margin:0;display:grid;gap:.7rem;min-width:0}
.about-fig figcaption{font:500 .72rem/1.5 var(--f-mono);letter-spacing:.06em;color:var(--muted);display:flex;gap:.6rem;align-items:center}
.about-fig figcaption::before{content:'';width:24px;height:1px;background:var(--gold);flex:none}
.about .copy{display:grid;gap:1.3rem;min-width:0}
.about .copy p{color:var(--muted);max-width:62ch}
.points{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0;padding:0;list-style:none}
.points li{font-size:.92rem;display:flex;gap:.6rem}
.points li::before{content:'✓';color:var(--gold)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin:.6rem 0 0}
.facts div{padding:1rem 1rem 1.1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:.35rem;align-content:start}
.facts dt{font:500 .64rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.facts dd{margin:0;font-family:var(--f-display);font-size:1.3rem;line-height:1.15}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.points{grid-template-columns:1fr}}

/* reviews */
.reviews-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
#leave-review{scroll-margin-top:96px} /* /review: clear of the sticky header */
.rlist+.more{margin-top:1.4rem;justify-content:flex-start}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}
.rlist{display:grid;gap:1rem}
.review{margin:0;border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--panel);padding:1.6rem 1.6rem 1.4rem;display:grid;gap:.8rem}
.review p{font-family:var(--f-display);font-size:1.45rem;line-height:1.3}
.review footer{font:500 .76rem var(--f-mono);color:var(--fg);display:grid;gap:.15rem}
.review footer small{font:400 .72rem var(--f-mono);color:var(--muted);letter-spacing:.04em}
.stars{color:var(--gold);letter-spacing:.15em}
.score{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.2rem}
.score b{font-family:var(--f-display);font-size:3.6rem;font-weight:500;color:var(--gold);line-height:1}
.score span{color:var(--muted);font-size:.9rem}
.star-pick{display:flex;gap:.3rem}
.star-pick button{background:none;border:0;font-size:1.6rem;color:var(--line);cursor:pointer;padding:0 .1rem}
.star-pick button.on{color:var(--gold)}

/* pricing + faq */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:clamp(56px,8vw,96px)}
.three > div{background:var(--panel);border:1px solid var(--line);padding:1.6rem;display:grid;gap:.55rem;align-content:start}
.three h3{font-size:1.6rem}
.three p{color:var(--muted);font-size:.93rem}
@media (max-width:760px){.three{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line);padding-block:1.15rem}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{color:var(--muted);margin-top:.7rem;max-width:62ch}

/* forms */
.card{background:var(--panel);border:1px solid var(--line);padding:clamp(1.2rem,3vw,2.2rem);min-width:0}
form{display:grid;gap:1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
label,.lbl{display:grid;gap:.4rem;font:500 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lbl small,label small{text-transform:none;letter-spacing:0;font:400 .8rem var(--f-body);color:var(--muted)}
input,select,textarea{font:400 1rem var(--f-body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:0;padding:.85rem .9rem;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{min-height:120px;resize:vertical}
.sizes{display:grid;grid-template-columns:1fr 1fr 5.4rem;gap:.8rem}
.sizes label{display:block}
.count{text-transform:none;letter-spacing:0;font:400 .82rem/1.4 var(--f-body);color:var(--muted);justify-self:end;text-align:right}
.count.full{color:var(--gold-hi);font-weight:500}
.count.cut{justify-self:stretch;text-align:left}
.drop{text-transform:none;letter-spacing:0;font:400 .9rem var(--f-body);border:1px dashed var(--line);background:var(--bg);padding:1.1rem;display:grid;gap:.6rem;text-align:center;cursor:pointer}
.drop:hover{border-color:var(--gold)}
.drop input{display:none}
.drop b{font:600 .95rem var(--f-body);color:var(--fg)}
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line)}
.thumbs .th{position:relative}
.thumbs .th.bad img{visibility:hidden}
.thumbs .th.bad::before{content:'?';position:absolute;inset:0;display:grid;place-items:center;border:1px dashed var(--line);color:var(--muted);font:500 1rem var(--f-mono)}
.thumbs .th button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:600 .9rem/1 var(--f-body);display:grid;place-items:center;cursor:pointer;padding:0}
.thumbs .th button:hover{border-color:var(--gold);color:var(--gold-hi)}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg label{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);padding:.6rem .9rem;cursor:pointer;font:500 .85rem var(--f-body);text-transform:none;letter-spacing:0;color:var(--fg)}
.seg input{width:auto;accent-color:var(--gold)}
.ferr{text-transform:none;letter-spacing:0;font:500 .84rem/1.4 var(--f-body);color:var(--err)}
.fsug{text-transform:none;letter-spacing:0;font:400 .84rem/1.4 var(--f-body);color:var(--muted)}
.fsug button{all:unset;cursor:pointer;color:var(--gold-hi);text-decoration:underline;font-weight:600}
#quoteForm [aria-invalid="true"]{border-color:var(--err)}
.ok{border:1px solid var(--gold);color:var(--gold-hi);padding:.8rem 1rem;font-size:.92rem}
/* quote page: the heading sits close under the header; on a computer the intro and contact details stay in view
   beside the form (when the screen is tall enough to show them whole); on a phone it's intro, form, contact details */
section.block.contact{padding-block:clamp(24px,3.5vw,44px) clamp(48px,6vw,88px)}
.contact .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-intro h1{margin-top:.9rem}
.contact-intro .lede{margin-top:1rem}
@media (min-width:901px) and (min-height:1050px){.contact-side{position:sticky;top:94px}} /* only where the whole column fits on screen */
@media (max-width:900px){
  .contact .wrap{grid-template-columns:1fr;gap:1.6rem}
  .contact-side{display:contents}
  .contact-intro{order:1}.contact .card{order:2}.contact-list{order:3;margin-top:0}.q-proof{order:4;margin-top:0}
}
.contact-list{display:grid;margin:1.6rem 0 0;border-top:1px solid var(--line)}
.contact-list div{display:grid;gap:.25rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.contact-list dt{font:500 .68rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.contact-list dd{margin:0;font-size:1.05rem;word-break:break-word}
.contact-list a{text-decoration:none}
.contact-list a:hover{color:var(--gold-hi)}
/* beside the form: what helps us quote, then a customer review and the Google reviews link */
.q-tips{list-style:none;margin:.15rem 0 0;padding:0;display:grid;gap:.3rem}
.q-tips li{display:flex;gap:.55rem;font-size:1rem}
.q-tips li::before{content:'✓';color:var(--gold)}
.q-proof{display:grid;gap:.8rem;margin-top:1.2rem}
.q-proof:not(:has(> :not([hidden]))){display:none}
.q-review{margin:0;padding:1.1rem 1.25rem 1.15rem;border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--panel);display:grid;gap:.55rem}
.q-review .stars{color:var(--gold);letter-spacing:.14em;font-size:.95rem;line-height:1}
.q-review blockquote{margin:0;font-family:var(--f-display);font-weight:500;font-size:1.375rem;line-height:1.3;color:var(--fg);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.q-review figcaption{font:500 .74rem var(--f-mono);letter-spacing:.06em;color:var(--muted)}
#quoteForm{gap:.9rem}
#quoteForm textarea{min-height:104px}
#quoteForm .drop{padding:.9rem}
#quoteForm .lbl > span small,#quoteForm label > span small{margin-left:.3rem}
.contact .card{scroll-margin-top:96px} /* "Send another enquiry" scrolls back to the form */
.q-send{display:flex;flex-wrap:wrap;gap:.8rem}
.q-err{border:1px solid var(--err);padding:.75rem 1rem}
/* after sending: the thank-you panel takes the form's place */
.q-done{display:grid;gap:1.1rem}
.q-done:focus{outline:none}
/* Without JavaScript the form is posted by the browser, and the server comes back to /quote#qDone: the thank-you shows
   in place of the form (just "Thanks", as the name isn't in the address) */
#qDone:target{display:grid!important}
#quoteCard:has(#qDone:target) #quoteForm{display:none}
.q-name:has(:empty){display:none}
.q-done h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.08}
.q-done .rv-done-title{font-size:clamp(1.8rem,3vw,2.3rem);line-height:1.1} /* the review thank-you, About page */
.q-next{list-style:none;margin:0;padding:0;counter-reset:step;border-top:1px solid var(--line)}
.q-next li{counter-increment:step;display:grid;grid-template-columns:2.6rem 1fr;column-gap:1rem;row-gap:.2rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.q-next li::before{content:counter(step,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--f-display);font-size:1.9rem;line-height:1;color:var(--gold)}
.q-next b{font-weight:600}
.q-next span{color:var(--muted);font-size:.93rem}
.q-done .cta{margin-top:.3rem}
.linkbtn{all:unset;justify-self:start;cursor:pointer;color:var(--muted);font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--gold-hi)}
.linkbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* footer */
footer.site{padding-block:clamp(40px,4.5vw,56px) 2rem;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line)}
footer.site .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}
  footer.site{padding-bottom:calc(2rem + 64px + env(safe-area-inset-bottom,0px))}} /* the last line clears the floating WhatsApp button */
@media (max-width:699px){footer.site{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}} /* phones have the contact bar instead, with its own room (above) */
footer.site .brand img{width:56px;height:56px}
footer.site .brand .name{color:var(--fg)}
footer.site nav{display:grid;gap:.45rem;align-content:start}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--fg)}
footer.site .fine{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:1.4rem}
footer.site .fine a{text-decoration:underline}
footer.site #fTowns{margin-top:-.6rem} /* "Including …" reads as part of the area line above it */
footer.site .f-points{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
footer.site .f-points li{display:flex;gap:.55rem}
footer.site .f-points li::before{content:'✓';color:var(--gold)}
/* the Google links: an outlined chip with the G (footer, beside the quote form); on About it's an outline button */
a.g-link{position:relative;justify-self:start;display:inline-flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border:1px solid var(--line);color:var(--fg);font-weight:600;font-size:.86rem;background:var(--bg);text-decoration:none}
a.g-link:hover{border-color:var(--gold);color:var(--fg)}
footer.site a.g-link{margin-top:.2rem;color:var(--fg)}
.g-link svg,.g-btn svg{width:18px;height:18px;flex:none}
.g-btn{margin-top:1.4rem}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(8,7,6,.95);z-index:50;display:grid;place-items:center;padding:24px 16px;color:var(--fg)}
.lb .inner{max-width:920px;width:100%;display:grid;gap:1rem}
.lb .pic{max-height:78vh;display:grid;place-items:center;overflow:hidden;touch-action:none}
.lb .pic img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body:has(.lb:not([hidden])) .abar{visibility:hidden} /* the phones' contact bar stays out of the way while a photo is open */
.lb .pic img,.lb .pic video{max-height:78vh;width:auto;max-width:100%;object-fit:contain;border:1px solid var(--line);background:#000}
.lb .bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.lb .nav-b{display:flex;gap:.5rem}
.lb button{background:none;border:1px solid var(--line);color:var(--fg);padding:.6rem .95rem;cursor:pointer;font:inherit}
.lb p{color:var(--muted);font-size:.92rem;margin-top:.3rem}

.nav a.btn[aria-current="page"]{box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}

/* Sections below the fold fade up as they scroll into view (site.js adds .reveal, then .in). */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* Page-to-page: a short crossfade where the browser supports it; the header stays put. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
  .top{view-transition-name:site-header}
}

/* 404 page */
.notfound{min-height:calc(100svh - 240px);display:flex;align-items:center}
.notfound h1{margin:.9rem 0 1rem}
.notfound p{color:var(--muted);max-width:52ch;margin:0 0 1.8rem}
.nf-links{display:flex;flex-wrap:wrap;gap:.7rem}

/* Cards and tiles lift a little on hover (after .tile and .reel, which start from all:unset). Links shift colour.
   Reduced motion: no movement anywhere, colour only. */
a:not(.btn):not(.g-link){transition:color .18s ease}
.reel,.review,.q-review,.three > div{transition:transform .18s ease}
.reel:hover,.review:hover,.q-review:hover,.three > div:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.chip,.theme-btn,.menu-btn,.g-link,.reel,.review,.q-review,.three > div):is(:hover,:focus-visible,:active){transform:none}
}