/* ==========================================================================
   Clarity Construction  |  Warm Craft
   Palette sampled from the firm's own project photography.
   ========================================================================== */

:root{
  /* Gold and brown, the Clarity Construction scheme.
     Every value below is measured, not eyeballed: text tokens clear 4.5:1 on the
     lightest and darkest canvases they sit on, interactive borders clear 3:1. */
  --paper:#FAF6EE;
  --paper-2:#F3EDE1;
  --stone:#EBE3D4;
  --ink:#241A12;
  --ink-2:#4E3D2E;
  --ink-3:#6B5946;

  /* Brown: the structural colour. Deep sections, kickers, secondary buttons. */
  --brown:#6B4A32;
  --brown-d:#3B2A1D;
  --brown-l:#C9B49B;

  /* Gold: the brand accent. */
  --gold:#B08434;        /* decorative: the datum line, rules, dots, borders */
  --gold-ink:#7C5A1D;    /* gold as small TEXT on light canvases (>=4.5:1) */
  --gold-btn:#8F6825;    /* gold as a button fill under a near-white label */
  --gold-l:#D9B96F;      /* gold on the dark brown sections */

  --line:#E3D9C6;
  --line-2:#8C806D;      /* interactive borders, >=3:1 on every canvas */
  --line-soft:#D6C9B2;   /* decorative hairlines only */

  --f-logo:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --gut:clamp(1.25rem,4vw,3.5rem);
  --maxw:1280px;
  --rad:2px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);

  --shadow-1:0 1px 2px rgba(36,26,18,.05),0 8px 24px -12px rgba(36,26,18,.20);
  --shadow-2:0 2px 6px rgba(36,26,18,.06),0 28px 60px -28px rgba(36,26,18,.32);
}

*,*::before,*::after{box-sizing:border-box}
figure,blockquote,dl,dd{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The header is sticky, so a plain anchor jump parks the target underneath it.
   Measured at 79px on desktop and 75px on tablet and phone; this reserves that
   plus breathing room, for every anchor target and every scrollIntoView call. */
:root{--hdr-h:79px}
[id]{scroll-margin-top:calc(var(--hdr-h) + 1.4rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- The fixed environment layer: one place, not stacked sections ---- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(38% 30% at 18% 12%,rgba(176,132,52,.10),transparent 70%),
    radial-gradient(42% 34% at 84% 72%,rgba(107,74,50,.13),transparent 72%);
  animation:drift 96s ease-in-out infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.07)}
}
@media (prefers-reduced-motion:reduce){.env::before{animation:none}}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{width:100%;max-width:840px;margin-inline:auto;padding-inline:var(--gut)}
/* Intro blocks. Containers are sized in px per the type rules; ch limits live
   on the text elements themselves so they resolve in the right font. */
.intro{max-width:min(100%,660px)}
.intro--wide{max-width:min(100%,780px)}
.intro h2{max-width:18ch}
.intro p.lede{max-width:52ch}
.intro--center{margin-inline:auto;text-align:center}
.intro--center .kicker{justify-content:center}
.intro--center h2{margin-inline:auto;max-width:22ch}
.intro--center p.lede{margin-inline:auto}
/* Two column head, so a grid section never repeats the stacked head above it */
.head2{display:grid;gap:1rem 3rem;align-items:end}
@media (min-width:900px){.head2{grid-template-columns:1.1fr .9fr}}
.head2 h2{max-width:14ch}
.head2 p.lede{max-width:46ch;margin-bottom:.4rem}
main{position:relative;z-index:1;display:block}
section{position:relative}
.pad{padding-block:clamp(4rem,9vw,8rem)}
.pad-s{padding-block:clamp(3rem,6vw,5rem)}

/* ---- Type ---- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.06;
  letter-spacing:-.018em;margin:0;font-variation-settings:"SOFT" 18,"WONK" 1;
  text-wrap:balance;}
p,li{text-wrap:pretty}
h1{font-size:clamp(2.5rem,1.3rem + 5.2vw,5rem)}
h2{font-size:clamp(2rem,1.2rem + 3.1vw,3.5rem)}
h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);line-height:1.16}
h4{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.25}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,1rem + .55vw,1.375rem);line-height:1.55;color:var(--ink-2);max-width:60ch}
h1 + .lede,h2 + .lede,h3 + .lede,h1 + p,h2 + p,h3 + p{margin-top:1.15rem}
.head2 h2 + .lede{margin-top:0}
.body-w{max-width:68ch}
a{color:inherit}
strong{font-weight:700;color:var(--ink)}

.kicker{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brown-d);
  display:flex;align-items:baseline;gap:.7rem;margin:0 0 1.25rem;
  width:fit-content;max-width:100%;
}
.kicker::before{
  content:"";width:clamp(18px,3vw,38px);height:1px;background:var(--gold);
  flex:none;transform:translateY(-.28em);
}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---- The datum line: the signature ---- */
.datum{
  position:fixed;left:max(1.05rem,2.2vw);top:0;bottom:0;width:1px;z-index:40;
  pointer-events:none;background:linear-gradient(180deg,transparent,var(--line-soft) 8%,var(--line-soft) 92%,transparent);
}
.datum__fill{position:absolute;left:0;top:0;width:1px;height:0;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  box-shadow:0 0 10px rgba(176,132,52,.5)}
.datum__tick{position:absolute;left:0;width:9px;height:1px;background:var(--line-soft)}
.datum__tick[data-major]{width:16px;background:var(--gold);opacity:.55}
.datum__bead{
  position:absolute;left:-3.5px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px var(--paper),0 0 14px rgba(176,132,52,.75);
  transition:top .12s linear;
}
.datum__label{
  position:absolute;left:15px;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;transform:translateY(-50%);opacity:0;transition:opacity .5s var(--e-out);
}
.datum__label.on{opacity:.85}
@media (max-width:1180px){
  .datum{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;
    background:var(--line)}
  .datum__fill{height:2px;width:0;background:linear-gradient(90deg,var(--gold-l),var(--gold))}
  .datum__tick,.datum__bead,.datum__label{display:none}
}

/* ---- Header ---- */
.hdr{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .35s,background .35s}
.hdr.stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 95%,transparent)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;
  min-height:74px;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  margin-right:auto;min-width:0;flex:0 1 auto;overflow:hidden}
.brand .mark{width:clamp(34px,8vw,46px);height:auto;flex:none;color:var(--gold);
  transition:color .4s var(--e-out)}
.brand:hover .mark{color:var(--brown-d)}
.brand__t{display:flex;flex-direction:column;line-height:1;min-width:0;
  --lock:clamp(1.18rem,.86rem + 1vw,1.5rem)}
/* CLARITY: the anchor line. CONSTRUCTION is sized and tracked so its inked
   width matches CLARITY's almost exactly (measured in-browser, not guessed). */
.brand__c{color:var(--brown-d);font-family:var(--f-logo);font-weight:600;
  font-size:var(--lock);letter-spacing:.135em;margin-right:-.135em;
  text-transform:uppercase;line-height:1;white-space:nowrap}
.brand__co{color:var(--gold-ink);font-family:var(--f-logo);font-weight:600;
  font-size:calc(var(--lock)*.535);letter-spacing:.157em;margin-right:-.157em;
  text-transform:uppercase;line-height:1;margin-top:.18em;white-space:nowrap}
.brand__s{font-family:var(--f-body);font-weight:500;letter-spacing:.223em;margin-right:-.223em;
  font-size:calc(var(--lock)*.305);border-top:1px solid var(--line);
  padding-top:.5em;margin-top:.55em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  font-size:.88rem;font-weight:500;text-decoration:none;color:var(--ink-2);
  padding:.55rem .7rem;border-radius:var(--rad);position:relative;
  transition:color .25s var(--e-out);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.32rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--e-out)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + .3rem);left:0;min-width:290px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:var(--shadow-2);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--e-out),transform .28s var(--e-out),visibility .28s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:.6rem .7rem;font-size:.86rem}
.sub a::after{display:none}
.sub a:hover{background:var(--paper-2)}
.sub .sub__d{display:block;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.15rem}

.hdr__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.tel{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;
  font-family:var(--f-mono);font-size:.84rem;font-weight:500;color:var(--ink);
  letter-spacing:.01em;padding:.5rem .2rem}
.tel span{color:var(--ink-3);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);
  background:transparent;border-radius:var(--rad);cursor:pointer;
  align-items:center;justify-content:center;flex:none;color:var(--ink)}
.burger svg{width:19px;height:19px}

@media (max-width:1080px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:inline-flex}
}
@media (max-width:520px){
  /* Small screens keep the full lockup, scaled down. Verified to fit beside
     the phone pill and the menu button down to 360px. */
  .hdr .brand__t{--lock:.8rem}
  .hdr .brand__s{display:none}
  /* Was display:none, which left a phone-driven business with no tappable
     number in the header at all - the only one was inside the closed drawer.
     Collapse it to an icon-sized tap target instead of removing it. */
  .tel span,.tel .sub__d{display:none}
  .tel{padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
    gap:.4rem;font-size:.84rem;font-weight:600;white-space:nowrap;
    color:var(--brown-d);text-decoration:none}
}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;overflow:hidden}
.drawer__scrim{position:absolute;inset:0;background:rgba(36,26,18,.45);
  opacity:0;transition:opacity .4s var(--e-out)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);
  background:var(--paper);box-shadow:var(--shadow-2);
  transform:translateX(100%);transition:transform .45s var(--e-out);
  display:flex;flex-direction:column;overflow-y:auto;padding:1.1rem var(--gut) 2rem}
.drawer.open{visibility:visible}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:none}
.drawer__top{display:flex;justify-content:flex-end;margin-bottom:1rem}
.drawer__x{width:44px;height:44px;border:1px solid var(--line);background:transparent;
  border-radius:var(--rad);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;color:var(--ink)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{padding:.85rem 0;text-decoration:none;font-family:var(--f-display);
  font-size:1.3rem;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer nav .d-sub{font-family:var(--f-body);font-size:.98rem;font-weight:500;
  padding-left:1rem;color:var(--ink-2)}
.drawer .btn{margin-top:1.4rem}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-body);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  padding:.92rem 1.5rem;border-radius:var(--rad);text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .3s var(--e-out),
    background .3s var(--e-out),color .3s var(--e-out),box-shadow .3s var(--e-out);
  will-change:transform;text-align:center}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--e-out)}
.btn--p{background:var(--gold-btn);color:#FFFDF8;box-shadow:var(--shadow-1)}
.btn--p:hover{background:#6F5019;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn--p:hover svg{transform:translateX(3px)}
.btn--s{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--s:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--g{background:var(--brown-d);color:#F7F2E7}
.btn--g:hover{background:#2C1F15;transform:translateY(-2px)}
.btn--wide{width:100%}
:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px;border-radius:var(--rad)}
@media (pointer:coarse){
  /* Touch targets reach 44px without changing how anything is aligned:
     each rule re-declares its own alignment alongside the display change. */
  .btn{min-height:46px}
  .nav a,.sub a,.drawer nav a{min-height:44px;display:flex;align-items:center}
  .ftr a,.crumbs a,.cta__way{min-height:44px;display:inline-flex;
    align-items:center;justify-content:flex-start}
  .ftr ul{gap:.15rem}
  .brand{min-height:44px}
  .rail-btn{width:48px;height:48px}
  .faq summary{padding-block:1.5rem}
  .cities li{min-height:40px;display:inline-flex;align-items:center}
}

.skip{position:fixed;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.8rem 1.2rem;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{left:.6rem;top:.6rem}

/* ---- HERO ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(600px,90vh,940px);display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Cinematic plate. The photographs carry bright windows exactly where the copy
   sits, so a soft gradient alone is not enough. These values are measured, not
   guessed: every hero string clears WCAG against the lightest pixel behind it. */
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(150% 130% at -12% 74%,rgba(14,11,8,.92) 0%,rgba(14,11,8,.83) 28%,rgba(14,11,8,.55) 48%,rgba(14,11,8,.23) 68%,transparent 85%),
    linear-gradient(180deg,rgba(18,14,10,.32) 0%,rgba(18,14,10,.25) 28%,rgba(18,14,10,.42) 66%,rgba(18,14,10,.70) 100%)}
.hero__in{width:100%;padding-block:clamp(2.5rem,7vw,5.5rem);color:#FBF6EA}
.hero h1{color:#FCF8EE;max-width:17ch;text-shadow:0 2px 30px rgba(20,16,12,.42)}
.hero .lede{color:#F0E7D7;max-width:52ch;margin-top:1.5rem;
  text-shadow:0 1px 16px rgba(20,16,12,.5)}
.hero .kicker{color:#F4EEE1}
.hero .kicker::before{background:var(--gold-l)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-top:2.75rem;
  padding-top:1.5rem;border-top:1px solid rgba(251,246,234,.24)}
@media (max-width:760px){
  .hero__strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1rem;margin-top:2rem}
  .hero__stat b{font-size:1.32rem}
}
@media (max-width:380px){.hero__strip{gap:.9rem}.hero__stat b{font-size:1.18rem}}
.hero__stat{display:flex;flex-direction:column;gap:.25rem}
.hero__stat b{font-family:var(--f-display);font-size:1.6rem;font-weight:600;color:#FCF8EE;line-height:1}
.hero__stat span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:#DDCFB6}

/* Page hero (interior pages) */
.phero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(430px,58vh,620px);display:flex;align-items:flex-end}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(150% 130% at -12% 74%,rgba(14,11,8,.92) 0%,rgba(14,11,8,.83) 28%,rgba(14,11,8,.55) 48%,rgba(14,11,8,.23) 68%,transparent 85%),
    linear-gradient(180deg,rgba(18,14,10,.32) 0%,rgba(18,14,10,.25) 28%,rgba(18,14,10,.42) 66%,rgba(18,14,10,.70) 100%)}
@media (max-width:900px){
  /* On phones the copy spans the full width and sits high in the frame, so the
     plate becomes a full band instead of a left anchored vignette. */
  .hero__scrim,.phero__scrim{
    background:linear-gradient(180deg,rgba(14,11,8,.58) 0%,rgba(14,11,8,.63) 26%,rgba(14,11,8,.86) 58%,rgba(14,11,8,.91) 100%)}
}
.phero__in{width:100%;padding-block:clamp(2.2rem,5vw,3.8rem);color:#FBF6EA}
.phero h1{color:#FCF8EE;max-width:19ch;font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);
  text-shadow:0 2px 26px rgba(20,16,12,.45)}
.phero .lede{color:#F0E7D7;max-width:56ch;margin-top:1.15rem;font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);
  text-shadow:0 1px 14px rgba(20,16,12,.5)}
.phero .kicker{color:#F4EEE1}
.phero .kicker::before{background:var(--gold-l)}

.crumbs{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-block:1rem;
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none;color:var(--ink-3)}
.crumbs a:hover{color:var(--gold-ink)}
.crumbs span{opacity:.45}

/* ---- Scroll reveal ---- */
[data-rise],[data-fade],[data-mask],[data-stagger]>*{will-change:transform,opacity}
.js-reveal [data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
.js-reveal [data-fade]{opacity:0;transition:opacity 1.05s var(--e-out)}
.js-reveal [data-mask]{opacity:0;clip-path:inset(0 0 100% 0);transform:scale(1.03);
  transition:opacity .9s var(--e-out),clip-path 1.15s var(--e-out),transform 1.4s var(--e-out)}
.js-reveal [data-stagger]>*{opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--e-out),transform .75s var(--e-out)}
.in[data-rise],.in[data-fade]{opacity:1;transform:none}
.in[data-mask]{opacity:1;clip-path:inset(0 0 0 0);transform:none}
.in[data-stagger]>*{opacity:1;transform:none}
[data-stagger]>*:nth-child(1){transition-delay:.02s}
[data-stagger]>*:nth-child(2){transition-delay:.10s}
[data-stagger]>*:nth-child(3){transition-delay:.18s}
[data-stagger]>*:nth-child(4){transition-delay:.26s}
[data-stagger]>*:nth-child(5){transition-delay:.34s}
[data-stagger]>*:nth-child(6){transition-delay:.42s}
[data-stagger]>*:nth-child(7){transition-delay:.50s}
[data-stagger]>*:nth-child(8){transition-delay:.58s}
@media (prefers-reduced-motion:reduce){
  [data-rise],[data-fade],[data-mask],[data-stagger]>*{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* Self drawing rule */
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--e-out)}
.in .rule,.rule.in{transform:scaleX(1)}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- The Clarity Promise: the brand spine, ledger layout ---- */
.promise{background:var(--ink);color:#F4EEE0;position:relative;overflow:hidden}
.promise::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 50% at 78% 10%,rgba(176,132,52,.20),transparent 70%)}
.promise .wrap{position:relative}
.promise h2{color:#FBF6EA;max-width:16ch}
.promise .kicker{color:var(--gold-l)}
.promise .lede{color:#CFC6B6}
.promise__grid{display:grid;gap:1px;background:rgba(244,238,224,.16);
  margin-top:clamp(2.5rem,5vw,4rem);border-block:1px solid rgba(244,238,224,.16)}
@media (min-width:760px){.promise__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.promise__grid{grid-template-columns:repeat(4,1fr)}}
.promise__item{background:var(--ink);padding:clamp(1.6rem,3vw,2.3rem)}
.promise__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--gold-l);display:block;margin-bottom:1.1rem}
.promise__item h3{color:#FBF6EA;font-size:1.32rem;margin-bottom:.7rem}
.promise__item p{color:#CDBFA8;font-size:.95rem;margin:0;max-width:34ch}

/* ---- Services: asymmetric editorial grid (not a card wall) ---- */
.svcs{display:grid;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:680px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){
  /* The six column arrangement below is designed for the eight card services
     grid. The same class is reused for the three card "Related services" strip
     and the four card 404 strip, where those span rules blew the cards up to
     full width, so each count now gets its own arrangement. */
  .svcs{grid-template-columns:repeat(3,1fr)}
  .svcs--lite{grid-template-columns:repeat(4,1fr)}
  .svcs:not(.svcs--lite):has(> .svc:nth-child(4)):not(:has(> .svc:nth-child(5))){grid-template-columns:repeat(2,1fr)}
  .svcs:not(.svcs--lite):has(> .svc:nth-child(7)){grid-template-columns:repeat(6,1fr)}
  .svcs:not(.svcs--lite):has(> .svc:nth-child(7)) > .svc:nth-child(-n+2){grid-column:span 3}
  .svcs:not(.svcs--lite):has(> .svc:nth-child(7)) > .svc:nth-child(n+3){grid-column:span 2}
}
.svc{position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),
  border-color .5s var(--e-out)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-soft)}
.svc__img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--stone)}
.svcs:has(> .svc:nth-child(7)) > .svc:nth-child(-n+2) .svc__img{aspect-ratio:16/9}
.svc__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--e-out)}
.svc:hover .svc__img img{transform:scale(1.05)}
.svc__body{padding:clamp(1.1rem,2vw,1.6rem);display:flex;flex-direction:column;
  gap:.55rem;flex:1}
.svc__body h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.5rem)}
.svc__body p{font-size:.92rem;color:var(--ink-2);margin:0;max-width:42ch}
.svc__go{margin-top:auto;padding-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:500}
.svc__go svg{width:13px;height:13px;transition:transform .4s var(--e-out)}
.svc:hover .svc__go svg{transform:translateX(4px)}
/* compact, image free service links - used for related strips and the 404 page,
   so the same photograph never has to appear on more than one page */
.svcs--lite{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:680px) and (max-width:1039px){.svcs--lite{grid-template-columns:repeat(2,1fr)}}
.svc--lite{background:var(--paper);border-color:var(--line)}
.svc--lite .svc__body{padding:clamp(1.2rem,2vw,1.7rem);gap:.5rem}
.svc--lite .svc__body h3{font-size:clamp(1.05rem,1rem + .35vw,1.28rem)}
.svc--lite .svc__body p{font-size:.88rem}
.svc--lite::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--e-out)}
.svc--lite:hover::before{transform:scaleY(1)}


/* ---- Scroll rail gallery ---- */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap}
.rail-nav{display:flex;gap:.5rem;flex:none}
.rail-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:background .3s var(--e-out),
  border-color .3s var(--e-out),transform .3s var(--e-out)}
.rail-btn:hover:not(:disabled){background:var(--ink);color:var(--paper);
  border-color:var(--ink);transform:scale(1.05)}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail-btn svg{width:16px;height:16px}

.rail{--rail-gap:clamp(.8rem,1.6vw,1.4rem);
  display:flex;gap:var(--rail-gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:clamp(1.8rem,4vw,3rem) 1.6rem;
  padding-inline:calc(max((100% - var(--maxw)) / 2, 0px) + var(--gut));
  scroll-padding-inline:calc(max((100% - var(--maxw)) / 2, 0px) + var(--gut));
  scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;
  -webkit-overflow-scrolling:touch;cursor:grab}
.rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.rail.dragging *{pointer-events:none}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-track{background:var(--line);border-radius:2px}
.rail::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:2px}
.rail:hover::-webkit-scrollbar-thumb{background:var(--gold)}
@media (prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}}

.rail__pad{display:none}
.shot{flex:none;scroll-snap-align:start;width:min(78vw,620px);
  border-radius:var(--rad);overflow:hidden;background:var(--stone);
  position:relative;box-shadow:var(--shadow-1)}
.shot--tall{width:min(60vw,420px)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  transition:transform 1.2s var(--e-out)}
.shot--tall img{aspect-ratio:2/3}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem 1.1rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:#FBF6EA;background:linear-gradient(180deg,transparent,rgba(22,16,10,.86))}
.rail-hint{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.55rem}
.rail-hint svg{width:22px;height:9px}

/* ---- Split feature (photo + text, alternating) ---- */
.split{display:grid;gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr}
  .split--flip .split__media{order:2}
}
.split__media{position:relative;border-radius:var(--rad);overflow:hidden;
  background:var(--stone);box-shadow:var(--shadow-2)}
.split__media img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.split__tag{position:absolute;left:1rem;bottom:1rem;background:var(--paper);
  padding:.55rem .9rem;border-radius:var(--rad);font-family:var(--f-mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  box-shadow:var(--shadow-1)}

/* ---- Checklist ---- */
.checks{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.85rem}
/* Two up on wide screens so a long scope list does not leave half the row empty */
@media (min-width:900px){
  .checks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem 2.5rem}
  .checks--2 li{max-width:44ch}
}
.checks li{display:flex;gap:.85rem;align-items:flex-start;font-size:.98rem;
  color:var(--ink-2);max-width:52ch}
.checks svg{width:17px;height:17px;flex:none;margin-top:.28em;color:var(--brown-d)}
.checks b{color:var(--ink)}

/* ---- Process: the datum ladder ---- */
.steps{position:relative;margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:0}
.steps::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:1px;
  background:var(--line-soft)}
@media (min-width:900px){.steps::before{left:50%}}
.step{position:relative;padding:0 0 clamp(2rem,4vw,3rem) 56px}
@media (min-width:900px){
  .step{width:50%;padding:0 0 clamp(2.4rem,4vw,3.4rem) 0}
  .step:nth-child(odd){padding-right:calc(var(--gut) + 1.5rem);text-align:right}
  .step:nth-child(even){margin-left:50%;padding-left:calc(var(--gut) + 1.5rem)}
}
.step__dot{position:absolute;left:12px;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-soft);display:grid;place-items:center}
.step__dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);
  transition:background .5s var(--e-out),transform .5s var(--e-out)}
.in .step__dot::after{background:var(--gold);transform:scale(1.25)}
@media (min-width:900px){
  .step:nth-child(odd) .step__dot{left:auto;right:-8px}
  .step:nth-child(even) .step__dot{left:-8px}
}
.step__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--gold-ink);display:block;margin-bottom:.55rem}
.step h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);margin-bottom:.5rem}
.step p{font-size:.95rem;color:var(--ink-2);margin:0;max-width:44ch}
@media (min-width:900px){.step:nth-child(odd) p{margin-left:auto}}

/* ---- Proof / testimonials ---- */
.quotes{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:820px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1.1rem;
  transition:border-color .4s var(--e-out),box-shadow .4s var(--e-out)}
.quote:hover{border-color:var(--line-soft);box-shadow:var(--shadow-1)}
.quote__stars{display:flex;gap:2px;color:var(--gold)}
.quote__stars svg{width:15px;height:15px}
.quote blockquote{margin:0;font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.05rem,1rem + .35vw,1.28rem);line-height:1.42;color:var(--ink);
  max-width:40ch;font-variation-settings:"SOFT" 20,"WONK" 0}
.quote figcaption{margin-top:auto;display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);flex-wrap:wrap}
.quote figcaption b{color:var(--ink-2);font-weight:500}

/* ---- Trust bar ---- */
.trust{background:var(--paper-2);border-block:1px solid var(--line)}
.trust__in{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;
  justify-content:space-between;padding-block:1.6rem}
.trust__i{display:flex;align-items:center;gap:.75rem;font-size:.86rem;color:var(--ink-2)}
.trust__i svg{width:20px;height:20px;color:var(--brown-d);flex:none}
.trust__i b{color:var(--ink);font-weight:600}

/* ---- Cities ---- */
.cities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding:0;list-style:none}
.cities li{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.07em;
  border:1px solid var(--line);border-radius:var(--rad);padding:.5rem .85rem;
  color:var(--ink-2);background:var(--paper);transition:border-color .3s,color .3s}
.cities li:hover{border-color:var(--gold);color:var(--ink)}

/* ---- FAQ ---- */
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;
  position:relative;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);line-height:1.32;color:var(--ink);
  transition:color .3s var(--e-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.75rem;
  width:13px;height:13px;
  background:linear-gradient(var(--ink-3) 0 0) center/100% 1px no-repeat,
             linear-gradient(var(--ink-3) 0 0) center/1px 100% no-repeat;
  transition:transform .4s var(--e-out)}
.faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--gold) 0 0) center/100% 1px no-repeat}
.faq__a{padding:0 3rem 1.5rem 0;color:var(--ink-2);font-size:.98rem}
.faq__a p{max-width:64ch;margin-bottom:.8em}
.faq__a p:last-child{margin-bottom:0}

/* ---- CTA + form ---- */
.cta{background:var(--brown-d);color:#F7F2E7;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(55% 60% at 88% 6%,rgba(217,185,111,.24),transparent 70%)}
.cta .wrap{position:relative}
.cta__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media (min-width:940px){.cta__grid{grid-template-columns:.9fr 1.1fr}}
.cta h2{color:#FBF6EA;max-width:15ch}
.cta .kicker{color:#E0C285}
.cta .kicker::before{background:#E0C285}
.cta .lede{color:#DCCEB8;max-width:44ch}
.cta__ways{margin-top:2.2rem;display:grid;gap:1.1rem}
.cta__way{display:flex;gap:.9rem;align-items:flex-start;text-decoration:none;color:inherit}
.cta__way svg{width:18px;height:18px;color:#E0C285;flex:none;margin-top:.3em}
.cta__way b{display:block;font-size:1.02rem;color:#FBF6EA;font-weight:600}
.cta__way span{font-size:.85rem;color:#D2C3AB;font-family:var(--f-mono);
  letter-spacing:.05em}
.cta__way:hover b{color:#EBD6AE}

.form{background:var(--paper);border-radius:var(--rad);padding:clamp(1.5rem,3vw,2.4rem);
  box-shadow:var(--shadow-2)}
.form__row{display:grid;gap:1rem}
@media (min-width:560px){.form__row--2{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.field label .req{color:var(--gold-ink)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--rad);
  padding:.8rem .9rem;width:100%;transition:border-color .3s var(--e-out),
  background .3s var(--e-out),box-shadow .3s var(--e-out)}
.field textarea{min-height:118px;resize:vertical}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6559' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--paper);
  box-shadow:0 0 0 3px rgba(176,132,52,.28)}
/* Keyboard users need a ring they can actually see. The gold glow above reads
   at about 1.1:1 against the field, which is invisible; this adds a real
   high-contrast outline for keyboard focus only, so mouse users see no change. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px}
.field input:user-invalid,.field textarea:user-invalid{border-color:#A33B2A}
.form__note{font-size:.78rem;color:var(--ink-3);margin:.9rem 0 0;line-height:1.5}
.form__ok{display:none;text-align:center;padding:2rem 1rem}
.form__ok svg{width:44px;height:44px;color:var(--brown-d);margin-bottom:1rem}
.form__ok h3{margin-bottom:.6rem;color:var(--ink)}
.form__ok p{color:var(--ink-2);font-size:.95rem;max-width:38ch;margin-inline:auto}
.form.sent .form__body{display:none}
.form.sent .form__ok{display:block}

/* ---- Footer ---- */
.ftr{background:var(--ink);color:#CBBCA4;padding-block:clamp(3rem,6vw,5rem) 2rem;
  position:relative;z-index:1}
.ftr__grid{display:grid;gap:2.5rem}
@media (min-width:720px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1040px){.ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.ftr .brand .mark{color:var(--gold-l)}
.ftr .brand:hover .mark{color:#FBF6EA}
.ftr .brand__c{color:#FBF6EA}
.ftr .brand__co{color:var(--gold-l)}
.ftr .brand__s{color:#A5947C;border-top-color:rgba(216,204,184,.28)}
.ftr h4{color:#FBF6EA;font-family:var(--f-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.15rem}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.ftr a{color:#CBBCA4;text-decoration:none;font-size:.9rem;transition:color .3s var(--e-out)}
.ftr a:hover{color:var(--gold-l)}
.ftr p{font-size:.9rem;line-height:1.6;max-width:36ch}
.ftr__bot{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(244,238,224,.15);display:flex;flex-wrap:wrap;
  gap:1rem 2rem;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:#A5947C}
.ftr__bot a{font-size:.66rem}
.lic{display:flex;align-items:flex-start;gap:.5rem;color:#DDCFB6}
.lic svg{margin-top:.22em}
.lic svg{width:14px;height:14px;color:var(--gold-l)}

/* ---- Utility ---- */
.center{text-align:center}
.center .kicker{justify-content:center}
.center .lede{margin-inline:auto}
.mt-l{margin-top:clamp(2rem,4vw,3rem)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bg-2{background:var(--paper-2)}
.bg-stone{background:var(--stone)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* Short screens: decorations must not collide */
@media (max-height:560px){.datum__label{display:none}}

/* ---- Review platforms line ---- */
.plats{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  margin:1.6rem 0 0;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.plats svg{width:14px;height:14px;color:var(--gold);flex:none}
.plat{color:var(--ink-2);font-weight:500;border:1px solid var(--line);
  border-radius:var(--rad);padding:.44rem .72rem;background:var(--paper);
  display:inline-flex;align-items:baseline;gap:.42rem;text-decoration:none;
  transition:border-color .2s var(--e-out),transform .2s var(--e-out)}
a.plat:hover{border-color:var(--gold);transform:translateY(-1px)}
.plat>b{font-family:var(--f-display);font-size:1rem;font-weight:600;
  letter-spacing:0;color:var(--gold-ink);line-height:1}
.plat>span{letter-spacing:.1em}
.plat>em{font-style:normal;opacity:.72;letter-spacing:.06em}
.plat--sum{background:var(--gold-ink);border-color:var(--gold-ink);color:#FBF6EA}
.plat--sum>b{color:#FBF6EA;font-size:1.06rem}
.plat--sum>em{opacity:.82}
.cta .plat--sum{background:var(--gold);border-color:var(--gold);color:var(--brown-d)}
.cta .plat--sum>b{color:var(--brown-d)}
.promise .plats,.cta .plats{color:#CDBFA8}
.promise .plat,.cta .plat{color:#F4EEE0;border-color:rgba(244,238,224,.24);background:transparent}
.plats .plat>b,.cta .plat>b{color:var(--gold-l)}

/* Heading LEVEL is semantic, heading SIZE is visual. These two were h4 and h3
   only because of how they looked; the levels changed to fix the document
   outline, so the appearance is restored here rather than in the markup. */
.foot__h{font-family:var(--f-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);
  line-height:1.4;margin:0 0 .9rem}
.price__t{font-family:var(--f-display);font-size:1.05rem;font-weight:600;
  line-height:1.2;letter-spacing:0}

/* if the Google embed is blocked or fails, the address stays visible behind it */
.mapwrap{position:relative;background:var(--stone)}
.mapwrap__fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;color:var(--ink-2);padding:1.5rem}
.mapwrap__fb b{font-size:1.05rem;color:var(--ink)}

/* ---- council a11y fixes ---- */
/* A11Y-01: the gold focus ring reads 2.7:1 on the dark sections - use parchment there */
.hero :focus-visible,.phero :focus-visible,.cta :focus-visible,
.foot :focus-visible,footer :focus-visible{outline-color:#F0E2C4}
/* A11Y-03: review platform chips reach a 44px touch target */
a.plat{min-height:44px;display:inline-flex;align-items:center}
/* A11Y-04: small inline phone links get a real tap area without moving layout */
main p a[href^="tel:"]{display:inline-block;padding-block:.55rem;margin-block:-.55rem}
/* A11Y-06: keyboard focus is never waiting on an entrance animation */
.has-sub:focus-within .sub{transition-duration:0s}
.js-reveal [data-rise]:focus-within,.js-reveal [data-fade]:focus-within,
.js-reveal [data-stagger] > :focus-within{opacity:1;transform:none;transition-duration:0s}

/* ---- photo-free page hero for the city pages ---- */
.phero--flat{background:
  radial-gradient(120% 130% at 85% -20%, #3A2B1C 0%, transparent 55%),
  linear-gradient(160deg,#2B2015 0%,#241A12 55%,#1E150E 100%)}
.phero--flat .phero__in{padding-top:clamp(7rem,16vh,10rem);padding-bottom:clamp(3.5rem,8vh,5.5rem)}
.phero--flat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,185,111,.5),transparent)}

/* linked city chips look like chips, not underlined text */
.cities li a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  margin:-.45rem -.7rem;padding:.45rem .7rem}
.cities li a::after{display:none}
.cities li:has(a){border-color:var(--gold-ink)}
.cities li a:hover{color:var(--gold-ink)}

/* worth-knowing depth blocks */
.know{display:grid;gap:clamp(1.8rem,3.5vw,2.6rem);margin-top:clamp(2rem,4vw,3rem)}
.know h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.55rem);margin-bottom:.55rem}
.know p+ h3{margin-top:1.2rem}

/* footer service-area list: every city, flowing text, pages linked */
.foot__cities{font-size:.82rem;line-height:1.9;color:#A5947C;max-width:34ch}
.foot__cities a{color:#D8CCB8}
.foot__cities a:hover{color:var(--gold)}