/* Self hosted, preloaded. Google Fonts swapping late was shifting the hero
   headline and everything under it by 0.157. */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Value House Painting, Rigal Media
   Direction: Editorial primary, Human made secondary.
   Palette sampled from the client wordmark: warm near black, red roof line, bone grounds. */

:root{
  --brand:#C0202B;        /* accent. buttons, links, rules. nowhere decorative */
  --brand-ink:#9A1621;    /* accent hover */
  --brand-bright:#D62F39; /* accent on dark grounds. 3:1 vs ink, 4.9:1 for white text */
  --brand-pale:#E88D94;   /* accent on dark, for large type */
  --brand-deep:#75121A;   /* red wash. passes white body text */
  --ink:#1B1A18;          /* warm near black. never #000 */
  --ink-soft:#2A2825;
  --body:#4E4B46;         /* body text on light grounds */
  --muted:#58534C;
  --paper:#F4F1EC;        /* light ground A, warm bone */
  --card:#FFFFFF;         /* light ground B */
  --line:#E2DCD2;
  --bar:#EADFCE;          /* heading highlighter */
  --font-display:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --container:1180px;
  --r:2px;                /* buttons and inputs stay hard edged */
  --r-card:15px;          /* containers are soft, so the shape says what is clickable */
  --shadow:0 18px 50px -24px rgb(27 26 24 / .45); /* one resting shadow budget */
  --shadow-hover:0 16px 34px -12px rgb(27 26 24 / .26), 0 4px 10px -5px rgb(27 26 24 / .16);
  --star-ink:#8A5A0B;     /* stars on light grounds: 5.25:1 on bone, 5.9:1 on white */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--card);color:var(--body);
  font-family:var(--font-body);
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-ink)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  color:var(--ink);line-height:1.08;margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.025em;
}
h1,.h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2,.h2{font-size:clamp(2rem,4vw,3rem)}
h3,.h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2}
p{margin:0 0 1.1em;max-width:68ch}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.narrow{max-width:660px;margin-inline:auto}
.center{text-align:center}
.tx{position:relative;isolation:isolate;overflow:hidden}

/* ---------- eyebrow + heading bar ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 14px;
}

.on-dark .eyebrow{color:rgb(255 255 255 / .72)}
/* The red roof stroke that used to sit above every section label was removed
   on 12 Oct 2026 at the client's request. The label now carries itself.
   The roof mark survives only as a list bullet (.checks, .hero-steps, .dd-grid). */
.eyebrow.center,.center .eyebrow{justify-content:center}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark p{color:rgb(255 255 255 / .9)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:16px 28px;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;min-height:52px;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero .btn-primary,.on-dark .btn-primary,.site-header .btn-primary,.callbar{
  background:var(--brand-bright);border-color:var(--brand-bright)}
.hero .btn-primary:hover,.on-dark .btn-primary:hover,.site-header .btn-primary:hover{
  background:#EE4B55;border-color:#EE4B55}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .55)}
.btn-ghost:hover{background:rgb(255 255 255 / .12);color:#fff}
.btn-ghost-ink{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost-ink:hover{background:var(--paper);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- header ---------- */
.site-header{position:absolute;inset:0 0 auto;z-index:30;padding:18px 0}
.site-header::before{
  content:"";position:absolute;inset:-10px 0 auto;height:196px;z-index:-1;pointer-events:none;
  background:linear-gradient(rgb(16 15 13/.92),rgb(16 15 13/.80) 50%,rgb(16 15 13/.30) 82%,rgb(16 15 13/0));
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:206px}
.nav{display:flex;align-items:center;gap:28px}
.nav a{
  font-family:var(--font-body);font-size:.95rem;font-weight:500;
  color:#fff;text-decoration:none;
}
.nav a:hover{color:#fff;text-decoration:underline}
.nav .btn{padding:12px 20px;min-height:44px;font-size:.92rem}
.nav-toggle{display:none}

/* ---------- service areas dropdown ---------- */
.hasmenu{position:relative;display:flex;align-items:center}
.navbtn{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:.95rem;font-weight:500;color:#fff;
}
.navbtn:hover,.navbtn[aria-expanded="true"]{text-decoration:underline}
.caret{
  width:9px;height:9px;border-right:2px solid var(--brand-bright);border-bottom:2px solid var(--brand-bright);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
}
.navbtn[aria-expanded="true"] .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.dropdown{
  position:absolute;top:calc(100% + 18px);left:50%;translate:-50% 0;z-index:40;width:min(520px,86vw);
  background:var(--ink);border:1px solid rgb(255 255 255/.14);border-top:3px solid var(--brand);
  border-radius:var(--r-card);padding:20px 22px 8px;
  box-shadow:0 26px 60px rgb(14 13 12/.45);
}
.dropdown::before{ /* the pointer, cut from the same ink as the panel */
  content:"";position:absolute;top:-8px;left:50%;translate:-50% 0;width:14px;height:14px;
  background:var(--brand);rotate:45deg;
}
.dd-head{
  margin:0 0 14px;font-family:var(--font-body);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgb(255 255 255/.6);
}
.dd-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.dd-grid a{
  display:block;padding:9px 10px 9px 24px;min-height:44px;line-height:1.5;position:relative;
  font-family:var(--font-body);font-size:.95rem;color:rgb(255 255 255/.9);text-decoration:none;
  border-radius:6px;
}
.dd-grid a::before{ /* the roof mark, doing the bullet's job */
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:15px;height:8px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cpath d='M2 21 L26 4 L50 21 L70 21' fill='none' stroke='%23E8737B' stroke-width='4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") left center/contain no-repeat;
  transition:opacity .15s ease;
}
.dd-grid a:hover,.dd-grid a:focus-visible{background:rgb(255 255 255/.07);color:#fff}
.dd-grid a:hover::before,.dd-grid a:focus-visible::before{opacity:1}
.dd-foot{
  display:block;margin:12px -22px 0;padding:14px 22px;border-top:1px solid rgb(255 255 255/.12);
  font-family:var(--font-body);font-size:.88rem;color:rgb(255 255 255/.72);text-decoration:none;
}
.dd-foot:hover{color:#fff;background:rgb(255 255 255/.05)}
@media (prefers-reduced-motion:reduce){.caret,.dd-grid a::before{transition:none}}


/* ---------- kicker, display, pain ----------
   GBP Core Alignment: the H1 is the capsule and carries the category plus the
   place. The display headline below it is written for a human, with one word
   emphasised. The line after it names the visitor's problem. */
.kicker{
  display:flex;align-items:center;gap:9px;margin:0 0 20px;width:max-content;max-width:100%;
  padding:9px 18px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);
  font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.on-dark .kicker,.hero .kicker{
  border-color:rgb(255 255 255/.28);background:rgb(20 19 17/.46);color:#fff;
  backdrop-filter:blur(2px);
}
.display{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(2.1rem,4.1vw,3.4rem);line-height:1.08;margin:0 0 .42em;color:var(--ink);
}
.on-dark .display,.hero .display{color:#fff}
.display em{font-style:normal;color:var(--brand)}
.on-dark .display em,.hero .display em{color:var(--brand-pale)}
.pain{
  font-family:var(--font-body);font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.52;
  max-width:50ch;margin:0;color:var(--body);
}
.on-dark .pain,.hero .pain{color:rgb(255 255 255/.88)}
@media (max-width:760px){
  .kicker{font-size:.7rem;padding:8px 14px 8px 11px;margin-bottom:16px;letter-spacing:.1em}
  .display{font-size:clamp(1.85rem,7vw,2.4rem)}
  .pain{font-size:1rem}
}

/* ---------- hero ---------- */
.hero{display:flex;align-items:center;color:#fff;
  min-height:min(88vh,880px);padding:clamp(96px,16svh,150px) 0 clamp(16px,6svh,72px)}
.hero-stack>.hero{min-height:0}
.hero .kicker{margin-bottom:clamp(9px,1.7svh,20px)}
.hero .display{font-size:clamp(1.42rem,min(4.2vw,5.4svh),3.4rem);line-height:1.06;margin-bottom:clamp(.16em,1.5svh,.4em)}
.hero .pain{font-size:clamp(.88rem,min(1.3vw,2.1svh),1.16rem)}
.hero .btn-row{margin-top:clamp(14px,3svh,34px)}
.hero .proof{margin-top:clamp(10px,2.2svh,26px);padding-top:clamp(8px,1.8svh,22px)}
.hero .tx-media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(20 19 17/.90) 0%,rgb(20 19 17/.78) 34%,rgb(20 19 17/.30) 66%,rgb(20 19 17/.10) 100%);
}
.hero>.wrap{width:100%}
.hero .copy{max-width:600px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero .lede{font-size:1.18rem;color:rgb(255 255 255 / .92);max-width:48ch}
.proof{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgb(255 255 255 / .22);
  font-family:var(--font-body);font-size:.95rem;color:rgb(255 255 255 / .92);
}
.proof b{color:#fff;font-weight:700}
.stars{color:#F0C04A;letter-spacing:.05em}

/* The hero and the marquee are one screen. The marquee sits on the fold line
   instead of being the first thing you scroll to. */
.hero-stack{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.hero-stack>.hero{flex:1 0 auto;min-height:0}
.hero-stack>.marquee{flex:none}
/* On a very short screen the hero copy alone needs the whole viewport, so the
   one screen rule is released rather than cutting any of it. */
@media (max-height:560px){
  /* a short window gets a compact header so the hero copy still clears it */
  .site-header{padding:10px 0}
  .brand img{width:150px}
  .hero{padding-top:clamp(79px,17svh,150px);padding-bottom:16px}
  .hero .copy{max-width:min(960px,95vw)}
  .hero .display{font-size:clamp(1.3rem,4.7svh,2.3rem)}
  .hero::before{background:linear-gradient(90deg,rgb(20 19 17/.94) 0%,rgb(20 19 17/.9) 52%,rgb(20 19 17/.72) 100%)}
}
/* a small phone needs more than one screen for the copy, so the rule lifts there */
@media (max-width:560px) and (max-height:700px){.hero-stack{min-height:0}}
@media (max-height:400px){.hero-stack{min-height:0}}

/* ---------- why: a section with hero weight ---------- */
.why-hero{
  --sd-pad:clamp(78px,9vw,120px);
  padding:clamp(78px,9vw,120px) 0 clamp(96px,11vw,150px);
  background-color:#E7E1D6;
  background-image:
    radial-gradient(86% 64% at 78% 4%, rgb(255 253 249/.62) 0%, rgb(255 253 249/0) 58%),
    url("../images/tx/wall-greige.webp");
  background-size:auto, 512px 512px;
  background-repeat:no-repeat, repeat;
}
.why-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(620px,52vw);aspect-ratio:1.9/1;left:-120px;top:30px;opacity:.055;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 100'%3E%3Cpath d='M4 62 L58 10 L112 62 M58 10 L58 4 M112 62 L186 62' fill='none' stroke='%231B1A18' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.why-hero>.wrap{position:relative;z-index:1}
.why-split{display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.why-split .display{margin-bottom:.34em}
.why-split .pain{max-width:46ch;margin-bottom:1.1em}
.why-note{font-size:1rem;color:var(--muted);max-width:46ch;margin:0}
.why-split .btn-row{margin-top:30px}

.why-media{position:relative;margin:0;border-radius:var(--r-card);overflow:visible}
.why-media img{
  display:block;width:100%;height:clamp(400px,42vw,540px);object-fit:cover;object-position:50% 30%;
  border-radius:var(--r-card);
  /* the rake is the pitch off the wordmark, the same cut the hero uses */
  clip-path:polygon(0 30%,34% 0,100% 0,100% 100%,0 100%);
}
.why-facts{
  position:absolute;left:clamp(16px,4%,34px);right:clamp(16px,4%,34px);bottom:-34px;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgb(255 255 255/.13);border:1px solid rgb(255 255 255/.13);
  border-top:3px solid var(--brand);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow);
}
.why-facts>div{background:var(--ink);padding:17px 20px}
.why-facts dt{
  font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:#fff;
  line-height:1.2;margin-bottom:5px;letter-spacing:-.01em;
}
.why-facts dd{margin:0;font-family:var(--font-body);font-size:.8rem;line-height:1.45;color:rgb(255 255 255/.74)}

@media (max-width:900px){
  .why-split{grid-template-columns:1fr;gap:38px}
  .why-media img{height:clamp(300px,58vw,420px);clip-path:polygon(0 22%,38% 0,100% 0,100% 100%,0 100%)}
}
@media (max-width:560px){
  .why-facts{position:static;margin-top:16px;grid-template-columns:1fr;box-shadow:none}
  .why-hero{padding-bottom:clamp(64px,9vw,90px)}
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink);color:#fff;overflow:hidden;position:relative;
  border-top:3px solid var(--brand);
}
.marquee-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex:none;padding:15px 0}
.mq-set a,.mq-set span{
  font-family:var(--font-body);font-size:.9rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.mq-set a{color:#fff;text-decoration:none;padding:4px 2px}
.mq-set a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px}
.mq-set .dot{color:var(--brand);margin:0 22px;font-size:1.1rem;letter-spacing:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .mq-set[aria-hidden="true"]{display:none}
  .mq-set{flex-wrap:wrap;justify-content:center;gap:4px}
}

/* ---------- section grounds ---------- */
.s{padding:clamp(64px,8vw,104px) 0}
.s-paper{
  background-color:#F4F1EC;
  background-image:
    radial-gradient(92% 72% at 20% 8%, rgb(255 253 250/.75) 0%, rgb(255 253 250/0) 62%),
    url("../images/tx/wall-paper.webp");
  background-size:auto, 512px 512px;
  background-repeat:no-repeat, repeat;
}
.s-band{background-color:var(--ink-soft);background-image:url("../images/tx/wall-ink.webp");background-size:512px 512px}
.s-card{background:var(--card)}

/* ---------- section dividers ----------
   The seam between two grounds is cut at the roof pitch from the wordmark, so
   the shape is a brand mark rather than a generic slope. The section is pulled
   up over the one above it and clipped, which keeps both textures intact. */
.sd{--sd-h:clamp(40px,5vw,72px);--sd-pad:clamp(64px,8vw,104px);position:relative;z-index:1}

/* roof: a peak at 35 degrees rises into the section above */
.sd-roof{
  --sd-w:calc(var(--sd-h) * 2.86);
  margin-top:calc(var(--sd-h) * -1);
  padding-top:calc(var(--sd-pad) + var(--sd-h));
  clip-path:polygon(
    0 var(--sd-h),
    calc(50% - var(--sd-w) / 2) var(--sd-h),
    50% 0,
    calc(50% + var(--sd-w) / 2) var(--sd-h),
    100% var(--sd-h),
    100% 100%, 0 100%);
}
/* tilt: the whole top edge rakes, the shallow version of the same cut */
.sd-tilt{
  margin-top:calc(var(--sd-h) * -1);
  padding-top:calc(var(--sd-pad) + var(--sd-h));
  clip-path:polygon(0 var(--sd-h), 100% 0, 100% 100%, 0 100%);
}
.sd-tilt.is-left{clip-path:polygon(0 0, 100% var(--sd-h), 100% 100%, 0 100%)}

/* tilt opacity: a ghosted rake trailing the real one, drawn on the section above */
.sd-ghost{position:relative}
.sd-ghost::after{
  content:"";position:absolute;inset:auto 0 0;height:clamp(44px,5.6vw,78px);z-index:2;pointer-events:none;
  background:rgb(255 255 255/.09);
  clip-path:polygon(0 100%, 100% 26%, 100% 100%);
}
.sd-ghost.on-light::after{background:rgb(27 26 24/.055)}

@media (max-width:760px){.sd{--sd-h:32px}}
@media (prefers-reduced-motion:no-preference){.sd{will-change:auto}}
.s-mark{background:var(--card);position:relative}
.s-mark::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(520px,46vw);aspect-ratio:1.9/1;right:-70px;top:50%;translate:0 -50%;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 100'%3E%3Cpath d='M4 62 L58 10 L112 62 M58 10 L58 4 M112 62 L186 62' fill='none' stroke='%231B1A18' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.s-mark>.wrap{position:relative;z-index:1}
.s-wash{color:#fff;background:var(--wash,var(--brand-deep))}
.s-wash>.tx-media{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(.68) brightness(.78);mix-blend-mode:luminosity;opacity:var(--photo,.3);
}
.s-wash.is-ink{--wash:var(--ink);--photo:.22}
.s-band{color:#fff}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trust>div{background:var(--card);padding:30px 26px}
.trust dt{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);font-weight:600;margin-bottom:6px;line-height:1.15}
.trust dd{margin:0;font-size:.95rem;color:var(--muted)}

/* ---------- grids ---------- */
.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}

/* service cards */
.svc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.svc:hover,.svc:focus-visible{
  box-shadow:var(--shadow-hover);transform:translateY(-3px);
  border-color:rgb(27 26 24/.12);color:inherit;
}
.svc figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.svc figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover figure img{transform:scale(1.04)}
.svc .pad{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.svc h3{margin-bottom:.4em}
.svc p{font-size:1rem;color:var(--body);margin-bottom:1.2em}
.svc .more{
  margin-top:auto;font-family:var(--font-body);font-weight:600;font-size:.92rem;
  color:var(--brand);display:inline-flex;align-items:center;gap:7px;
}
.svc:hover .more{color:var(--brand-ink)}
.svc .more::after{content:"\2192";transition:transform .2s ease}
.svc:hover .more::after{transform:translateX(4px)}

/* process */
.step{border-top:2px solid var(--ink);padding-top:22px}
.on-dark .step{border-top-color:var(--brand-bright)}
.on-dark .step .n{color:var(--brand-pale)}
.step .n{
  font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--brand);
  font-weight:600;display:block;margin-bottom:12px;
}
.step h3{font-size:1.15rem;margin-bottom:.45em}
.step p{font-size:1rem;margin:0}

/* testimonials */
.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px;display:flex;flex-direction:column}
.quote blockquote{margin:0 0 18px;font-family:var(--font-display);font-size:1.12rem;line-height:1.5;color:var(--ink)}
.quote blockquote::before{content:"\201C";color:var(--brand);font-size:2.4rem;line-height:0;vertical-align:-.25em;margin-right:.08em}
.quote figcaption{margin-top:auto;font-family:var(--font-body);font-size:.88rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- proof section: Google rating, Nextdoor record, review carousel ----------
   One proof moment instead of two weak ones. Structure taken from the
   Castroville reviews block; the ground stays light because the sections above
   and below it are both dark. */
.proof-split{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:clamp(32px,4vw,58px);align-items:center}
.proof-copy .display{margin-bottom:.5em;max-width:13ch}
.proof-copy .btn-row{margin-top:30px;flex-direction:column;align-items:stretch;max-width:300px;gap:10px}

.g-lock{display:flex;align-items:center;gap:16px;margin:0 0 26px}
.g-rate{
  font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,5.4vw,4rem);
  line-height:.92;letter-spacing:-.03em;color:var(--ink);margin:0;
}
.g-lock .stars{margin:0;color:var(--star-ink);font-size:1.06rem;letter-spacing:.08em}
.g-src{
  margin:5px 0 0;font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.nd-line{margin:16px 0 0;font-size:1rem;color:var(--body);max-width:44ch}
.nd-line b{color:var(--ink)}

/* review cards */
.rev-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 26px 24px;display:flex;flex-direction:column;flex:1;
  box-shadow:0 10px 26px -18px rgb(27 26 24/.3);
}
.rev-stars{margin:0 0 14px;color:var(--star-ink);font-size:1rem;letter-spacing:.1em;line-height:1}
.rev-card blockquote{
  margin:0 0 20px;font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--ink-soft);
}
.rev-card mark{
  background:var(--bar);color:inherit;padding:.08em .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.rev-card figcaption{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--font-body);line-height:1.4;
}
.rev-card figcaption b{display:block;font-size:.95rem;font-weight:700;color:var(--ink)}
.rev-card figcaption span{display:block;margin-top:3px;font-size:.82rem;color:var(--muted)}

.carousel{position:relative}
.car-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 52px) / 3);
  gap:26px;list-style:none;margin:0;padding:3px 3px 12px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--r-card)}
.car-slide{scroll-snap-align:start;display:flex;min-width:0}
/* Two whole cards in the proof column. The old 1.72 setting left about a third
   of the second card hanging past the track, which read as a broken layout
   rather than a peek. Changed 15 Oct 2026 at the client's request. */
.carousel.is-narrow .car-track{grid-auto-columns:calc((100% - 26px) / 2)}
.car-slide>.quote{flex:1}

.car-ctl{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
.car-dots{display:flex;gap:8px}
.car-dots button{
  width:32px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;
}
.car-dots button::after{
  content:"";display:block;width:100%;height:4px;border-radius:99px;
  background:var(--line);transition:background .2s ease;
}
.car-dots button[aria-current="true"]::after{background:var(--brand)}
.car-arrows{display:flex;gap:10px}
.car-btn{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:99px;cursor:pointer;
  font-size:1.1rem;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.car-btn:hover:not(:disabled){border-color:rgb(27 26 24/.22);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.car-btn:disabled{opacity:.34;cursor:default}
@media (prefers-reduced-motion:reduce){.car-track{scroll-behavior:auto}.car-btn{transition:none}}

@media (max-width:1000px){
  .proof-split{grid-template-columns:1fr;gap:38px}
  .proof-copy .display{max-width:none}
  .car-track,.carousel.is-narrow .car-track{grid-auto-columns:calc((100% - 26px) / 2)}
}
@media (max-width:760px){
  .car-track,.carousel.is-narrow .car-track{grid-auto-columns:86%;gap:16px}
  .car-ctl{justify-content:space-between}
  .nd-badges{max-width:300px}
}

/* faq */
.faq{border-top:1px solid rgb(255 255 255 / .18)}
.faq details{border-bottom:1px solid rgb(255 255 255 / .18)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--font-display);font-size:1.12rem;color:#fff;font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  translate:0 -60%;rotate:45deg;transition:rotate .2s ease;
}
.faq details[open] summary::after{rotate:-135deg}
.faq .ans{padding:0 48px 26px 0;color:rgb(255 255 255 / .88);font-size:1rem}
.faq .ans p{margin:0;max-width:72ch}

/* footer */
.site-footer{background:var(--ink) url("../images/tx/wall-footer.webp") center/512px 512px repeat;color:rgb(255 255 255 / .78);padding:64px 0 28px}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.site-footer a{color:rgb(255 255 255 / .78);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.5fr .9fr 1.1fr 1fr;gap:clamp(30px,3.4vw,52px)}
.foot-brand img{width:230px;margin-bottom:16px}
.foot-blurb{margin:0 0 20px;font-size:.95rem;line-height:1.65;color:rgb(255 255 255/.66);max-width:40ch}
.foot-map{
  border-radius:var(--r-card);overflow:hidden;border:1px solid rgb(255 255 255/.14);
  max-width:400px;aspect-ratio:16/10;background:rgb(255 255 255/.05);position:relative;
}
.foot-map-link{
  display:inline-block;margin-top:10px;padding:6px 0;min-height:28px;line-height:1.6;font-size:.88rem;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(255 255 255/.3);
}
.foot-map iframe{display:block;width:100%;height:100%;border:0}
.foot-areas{grid-template-columns:1fr 1fr;gap:9px 18px}
.site-footer .foot-h-gap{margin-top:26px}
.foot-hours{margin:0;font-size:.95rem;line-height:1.8;color:rgb(255 255 255/.78)}
.foot-credit{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.foot-credit span{color:rgb(255 255 255/.55);font-size:.82rem}
.foot-credit img{width:148px;height:auto;display:block;opacity:.92;transition:opacity .2s ease}
.foot-credit:hover img{opacity:1}
.foot-credit:hover{text-decoration:none}
@media (max-width:1000px){.foot-map{max-width:none}}
.foot-bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid rgb(255 255 255 / .14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;
}
.nap{font-style:normal;font-size:.95rem;line-height:1.8}
.nap span{display:block}

/* sticky mobile call bar */
.callbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:8px;background:transparent;border:2px solid rgb(255 255 255/.5);
    color:#fff;font-family:var(--font-body);font-weight:600;font-size:.9rem;
    padding:11px 16px;border-radius:var(--r);min-height:46px;cursor:pointer;
  }
  .nav.open{
    display:flex;position:absolute;inset:76px 16px auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border:1px solid rgb(255 255 255/.16);padding:8px;
    max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.open a{padding:14px 12px;border-bottom:1px solid rgb(255 255 255/.1)}
  .nav.open a:last-child{border-bottom:0}
  .hasmenu{display:block;border-bottom:1px solid rgb(255 255 255/.1)}
  .navbtn{width:100%;justify-content:space-between;padding:14px 12px;min-height:46px}
  .dropdown{
    position:static;translate:none;width:auto;box-shadow:none;border:0;border-top:1px solid rgb(255 255 255/.1);
    border-radius:0;padding:10px 0 6px;background:transparent;
  }
  .dropdown::before{display:none}
  .dd-head{display:none}
  .dd-grid{grid-template-columns:1fr 1fr;gap:0 10px}
  .nav.open .dd-grid a,.nav.open .dd-foot{border-bottom:0}
  .dd-grid a{padding-left:26px}
  .dd-foot{margin:6px 0 0;padding:13px 12px}
  .nav.open .btn{margin:8px 4px 4px;justify-content:center}
  .hero-stack{min-height:calc(100svh - 64px)}
  .brand img{width:176px}
  .hero{min-height:auto;padding:106px 0 26px;text-align:left}
  /* the hero has to fit above the marquee and the call bar, so the first
     screen is tightened rather than having any of it cut */
  .hero .kicker{margin-bottom:12px}
  .hero .display{font-size:clamp(1.8rem,7vw,2.3rem);line-height:1.04;margin-bottom:.34em}
  .hero .pain{font-size:1rem}
  .hero .btn-row{margin-top:22px}
  .hero .proof{margin-top:14px;padding-top:11px;gap:5px 18px}
  .hero::before{background:linear-gradient(rgb(20 19 17/.62),rgb(20 19 17/.84) 45%,rgb(20 19 17/.88))}
  .hero .tx-media{object-position:62% 50%}
  .btn-row .btn{flex:1 1 100%}
  .g-2,.g-3,.g-4,.trust{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .s-mark::after{width:260px;right:-60px;top:16px;translate:none;opacity:.045}
  .mq-set .dot{margin:0 14px}
  body{padding-bottom:70px}
  .callbar{
    display:flex;position:fixed;inset:auto 0 0;z-index:60;background:var(--brand);
  }
  .callbar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:62px;
    color:#fff;text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  }
  .callbar a+a{border-left:1px solid rgb(255 255 255/.28)}
}

/* On the red wash the ground is itself the accent, so the primary action inverts to white.
   A red button on a red wash measured 1.89:1 against what was behind it. */
.s-wash:not(.is-ink) .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.s-wash:not(.is-ink) .btn-primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* Mobile tap targets. Footer and address links measured under 24px tall. */
@media (max-width:760px){
  .site-footer ul{gap:2px}
  .site-footer ul a,.nap a{display:inline-block;padding:11px 0;min-height:44px;line-height:1.5}
  .nap{line-height:1.6}
  .foot-bottom a{display:inline-block;padding:8px 0;min-height:30px}
}

/* ===================== inner page kit ===================== */

/* BANNER: top of every inner page. Photo under a flat overlay in the darkest brand tone. */
/* Every inner page gets a real hero, not a title strip: the photo stays
   readable on one side, the copy sits on the darkened side, and the page's own
   evidence rides in the hero so no two heroes are interchangeable. */
.banner{
  display:flex;align-items:center;min-height:min(76vh,760px);
  padding:clamp(128px,14vw,164px) 0 clamp(56px,7vw,76px);
  text-align:left;color:#fff;background-color:var(--ink);
}
.banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(20 19 17/.95) 0%,rgb(20 19 17/.90) 30%,rgb(20 19 17/.62) 56%,rgb(20 19 17/.24) 86%,rgb(20 19 17/.16) 100%);
}
.banner>.wrap{width:100%}
.banner>.tx-media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.banner .display{max-width:17ch}
.banner.has-steps .display,.hero-split.is-full .display{max-width:16ch}
.banner .lede{color:rgb(255 255 255/.92);max-width:54ch;margin-inline:0;font-size:1.08rem}
.banner .btn-row,.banner .proof,.banner .crumbs{justify-content:flex-start}
/* the two hero buttons were close enough to crowd each other, and the ghost
   button's white edge was reading as part of the primary button's ground */
.banner .btn-row{gap:26px;margin-top:34px}

/* copy left, the page's own evidence right */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(30px,4vw,60px);align-items:center}
.banner{contain-intrinsic-size:auto 760px}
.hero-split>.copy{min-width:0}
.hero-split.is-full{grid-template-columns:1fr}

/* LOCATION PAGES: the local record, a reference panel of that neighborhood's own numbers */
.hero-panel{
  background:rgb(20 19 17/.72);border:1px solid rgb(255 255 255/.17);border-top:3px solid var(--brand);
  border-radius:var(--r-card);padding:4px 22px 8px;backdrop-filter:blur(2px);
}
.hero-panel h2,.hero-panel .panel-head{
  margin:16px 0 4px;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-pale);
}
.hero-panel dl{margin:0}
.hero-panel div{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-top:1px solid rgb(255 255 255/.13)}
.hero-panel div:first-of-type{border-top:0}
.hero-panel dt{
  flex:none;min-width:84px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2vw,1.6rem);color:#fff;line-height:1;letter-spacing:-.02em;
}
.hero-panel dd{
  margin:0;font-family:var(--font-body);font-size:.84rem;line-height:1.45;color:rgb(255 255 255/.8);
}

/* SERVICE PAGES: the order of work, three steps on the hero baseline. No box,
   so it reads as a different device from the location panel. */
/* the steps run the full width, so the ground under them has to stay calm
   all the way across, not only on the copy side */
.banner.has-steps::after{
  content:"";position:absolute;inset:auto 0 0;height:min(46%,330px);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgb(20 19 17/.84),rgb(20 19 17/.5) 46%,rgb(20 19 17/0));
}
.hero-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,38px);
  margin-top:clamp(34px,5vw,52px);padding-top:26px;border-top:1px solid rgb(255 255 255/.22);
}
.hero-steps>div{position:relative;padding-left:26px}
.hero-steps>div::before{
  content:"";position:absolute;left:0;top:3px;width:17px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cpath d='M2 21 L26 4 L50 21 L70 21' fill='none' stroke='%23E8737B' stroke-width='4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") left center/contain no-repeat;
}
.hero-steps dt,.hero-steps b{
  display:block;font-family:var(--font-body);font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin-bottom:6px;
}
.hero-steps dd,.hero-steps p{
  margin:0;font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:rgb(255 255 255/.78);
}

/* CONTACT: the hero panel is the information, so it inverts to a solid card */
.hero-panel.is-solid{background:var(--card);border-color:var(--card);backdrop-filter:none}
.hero-panel.is-solid .panel-head{color:var(--brand)}
.hero-panel.is-solid div{border-top-color:var(--line)}
.hero-panel.is-solid dt{font-size:.74rem;font-family:var(--font-body);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);min-width:66px}
.hero-panel.is-solid dd{color:var(--ink);font-size:1rem;font-weight:600}
.hero-panel.is-solid a{color:var(--brand-ink);text-decoration:none;display:inline-block;
  padding:6px 0;min-height:28px;line-height:1.5;word-break:break-word}
.hero-panel.is-solid a:hover{text-decoration:underline}

@media (max-width:1000px){
  .hero-split{grid-template-columns:1fr;gap:30px;align-items:start}
  .hero-panel{max-width:520px}
}
@media (max-width:760px){
  .banner{min-height:auto;padding:92px 0 54px}
  .banner::before{
    background:linear-gradient(rgb(20 19 17/.70),rgb(20 19 17/.88) 34%,rgb(20 19 17/.9));
  }
  .banner h1{max-width:none}
  .banner .proof{margin-top:18px;padding-top:14px;gap:6px 20px}
  .hero-steps{grid-template-columns:1fr;gap:18px;margin-top:28px;padding-top:20px}
}
@media (max-width:560px){
  .banner .lede{font-size:1rem;margin-bottom:.8em}
  .banner .btn-row{margin-top:20px;gap:10px}
}
.crumbs{
  font-family:var(--font-body);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgb(255 255 255/.72);margin:0 0 18px;
}
.crumbs a{color:rgb(255 255 255/.82);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin:0 9px;color:var(--brand-bright)}

/* long form content */
.prose{max-width:none}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;font-size:1.2rem}
.prose ul{padding-left:1.15em;margin:0 0 1.2em;max-width:68ch}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--brand)}
.on-dark .prose li::marker{color:var(--brand-bright)}

/* text + picture row */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.media-split.flip>figure{order:-1}
.media-split figure{margin:0}
.media-split img{width:100%;border-radius:var(--r-card)}
.media-split figcaption{font-size:.85rem;color:var(--muted);margin-top:10px}
.on-dark .media-split figcaption{color:rgb(255 255 255/.7)}

/* local facts */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.facts>div{background:var(--card);padding:22px 24px;display:grid;grid-template-columns:200px 1fr;gap:18px}
.facts dt{font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;color:var(--body)}

/* inline CTA strip */
.cta-strip{
  border-left:4px solid var(--brand);background:var(--paper);
  padding:26px 28px;margin:34px 0;border-radius:0 var(--r-card) var(--r-card) 0;
}
.cta-strip p{margin:0 0 16px;max-width:60ch}
.cta-strip .btn-row{margin-top:0}

/* contact form */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(26px,4vw,40px)}
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-family:var(--font-body);font-weight:600;font-size:.88rem;color:var(--ink)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--card);
  border:1px solid #C9C2B7;border-radius:var(--r);padding:13px 14px;min-height:50px;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand);outline:2px solid rgb(192 32 43/.25);outline-offset:0}
.req{color:var(--brand)}
.form-note{font-size:.88rem;color:var(--muted);margin:14px 0 0}

@media (max-width:1000px){
  .media-split,.media-split.flip{grid-template-columns:1fr}
  .media-split.flip>figure{order:0}
}
@media (max-width:760px){
  .facts>div{grid-template-columns:1fr;gap:5px}
  .banner{padding:104px 0 42px}
}

/* ===================== Nextdoor proof ===================== */
.nd-panel{
  background:var(--ink);border-radius:var(--r-card);padding:32px clamp(18px,2.4vw,28px);text-align:center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Cpath d='M0 .5H104M0 52.5H104M.5 0V104M52.5 0V104' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
}
/* grid, not flex: five badges always sit on one row and scale together rather than wrapping 4+1 */
.nd-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.2vw,12px);align-items:center;max-width:330px}
.nd-badges li{display:flex;justify-content:center}
.nd-badges img{width:100%;max-width:62px;height:auto;display:block}
.nd-caption{
  margin:0;color:rgb(255 255 255/.82);font-family:var(--font-body);
  font-size:.84rem;letter-spacing:.11em;text-transform:uppercase;
}
.nd-count{
  display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.4rem,5vw,3.4rem);color:#fff;line-height:1;margin-bottom:6px;
}
@media (max-width:560px){ .nd-badges{gap:5px} }

/* ===================================================================
   LOCATION PAGE KIT
   Devices so neighborhood sections separate by STRUCTURE, not just by
   background colour. Each one earns its place: the spec sheet carries
   researched local facts, the duo block carries rule-versus-meaning,
   the roof bullet puts the brand mark to work instead of decorating.
   =================================================================== */


/* Spec sheet: label and value in rows, reads like a reference document */
.spec{margin:0;border-top:1px solid var(--line)}
.spec>div{
  display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:clamp(14px,3vw,40px);
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.spec>div{border-left:3px solid transparent;transition:border-color .18s ease}
.spec>div:hover{border-left-color:var(--brand)}
.spec dt{
  font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);padding-left:14px;
}
.spec dd{padding-right:4px}
.spec dd{margin:0;color:var(--body)}
.spec dd b{color:var(--ink);font-weight:600}
.on-dark .spec{border-top-color:rgb(255 255 255/.18)}
.on-dark .spec>div{border-bottom-color:rgb(255 255 255/.18)}
.on-dark .spec dt{color:rgb(255 255 255/.6)}
.on-dark .spec dd{color:rgb(255 255 255/.9)}
.on-dark .spec dd b{color:#fff}

/* Numbered cards, ghost numeral in the corner */
.numcard{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--brand);
  border-radius:var(--r-card);padding:28px 26px;overflow:hidden;
}
.numcard .n{
  position:absolute;top:10px;right:16px;font-family:var(--font-display);font-weight:700;
  font-size:3.6rem;line-height:1;color:var(--brand);opacity:.16;letter-spacing:-.04em;
}
.numcard h3{font-size:1.1rem;margin-bottom:.5em;padding-right:46px}
.numcard p{font-size:.95rem;margin:0}

/* Duo: a light card and a dark card side by side, different weights */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px);align-items:stretch}
.duo>*{border-radius:var(--r-card);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column}
.duo .light{background:var(--card);border:1px solid var(--line)}
.duo .dark{background:var(--ink);color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Cpath d='M0 .5H104M0 52.5H104M.5 0V104M52.5 0V104' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E")}
.duo .dark h3,.duo .dark p,.duo .dark li{color:#fff}
.duo h3{font-size:1.18rem;margin-bottom:.6em}
.duo p:last-of-type{margin-bottom:0}
.duo .btn-row{margin-top:auto;padding-top:20px}

/* Check list with the roof mark as the bullet */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.checks.two{grid-template-columns:1fr 1fr;gap:11px clamp(16px,2.4vw,30px)}
.checks li{position:relative;padding-left:30px;font-size:1rem;line-height:1.55}
.checks li::before{
  content:"";position:absolute;left:0;top:.42em;width:19px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cpath d='M2 21 L26 4 L50 21 L70 21' fill='none' stroke='%23C0202B' stroke-width='5' stroke-linecap='square'/%3E%3C/svg%3E") left center/contain no-repeat;
}
.on-dark .checks li::before,.duo .dark .checks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cpath d='M2 21 L26 4 L50 21 L70 21' fill='none' stroke='%23E8737B' stroke-width='5' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Service names as flowing tags */
.pills{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.pills a,.pills span{
  display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:99px;
  font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--ink);text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.pills a:hover{border-color:var(--brand);color:var(--brand)}
.on-dark .pills a,.on-dark .pills span{border-color:rgb(255 255 255/.26);color:#fff}
.on-dark .pills a:hover{border-color:var(--brand-bright);color:#fff}

/* Photo with a caption bar across its foot */
.framed{position:relative;margin:0;border-radius:var(--r-card);overflow:hidden}
.framed img{width:100%;display:block}
.framed figcaption{
  position:absolute;inset:auto 0 0;padding:15px 20px;color:#fff;
  background:rgb(20 19 17/.93);border-top:3px solid var(--brand);
  font-family:var(--font-body);font-size:.88rem;line-height:1.45;
}

/* A dark CTA card floating inset on a light ground, not a full bleed band */
.inset-cta{
  background:var(--brand-deep) url("../images/tx/wall-deep.webp") center/512px 512px repeat;
  color:#fff;border-radius:var(--r-card);
  padding:clamp(36px,5vw,58px) clamp(24px,4vw,56px);text-align:center;position:relative;overflow:hidden;
}
.inset-cta>.tx-media{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.14;
  filter:grayscale(1) contrast(.7);mix-blend-mode:luminosity;
}
.inset-cta>*{position:relative;z-index:1}
.inset-cta h2{color:#fff}
.inset-cta p{color:rgb(255 255 255/.9);margin-inline:auto}

/* Roof mark as a section divider */
.roof-rule{display:flex;align-items:center;gap:16px;margin:0 0 30px}
.roof-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.on-dark .roof-rule::after{background:rgb(255 255 255/.2)}

@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .checks.two{grid-template-columns:1fr}
}
@media (max-width:560px){
  .spec>div{grid-template-columns:1fr;gap:5px;padding:15px 0}
}

/* ==========================================================================
   Process v2, 15 Oct 2026
   Ground: a drop cloth. A warm charcoal canvas weave baked to one tile, lit
   from the top right like a work light. The steps are solid cards on it, so
   nothing anyone reads sits on texture. A line is drawn node to node as the
   section arrives and each card lifts as the line reaches it.
   ========================================================================== */
.proc{
  color:#fff;
  background-color:#221F1B;
  background-image:
    radial-gradient(70% 62% at 88% 0%, rgb(255 238 214/.075) 0%, rgb(255 238 214/0) 62%),
    radial-gradient(55% 48% at 0% 100%, rgb(0 0 0/.28) 0%, rgb(0 0 0/0) 70%),
    url("../images/tx/canvas-ink.webp");
  background-size:auto, auto, 384px 384px;
  background-repeat:no-repeat, no-repeat, repeat;
}
.proc-head{display:grid;grid-template-columns:1fr minmax(0,420px);gap:24px 64px;align-items:end;margin-bottom:clamp(44px,5vw,64px)}
.proc-head h2{margin:0}
.proc-head .lede{margin:0;color:rgb(255 255 255/.78);font-size:1.05rem}

.proc-steps{--node:14px;--gap:22px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gap)}
.proc-step{position:relative;padding-top:calc(var(--node) + 30px)}

/* the node on the line */
.proc-node{position:absolute;top:0;left:28px;width:var(--node);height:var(--node);border-radius:50%;
  background:#221F1B;box-shadow:0 0 0 2px rgb(255 255 255/.28);z-index:2;
  transition:background-color .35s ease,box-shadow .35s ease}
.proc-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgb(214 47 57/0);transition:border-color .5s ease}

/* the line: a quiet track, and a fill that is drawn over it */
.proc-step:not(:last-child)::before,
.proc-step:not(:last-child)::after{
  content:"";position:absolute;top:calc(var(--node) / 2 - 1px);height:2px;
  left:calc(28px + var(--node));width:calc(100% + var(--gap) - var(--node));z-index:1;
}
.proc-step:not(:last-child)::before{background:rgb(255 255 255/.14)}
.proc-step:not(:last-child)::after{background:var(--brand-bright);transform-origin:0 50%}

.proc-card{
  height:100%;background:#2C2925;border:1px solid rgb(255 255 255/.08);border-radius:var(--r-card);
  padding:28px 26px 30px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .45s ease;
}
.proc-card:hover{transform:translateY(-6px);border-color:rgb(255 255 255/.18);box-shadow:0 22px 40px -22px rgb(0 0 0/.7)}
.proc-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgb(255 255 255/.1)}
.proc-n{font-family:var(--font-display);font-weight:600;font-size:2.7rem;line-height:1;letter-spacing:-.03em;color:var(--brand-pale)}
.proc-ico{width:30px;height:30px;color:rgb(255 255 255/.6);transition:color .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.proc-card:hover .proc-ico{color:#fff;transform:rotate(-8deg) scale(1.06)}
.proc-card h3{font-size:1.2rem;line-height:1.25;margin-bottom:.55em;color:#fff}
.proc-card p{font-size:.98rem;line-height:1.65;margin:0;color:rgb(255 255 255/.8)}

.proc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(36px,4vw,52px);padding-top:26px;border-top:1px solid rgb(255 255 255/.1)}
.proc-foot p{margin:0;color:rgb(255 255 255/.8)}
.proc-foot a{color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:44px}
.proc-foot a::after{content:"\2192";color:var(--brand-bright);transition:transform .25s ease}
.proc-foot a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--brand-bright);text-decoration-thickness:2px}
.proc-foot a:hover::after{transform:translateX(4px)}

/* motion. Only armed when site.js has added .rv, so without script everything is simply shown */
.rv .proc-card{opacity:0;transform:translateY(34px)}
.rv .proc-step:not(:last-child)::after{transform:scaleX(0)}
.rv .proc-step.is-in .proc-card{opacity:1;transform:none;
  transition:opacity .7s ease calc(var(--i) * .38s + .12s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .38s + .12s),border-color .3s ease,box-shadow .45s ease}
.rv .proc-step.is-in .proc-card:hover{transform:translateY(-6px);transition-delay:0s}
.rv .proc-step.is-in::after{transform:scaleX(1);transition:transform .42s cubic-bezier(.5,0,.3,1) calc(var(--i) * .38s + .3s)}
.proc-step.is-in .proc-node{background:var(--brand-bright);box-shadow:0 0 0 2px var(--brand-bright);transition-delay:calc(var(--i) * .38s)}
.proc-step.is-in .proc-node::after{border-color:rgb(214 47 57/.45);transition-delay:calc(var(--i) * .38s)}

@media (max-width:980px){
  .proc-steps{grid-template-columns:repeat(2,1fr);gap:28px var(--gap)}
  .proc-step:nth-child(2)::before,.proc-step:nth-child(2)::after{display:none}
}
/* phones: the line turns and runs down the left edge, card by card */
@media (max-width:760px){
  .proc-head{grid-template-columns:1fr}
  .proc-steps{grid-template-columns:1fr;gap:0}
  .proc-step{padding:0 0 18px 34px}
  .proc-step:last-child{padding-bottom:0}
  .proc-node{left:0;top:30px}
  .proc-step:nth-child(2)::before,.proc-step:nth-child(2)::after{display:block}
  .proc-step:not(:last-child)::before,
  .proc-step:not(:last-child)::after{
    left:calc(var(--node) / 2 - 1px);top:calc(30px + var(--node));width:2px;height:calc(100% - var(--node));
  }
  .proc-step:not(:last-child)::after{transform-origin:50% 0}
  .rv .proc-step:not(:last-child)::after{transform:scaleY(0)}
  .rv .proc-step.is-in::after{transform:scaleY(1);transition:transform .7s cubic-bezier(.5,0,.3,1) .35s}
  .rv .proc-step.is-in .proc-card{transition-delay:.05s}
  .proc-step.is-in .proc-node,.proc-step.is-in .proc-node::after{transition-delay:0s}
  .proc-card{padding:24px 22px 26px}
  .proc-n{font-size:2.3rem}
}
@media (prefers-reduced-motion:reduce){
  .rv .proc-card{opacity:1;transform:none}
  .rv .proc-step:not(:last-child)::after{transform:none}
  .proc-card,.proc-card:hover,.proc-ico,.proc-card:hover .proc-ico{transition:none;transform:none}
}

/* ==========================================================================
   Closing CTA v2, 15 Oct 2026
   The red band is gone. A light editorial split: the ask on the left with
   proof right under the buttons, a finished room on the right with a second,
   smaller photo overlapping its corner. The photos roll on left to right like
   a fresh coat when the section arrives.
   ========================================================================== */
.cta2{--sd-pad:clamp(72px,8vw,112px)}
.cta2.s-greige{
  background-color:#E7E1D6;
  background-image:radial-gradient(86% 64% at 78% 4%, rgb(255 253 249/.62) 0%, rgb(255 253 249/0) 58%),url("../images/tx/wall-greige.webp");
  background-size:auto,512px 512px;background-repeat:no-repeat,repeat;
}
.cta2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.cta2-copy h2{font-size:clamp(2.2rem,4.1vw,3.25rem);text-wrap:balance}
.cta2-copy>p{font-size:1.08rem;max-width:46ch}
.cta2-copy .btn-row{margin-top:30px}
.cta2-proof{list-style:none;margin:34px 0 0;padding:22px 0 0;border-top:1px solid rgb(27 26 24/.14);
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 34px}
.cta2-proof li{font-size:.92rem;line-height:1.35;color:var(--muted)}
.cta2-proof b{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:3px}
.cta2-proof .stars{color:var(--star-ink);letter-spacing:.08em;font-size:.95rem;margin-left:4px}

.cta2-media{position:relative;margin:0 0 clamp(36px,4vw,56px) clamp(28px,4vw,56px)}
.cta2-main,.cta2-inset{margin:0;overflow:hidden;border-radius:var(--r-card)}
.cta2-main{aspect-ratio:6/5}
.cta2-main img,.cta2-inset img{width:100%;height:100%;object-fit:cover}
.cta2-main img{object-position:42% 50%}
.cta2-inset{position:absolute;width:44%;aspect-ratio:4/3;left:clamp(-56px,-4vw,-28px);bottom:clamp(-56px,-4vw,-36px);
  border:6px solid #fff;box-shadow:var(--shadow);border-radius:13px}
.cta2-tag{position:absolute;top:18px;right:18px;margin:0;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:99px;background:rgb(255 255 255/.94);color:var(--ink);
  font-size:.82rem;font-weight:600;letter-spacing:.02em}
.cta2-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}

/* the roll on */
.rv .cta2-main{clip-path:inset(0 100% 0 0 round var(--r-card))}
.rv .cta2-main img{transform:scale(1.08)}
.rv .cta2-inset{opacity:0;transform:translateY(26px)}
.rv .cta2-tag{opacity:0}
.cta2-media.is-in .cta2-main{clip-path:inset(0 0 0 0 round var(--r-card));transition:clip-path 1.15s cubic-bezier(.65,0,.25,1)}
.cta2-media.is-in .cta2-main img{transform:none;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cta2-media.is-in .cta2-inset{opacity:1;transform:none;transition:opacity .6s ease .75s,transform .9s cubic-bezier(.2,.7,.2,1) .75s}
.cta2-media.is-in .cta2-tag{opacity:1;transition:opacity .5s ease 1.1s}

@media (max-width:900px){
  .cta2-grid{grid-template-columns:1fr}
  .cta2-copy h2{max-width:none}
  .cta2-media{margin:6px 0 30px 18px}
}
@media (max-width:760px){
  .cta2-proof{grid-template-columns:repeat(3,1fr);gap:10px 16px}
  .cta2-proof b{font-size:1.12rem}
  .cta2-proof li{font-size:.84rem}
  .cta2-proof .stars{display:block;margin:4px 0 0;font-size:.8rem}
  .cta2-inset{width:48%;left:-18px;bottom:-30px;border-width:4px}
  .cta2-tag{top:12px;right:12px;font-size:.78rem;padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){
  .rv .cta2-main{clip-path:none}
  .rv .cta2-main img,.rv .cta2-inset{transform:none;opacity:1}
  .rv .cta2-tag{opacity:1}
}

/* ==========================================================================
   Reviews carousel v3, 15 Oct 2026
   Wider cards, tighter gap, and the track now runs past the proof column to
   the right edge of the screen, so the second card sits outside the column's
   mask instead of being squeezed inside it. The <figure> default margin
   (40px each side) was what made the cards narrow and the gap so wide.
   ========================================================================== */
.rev-card{margin:0}
.carousel.is-narrow{
  container-type:inline-size;
  --car-gap:18px;
  --bleed:max(24px, calc((100vw - var(--container)) / 2 + 24px));
}
.carousel.is-narrow .car-track{
  gap:var(--car-gap);
  grid-auto-columns:calc((100cqw + var(--bleed) - var(--car-gap) - 24px) / 2);
  margin-right:calc((var(--bleed) - 24px) * -1);
}
.carousel.is-narrow .car-track::after{content:"";width:1px}
@media (max-width:760px){
  .carousel.is-narrow{--car-gap:14px}
  /* phones keep the peek: the track runs to the screen edge and the next card shows */
  .carousel.is-narrow .car-track{grid-auto-columns:calc(100cqw * .86);margin-right:-24px}
}

/* ==========================================================================
   Hero video, 15 Oct 2026
   The footage is a freshly repainted cream house in full sun, much brighter
   than the photo it replaces, so the overlay is stronger on the copy side and
   a band at the top keeps the header readable. The poster frame is the LCP;
   the video only loads after the page has, and never under reduced motion
   or data saver. A pause control covers WCAG 2.2.2 for motion over 5s.
   ========================================================================== */
.hero .hero-video{object-fit:cover;background:#1b1a18}
.hero::before{
  background:
    linear-gradient(180deg,rgb(20 19 17/.5) 0%,rgb(20 19 17/0) 24%),
    linear-gradient(90deg,rgb(20 19 17/.93) 0%,rgb(20 19 17/.84) 36%,rgb(20 19 17/.46) 64%,rgb(20 19 17/.22) 100%);
}
.hero-pause{
  position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3svh,32px);z-index:2;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:99px;border:1px solid rgb(255 255 255/.35);background:rgb(20 19 17/.45);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease;
}
.hero-pause[hidden]{display:none}
.hero-pause:hover{background:rgb(20 19 17/.7);border-color:rgb(255 255 255/.6)}
.hero-pause svg{width:18px;height:18px}
.hero-pause .i-play,.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
@media (max-width:760px){
  .hero::before{background:linear-gradient(rgb(20 19 17/.7),rgb(20 19 17/.86) 45%,rgb(20 19 17/.9))}
  .hero .hero-video{object-position:58% 50%}
  .hero-pause{bottom:14px;right:14px;width:40px;height:40px}
}
@media (max-height:560px){
  .hero::before{background:linear-gradient(90deg,rgb(20 19 17/.94) 0%,rgb(20 19 17/.9) 52%,rgb(20 19 17/.72) 100%)}
}