/* ============================================================
   Surrey Stone & Resin Driveways . site design system
   Palette from the client's brand sheet (20 Aug 2026): deep forest #0A1A12,
   forest mid #14301F, brand gold #C69F5A, light gold #E6C482, deep gold #B69251.
   ============================================================ */
:root{
  --gold:#C69F5A; --gold-2:#E6C482; --gold-antique:#B69251; --gold-deep:#8C6E3A;
  --tick-h:52px;
  --gold-text:#7E6231;  /* small gold text on light: 5.7:1 on white, 5.1:1 on cream */
  --gold-grad:linear-gradient(135deg,#8C6E3A 0%,#E6C482 38%,#C69F5A 62%,#B69251 100%);
  --ink:#0A1A12; --ink-2:#061009; --ink-soft:#14301F;
  --paper:#FFFFFF; --paper-2:#F4F2EC; --paper-3:#E9E5DC;
  --muted:#5b5e66; --muted-2:#8a8d95;
  --line:rgba(20,22,28,.24); --line-2:rgba(20,22,28,.08);
  --line-light:rgba(255,255,255,.14); --line-light-2:rgba(255,255,255,.08);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-cine:cubic-bezier(.19,1,.22,1);
  --pad:clamp(22px,5vw,90px);
  --maxw:1300px;
  --hdr-h:118px;
  --topbar-h:40px;
}
*{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;overflow-x:hidden;
}
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}
::selection{background:var(--gold);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.lining{font-variant-numeric:lining-nums tabular-nums}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-text);display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:30px;height:1.5px;background:var(--gold-text);display:inline-block;flex:none}
.eyebrow.plain::before{display:none}
.eyebrow.on-dark{color:var(--gold)}.eyebrow.on-dark::before{background:var(--gold)}
.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;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-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--ink);color:var(--gold);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.45)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.4px var(--gold);color:var(--gold)}
.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)}

/* ---------- header ---------- */
/* ---- top contact bar (above the menu) ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:1001;height:var(--topbar-h);background:var(--ink-2);
  display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}
.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;gap:8px;color:rgba(255,255,255,.82);font-size:13px;font-weight:500;letter-spacing:.01em;transition:color .3s;white-space:nowrap}
.topbar a:hover{color:var(--gold)}
.topbar svg{width:14px;height:14px;fill:var(--gold);flex:none}
.tb-phones{display:flex;align-items:center;gap:24px;margin-right:44px}

.hdr{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1000;transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);padding:20px 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;height:52px;flex:none;position:relative}
.hdr .brand img{height:78px;width:auto;transition:opacity .4s var(--ease)}
.hdr .logo-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.hdr.solid .logo-light{opacity:0}.hdr.solid .logo-dark{opacity:1}
.hdr nav.desk{display:flex;align-items:center;gap:32px}
.hdr nav.desk a{font-size:14px;font-weight:500;color:rgba(255,255,255,.92);position:relative;padding:6px 0;transition:color .3s}
.hdr nav.desk a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.hdr nav.desk a:hover::after,.hdr nav.desk a.current::after{width:100%}
.hdr.solid nav.desk a{color:var(--ink)}
.hdr-right{display:flex;align-items:center;gap:26px}
.hdr-phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:#fff;transition:color .3s;white-space:nowrap}
.hdr.solid .hdr-phone{color:var(--ink)}
.hdr-phone svg{width:15px;height:15px;fill:var(--gold);flex:none}

/* ---- desktop Services dropdown ---- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop>a{display:inline-flex;align-items:center;gap:7px}
.nd-caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .35s var(--ease);opacity:.75}
.nav-drop:hover .nd-caret{transform:rotate(-135deg) translateY(2px)}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease)}
.nav-drop:hover .drop{opacity:1;visibility:visible;pointer-events:auto}
.drop-card{background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:3px;box-shadow:0 24px 54px -14px rgba(10,26,18,.34);padding:10px;min-width:270px;transform:translateY(8px);transition:transform .3s var(--ease)}
.nav-drop:hover .drop-card{transform:translateY(0)}
.drop-card a{display:flex;align-items:center;gap:10px;border-radius:2px;white-space:nowrap;transition:background .25s var(--ease),color .25s}
.drop-card a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-antique);flex:none;opacity:.5;transition:.25s var(--ease)}
.drop-card a:hover::before{opacity:1;transform:scale(1.35)}
.hdr nav.desk .drop-card a,.hdr.solid nav.desk .drop-card a{color:var(--ink);font-size:13.5px;font-weight:500;padding:9px 14px}
.hdr nav.desk .drop-card a::after{display:none}
.hdr nav.desk .drop-card a:hover{background:var(--paper);color:var(--gold-antique)}
.hdr nav.desk .drop-card .drop-all{margin-top:6px;border-top:1px solid var(--line);border-radius:0;color:var(--gold-antique);font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.drop-card .drop-all::before{display:none}

/* ---- trust ticker under banner ---- */
.tick{background:var(--ink-2);border-top:1px solid rgba(198,159,90,.24);border-bottom:1px solid rgba(198,159,90,.24)}
.tick-vp{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tick-track{display:inline-flex;align-items:center;white-space:nowrap;width:max-content;animation:tickmove 42s 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 32px;color:rgba(255,255,255,.82);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.tick-item svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick-track{animation:none}}
.hdr.solid{background:rgba(251,250,247,.94);backdrop-filter:saturate(140%) blur(12px);box-shadow:0 1px 0 var(--line);padding:12px 0}
.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;z-index:1200}
.burger span{width:24px;height:2px;background:#fff;display:block;transition:.35s var(--ease)}
.hdr.solid .burger span{background:var(--ink)}
body.nav-open .burger span{background:#fff}
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)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:1100;background:var(--ink-2);display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--topbar-h) + var(--hdr-h) + 18px) var(--pad) 40px;
  transform:translateX(100%);transition:transform .55s var(--ease);visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
.drawer .drawer-foot{margin-top:auto}
body.nav-open .drawer{transform:none;visibility:visible}
/* .burger lives inside .hdr, which is its own stacking context at z-index:1000, so the
   burger's own z-index:1200 could not lift it above the drawer (z-index:1100) . the open
   drawer covered the close button and trapped the user. Lift the whole header instead. */
body.nav-open .hdr{z-index:1200}
.drawer .dl{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(1.55rem,6.4vw,2.2rem);color:#fff;padding:8px 0;
  border-bottom:1px solid var(--line-light-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}
.drawer .dl .n{font-family:"Inter";font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.1em}
.drawer .dl:hover{color:var(--gold)}
body.nav-open .drawer .dl{opacity:1;transform:none}
/* Services accordion in drawer */
.dl-acc{display:block}
.dl-acc summary.dl{list-style:none;cursor:pointer;justify-content:flex-start}
.dl-acc summary.dl::-webkit-details-marker{display:none}
.dl-chev{margin-left:auto;align-self:center;width:11px;height:11px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .35s var(--ease)}
.dl-acc[open] .dl-chev{transform:rotate(-135deg)}
.dl-sub{display:grid;grid-template-columns:1fr;gap:0;padding:0 2px 0 30px;
  max-height:0;opacity:0;overflow:hidden;border-bottom:0 solid var(--line-light-2);
  transition:max-height .5s var(--ease),opacity .32s var(--ease),padding .5s var(--ease)}
.dl-acc[open] .dl-sub{max-height:520px;opacity:1;padding-top:10px;padding-bottom:16px;
  border-bottom-width:1px}
.dl-sub a{transform:translateY(-6px);transition:color .3s,transform .45s var(--ease),opacity .45s var(--ease);opacity:0}
.dl-acc[open] .dl-sub a{transform:none;opacity:1}
.dl-acc[open] .dl-sub a:nth-child(1){transition-delay:.06s}
.dl-acc[open] .dl-sub a:nth-child(2){transition-delay:.10s}
.dl-acc[open] .dl-sub a:nth-child(3){transition-delay:.14s}
.dl-acc[open] .dl-sub a:nth-child(4){transition-delay:.18s}
.dl-acc[open] .dl-sub a:nth-child(5){transition-delay:.22s}
.dl-acc[open] .dl-sub a:nth-child(6){transition-delay:.26s}
.dl-acc[open] .dl-sub a:nth-child(7){transition-delay:.30s}
.dl-sub a{color:rgba(255,255,255,.72);font-size:14.5px;font-weight:500;padding:9px 0;display:block}
.dl-sub a:hover{color:var(--gold)}
.drawer-foot{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.drawer-foot a.dphone{color:var(--gold);font-weight:600;font-size:16px}

/* 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(--gold-antique),var(--gold));box-shadow:0 0 12px rgba(198,159,90,.5)}

/* ============================================================
   HERO . cinematic dark banner (Demo 1 delicacy)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-2);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:112%;object-fit:cover;object-position:center;transform-origin:50% 74%;will-change:transform;
  animation:kenburns 42s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.10)}}
/* homepage banner: much stronger cinematic zoom (inner-page heroes stay gentle) */
.hero:not(.hero-inner-page) .hero-media img{animation:heroZoom 15s linear infinite alternate}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(var(--hz,1.82))}}
/* the hero source is 2752px wide. Past ~1700px viewport a 1.82 peak would stretch it
   beyond its natural width, so ease the peak back on big monitors to keep it sharp. */
@media (min-width:1600px){.hero{--hz:1.52}}
@media (min-width:2300px){.hero{--hz:1.32}}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none;transform:scale(1.04)}}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,15,.72) 0%,rgba(10,11,15,.35) 32%,rgba(10,11,15,.55) 68%,rgba(10,11,15,.92) 100%),
  linear-gradient(90deg,rgba(10,11,15,.65),transparent 62%)}
.hero-spot{position:absolute;z-index:2;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(198,159,90,.09) 0%,rgba(198,159,90,.035) 32%,rgba(198,159,90,0) 66%);mix-blend-mode:screen;
  transition:opacity .8s var(--ease);will-change:transform}
.hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,9vh,110px);padding-top:calc(var(--topbar-h) + var(--hdr-h) + 20px)}
.hero .eyebrow{margin-bottom:24px}
.hero h1{color:#fff;font-size:clamp(2.9rem,7.3vw,6.4rem);font-weight:300;letter-spacing:-.018em;max-width:16ch}
.hero h1 .em{font-style:italic;color:var(--gold);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,.82);font-size:clamp(16px,1.7vw,19.5px);line-height:1.66;max-width:56ch;margin-top:28px}
.hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}
.hero-trust{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px 30px;padding-top:26px;border-top:1px solid var(--line-light-2)}
.hero-trust .ti{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.78);font-size:13.5px;font-weight:500}
.hero-trust .ti .d{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hero-scroll{position:absolute;left:var(--pad);bottom:26px;z-index:3;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.hero-scroll .l{width:34px;height:1px;background:var(--gold);animation:scrollpulse 2.4s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}
/* hero entrance stagger */
.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}

/* inner-page hero (shorter banner) */
.hero.hero-inner-page{min-height:62vh}
.hero.hero-inner-page .hero-media img{animation-duration:60s}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(255,255,255,.6);font-size:12.5px;font-weight:500;margin-bottom:20px}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{opacity:.5}
.hero.hero-inner-page h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:20ch}

/* ============================================================
   SECTIONS (light . Demo 3 layouts restyled)
   ============================================================ */
.sec{padding:clamp(70px,9vw,120px) 0;position:relative}
.sec-paper{background:var(--paper)}
.sec-paper2{background:var(--paper-2)}
.sec-ink{background:var(--ink);color:#fff}
.sec-ink h1,.sec-ink h2,.sec-ink h3{color:#fff}
.sec-head{max-width:760px}
.sec h2{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(--gold-deep)}
.sec-ink h2 .em{color:var(--gold)}
.sec p.lead{color:var(--muted);font-size:17px;line-height:1.68;margin-top:18px;max-width:60ch}
.sec-ink p.lead{color:rgba(255,255,255,.74)}
.gold-rule{width:60px;height:2px;background:var(--gold);margin:22px 0 0}

/* two-col intro (about) */
.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(--gold);font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.15rem;line-height:1.5;color:var(--ink-soft)}
.intro-media{position:relative}
.intro-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;max-height:520px}
.intro-media .tag{position:absolute;left:0;bottom:-1px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 18px;font-weight:600}
.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:12px;white-space:nowrap}
.stat .n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(1.95rem,3vw,2.5rem);color:var(--gold-antique);line-height:1}
.stat .l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* intro column: stack stats vertically with aligned labels for a tidy, even column */
.intro-copy .stats{flex-direction:column;gap:16px;align-items:flex-start}
.intro-copy .stat .n{min-width:92px}

/* 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(--muted);font-size:15.5px;line-height:1.6}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc-card{background:var(--paper);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% 76%;transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:saturate(1.02)}
.svc-card:hover .svc-imgwrap img{transform:scale(1.07)}
.svc-imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,26,18,.86) 2%,rgba(10,26,18,.1) 46%,transparent 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:var(--gold);font-size:.95rem;display:block;margin-bottom:6px}
.svc-body h3{color:#fff;font-size:1.42rem;font-weight:400}
.svc-body p{color:rgba(255,255,255,.82);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:120px;opacity:1}
.svc-body .go{margin-top:12px;font-size:12px;letter-spacing:.06em;color:var(--gold);font-weight:600;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease) .05s,transform .45s var(--ease) .05s}
.svc-card:hover .svc-body .go{opacity:1;transform:none}
/* touch devices have no hover, so the card copy would never appear at all */
@media (hover:none),(pointer:coarse){
  .svc-body p{max-height:220px;opacity:1}
  .svc-body .go{opacity:1;transform:none}
}

/* "and more" trades band */
.trades{margin-top:26px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;padding:26px 30px;
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:baseline}
.trades .lb{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--gold-antique);font-size:1.15rem;flex:none}
.trades p{color:var(--muted);font-size:16px;line-height:1.6}
.trades a{color:var(--ink);border-bottom:1px solid var(--gold);font-weight:500}

/* stats band (dark accent) */
.band{background:var(--ink-2);color:#fff;border-top:2px solid var(--gold)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;padding:clamp(48px,6vw,74px) 0}
.band-item .num{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(2.6rem,5vw,3.8rem);color:var(--gold);line-height:1}
.band-item .lbl{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.4;margin-top:12px}

/* why-choose grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
.why-cell{background:var(--paper);padding:42px 36px;transition:background .5s var(--ease)}
.why-cell:hover{background:var(--paper-2)}
.why-cell .wn{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--gold-antique);font-size:.95rem}
.why-cell h3{font-size:1.4rem;font-weight:400;margin:16px 0 11px}
.why-cell p{color:var(--muted);font-size:14.5px;line-height:1.6}
.why-cell .bar{width:0;height:2px;background:var(--gold);margin-top:18px;transition:width .55s var(--ease)}
.why-cell:hover .bar{width:44px}

/* gallery mosaic . clean 4-col tiling (2x2 + 2x1 + 1x1 + 1x1 + 2x1 + 2x1) */
.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(--ink)}
.gal figure img{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;bottom:12px;color:#fff;font-size:12px;letter-spacing:.04em;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.gal figure:hover .gal-cap{opacity:1;transform:none}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 44%);opacity:0;transition:opacity .4s}
.gal figure:hover::after{opacity:1}

/* uniform gallery (6 even) */
.gal-even{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.gal-even figure{margin:0;overflow:hidden;position:relative;border-radius:2px;aspect-ratio:4/3;background:var(--ink)}
.gal-even img{width:100%;height:118%;position:relative;top:-9%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal-even figure:hover img{transform:scale(1.06)}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:52px}
.tcard{padding-top:26px;border-top:1px solid var(--line)}
.tcard .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:16px}
.tcard blockquote{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-style:italic;font-size:1.12rem;line-height:1.55;color:var(--ink-soft)}
.tcard .who{margin-top:20px;font-weight:600;font-size:14px}
.tcard .who small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:3px;font-style:normal}
.sec-ink .tcard{border-color:var(--line-light-2)}
.sec-ink .tcard blockquote{color:#fff}
.sec-ink .tcard .who small{color:rgba(255,255,255,.6)}

/* ---- auto-scrolling 5-star reviews ---- */
.rev-viewport{overflow:hidden;margin-top:50px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rev-track{display:flex;align-items:stretch;width:max-content;animation:revscroll 150s linear infinite;will-change:transform}
.rev-viewport:hover .rev-track{animation-play-state:paused}
/* track holds 3 identical copies; shifting by exactly one third loops seamlessly with no gap,
   and the track stays far wider than any viewport so empty space is never exposed */
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rev-card{flex:0 0 clamp(280px,84vw,400px);margin-right:26px;display:flex;flex-direction:column;padding:30px 32px;border:1px solid var(--line-light-2);
  border-top:2px solid var(--gold);border-radius:3px;background:rgba(255,255,255,.035)}
.rev-card .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:16px}
.rev-card blockquote{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-style:italic;font-size:1.06rem;line-height:1.56;color:#fff;flex:1 0 auto}
.rev-card .who{margin-top:22px;font-weight:600;font-size:14px;color:#fff}
.rev-card .who small{display:block;color:rgba(255,255,255,.6);font-weight:400;font-size:12.5px;margin-top:3px;font-style:normal}
@media (prefers-reduced-motion:reduce){.rev-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding:0 var(--pad)}}

/* areas */
.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
.area-tag{border:1px solid var(--line);border-radius:2px;padding:18px 22px;display:flex;align-items:center;gap:12px;
  font-weight:500;font-size:15.5px;transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.area-tag .dot{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none;transition:transform .4s var(--ease)}
.area-tag:hover{border-color:var(--gold);background:var(--paper-2);transform:translateY(-2px)}
.area-tag:hover .dot{transform:rotate(225deg)}

/* areas marquee */
.marquee{padding:clamp(46px,6vw,70px) 0;overflow:hidden;position:relative}
.marquee .mhead{max-width:var(--maxw);margin:0 auto 26px;padding:0 var(--pad)}
.mviewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:inline-flex;align-items:center;white-space:nowrap;width:max-content;animation:mmove 82s 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.7rem,3.4vw,2.9rem);padding:0 34px;letter-spacing:-.01em}
.msep{width:9px;height:9px;flex:none;border-radius:2px;transform:rotate(45deg);background:var(--gold-antique);display:inline-block}
@keyframes mmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CTA band */
.cta{background:var(--ink-2);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;transform:rotate(45deg);
  background:linear-gradient(135deg,rgba(198,159,90,.08),transparent 60%);pointer-events:none}
.cta-inner{padding:clamp(64px,8vw,110px) 0;position:relative;text-align:center;max-width:820px;margin:0 auto}
.cta h2{font-size:clamp(2.2rem,5vw,3.9rem)}
.cta h2 .em{font-style:italic;color:var(--gold)}
.cta p{color:rgba(255,255,255,.74);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:#fff;font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:9px}
.cta-phone svg{width:16px;height:16px;fill:var(--gold)}
.cta-phone small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}

/* ---------- process steps (numbered, connected) ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
.proc-cell{background:var(--paper);padding:34px 26px;position:relative;transition:background .5s var(--ease)}
.sec-paper2 .proc-cell{background:var(--paper-2)}
.proc-cell:hover{background:var(--ink);color:#fff}
.proc-cell .wn{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--gold-antique);font-size:1.6rem;display:block;margin-bottom:16px;transition:color .4s}
.proc-cell:hover .wn{color:var(--gold)}
.proc-cell h3{font-size:1.18rem;font-weight:400;margin-bottom:10px}
.proc-cell:hover h3{color:#fff}
.proc-cell p{color:var(--muted);font-size:13.6px;line-height:1.55;transition:color .4s}
.proc-cell:hover p{color:rgba(255,255,255,.78)}

/* ---------- related / area cards ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.rel-card{position:relative;overflow:hidden;border-radius:2px;display:block;background:var(--ink);aspect-ratio:3/2.4;isolation:isolate}
.rel-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.rel-card:hover img{transform:scale(1.07)}
.rel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,26,18,.9) 4%,rgba(10,26,18,.15) 48%,transparent 72%)}
.rel-body{position:absolute;left:0;bottom:0;z-index:2;padding:26px 24px}
.rel-body .svc-num{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--gold);font-size:.95rem;display:block;margin-bottom:6px}
.rel-body h3{color:#fff;font-size:1.5rem;font-weight:400}
.rel-body .go{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.06em;color:var(--gold);font-weight:600;
  opacity:.85;transform:translateX(0);transition:transform .4s var(--ease)}
.rel-card:hover .rel-body .go{transform:translateX(5px)}

/* ---------- FAQ accordion ---------- */
.faq-wrap{max-width:900px}
.faq{margin-top:14px}
.faq-item{border-top:1px solid var(--line);padding:4px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.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.24rem;color:var(--ink);transition:color .3s}
.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(--gold-antique),var(--gold-antique)) center/12px 2px no-repeat,
  linear-gradient(var(--gold-antique),var(--gold-antique)) center/2px 12px no-repeat;transition:transform .4s var(--ease)}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-item summary:hover{color:var(--gold-antique)}
.faq-a{overflow:hidden;padding:0 44px 4px 0}
.faq-a p{color:var(--muted);font-size:15.5px;line-height:1.66;padding-bottom:24px}
.faq-item[open] summary::after{background:linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) center/2px 12px no-repeat}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.contact-lines{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.cline{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line);border-radius:2px;
  background:var(--paper);transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.cline:hover{border-color:var(--gold);transform:translateX(4px);box-shadow:0 10px 26px rgba(0,0,0,.06)}
.cline svg{width:22px;height:22px;fill:var(--gold-antique);flex:none}
.cline span{display:flex;flex-direction:column;font-weight:600;font-size:15.5px;color:var(--ink);word-break:break-word}
.cline span small{font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.contact-meta{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:26px;border-top:1px solid var(--line)}
.contact-meta strong{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-antique);margin-bottom:8px}
.contact-meta p{color:var(--muted);font-size:14px;line-height:1.55}
.contact-form{background:var(--ink-2);color:#fff;padding:clamp(28px,4vw,44px);border-radius:3px;border-top:2px solid var(--gold)}
.contact-form h3{font-size:1.7rem;font-weight:300;margin-bottom:22px}
.contact-form label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.7);margin-bottom:16px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:8px;padding:13px 15px;background:rgba(255,255,255,.05);
  border:1px solid var(--line-light);border-radius:2px;color:#fff;font-family:inherit;font-size:16px;font-weight:400;
  letter-spacing:0;text-transform:none;transition:border-color .3s,background .3s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.08)}
.contact-form select option{background:var(--ink);color:#fff}
.contact-form textarea{resize:vertical}
.contact-form .btn{margin-top:6px}
.form-note{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.55);text-transform:none;letter-spacing:0;font-weight:400}

/* ---- homepage feature band: big bright image (Ken Burns zoom) + compact quote form ---- */
.feature{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);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 24s ease-in-out infinite alternate;will-change:transform}
@keyframes featzoom{from{transform:scale(1.03)}to{transform:scale(1.17)}}
@media (prefers-reduced-motion:reduce){.feature-media img{animation:none;transform:scale(1.05)}}
.feature-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,26,18,.74),rgba(10,26,18,.36) 46%,rgba(10,26,18,.12))}
.feature-inner{position:relative;z-index:2}
.feature-grid{display:grid;grid-template-columns:1fr 430px;gap:clamp(32px,5vw,72px);align-items:center}
.feature-copy .eyebrow{margin-bottom:22px}
.feature-copy h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem)}
.feature-copy h2 .em{font-style:italic;color:var(--gold)}
.feature-copy p{color:rgba(255,255,255,.84);margin-top:18px;max-width:44ch;font-size:clamp(15px,1.5vw,17px)}
.feature .contact-form{padding:clamp(24px,2.8vw,34px)}
.feature .contact-form h3{font-size:1.5rem;margin-bottom:18px}
.qc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink-2);color:rgba(255,255,255,.72);padding:clamp(64px,7vw,88px) 0 40px;border-top:1px solid var(--line-light-2)}
.foot-grid{display:grid;grid-template-columns:1.25fr .85fr 1.45fr 1fr;gap:40px}
.foot-brand img{height:58px;width:auto}
.foot-brand p{margin-top:18px;font-size:14px;line-height:1.65;max-width:32ch;color:rgba(255,255,255,.6)}
.foot-soc{margin-top:22px;display:flex;gap:12px}
.foot-soc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-light);display:grid;place-items:center;transition:border-color .35s,background .35s,transform .35s}
.foot-soc a:hover{border-color:var(--gold);background:rgba(198,159,90,.08);transform:translateY(-2px)}
.foot-soc svg{width:16px;height:16px;fill:rgba(255,255,255,.8)}
.foot-col h4{font-family:"Inter";font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:18px}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.72);padding:7px 0;position:relative;width:fit-content;transition:color .3s}
.foot-col a::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.foot-col a:hover{color:#fff}.foot-col a:hover::after{width:100%}
.foot-contact a{display:flex;align-items:center;gap:11px;font-size:14.5px;color:rgba(255,255,255,.85);padding:8px 0;transition:color .3s}
.foot-contact a:hover{color:var(--gold)}
.foot-contact a svg{width:16px;height:16px;fill:var(--gold);flex:none}
.foot-contact a{min-width:0}
.foot-contact .em{font-size:12px;white-space:nowrap;letter-spacing:-.1px}
.foot-contact .em svg{width:15px;height:15px}
.foot-bottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--line-light-2);display:flex;flex-wrap:wrap;gap:14px 24px;
  justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(255,255,255,.5)}
.foot-bottom .links{display:flex;gap:20px}
.foot-bottom .links a:hover{color:var(--gold)}

/* ============================================================
   Floating action buttons
   ============================================================ */
.fab{position:fixed;right:20px;bottom:22px;z-index:900;display:flex;flex-direction:column;gap:12px;align-items:center}
.fab a,.fab button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid rgba(198,159,90,.4);
  background:rgba(20,48,31,.94);color:var(--gold);box-shadow:0 8px 26px rgba(0,0,0,.32);transition:transform .35s var(--ease),background .35s,color .35s;position:relative}
.fab a:hover,.fab button:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px) scale(1.05)}
.fab svg{width:24px;height:24px;fill:currentColor}
.fab .fab-top{opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),background .35s,color .35s}
.fab .fab-top.show{opacity:1;pointer-events:auto;transform:none}
.fab .tip{position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--ink);color:#fff;font-size:12px;
  font-weight:500;padding:7px 12px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.fab a:hover .tip,.fab button:hover .tip{opacity:1;transform:translateY(-50%)}

/* ============================================================
   Luxury cursor
   ============================================================ */
#lux-cur{position:fixed;left:0;top:0;z-index:99998;pointer-events:none;display:none}
/* SSR cursor: a soft gold halo only. No hard ring, no dot . gentler and more
   legible than a tracking outline, and deliberately unlike the PPB cursor.
   The native cursor is NEVER hidden (see pattern_freeze_proof_cursor). */
.lc-halo{position:fixed;left:0;top:0;opacity:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,159,90,.34) 0%,rgba(198,159,90,.15) 40%,rgba(198,159,90,0) 70%);
  opacity:.9;will-change:transform;
  transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),opacity .5s var(--ease)}
#lux-cur.live .lc-halo{opacity:.9}
#lux-cur.live.hot .lc-halo{width:104px;height:104px;margin:-52px 0 0 -52px;opacity:1;
  background:radial-gradient(circle,rgba(198,159,90,.42) 0%,rgba(198,159,90,.19) 42%,rgba(198,159,90,0) 72%)}
#lux-cur.live.press .lc-halo{width:40px;height:40px;margin:-20px 0 0 -20px}

/* ============================================================
   Scroll reveal
   ============================================================ */
/* Reveal animations are progressive enhancement: content is visible by default and
   only hidden once JS confirms it is running (html.js), so a blocked/slow/failed
   site.js can never leave the page blank. html.no-reveal is the failsafe (see site.js). */
.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.d5{transition-delay:.4s}
.rv-mask{overflow:hidden}
.rv-mask>*{display:inline-block;transition:transform .9s var(--ease-cine)}
.js .rv-mask>*{transform:translateY(105%)}
.rv-mask.in>*{transform:none}
.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)}
/* failsafe: if site.js never runs, reveal everything statically */
html.no-reveal .rv,html.no-reveal .rv-mask>*,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}

/* ============================================================
   Responsive
   ============================================================ */
@media (hover:hover) and (pointer:fine){#lux-cur{display:block}}
@media (hover:none),(pointer:coarse){#lux-cur{display:none!important}.hero-spot{display:none!important}}

@media (max-width:1024px){
  .hdr nav.desk,.hdr-phone{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .band-grid{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .gal{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:repeat(3,1fr)}
  .rel-grid{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (max-width:820px){
  .intro-grid{grid-template-columns:1fr;gap:38px}
  .intro-media{order:-1}
  .svc-top,.testi-grid{grid-template-columns:1fr}
  .testi-grid{gap:30px}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .rel-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .feature-grid{grid-template-columns:1fr;gap:34px}
  .areas-grid{grid-template-columns:1fr 1fr}
  .gal-even{grid-template-columns:1fr 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){
  /* phones: header is logo + hamburger only (the quote button won't fit alongside the
     burger and would push it off-screen). The drawer + floating call/WhatsApp cover the CTA. */
  .hdr-right{display:none}
  /* top bar on phones: email left, mobile number right, on one row. They measure
     149px + 106px at 360px, so they fit side by side with room to spare. */
  :root{--topbar-h:42px;--hdr-h:100px}
  /* the trust ticker sat exactly on the fold and was clipped; pull the hero up */
  /* hero + ticker together fill the small viewport, so the trust strip sits directly
     above the browser URL bar with no dead space under it */
  .hero,.hero.hero-inner-page{min-height:calc(100svh - var(--tick-h,52px))}
  .hero-inner{padding-bottom:34px}
  .topbar-in{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;padding:0 14px}
  .tb-phones{flex-direction:row;align-items:center;gap:14px;margin-right:0}
  .topbar a{font-size:12px;gap:6px}
  .topbar svg{width:13px;height:13px}
  .hdr .brand{height:60px}
  .hdr .brand img{height:60px}
  .svc-grid,.why-grid{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr;gap:28px}
  .areas-grid{grid-template-columns:1fr}
  .gal-even{grid-template-columns:1fr}
  /* phones: brand full width, then Services + Areas side by side, then contact full width */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  /* Amy: What We Do matters more than Why Us on a phone, so it gets a full row of its
     own and Why Us pairs up with Get In Touch. Wrapping is fine at this width. */
  .foot-brand{grid-column:1/-1}
  .foot-grid > *:nth-child(2){grid-column:1/-1}   /* What We Do gets its own row */
  .foot-col .fwhy{white-space:normal;align-items:flex-start}
  .foot-col .fwhy::before{transform:translateY(9px)}
  .foot-contact a{font-size:13.5px;gap:8px}
  .foot-col a{font-size:13px;padding:6px 0}
  .proc-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .contact-meta{grid-template-columns:1fr}
  /* phones: sit the call/WhatsApp/email buttons in the bottom-right corner, and don't
     reserve a slot for the (hidden) back-to-top button . that reserved slot was pushing
     the visible icons up over the hero banner text. Corner + 3-button stack clears it. */
  .hero-scroll{display:none}
  .hero-cta{padding-right:62px}
  .fab{bottom:18px;right:10px;gap:9px}
  /* fade the ticker out before the fixed icon column instead of running text under it */
  .tick-vp{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 76%,transparent);
    mask:linear-gradient(90deg,transparent,#000 7%,#000 76%,transparent)}
  /* keep tappable content out of the fixed icon column */
  .contact-form button[type=submit]{margin-right:56px}
  .foot-bottom .links{padding-right:60px}
  .feature-copy p,.cta p,.sec-head .lead{padding-right:8px}
  .fab a,.fab button{width:46px;height:46px}
  .fab svg{width:20px;height:20px}
  /* keep copy clear of the fixed icon column so nothing is obscured */
  .trustbar .tb-cell{padding-left:64px;padding-right:64px}
  .intro-media .tag{max-width:calc(100% - 68px)}
  .fab .fab-top{display:none}
  .fab .fab-top.show{display:grid}
  /* keep the hero banner paragraph out of the bottom-right icon column so the buttons
     never sit over the text on short phones (SE / small Androids) */
  .hero-sub{padding-right:60px}
  .stats{gap:22px 34px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .rv,.rv-mask>*,.hero .he,.hero h1 .line .in{opacity:1!important;transform:none!important}
  .rv-img{clip-path:none!important}
  .scrollbar,.hero-spot{display:none!important}
  .mtrack{animation:none!important;white-space:normal;flex-wrap:wrap;justify-content:center}
}

/* ============================================================
   SSR additions . sections taken from the client's printed flyer
   ============================================================ */

/* ---------- benefits: gold ring icons on a dark band ---------- */
.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(--gold);color:var(--gold);background:rgba(198,159,90,.08);
  transition:background .5s var(--ease),transform .5s var(--ease)}
.bene-item:hover .bene-ic{background:rgba(198,159,90,.18);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:#fff;margin-bottom:8px;line-height:1.3}
.bene-tx p{color:rgba(255,255,255,.6);font-size:16px;line-height:1.62}

/* ---------- trust bar: 4 gold icons split by hairlines ---------- */
.trustbar{background:var(--paper-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.tb-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.tb-cell{padding:52px 28px;text-align:center;border-left:1px solid var(--line-2)}
.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(--gold);
  color:var(--gold);display:grid;place-items:center}
.tb-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-cell h3{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(--muted);font-size:14.5px;line-height:1.55}
@media (max-width:900px){.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-2)}}
@media (max-width:520px){.tb-grid{grid-template-columns:1fr}
  .tb-cell{border-left:0;padding:38px 20px}
  .tb-cell+.tb-cell{border-top:1px solid var(--line-2)}}

/* ---------- surface comparison table ---------- */
.cmp-wrap{margin-top:46px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:660px;border-collapse:collapse;font-size:15.5px}
.cmp th{background:var(--ink);color:#fff;text-align:left;padding:17px 20px;
  font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.cmp td{padding:17px 20px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--muted)}
.cmp tr:nth-child(even) td{background:var(--paper-2)}
.cmp td.s{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;color:var(--ink);font-weight:600;white-space:nowrap}
.cmp tr:hover td{background:rgba(198,159,90,.09)}

/* ---------- gold seal badge (flyer motif) ---------- */
.foot-brand .seal{margin:22px 0 4px}
.seal{width:132px;height:132px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;
  text-align:center;color:var(--gold);flex:none;background:rgba(198,159,90,.06)}
.seal span{font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1.55;padding:0 14px}
.seal .stars{display:block;letter-spacing:.16em;font-size:11px;margin-bottom:5px}

/* footer "why us" plain items */
.foot-col .fwhy{display:flex;align-items:baseline;gap:10px;color:rgba(255,255,255,.55);
  font-size:14.5px;padding:7px 0;line-height:1.5;white-space:nowrap}
.foot-col .fwhy::before{content:"";flex:none;width:14px;height:1.5px;background:var(--gold);
  transform:translateY(-4px)}

/* ============================================================
   SSR motion layer . deliberately different from the PPB build.
   Everything here is additive and every piece is switched off by
   prefers-reduced-motion at the bottom of this block.
   ============================================================ */

/* 1. gold shimmer sweeps once across the accent word when a heading reveals */
.sec h2 .em,.cta h2 .em,.feature-copy h2 .em{
  background-image:linear-gradient(100deg,
    currentColor 0%,currentColor 36%,var(--gold-2) 48%,#FFF3D9 52%,var(--gold-2) 56%,currentColor 68%,currentColor 100%);
  background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
}
.rv.in h2 .em,h2.rv.in .em,.rv.in .em{animation:emSheen 2.1s var(--ease-cine) .35s 1 forwards}
@keyframes emSheen{
  0%{background-position:100% 0}
  60%,100%{background-position:0% 0;-webkit-text-fill-color:currentColor}
}
@supports (-webkit-background-clip:text){
  .rv.in h2 .em,h2.rv.in .em{-webkit-text-fill-color:transparent}
}

/* 2. the eyebrow rule draws itself in rather than just appearing */
.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}

/* 3. gold corner brackets draw in on service + related cards */
.svc-card::before,.svc-card::after,.rel-card::before{
  content:"";position:absolute;z-index:4;pointer-events:none;
  border-color:var(--gold);border-style:solid;border-width:0;
  transition:width .55s var(--ease),height .55s var(--ease),border-width .3s 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}

/* 4. scroll-progress ring around the back-to-top button */
.fab .fab-top{position:relative}
.fab .fab-top .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;overflow:visible}
.fab .fab-top .ring circle{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.85;
  stroke-dasharray:var(--c,170);stroke-dashoffset:var(--o,170);transition:stroke-dashoffset .15s linear}

/* 5. buttons get a soft gold sweep on hover */
.btn-gold,.btn-ink{overflow:hidden}
.btn-gold::after,.btn-ink::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .85s var(--ease)}
.btn-gold:hover::after,.btn-ink:hover::after{transform:translateX(120%)}

/* 6. gentle scroll parallax (JS sets --py); images only, never text */
.par{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

@media (prefers-reduced-motion:reduce){
  .rv.in h2 .em,h2.rv.in .em,.rv.in .em{animation:none;-webkit-text-fill-color:currentColor}
  .eyebrow::before{width:30px;transition:none}
  .svc-card::before,.svc-card::after{display:none}
  .btn-gold::after,.btn-ink::after{display:none}
  .par{transform:none!important}
}

/* trust-bar item titles: styled like the old h3 but semantically not a heading */
.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}

/* ============================================================
   Final elegance pass. Restrained on purpose: each of these is
   a single quiet gesture, not another thing competing for attention.
   All of it is switched off under prefers-reduced-motion at the end.
   ============================================================ */

/* 1. a fine gold rule that draws itself under each section heading as it arrives */
.sec-head h2::after,.svc-top h2::after,.intro-copy h2::after{
  content:"";display:block;height:1.5px;width:0;margin-top:20px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) 55%,transparent 100%);
  transition:width 1.15s var(--ease-cine) .25s}
.sec-head .rv.in h2::after,.rv.in h2::after,h2.rv.in::after{width:96px}

/* 2. a slow diagonal light passing over photography on hover */
.svc-imgwrap::after,.gal figure::after,.gal-even figure::after,.rel-card::after{
  pointer-events:none}
.svc-imgwrap,.gal figure,.gal-even figure{position:relative;overflow:hidden}
.gal figure::before,.gal-even 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,.20) 48%,rgba(230,196,130,.16) 52%,transparent 62%);
  transform:translateX(-120%);transition:transform 1.25s var(--ease-cine)}
.gal figure:hover::before,.gal-even figure:hover::before,.svc-card:hover .svc-imgwrap::before{
  transform:translateX(120%)}

/* 3. the pull quote gets a gold quote mark that fades up with it */
.intro-copy .blockquote{position:relative}
.intro-copy .blockquote::before{
  content:"\201C";position:absolute;left:14px;top:-26px;z-index:0;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:82px;line-height:1;
  color:var(--gold);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:.22;transform:none}

/* 4. stat figures get a hairline that draws in once the count lands */
.stats .stat,.band-item{position:relative}
.stats .stat::after,.band-item::after{
  content:"";position:absolute;left:0;bottom:-10px;height:1px;width:0;background:var(--gold);
  opacity:.55;transition:width 1s var(--ease-cine) .75s}
.rv.in .stat::after,.band-item.rv.in::after{width:38px}

/* 5. primary calls to action lean very slightly toward the cursor */
.btn.magnetic{will-change:transform;transition:transform .45s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .sec-head h2::after,.svc-top h2::after,.intro-copy h2::after{width:96px;transition:none}
  .gal figure::before,.gal-even figure::before,.svc-imgwrap::before{display:none}
  .intro-copy .blockquote::before{opacity:.22;transform:none;transition:none}
  .stats .stat::after,.band-item::after{width:38px;transition:none}
  .btn.magnetic{transform:none!important}
}

/* Small phones (<=400px): the hero stack is content-driven, not height-driven, so the
   trust ticker was still landing below the fold. Trim the tallest optional pieces. */
@media (max-width:400px){
  .hero-inner{padding-bottom:26px}
  .hero h1{font-size:clamp(2.1rem,10vw,2.7rem)}
  .hero-sub{margin-top:14px;font-size:15px}
  .hero-cta{margin-top:20px}
}

/* ============================================================
   Approved system / SuDS UK  (added 21 Aug 2026)
   Their mark is navy #050043, so it sits on a white card to stay legible
   against the forest ground.
   ============================================================ */
.suds{background:var(--ink-soft);color:#fff;padding:clamp(52px,6.5vw,88px) 0}
.suds-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,74px);align-items:center}
.suds-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);color:#fff;font-weight:300;margin:20px 0 16px;max-width:20ch}
.suds-copy h2 .em{font-style:italic;color:var(--gold)}
.suds-copy p{color:rgba(255,255,255,.74);font-size:15px;line-height:1.72;max-width:62ch}
.suds-badge{background:#fff;border-radius:3px;padding:26px 32px 19px;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.suds-badge:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.36)}
.suds-badge img{width:clamp(186px,21vw,244px);height:auto}
.suds-visit{font-family:"Inter",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-text);display:inline-flex;align-items:center;gap:8px}
.suds-visit .ar{transition:transform .4s var(--ease)}
.suds-badge:hover .suds-visit .ar{transform:translateX(4px)}

@media(max-width:860px){
  .suds-in{grid-template-columns:1fr;gap:30px}
  .suds-badge{align-self:start}
}
/* two numbers plus the email will not fit a narrow topbar: drop the email */
@media(max-width:600px){
  .topbar .tb-email{display:none}
  .topbar-in{justify-content:center}
  .tb-phones{gap:18px;margin-right:0}
}

/* ============================================================
   Services grid . brand panel  (added 21 Aug 2026)
   Fills the sixth cell left empty when Cleaning & Sealing was removed.
   ============================================================ */
.svc-logo{
  --mx:50%; --my:42%;
  position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/5;
  display:grid;place-items:center;
  background:radial-gradient(118% 88% at 50% 4%,#16341F 0%,#0A1A12 64%);
}
/* oversized monogram bled off the corner, watermark faint */
.svc-logo .sl-wm{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("/assets/brand/logo-mark.png") no-repeat 126% 112%/74% auto;
  opacity:.055;
}
/* gold spotlight tracking the pointer (JS sets --mx/--my) */
.svc-logo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(198,159,90,.30),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease);
}
.svc-logo:hover::before{opacity:1}
/* slow sheen, like light moving across polished stone */
.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(230,196,130,.15),transparent);
  transform:translateX(-200%) rotate(9deg);
  animation:slSweep 8.5s 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:26px;
  transition:transform .7s var(--ease);
}
.svc-logo:hover .sl-in{transform:translateY(-5px) scale(1.035)}
.sl-mark{width:min(68%,186px);height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.sl-tag{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:var(--gold);
  font-size:1.05rem;opacity:.92;text-align:center;line-height:1}
@media (prefers-reduced-motion:reduce){
  .svc-logo::after{animation:none;opacity:0}
  .svc-logo:hover .sl-in{transform:none}
}

/* ============================================================
   Footer on phones  (added 21 Aug 2026)
   Get In Touch moves up beside What We Do so it stops colliding with
   Why Us. This block MUST stay at the end of the file: the base
   `.foot-col .fwhy{white-space:nowrap}` rule further up has the same
   specificity, and a media query adds none - so an earlier @media
   block loses to it and the items never wrapped.
   ============================================================ */
@media (max-width:600px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .foot-grid > *{min-width:0}
  .foot-brand{grid-column:1/-1;grid-row:1}
  .foot-grid > *:nth-child(2){grid-column:1;grid-row:2}       /* What We Do  */
  .foot-grid > .foot-contact{grid-column:2;grid-row:2}        /* Get In Touch */
  .foot-grid > *:nth-child(3){grid-column:1/-1;grid-row:3}    /* Why Us      */
  /* now it has a full row, so it can finally wrap */
  .foot-col .fwhy{white-space:normal;align-items:flex-start;font-size:13.5px}
  .foot-col .fwhy::before{transform:translateY(9px)}
  /* one step down across the footer so nothing has to overflow to fit */
  .foot-col h3{font-size:1.16rem}
  .foot-col a{font-size:12.5px;padding:5px 0}
  .foot-contact a{font-size:12.5px;gap:7px}
  .foot-contact a svg{width:14px;height:14px}
  .foot-contact .em{font-size:10.6px;letter-spacing:-.2px}
  .foot-contact .em svg{width:13px;height:13px}
}

/* ============================================================
   Brand watermark  (added 21 Aug 2026)
   Applied as a background-image on the section itself, never as an
   overlay element - that way it can never sit above content, catch a
   click, or create a stacking context. Opacity is baked into the PNG
   (7.5%), so there is no `opacity` rule to leak onto children.
   Corner, size and bleed vary per section so it reads as texture
   rather than wallpaper.
   ============================================================ */
.foot,.cta,.band,.suds{background-repeat:no-repeat}
/* every page */
.foot{background-image:url("/assets/brand/logo-watermark.png");
  background-position:calc(100% + 120px) calc(100% + 110px);background-size:400px auto}
/* every page but contact - top-right is already taken by the gold wedge */
.cta{background-image:url("/assets/brand/logo-watermark.png");
  background-position:-105px calc(100% + 85px);background-size:330px auto}
/* home + about */
.band{background-image:url("/assets/brand/logo-watermark.png");
  background-position:calc(100% + 55px) 50%;background-size:225px auto}
/* home */
.suds{background-image:url("/assets/brand/logo-watermark.png");
  background-position:-80px calc(100% + 60px);background-size:290px auto}

@media (max-width:820px){
  .foot{background-size:280px auto;background-position:calc(100% + 90px) calc(100% + 80px)}
  .cta{background-size:230px auto;background-position:-80px calc(100% + 60px)}
  .band{background-size:170px auto}
  .suds{background-size:210px auto}
}

/* ============================================================
   Touch targets  (added 21 Aug 2026)
   The top-bar links were only ~20px tall - fiddly to hit on a phone,
   and they are tap-to-call. Padding grows the hit area inside the
   existing 40px bar, so nothing moves visually.
   ============================================================ */
.topbar a{padding-block:10px}
.hdr-phone{padding:10px 0}
.foot-contact a{padding:10px 0}
/* iPad landscape shows the desktop nav on a touch screen: grow the hit box,
   and lift the underline by the same amount so it does not move visually. */
.hdr nav.desk a{padding:12px 0}
.hdr nav.desk a::after{bottom:6px}