/* ============================================================
   EVERWOOD CONSTRUCTION LTD . demo 1
   Theme ported wholesale from the SSR Drives live site: same section
   order, same grid structure, same type hierarchy, same spacing
   rhythm, same motion language. Only the colour is replaced.
   Fonts are kept as SSR has them: Cormorant Garamond + Inter.
   ============================================================ */
:root{
  /* ---- Everwood palette. Greys and whites only. No blue, no accent. ---- */
  --white  :#FFFFFF;
  --paper  :#FAFAF9;
  --pearl  :#F3F2F0;
  --mist   :#E8E7E4;
  --silver :#D2D1CE;
  --logo   :#999999;
  --slate  :#5A5A58;
  --ink    :#3A3A38;
  --whatsapp:var(--logo);

  /* ---- structural tokens, mapped one for one onto SSR's ---- */
  --line   :rgba(58,58,56,.20);
  --line-2 :rgba(58,58,56,.10);
  --line-3 :rgba(58,58,56,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-cine:cubic-bezier(.19,1,.22,1);
  --pad:clamp(22px,5vw,90px);
  --maxw:1300px;
  --hdr-h:96px;
  --topbar-h:0px;   /* top utility bar removed 1 Sep 2026 (Amy); kept as a token so the calcs still resolve */
  --tick-h:52px;
  --bar-h:0px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, NOT hidden: overflow-x:hidden forces overflow-y to auto, which makes the
     body a scroll container and silently kills every position:sticky on the page. */
  overflow-x:clip;
  padding-top:calc(var(--topbar-h) + var(--hdr-h));
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.004em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
::selection{background:var(--mist);color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.lining{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.hide-sm{display:inline}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:30px;height:1.5px;background:var(--logo);display:inline-block;flex:none}
.eyebrow.plain::before{display:none}
.eyebrow.on-photo{color:rgba(255,255,255,.9)}
.eyebrow.on-photo::before{background:rgba(255,255,255,.72)}
.eyebrow.center{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  font-family:"Inter",sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:15px 28px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:11px;
  border-radius:2px;position:relative;min-height:48px;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-solid{background:var(--ink);color:var(--white)}
.btn-solid:hover{background:var(--slate);color:var(--white);transform:translateY(-2px);box-shadow:0 14px 34px rgba(58,58,56,.20)}
.btn-plate{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--silver)}
.btn-plate:hover{background:var(--pearl);box-shadow:inset 0 0 0 1.4px var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.4px var(--white)}
.btn-ghost-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--line)}
.btn-ghost-ink:hover{box-shadow:inset 0 0 0 1.4px var(--ink)}

/* ---------- top contact bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:1001;height:var(--topbar-h);background:var(--mist);
  display:flex;align-items:center;border-bottom:1px solid var(--line-3)}
.topbar-in{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:18px}
.topbar a{display:inline-flex;align-items:center;min-height:44px;gap:8px;color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.01em;transition:color .3s;white-space:nowrap;padding-block:12px}
.topbar a:hover{color:var(--slate)}
.topbar svg{width:14px;height:14px;fill:var(--logo);flex:none}
.tb-phones{display:flex;align-items:center;gap:24px}

/* ---------- header ---------- */
.hdr{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1000;background:var(--paper);
  border-bottom:1px solid var(--line-3);
  transition:box-shadow .5s var(--ease),padding .5s var(--ease);padding:14px 0}
.hdr.solid{box-shadow:0 1px 26px rgba(58,58,56,.09);padding:9px 0}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr .brand{display:flex;align-items:center;flex:none}
.hdr .brand img{height:66px;width:auto;transition:height .5s var(--ease)}
.hdr.solid .brand img{height:56px}
.hdr nav.desk{display:flex;align-items:center;gap:30px}
.hdr nav.desk a{font-size:14px;font-weight:500;color:var(--ink);position:relative;padding:12px 0;transition:color .3s}
.hdr nav.desk a::after{content:"";position:absolute;left:0;bottom:6px;height:1.5px;width:0;background:var(--logo);transition:width .35s var(--ease)}
.hdr nav.desk a:hover::after,.hdr nav.desk a.current::after{width:100%}
.hdr-right{display:flex;align-items:center;gap:24px}
.hdr-phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink);transition:color .3s;white-space:nowrap;padding:10px 0}
.hdr-phone:hover{color:var(--slate)}
.hdr-phone svg{width:15px;height:15px;fill:var(--logo);flex:none}

/* burger + drawer */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:11px 8px;min-width:44px;min-height:44px;position:relative;z-index:1250}
.burger span{width:24px;height:2px;background:var(--ink);display:block;transition:.35s var(--ease)}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:1100;background:var(--paper);display:flex;flex-direction:column;
  padding:calc(var(--topbar-h) + var(--hdr-h) + 18px) var(--pad) 96px;
  transform:translateX(100%);transition:transform .55s var(--ease);visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
body.nav-open .drawer{transform:none;visibility:visible}
body.nav-open .hdr{z-index:1200}
.drawer .dl{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(1.5rem,6.2vw,2.1rem);color:var(--ink);padding:11px 0;
  border-bottom:1px solid var(--line-2);display:flex;align-items:baseline;gap:16px;opacity:0;transform:translateX(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;transition-delay:.12s;min-height:52px}
.drawer .dl .n{font-family:"Inter";font-size:12px;color:var(--logo);font-weight:600;letter-spacing:.1em}
.drawer .dl:hover{color:var(--slate)}
body.nav-open .drawer .dl{opacity:1;transform:none}
.drawer-foot{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.drawer-foot a.dphone{color:var(--ink);font-weight:600;font-size:16px;padding:12px 0}

/* scroll progress */
.scrollbar{position:fixed;top:0;left:0;height:2.5px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:1300;
  background:linear-gradient(90deg,var(--silver),var(--slate))}

/* ============================================================
   HERO . cinematic, photography carries the darkness
   ============================================================ */
.hero{position:relative;min-height:calc(100svh - var(--topbar-h) - var(--hdr-h));display:flex;align-items:flex-end;overflow:hidden;background:var(--mist);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:url("/assets/video/hero-pendants-poster.jpg") center/cover no-repeat}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(58,58,56,.42) 0%,rgba(58,58,56,.16) 34%,rgba(58,58,56,.46) 70%,rgba(58,58,56,.80) 100%),
             linear-gradient(90deg,rgba(58,58,56,.62),rgba(58,58,56,.18) 58%,transparent 78%)}
.hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(96px,13vh,150px);padding-top:clamp(34px,7.5vh,120px)}
.hero .eyebrow{margin-bottom:clamp(14px,2.4vh,24px)}
.hero h1{color:var(--white);font-size:clamp(2.2rem,min(7vw,10.5vh),6rem);font-weight:300;letter-spacing:-.018em;max-width:22ch;text-shadow:0 2px 40px rgba(58,58,56,.35)}
.hero h1 .em{font-style:italic;font-weight:400}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line .in{display:block;transition:transform 1.05s var(--ease-cine)}
.js .hero h1 .line .in{transform:translateY(112%)}
.hero.in h1 .line .in{transform:none}
.hero-sub{color:rgba(255,255,255,.9);font-size:clamp(16px,1.7vw,19.5px);line-height:1.66;max-width:58ch;text-wrap:pretty;margin-top:clamp(16px,2.8vh,28px);text-shadow:0 1px 20px rgba(58,58,56,.4)}
.hero-cta{margin-top:clamp(22px,4vh,38px);display:flex;flex-wrap:wrap;gap:14px}
.hero-scroll{position:absolute;left:var(--pad);bottom:22px;z-index:3;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.hero-scroll .l{width:34px;height:1px;background:rgba(255,255,255,.85);animation:scrollpulse 2.4s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}
.hero .he{transition:opacity .9s var(--ease-cine),transform .9s var(--ease-cine)}
.js .hero .he{opacity:0;transform:translateY(26px)}
.hero.in .he{opacity:1;transform:none}
.hero.in .he.d1{transition-delay:.12s}.hero.in .he.d2{transition-delay:.42s}
.hero.in .he.d3{transition-delay:.56s}.hero.in .he.d4{transition-delay:.68s}

/* ---------- trust ticker under the banner ---------- */
.tick{background:var(--mist);border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
.tick-vp{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#FFFFFF 6%,#FFFFFF 94%,transparent);mask:linear-gradient(90deg,transparent,#FFFFFF 6%,#FFFFFF 94%,transparent)}
.tick-track{display:inline-flex;align-items:center;white-space:nowrap;width:max-content;animation:tickmove 46s linear infinite;will-change:transform}
.tick:hover .tick-track{animation-play-state:paused}
.tick-item{display:inline-flex;align-items:center;gap:11px;padding:15px 30px;color:var(--ink);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.tick-item svg{width:15px;height:15px;fill:none;stroke:var(--logo);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:clamp(70px,9vw,120px) 0;position:relative}
.sec-paper{background:var(--paper)}
.sec-paper2{background:var(--pearl)}
.sec-mist{background:var(--mist)}
.sec-head{max-width:780px}
.sec h2,.sec .sec-head h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:300;margin-top:16px;letter-spacing:-.014em}
.sec h2 .em{font-style:italic;color:var(--slate)}
.sec p.lead{color:var(--slate);font-size:17px;line-height:1.68;margin-top:18px;max-width:62ch}

/* two-col intro */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,84px);align-items:center}
.intro-copy .blockquote{margin-top:26px;padding-left:22px;border-left:2px solid var(--logo);font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--ink);position:relative}
.intro-media{position:relative}
.intro-media img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:2px;max-height:520px}
.intro-media .tag{position:absolute;left:0;bottom:-1px;background:var(--white);color:var(--ink);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 18px;font-weight:600;box-shadow:0 -1px 0 var(--line-2)}
.stats{display:flex;flex-wrap:wrap;gap:18px 44px;margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.stat{display:flex;align-items:baseline;gap:14px;white-space:nowrap;position:relative}
.stat .n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(1.95rem,3vw,2.5rem);color:var(--ink);line-height:1}
.stat .l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:600;white-space:normal}
.intro-copy .stats{flex-direction:column;gap:20px;align-items:flex-start}
.intro-copy .stat .n{min-width:104px}

/* ---------- trust bar: 4 cells split by hairlines ---------- */
.trustbar{background:var(--pearl);border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
.tb-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.tb-cell{padding:52px 28px;text-align:center;border-left:1px solid var(--line-3)}
.tb-cell:first-child{border-left:0}
.tb-ic{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;border:1.5px solid var(--logo);
  color:var(--slate);display:grid;place-items:center;background:var(--white)}
.tb-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-cell .tb-h{font-family:"Inter",sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.tb-cell p{color:var(--slate);font-size:14.5px;line-height:1.55}

/* ---------- services numbered grid ---------- */
.svc-top{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:end;margin-bottom:52px}
.svc-top .r{color:var(--slate);font-size:15.5px;line-height:1.6}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--silver);border:1px solid var(--silver)}
.svc-card{background:var(--white);position:relative;overflow:hidden;display:block;isolation:isolate}
.svc-imgwrap{position:relative;overflow:hidden;aspect-ratio:4/5}
.svc-imgwrap img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;transition:transform 1.2s var(--ease)}
.svc-card:hover .svc-imgwrap img{transform:scale(1.07)}
.svc-imgwrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(58,58,56,.86) 2%,rgba(58,58,56,.30) 44%,rgba(58,58,56,0) 70%)}
.svc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 22px}
.svc-num{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:rgba(255,255,255,.82);font-size:.95rem;display:block;margin-bottom:6px;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.svc-body h3{color:var(--white);font-size:1.42rem;font-weight:400}
.svc-body p{color:rgba(255,255,255,.86);font-size:.9rem;line-height:1.55;margin-top:9px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .45s var(--ease),margin-top .45s var(--ease)}
.svc-card:hover .svc-body p{max-height:140px;opacity:1}
.svc-body .go{margin-top:12px;font-size:12px;letter-spacing:.06em;color:var(--white);font-weight:600;opacity:0;transform:translateY(6px);
  display:inline-block;transition:opacity .45s var(--ease) .05s,transform .45s var(--ease) .05s}
.svc-card:hover .svc-body .go{opacity:1;transform:none}
@media (hover:none),(pointer:coarse){
  .svc-body p{max-height:240px;opacity:1}
  .svc-body .go{opacity:1;transform:none}
}
/* brand panel filling the last two cells of the 3-column grid */
.svc-logo{grid-column:span 1;--mx:50%;--my:42%;position:relative;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;min-height:100%;
  background:radial-gradient(118% 88% at 50% 6%,var(--white) 0%,var(--mist) 78%)}
.svc-logo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.9),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease)}
.svc-logo:hover::before{opacity:1}
.svc-logo::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-200%) rotate(9deg);animation:slSweep 9s var(--ease) infinite}
@keyframes slSweep{0%,72%{transform:translateX(-200%) rotate(9deg)}100%{transform:translateX(390%) rotate(9deg)}}
.sl-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 26px;text-align:center;
  transition:transform .7s var(--ease)}
.svc-logo:hover .sl-in{transform:translateY(-5px) scale(1.03)}
.sl-mark{width:min(52%,196px);height:auto}
.sl-tag{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--slate);font-size:1.2rem;line-height:1.35;max-width:26ch}
.sl-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:600}

/* ---------- benefits band: ring icons ---------- */
.bene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px 52px;margin-top:54px}
.bene-item{display:flex;gap:20px;align-items:flex-start}
.bene-ic{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--logo);color:var(--slate);background:var(--white);
  transition:background .5s var(--ease),transform .5s var(--ease)}
.bene-item:hover .bene-ic{background:var(--pearl);transform:translateY(-3px)}
.bene-ic svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bene-tx h3{font-family:"Inter",sans-serif;font-weight:600;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px;line-height:1.3}
.bene-tx p{color:var(--slate);font-size:16px;line-height:1.62}

/* ---------- feature band: photograph + quote form ---------- */
.feature{position:relative;overflow:hidden;isolation:isolate;background:var(--pearl);padding:clamp(64px,9vw,120px) 0}
.feature-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover;animation:featzoom 26s ease-in-out infinite alternate;will-change:transform}
@keyframes featzoom{from{transform:scale(1.03)}to{transform:scale(1.15)}}
.feature-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,250,249,.95) 0%,rgba(250,250,249,.86) 40%,rgba(250,250,249,.50) 100%)}
.feature-inner{position:relative;z-index:2}
.feature-grid{display:grid;grid-template-columns:1fr 440px;gap:clamp(32px,5vw,72px);align-items:center}
.feature-copy .eyebrow{margin-bottom:22px}
.feature-copy h2{color:var(--ink);font-size:clamp(2rem,4vw,3.4rem);font-weight:300}
.feature-copy h2 .em{font-style:italic;color:var(--slate)}
.feature-copy p{color:var(--ink);margin-top:18px;max-width:46ch;font-size:clamp(15px,1.5vw,17px)}
.feature-lines{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 30px}
.feature-lines a{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--ink);padding:10px 0}
.feature-lines svg{width:16px;height:16px;fill:var(--logo);flex:none}

.contact-form{background:var(--white);color:var(--ink);padding:clamp(26px,3vw,38px);border-radius:3px;
  border:1px solid var(--silver);border-top:2px solid var(--logo);box-shadow:0 24px 60px rgba(58,58,56,.10)}
.contact-form h3{font-size:1.55rem;font-weight:400;margin-bottom:18px}
.contact-form label{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--slate);margin-bottom:14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:8px;padding:13px 15px;background:var(--paper);
  border:1px solid var(--silver);border-radius:2px;color:var(--ink);font-family:inherit;font-size:16px;font-weight:400;
  letter-spacing:0;text-transform:none;transition:border-color .3s,background .3s;min-height:48px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink);background:var(--white)}
.contact-form textarea{resize:vertical;min-height:92px}
.qc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{margin-top:16px;font-size:12.5px;color:var(--slate);text-transform:none;letter-spacing:0;font-weight:400;line-height:1.55}
.form-done{display:none;padding:18px 20px;border:1px solid var(--silver);background:var(--pearl);border-radius:2px;
  font-size:14.5px;line-height:1.6;color:var(--ink)}
.form-done.show{display:block}

/* ---------- stats band ---------- */
.band{background:var(--pearl);border-top:2px solid var(--logo);border-bottom:1px solid var(--line-3)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;padding:clamp(48px,6vw,74px) 0}
.band-item{position:relative}
.band-item .num{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(2.6rem,5vw,3.8rem);color:var(--ink);line-height:1;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.band-item .lbl{color:var(--slate);font-size:13.5px;line-height:1.4;margin-top:12px}

/* ---------- gallery mosaic ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15.5vw,220px);gap:14px;margin-top:52px}
.gal figure{margin:0;overflow:hidden;position:relative;border-radius:2px;background:var(--mist);min-height:0}
/* The picture is taken out of flow so the figure sizes from the GRID TRACK alone.
   With width/height attributes on the img, an in-flow image sets the figure's
   min-content height from its own aspect ratio and overflows a fixed row. */
.gal figure picture{position:absolute;inset:0;display:block}
.gal figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal .g1{grid-column:1/3;grid-row:1/3}
.gal .g2{grid-column:3/5;grid-row:1/2}
.gal .g3{grid-column:3/4;grid-row:2/3}
.gal .g4{grid-column:4/5;grid-row:2/3}
.gal .g5{grid-column:1/3;grid-row:3/4}
.gal .g6{grid-column:3/5;grid-row:3/4}
.gal-cap{position:absolute;left:14px;right:14px;bottom:12px;color:var(--white);font-size:12px;letter-spacing:.04em;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);z-index:2}
.gal figure:hover .gal-cap{opacity:1;transform:none}
.gal figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(58,58,56,.72),transparent 46%);opacity:0;transition:opacity .4s}
.gal figure:hover::after{opacity:1}

/* ---------- before / after ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:52px}
.ba-fig{margin:0;position:relative;border-radius:2px;overflow:hidden;background:var(--mist)}
.ba-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ba-fig figcaption{position:absolute;left:0;top:0;background:var(--white);color:var(--ink);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;padding:10px 18px}
.ba-note{margin-top:26px;color:var(--slate);font-size:15.5px;max-width:62ch}

/* ---------- process steps ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--silver);border:1px solid var(--silver);margin-top:52px}
.proc-cell{background:var(--white);padding:34px 26px;position:relative;transition:background .5s var(--ease)}
.proc-cell:hover{background:var(--pearl)}
.proc-cell .wn{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--slate);font-size:1.6rem;display:block;margin-bottom:16px;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.proc-cell h3{font-size:1.18rem;font-weight:400;margin-bottom:10px}
.proc-cell p{color:var(--slate);font-size:13.6px;line-height:1.55}

/* ---------- one-at-a-time review carousel ---------- */
.rev{max-width:940px;margin:52px auto 0;position:relative}
.rev-vp{overflow:hidden;position:relative;transition:height .55s var(--ease-cine)}
/* flex-start, not the default stretch: the reviews are real and run from 15 to 180
   words, and stretching would make every card as tall as the longest one. */
.rev-track{display:flex;align-items:flex-start;width:100%;transition:transform .8s var(--ease-cine)}
.rev-slide{flex:0 0 100%;min-width:100%;padding:clamp(28px,4vw,48px) clamp(22px,4vw,54px);
  background:var(--white);border:1px solid var(--silver);border-top:2px solid var(--logo);border-radius:3px;text-align:center}
.rev-mark{font-family:"Cormorant Garamond",Georgia,serif;font-size:56px;line-height:.6;color:var(--silver);display:block;margin-bottom:18px}
.rev-slide blockquote{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.75rem);line-height:1.42;color:var(--ink)}
.rev-who{margin-top:24px;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:.04em}
.rev-who small{display:block;color:var(--slate);font-weight:500;font-size:12px;margin-top:5px;letter-spacing:.16em;text-transform:uppercase}
.rev-score{margin-top:34px;text-align:center;color:var(--slate);font-size:13.5px}
.rev-score a{border-bottom:1px solid var(--silver);color:var(--ink);font-weight:600}

/* ---------- areas ---------- */
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.area-tag{border:1px solid var(--silver);border-radius:2px;padding:18px 22px;display:flex;align-items:center;gap:12px;background:var(--white);
  font-weight:500;font-size:15.5px;min-height:56px;transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.area-tag .dot{width:7px;height:7px;background:var(--logo);transform:rotate(45deg);flex:none;transition:transform .4s var(--ease)}
.area-tag:hover{border-color:var(--ink);background:var(--pearl);transform:translateY(-2px)}
.area-tag:hover .dot{transform:rotate(225deg)}
.marquee{padding:clamp(40px,5vw,62px) 0 0;overflow:hidden;position:relative}
.marquee .mhead{margin:0 0 20px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);font-weight:600}
.mviewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#FFFFFF 7%,#FFFFFF 93%,transparent);mask:linear-gradient(90deg,transparent,#FFFFFF 7%,#FFFFFF 93%,transparent)}
.mtrack{display:inline-flex;align-items:center;white-space:nowrap;width:max-content;animation:mmove 86s linear infinite;will-change:transform}
.marquee:hover .mtrack{animation-play-state:paused}
.mitem{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(1.5rem,3vw,2.6rem);padding:0 30px;letter-spacing:-.01em;color:var(--ink)}
.msep{width:9px;height:9px;flex:none;border-radius:2px;transform:rotate(45deg);background:var(--logo);display:inline-block}
@keyframes mmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Checkatrade band ---------- */
.cat{background:var(--mist);padding:clamp(52px,6.5vw,88px) 0}
.cat-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,74px);align-items:center}
.cat-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--ink);font-weight:300;margin:20px 0 16px;max-width:22ch}
.cat-copy h2 .em{font-style:italic;color:var(--slate)}
.cat-copy p{color:var(--slate);font-size:15.5px;line-height:1.72;max-width:62ch}
.cat-checks{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 14px}
.cat-checks span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);
  background:var(--white);border:1px solid var(--silver);border-radius:2px;padding:9px 14px}
.cat-badge{background:var(--white);border:1px solid var(--silver);border-radius:3px;padding:30px 34px 24px;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  box-shadow:0 18px 44px rgba(58,58,56,.10);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cat-badge:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(58,58,56,.16)}
.cat-badge img{width:clamp(200px,22vw,260px);height:auto}
.cat-score{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:300;line-height:1;color:var(--ink);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.cat-score small{display:block;font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--slate);font-weight:600;margin-top:12px}
.cat-visit{font-family:"Inter",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding-top:4px}
.cat-visit .ar{transition:transform .4s var(--ease)}
.cat-badge:hover .cat-visit .ar{transform:translateX(4px)}

/* ---------- FAQ accordion ---------- */
.faq-wrap{max-width:920px}
.faq{margin-top:20px}
.faq-item{border-top:1px solid var(--line-2);padding:4px 0}
.faq-item:last-child{border-bottom:1px solid var(--line-2)}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;font-size:1.28rem;color:var(--ink);transition:color .3s;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:linear-gradient(var(--logo),var(--logo)) center/12px 2px no-repeat,
             linear-gradient(var(--logo),var(--logo)) center/2px 12px no-repeat;transition:transform .4s var(--ease)}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-item summary:hover{color:var(--slate)}
.faq-a{overflow:hidden;padding:0 44px 4px 0}
.faq-a p{color:var(--slate);font-size:15.5px;line-height:1.7;padding-bottom:24px}
.faq-a a{color:var(--ink);border-bottom:1px solid var(--silver);font-weight:500}

/* ---------- CTA band ---------- */
.cta{background:var(--pearl);position:relative;overflow:hidden;border-top:1px solid var(--line-3)}
.cta::before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;transform:rotate(45deg);
  background:linear-gradient(135deg,rgba(153,153,153,.16),transparent 60%);pointer-events:none}
.cta-inner{padding:clamp(64px,8vw,110px) 0;position:relative;text-align:center;max-width:840px;margin:0 auto}
.cta h2{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:300}
.cta h2 .em{font-style:italic;color:var(--slate)}
.cta p{color:var(--slate);font-size:17px;margin-top:16px}
.cta-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center}
.cta-phone{color:var(--ink);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:9px;padding:12px 0}
.cta-phone svg{width:16px;height:16px;fill:var(--logo)}
.cta-phone small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--mist);color:var(--slate);padding:clamp(64px,7vw,88px) 0 40px;border-top:1px solid var(--line-3)}
.foot-grid{display:grid;grid-template-columns:1.25fr .9fr 1.2fr 1fr;gap:40px}
.foot-brand img{height:74px;width:auto}
.foot-brand p{margin-top:18px;font-size:14px;line-height:1.65;max-width:34ch;color:var(--slate)}
.foot-soc{margin-top:22px;display:flex;gap:12px}
.foot-soc a{width:44px;height:44px;border-radius:50%;border:1px solid var(--silver);background:var(--white);display:grid;place-items:center;
  transition:border-color .35s,background .35s,transform .35s}
.foot-soc a:hover{border-color:var(--ink);transform:translateY(-2px)}
.foot-soc svg{width:16px;height:16px;fill:var(--slate)}
.foot-col h3{font-family:"Inter";font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:18px}
.foot-col a{display:block;font-size:14px;color:var(--slate);padding:11px 0;position:relative;width:fit-content;transition:color .3s}
.foot-col a::after{content:"";position:absolute;left:0;bottom:8px;height:1px;width:0;background:var(--logo);transition:width .35s var(--ease)}
.foot-col a:hover{color:var(--ink)}.foot-col a:hover::after{width:100%}
.foot-col .fwhy{display:flex;align-items:baseline;gap:10px;color:var(--slate);font-size:14px;padding:7px 0;line-height:1.5}
.foot-col .fwhy::before{content:"";flex:none;width:14px;height:1.5px;background:var(--logo);transform:translateY(-4px)}
.foot-contact a{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink);padding:10px 0;transition:color .3s}
.foot-contact a:hover{color:var(--slate)}
.foot-contact a svg{width:16px;height:16px;fill:var(--logo);flex:none}
.foot-contact .em{font-size:13px;letter-spacing:-.1px}
.foot-addr{margin-top:14px;font-size:14px;line-height:1.6;color:var(--slate);font-style:normal}
.foot-bottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:14px 24px;
  justify-content:space-between;align-items:center;font-size:12.5px;color:var(--slate)}
.foot-bottom .links{display:flex;flex-wrap:wrap;gap:0 20px}
.foot-bottom .links a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom .links a:hover{color:var(--ink)}

/* ============================================================
   Floating action rail (right) + back to top (left)
   ============================================================ */
.fab{position:fixed;right:20px;bottom:calc(22px + var(--bar-h));z-index:900;display:flex;flex-direction:column;gap:12px;align-items:center}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--silver);
  background:var(--white);color:var(--ink);box-shadow:0 10px 30px rgba(58,58,56,.16);
  transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s;position:relative}
.fab a:hover{background:var(--pearl);border-color:var(--ink);transform:translateY(-3px) scale(1.05)}
.fab svg{width:24px;height:24px;fill:currentColor}
.fab .wa svg{fill:var(--whatsapp)}
.fab .tip{position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--white);color:var(--ink);font-size:12px;
  font-weight:600;padding:8px 13px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;border:1px solid var(--silver);
  box-shadow:0 8px 20px rgba(58,58,56,.12);transition:opacity .3s,transform .3s}
.fab a:hover .tip{opacity:1;transform:translateY(-50%)}
/* The back to the top button sits in the rail as its fourth item (Amy, 5 Oct 2026),
   not floating on its own. Its slot is always reserved so the three above it do not
   jump when it appears. */
.rail .totop{
  display:grid;place-items:center;cursor:pointer;padding:0;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .35s,border-color .35s}
.rail .totop.show{opacity:1;pointer-events:auto;transform:none}
.rail .totop svg{width:21px;height:21px;fill:currentColor}

/* mobile sticky call bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:940;background:var(--white);border-top:1px solid var(--silver);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:8px}
.mbar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:3px;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.mbar .m-call{background:var(--ink);color:var(--white)}
.mbar .m-quote{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--silver)}
.mbar svg{width:17px;height:17px;fill:currentColor}

/* ============================================================
   TRS demo switcher pill
   ============================================================ */
.dsw{position:fixed;left:50%;bottom:calc(18px + var(--bar-h));transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:3px;padding:5px;border-radius:100px;background:var(--white);
  border:1px solid var(--silver);box-shadow:0 14px 40px rgba(58,58,56,.18);
  font-family:"Inter",system-ui,sans-serif;max-width:calc(100vw - 20px);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.dsw::-webkit-scrollbar{display:none}
.dsw a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 15px;border-radius:100px;
  color:var(--slate);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;
  transition:color .3s,background .3s}
.dsw a:hover{color:var(--ink);background:var(--pearl)}
.dsw a.on{background:var(--mist);color:var(--ink)}
.dsw a.sh{border-left:1px solid var(--silver);border-radius:0 100px 100px 0}

/* ============================================================
   Scroll reveal . visible by default, hidden only once JS confirms
   ============================================================ */
.rv{transition:opacity .8s var(--ease-cine),transform .8s var(--ease-cine)}
.js .rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.rv-img{transition:clip-path 1.1s var(--ease-cine)}
.js .rv-img{clip-path:inset(0 0 100% 0)}
.rv-img.in{clip-path:inset(0 0 0 0)}
html.no-reveal .rv,html.no-reveal .rv-img,
html.no-reveal .hero .he,html.no-reveal .hero h1 .line .in{opacity:1!important;transform:none!important;clip-path:none!important}

/* ---------- quiet motion gestures ported from SSR ---------- */
.eyebrow::before{width:0;transition:width .9s var(--ease-cine) .1s}
.rv.in.eyebrow::before,.rv.in .eyebrow::before,.eyebrow.rv.in::before{width:30px}
.js .eyebrow:not(.rv)::before{width:30px}
html.no-reveal .eyebrow::before{width:30px}
.sec-head h2::after,.sec-head h1::after,.svc-top h2::after,.intro-copy h2::after,.cat-copy h2::after{
  content:"";display:block;height:1.5px;width:0;margin-top:20px;
  background:linear-gradient(90deg,var(--logo) 0%,var(--silver) 60%,transparent 100%);
  transition:width 1.15s var(--ease-cine) .25s}
.rv.in h2::after,h2.rv.in::after,.rv.in .sec-head h1::after,.sec-head h1.rv.in::after{width:96px}
html.no-reveal h2::after,html.no-reveal .sec-head h1::after{width:96px}
.svc-card::before,.svc-card::after{content:"";position:absolute;z-index:4;pointer-events:none;
  border-color:rgba(255,255,255,.85);border-style:solid;border-width:0;
  transition:width .55s var(--ease),height .55s var(--ease)}
.svc-card::before{top:14px;left:14px;width:0;height:0;border-top-width:1.5px;border-left-width:1.5px}
.svc-card::after{bottom:14px;right:14px;width:0;height:0;border-bottom-width:1.5px;border-right-width:1.5px}
.svc-card:hover::before,.svc-card:hover::after{width:34px;height:34px}
.stats .stat::after,.band-item::after{content:"";position:absolute;left:0;bottom:-10px;height:1px;width:0;background:var(--logo);
  transition:width 1s var(--ease-cine) .75s}
.rv.in .stat::after,.band-item.rv.in::after{width:38px}
.intro-copy .blockquote::before{content:"\201C";position:absolute;left:10px;top:-30px;z-index:0;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:82px;line-height:1;color:var(--logo);opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease-cine) .3s,transform .9s var(--ease-cine) .3s}
.rv.in .blockquote::before,.blockquote.rv.in::before{opacity:.26;transform:none}
.gal figure::before,.svc-imgwrap::before{content:"";position:absolute;inset:-40%;z-index:3;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.16) 52%,transparent 62%);
  transform:translateX(-120%);transition:transform 1.25s var(--ease-cine)}
.gal figure:hover::before,.svc-card:hover .svc-imgwrap::before{transform:translateX(120%)}
.par{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .hdr nav.desk,.hdr-phone{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-logo{}
  .band-grid{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:repeat(3,1fr)}
  .areas-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .intro-grid{grid-template-columns:1fr;gap:38px}
  .intro-media{order:-1}
  .svc-top{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr;gap:34px}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .cat-in{grid-template-columns:1fr;gap:30px}
  .cat-badge{align-self:start}
  .ba-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .gal .g1{grid-column:1/3;grid-row:1/3}
  .gal .g2{grid-column:1/3;grid-row:3/4}
  .gal .g3{grid-column:1/2;grid-row:4/5}
  .gal .g4{grid-column:2/3;grid-row:4/5}
  .gal .g5{grid-column:1/3;grid-row:5/6}
  .gal .g6{grid-column:1/3;grid-row:6/7}
}
@media (max-width:600px){
  :root{--topbar-h:0px;--hdr-h:82px;--bar-h:66px}
  .hdr-right{display:none}
  .hdr .brand img{height:52px}
  .hdr.solid .brand img{height:48px}
  .topbar-in{justify-content:center;padding:0 14px}
  .topbar .tb-email{display:none}
  .tb-phones{gap:18px}
  .topbar a{font-size:12px;gap:6px}
  .svc-grid{grid-template-columns:1fr}
  .svc-logo{}
  .band-grid{grid-template-columns:1fr;gap:28px}
  .areas-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .qc-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .hero-scroll{display:none}
  .hero-inner{padding-top:24px;padding-bottom:136px}
  .hero .eyebrow{margin-bottom:12px}
  .hero-sub{margin-top:12px;font-size:15px}
  .hero-cta{margin-top:18px}
  .hide-sm{display:none}
  .hero-sub,.hero-cta{padding-right:60px}
  .fab{right:10px;bottom:calc(14px + var(--bar-h) + 56px);gap:9px}
  .fab a{width:46px;height:46px}
  .fab svg{width:20px;height:20px}
  .fab .tip{display:none}
  /* size only: it sits in the rail now, so it must not carry its old floating offsets */
  .rail .totop{width:46px;height:46px}
  .rail .totop svg{width:19px;height:19px}
  .mbar{display:grid}
  .drawer{padding-bottom:calc(var(--bar-h) + 92px)}
  .dsw{bottom:calc(10px + var(--bar-h));padding:4px}
  .dsw a{padding:8px 9px;font-size:.53rem;letter-spacing:.08em}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.15em;gap:10px}
  .hero .eyebrow::before{width:22px}
  .rv.in.eyebrow::before,.rv.in .eyebrow::before,.eyebrow.rv.in::before{width:22px}
  .tb-cell{padding:38px 20px;border-left:0}
  .tb-cell + .tb-cell{border-top:1px solid var(--line-3)}
  .tb-grid{grid-template-columns:1fr}
  .foot-bottom .links{padding-right:60px}
}
@media (max-width:900px) and (min-width:601px){
  .tb-grid{grid-template-columns:repeat(2,1fr)}
  .tb-cell:nth-child(3){border-left:0}
  .tb-cell:nth-child(n+3){border-top:1px solid var(--line-3)}
}
@media (max-width:400px){
  .hero h1{font-size:clamp(2.05rem,9.6vw,2.6rem)}
  .hero-sub{margin-top:16px;font-size:15px}
  .hero-cta{margin-top:22px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-sub,.hero-cta{padding-right:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .rv,.hero .he,.hero h1 .line .in{opacity:1!important;transform:none!important}
  .rv-img{clip-path:none!important}
  .scrollbar{display:none!important}
  .hero-media video{display:none}
  .feature-media img{transform:scale(1.04)}
  .mtrack,.tick-track{animation:none!important;white-space:normal;flex-wrap:wrap;justify-content:center;width:auto}
  .eyebrow::before{width:30px;transition:none}
  .sec-head h2::after,.sec-head h1::after,.svc-top h2::after,.intro-copy h2::after,.cat-copy h2::after{width:96px;transition:none}
  .svc-card::before,.svc-card::after{display:none}
  .gal figure::before,.svc-imgwrap::before{display:none}
  .intro-copy .blockquote::before{opacity:.26;transform:none;transition:none}
  .stats .stat::after,.band-item::after{width:38px;transition:none}
  .rev-track{transition:none}
    .par{transform:none!important}
}

/* ------------------------------------------------------------
   READABILITY FLOOR
   Swept at 375-1440: real body copy was landing at 12.5px (a form note) and
   14 to 14.5px (service descriptions, footer blurb). Nothing that carries a
   sentence drops below 15px, and anything a finger has to hit clears 44px on
   touch. Labels and eyebrows are exempt - they are set small on purpose.
   ------------------------------------------------------------ */
p:not(.label):not(.eyebrow):not(.cap):not(.f-note),
.svc-body p,.ftr-blurb,.rail-line,.f-ok,li:not(.label){font-size:max(1rem,0.9375rem)}
.f-note,figcaption,.cap,.card__d{font-size:max(0.875rem,13.5px)}
@media(pointer:coarse){
  a:not([class*="inline"]),button,summary,select,
  .foot-col a,.links a,.ftr a{min-height:44px}
  /* "Areas" is a short word and measured 34px wide; centring inside a 44px box
     keeps the row's rhythm while giving a finger something to hit. */
  .links a{min-width:44px;justify-content:center}
  .foot-col a.em,.links a{display:inline-flex;align-items:center}
}

/* ============================================================
   MORE GREY, BIGGER MARK, MORE MOVEMENT   (21 Aug)
   Amy: "the logo needs to be much bigger... a bit more colour to them also,
   so a bit more greys and silvers throughout... add in some more elements of
   animation."

   Measured first: these pages were running 62 to 78 per cent near-white, with
   only 3.6 to 7.7 per cent in the band where --silver lives. Everything
   alternated between two tones that are 7 luminance points apart, so the
   alternation did not read at all. --silver now does real work as a ground.
   ============================================================ */
.bg-silver,.sec-silver,.g-silver{background:var(--silver)}
.bg-mist,.sec-mist,.g-mist{background:var(--mist)}
/* on the two darker grounds the meta ink steps down with them */
.bg-silver,.sec-silver,.g-silver{--label-ink:#4E4E4C}
.bg-silver .label,.sec-silver .label,.g-silver .label,
.bg-silver .eyebrow,.sec-silver .eyebrow,.g-silver .eyebrow{color:#4E4E4C}

/* THE MARK, MUCH BIGGER. It was 56 to 66px against a header that can carry
   far more; their lock-up is wide so the header grows with it. */
.brand img,.logo img,.hdr__logo img,.hdr-logo img,header a img[src*="logo-site"]{
  height:94px !important;width:auto !important}
@media(max-width:900px){
  .brand img,.logo img,.hdr__logo img,.hdr-logo img,header a img[src*="logo-site"]{
    height:calc(94px * .72) !important}
}

/* MOVEMENT. Four additions, all gated on html.js and all off under
   prefers-reduced-motion. */
@keyframes ew-drift{from{transform:scale(1.015)}to{transform:scale(1.09)}}
@keyframes ew-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ew-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 1. a slow drift on the big statement photographs */
html.js .band img,html.js .feature img,html.js .stmt img,html.js .plate img{
  animation:ew-drift 38s ease-in-out infinite alternate;transform-origin:center}
html.js .band:nth-of-type(2n) img{animation-duration:46s}
/* 2. cards lift and their photograph pushes in together */
.svc-card,.card,.tile,figure.card{transition:transform .5s cubic-bezier(.22,1,.36,1),
  box-shadow .5s cubic-bezier(.22,1,.36,1)}
.svc-card:hover,a.card:hover,.tile:hover{transform:translateY(-5px)}
/* 3. section rules draw themselves in */
html.js .rv .rule,html.js .in .rule,html.js .rv hr,html.js .in hr{
  transform-origin:left center;animation:ew-line 1.1s cubic-bezier(.22,1,.36,1) both}
/* 4. the eyebrow rises just before its heading */
html.js .rv .label,html.js .in .label,html.js .rv .eyebrow,html.js .in .eyebrow{
  animation:ew-rise .8s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){
  html.js .band img,html.js .feature img,html.js .stmt img,html.js .plate img,
  html.js .rv .rule,html.js .in .rule,html.js .rv hr,html.js .in hr,
  html.js .rv .label,html.js .in .label,html.js .rv .eyebrow,html.js .in .eyebrow{
    animation:none}
  .svc-card:hover,a.card:hover,.tile:hover{transform:none}
}

/* ------------------------------------------------------------
   CHECKATRADE RECORD AS ONE MOVING ROW  (24 Aug)
   Amy: "these bullet points need to be on a carousel or something, this looks
   very untidy." Five pills in a wrapping flex row broke 3 then 2 and left a
   ragged second line. One row that scrolls is tidy at every width, and it uses
   the same marquee language as the areas strip further up the page.
   ------------------------------------------------------------ */
.cat-checks{margin-top:22px;display:block}
.cat-checks__vp{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.cat-checks__track{display:flex;width:max-content;align-items:stretch}
html.js .cat-checks__track{animation:cat-run 34s linear infinite}
.cat-checks:hover .cat-checks__track,
.cat-checks:focus-within .cat-checks__track{animation-play-state:paused}
/* margin, never flex gap: a gap is not duplicated with the set, so the seam
   jumps by one gap every cycle */
.cat-checks__track > span{flex:0 0 auto;margin-right:14px;white-space:nowrap}
@keyframes cat-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  html.js .cat-checks__track{animation:none;flex-wrap:wrap;width:auto}
  .cat-checks__vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ============================================================
   HEADER, MORPH PATTERN  (24 Aug)
   Amy: logo centred, menu one side, get in touch the other, and only a half
   menu opens. Morph runs Menu LEFT / logo CENTRE / Get In Touch RIGHT and the
   drawer comes in from the left. Kept that way round on purpose: a panel that
   opens from the right has to sit next to the scrollbar gutter, which is the
   exact problem Amy flagged. From the left there is no gutter to fight.
   ============================================================ */
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}

/* the trigger is the word Menu with two rules, not a burger */
.menutrig{justify-self:start;display:inline-flex;align-items:center;gap:12px;
  background:none;border:0;cursor:pointer;padding:12px 4px;min-height:44px;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink)}
.menutrig__bars{display:inline-flex;flex-direction:column;gap:5px;width:22px}
.menutrig__bars span{display:block;height:1px;background:currentColor;
  transition:transform .5s var(--ease),width .5s var(--ease)}
.menutrig__bars span:last-child{width:14px;margin-left:auto}
.menutrig:hover .menutrig__bars span:last-child,
.menutrig:focus-visible .menutrig__bars span:last-child{width:22px}
.menutrig__tx{position:relative}
.menutrig__tx::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.menutrig:hover .menutrig__tx::after,.menutrig:focus-visible .menutrig__tx::after{transform:scaleX(1)}

/* the logo is the centre of the header and gets the room to say so */
.brand{justify-self:center}
.brand img{height:78px;width:auto;display:block}

.hdr-right{justify-self:end;display:flex;align-items:center;gap:22px}
.hdr-phone{font-size:13px;letter-spacing:.06em;color:var(--ink);text-decoration:none;white-space:nowrap}
.hdr-cta{white-space:nowrap}

/* ---- the half menu ---- */
.drawer{position:fixed;top:0;bottom:0;left:0;right:auto;
  width:min(440px,86vw);inset:auto;height:100%;
  z-index:1300;background:var(--paper);border-right:1px solid var(--line-3);
  padding:34px var(--pad) 40px;overflow-y:auto;
  display:flex;flex-direction:column;
  transform:translateX(-101%);visibility:hidden;
  transition:transform .72s cubic-bezier(.22,1,.36,1),visibility 0s linear .72s;
  box-shadow:0 0 60px -20px rgba(58,58,56,.35)}
html.js body.menu-open .drawer{transform:translateX(0);visibility:visible;transition-delay:0s}
.drawer-scrim{position:fixed;inset:0;z-index:1250;background:rgba(58,58,56,.42);
  opacity:0;transition:opacity .5s var(--ease);backdrop-filter:blur(2px)}
html.js body.menu-open .drawer-scrim{opacity:1}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:26px;margin-bottom:8px;border-bottom:1px solid var(--line-3)}
.drawer-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}
.drawer-x{background:none;border:0;cursor:pointer;font-size:30px;line-height:1;
  color:var(--ink);min-width:44px;min-height:44px;transition:transform .4s var(--ease)}
.drawer-x:hover,.drawer-x:focus-visible{transform:rotate(90deg)}
/* the links stagger in behind the panel */
html.js .drawer .dl{opacity:0;transform:translateX(-14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js body.menu-open .drawer .dl{opacity:1;transform:none}
html.js body.menu-open .drawer .dl:nth-child(2){transition-delay:.16s}
html.js body.menu-open .drawer .dl:nth-child(3){transition-delay:.22s}
html.js body.menu-open .drawer .dl:nth-child(4){transition-delay:.28s}
html.js body.menu-open .drawer .dl:nth-child(5){transition-delay:.34s}
html.js body.menu-open .drawer .dl:nth-child(6){transition-delay:.40s}
html.js body.menu-open .drawer .dl:nth-child(7){transition-delay:.46s}
html.js body.menu-open .drawer .dl:nth-child(8){transition-delay:.52s}
.drawer-foot{margin-top:auto;padding-top:30px;border-top:1px solid var(--line-3);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
/* locking the body must not shift the page: reserve the scrollbar width */
html.js body.menu-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .drawer,.drawer-scrim,html.js .drawer .dl{transition:none}
}
/* the desktop nav has moved into the panel entirely, which is the whole point
   of the pattern - one uncluttered line with the mark in the middle */
.desk{display:none}
@media(max-width:760px){
  .hdr-phone{display:none}
  .brand img{height:58px}
  .menutrig__tx{display:none}
  /* the label hides on phones, which left the trigger 26px wide - the bars are
     only 22px. It keeps a full 44px target whether the word is there or not. */
  .menutrig{padding-left:0;min-width:44px;justify-content:flex-start}
}

/* ------------------------------------------------------------
   NO WHITE PANELS  (24 Aug)
   Amy: the Checkatrade mark on a white card reads cheap. The logo PNG is
   already transparent, so the card was the only thing making it a box. It now
   sits on the band with a hairline rule under the mark instead.
   ------------------------------------------------------------ */
.cat-badge{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.cat-badge img{margin-bottom:18px}
.cat-badge .cat-score{padding-top:20px;border-top:1px solid var(--silver);width:100%}

/* WhatsApp in their logo grey, not its own green (Amy, 24 Aug - this reverses
   the instruction from 10 Aug). Kept as one rule so it is easy to flip back. */
.rail a.wa,.rail .wa,a.wa,.ctl--wa,.mbar .wa{color:var(--logo)}
.rail a.wa svg,.rail .wa svg,a.wa svg,.ctl--wa svg,.mbar .wa svg{fill:var(--logo)}
.rail a.wa:hover svg,a.wa:hover svg,.ctl--wa:hover svg{fill:var(--ink)}

/* ============================================================
   SILVER AND CHROME  (24 Aug)
   Amy: "more elements of silver and chrome effect, more animation, take the
   glows and finishes from MYT Clean but not the blue."
   MYT Clean's kit is a shine sweep, a float, a slow drift and layered glows.
   Rebuilt here entirely in their own neutrals, so nothing gains a hue.
   ============================================================ */

@keyframes ew-shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ew-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ew-drift{0%,100%{transform:translate3d(0,0,0) scale(1.02)}
  33%{transform:translate3d(2.4%,-1.6%,0) scale(1.07)}
  66%{transform:translate3d(-1.8%,2.2%,0) scale(1.04)}}
@keyframes ew-sweep{0%{transform:translateX(-120%) skewX(-18deg)}
  60%,100%{transform:translateX(220%) skewX(-18deg)}}

/* 1. CHROME RULE. A hairline that catches the light across its length rather
   than sitting flat. Used anywhere a plain 1px rule was doing nothing. */
.chrome-rule,.rule,.hrule,hr.chrome{border:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--silver) 16%,#FFFFFF 50%,var(--silver) 84%,transparent)}

/* 2. CHROME TEXT. The accent word in a display heading, brushed. Guarded: the
   solid colour is set FIRST, and the transparent fill only applies where
   background-clip:text is supported, so the word can never go invisible. */
.chrome-tx{color:var(--ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.js .chrome-tx{
    background:linear-gradient(100deg,#5A5A58 18%,#B9B8B5 34%,#FFFFFF 44%,#B9B8B5 54%,#5A5A58 72%);
    background-size:220% auto;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:ew-shine 9s linear infinite}
}

/* 3. GLOWS, in grey. Layered soft shadow rather than a hard drop. */
.glow-silver{box-shadow:0 0 0 1px rgba(153,153,153,.16),
  0 14px 44px -16px rgba(58,58,56,.30), 0 0 70px -28px rgba(153,153,153,.55)}
.glow-soft{box-shadow:0 24px 70px -34px rgba(58,58,56,.26)}

/* 4. FLOAT. One slow vertical drift on a mark or badge, nothing else. */
html.js .float-slow{animation:ew-float 7.5s ease-in-out infinite}

/* 5. DRIFT on full bleed band photography, so a still image is never quite
   still. Slower and shallower than MYT Clean's, to suit the register. */
html.js .stmt__bg img,html.js .band-media img,html.js .plate-bg img{
  animation:ew-drift 26s ease-in-out infinite;will-change:transform}

/* 6. SWEEP. A single light pass across a solid button on hover. */
.btn-solid,.btn--fill,.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-solid::after,.btn--fill::after,.btn-primary::after{content:"";position:absolute;
  top:-40%;bottom:-40%;left:0;width:36%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.btn-solid:hover::after,.btn--fill:hover::after,.btn-primary:hover::after,
.btn-solid:focus-visible::after,.btn--fill:focus-visible::after,.btn-primary:focus-visible::after{
  opacity:1;animation:ew-sweep .9s ease-out}

/* 7. Photography lifts very slightly under the cursor, with a silver edge. */
.svc-card,.svc,.card,.tile,.slide,.plate{transition:transform .6s cubic-bezier(.22,1,.36,1),
  box-shadow .6s cubic-bezier(.22,1,.36,1)}
a.svc-card:hover,a.svc:hover,a.card:hover,a.tile:hover{
  transform:translateY(-4px);box-shadow:0 20px 54px -26px rgba(58,58,56,.34)}

@media(prefers-reduced-motion:reduce){
  html.js .chrome-tx,html.js .float-slow,html.js .stmt__bg img,
  html.js .band-media img,html.js .plate-bg img{animation:none}
  .btn-solid::after,.btn--fill::after,.btn-primary::after{display:none}
  a.svc-card:hover,a.svc:hover,a.card:hover,a.tile:hover{transform:none}
}

/* the kit, attached. The accent word in every display heading is brushed
   silver, and the Checkatrade mark drifts. Declaring effects without putting
   them on anything is how the curtain reveal sat dead in these files for a
   fortnight, so both are wired here explicitly. */
.em{color:var(--ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.js :is(.em){
    background:linear-gradient(100deg,#5A5A58 18%,#B9B8B5 34%,#FFFFFF 44%,#B9B8B5 54%,#5A5A58 72%);
    background-size:220% auto;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:ew-shine 9s linear infinite}
}
img[src*="checkatrade"]{animation:ew-float 7.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  html.js :is(.em){animation:none}
  img[src*="checkatrade"]{animation:none}
}

/* Hero accents sit ON photography. The dark brushed gradient above would all
   but disappear there, so inside any hero the sweep is inverted: white through
   silver through white. Same effect, still legible over an image. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.js :is(.hero,.hero--full,[class*="hero"]) :is(.em,em){
    background:linear-gradient(100deg,#FFFFFF 20%,#EDECEA 36%,#FFFFFF 46%,#DCDBD8 58%,#FFFFFF 76%);
    background-size:220% auto;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}
:is(.hero,.hero--full,[class*="hero"]) :is(.em,em){color:#FFFFFF}

/* ------------------------------------------------------------
   MENU PANEL, CLEAR  (25 Aug)
   Amy: lose the white background so it is nice and clear.
   A truly transparent panel would put the links on whatever happens to be
   behind them, which changes with scroll position and is unreadable over
   photography. So: glass. A heavy backdrop blur flattens whatever is behind
   into a soft wash, a light tint sits over that, and the scrim behind the
   panel is darkened so the page recedes and the menu is the only thing in
   focus. Contrast is measured after this, not assumed.
   ------------------------------------------------------------ */
.drawer{
  background:linear-gradient(180deg,rgba(250,250,249,.82),rgba(243,242,240,.76));
  -webkit-backdrop-filter:blur(26px) saturate(120%);
          backdrop-filter:blur(26px) saturate(120%);
  border-right:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 90px -20px rgba(58,58,56,.45), inset 1px 0 0 rgba(255,255,255,.6)}

/* with no solid panel the page behind has to be pushed further back */
.drawer-scrim{background:rgba(58,58,56,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* the links carry themselves now: larger, ink, with a chrome rule between */
.drawer .dl{color:var(--ink);border-bottom:0;position:relative}
.drawer .dl + .dl::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(58,58,56,.20) 14%,rgba(255,255,255,.9) 50%,rgba(58,58,56,.20) 86%,transparent)}
.drawer .dl .n{color:var(--logo)}
.drawer .dl:hover,.drawer .dl:focus-visible{color:var(--ink)}
.drawer-head{border-bottom-color:rgba(58,58,56,.22)}
.drawer-foot{border-top-color:rgba(58,58,56,.22)}
.drawer-eyebrow{color:var(--slate)}

/* Safari and Firefox without backdrop-filter get a near solid panel instead,
   or the whole menu becomes unreadable rather than merely less pretty. */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .drawer{background:rgba(250,250,249,.97)}
  .drawer-scrim{background:rgba(58,58,56,.62)}
}

/* Testimonials lose the white card too (Amy, 25 Aug) - same call as demo 3.
   The layout is untouched; only the box goes, replaced by ruled edges. */
.rev-slide{background:none;border:0;border-top:1px solid var(--silver);
  border-bottom:1px solid var(--silver);border-radius:0;
  padding:clamp(26px,3.6vw,44px) 0}


/* the last two targets sitting just under 44px, cleared so the sweep reads
   clean for the client handover rather than carrying a footnote */
.foot-col a.em,.foot-col a{display:inline-flex;align-items:center;min-height:44px}
.links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}

/* ------------------------------------------------------------
   HEADER AS GLASS  (26 Aug)
   Amy: the bar the logo sits on needs to be clear, or the same glass as the
   side menu. Two states, because the requirement changes with what is behind:
   at the top of the page the header sits over the hero photograph and can be
   very open; once scrolling it passes over bands of every tone, so it firms up
   enough to keep the nav readable. Contrast is measured after this, not assumed.
   ------------------------------------------------------------ */
.hdr{
  background:linear-gradient(180deg,rgba(250,250,249,.58),rgba(243,242,240,.46));
  -webkit-backdrop-filter:blur(22px) saturate(115%);
          backdrop-filter:blur(22px) saturate(115%);
  border-bottom:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 -1px 0 rgba(58,58,56,.06)}
.hdr.solid{
  background:linear-gradient(180deg,rgba(250,250,249,.88),rgba(243,242,240,.82));
  -webkit-backdrop-filter:blur(28px) saturate(120%);
          backdrop-filter:blur(28px) saturate(120%);
  box-shadow:0 1px 26px rgba(58,58,56,.10)}

/* the top bar takes the same treatment so the two read as one piece of glass
   rather than a solid strip sitting on a clear one */
.topbar{
  background:linear-gradient(180deg,rgba(232,231,228,.72),rgba(232,231,228,.58));
  -webkit-backdrop-filter:blur(18px) saturate(110%);
          backdrop-filter:blur(18px) saturate(110%);
  border-bottom:1px solid rgba(255,255,255,.34)}

/* Without backdrop-filter the header would be a see-through pane with ink text
   on photography, so those browsers get it nearly solid instead. */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .hdr,.hdr.solid{background:rgba(250,250,249,.97)}
  .topbar{background:rgba(232,231,228,.97)}
}

/* ------------------------------------------------------------
   HEADER: CLEAR AT REST, GLASSIER ON SCROLL  (26 Aug)
   Amy: no background at all until you scroll, then more glass than before.
   At rest there is nothing behind the type but the hero footage, so the
   controls switch to white with a soft shadow - ink on photography would be a
   gamble that depends entirely on which frame is showing. On scroll the bar
   becomes properly frosted and the type goes back to ink.
   ------------------------------------------------------------ */
.hdr{
  background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:none;
  transition:background .55s var(--ease),backdrop-filter .55s var(--ease),
             border-color .55s var(--ease),box-shadow .55s var(--ease),padding .5s var(--ease)}

/* at rest the controls sit straight on the footage, so they are white */
.hdr:not(.solid) .menutrig,
.hdr:not(.solid) .hdr-cta,
.hdr:not(.solid) .hdr-phone{color:#FFFFFF;text-shadow:0 1px 18px rgba(58,58,56,.42)}
.hdr:not(.solid) .menutrig__bars span{background:#FFFFFF}
.hdr:not(.solid) .hdr-cta{border-color:rgba(255,255,255,.66)}
.hdr:not(.solid) .hdr-cta:hover{background:rgba(255,255,255,.14)}
/* their lock-up is a mid grey that disappears on a busy frame, so at rest it
   gets a soft drop shadow rather than a different file */
.hdr:not(.solid) .brand img{filter:drop-shadow(0 2px 14px rgba(58,58,56,.55))}

/* scrolled: heavier frost than before, and a brighter edge to catch the light */
.hdr.solid{
  background:linear-gradient(180deg,rgba(250,250,249,.72),rgba(243,242,240,.62));
  -webkit-backdrop-filter:blur(40px) saturate(150%);
          backdrop-filter:blur(40px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.60);
  box-shadow:0 1px 30px rgba(58,58,56,.12),inset 0 1px 0 rgba(255,255,255,.72)}
.hdr.solid .menutrig,.hdr.solid .hdr-cta,.hdr.solid .hdr-phone{color:var(--ink);text-shadow:none}
.hdr.solid .menutrig__bars span{background:currentColor}
.hdr.solid .brand img{filter:none}

/* the top bar stays as it is - Amy likes it - but it goes clear at rest too so
   the two do not disagree with each other */
.topbar{transition:background .55s var(--ease),backdrop-filter .55s var(--ease)}
body:not(.scrolled) .topbar{background:linear-gradient(180deg,rgba(232,231,228,.34),rgba(232,231,228,.22))}

@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .hdr.solid{background:rgba(250,250,249,.97)}
}

/* ------------------------------------------------------------
   HERO BEHIND THE HEADER  (26 Aug)
   A clear header only works if there is something behind it. main was starting
   at 136px, exactly the top bar plus header, so "clear" was showing the pale
   page ground and the white controls vanished into it. The hero is pulled up
   under the whole stack and its content padded back down by the same amount,
   so nothing moves except what sits behind the glass.
   ------------------------------------------------------------ */
.hero{margin-top:calc(-1 * (var(--topbar-h) + var(--hdr-h)));
  min-height:100svh;min-height:100vh}
.hero .hero-inner{padding-top:calc(var(--topbar-h) + var(--hdr-h) + clamp(34px,7.5vh,120px))}
/* the top of the frame now sits under the controls, so it gets a wash to keep
   white type off a bright ceiling */
.hero .hero-scrim{background:linear-gradient(180deg,rgba(58,58,56,.46) 0%,rgba(58,58,56,.16) 26%,
  rgba(58,58,56,.30) 62%,rgba(58,58,56,.62) 100%)}
@media(max-width:760px){
  .hero .hero-inner{padding-top:calc(var(--topbar-h) + var(--hdr-h) + 24px)}
}

/* the lock-up is #999999, which disappears against a bright frame. The light
   version (#DFDFDF) carries the clear header, the grey one takes over once the
   bar frosts. Both are in the DOM and cross-fade, so nothing reloads on scroll. */
.brand{position:relative;display:inline-flex;align-items:center}
.brand img{height:78px;width:auto;display:block;
  transition:opacity .55s var(--ease),filter .55s var(--ease)}
.brand .brand-grey{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.hdr.solid .brand .brand-light{opacity:0}
.hdr.solid .brand .brand-grey{opacity:1}
.hdr:not(.solid) .brand .brand-light{filter:drop-shadow(0 2px 16px rgba(58,58,56,.6))}
@media(max-width:760px){.brand img{height:58px}}

/* ------------------------------------------------------------
   MOBILE HEADER: LOGO TRULY CENTRED  (27 Aug)
   Measured: the lock-up sat 57px left of centre at 390px and 37px at 430px.
   Cause was the grid, not the padding - "Get in touch" plus its arrow is 166px
   against a 44px trigger, so the right column outgrew its 1fr and shoved the
   middle across. At 744px there is room and it was already centred, which is
   why it only showed on phones.
   Two changes: the arrow goes on phones (Amy's suggestion, and it buys ~24px),
   and the brand is centred against the HEADER rather than against whatever the
   two side columns happen to measure - so it stays centred whatever the CTA
   label ends up saying.
   ------------------------------------------------------------ */
@media(max-width:760px){
  /* taking the brand out of flow left the grid with two items, so the CTA slid
     into the middle column and sat on top of the mark. The row becomes a simple
     two-end flex: trigger hard left, CTA hard right, mark floating centred
     above them. */
  .hdr-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    margin:0;z-index:1;pointer-events:auto}
  .brand img{height:52px}
  /* the arrow comes off, and the button tightens, so the centred mark has room
     between the trigger and the CTA */
  .hdr-cta .ar{display:none}
  .hdr-cta{padding:0 14px;font-size:11px;letter-spacing:.12em;min-height:40px}
  .menutrig{min-width:44px}
  .hdr-right{gap:10px}
}
@media(max-width:390px){
  .hdr-cta{padding:0 11px;font-size:10.5px;letter-spacing:.10em}
  .brand img{height:48px}
}

/* ============================================================
   HEADER: DEMO 2's TASK BAR  (28 Aug, client request)
   Nick asked for demo 2's bar across the top on demo 1, in place of the
   centred lock-up and the MENU drop-down. Logo left, nav across, phone and
   CTA right. The clear-at-rest / frosted-on-scroll glass stays, because that
   was not what he asked to change.
   Below 1080 the six links cannot sit in a row, so the burger takes over and
   opens the side panel that is already built - the same panel, a different
   trigger.
   ============================================================ */
.hdr-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);position:static}
.brand{position:static;transform:none;justify-self:auto;flex:none}
.brand img{height:66px}
.brand .brand-grey{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.brand{position:relative}

.mnav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}
.mnav a{position:relative;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding-block:14px;min-width:44px;text-align:center;
  transition:color .35s var(--ease)}
.mnav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.mnav a:hover::after,.mnav a:focus-visible::after{transform:scaleX(1)}

.hdr-act{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.hdr-tel{display:inline-flex;align-items:center;gap:.55em;min-height:44px;
  font-size:12.5px;font-weight:500;letter-spacing:.08em;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.hdr-tel svg{width:15px;height:15px;fill:currentColor}
.hdr-cta{white-space:nowrap}

/* clear at rest: everything on the bar goes white over the footage */
.hdr:not(.solid) .mnav a,
.hdr:not(.solid) .hdr-tel,
.hdr:not(.solid) .hdr-cta{color:#FFFFFF;text-shadow:0 1px 18px rgba(58,58,56,.42)}
.hdr:not(.solid) .hdr-cta{border-color:rgba(255,255,255,.66)}
.hdr:not(.solid) .hdr-cta:hover{background:rgba(255,255,255,.14)}
.hdr.solid .mnav a,.hdr.solid .hdr-tel,.hdr.solid .hdr-cta{color:var(--ink);text-shadow:none}

/* the trigger is a burger again, not the word MENU */
.burger-x{display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:0;
  width:44px;height:44px;margin-left:auto;flex:none}
.burger-x span{display:block;height:1px;width:22px;margin-inline:auto;
  background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.hdr:not(.solid) .burger-x span{background:#FFFFFF}
.hdr.solid .burger-x span{background:var(--ink)}

@media(max-width:1080px){
  .mnav{display:none}
  .hdr-act{display:none}
  .burger-x{display:flex}
  .hdr-in{justify-content:space-between}
  .brand img{height:56px}
}
@media(max-width:480px){.brand img{height:50px}}

/* demo1 has no .btn-line (that is demo2's vocabulary), so the header CTA was
   rendering as bare text with no outline. It gets its own outlined treatment
   that inverts with the bar. */
.hdr-cta{border:1px solid currentColor;background:none;
  padding:0 20px;min-height:42px;display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.hdr.solid .hdr-cta{border-color:var(--ink);color:var(--ink)}
.hdr.solid .hdr-cta:hover,.hdr.solid .hdr-cta:focus-visible{background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------------
   LET THE PHOTOGRAPHS BREATHE  (28 Aug, client note)
   Nick asked whether the pictures would be zoomed out to get the optimum
   image. Measured: 11 of demo 1's 18 cover images were showing under 70% of
   the frame, the worst at 45%, because the service tiles are a 4:5 PORTRAIT
   slot and nearly every photograph is 16:9 landscape. Over half of each shot
   was being thrown away top and bottom.
   The slot becomes landscape, so the picture fits it rather than the other way
   round. The tiles get shorter, which is also tidier.
   ------------------------------------------------------------ */
.svc-imgwrap{aspect-ratio:4/3}
.svc-imgwrap img{object-position:50% 50%}
@media(max-width:760px){.svc-imgwrap{aspect-ratio:3/2}}

/* An aspect-ratio on a grid item placed in a FIXED row makes it taller than its
   track and it overlaps the row below (the 2:1 strips were 286px in a 220px row).
   The mosaic's cells take their size from the grid alone. */

/* ------------------------------------------------------------
   SERVICE CARD: THE IMAGE IS THE CARD  (28 Aug)
   Shortening the image to 4:3 broke the overlay: .svc-body is absolutely
   positioned at the card's bottom, so once the picture got shorter the text
   hung 75px BELOW it - white type on the card's white ground, 1.00:1.
   Making the card itself the ratio and letting the picture fill it means the
   caption is always over photography, whatever ratio the slot takes.
   ------------------------------------------------------------ */
.svc-card{position:relative;aspect-ratio:4/3}
.svc-imgwrap{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.svc-imgwrap img{height:100%}
@media(max-width:760px){.svc-card{aspect-ratio:3/2}}

/* the header CTA measured 42px tall, two under */
.hdr-cta{min-height:44px}

/* ============================================================
   INNER PAGES  (full site build, Sept 2026)
   Everything below uses demo 1's tokens only. New components are the page
   banner, the quote card and small layout helpers; nothing redefines the
   design system.
   ============================================================ */
/* Cinematic inner-page banner: taller, with a heavy slow zoom that settles.
   The zoom lives on the WRAPPER so it never fights the parallax, which writes
   --py on the <img> itself. */
.pgban{position:relative;min-height:clamp(560px,80vh,880px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--mist);
  margin-top:calc(-1 * (var(--topbar-h) + var(--hdr-h)))}
.pgban-media{position:absolute;inset:0;z-index:0;transform:scale(1.02);transform-origin:52% 46%}
html.js .pgban-media{animation:pgzoom 11s cubic-bezier(.18,.85,.3,1) forwards}
@keyframes pgzoom{from{transform:scale(1.30)}to{transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){html.js .pgban-media{animation:none;transform:none}}
.pgban-media picture,.pgban-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Lighter through the middle so the photograph reads, weighted where the type sits. */
.pgban-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(58,58,56,.46) 0%,rgba(58,58,56,.10) 30%,
    rgba(58,58,56,.22) 58%,rgba(58,58,56,.72) 100%)}
.pgban-in{position:relative;z-index:2;width:100%;
  padding-top:calc(var(--topbar-h) + var(--hdr-h) + 40px);padding-bottom:clamp(44px,7vh,84px)}
.pgban h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4.4rem);max-width:17ch}
.pgban .hero-sub{max-width:56ch}
.pgban .eyebrow{color:rgba(255,255,255,.92)}

.rulegrid-2{grid-template-columns:repeat(2,1fr);margin-top:28px}
.intro-grid.flip .intro-media{order:-1}
@media(max-width:900px){.intro-grid.flip .intro-media{order:0}}

.q-card{background:var(--white);border:1px solid var(--silver);padding:clamp(24px,3vw,40px)}
.feature-in{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px);align-items:center}
@media(min-width:1000px){.feature-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.q{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.q .field{display:flex;flex-direction:column;gap:7px}
.q .field.full{grid-column:1/-1}
.q .field label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.q .field input,.q .field select,.q .field textarea{
  background:var(--paper);border:1px solid var(--silver);border-radius:3px;
  padding:12px 14px;min-height:50px;font:inherit;color:inherit;width:100%;
  transition:border-color .25s ease,box-shadow .25s ease}
.q .field textarea{min-height:120px;resize:vertical}
.q .field input:focus,.q .field select:focus,.q .field textarea:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(58,58,56,.10)}
.q .err{display:none;font-size:12.5px;color:#8A2F2F}
.q .field.bad .err{display:block}
.q .hp{position:absolute;width:4px;height:4px;opacity:0;pointer-events:none}
.q .form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.q .form-note{font-size:13.5px;color:var(--slate);max-width:44ch;margin:0}
.q .sent{display:none;grid-column:1/-1}
.q.done .sent{display:block}
.q.done .field,.q.done .form-foot{display:none}
@media(max-width:640px){.q{grid-template-columns:1fr}}

.endcta{border-top:1px solid var(--silver)}
.foot-col h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.contact-block{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,54px)}
@media(min-width:1000px){.contact-block{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.villages-cloud{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;margin:0;padding:0;list-style:none}
.villages-cloud li{display:inline}
.villages-cloud li+li::before{content:"";display:inline-block;width:1px;height:11px;
  margin-inline:14px;background:var(--silver);vertical-align:baseline}
.villages-cloud a{color:var(--ink);text-decoration:underline 1px var(--silver);text-underline-offset:5px}
.villages-cloud a:hover{text-decoration-color:var(--ink)}

/* ==== inner-page component definitions (all in the tokens above) ==== */
.hero-load{opacity:1}
html.js .pgban .hero-load{opacity:0;transform:translateY(18px);animation:pgrise .7s var(--ease,cubic-bezier(.22,1,.36,1)) forwards}
html.js .pgban .d1{animation-delay:.05s}html.js .pgban .d2{animation-delay:.14s}
html.js .pgban .d3{animation-delay:.23s}html.js .pgban .d4{animation-delay:.32s}
@keyframes pgrise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .pgban .hero-load{animation:none;opacity:1;transform:none}}

.pgban .em,.pgban h1 .em{color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;background:none;animation:none;font-style:italic}
.pgban h1{font-size:clamp(2.6rem,5.4vw,4.5rem);max-width:20ch}

/* Fact rows.  Four columns inside a half-width copy column gave ~135px a cell and
   every line wrapped, so the count is driven by the CONTAINER, not the viewport:
   2 up in a narrow column, 4 up only across the full measure. Always a whole
   number of full rows, never an orphan. */
.rulegrid{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:0;row-gap:clamp(26px,3vw,40px);margin-top:34px}
.rulegrid > *{border-left:1px solid var(--silver);padding-inline:clamp(18px,2vw,32px)}
.rulegrid > :nth-child(2n+1){border-left:0;padding-inline-start:0}
/* full-measure contexts can carry four across */
@media(min-width:900px){
  .sec > .wrap > .rulegrid,.rulegrid-4{grid-template-columns:repeat(4,1fr)}
  .sec > .wrap > .rulegrid > *,.rulegrid-4 > *{border-left:1px solid var(--silver);padding-inline-start:clamp(18px,2vw,32px)}
  .sec > .wrap > .rulegrid > :first-child,.rulegrid-4 > :first-child{border-left:0;padding-inline-start:0}
  .sec > .wrap > .rulegrid > :nth-child(2n+1):not(:first-child),
  .rulegrid-4 > :nth-child(2n+1):not(:first-child){border-left:1px solid var(--silver)}
}
@media(max-width:520px){
  .rulegrid{grid-template-columns:1fr;row-gap:0}
  .rulegrid > *{border-left:0;padding-inline:0;padding-block:18px;
    border-top:1px solid var(--silver)}
  .rulegrid > :first-child{border-top:0;padding-top:0}
}
.fact{position:relative}
/* the numeral leads, so give it room and stop it breaking mid-phrase */
.fact b{display:block;font-family:var(--serif,"Cormorant Garamond",serif);font-weight:500;
  font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.12;color:var(--ink);
  text-wrap:balance;letter-spacing:-.008em}
.fact .label{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate);line-height:1.5;max-width:22ch}
/* a hairline that draws in under each figure as the row reveals, staggered by --i */
.fact::after{content:"";display:block;height:1.5px;width:0;margin-top:14px;
  background:linear-gradient(90deg,var(--logo),transparent);
  transition:width .85s var(--ease-cine) calc(.12s + var(--i,0) * .09s)}
.rv.in.fact::after,.rv.in .fact::after{width:38px}
html.no-reveal .fact::after{width:38px}
.js .rv.fact{transition-delay:calc(var(--i,0) * .085s)}
@media(prefers-reduced-motion:reduce){
  .fact::after{transition:none;width:38px}
  .js .rv.fact{transition-delay:0s}
}

.prose{max-width:74ch}
.prose p{font-size:1.03rem;line-height:1.75}
.prose p+p{margin-top:1em}

/* Inner-page galleries only. The bare .gal on the homepage is demo 1's editorial
   4-column grid with explicit g1..g6 placement; a bare .gal override here once set it
   to a single column and the browser invented 0px implicit tracks for cols 2-4. */
.gal-3,.gal-4{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px)}
@media(min-width:700px){.gal-3{grid-template-columns:repeat(3,1fr)}.gal-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.gal-4{grid-template-columns:repeat(4,1fr)}}
.gtile{margin:0;overflow:hidden;background:var(--silver);aspect-ratio:4/3;position:relative}
.gtile picture,.gtile img{display:block;width:100%;height:100%;object-fit:cover}
.gtile img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.gtile:hover img{transform:scale(1.045)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 12px;color:#fff;
  font-size:12.5px;letter-spacing:.06em;
  background:linear-gradient(transparent,rgba(58,58,56,.72))}
@media(prefers-reduced-motion:reduce){.gtile:hover img{transform:none}}

.feature-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(250,250,249,.94) 0%,rgba(250,250,249,.86) 44%,rgba(250,250,249,.55) 100%)}
.feature{position:relative;isolation:isolate;padding-block:clamp(56px,7vw,104px)}
.feature-media{position:absolute;inset:0;z-index:0}
.feature-media picture,.feature-media img{width:100%;height:100%;object-fit:cover;display:block}
.feature-in{position:relative;z-index:2}
.cdl{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cdl a,.cdl p{display:flex;margin:0;color:var(--ink);text-decoration:none}
.cdl small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.cdl span{font-size:1.05rem}
.req{color:#8A2F2F}
.tlink{color:var(--ink);text-decoration:underline 1px var(--silver);text-underline-offset:5px}
.tlink:hover{text-decoration-color:var(--ink)}
.btn-ghost2{border:1px solid var(--ink);color:var(--ink);background:none}
.btn-ghost2:hover{background:var(--ink);color:var(--paper)}

.faq-list{margin-top:8px}
.faq-item{border-bottom:1px solid var(--silver)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  cursor:pointer;list-style:none;padding:20px 0;font-family:var(--serif,"Cormorant Garamond",serif);
  font-size:clamp(1.15rem,1.6vw,1.45rem);color:var(--ink);min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{flex:none;width:12px;height:12px;position:relative}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;background:var(--slate);
  transition:transform .35s ease}
.faq-item summary i::before{left:0;right:0;top:5px;height:1px}
.faq-item summary i::after{top:0;bottom:0;left:5px;width:1px}
.faq-item[open] summary i::after{transform:scaleY(0)}
.faq-a{overflow:hidden}
.faq-a-in{padding:0 0 20px;max-width:70ch}
.faq-a-in p{color:var(--slate);line-height:1.72;margin:0}

.ftr{background:var(--mist);color:var(--slate);border-top:1px solid var(--silver);
  padding:clamp(64px,7vw,88px) 0 40px}
.ftr-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr 1fr;gap:clamp(26px,3vw,52px)}
@media(max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr-brand img{height:64px;width:auto;margin-bottom:16px}
.ftr-brand p{color:var(--slate);max-width:38ch}
.ftr .links{list-style:none;margin:0;padding:0}
.ftr .links a{display:inline-flex;align-items:center;min-height:38px;color:var(--slate);
  text-decoration:none;transition:color .3s ease}
.ftr .links a:hover{color:var(--ink)}
.ftr .links a.f-mail{overflow-wrap:anywhere}
@media(pointer:coarse){.ftr .links a{min-height:44px}}
.ftr address{font-style:normal;color:var(--slate);margin-top:10px;line-height:1.7}
.ftr-base{margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--silver);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:14px;color:var(--slate)}
.ftr-base p{margin:0}
.ftr-base a{color:var(--slate)}

.tb-mail,.tb-tels a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--ink);text-decoration:none}
.tb-tels{display:flex;gap:22px}
.topbar svg{width:14px;height:14px;fill:currentColor}
.ico svg{width:18px;height:18px;fill:currentColor}

/* ---------- before / after stack (our-work) ---------- */
.ba-stack{display:grid;gap:clamp(46px,5vw,74px)}
.ba-pair .ba-grid{margin-top:0}
.ba-fig figcaption{letter-spacing:.10em;text-transform:uppercase;padding:7px 12px;
  background:var(--paper);color:var(--ink);font-size:10.5px}
.ba-note{margin-top:18px}
@media(min-width:700px){.ba-fig img{aspect-ratio:3/2}}

/* ---------- Services dropdown in the main nav ----------
   Opens on hover AND focus-within so it is keyboard reachable. The panel is a
   sibling of the link inside .mnav-has, which is the only positioned ancestor,
   so it can never be trapped by the header's own stacking context. */
.mnav-has{position:relative;display:inline-flex;align-items:center}
.mnav-caret{width:9px;height:6px;margin-left:6px;transition:transform .35s var(--ease);flex:none}
.mnav-has:hover .mnav-caret,.mnav-has:focus-within .mnav-caret{transform:rotate(180deg)}
.mnav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1200;
  padding-top:18px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease),visibility .34s}
.mnav-has:hover .mnav-drop,.mnav-has:focus-within .mnav-drop{opacity:1;visibility:visible;pointer-events:auto}
.mnav-drop-in{display:block;min-width:268px;background:rgba(250,250,249,.93);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--silver);border-radius:3px;padding:10px 0;
  box-shadow:0 26px 60px -22px rgba(58,58,56,.30);
  transform:translateY(-8px);transition:transform .38s var(--ease)}
.mnav-has:hover .mnav-drop-in,.mnav-has:focus-within .mnav-drop-in{transform:none}
.mnav-drop a{display:block;padding:11px 22px;font-family:var(--sans);font-size:13.5px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate);white-space:nowrap;
  position:relative;transition:color .28s var(--ease),background .28s var(--ease)}
.mnav-drop a::after{display:none}
.mnav-drop a:hover{color:var(--ink);background:rgba(210,209,206,.30)}
.mnav-drop a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:20px;background:var(--logo);transition:transform .3s var(--ease)}
.mnav-drop a:hover::before{transform:translateY(-50%) scaleY(1)}
.mnav-all{margin-top:6px;border-top:1px solid var(--silver);padding-top:13px !important;
  color:var(--ink) !important;font-weight:500}
/* over a photographic banner the header is transparent, so the panel keeps its own ground */
.hdr:not(.solid) .mnav-drop a{color:var(--slate)}
.hdr:not(.solid) .mnav-drop a:hover{color:var(--ink)}
.hdr:not(.solid) .mnav-drop-in{text-shadow:none}

/* ============================================================
   SIGNATURE BLOCKS  (added 1 Sep 2026)
   One vocabulary, so each inner page can wear a different
   treatment without the set drifting apart. Demo 1 tokens only.
   ============================================================ */

/* ---------- silver: the shared metal for icons and chips ---------- */
:root{
  --metal:linear-gradient(145deg,#FFFFFF 0%,#E3E2DF 38%,#C8C7C4 62%,#F2F1EF 100%);
  --metal-hi:linear-gradient(145deg,#FFFFFF 0%,#EDECEA 40%,#D5D4D1 66%,#FFFFFF 100%);
}
.ico-metal{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--metal);
  border:1px solid rgba(255,255,255,.75);color:var(--ink);flex:none;
  box-shadow:0 1px 2px rgba(58,58,56,.16),0 10px 22px -12px rgba(58,58,56,.42),
             inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),background .42s var(--ease)}
.ico-metal svg{width:18px;height:18px;fill:currentColor;position:relative;z-index:1}
.ico-metal::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.85),transparent 42%);opacity:.9}
.ico-metal:hover{transform:translateY(-3px);background:var(--metal-hi);
  box-shadow:0 2px 4px rgba(58,58,56,.16),0 18px 34px -14px rgba(58,58,56,.5),
             inset 0 1px 0 rgba(255,255,255,.95)}
@media(pointer:coarse){.ico-metal{width:48px;height:48px}}

/* ---------- floating rail (had NO css at all before) ---------- */
.rail{position:fixed;right:20px;bottom:calc(22px + var(--bar-h));z-index:900;
  display:flex;flex-direction:column;gap:12px}
.rail .ico{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;background:var(--metal);
  border:1px solid rgba(255,255,255,.75);color:var(--ink);
  box-shadow:0 1px 2px rgba(58,58,56,.16),0 12px 26px -12px rgba(58,58,56,.45),
             inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),background .42s var(--ease)}
.rail .ico svg{width:19px;height:19px;fill:currentColor}
.rail .ico:hover{transform:translateY(-3px) scale(1.04);background:var(--metal-hi)}
@media(max-width:1080px),(pointer:coarse){
  .rail{right:10px;bottom:calc(14px + var(--bar-h));gap:10px}
  .rail .ico{width:46px;height:46px}
}
@media(max-width:560px){.rail{flex-direction:row}}

/* back to top, matched to the rail */
.totop{background:var(--metal);border:1px solid rgba(255,255,255,.75);color:var(--ink);
  box-shadow:0 1px 2px rgba(58,58,56,.16),0 12px 26px -12px rgba(58,58,56,.45),
             inset 0 1px 0 rgba(255,255,255,.9)}
.totop:hover{background:var(--metal-hi);border-color:rgba(255,255,255,.85)}

/* ---------- footer: one type size, plus some life ---------- */
.ftr{position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.75),transparent 58%)}
.ftr .wrap{position:relative;z-index:1}
.ftr-brand p,.ftr address,.ftr-base,.ftr-base a,.ftr-base p,.ftr .links a,.ftr-note{
  font-size:14px;line-height:1.75}
.ftr address{margin-top:14px}
.foot-col h3{position:relative;padding-bottom:12px}
.foot-col h3::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:1.5px;
  background:linear-gradient(90deg,var(--logo),transparent)}
/* underline draw on footer links, matching demo 1's footer behaviour */
.ftr .links a{position:relative}
.ftr .links a::after{content:"";position:absolute;left:0;bottom:7px;height:1px;width:0;
  background:var(--logo);transition:width .38s var(--ease)}
.ftr .links a:hover::after{width:100%}
.ftr-icons{display:flex;align-items:center;gap:12px;margin-top:22px}
.ftr-social{display:flex;align-items:center;gap:12px;margin-top:20px}
.ftr-base{align-items:center}
.ftr-score{display:inline-flex;align-items:center;gap:9px}
.ftr-score b{font-weight:600;color:var(--ink)}

/* ---------- freeze scroll: sticky column beside a scrolling one ----------
   The grid item cannot stick inside itself, so the sticky element is a CHILD
   of the column and the column gets align-self:start. No ancestor may set a
   non-visible overflow or the stick silently dies. */
.pinsec{position:relative}
/* The COLUMN must stretch to the full row height or the sticky child has no
   travel and silently never sticks. Only the inner element sticks. */
.pin-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px);align-items:stretch}
@media(min-width:1000px){.pin-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(44px,5vw,96px)}}
.pin-side{align-self:stretch}
@media(min-width:1000px){
  .pin-inner{position:sticky;top:calc(var(--hdr-h) + 46px)}
}
.pin-steps{display:grid;gap:clamp(18px,2.4vw,30px)}
.pin-step{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);
  align-items:start;padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--silver)}
.pin-step:last-child{border-bottom:1px solid var(--silver)}
.pin-n{font-family:var(--serif,"Cormorant Garamond",Georgia,serif);font-size:clamp(1.5rem,2.4vw,2.1rem);
  color:var(--slate);line-height:1;font-variant-numeric:lining-nums;min-width:2.4ch}
.pin-step h3{font-size:clamp(1.15rem,1.7vw,1.42rem);font-weight:400;color:var(--ink);margin:0 0 8px}
.pin-step p{color:var(--slate);margin:0;max-width:56ch}
.pin-prog{margin-top:26px;height:2px;background:var(--silver);position:relative;overflow:hidden;border-radius:2px}
.pin-prog i{position:absolute;inset:0 auto 0 0;width:var(--pp,0%);background:var(--logo);
  transition:width .25s linear}

/* ---------- alternating image / copy rows ---------- */
.altrows{display:grid;gap:clamp(64px,8vw,132px)}
.altrow{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,54px);align-items:center}
@media(min-width:900px){
  .altrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,88px)}
  .altrow.flip .altrow-media{order:2}
  .altrow.flip .altrow-copy{order:1}
}
.altrow-media{position:relative;overflow:hidden;border-radius:2px;background:var(--mist)}
.altrow-media picture,.altrow-media img{display:block;width:100%;height:100%;
  aspect-ratio:4/3;object-fit:cover;transition:transform 1.3s var(--ease)}
.altrow:hover .altrow-media img{transform:scale(1.045)}
.altrow-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 46%)}
.altrow-n{position:absolute;left:18px;top:14px;z-index:2;color:#fff;font-size:12px;
  letter-spacing:.18em;text-shadow:0 1px 12px rgba(58,58,56,.6)}
.altrow-copy .eyebrow{margin-bottom:14px}
.altrow-copy h2{font-size:clamp(1.85rem,3.4vw,2.85rem);font-weight:300;color:var(--ink);
  letter-spacing:-.012em;line-height:1.08;margin:0 0 16px}
.altrow-copy p{color:var(--slate);max-width:54ch;margin:0 0 14px}
.altrow-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;padding:0;list-style:none}
.altrow-chips li{font-size:12px;letter-spacing:.04em;color:var(--slate);
  border:1px solid var(--silver);border-radius:100px;padding:7px 13px;background:rgba(255,255,255,.55)}
.altrow-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--silver);transition:gap .34s var(--ease),border-color .34s var(--ease)}
.altrow-link:hover{gap:15px;border-color:var(--ink)}

/* ---------- rolling marquee of place names ---------- */
.rollwrap{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.rolltrack{display:flex;width:max-content;animation:rollx 64s linear infinite}
.rollwrap:hover .rolltrack{animation-play-state:paused}
/* a second band on the same page must not run in lockstep with the first */
.sec-paper2 .rolltrack{animation-duration:82s;animation-direction:reverse}
@keyframes rollx{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rollitem{display:inline-flex;align-items:center;gap:14px;margin-right:34px;
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--slate);white-space:nowrap;font-weight:300}
.rollitem::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--silver);flex:none}
.rollitem a{color:inherit;transition:color .3s}
.rollitem a:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rolltrack{animation:none}}

/* ---------- category tabs + carousel (our work) ---------- */
/* One row that scrolls, never a wrapped 5+2 orphan row. Fades at both edges so
   the overflow reads as intentional rather than clipped. */
.cattabs{display:flex;flex-wrap:nowrap;gap:10px;margin-top:40px;justify-content:flex-start;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 2px 10px;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.cattabs::-webkit-scrollbar{display:none}
.cattab{scroll-snap-align:start;flex:0 0 auto}
@media(min-width:1500px){.cattabs{justify-content:center;-webkit-mask-image:none;mask-image:none}}
.cattab{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;
  border:1px solid var(--silver);border-radius:100px;background:rgba(255,255,255,.6);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
  cursor:pointer;transition:all .34s var(--ease)}
.cattab svg{width:17px;height:17px;fill:currentColor;flex:none;opacity:.8}
.cattab:hover{border-color:var(--logo);color:var(--ink)}
.cattab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cattab[aria-selected="true"] svg{opacity:1}
.catpanel{margin-top:clamp(30px,4vw,52px)}
.catpanel[hidden]{display:none}
.carou{position:relative}
.carou-view{overflow:hidden;border-radius:2px;background:var(--mist)}
.carou-track{display:flex;transition:transform .72s var(--ease)}
.carou-slide{flex:0 0 100%;position:relative}
.carou-slide picture,.carou-slide img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.carou-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 26px 22px;color:#fff;
  font-size:14px;letter-spacing:.02em;
  background:linear-gradient(0deg,rgba(58,58,56,.78),transparent)}
.carou-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}
.carou-btns{display:flex;gap:10px}
.carou-b{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--metal);border:1px solid rgba(255,255,255,.75);color:var(--ink);
  box-shadow:0 1px 2px rgba(58,58,56,.14),0 10px 20px -12px rgba(58,58,56,.4),
             inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;transition:transform .34s var(--ease),background .34s var(--ease)}
.carou-b svg{width:16px;height:16px;fill:currentColor}
.carou-b:hover{transform:translateY(-2px);background:var(--metal-hi)}
.carou-b[disabled]{opacity:.4;cursor:default;transform:none}
.carou-count{font-size:12px;letter-spacing:.16em;color:var(--slate);
  font-variant-numeric:lining-nums;text-transform:uppercase}
/* Segmented indicator, not dots: each segment carries its own 44px-tall hit area
   that tiles rather than overlaps, so a neighbour can never steal the tap. */
/* Segment 26px + gap 18px = a 44px pitch, so each ::after hit area is exactly
   44px wide and they TILE rather than overlap (an overlap lets the later sibling
   steal the tap). Below 560px there is no room for that pitch, so the indicator
   steps aside and swipe plus the 46px arrows carry the interaction. */
.carou-dots{display:flex;gap:18px;align-items:center}
.carou-dot{width:26px;height:3px;border-radius:2px;background:var(--silver);border:0;
  cursor:pointer;position:relative;padding:0;
  transition:background .35s var(--ease),transform .35s var(--ease)}
.carou-dot::after{content:"";position:absolute;left:-9px;right:-9px;top:-20.5px;bottom:-20.5px}
.carou-dot[aria-current="true"]{background:var(--ink);transform:scaleY(1.9)}
.carou-dot:hover{background:var(--logo)}
.carou-nav{flex-wrap:wrap}
@media(max-width:559px){.carou-dots{display:none}}

/* .foot-col a sets width:fit-content and display:block, which squashed the icon
   discs to 20px. Win on specificity inside the footer rather than reordering. */
.ftr .ftr-icons{gap:12px;flex-wrap:wrap}
.ftr .ftr-icons .ico-metal,.ftr .ico-metal{
  display:inline-flex !important;width:46px !important;height:46px !important;
  min-height:46px;padding:0 !important;border-radius:50%;flex:0 0 auto}
.ftr .ftr-icons .ico-metal::after{display:block}
.ftr .ftr-icons .ico-metal::before{display:none}
/* standalone footer links need a real target, not just their text box */
.ftr-base a{display:inline-flex;align-items:center;min-height:44px}
@media(pointer:coarse){.ftr-base a{min-height:46px}}

/* ---------- scrolling thumbnail rail ---------- */
.railwrap{position:relative;margin-top:clamp(26px,3.4vw,44px)}
.thumbrail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  padding:4px 2px 14px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.thumbrail::-webkit-scrollbar{display:none}
.thumbrail:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.thumb{flex:0 0 auto;width:clamp(190px,22vw,276px);scroll-snap-align:start;position:relative;
  border:0;padding:0;margin:0;background:var(--mist);border-radius:2px;overflow:hidden;
  cursor:pointer;display:block;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* height:auto is required or the width/height ATTRIBUTES win and aspect-ratio
   is ignored, which renders the tile at the photograph's own proportions. */
.thumb picture{display:block}
.thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.thumb:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(58,58,56,.55)}
.thumb:hover img{transform:scale(1.06)}
.thumb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.thumb-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;
  font-size:12px;letter-spacing:.02em;text-align:left;line-height:1.35;
  background:linear-gradient(0deg,rgba(58,58,56,.82),transparent)}
.thumb-zoom{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--metal);
  border:1px solid rgba(255,255,255,.75);opacity:0;transform:scale(.85);
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.thumb-zoom svg{width:15px;height:15px;fill:var(--ink)}
.thumb:hover .thumb-zoom,.thumb:focus-visible .thumb-zoom{opacity:1;transform:none}
@media(pointer:coarse){.thumb-zoom{opacity:1;transform:none}}
.rail-b{position:absolute;top:calc(50% - 24px);z-index:3;width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--metal);border:1px solid rgba(255,255,255,.8);color:var(--ink);
  box-shadow:0 2px 5px rgba(58,58,56,.18),0 14px 28px -12px rgba(58,58,56,.5),
             inset 0 1px 0 rgba(255,255,255,.9);
  transition:opacity .3s,transform .3s var(--ease),background .3s}
.rail-b svg{width:16px;height:16px;fill:currentColor}
.rail-b:hover{background:var(--metal-hi);transform:scale(1.06)}
.rail-prev{left:-10px}.rail-next{right:-10px}
.rail-b[disabled]{opacity:0;pointer-events:none}
@media(max-width:900px){.rail-prev,.rail-next{display:none}}
.rail-hint{margin-top:12px;font-size:12.5px;letter-spacing:.04em;color:var(--slate)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);background:rgba(28,28,27,.90);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .38s var(--ease)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-fig{margin:0;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:14px;transform:scale(.965);transition:transform .45s var(--ease)}
.lb.open .lb-fig{transform:none}
/* never scaled beyond its own pixels, which is what made the big slides look soft */
.lb-fig img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lb-fig figcaption{color:rgba(255,255,255,.86);font-size:13.5px;letter-spacing:.03em;text-align:center}
.lb-x{position:absolute;top:14px;right:16px;width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--metal);border:1px solid rgba(255,255,255,.8);color:var(--ink);
  font-size:26px;line-height:1;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
.lb-x:hover{background:var(--metal-hi)}
.lb-nav{position:absolute;top:calc(50% - 26px);width:52px;height:52px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--metal);border:1px solid rgba(255,255,255,.8);color:var(--ink);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7);transition:transform .3s var(--ease),background .3s}
.lb-nav svg{width:18px;height:18px;fill:currentColor}
.lb-nav:hover{background:var(--metal-hi);transform:scale(1.06)}
.lb-prev{left:clamp(10px,2.4vw,32px)}.lb-next{right:clamp(10px,2.4vw,32px)}
.lb-nav[disabled]{opacity:.32;pointer-events:none}
@media(prefers-reduced-motion:reduce){.lb,.lb-fig{transition:none}}

/* ---------- costs and considerations grid ---------- */
.pricegrid{display:grid;grid-template-columns:1fr;gap:0;margin-top:38px}
@media(min-width:760px){.pricegrid{grid-template-columns:repeat(2,1fr);
  column-gap:clamp(30px,4vw,64px);row-gap:0}}
.pricecell{padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--silver)}
@media(min-width:760px){
  .pricecell:nth-child(-n+2){border-top:1px solid var(--silver)}
  .pricecell{position:relative}
  .pricecell:nth-child(2n)::before{content:"";position:absolute;left:calc(-1 * clamp(15px,2vw,32px));
    top:0;bottom:0;width:1px;background:var(--silver)}
}
.pricecell h3{font-family:var(--serif,"Cormorant Garamond",serif);font-weight:500;
  font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--ink);margin:0 0 10px;line-height:1.2}
.pricecell p{color:var(--slate);margin:0;max-width:48ch;font-size:1rem;line-height:1.7}
.pricecell::after{content:"";display:block;height:1.5px;width:0;margin-top:16px;
  background:linear-gradient(90deg,var(--logo),transparent);
  transition:width .8s var(--ease-cine) calc(.1s + var(--i,0) * .08s)}
.rv.in.pricecell::after{width:34px}
html.no-reveal .pricecell::after{width:34px}
.js .rv.pricecell{transition-delay:calc(var(--i,0) * .07s)}
@media(prefers-reduced-motion:reduce){
  .pricecell::after{transition:none;width:34px}.js .rv.pricecell{transition-delay:0s}}

/* inline-flex (for the tap target) drops the whitespace text nodes inside the link,
   which ran "Checkatrade9.98out of 10" together */
.ftr-base a{gap:.32em}
/* The footer carries only the social icons now, so the rail no longer duplicates
   anything and stays put. At the foot of a long page is when back to the top is wanted. */
/* phones show only the first sentence of the hero copy; balance its 3-4 lines so
   the last one is never a two-word orphan */
@media(max-width:700px){.hero-sub{text-wrap:balance}}

/* ---------- enquiry form: security code and messages ---------- */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
.cap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.cap-row img{display:block;width:120px;height:40px;border:1px solid var(--silver);
  border-radius:2px;background:#fff;flex:none}
.cap-row input{flex:1 1 120px;min-width:110px}
.cap-new{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--silver);
  border-radius:2px;background:rgba(255,255,255,.6);color:var(--slate);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.cap-new:hover{border-color:var(--ink);color:var(--ink)}
.fmsg{margin:14px 0 0;font-size:14px;line-height:1.5}
.fmsg:empty,.fmsg.is-none{display:none}
.fmsg.is-good{color:var(--ink)}
.fmsg.is-bad{color:#8C4A4A}
.contact-form .cap{margin-top:4px}
.contact-form .cap>label,.q .cap>label{display:block;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}

/* footer social discs: same silver treatment as the contact icons. The generic
   .foot-col a rules set width:fit-content and display:block, so win on specificity. */
.ftr .ftr-social a{display:inline-flex!important;align-items:center;justify-content:center;
  width:44px!important;height:44px!important;min-height:44px;padding:0!important;border-radius:50%;
  background:var(--metal);border:1px solid rgba(255,255,255,.75);color:var(--ink);flex:0 0 auto;
  box-shadow:0 1px 2px rgba(58,58,56,.14),0 8px 18px -10px rgba(58,58,56,.4),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .4s var(--ease),background .4s var(--ease)}
.ftr .ftr-social a svg{width:17px;height:17px;fill:currentColor}
.ftr .ftr-social a:hover{transform:translateY(-3px);background:var(--metal-hi)}
.ftr .ftr-social a::after,.ftr .ftr-social a::before{display:none}
@media(pointer:coarse){.ftr .ftr-social a{width:46px!important;height:46px!important}}

/* ---------- hub links to a town's deeper pages ----------
   Hairline-separated panels, not chips, matching .rulegrid's rule language.
   Used on the town page and on the two deeper pages so the set reads the same
   wherever you meet it. */
.kidgrid{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:0;row-gap:0;margin-top:34px;
  border-top:1px solid var(--silver);border-bottom:1px solid var(--silver)}
.kid{display:block;position:relative;text-decoration:none;color:inherit;
  padding:clamp(24px,2.6vw,38px) clamp(20px,2.2vw,34px);
  border-left:1px solid var(--silver);
  transition:background .45s var(--ease-cine)}
.kid:first-child{border-left:0}
.kid:hover,.kid:focus-visible{background:var(--pearl)}
.kid-n{display:block;font-family:var(--f-sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.kid h3{font-family:var(--f-serif);font-weight:300;line-height:1.14;
  font-size:clamp(1.3rem,1.9vw,1.75rem);margin:0 0 10px;color:var(--ink)}
.kid p{margin:0;color:var(--slate);font-size:.96rem;line-height:1.65;max-width:42ch}
.kid-go{display:inline-block;margin-top:16px;color:var(--logo);font-size:1.1rem;
  transition:transform .45s var(--ease-cine)}
.kid:hover .kid-go,.kid:focus-visible .kid-go{transform:translateX(6px);color:var(--ink)}
@media(max-width:760px){
  .kidgrid{grid-template-columns:1fr}
  .kid{border-left:0;border-top:1px solid var(--silver)}
  .kid:first-child{border-top:0}
}

/* ---------- site map lists ----------
   Hairline rows in columns, level bottoms, no bubbles. */
.sm-list{list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,2.4vw,40px);
  border-top:1px solid var(--silver)}
.sm-list li{border-bottom:1px solid var(--line-2)}
.sm-list a{display:block;padding:14px 2px;min-height:44px;text-decoration:none;color:var(--ink);
  font-size:.98rem;transition:color .35s var(--ease-cine),padding-left .35s var(--ease-cine)}
.sm-list a:hover,.sm-list a:focus-visible{color:var(--logo);padding-left:8px}
@media(max-width:860px){.sm-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sm-list{grid-template-columns:1fr}}

/* ---------- the client's own Elfsight widgets ----------
   A third-party widget brings its own type and spacing, so it is given a plain
   container and left alone rather than restyled from the outside. */
.elfwrap{margin-top:34px}
.elfwrap > div{min-height:120px}

/* the Site Map link in the footer base row: same weight as the line it sits in */
.ftr-sm{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2);
  padding-bottom:1px;transition:border-color .35s var(--ease-cine),color .35s var(--ease-cine)}
.ftr-sm:hover,.ftr-sm:focus-visible{color:var(--ink);border-bottom-color:currentColor}

/* the Find Us map: a plain framed block, no rounded corners, matching the section rhythm */
.mapwrap{margin-top:34px;border:1px solid var(--silver);background:var(--pearl);line-height:0}
.mapwrap iframe{display:block;width:100%;height:420px;border:0}
@media(max-width:700px){.mapwrap iframe{height:320px}}