:root{ /* Ink and brass */
  --primary:#14233A;
  --primary-deep:#0D1828;
  --primary-hover:#20344F;
  --accent:#B8975E;
  --accent-deep:#9A7A42;
  --accent-text:#7A5E2C;
  --ground:#FBFAF7;
  --ground-alt:#F3F0EA;
  --surface:#FFFFFF;
  --ink:#1A2432;
  --ink-soft:#4D5766;
  --line:#E4DFD5;
  --line-strong:#CFC9BC;
  --on-primary:#F8F5EF;
  --on-primary-soft:#C9CED6;
  --line-on:rgba(201,173,122,.34);
}

@font-face{font-family:"Newsreader Display";src:url(fonts/newsreader-display-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-title-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic-300.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --display:"Newsreader Display",Georgia,"Times New Roman",serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --edge:clamp(20px,4.4vw,72px);
  --head:76px;
  --sec:clamp(56px,6.6vw,104px);
  --gap:14px;
  /* button colors on a light ground; dark grounds swap them */
  --b1:var(--primary);
  --b1-text:var(--on-primary);
  --b1-hover:var(--primary-hover);
  --b1-press:var(--primary-deep);
  --b2-text:var(--primary);
}
@media (min-width:900px){:root{--gap:clamp(20px,2.2vw,36px)}}
.close,.bar{--b1:var(--on-primary);--b1-text:var(--primary-deep);--b1-hover:#fff;--b1-press:var(--on-primary-soft);--b2-text:var(--on-primary)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--primary) var(--ground-alt)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;caret-color:var(--primary);overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:719px){html{scroll-padding:24px 0 72px}}
.q-col,.area-col{scroll-margin-top:40px}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,picture{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--primary);color:var(--on-primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.trust :focus-visible,.close :focus-visible,.foot :focus-visible,.bar :focus-visible{outline-color:var(--on-primary)}
h1,h2{font-family:var(--display);font-weight:300;letter-spacing:-.017em;text-wrap:balance}
h2{font-size:clamp(2rem,3.5vw,3.125rem);line-height:1.08;color:var(--primary)}
p{text-wrap:pretty}
.tnum{font-variant-numeric:lining-nums tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute}
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--primary);color:var(--on-primary);padding:12px 16px}
.skip:focus{top:12px}
.wrap{padding-inline:var(--edge)}
.sec{padding-block:var(--sec)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;color:var(--primary);white-space:nowrap}
.logo-word{font:400 1.3125rem/1 var(--serif);letter-spacing:-.006em}
.mark-arch{fill:currentColor}
.mark-a{fill:var(--mark-letter,var(--on-primary))}
.logo-rev{color:var(--on-primary);--mark-letter:var(--primary-deep)}

/* header: sits clear over the photo, turns solid once the page moves */
.head{position:absolute;z-index:30;inset:0 0 auto;display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);height:var(--head);padding-inline:var(--edge);color:var(--primary)}
.head::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ground);border-bottom:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(0,0,0,.35);opacity:0;transition:opacity .45s var(--out)}
.head .logo{margin-right:auto}
/* very large text: when the name won't fit beside the phone number it wraps to a second line, and that line is clipped */
.head .logo,.plain-head .logo{flex:0 1 auto;min-width:0;flex-wrap:wrap;align-content:flex-start;height:44px;overflow:hidden}
.head .logo-mark,.plain-head .logo-mark{flex:none;margin-block:7px}
.head-tel{flex:none}
.head-nav{display:none;gap:clamp(20px,2.4vw,36px)}
.head-nav a{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:.9375rem;font-weight:550;text-decoration:none;white-space:nowrap}
.head-nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--out)}
.head-tel{display:flex;align-items:center;min-height:44px;font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap}
@media (min-width:1000px){.head-nav{display:flex}}
@media (min-width:720px){
  html{scroll-padding-top:var(--head)}
  .head.fix{position:fixed}
  .head.solid::before{opacity:1}
  .head-tel{padding-left:clamp(20px,2.6vw,38px);border-left:0}
}
@media (max-width:719px){:root{--head:64px}}

/* first screen. Computer: dark words straight on the bright photo, starting on the same line as the second service card. */
.hero{position:relative;display:flex;min-height:max(100svh,540px);overflow:hidden;background:var(--ground)}
.hero-img,.hero-img img{position:absolute;inset:0;width:100%;height:100%}
.hero-img img{object-fit:cover;object-position:0 42%;transform-origin:30% 50%}
.hero::after{content:"";position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,0));pointer-events:none}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;padding:calc(var(--head) + clamp(18px,9.5vh,112px)) var(--edge) 28px max(calc(var(--edge) + (100% - 2*var(--edge) + var(--gap))/4),calc(.25*max(100vw,150vh)))}
.hero h1{font-size:clamp(2.25rem,min(4.25vw,8vh),6rem);line-height:1.035;color:var(--primary)}
.ln{display:block}
.hero-sub{max-width:20em;margin-top:clamp(14px,2.2vh,24px);font:italic 300 clamp(1.25rem,min(1.8vw,3.2vh),1.875rem)/1.24 var(--serif);color:var(--primary);text-wrap:balance}
.hero-line span{display:block}
.hero-line b{font-weight:500}
.hero-line{max-width:29em;margin-top:clamp(10px,1.6vh,16px);color:var(--ink);font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.45}
.hero-do{margin-top:clamp(20px,3.4vh,34px)}
.band-form{margin-top:6px}
.reply{margin-top:10px;font-size:.9375rem;line-height:1.35}
/* looks like a plain underlined phrase; the tap area is 44px tall without moving anything */
.hero-line a{position:relative;white-space:nowrap;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
.hero-line a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
/* computer: the photo stops short so the navy strip shows without scrolling */
@media (min-aspect-ratio:1001/1000) and (min-height:461px){.hero{min-height:max(calc(100svh - 96px),540px)}}

/* phones and upright tablets: a room you can see, darker toward the bottom, white words and both buttons under the thumb */
@media (max-aspect-ratio:1/1){
  .hero-img img{object-position:50% 0;transform-origin:50% 30%}
  .hero::after{height:128px;background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,0))}
  .hero-copy{justify-content:flex-end;padding:calc(var(--head) + 8px) var(--edge) calc(clamp(14px,2.4vh,26px) + env(safe-area-inset-bottom))}
  .hero-stack{--fade:170px;position:relative;color:#fff;--b1:#fff;--b1-text:var(--primary-deep);--b1-hover:var(--on-primary);--b1-press:var(--on-primary-soft);--b2-text:#fff}
  /* the room darkens into the strip's own navy: full colour before the hero ends, so there is no seam */
  .hero-stack::before{content:"";position:absolute;z-index:-1;inset:calc(-1*var(--fade)) calc(-1*var(--edge)) -60px;background:var(--primary);-webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.28) calc(var(--fade)*.45),rgba(0,0,0,.76) var(--fade),rgba(0,0,0,.92) calc(var(--fade) + 90px),#000 calc(var(--fade) + 170px));mask-image:linear-gradient(transparent,rgba(0,0,0,.28) calc(var(--fade)*.45),rgba(0,0,0,.76) var(--fade),rgba(0,0,0,.92) calc(var(--fade) + 90px),#000 calc(var(--fade) + 170px))}
  .hero-stack :focus-visible{outline-color:#fff}
  .hero h1{font-size:clamp(2rem,11vw,5rem);color:#fff;letter-spacing:-.012em}
  .hero-sub{max-width:27em;margin-top:clamp(8px,1.4vh,14px);font-size:clamp(1.0625rem,4.75vw,1.625rem);line-height:1.26;color:#fff;text-wrap:pretty}
  .hero-line{max-width:34em;margin-top:clamp(6px,1.1vh,12px);font-size:clamp(.90625rem,3.9vw,1.1875rem);line-height:1.42;color:#fff}
  .hero .reply{margin-top:8px;font-size:clamp(.875rem,3.85vw,1.0625rem)}
  .hero-do{margin-top:clamp(12px,2vh,20px)}
  .hero .more{color:#fff}
}
@media (max-aspect-ratio:1/1) and (max-width:600px){
  .hero{min-height:max(100svh,400px)}
  .hero .actions{display:grid;grid-auto-flow:row;gap:8px}
}
/* short phones: the two buttons share a row, so more of the room stays clear of the words */
@media (max-aspect-ratio:1/1) and (max-width:600px) and (max-height:720px){
  .hero .actions{grid-auto-flow:column;grid-template-columns:1.9fr 1fr;grid-auto-columns:auto}
  .hero .btn{min-height:48px;padding-inline:12px}
  .call-no{display:none}
  .hero h1{font-size:clamp(2rem,10.2vw,2.5rem)}
  .hero-stack{--fade:120px}
}
/* upright tablets: a calmer headline and whole lines */
@media (max-aspect-ratio:1/1) and (min-width:601px){
  .hero h1{font-size:clamp(3.5rem,8.2vw,5.5rem)}
  .hero-sub{font-size:clamp(1.5rem,3vw,2rem);max-width:none;text-wrap:balance}
  .hero-line{font-size:clamp(1.0625rem,2.1vw,1.25rem)}
}
@media (max-width:360px){
  .logo-word{font-size:1.1875rem}
  .head-tel{font-size:.875rem}
}
/* phones held sideways: tighter, and the buttons stay on the screen */
@media (max-height:460px) and (min-aspect-ratio:1/1){
  .hero{min-height:100svh}
  .hero-copy{padding-top:calc(var(--head) - 4px);padding-bottom:12px}
  .hero h1{font-size:clamp(1.75rem,9vh,2.5rem)}
  .hero-sub{max-width:24em;margin-top:6px;font-size:1.0625rem}
  .hero-line{display:none}
  .hero-do{margin-top:12px}
  .hero .btn{min-height:46px}
  .hero .btn-2{background:rgba(255,255,255,.92)}
}

@media (max-height:460px) and (min-aspect-ratio:1/1) and (max-width:600px){.hero-copy{padding-left:31%}.hero .actions{grid-auto-columns:auto}.call-no{display:none}}

/* buttons: one system. A solid primary, a much quieter outline, no icons. */
.actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:1px solid transparent;border-radius:999px;font-weight:550;font-size:1rem;line-height:1.15;letter-spacing:.004em;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .25s var(--out),border-color .25s var(--out),transform .25s var(--out)}
.btn-1{background:var(--b1);color:var(--b1-text)}
.btn-2{color:var(--b2-text);border-color:currentColor;border-color:color-mix(in srgb,currentColor 42%,transparent)}
.btn:active{transform:scale(.985)}
/* with a mouse the Text button shows the number, in case the click has nowhere to go */
.t-desk{display:none}
@media (hover:hover) and (pointer:fine){.t-touch{display:none}.t-desk{display:inline}}
.btn-1:active{background:var(--b1-press)}
.btn-2:active{background:color-mix(in srgb,currentColor 14%,transparent)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:.9375rem;color:var(--primary);text-decoration:none}
.more svg{flex:none;transition:transform .45s var(--out)}
/* hover only where there is a real pointer, so nothing stays lit after a tap */
@media (hover:hover){
  .btn-1:hover{background:var(--b1-hover)}
  .btn-2:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 7%,transparent)}
  .head-nav a:hover::after{transform:scaleX(1)}
  .head-tel:hover{text-decoration:underline}
  .more:hover{text-decoration:underline}
  .more:hover svg{transform:translateX(3px)}
  .q-list summary:hover{text-decoration:underline;text-decoration-thickness:1px}
  .close-tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
  .ba-tabs button[aria-pressed=false]:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
}

/* trust strip: the same columns as the service cards below it */
.trust{background:var(--primary);color:var(--on-primary)}
.trust-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--edge)}
.trust-in li{position:relative;display:flex;align-items:center;min-height:72px;padding:12px 0;font:400 1.0625rem/1.22 var(--serif);text-wrap:balance}
.trust-in li:nth-child(even)::before{content:"";position:absolute;top:14px;bottom:14px;left:calc(var(--gap)/-2);width:1px;background:var(--line-on)}
@media (max-width:899px){.trust-in li:nth-child(n+3){border-top:1px solid var(--line-on)}}
@media (min-width:900px){
  .trust-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .trust-in li{min-height:96px;padding:0;font-size:clamp(1.125rem,1.45vw,1.375rem)}
  .trust-in li:not(:first-child)::before{content:"";position:absolute;top:26px;bottom:26px;left:calc(var(--gap)/-2);width:1px;background:var(--line-on)}
}

/* section heads */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:clamp(26px,3.4vw,52px)}
.sec-head p{max-width:30em;color:var(--ink-soft)}
@media (min-width:900px){.sec-head{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;gap:clamp(32px,6vw,96px)}.sec-head p{justify-self:end;padding-bottom:.35em}}

/* phones: the call and text buttons do this job, so the header is just the logo */
@media (max-width:599px){.head-tel{display:none}}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.svc{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.svc-do{padding-bottom:26px;align-self:start}
.svc:nth-last-child(-n+2) .svc-do{padding-bottom:0}
@media (min-width:900px){.svc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.svc .svc-do{padding-bottom:0}}
.ph{overflow:hidden;aspect-ratio:4/5;background:var(--ground-alt)}
.svc-flagged{position:relative}
.svc-flag{position:absolute;top:8px;left:8px;z-index:1;padding:4px 9px;border-radius:999px;background:var(--primary);color:#fff;font-size:.8125rem;font-weight:600;line-height:1.3;white-space:nowrap}
.ph img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.ph img{transition:transform 1.4s var(--out)}.svc:hover .ph img{transform:scale(1.025)}}
.svc h3{margin-top:14px;font:400 clamp(1.1875rem,1.65vw,1.5rem)/1.16 var(--serif);letter-spacing:-.006em;color:var(--primary);text-wrap:balance}
.svc-line{margin-top:5px;font-size:.9375rem;line-height:1.42;color:var(--ink-soft)}
.svc-price{display:block;margin-top:6px;font-weight:600;color:var(--primary);font-variant-numeric:lining-nums}
.inc{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inc summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-size:.9375rem;font-weight:550;color:var(--primary)}
.inc summary::-webkit-details-marker,.q-list summary::-webkit-details-marker{display:none}
summary svg{flex:none;color:var(--accent-text);transition:transform .45s var(--out)}
details[open]>summary svg{transform:rotate(135deg)}
.inc-list{padding:2px 0 14px;font-size:.875rem;line-height:1.34;color:var(--ink-soft)}
.inc-list h4{margin:12px 0 4px;font:550 .9375rem/1.3 var(--sans);color:var(--accent-text)}
.inc-list h4:first-child{margin-top:4px}
.inc-list li{padding:2.5px 0}
.inc-note{margin-top:12px;color:var(--ink)}
.svc .more{margin-top:2px}
/* phones: one service per row, a small photo beside the words, the opened list full width */
@media (max-width:599px){
  .svc-grid{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .svc{grid-row:auto;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:14px}
  .ph{grid-row:1/4;align-self:start}
  .svc-flag{top:0;left:auto;right:0}
  .svc-flagged h3{padding-right:104px}
  .svc h3{margin-top:0}
  .svc-do{display:contents}
  .svc .more{grid-column:2;grid-row:3;align-self:end;justify-self:start;margin-top:0}
  .inc{grid-column:1/-1;grid-row:4}
  .inc-list{font-size:1rem;line-height:1.4;color:var(--ink)}
}

/* before and after */
.ba-sec{background:var(--surface)}
.ba-copy>p{margin-top:12px;max-width:27em;color:var(--ink-soft)}
.ba-copy .ba-how{margin-top:8px;font-size:.9375rem}
.ba-how[hidden]{display:none}
.ba{margin-top:22px}
.ba-tabs{display:flex;flex-wrap:wrap;gap:0 26px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.ba-tabs[hidden]{display:none}
.ba-tabs button{position:relative;min-height:44px;padding:0;background:none;border:0;font-size:.9375rem;font-weight:550;color:var(--primary);cursor:pointer}
.ba-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--out)}
.ba-tabs button[aria-pressed=true]::after{transform:scaleX(1)}
.ba-stage{--v:50;--x:calc(28px + (100% - 56px)*var(--v)/100);position:relative;aspect-ratio:1400/933;background:var(--ground-alt);overflow:hidden;user-select:none;-webkit-user-select:none}
.ba-layer{position:absolute;inset:0}
.ba-layer img{width:100%;height:100%;object-fit:cover}
.ba-before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.chip,.ba-label{position:absolute;padding:5px 9px;font-size:.71875rem;font-weight:600;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}
.chip{bottom:10px;background:var(--primary-deep);color:var(--on-primary)}
.chip-before{left:10px}
.chip-after{right:10px;background:var(--surface);color:var(--primary-deep)}
.ba-label{z-index:2;top:10px;left:10px;background:var(--surface);color:var(--primary-deep);pointer-events:none}
.ba-handle{display:none;position:absolute;z-index:1;top:0;bottom:0;left:var(--x);width:1px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.4);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--primary);box-shadow:0 6px 18px -4px rgba(0,0,0,.4)}
/* On a phone only the handle grabs, so a swipe that starts elsewhere on the picture just scrolls the page. With a mouse, click anywhere. */
.ba-input{display:none;position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}
.ba-input::-webkit-slider-runnable-track{height:100%;background:transparent}
.ba-input::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;background:transparent;border:0;cursor:ew-resize;pointer-events:auto}
.ba-input::-moz-range-track{height:100%;background:transparent}
.ba-input::-moz-range-thumb{width:56px;height:100%;background:transparent;border:0;border-radius:0;cursor:ew-resize;pointer-events:auto}
@media (hover:hover){.ba-input{pointer-events:auto;cursor:ew-resize}}
.live .ba-handle,.live .ba-input{display:block}
.ba-input:focus-visible~.ba-handle .ba-knob{outline:2px solid var(--primary);outline-offset:2px}
.ba figcaption{margin-top:10px;font-size:.875rem;line-height:1.42;color:var(--ink-soft)}
@media (min-width:1000px){
  .ba-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,5vw,88px);align-items:start}
  .ba{margin:0}
  .chip,.ba-label{font-size:.75rem;padding:6px 11px}
  .chip{bottom:14px}.chip-before{left:14px}.chip-after{right:14px}
  .ba-label{top:14px;left:14px}
}

/* how it works: a smaller heading in the left column, the steps on the right */
.how-head h2{font-size:clamp(1.75rem,2.5vw,2.375rem)}
.how-head p{margin-top:8px;max-width:22em;color:var(--ink-soft)}
.steps{display:grid;margin-top:clamp(16px,2.6vw,36px)}
.steps li{display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:0 8px;padding:14px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.step-n{font:300 1.75rem/1 var(--display);font-variant-numeric:lining-nums;color:var(--accent-text)}
.steps p{font:400 1.0625rem/1.38 var(--serif);color:var(--ink)}
@media (min-width:900px){
  .how-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(40px,5vw,88px);align-items:start}
  .steps{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:0}
  .steps li,.steps li:last-child{display:block;padding:16px 0 0;border-bottom:0;border-top:1px solid var(--primary)}
  .step-n{display:block;font-size:2.5rem;margin-bottom:10px}
  .steps p{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.36}
}

/* questions and area */
.qa{background:var(--ground-alt)}
.qa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.q-list{margin-top:14px;border-top:1px solid var(--line-strong)}
.q-list details{border-bottom:1px solid var(--line-strong)}
.q-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:9px 0;cursor:pointer;list-style:none;font:400 1.125rem/1.25 var(--serif);color:var(--primary)}
.q-list details p{padding:0 36px 16px 0;color:var(--ink-soft);max-width:34em}
details[open]>:not(summary){animation:open .5s var(--out) both}
.area-col>p{margin-top:12px;color:var(--ink-soft)}
/* each dot sits before its city, and a dot that would start a line is clipped away */
.cities{--dot:.9em;display:flex;flex-wrap:wrap;column-gap:var(--dot);overflow:hidden;margin:14px 0 6px;font:400 1.125rem/1.56 var(--serif);color:var(--primary)}
.cities li{position:relative;white-space:nowrap}
.cities li::before{content:"\00B7";position:absolute;left:calc(var(--dot)*-.62);color:var(--accent-deep)}
.qa h2{font-size:clamp(1.75rem,2.5vw,2.375rem)}
@media (min-width:900px){
  .qa-grid{grid-template-columns:7fr 5fr;gap:clamp(48px,7vw,120px)}
  .q-list{margin-top:22px}
  .q-list summary{font-size:1.25rem;min-height:64px}
  .cities{margin-top:22px;font-size:1.3125rem}
  .area-col>p{margin-top:22px}
}

/* closing band */
.close{background:var(--primary);color:var(--on-primary);padding-block:clamp(44px,5.6vw,84px)}
.close-in{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.close h2{font-size:clamp(1.25rem,1.9vw,1.625rem);font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:0;line-height:1.2;color:var(--accent)}
.close-tel{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font:300 min(13vw,6.75rem)/1.02 var(--display);letter-spacing:-.024em;text-decoration:none;font-variant-numeric:lining-nums;white-space:nowrap}
.close-do{display:grid}
.close .actions,.plain .actions{display:grid;grid-auto-flow:row}
@media (min-width:560px){.close .actions,.plain .actions{display:inline-grid;grid-auto-flow:column;justify-self:start}}
@media (min-width:1000px){.close-tel{font-size:clamp(4.5rem,6.4vw,6.75rem)}}
@media (min-width:1200px){
  .close-in{grid-template-columns:1fr auto;align-items:end;gap:48px}
  .close-do{padding-bottom:12px}
}

/* quote form, when it's on */
.quote{background:var(--surface)}
.quote-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.quote-head p{margin-top:12px;max-width:27em;color:var(--ink-soft)}
.quote form{display:grid;gap:16px 20px;max-width:46rem}
.f{display:grid;gap:6px}
.f label{font-size:.9375rem;font-weight:550;color:var(--primary)}
.f small{font-size:inherit;font-weight:500;color:var(--ink-soft)}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:12px 14px;background:var(--ground);border:1px solid var(--line-strong);border-radius:2px;transition:border-color .3s var(--out)}
.f textarea{min-height:92px;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--primary)}
.quote .trap{display:none}
.quote button{justify-self:start;min-width:170px}
.quote button:disabled{opacity:.6;cursor:progress}
.note{padding:14px 16px;font-weight:600;line-height:1.35}
.note[hidden]{display:none}
.note.ok{background:var(--primary);color:var(--on-primary)}
.note.bad{background:var(--surface);color:#8A2015;border:1px solid #A5281B}
.reach{display:flex;flex-wrap:wrap;gap:0 24px}
.reach a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.fine{font-size:.875rem;line-height:1.45;color:var(--ink-soft)}
.fine a{padding-block:13px}
@media (min-width:720px){.quote form{grid-template-columns:1fr 1fr}.f-wide,.note,.fine{grid-column:1/-1}}
@media (min-width:1000px){.quote-grid{grid-template-columns:4fr 8fr;gap:clamp(40px,5vw,88px)}}

/* footer */
.foot{background:var(--primary-deep);color:var(--on-primary-soft);padding-block:22px calc(22px + env(safe-area-inset-bottom));font-size:.875rem;line-height:1.45}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-primary)}
@media (min-width:900px){.foot-in{grid-template-columns:auto 1fr auto;align-items:center;gap:40px}}

/* phone call/text bar: the same two buttons */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px var(--edge) calc(8px + env(safe-area-inset-bottom));background:var(--primary-deep);border-top:1px solid var(--line-on);transition:transform .45s var(--out)}
.bar.off{transform:translateY(110%);visibility:hidden;transition:transform .25s ease-in,visibility 0s .25s}
.bar .btn{min-height:46px;padding-inline:12px}
@media (min-width:720px){.bar{display:none}}

/* motion: opacity and transform only, once, nothing bounces */
.rv{transition:opacity .9s var(--out),transform .9s var(--out)}
.rv-hide{opacity:0;transform:translateY(16px)}
.svc-grid .rv:nth-child(2){transition-delay:70ms}
.svc-grid .rv:nth-child(3){transition-delay:140ms}
.svc-grid .rv:nth-child(4){transition-delay:210ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fade{from{opacity:0}}
@keyframes open{from{opacity:0;transform:translateY(-4px)}}
@keyframes drift{from{transform:scale(1.05)}}
@media (prefers-reduced-motion:no-preference){
  .hero-img img{animation:fade 1.2s ease-out both,drift 20s cubic-bezier(.2,.6,.3,1) both}
  .ln{animation:rise 1.1s var(--out) both}
  .ln:nth-child(1){animation-delay:.12s}
  .ln:nth-child(2){animation-delay:.2s}
  .hero-sub{animation:rise 1.1s var(--out) .42s both}
  .hero-line{animation:rise 1.1s var(--out) .5s both}
  .hero-do{animation:rise 1.1s var(--out) .58s both}
  .head>*{animation:fade 1s ease-out .1s both}
}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-hide{transition:none;opacity:1;transform:none}
  .svc:hover .ph img,.more:hover svg,.btn:active{transform:none}
  summary svg,.head-nav a::after,.ba-tabs button::after,.btn,.more svg{transition:none}
  details[open]>:not(summary){animation:none}
  .head::before,.bar,.bar.off{transition:none}
}
@media print{
  .rv-hide{opacity:1;transform:none}
  .bar{display:none}
  .head{position:absolute}
}

/* small pages: privacy, thanks, not found */
body.page{display:flex;flex-direction:column;min-height:100svh}
.plain-head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--head);padding-inline:var(--edge);background:var(--ground);border-bottom:1px solid var(--line);color:var(--primary)}
.plain{flex:1;width:100%;max-width:calc(42rem + 2*var(--edge));margin-inline:auto;padding:clamp(44px,7vw,84px) var(--edge) clamp(60px,9vw,108px)}
.plain h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.06;color:var(--primary)}
.plain h2{margin-top:32px;font:400 1.375rem/1.2 var(--serif);letter-spacing:-.005em;color:var(--primary)}
.plain p{margin-top:10px;color:var(--ink-soft)}
.plain p a{color:var(--primary)}
.plain .actions{margin-top:26px}
.plain-foot{padding:22px var(--edge);background:var(--primary-deep);color:var(--on-primary-soft);font-size:.875rem}
.plain-foot p{margin:0}