/* ============================================================
   v6.20: every place the page mentions the BBB now shows the
   SUPPLIED Accredited Business seal (img/bbb-accredited.png,
   67x105): the credentials tile, the contact badges and the footer
   legal line. The drawn .bbb badge is gone, and each size is picked
   so that file is never upscaled at the density the page is viewed
   at (48px tall = 96 device px at 2x; 35px = 105 at 3x). Nothing
   else on the page moved.
   v6.19: the top menu's Gallery item OPENS A PAGE OF ITS OWN
   (gallery.html) - a portfolio of the work carrying the four
   photographs the home page shows plus the kitchen millwork shot.
   The home page is unchanged: its four tiles, their captions and its
   own #gallery section stay exactly where they were.  No rule in this
   file changed for it - gallery.css styles the new page only.
   v6.18: the About panel gains ONE new control - a "Meet the owners"
   ghost button that opens the separate owners page (owners.html).
   The existing "Our services" button, the panel's copy and its
   hallway photograph are untouched; the row wraps and goes full
   width on a phone. Nothing here touches the rest of the page.
   v6.12: the "years" unit is ONE SIZE SMALLER - 12.5px -> 11.5px on
   desktop and tablet, 11px -> 10px on a phone (one 1px step, the ladder
   the bar's other furniture is already scaled on).  The numeral, its
   colour, the 2px gap and the flush left edge are untouched; the
   desktop bar keeps its 79px and the phone bar loses about 1px.
   v6.11: the credentials unit is STACKED - the tile reads "29" with a
   small "years" UNDER it (was beside it in v6.10).  .cred-num is now a
   two-line inline-flex column, align-items:flex-start, and the unit's
   margin-left became margin-top:2px.  The numeral keeps its size,
   colour and left edge; the bar's desktop 79px and phone 174px heights
   are unchanged (the tile had the slack), and only the tablet two-up
   rows grow, which is the honest cost of a second line.
   v6.10: the "29" in the credentials bar is LABELLED - it
   reads "29 years".  A .cred-unit span (sans, 12.5px, weight 600,
   #454B54 = 8.8:1 on white, 2px clear of the numeral; 11px on a
   phone) follows the red serif numeral on its baseline.  The number itself is untouched and
   still comes from [data-years] in js/site.js, so the bar
   keeps its 79px desktop / 129px two-up / 174px phone height.
   v6.2: the credentials bar is 25% THINNER - 105px -> 79px on desktop,
   178 -> ~132 two-up, 229 -> ~172 on a phone. The height comes out of both
   sides: vertical padding 22 -> 14px and the furniture scaled to ~75% (badge
   lettering 18 -> 16px, shield/clock 34 -> 30px, the "29" 40 -> 33px, labels
   15/13.5 -> 14/12.5px). Same four-up grid, same breaks, nothing moved.
   v6.1: the credentials bar (BBB / licensed & insured / since 1997 /
   hours + phone) moved from under the hero to the TOP of the page,
   directly under the sticky header, so the four proofs are the first
   thing read. Markup and styling unchanged - one position change.
   v6.0: the hero copy is the supplied reference's own wording - the name
   lockup (PRISM PAINTING / OF WILLIAMSBURG, INC. / Your Repaint
   Contractor.), the red rule, the promise line, the one-sentence lede and
   the estimate + call buttons inline. The block is scaled DOWN to about
   two thirds of v5.5 (44px name instead of a 66px h1) so the house photo
   reads first. No edge, mask or photo pixel changed.
   Prism Painting of Williamsburg, Inc. — site styles (v6.25)
   Warm classic residential look from the supplied reference:
   white header, brush-stroke hero, red pill buttons, Playfair
   Display headings on Open Sans, cream panels, flush four-up
   gallery with white caption plates.

   v5.5: the hero PHOTOGRAPH is the supplied house photo (960x683, daylight,
   house centred, entrance at ~42% of its width). It sits in its own box from
   36% of the hero width to the right edge, at ~0.96x, so the whole house shows
   right of the panel (entrance at 60%) instead of the right half at 1.5x. The
   hero's background is the panel's own gradient, and the mask is cropped to its
   ink (1440x580) so the panel meets the top of the hero and the brush edge is
   the only cream/photo boundary at any height. The phone tear's height now
   follows brush-top.png's aspect (it was being stretched 2.6x vertically, which
   read as blocky), and its 20 enclosed pinholes are filled.

   v5.4: the hero mask is TRIMMED - the panel is its own largest
   connected region and nothing else is painted (scripts/
   trim_brush_mask.py). The cutout had carried a broken vertical
   column of cream blocks and a scatter of flecks clear of the edge,
   which read as a ghosted strip floating over the photograph.
   The mask URL carries ?v=20261020 so a cached copy is not served.

   v5.3: the hero's paint edge at the top is STRAIGHT, like the reference -
   the cream starts on one rough horizontal line (46 px down) instead of a
   rounded swoop, and the tree band above it is the reference's real canopy
   cut hard at that line (no soft wash, no fake curve).

   v5.1: the desktop hero edge is a GUIDED ALPHA MATTE from the reference:
   the cutout is the trimap/guide and the reference's cream-vs-photo
   colour recovers the actual specks, flecks and bristle hairs; the panel
   is solid. The phone tear keeps the v4.7 top edge.
   v4.9: the hero edge is the white blob CUT OUT of the supplied reference
   with PhotoCraft's Select Subject + Clear (the cutout tool); its alpha is
   the mask, so the reference's own brush edge comes through. The panel is
   solid; the text sits on top. The phone tear keeps the v4.7 top edge.
   v4.8: the desktop hero edge is the supplied reference's OWN white blob,
   traced once from the reference and used as the mask (img/brush-edge.png)
   - no generated brush. The panel is solid and the silhouette is the
   reference's own clumps; the phone tear keeps the v4.7 top edge.
   v4.7: the hero matches the supplied reference - the paint reaches
   65% of the width and its edge is a real painted mask: hundreds of
   hair tracks generated pixel by pixel (img/brush-edge.png), tufted
   into tongues, drying out over the photograph, with canvas grain in
   the cream. The lede is set in the serif, with a short red rule
   under the headline.
   v4.6: a wide brush pulled down over the photo.
   v4.2: the cream edge is carried onto phones as a brushed top
   edge on the copy panel, header logo enlarged.
   v6.13: the "years" unit is REALLY smaller this time.  v6.12's 1px step
   (12.5 -> 11.5px) measured as the same 9px of ink, so it could not be seen:
   scripts/probe_years_sizes.py shows 10.5px is still 9px of ink, and 10px is
   the first rung that changes it (7px).  The unit is now 10px on desktop and
   tablet and 9px on a phone - the numeral, its colour, the 2px gap and the
   flush left edge are untouched.
   ============================================================ */

:root{
  --red:#C9242C; --red-dk:#A81A22;
  --ink:#15171B; --body:#41474F; --muted:#6A7078;
  --cream:#F9F6F0; --cream-2:#F2EDE2;
  --line:#E5E0D6; --line-2:#EDE8DE;
  --navy:#0C3F6C; --white:#FFFFFF;
  --wrap:1240px; --hd:112px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:126px}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
ul,ol,dl{margin:0;padding:0;list-style:none}
svg{display:block}
h1,h2,h3{margin:0;line-height:1.14;color:var(--ink);text-wrap:balance}
::selection{background:var(--red);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;padding:14px 22px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:3px}

/* ---------- shared ---------- */
.eyebrow{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#3E444C}
.eyebrow--red{color:var(--red);letter-spacing:.16em}
.eyebrow--red::after{content:"";display:block;width:34px;height:2px;margin-top:11px;background:var(--red)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:15px 27px;border:1px solid transparent;border-radius:999px;
  background:var(--red);color:#fff;font-family:var(--sans);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase;
  cursor:pointer;box-shadow:0 10px 24px -16px rgba(201,36,44,.9);
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn svg{width:16px;height:16px;flex:0 0 16px}
.btn:hover{background:var(--red-dk);transform:translateY(-1px);box-shadow:0 16px 28px -18px rgba(201,36,44,.95)}
.btn:active{transform:translateY(0)}
.btn--wide{width:100%}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:120;background:var(--white);border-bottom:1px solid var(--line-2);transition:box-shadow .22s ease}
.hd.is-stuck{box-shadow:0 12px 30px -24px rgba(21,23,27,.5)}
.hd-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,38px);min-height:var(--hd);transition:min-height .22s ease}
.hd.is-stuck .hd-in{min-height:84px}
.hd.is-stuck .logo img{height:62px}

.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:clamp(58px,7.6vw,98px);width:auto;transition:height .22s ease}

.nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.1vw,34px)}
.nav-a{position:relative;padding:6px 0;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#262B31;transition:color .16s ease}
.nav-a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease}
.nav-a:hover{color:var(--red)}
.nav-a:hover::after,.nav-a.is-active::after{transform:scaleX(1)}
.nav-a.is-active{color:var(--red)}

.call-pill{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:13px 22px;
  border-radius:999px;background:var(--red);color:#fff;font-size:15px;font-weight:700;
  letter-spacing:.01em;white-space:nowrap;transition:background-color .18s ease,transform .18s ease;
}
.call-pill svg{width:18px;height:18px;flex:0 0 18px}
.call-pill:hover{background:var(--red-dk);transform:translateY(-1px)}

.menu-btn{
  display:none;align-items:center;gap:9px;padding:11px 14px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
}
.menu-bars{display:grid;gap:4px;width:18px}
.menu-bars i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .16s ease}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(90deg,#FDFBF7 0%,#FBF8F3 44%,#F9F6F0 66%,#F5EEDF 88%,#EFE6D2 100%);}
.hero-photo{
  position:absolute;top:0;left:36%;width:64%;height:100%;
  display:block;object-fit:cover;object-position:50% 15%;
  filter:saturate(1.03) contrast(1.03);z-index:0;
}
.stroke{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#FDFBF7 0%,#FBF8F3 44%,#F9F6F0 66%,#F5EEDF 88%,#EFE6D2 100%);
  -webkit-mask-image:url("../img/brush-edge.png?v=20261020j");mask-image:url("../img/brush-edge.png?v=20261020j");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left top;mask-position:left top;
}
/* canvas grain, only where the paint is (the mask covers children too) */
.stroke::after{
  content:"";position:absolute;inset:0;
  background-image:url("../img/grain.png?v=20261020j");background-repeat:repeat;
  mix-blend-mode:multiply;opacity:.5;
}

/* the reference's painted-over tree line, along the hero's top edge */
.hero-tree{position:absolute;left:0;top:0;width:clamp(320px,44vw,632px);height:auto;z-index:2;pointer-events:none}

/* the brushed cream edge, shown on phones where the hero mask is off */
.tear{
  display:none;position:absolute;left:0;right:0;width:100%;z-index:3;
  height:clamp(48px,11.5vw,76px);top:calc(12px - clamp(48px,11.5vw,76px));
  pointer-events:none;background:var(--cream);
  -webkit-mask-image:url("../img/brush-top.png?v=20261020j");mask-image:url("../img/brush-top.png?v=20261020j");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

.hero-in{position:relative;z-index:2;display:flex;align-items:center;min-height:clamp(470px,58vh,640px);padding-block:clamp(44px,6vw,80px)}
.hero-copy{max-width:min(600px,46vw);padding-right:18px}
.hero-title{display:block;font-family:var(--serif);color:var(--ink)}
.hero-name{display:block;font-size:clamp(29px,3.15vw,44px);font-weight:800;line-height:.98;letter-spacing:.004em;text-transform:uppercase}
.hero-city{display:block;margin-top:7px;font-size:clamp(16px,1.75vw,24px);font-weight:700;line-height:1.1;letter-spacing:.012em;text-transform:uppercase}
.hero-tag{display:block;margin-top:12px;font-size:clamp(18px,2.05vw,28px);font-weight:700;font-style:italic;line-height:1.16;letter-spacing:-.004em}
.hero-rule{width:52px;height:4px;margin:20px 0 18px;background:var(--red);border:0}
.hero-sub{margin:0 0 10px;font-size:clamp(15px,1.4vw,19px);font-weight:700;line-height:1.38;color:var(--ink)}
.hero-lede{max-width:44ch;margin:0 0 24px;font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;color:#3B414A;text-wrap:pretty}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.btn--ghost{background:var(--white);color:var(--ink);border:1.5px solid #23272E;box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:none}

/* ---------- credentials ---------- */
/* the credentials bar LEADS the page: it is the first block in <main>,
   directly under the sticky header (lost nothing but its old place). */
.cred{background:var(--white);border-bottom:1px solid var(--line)}
.cred-list{display:grid;grid-template-columns:repeat(4,1fr)}
.cred-item{display:flex;align-items:center;gap:11px;margin:0;min-height:78px;padding:14px clamp(11px,1.6vw,22px);border-left:1px solid var(--line)}
.cred-item:first-child{border-left:0;padding-left:0}
.cred-txt{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.cred-txt strong{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.005em}
.cred-txt a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cred-txt a:hover{color:var(--red)}
.cred-ico{color:var(--red);display:block;flex:0 0 30px}
.cred-ico svg{width:30px;height:30px}
.cred-num{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:flex-start;font-family:var(--serif);font-size:33px;font-weight:700;line-height:1;color:var(--red);letter-spacing:-.02em;white-space:nowrap}
/* v6.11: the unit sits UNDER the numeral, not beside it - the tile
   reads "29" with a small "years" beneath it.  The numeral is the first
   line of a two-line column and the word starts on the numeral's own left
   edge, so the "29" stays flush with the tile (and, on a phone, with the
   label below it); the gap is a 2px margin-top, not a leading space. */
.cred-unit{font-family:var(--sans);font-size:10px;font-weight:600;line-height:1;color:#454B54;letter-spacing:.01em;margin-top:2px}
/* v6.28: the third tile marks the year the company started, not a running
   count of years.  The small word sits ABOVE the year so the stack reads
   "since 1997" in order - and it never needs updating as time passes.
   v6.29: the stack is TIGHTENED so the tile lines up with the three beside
   it.  On desktop the year stack stood 44px tall against the 39.4px two-line
   label next to it, so "since" floated 2.3px above the bold line and "1997"
   hung 2.3px below the grey one.  Closing the gap from 3px to -2px makes the
   stack 39px: the small word moves down 2.5px, the year moves up 2.5px, and
   the tile now sits on the same band as its neighbours.  The numeral's own
   line box carries about 4px of empty space above the cap, so there is still
   a clear ~7px of air between the word and the digits. */
/* v6.30: the word is nudged DOWN 4px so it sits closer to the year. It is a
   relative offset, not a margin, so the tile's box is still the same 39px and
   the "1997" has not moved - only the small word travelled. That keeps the
   year on the neighbours' band (the v6.29 fix) while closing the word-to-year
   gap from about 7px to about 3px. */
.cred-num--est .cred-unit{margin-top:0;margin-bottom:-2px;position:relative;top:4px}
/* four digits are wider than the old two, so the year tile gets its own
   size range: near the old weight on desktop, smaller where the bar goes
   two-up on a phone so the owner line beside it does not get squeezed. */
.cred-num--est{font-size:clamp(24px,2.5vw,31px)}

/* v6.20: the seal is the supplied image, kept at its own 67:105
   aspect. width:auto overrides the global img rule so the declared
   width/height attributes and the file's real size agree. */
.seal{display:inline-block;vertical-align:middle;flex:0 0 auto;width:auto;height:auto;
  mix-blend-mode:multiply}
.seal--cred{height:50px}
.seal--badge{height:36px}
.seal--foot{height:34px;margin-right:3px}

/* ---------- pillars ---------- */
.pillars{background:var(--white);border-bottom:1px solid var(--line)}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.pillar{display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,20px);padding:clamp(28px,3.2vw,42px) clamp(14px,2.2vw,32px);border-left:1px solid var(--line)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar:last-child{padding-right:0}
.pillar svg{width:clamp(38px,4vw,46px);height:auto;flex:0 0 auto;color:var(--red)}
.pillar h2{margin:4px 0 7px;font-family:var(--sans);font-size:17.5px;font-weight:700;letter-spacing:0;line-height:1.3}
.pillar p{margin:0;font-size:14.5px;line-height:1.62;color:var(--body)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;background:var(--cream)}
.about-photo{position:relative;min-height:clamp(340px,44vw,560px)}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5.2vw,78px) clamp(22px,4.6vw,72px)}
.about-panel h2{font-family:var(--serif);font-weight:700;font-size:clamp(29px,3.4vw,43px);line-height:1.12;margin:0 0 20px}
.about-panel p{max-width:52ch;font-size:16.5px;line-height:1.72;color:#3B414A}
.about-sign{margin:26px 0 30px !important;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.about-sign span{display:block;margin-top:5px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ---------- services ---------- */
.services{background:var(--white);padding-block:clamp(52px,7vw,98px)}
.sec-head{max-width:760px}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.5vw,44px);line-height:1.14;margin:0 0 16px}
.sec-lede{margin:0;font-size:16.5px;line-height:1.7;color:var(--body)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{padding:clamp(22px,2.4vw,30px) clamp(18px,2.2vw,28px) clamp(24px,2.6vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);transition:background-color .2s ease}
.svc:hover{background:#FDFBF7}
.svc h3{position:relative;margin:0 0 10px;padding-top:13px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:.005em;line-height:1.3}
.svc h3::before{content:"";position:absolute;top:0;left:0;width:22px;height:2px;background:var(--red)}
.svc p{margin:0;font-size:14.5px;line-height:1.65;color:var(--body)}
.svc-note{margin:26px 0 0;font-size:15px;color:var(--muted)}
.svc-note a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- gallery ---------- */
.work{background:var(--white)}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.work-fig{position:relative;margin:0;overflow:hidden;background:var(--cream-2)}
.work-fig img{width:100%;height:clamp(200px,20vw,330px);object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
/* v6.9: the rotten-wood tile's photograph is a TALL (0.75 aspect) shot,
   so a cover crop shows only ~60% of its height.  Aim it at the rotted
   rail (source y ~600..830) instead of the default centre, which pushed
   the decayed board down under the caption plate.  Numbers from
   scripts/probe_wood.py: 1440 shows y 261..1129, phone y 350..1129. */
.work-fig--wood img{object-position:50% 45%}
.work-fig:hover img{transform:scale(1.045)}
.work-fig figcaption{
  position:absolute;left:clamp(10px,1.2vw,16px);right:clamp(10px,1.2vw,16px);bottom:clamp(12px,1.4vw,18px);
  padding:10px 8px;background:var(--white);color:var(--ink);text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;
  box-shadow:0 10px 22px -18px rgba(21,23,27,.75);
}
.work-note{margin:0;padding:13px clamp(18px,4vw,44px);background:var(--white);border-top:1px solid var(--line-2);font-size:13px;line-height:1.5;color:var(--muted);text-align:right}

/* ---------- contact ---------- */
.contact{background:var(--cream);padding-block:clamp(50px,6.6vw,92px)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4.4vw,64px);align-items:start}
.contact-left h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.13;margin:0 0 16px}
.contact-lede{max-width:44ch;margin:0 0 28px;font-size:16.5px;color:#3B414A}
.who{margin-bottom:26px}
.who li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;font-size:15px;line-height:1.55;color:var(--body)}
.who strong{color:var(--ink);font-weight:700}
.who a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.who a:hover{color:var(--red)}
.who-ico{color:var(--red);flex:0 0 20px}
.who-ico svg{width:20px;height:20px}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0 0 28px;padding-top:22px;border-top:1px solid var(--line)}
.facts dt{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.facts dd{margin:0;font-size:15px;color:var(--ink)}

.badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.badges li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#3B414A}
.badge-ico{color:var(--red);flex:0 0 20px}
.badge-ico svg{width:20px;height:20px}

.quote{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:clamp(22px,3vw,36px);box-shadow:0 26px 50px -40px rgba(21,23,27,.55)}
.quote-title{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.3vw,27px);margin:0 0 8px}
.quote-note{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.quote-note a{color:var(--red);font-weight:600;text-decoration:underline}

.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;margin-bottom:7px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#333940}
.req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid #978E80;border-radius:3px;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.4;
}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(201,36,44,.14)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
.form-error{margin:0 0 14px;font-size:13.5px;font-weight:600;color:var(--red-dk)}

/* ---------- footer ---------- */
.foot{background:var(--white);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,68px)}
.foot-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:start;padding-bottom:clamp(30px,4vw,50px)}
.foot-col{padding-inline:clamp(16px,2.6vw,34px);border-left:1px solid var(--line)}
.foot-col:first-child{border-left:0;padding-left:0}
.foot-col:last-child{padding-right:0}
.foot-brand img{width:clamp(176px,19vw,222px);height:auto;margin-bottom:18px}
.foot-brand p{max-width:34ch;font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.foot-title{margin:0 0 18px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.foot-title::after{content:"";display:block;width:28px;height:2px;margin-top:9px;background:var(--red)}
.foot-title--plain{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.4}
.foot-title--plain::after{background:var(--line)}
.foot-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;font-size:14.5px;line-height:1.6;color:var(--body)}
.foot-list li:last-child{margin-bottom:0}
.foot-list strong{color:var(--ink);font-weight:700}
.foot-list a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.foot-list a:hover{color:var(--red)}
.f-ico{color:var(--red);flex:0 0 18px;margin-top:3px}
.f-ico svg{width:18px;height:18px}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;
  padding-block:20px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted);
}
.foot-bottom p{margin:0}
.foot-bottom a{text-decoration:underline;text-underline-offset:2px}
.foot-bottom a:hover{color:var(--red)}

/* ---------- 1120px: the credentials bar goes two-up ----------
   four across is too tight for 'In business since 1997' on a tablet: it
   wrapped at 1000-1100px, so the bar stacks two-by-two well before the
   rest of the layout changes at 1080/860. */
@media (max-width:1120px){
  .cred-list{grid-template-columns:1fr 1fr}
  .cred-item{border-left:0;border-top:1px solid var(--line);min-height:0;padding:11px 16px}
  .cred-item:nth-child(odd){border-right:1px solid var(--line);padding-left:0}
  .cred-item:nth-child(-n+2){border-top:0}
  .seal--cred{height:44px}
}

/* ---------- 1080px: menu becomes a panel ---------- */
@media (max-width:1080px){
  :root{--hd:88px}
  .hd-in{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--hd)}
  .hd.is-stuck .hd-in{min-height:72px}
  .logo img{height:66px}
  .hd.is-stuck .logo img{height:54px}
  .menu-btn{display:inline-flex;flex:0 0 auto}
  .call-pill{flex:0 0 auto;margin-left:auto}

  html.js .nav{
    position:fixed;top:var(--hd);left:0;right:0;z-index:110;display:grid;gap:0;
    padding:10px clamp(18px,4vw,44px) 18px;background:var(--white);
    border-bottom:1px solid var(--line);box-shadow:0 24px 40px -30px rgba(21,23,27,.6);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  html.js .nav[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-a{padding:15px 2px;border-bottom:1px solid var(--line-2);font-size:14px;letter-spacing:.08em}
  .nav-a::after{left:0;right:auto;bottom:12px;width:26px;height:2px;transform:scaleY(0);transform-origin:left bottom}
  .nav-a:hover::after,.nav-a.is-active::after{transform:scaleY(1)}
  .hero-copy{max-width:min(500px,50vw)}

  /* no JavaScript: the menu cannot open, so the links fall to their own row */
  html:not(.js) .hd-in{flex-wrap:wrap}
  html:not(.js) .nav{
    order:4;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px 20px;
    padding-top:6px;border-top:1px solid var(--line-2);
  }
  html:not(.js) .nav-a{padding:6px 0;border-bottom:0;font-size:12.5px}
}

/* ---------- 860px: photograph above the copy ---------- */
@media (max-width:860px){
  .stroke,.hero-tree{display:none}
  .tear{display:block}

  .hero-photo{position:relative;inset:auto;width:100%;height:clamp(210px,40vw,320px);object-position:52% 0%}
  .hero-in{min-height:0;align-items:flex-start;padding-block:28px 36px;background:var(--cream)}
  .hero-copy{max-width:none;padding:0;background:transparent;box-shadow:none;border-radius:0}
  .hero-name{font-size:clamp(27px,6.2vw,38px)}
  .hero-city{font-size:clamp(15px,3.4vw,20px)}
  .hero-tag{font-size:clamp(17px,3.8vw,23px)}

  .pillars-grid{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid var(--line);padding:24px 0}
  .pillar:first-child{border-top:0}

  .about{grid-template-columns:1fr}
  .about-photo{min-height:300px}

  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .work-fig img{height:clamp(180px,32vw,260px)}
  .work-note{text-align:left}

  .contact-grid{grid-template-columns:1fr}

  .foot-grid{grid-template-columns:1fr}
  .foot-col{border-left:0;padding:26px 0;border-top:1px solid var(--line)}
  .foot-col:first-child{border-top:0;padding-top:0}
  .foot-col:last-child{padding-bottom:0}
  .foot-brand img{width:180px}
}

/* ---------- 620px: phones ---------- */
@media (max-width:620px){
  body{font-size:16px}
  .call-pill{padding:12px 16px;font-size:14px}
  .logo img{height:54px}
  .hd.is-stuck .logo img{height:46px}

  /* v6.38: the phone hero shows the WHOLE house.  The box was 190px tall
     while the picture, object-fit:cover in a 390px column, is drawn 260px -
     so its bottom 70px (26.9%) were thrown away, and the brushed tear then
     covered another 36px on top of that.  The two together landed the cream
     panel across the house's lower first floor and hid the steps and door.
     The photograph now keeps its own 3:2 shape (390x260 on a 390 phone), so
     there is nothing left to crop; the tear falls on the lawn under the house
     and the copy panel starts below it.  Its width, its file and every rule
     around it are untouched - the panel simply sits 70px lower. */
  .hero-photo{height:auto;object-position:52% 0%}
  .hero-in{padding-block:22px 28px}
  .hero-copy .btn{width:100%}
  .hero-rule{margin:20px 0 18px}
  .hero-lede{margin:0 0 22px;font-size:15.5px}

  /* the bar leads the page now: on a phone it is four small tiles in two
     rows, icon above its label, so every label sits on ONE line and the
     house photo is not pushed a third of a screen down */
  .cred-list{grid-template-columns:1fr 1fr;padding-inline:0;grid-auto-rows:1fr}
  .cred-item{flex-direction:column;align-items:flex-start;gap:5px;
    border-right:0;border-top:1px solid var(--line);padding:7px 14px}
  .cred-item:nth-child(odd){border-right:1px solid var(--line);padding-left:18px}
  .cred-item:nth-child(even){padding-right:18px}
  .cred-item:nth-child(-n+2){border-top:0}
  .cred-ico{flex:0 0 22px}
  .cred-ico svg{width:22px;height:22px}
  .cred-num{font-size:21px}
  .cred-unit{font-size:9px}
  .seal--cred{height:36px}
  .seal--badge{height:30px}
  .seal--foot{height:26px}
  .cred-txt{font-size:12px;line-height:1.4}
  .cred-txt strong{font-size:12.5px}

  .facts{grid-template-columns:1fr;gap:14px}
  .field-row{grid-template-columns:1fr}

  .svc-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .work-fig img{height:240px}

  .quote{padding:20px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:420px){
  .call-pill span{display:none}
  .call-pill{padding:12px 13px}
  .menu-word{display:none}
  .logo img{height:50px}
}

/* ---------- 340px: the tiles go back to one column ---------- */
@media (max-width:340px){
  .cred-list{grid-template-columns:1fr}
  .cred-item{flex-direction:row;align-items:center;gap:10px;
    padding:7px 18px;border-right:0 !important}
  .cred-item:nth-child(n+2){border-top:1px solid var(--line)}
}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .work-fig:hover img{transform:none}
}

@media print{
  .hd,.menu-btn,.stroke,.tear,.quote,.btn,.call-pill,.work-note{display:none !important}
  body{font-size:11pt;color:#000}
  .hero-photo{display:none}
  .hero{background:#fff}
  .hero-in{background:#fff;min-height:0}
  .hero-copy{max-width:none;padding:0}
  .cred,.pillars,.about,.services,.contact,.foot{border-color:#ccc}
  a{text-decoration:none;color:#000}
  .work-fig img{height:auto}
}

/* ---------- v6.14: the estimate form emails the office ---------- */

/* the relay's honeypot: off-screen, never focusable, never seen */
.quote .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* thanks.html - the page the relay lands the visitor on after a request */
.thanks{padding:clamp(40px,7vw,76px) 0 clamp(52px,8vw,96px)}
.thanks-in{max-width:760px}
.thanks h1{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.08;margin:0 0 18px;color:var(--ink)}
.thanks-lede{font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--body);margin:0 0 14px}
.thanks-lede a{color:var(--red);font-weight:600}
.thanks-acts{margin:26px 0 0}

/* ---------- v6.18: the About panel's second button ---------- */
.about-acts{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:0;max-width:none;
}
@media (max-width:520px){
  .about-acts{display:grid}
  .about-acts .btn{width:100%}
}