/* TVIS Construction
   White header with the full-colour logo, a dark photo-led opening, charcoal footer, olive only as the accent
   (buttons, bars, bullets). Barlow Condensed for headings and buttons, Source Sans 3 for everything else.
   Square corners, flat buttons; soft shadows only on the header and the form/sidebar cards.
   No gradients except the scrim that keeps text readable over a photo. Rules: docs/STYLE-GUIDE.md */

@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3.woff2) format("woff2");font-weight:200 900;font-display:swap}
/* Stand-ins sized to the webfonts (average glyph width measured against Arial / Liberation Sans) so the swap does not move the layout. */
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold"),local("Roboto Bold");font-weight:700 800;size-adjust:67.5%;ascent-override:148.1%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica"),local("Roboto");font-weight:200 900;size-adjust:91.6%;ascent-override:111.8%;descent-override:43.7%;line-gap-override:0%}

:root{
  --ink:#232B2E;
  --ink-soft:#4A5256;      /* 8:1 on white, for secondary notes only */
  --olive:#72852E;
  --olive-deep:#5E6E24;    /* buttons on white: 5.6:1 */
  --olive-deeper:#4F5D1E;
  --olive-light:#A3B654;   /* olive on charcoal */
  --pale:#DCE4B9;
  --tint:#EEF1E2;
  --warm:#F3F2EE;
  --stone:#E4E1D8;
  --paper:#FFFFFF;
  --charcoal:#232B2E;
  --charcoal-2:#2E373B;
  --display:"Barlow Condensed","Barlow Condensed Fallback",Arial,sans-serif;
  --text:"Source Sans 3","Source Sans 3 Fallback",Arial,sans-serif;
  --t-h1:clamp(36px,4.2vw,60px); /* every page title; the home hero sets its own, larger size */
  --t-h2:clamp(31px,3.8vw,52px);
  --t-h3:clamp(22px,1.8vw,26px);
  --t-body:17px;
  --t-small:16px;
  --t-statement:clamp(64px,12vw,170px);
  --gut:clamp(20px,4vw,56px);
  --max:1320px;
  --sec:clamp(56px,4.5vw,64px); /* space above and below every section; 44px on phones */
  --open-pad:clamp(40px,4.5vw,56px); /* page openings and page tops: the space above and below a page title band */
  --gap-head:clamp(28px,2.8vw,40px); /* a section head (heading, line, link) to the content under it */
  --gap-intro:24px; /* a heading, or its olive bar, to its first line of text */
  --bleed:calc(var(--gut) + max(0px, (100vw - var(--max)) / 2)); /* to the screen edge at every width, so panel photos never stop short */
  --bleed-capped:calc(var(--gut) + min(96px, max(0px, (100vw - var(--max)) / 2)));
  --hdr-h:116px;
  --hdr-edge:5px; /* the olive stripe and the hairline under the header bar */
  --mbar-h:0px;
  --ease:cubic-bezier(.2,.7,.2,1); /* the one timing curve for every hover and settle */
  --dur:.25s;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-padding-top:calc(var(--hdr-h) + var(--hdr-edge) + 24px);scroll-behavior:smooth}
html:has(.jump){scroll-padding-top:calc(var(--hdr-h) + var(--hdr-edge) + 76px)}
[hidden]{display:none!important}
body{font:400 var(--t-body)/1.5 var(--text);color:var(--ink);background:var(--paper);padding-top:calc(var(--hdr-h) + var(--hdr-edge));padding-bottom:var(--mbar-h);overflow-x:clip}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--olive-deep);outline-offset:3px}
.hero :focus-visible,.ftr :focus-visible,.band :focus-visible,.thanks :focus-visible,.builder-cta :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:12px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);z-index:100;background:var(--charcoal);color:#fff;padding:12px 16px;text-decoration:none}
.skip:focus{width:auto;height:auto;clip:auto}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding:var(--sec) 0}
.sec-tint{background:var(--tint)}
.sec-warm{background:var(--warm)}
.bar{display:block;width:88px;height:8px;background:var(--olive);margin-top:clamp(18px,2.4vw,28px)}

h1,h2,h3,.h2,.h3{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.005em;text-wrap:balance}
h1,.h1{font-size:var(--t-h1);line-height:.96}
h2,.h2{font-size:var(--t-h2)}
h3,.h3{font-size:var(--t-h3);line-height:1.05;letter-spacing:.01em}
p,li,dd,dt{max-width:68ch}
.lead{font-size:var(--t-body);max-width:52ch}
.small{font-size:var(--t-small)}
.tbd{background:#F6E58D;color:#3B3200;padding:0 .2em;font-weight:700;white-space:nowrap}
.tbd-long{white-space:normal;display:inline}
.slot-note{display:block;font:600 var(--t-small)/1.3 var(--text);color:#3B3200;background:#F6E58D;padding:8px 12px}
.photo-empty .slot-note,.ba-empty .slot-note{margin:4px 0}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;font:700 var(--t-body)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;text-align:center;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--olive-deep);color:#fff}
.btn-primary:hover{background:var(--olive-deeper)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--pale)}
.btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn-outline:hover{background:#fff;color:var(--ink)}
.btn-ink{background:var(--charcoal);color:#fff}
.btn-ink:hover{background:#000}
.btn-block{width:100%}
.textlink{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:700 var(--t-body)/1 var(--display);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--olive-deep);padding:8px 0;border-bottom:3px solid var(--olive)}
.textlink svg{width:20px;height:20px;transition:transform .15s}
.textlink:hover svg{transform:translateX(3px)}
.bigphone{font:800 var(--t-h2)/.95 var(--display);text-decoration:none;letter-spacing:.005em}
.bigphone .tbd{font-size:.6em;vertical-align:middle}


/* ---------- pictures ---------- */
.photo{position:relative;overflow:hidden;background:var(--tint)}
.photo>img,.dgm{width:100%;height:100%;object-fit:cover}
.photo-drawn{aspect-ratio:4/3}
.dgm{display:block}

/* before / after: drag the handle; the drawn pair stands in until both photos exist */
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tint);--pos:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-img{position:absolute;inset:0}
.ba-img img,.ba-img .dgm{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232B2E' stroke-width='2.6'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat}
.ba-tag{position:absolute;bottom:14px;z-index:2;font:700 var(--t-small)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;color:#fff;background:var(--charcoal);pointer-events:none}
.ba-tag-b{left:14px}.ba-tag-a{right:14px;background:var(--olive-deep)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.ba:has(.ba-range:focus-visible){outline:3px solid var(--olive);outline-offset:3px}
.ba-single img{width:100%;height:100%;object-fit:cover}
.ba .slot-note{position:absolute;left:14px;top:14px;z-index:3;max-width:60%}
.ba .slot-note+.slot-note{top:52px}
.photo .slot-note{position:absolute;left:14px;top:14px;z-index:3}


/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--paper);color:var(--ink);border-top:4px solid var(--olive);border-bottom:1px solid var(--stone)}
.hdr{transition:box-shadow .25s ease;box-shadow:0 1px 2px rgba(35,43,46,.06),0 8px 24px -16px rgba(35,43,46,.18)}
.hdr.is-scrolled{box-shadow:0 1px 3px rgba(35,43,46,.12),0 16px 36px -14px rgba(35,43,46,.34)}
.hdr-in{display:flex;align-items:center;gap:clamp(18px,1.8vw,24px);height:var(--hdr-now,var(--hdr-h));padding:0 var(--gut);max-width:var(--max);margin:0 auto;transition:height .3s cubic-bezier(.2,.7,.2,1)}
.hdr-logo{display:block;height:88px;aspect-ratio:1619/776;flex:none;transition:height .3s cubic-bezier(.2,.7,.2,1)}
.hdr-logo img{height:100%;width:auto}
.nav{margin-left:auto}
.nav-list{display:flex;gap:clamp(14px,1.5vw,22px);align-items:center}
.nav-list a{position:relative;display:block;font:700 17px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:14px 0;color:var(--ink);white-space:nowrap;transition:color .15s ease}
.nav-list a:hover{color:var(--olive-deep)}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:3px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.nav-list a:hover::after,.nav-list a:focus-visible::after,.nav-list a[aria-current]::after{transform:scaleX(1)}
.nav-list a:focus-visible{outline-offset:6px}
.nav-list a[aria-current]{color:var(--olive-deep)}
@media (prefers-reduced-motion:reduce){.nav-list a::after{transition:none}}
.hdr-social{display:flex;gap:2px;padding-left:clamp(14px,1.4vw,20px);border-left:1px solid var(--stone);height:44px;align-items:center}
.hdr-social a,.mmenu-social a{width:44px;height:44px;display:grid;place-items:center}
.hdr-social svg,.mmenu-social svg{width:28px;height:28px}
.hdr-social a:hover svg,.mmenu-social a:hover svg{transform:scale(1.08)}
.hdr-social svg,.mmenu-social svg{transition:transform .15s ease}
.hdr-phone{display:flex;gap:10px;align-items:center;font:700 22px/1 var(--display);letter-spacing:.03em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.hdr-phone small{display:block;margin-bottom:4px;font:600 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.hdr-phone:hover{color:var(--olive-deep)}
.hdr-phone svg{flex:none;width:22px;height:22px;color:var(--olive-deep)}
.hdr-phone .tbd{font-size:.85em}
.hdr-cta{min-height:54px;padding:0 24px;background:var(--olive-deep);color:#fff;letter-spacing:.06em;white-space:nowrap;box-shadow:0 1px 2px rgba(35,43,46,.18),0 6px 14px -6px rgba(61,74,20,.55);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.hdr-cta:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(35,43,46,.2),0 10px 20px -8px rgba(61,74,20,.6)}
.hdr-cta:hover{background:var(--olive-deeper)}
.hdr-cta:active{transform:translateY(0);box-shadow:0 1px 2px rgba(35,43,46,.18),0 4px 10px -6px rgba(61,74,20,.5)}
.hdr-cta:focus-visible{outline-offset:4px}
.hdr-logo:focus-visible{outline-offset:6px}
/* desktop only: the header settles to a slimmer bar once the page has scrolled, without moving anything under it */
@media (min-width:1024px){
  html.hdr-compact{--hdr-now:84px}
  html.hdr-compact .hdr-logo{height:62px}
  html.hdr-compact .hdr-cta{min-height:48px}
}
.hdr-call,.menu-btn{display:none}
.hdr-call{align-items:center;gap:8px;margin-left:auto;min-height:48px;padding:0 6px;font:700 var(--t-body)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.hdr-call svg{width:22px;height:22px;color:var(--olive-deep)}
.menu-btn{align-items:center;gap:10px;min-height:48px;padding:0 4px;font:700 var(--t-body)/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.menu-bars{position:relative;width:26px;height:3px;background:currentColor;transition:background .15s}
.menu-btn:active,.hdr-call:active{opacity:.7}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;width:26px;height:3px;background:currentColor;transition:transform .2s}
.menu-bars::before{top:-8px}.menu-bars::after{top:8px}
.menu-btn[aria-expanded="true"] .menu-bars{background:transparent}
.menu-btn[aria-expanded="true"] .menu-bars::before{transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars::after{transform:translateY(-8px) rotate(-45deg)}
/* the phone menu opens full screen under the header, the phone number first */
.mmenu{position:fixed;left:0;right:0;top:calc(var(--hdr-h) + var(--hdr-edge));bottom:0;background:var(--paper);padding:20px var(--gut) 28px;overflow:auto;display:flex;flex-direction:column;z-index:60}
.mmenu-call{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 20px;background:var(--charcoal);color:#fff;font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.mmenu-call svg{width:24px;height:24px;color:var(--olive-light)}
.mmenu-call .tbd{font-size:.8em}
.mmenu ul{margin-top:8px}
.mmenu li a{display:flex;align-items:center;justify-content:space-between;font:700 clamp(28px,8vw,38px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;text-decoration:none;padding:17px 0;border-bottom:1px solid var(--stone)}
.mmenu li:last-child a{margin-top:20px;border:0;padding:0 20px;min-height:64px;background:var(--olive-deep);color:#fff;font-size:24px;letter-spacing:.04em}
.mmenu-foot{margin-top:auto;padding-top:28px;display:flex;justify-content:flex-start}
.mmenu-social{display:flex;gap:4px;margin-left:-8px}
body.menu-open{overflow:hidden}
.mmenu:not([hidden]){animation:mmenu-in .28s cubic-bezier(.2,.7,.2,1)}
.mmenu:not([hidden]) .mmenu-call,.mmenu:not([hidden]) li{animation:settle .5s cubic-bezier(.2,.7,.2,1) both}
.mmenu:not([hidden]) li:nth-child(1){animation-delay:.05s}.mmenu:not([hidden]) li:nth-child(2){animation-delay:.09s}.mmenu:not([hidden]) li:nth-child(3){animation-delay:.13s}.mmenu:not([hidden]) li:nth-child(4){animation-delay:.17s}.mmenu:not([hidden]) li:nth-child(5){animation-delay:.21s}.mmenu:not([hidden]) li:nth-child(6){animation-delay:.25s}
@keyframes mmenu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- the first screen: a jobsite photograph under a dark scrim ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#1B2225;color:#fff;display:flex;align-items:center;min-height:clamp(560px,calc(100svh - var(--hdr-h) - var(--hdr-edge)),820px)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg .photo{position:absolute;inset:0;aspect-ratio:auto;background:none}
.hero-bg .photo>img,.hero-bg .dgm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,22,24,.86) 0%,rgba(18,22,24,.62) 36%,rgba(18,22,24,.08) 72%,rgba(18,22,24,0) 100%)}
@media (min-width:901px){
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,22,24,.34) 0%,rgba(18,22,24,0) 24%),linear-gradient(0deg,rgba(18,22,24,.42) 0%,rgba(18,22,24,0) 40%)}
  .hero-bg .photo>img{animation:hero-photo 1.8s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes hero-photo{from{transform:scale(1.045)}to{transform:none}}
.hero:has(.photo-drawn)::after{background:linear-gradient(90deg,rgba(18,22,24,.5) 0%,rgba(18,22,24,0) 62%)}
.hero-in{width:100%;padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,10vh,112px)}
.hero h1{max-width:none;text-wrap:nowrap;font-size:clamp(44px,6.8vw,104px)}
.hero h1 span{display:block}
.hero h1::after{content:"";display:block;width:96px;height:8px;background:var(--olive);margin-top:clamp(22px,2.6vw,34px)}
.hero-sub{margin-top:clamp(22px,2.6vw,32px);font:600 clamp(20px,1.9vw,26px)/1.3 var(--text);max-width:32ch}
.hero-line{margin-top:14px;font-size:var(--t-body);max-width:52ch;color:#E3E7E0}
.hero-act{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center;margin-top:clamp(28px,3.4vw,44px)}
.hero-call{font:700 var(--t-body)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;white-space:nowrap;padding:12px 0}
.hero-call .tbd{font-size:.85em}
/* the one planned entrance: the headline and the lines under it settle into place once */
.hero h1 span,.hero-sub,.hero-line,.hero-act,.phero h1,.phero p,.est-intro h1,.est-intro p{animation:settle .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span+span{animation-delay:.12s}
.hero-sub,.phero p,.est-intro p{animation-delay:.4s}
.hero-line{animation-delay:.5s}
.hero-act{animation-delay:.62s}
@keyframes settle{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}

/* ---------- home: who the project is for ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;margin-bottom:var(--gap-head)}
.sec-head p{max-width:44ch}
.who-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.who-card{display:flex;flex-direction:column;background:var(--paper);color:inherit;text-decoration:none;border:2px solid var(--stone);transition:border-color .15s}
.who-card:hover,.who-card:focus-visible{border-color:var(--olive)}
.who-card .photo{aspect-ratio:16/10}
.who-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:clamp(20px,2.4vw,32px);border-top:6px solid var(--olive)}
.who-body h3{font-size:clamp(28px,3vw,40px);line-height:1}
.who-body p{grid-column:1;font-size:var(--t-small);max-width:34ch}
.who-go{grid-column:2;grid-row:1/span 2;width:56px;height:56px;display:grid;place-items:center;background:var(--olive-deep);color:#fff;transition:background .15s}
.who-go svg{width:26px;height:26px;transition:transform .15s}
.who-card:hover .who-go{background:var(--olive-deeper)}
.who-card:hover .who-go svg{transform:translateX(3px)}

/* the drawings carry a lot of empty sky: crop into the ground so the work fills the card */
.who-card .photo-drawn .dgm,.svc-card .photo-drawn .dgm{transform:scale(1.38);transform-origin:50% 86%}

/* ---------- home: the four services people ask for most ---------- */
.svcs{background:var(--warm)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.svc-card{display:flex;flex-direction:column;background:var(--paper);color:inherit;text-decoration:none}
.svc-card .photo{aspect-ratio:16/10} .svc-list .photo{aspect-ratio:4/3} /* home service cards share the audience cards' shape */
.svc-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 22px 26px}
.svc-body p{font-size:var(--t-small);line-height:1.5}
.svc-more{margin-top:auto;padding-top:10px;font:700 var(--t-small)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--olive-deep)}
.svc-card:hover h3,.svc-card:focus-visible h3{color:var(--olive-deep)}
.svc-card:hover .svc-more{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- home: the statement band ---------- */
.band{background:var(--charcoal);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.band-bg{position:absolute;inset:0;z-index:-2}
.band-bg .photo{position:absolute;inset:0;aspect-ratio:auto;background:none}
.band-bg .photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.band:has(.band-bg .photo)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,22,24,.76) 0%,rgba(18,22,24,.48) 50%,rgba(18,22,24,.76) 100%)}
.band:has(.band-bg .photo){padding:clamp(72px,6.5vw,92px) 0}
@supports not selector(:has(a)){ .band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,22,24,.76) 0%,rgba(18,22,24,.48) 50%,rgba(18,22,24,.76) 100%)} }
.band-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.band h2{font-size:var(--t-h2);line-height:1}
.band p{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:#E3E7E0;max-width:42ch}

/* ---------- home: where we work, and the last ask ---------- */
.near{background:var(--warm)}
.near-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.near p{margin-top:22px;max-width:44ch}
.near p.towns{margin-top:12px;font-weight:700}
.near ul.towns{list-style:none;margin:20px 0 0;padding:0;max-width:640px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 20px;font-weight:600}
.near ul.towns li{position:relative;padding-left:22px}
.near ul.towns li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--olive)}
.cta-card{background:var(--paper);padding:clamp(28px,3.4vw,48px);border-top:8px solid var(--olive)}
.cta-card h3{font-size:clamp(28px,3vw,40px);line-height:1}
.cta-card p{margin-top:16px;max-width:36ch}
.cta-card>.btn{margin-top:32px}
.cta-card .bigphone{display:block;margin-top:22px;font-size:clamp(34px,3.4vw,48px)}

/* ---------- recent work ---------- */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:44px}
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}
@media (min-width:901px){.proj-grid-one .proj{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 clamp(24px,3vw,48px);align-items:center}.proj-grid-one .proj-title{margin-top:0}}
.proj-title{font-size:var(--t-h3);margin-top:18px}
.proj-title a{text-decoration:none}
.proj-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.proj-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px;font-size:var(--t-small);color:var(--ink)}
.proj-desc{margin-top:10px;font-size:var(--t-small)}
.proj-more{display:inline-block;margin-top:0;padding:12px 0;font:700 var(--t-small)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--olive-deep)}
.badge{display:inline-flex;align-items:center;gap:7px;font:700 var(--t-small)/1 var(--text);padding:6px 10px;background:var(--stone);color:var(--ink)}
.badge-live{background:var(--olive-deep);color:#fff}
.badge-live::before{content:"";width:8px;height:8px;background:#D6E59A}
.empty{color:var(--ink-soft)}


/* ---------- what happens next: the slip ---------- */
.how .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:start}
.how-text p{margin-top:24px;font-size:var(--t-body);max-width:32ch}
.how-text .btn{margin-top:32px}
.steps-card{position:relative;background:#fff;color:var(--ink);width:min(480px,100%);justify-self:end;border:1px solid var(--stone);border-top:4px solid var(--olive);box-shadow:0 1px 3px rgba(35,43,46,.08),0 18px 40px -20px rgba(35,43,46,.35)}
.sc-head{padding:24px 28px 0;font:700 var(--t-h3)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;max-width:none}
.sc-list{list-style:none;margin:0;padding:22px 28px 26px;display:grid;gap:0}
.sc-list li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;padding-bottom:22px}
.sc-list li:last-child{padding-bottom:0}
.sc-list li:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;background:var(--pale)}
.sc-n{width:36px;height:36px;display:grid;place-items:center;background:var(--charcoal);color:#fff;font:700 18px/1 var(--display)}
.sc-list li:last-child .sc-n{background:var(--olive-deep)}
.sc-list p{margin:0;padding-top:7px;font-size:var(--t-small);line-height:1.45;color:var(--ink-soft);max-width:none}
.sc-list b{color:var(--ink);font-weight:700}
.sc-result{display:flex;gap:14px;align-items:center;padding:18px 28px;background:var(--charcoal);color:#fff}
.sc-result svg{flex:none;width:26px;height:26px;color:var(--olive-light)}
.sc-result p{margin:0;display:grid;gap:3px;font-size:14px;color:rgba(255,255,255,.75);max-width:none}
.sc-result b{font:700 17px/1.15 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff}


/* ---------- footer ---------- */
/* Footer colour, kept quiet (2026-11-03): the charcoal deepens a touch toward the bottom, faint contour lines sit behind the
   ground and the top of the columns (the same contour.svg as the header whisper, lifted so it reads on charcoal), a 1px
   sunlit edge on top of the olive ground line and a 1px shadow under it, links in the soft off-white so the headings,
   phone and logo carry the colour, and a hairline above the copyright row. */
.ftr{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--charcoal) 0,#1E2629 100%);color:#fff}
.ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:min(100%,560px);z-index:-1;background:url(/assets/img/contour.svg) 72% 0/1600px 400px no-repeat;opacity:.42;filter:brightness(2.6) saturate(.7);-webkit-mask:linear-gradient(90deg,transparent 0,#000 30%,#000 100%),linear-gradient(180deg,#000 40%,transparent 100%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent 0,#000 30%,#000 100%),linear-gradient(180deg,#000 40%,transparent 100%);mask-composite:intersect;pointer-events:none}
.ftr-ground{position:relative;height:88px;border-bottom:8px solid var(--olive);box-shadow:0 1px 0 rgba(0,0,0,.28)} /* 88 (was 68) since the crew: room for the excavator's arm */
.ftr-ground::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--olive-light);opacity:.55}
.ftr-list a,.ftr-list p,.ftr-bottom{color:#E3E7E0}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
.dozer{position:absolute;right:var(--gut);bottom:-4px;width:150px;height:auto;overflow:visible;will-change:transform}
/* The parked dozer (phone menu, 404, Thanks): it stands on a ground line that runs the full width under it, tracks on
   the line, a settled heap in front, like the footer once the roll has ended. --dzw is its width; the margin puts the
   track bottom (7 of the 120 viewBox units above the drawing's edge) exactly on the line. Jeremy (2026-11-03): static
   is fine in the menu, just a little smaller, and the line must not float off to the side. */
.dozer-spot{--dz:var(--olive);--dz-dark:var(--ink);--dzw:min(220px,46vw);position:relative;display:block;margin-bottom:28px}
.dozer-spot .dozer{position:relative;inset:auto;z-index:1;display:block;width:var(--dzw);margin-bottom:calc(6px - var(--dzw) * 7 / 260)}
.dozer-spot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--olive)}
.dozer-spot .dz-dirt{opacity:.88}.dozer-spot .pile{transform:scale(1.2)}
.mmenu .dozer-spot{--dzw:100px;margin:auto 0 0;padding-top:28px}
.thanks .dozer-spot{--dz:var(--olive-light);--dz-dark:var(--charcoal)}
.thanks .dozer-spot::after{background:var(--olive-light)}
/* The footer roll. 5.24s; every delay below is a share of it, written out because custom properties do not reach into the inline SVG in Chrome.
   (2026-11-03: 1.6s, then 3.4, 4.6, 4.85 and 5.24s as Jeremy asked for slower each time.) */
.ftr-ground.armed .dozer{transform:translateX(-45vw);opacity:0}
.ftr-ground.go .dozer{transform:none;opacity:1;animation:dozer-roll 6s cubic-bezier(.3,.5,.25,1) both}
@keyframes dozer-roll{from{transform:translateX(-45vw);opacity:0}20%{opacity:1}to{transform:none;opacity:1}}
.ftr-ground.go .track-run{animation:track-run 6s cubic-bezier(.3,.5,.25,1) both}
@keyframes track-run{from{stroke-dashoffset:234}to{stroke-dashoffset:0}}
.puff{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.ftr-ground.go .puff{animation:puff 1.7s cubic-bezier(.2,.6,.4,1) .1s both}
.ftr-ground.go .puff:nth-child(2){animation-delay:1.32s}.ftr-ground.go .puff:nth-child(3){animation-delay:2.58s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:.55}100%{opacity:0;transform:translate(-14px,-26px) scale(1.9)}}
.dz-blade{transform-box:view-box;transform-origin:150px 88px}
.ftr-ground.go .dz-blade{animation:blade-run 6.8s cubic-bezier(.3,.7,.3,1) both}
@keyframes blade-run{0%,8%{transform:rotate(-3deg)}20%{transform:rotate(.6deg)}24%,85%{transform:rotate(0)}92%{transform:rotate(2deg)}100%{transform:rotate(1.3deg)}}
.dz-rig{transform-box:view-box;transform-origin:120px 96px}
.ftr-ground.go .dz-rig{animation:rig-pitch 1.51s ease-in-out 4}
@keyframes rig-pitch{0%,100%{transform:rotate(0)}25%{transform:rotate(.45deg)}75%{transform:rotate(-.45deg)}}
.tdust{opacity:0;transform-box:view-box;transform-origin:44px 110px}
.ftr-ground.go .tdust{animation:tdust 1.4s ease-out 1.43s both}.ftr-ground.go .tdust:nth-of-type(2){animation-delay:2.7s}.ftr-ground.go .tdust:nth-of-type(3){animation-delay:4.1s}
@keyframes tdust{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.42}100%{opacity:0;transform:translate(-15px,-10px) scale(2.55)}}
.puff-idle{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.ftr-ground.go .puff-idle{animation:puff-idle 3.2s ease-out 7.32s infinite}
@keyframes puff-idle{0%{opacity:0;transform:translate(0,0) scale(.5)}10%{opacity:.28}60%,100%{opacity:0;transform:translate(-8px,-16px) scale(1.5)}}
.dz-dirt{opacity:0;transform-box:view-box;transform-origin:232px 113px}
.pile{transform-box:view-box;transform-origin:226px 113px}.pile-front{transform-origin:231px 113px;opacity:.9}.pile-back{opacity:.55}
.clod,.dust{opacity:0;transform-box:view-box}.clod{transform-origin:250px 92px}.dust{transform-origin:236px 112px}
.ftr-ground.go .dz-dirt{opacity:.88;animation:dirt-settle .55s cubic-bezier(.3,.7,.3,1) 5.88s both}
@keyframes dirt-settle{0%{transform:scale(1)}50%{transform:scale(1.035,.955)}100%{transform:scale(1)}}
.ftr-ground.go .pile{animation:pile-grow 6s cubic-bezier(.3,.5,.25,1) both}.ftr-ground.go .pile-front{animation-delay:0.18s}
@keyframes pile-grow{from{transform:scale(.24,.32)}to{transform:scale(1.24,1.24)}}
.ftr-ground.go .clod{animation:clod 1.1s cubic-bezier(.2,.5,.6,1) 1.32s both}
.ftr-ground.go .clod:nth-of-type(2){animation-delay:2.46s;animation-duration:1s}.ftr-ground.go .clod:nth-of-type(3){animation-delay:3.2s;animation-duration:.95s}.ftr-ground.go .clod:nth-of-type(4){animation-delay:4.68s;animation-duration:.9s}
@keyframes clod{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}60%{transform:translate(9px,-8px)}100%{opacity:0;transform:translate(16px,9px)}}
.ftr-ground.go .dust{animation:dust 1.6s ease-out 1s both}.ftr-ground.go .dust:nth-of-type(2){animation-delay:2.4s}.ftr-ground.go .dust:nth-of-type(3){animation-delay:3.9s}
@keyframes dust{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.55}100%{opacity:0;transform:translate(16px,-10px) scale(2.7)}}
.ftr .tbd{background:#5A5220;color:#FFF3A8}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr);gap:40px clamp(28px,4vw,64px);padding-top:clamp(40px,4vw,52px);padding-bottom:clamp(28px,3.4vw,44px)}
.ftr-logo{display:block;width:min(280px,72vw)}
.ftr-desc{margin-top:20px;max-width:34ch;color:#E3E7E0}
.ftr .socials{margin:16px 0 0 -10px}
.ftr-h{font:700 17px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--olive-light);margin-bottom:16px}
.ftr-list{display:grid;gap:10px;font-size:var(--t-small);align-content:start}
.ftr-list a{display:inline-block;padding:4px 0;margin:-4px 0;text-decoration:none}
.ftr-list a,.ftr-bottom a{transition:color .15s}
.ftr-list a:hover{color:var(--olive-light);text-decoration:underline;text-underline-offset:4px}
.ftr-phone{display:inline-block;font:700 clamp(28px,2.4vw,36px)/1 var(--display);letter-spacing:.01em;text-decoration:none;margin-bottom:6px}
.ftr-phone:hover{color:var(--olive-light)}
.ftr-phone .tbd{font-size:.8em;white-space:nowrap}
.ftr-talk{font-size:var(--t-small);color:#E3E7E0;margin-bottom:6px}
.ftr .licensed{margin-top:12px;font-size:var(--t-small)}
.ftr-bottom{padding-top:20px;padding-bottom:28px;display:flex;justify-content:space-between;align-items:center;gap:12px 32px;flex-wrap:wrap;font-size:var(--t-small)}
.ftr-bottom a{text-decoration:none}
.ftr-bottom a:hover{color:var(--olive-light);text-decoration:underline;text-underline-offset:4px}
.ftr-top{display:inline-flex;align-items:center;gap:8px}
.ftr-top svg{width:16px;height:16px;transition:transform .15s}
.ftr-top:hover svg{transform:translateY(-3px)}
.socials{display:flex;gap:6px}
.socials a{width:44px;height:44px;display:grid;place-items:center;color:#fff}
.socials a:hover{color:var(--olive-light)}
.socials svg{width:30px;height:30px;transition:transform .15s ease}
.socials a:hover svg{transform:scale(1.08)}
.ftr-legal{color:#E3E7E0;max-width:none}
.ftr-landing .ftr-grid{grid-template-columns:1fr}

/* ---------- phone bar ---------- */
.mbar{display:none}


/* ---------- inner page opening ---------- */
.phero{background:var(--warm)}
.phero h1,.est-intro h1{font-size:clamp(36px,4.2vw,60px);max-width:none}
.phero h1::after,.est-intro h1::after{content:"";display:block;width:88px;height:8px;background:var(--olive);margin-top:clamp(18px,2.2vw,28px)}
.phero p,.est-intro p{margin-top:var(--gap-intro);font-size:clamp(19px,1.7vw,22px);line-height:1.5;max-width:56ch}
.phero .hero-act,.est-intro .hero-act{margin-top:32px}
.phero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.phero-pic .photo{aspect-ratio:4/3}
.phero-pic .photo-drawn .dgm{transform:scale(1.3);transform-origin:50% 86%}
/* a real photo fills the right side of the page heading: the full height of the band, top to bottom, with its
   right edge on the content edge (never the screen edge). The photo column is a little wider than the text column,
   and the gap a little tighter, so the photo reads as the big thing while every title still fits in two lines. */
.phero{--phero-pad:var(--open-pad);padding:var(--phero-pad) 0;overflow:hidden}
@media (min-width:901px){
  .phero-split:has(.phero-pic>.photo:not(.photo-drawn)){align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,4.4vw,64px)}
  .phero-split:has(.phero-pic>.photo:not(.photo-drawn))>div:first-child{align-self:center}
  .phero-pic:has(>.photo:not(.photo-drawn)){margin:calc(-1 * var(--phero-pad)) calc(-1 * var(--bleed)) calc(-1 * var(--phero-pad)) 0;position:relative}
  .phero-pic>.photo:not(.photo-drawn){aspect-ratio:auto;height:100%;min-height:460px;max-height:640px}
}
.hero-photo{display:block}
.hero-photo .photo{aspect-ratio:21/9}
.hero-photo .photo-empty{display:none}

/* jump links under the page opening */
.jump{position:sticky;top:calc(var(--hdr-now,var(--hdr-h)) + var(--hdr-edge));z-index:30;background:var(--paper);border-bottom:3px solid var(--tint)}
.jump ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:block;white-space:nowrap;font:700 var(--t-small)/1 var(--display);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:20px 16px 20px 0;margin-right:16px}
.jump a:hover{color:var(--olive-deep)}
.jump a.on{box-shadow:inset 0 -4px 0 var(--olive)}
.jump-short{display:none}

/* ---------- service sections ---------- */
.sv .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);row-gap:0;align-items:start}
.sv .wrap > div:not(.sv-media){display:contents}
.sv h2{grid-column:1/-1;margin-bottom:clamp(28px,3.5vw,48px)}
.sv .wrap > div:not(.sv-media) > :not(h2){grid-column:2}
.sv-media{grid-column:1;grid-row:2/span 8}
.sv-media>.photo,.pads-pic>.photo{aspect-ratio:4/3}
.sv-flip .wrap > div:not(.sv-media) > :not(h2){grid-column:1}
.sv-flip .sv-media{grid-column:2}
.sv-intro{max-width:44ch}
@media (min-width:901px){
  .sv,.pads{overflow:hidden}
  .sec:has(>.lp-two){overflow:hidden} /* own rule: a browser without :has() drops the whole list */
  .sv h2{grid-column:2}
  .sv-flip h2{grid-column:1}
  .sv-media{grid-row:1/span 9;align-self:stretch;margin:calc(-1 * var(--sec)) 0 calc(-1 * var(--sec)) calc(-1 * var(--bleed))}
  .sv-flip .sv-media{margin-left:0;margin-right:calc(-1 * var(--bleed))}
  .sv-media>.photo,.sv-media>.ba{aspect-ratio:auto;height:100%;min-height:440px}
  .pads-top{align-items:start}
  .pads-pic{margin:calc(-1 * var(--sec)) calc(-1 * var(--bleed-capped)) 0 0}
}
.sv .phases-note{margin-top:-16px;margin-bottom:28px}
.bul{margin:28px 0 36px;display:grid;gap:12px}
.bul li{position:relative;padding-left:30px}
.bul li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;background:var(--olive)}
.fine{font-size:var(--t-small);color:var(--ink-soft);margin:-16px 0 28px}

/* the shed pad, layer by layer */
.pads-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:var(--gap-head)}
.pads-top .sv-intro{margin-top:var(--gap-intro)}
.xsec{background:var(--paper);padding:0 0 12px}
.xsec .dgm{aspect-ratio:4/3}
.xsec figcaption{padding:16px 20px 4px}
.xsec-key{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:var(--t-small)}
.xsec-key li{display:flex;gap:10px;align-items:flex-start}
.xsec-key i{flex:none;width:16px;height:16px;margin-top:4px}
.xsec.armed .layer{opacity:0;transform:translateY(14px)}
.xsec.armed .layer-cut{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.xsec.go .layer{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.3,.7,.3,1)}
.xsec.go .layer-cut{clip-path:inset(0 0 0 0);transition:clip-path 1s ease}
.xsec.go .l2{transition-delay:.9s}.xsec.go .l3{transition-delay:1.5s}.xsec.go .l4{transition-delay:2.1s}
.xsec .layer{transform-box:fill-box}
.xsec.armed .xsec-key .layer-cut{clip-path:none}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;counter-reset:step}
.steps li{display:flex;flex-direction:column;padding-top:20px;border-top:4px solid var(--ink)}
.steps .photo{aspect-ratio:1/1;margin-bottom:18px}
.steps h3{display:flex;gap:14px;align-items:baseline}
.steps h3::before{counter-increment:step;content:counter(step);font-size:var(--t-h2);line-height:.8;color:var(--olive-deep)}
.steps p{font-size:var(--t-small);margin-top:10px}
.pads-bottom{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:64px;align-items:start}
.pads-bottom .bul{margin-top:0}
.pads-bottom p{margin-bottom:32px;max-width:40ch} /* 32px before a button, like everywhere else */

/* builders: the phases, one contractor */
.phases-head{display:grid;grid-template-columns:1.5fr 1fr;gap:24px 56px;align-items:end;margin-bottom:var(--gap-head)}
.phases-head p{max-width:44ch}
.phase-track{display:grid;grid-template-columns:repeat(4,1fr);border-top:6px solid var(--olive)}
.phase-track a{display:flex;flex-direction:column;gap:10px;height:100%;padding:28px 24px 0 0;text-decoration:none}
.phase-track a:hover .ph-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ph-n{font:800 var(--t-h2)/.9 var(--display);color:var(--olive-deep)}
.ph-t{font:700 var(--t-h3)/1.05 var(--display);text-transform:uppercase}
.ph-d{font-size:var(--t-small)}
.phases-note{margin-top:32px;font-size:var(--t-small);color:var(--ink-soft)}

/* closing calls to action on inner pages */
.area .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px 64px;align-items:center}
.area p{margin-top:20px;max-width:44ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.builder-cta{background:var(--charcoal);color:#fff}
.bigphone-light{color:#fff}
.call-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 var(--t-body)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:2px solid currentColor;padding-bottom:4px}
.call-link svg{width:20px;height:20px;color:var(--olive-deep)}
.call-link:hover{color:var(--olive-deep)}
.call-link-light{color:#fff}
.call-link-light svg{color:var(--olive-light,#A3B654)}
.cta-card .cta-actions{margin-top:32px}
.callout .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px 64px;align-items:center}
.callout p{margin-top:20px;max-width:42ch}

/* more services: four jobs as type */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
.svc-list a{display:block;text-decoration:none;padding-top:20px;border-top:4px solid var(--ink)}
.svc-list .photo{margin-bottom:20px}
.svc-list p{margin-top:12px}
.svc-go{display:inline-block;margin-top:14px;font:700 var(--t-small)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--olive-deep)}
.svc-list a:hover h2{color:var(--olive-deep)}

/* projects page, filters, project detail */
.proj-page,.hc{padding-top:var(--open-pad)}
.proj-head{display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;align-items:end;margin-bottom:40px}
.proj-head p{max-width:46ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px}
.filters button{min-height:48px;padding:0 16px;font:700 var(--t-small)/1 var(--display);text-transform:uppercase;letter-spacing:.05em;background:var(--tint);color:var(--ink)}
.filters button:hover{background:var(--pale)}
.filters button[aria-pressed="true"]{background:var(--charcoal);color:#fff}
.filter-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hc-cta,.pd-cta{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;margin-top:56px}
.crumb a{display:inline-flex;align-items:center;gap:8px;padding:8px 0;margin:-8px 0;font:700 var(--t-small)/1 var(--display);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--olive-deep)}
.pd{padding-top:clamp(32px,3vw,44px);overflow:hidden}
.pd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px clamp(32px,4.4vw,64px);align-items:center;margin-top:24px} /* same split and gap as the page openings; long titles get a wider column */
.pd-top:not(:has(.pd-ba)){grid-template-columns:1fr}
.pd-head{max-width:900px}
.pd-desc{margin-top:18px;max-width:60ch}
.pd-group{margin-top:56px}
.pd-group h2{font-size:var(--t-h3);margin-bottom:18px}
/* gallery tiles: the build gives each photo its tile (g-full, g-lead, g-half, g-third; t-full on tablets and phones)
   so every row is full whatever the photo count. Desktop runs a six-column grid. */
.pd-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pd-grid > .g-full{grid-column:1/-1;aspect-ratio:16/9}
.pd-grid > .g-lead{grid-column:span 4;grid-row:span 2}
.pd-grid > .g-half{grid-column:span 3}
.pd-grid > .g-third{grid-column:span 2}
.pd-photo{display:block;aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.pd-photo img{width:100%;height:100%;object-fit:cover}


/* ---------- estimate page and the form ---------- */
.est-page{padding-top:var(--open-pad);background:var(--warm)}
.est-intro{margin-bottom:var(--gap-head)}
.est-main{background:#fff;border:1px solid var(--stone);padding:clamp(22px,3vw,40px);box-shadow:0 1px 3px rgba(35,43,46,.08),0 18px 40px -20px rgba(35,43,46,.35)}
.est-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px clamp(40px,5vw,80px);align-items:start}
.est{background:var(--paper)}
.est-form{display:grid;gap:28px}
.f{display:grid;gap:10px;min-width:0;border:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.f-l{font:700 var(--t-body)/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:0}
.opt{display:inline-block;white-space:nowrap;font:400 var(--t-small)/1 var(--text);text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-left:6px}
.f input[type=text],.f input[type=tel],.f input[type=email],.f select,.f textarea{width:100%;min-height:58px;padding:12px 16px;font:400 var(--t-body)/1.4 var(--text);color:var(--ink);background:var(--paper);border:1.5px solid #8A9093;border-radius:0;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.f textarea{min-height:130px;resize:vertical}
.f select{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23232B2E'/%3E%3C/svg%3E") right 16px center/13px no-repeat}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--olive-deep);box-shadow:0 0 0 3px rgba(122,139,46,.35)}
.f ::placeholder{color:#6B7275}
.f [aria-invalid=true]{border-color:#A3271B}
.f-err{color:#A3271B;font-size:var(--t-small);font-weight:600}
.f-note{font-size:var(--t-small);color:var(--ink-soft)}
.who-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.who-opts label{position:relative;display:block;cursor:pointer}
.who-opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.who-opts span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:8px 10px;font:700 var(--t-body)/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;background:var(--tint);border:2px solid var(--tint);transition:background .15s,color .15s}
.who-opts label:hover span{background:var(--pale);border-color:var(--pale)}
.who-opts input:checked+span{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.who-opts input:focus-visible+span{outline:3px solid var(--olive);outline-offset:3px}
.add-photos{position:relative;display:flex;align-items:center;gap:18px;padding:18px;background:var(--tint);cursor:pointer}
.add-photos:hover{background:var(--pale)}
.add-photos input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.add-photos:has(input:focus-visible){outline:3px solid var(--olive);outline-offset:3px}
.add-ico{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--olive-deep);color:#fff}
.add-ico svg{width:30px;height:30px}
.add-t{display:grid;gap:2px;font-size:var(--t-small);color:var(--ink)}
.add-t b{font:700 var(--t-body)/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumbs:empty{display:none}
.thumbs li{position:relative;width:96px;height:96px;background:var(--stone)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .pdf{display:flex;align-items:flex-end;height:100%;padding:8px;font-size:13px;line-height:1.2;word-break:break-all;background:var(--tint)}
.thumbs .pdf::before{content:"PDF";position:absolute;left:8px;top:8px;font:800 18px/1 var(--display);color:var(--olive-deep)}
.thumbs button{position:absolute;top:0;right:0;width:36px;height:36px;display:grid;place-items:center;background:var(--charcoal);color:#fff;font:700 22px/1 var(--text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.est-send{min-height:64px;font-size:19px;letter-spacing:.07em;box-shadow:0 1px 2px rgba(35,43,46,.18),0 8px 18px -8px rgba(61,74,20,.6);transition:transform .15s,box-shadow .15s,background .15s}
.est-send:hover{transform:translateY(-1px)}
.est-send[disabled]{background:var(--ink-soft);cursor:progress}
.est-alt{font-size:var(--t-small);margin-top:-8px}
.est-alt a,.est-fail a{font-weight:700;color:var(--ink)}
.est-alt a{display:inline-block;padding:11px 0;margin:-11px 0}
.form-off{background:#FBF3C4;padding:16px 18px;margin-bottom:28px;font-size:var(--t-small);max-width:none}
.form-off small{display:block;margin-top:4px;color:var(--ink-soft);font-size:inherit}
.form-off.flash{animation:flash .9s ease-out}
@keyframes flash{0%,40%{background:#F6E58D;outline:3px solid #D9B52B}100%{background:#FBF3C4;outline:3px solid transparent}}
/* thank-you: a statement on charcoal */
.thanks{background:var(--charcoal);color:#fff;padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px)}
.thanks:focus{outline:none}
.thanks-h{font-size:var(--t-h2);line-height:.9}
.thanks-h span{display:block;color:var(--olive-light)}
.thanks-h:focus{outline:none}
.thanks p{margin-top:24px}
.thanks-phone{display:block;margin-top:10px;font:800 var(--t-h2)/1 var(--display);text-decoration:none;letter-spacing:.005em}
.thanks-phone .tbd{font-size:.6em;vertical-align:middle}
.thanks a:not(.thanks-phone){font-weight:700}

/* sidebar: talk to TVIS, and what happens next */
.est-side{display:grid;gap:28px}
.talk{background:#fff;border:1px solid var(--stone);padding:26px 28px;box-shadow:0 1px 3px rgba(35,43,46,.08),0 18px 40px -20px rgba(35,43,46,.35)}
.talk .bigphone{color:var(--ink)}
.talk .bigphone:hover{color:var(--olive-deep)}
.talk h2{font-size:var(--t-h3)}
.talk-who{margin-top:14px}
.talk .bigphone{display:inline-block;margin-top:12px;padding:9px 0;margin-bottom:-9px}
.talk-list a{display:inline-block;padding:11px 0;margin:-11px 0}
.text-link{display:inline-block;margin-top:10px;font-weight:700;color:var(--olive-deep)}
.talk-list{display:grid;gap:14px;margin-top:28px;font-size:var(--t-small)}
.talk-list dt{font:700 var(--t-small)/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--olive-deep)}
.talk-list dd{margin-top:3px}
.talk-list a{color:var(--ink)}
.talk .socials{margin-top:24px}
.talk .socials a{color:var(--ink)}
.talk .socials a:hover{color:var(--olive-deep)}
.est-side .steps-card{justify-self:stretch;width:100%}


/* ---------- ad landing pages, 404 and /thanks ---------- */
.hdr-landing .hdr-in{justify-content:space-between}
.hdr-phone-lp{display:flex;min-height:48px}
.lp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(32px,5vw,88px);row-gap:0;align-items:start}
.lp-two > div:not(.sv-media){display:contents}
.lp-two h2{grid-column:1/-1;margin-bottom:clamp(20px,2.4vw,32px)}
.lp-two h2 + .bul{margin-top:0}
.lp-two > div:not(.sv-media) > :not(h2){grid-column:1}
.lp-two .sv-media{grid-column:2;grid-row:2/span 8}
@media (min-width:901px){
  .lp-two h2{grid-column:1}
  .lp-two .sv-media{grid-row:1/span 9;align-self:stretch;margin:calc(-1 * var(--sec)) calc(-1 * var(--bleed)) calc(-1 * var(--sec)) 0}
}
.lp-form .lp-form-in{max-width:760px}
.lp-form .lead{margin:var(--gap-intro) 0 36px}
.nf{padding-top:var(--open-pad);min-height:70vh}
.nf-code{font:800 var(--t-statement)/.85 var(--display);color:var(--ink);letter-spacing:.005em}
.nf h1{margin-top:16px}
.nf .lead{margin-top:24px;max-width:46ch}
.nf-links{margin:32px 0;display:grid;gap:10px}
.nf-links a{font:700 var(--t-h3)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;color:var(--olive-deep)}
.nf-links a:hover{text-decoration:underline}
.nf-phone{font-weight:700}
.thanks-page{padding-top:var(--open-pad)}
.thanks-page .thanks{max-width:none}
.thanks-page .thanks p{max-width:60ch}
.thanks-page .thanks-h{font-size:var(--t-h2)}


/* ---------- tablets: the menu button appears ---------- */
/* header tiers: each width keeps the pieces that fit, in order of importance (menu, estimate button, phone number, Facebook) */
@media (max-width:1359px){
  .hdr-social{display:none}
}
@media (min-width:1181px) and (max-width:1359px){
  :root{--hdr-h:108px}
  .hdr-logo{height:80px}
  .nav-list{gap:18px}
  .nav-list a{font-size:16px}
}
@media (min-width:1024px) and (max-width:1180px){
  :root{--hdr-h:100px}
  .hdr-logo{height:74px}
  .hdr-in{gap:20px}
  .nav-list{gap:16px}
  .nav-list a{font-size:16px}
  .hdr-cta{padding:0 20px}
}
@media (max-width:1023px){
  .nav,.hdr-cta{display:none}
  .hdr-call,.menu-btn{display:inline-flex}
}
@media (max-width:1180px){
  .hdr-phone{display:none}
  .hdr-landing .hdr-phone-lp{display:flex}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}
}

/* service pages */
.svc-steps-h{margin-bottom:clamp(28px,3.5vw,48px)}
.svc-related{margin-top:18px;font-size:var(--t-small)}
.svc-related a{font-weight:700;color:var(--olive-deep);margin-right:14px;white-space:nowrap}
.nowrap{white-space:nowrap}
@media (min-width:901px){.page-service .area .wrap{grid-template-columns:1.1fr 1fr}}

/* ---------- phones ---------- */
@media (max-width:900px){
  :root{--sec:44px;--hdr-h:76px;--mbar-h:64px;--t-h1:clamp(32px,9vw,48px);--t-h2:clamp(27px,7.4vw,36px);--t-h3:24px;--t-statement:clamp(60px,20vw,120px)}
  .hero{min-height:0;align-items:flex-end}
  .hero h1{font-size:clamp(40px,12vw,58px)}
  .hero::after,.hero:has(.photo-drawn)::after{background:linear-gradient(0deg,rgba(18,22,24,.92) 0%,rgba(18,22,24,.72) 52%,rgba(18,22,24,.25) 100%)}
  .hero{display:block;max-height:none}
  .hero .hero-bg{position:relative;inset:auto;height:clamp(230px,36svh,440px)}
  .hero::after{display:none}
  .hero .hero-in{padding-top:30px}
  .hero:has(.photo-drawn) .hero-bg{overflow:hidden}
  .hero:has(.photo-drawn) .hero-bg .dgm{transform:scale(1.55);transform-origin:76% 100%}
  .hero:has(.photo-drawn)::after{display:none}
  .hero:has(.photo-drawn) .hero-in{padding-top:32px}
  .hero-in{padding-top:40px;padding-bottom:28px}
  .hero-sub{font-size:20px}
  .hero-act{flex-direction:column;align-items:stretch;gap:12px}
  .hero-act .btn{width:100%}
  .hero-call{align-self:center;padding:13px 0}
  .who-grid,.band-in,.near-in{grid-template-columns:1fr}
  .who-body{padding:20px}
  .who-card .photo,.svc-card .photo{aspect-ratio:16/9}
  .band-in{gap:24px}
  .ftr-ground{height:66px} /* 66 (was 56) since the crew */
  .dozer{width:104px}
  .ftr-grid{grid-template-columns:1fr;gap:32px}
  .ftr-bottom{flex-direction:column;align-items:flex-start}
  .phero-split{display:block}
  .phero-pic{margin:32px calc(-1 * var(--gut)) calc(-1 * var(--phero-pad))}
  .phero-pic>.photo:not(.photo-drawn){aspect-ratio:4/3}
  .phero{padding:40px 0 44px}
  .phero h1,.est-intro h1{font-size:clamp(32px,9vw,48px)}
  .phero p,.est-intro p{font-size:var(--t-body)}
  .phero .hero-act,.est-intro .hero-act{margin-top:28px}
  .phero .hero-act .btn{width:100%}
  .phero .hero-call,.est-intro .hero-call{align-self:flex-start}
  .est-intro{margin-bottom:28px}
  .page-builders .phero .hero-act{flex-direction:column}
  .hdr-in{gap:16px}
  .hdr-logo{height:56px}
  .mbar{transition:transform .3s ease;display:grid;grid-template-columns:1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:3px solid var(--tint);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;font:700 var(--t-body)/1 var(--display);text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
  .mbar svg{width:22px;height:22px;color:var(--olive-deep)}
  .mbar-est{background:var(--olive-deep);color:#fff}
  .mbar-text{border-left:3px solid var(--tint)}
  .mbar:has(.mbar-text){grid-template-columns:1fr 1fr 1.4fr}
  .mbar-wait .mbar{transform:translateY(105%)}
  .page-estimate .mbar .mbar-est{display:none}
  .page-estimate .mbar{grid-template-columns:1fr}
  /* the sticky bar carries Call and Get an estimate on phones, so the openings do not repeat them (builders keeps its own ask) */
  .how .wrap,.pads-top,.pads-bottom,.sv .wrap,.area .wrap,.callout .wrap,.phases-head,.proj-head,.est-grid,.lp-two,.svc-list{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr;gap:40px}
  .proj-grid-one .proj-title{margin-top:18px}
  .steps-card{justify-self:stretch;width:100%}
  .sc-head{padding:20px 20px 0}.sc-list{padding:18px 20px 22px}.sc-result{padding:16px 20px}
  .jump a{padding:16px 10px 16px 0;margin-right:8px}
  .sv h2,.lp-two h2{grid-column:1;order:-2;margin-bottom:20px}
  .sv-media,.sv-flip .sv-media,.lp-two .sv-media{grid-column:1;grid-row:auto;order:-1;margin:0 calc(-1 * var(--gut)) 24px}
  .pads-pic{margin:0 calc(-1 * var(--gut))}
  .pd-top{grid-template-columns:1fr;gap:24px}
  .pd-ba{margin:0 calc(-1 * var(--gut))}
  .sv .wrap > div:not(.sv-media) > :not(h2),.lp-two > div:not(.sv-media) > :not(h2){grid-column:1}
  .steps{grid-template-columns:1fr 1fr;gap:20px 16px}
  .phase-track{grid-template-columns:1fr;border-top:0;border-left:6px solid var(--olive)}
  .phase-track a{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px 0 16px 18px}
  .ph-n{font-size:var(--t-h3)}
  .ph-t{flex:1}
  .ph-d{flex-basis:100%}
  .cta-actions .btn,.pads-bottom .btn{width:100%}
  .filters{margin-bottom:28px}
  .pd-grid{grid-template-columns:1fr 1fr;gap:8px}
  .pd-grid > .g-lead,.pd-grid > .g-half,.pd-grid > .g-third{grid-column:auto;grid-row:auto}
  .pd-grid > .t-full{grid-column:1/-1}
  .hc-cta .btn,.pd-cta .btn{width:100%}
  .f-row{grid-template-columns:1fr}
  .est-side{gap:40px}
}

@media (min-width:600px) and (max-width:1023px){
  :root{--hdr-h:88px}
  .hdr-logo{height:64px}
}
/* tablets held upright (600 to 900px): two-up where a phone stacks, so the width is used */
@media (min-width:600px) and (max-width:900px){
  .proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .who-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .who-card .photo{aspect-ratio:4/3}
  .svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}
  .ftr-brand{grid-column:1/-1}
  .hero-call{padding:13px 0}
}
@media (max-width:560px){
  .near ul.towns{grid-template-rows:repeat(8,auto);grid-template-columns:repeat(2,minmax(0,1fr))}
  .who-opts{grid-template-columns:1fr;gap:8px}
  .who-opts span{justify-content:flex-start;padding:8px 18px}
  .svc-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
}

@media (max-width: 600px){
  .jump-long{display:none}
  .jump-short{display:inline}
}

/* Final touches (2026-11-02, 06:00 UTC) */
/* Google mark next to Facebook: a plain mark until the Google profile link exists in site.config.json */
.hdr-social .soc-soon,.mmenu-social .soc-soon,.socials .soc-soon{width:44px;height:44px;display:grid;place-items:center;cursor:default}
/* Hero, desktop and laptop: a calmer headline and a shorter field, same layout and photo */
@media (min-width:901px){
  .hero{min-height:clamp(520px,calc(88svh - var(--hdr-h) - var(--hdr-edge)),720px)}
  .hero-bg .photo>img{object-position:50% 55%}
  .hero h1{font-size:clamp(56px,5.2vw,78px)}
  .hero h1::after{width:80px;height:7px;margin-top:clamp(18px,2vw,26px)}
  .hero-sub{margin-top:clamp(18px,2vw,26px);font-size:clamp(19px,1.55vw,23px)}
  .hero-act{margin-top:clamp(24px,2.6vw,36px)}
  .hero-in{padding-top:clamp(48px,6.5vh,80px);padding-bottom:clamp(48px,8vh,96px)}
}
/* Header with Facebook and Google side by side (1360px up): a little tighter so it stays inside the content column */
@media (min-width:1360px){
  .hdr-in{gap:clamp(18px,1.45vw,22px)}
  .nav-list{gap:clamp(14px,1.3vw,19px)}
  .hdr-social{gap:0;padding-left:14px}
  .hdr-social a,.hdr-social .soc-soon{width:40px;height:40px}
  .hdr-social svg{width:26px;height:26px}
}
/* One olive title bar everywhere: 80 x 7 under the home headline, page titles and section titles */
.bar,.hero h1::after,.phero h1::after,.est-intro h1::after{width:80px;height:7px}
/* Page titles without a photo opening get the same olive bar as the rest; 404 intro on one line */
.proj-page h1::after,.hc h1::after,.pd-head h1::after{content:"";display:block;width:80px;height:7px;background:var(--olive);margin-top:clamp(18px,2.2vw,28px)}
.nf .lead{max-width:60ch}

/* ===== Concept C (2026-11-02, 06:50 UTC): the first screen refined, the service strip, and one hover language for the whole site ===== */
/* Hero: a "where" line above the headline, a plain subhead, a lighter scrim; the layout and photo stay */
.hero-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font:700 16px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-light);margin-bottom:clamp(16px,1.8vw,22px);animation:settle .9s var(--ease) both}
.hero-eyebrow::before{content:"";width:26px;height:3px;background:var(--olive);flex:none}
.hero-eyebrow span{color:rgba(255,255,255,.5)}
.hero h1 span{animation-delay:.08s}
.hero h1 span+span{animation-delay:.2s}
.hero-sub{animation-delay:.42s}
.hero-act{animation-delay:.56s}
@media (min-width:901px){
  .hero{min-height:clamp(520px,calc(84svh - var(--hdr-h) - var(--hdr-edge)),700px)}
  .hero::after{background:linear-gradient(90deg,rgba(16,20,22,.84) 0%,rgba(16,20,22,.6) 34%,rgba(16,20,22,.06) 62%,rgba(16,20,22,0) 100%)}
  .hero::before{background:linear-gradient(180deg,rgba(16,20,22,.22) 0%,rgba(16,20,22,0) 22%)}
  .hero-sub{max-width:34ch}
}
@media (max-width:900px){
  .hero-eyebrow{font-size:14px;letter-spacing:.13em;gap:10px;margin-bottom:14px}
  .hero-eyebrow::before{width:20px}
  .hero .hero-bg{height:clamp(240px,38svh,460px)}
  .hero .hero-in{padding-top:28px;padding-bottom:30px}
  .hero .hero-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  .hero .hero-act .btn{width:auto;min-height:54px;padding:0 10px;font-size:16px;letter-spacing:.04em}
}
@media (min-width:600px) and (max-width:900px){
  .hero .hero-act{max-width:440px}
}
@media (max-width:359px){
  .hero .hero-act{grid-template-columns:1fr}
}

/* Service strip: see "Service strip, floating bar" further down (2026-11-03) */

/* Home: how it works, on tint, between the services and the projects */
.page-home .how-text p{max-width:38ch}

/* ---- One hover language, site-wide. Same curve and length everywhere (--ease, --dur); off under prefers-reduced-motion ---- */
/* 1. An olive line draws in from the left under card titles and small links (one line per text line) */
.who-body h3 span,.svc-body h3 span,.proj-title a,.proj-more,.svc-more,.svc-go,.svc-related a,.nf-links a,.ftr-list a,.ftr-bottom a,.est-alt a{background-image:linear-gradient(var(--olive),var(--olive));background-size:0 3px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:none}
.proj-more,.svc-more,.svc-go,.svc-related a,.ftr-list a,.ftr-bottom a,.est-alt a{background-size:0 2px}
.proj-more{background-position:0 calc(100% - 8px)}
.ftr-list a{background-position:0 calc(100% - 1px)}
.est-alt a{background-position:0 calc(100% - 7px)}
.who-card:hover .who-body h3 span,.who-card:focus-visible .who-body h3 span,.svc-card:hover .svc-body h3 span,.svc-card:focus-visible .svc-body h3 span,.proj-title a:hover,.proj-title a:focus-visible,.svc-list a:hover .svc-go,.svc-list a:focus-visible .svc-go{background-size:100% 3px}
.proj-more:hover,.proj-more:focus-visible,.svc-related a:hover,.svc-related a:focus-visible,.nf-links a:hover,.nf-links a:focus-visible,.est-alt a:hover,.est-alt a:focus-visible{background-size:100% 2px}
.svc-card:hover .svc-more{text-decoration:none}
.svc-card .svc-more{color:var(--olive-deep)}
.proj-title a:hover,.ftr-list a:hover,.ftr-bottom a:hover,.nf-links a:hover{text-decoration:none}
.nf-links a{background-size:0 3px}
.nf-links a:hover,.nf-links a:focus-visible{background-size:100% 3px}
/* on charcoal the line is light olive */
.ftr-list a,.ftr-bottom a{background-image:linear-gradient(var(--olive-light),var(--olive-light));transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease)}
.ftr-list a:hover,.ftr-list a:focus-visible,.ftr-bottom a:hover,.ftr-bottom a:focus-visible{background-size:100% 2px;text-decoration:none}
.ftr-top{background:none}
.ftr-top:hover,.ftr-top:focus-visible{background:none;color:var(--olive-light)}
/* 2. Cards: the photo eases in a touch (1.03) while the title line draws in */
.who-card .photo>img,.svc-card .photo>img,.svc-list .photo>img{transition:transform .4s var(--ease)}
.who-card:hover .photo>img,.who-card:focus-visible .photo>img,.svc-card:hover .photo>img,.svc-card:focus-visible .photo>img,.svc-list a:hover .photo>img,.svc-list a:focus-visible .photo>img{transform:scale(1.03)}
.who-card,.svc-card{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.who-go,.who-go svg,.svc-card h3,.who-body h3{transition-timing-function:var(--ease);transition-duration:var(--dur)}
/* 3. Text links with an arrow: the arrow nudges and the line thickens, no layout shift */
.textlink{border-bottom:0;padding:8px 0 11px;box-shadow:inset 0 -3px 0 var(--olive);transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease)}
.textlink:hover,.textlink:focus-visible{box-shadow:inset 0 -5px 0 var(--olive)}
.textlink svg{transition:transform var(--dur) var(--ease)}
.textlink:hover svg,.textlink:focus-visible svg{transform:translateX(4px)}
.call-link{border-bottom:0;padding-bottom:6px;box-shadow:inset 0 -2px 0 currentColor;transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease)}
.call-link:hover,.call-link:focus-visible{box-shadow:inset 0 -3px 0 currentColor}
.call-link-light:hover,.call-link-light:focus-visible{color:var(--olive-light)}
.call-link svg{transition:transform var(--dur) var(--ease)}
.call-link:hover svg{transform:translateY(-1px) rotate(-8deg)}
/* 4. Buttons: a 1px lift on hover, flat on press; the outline button fills white */
.btn{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform .15s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
/* 5. Form: the "I'm a" choice slides its highlight to the option tapped */
.who-opts{position:relative;isolation:isolate}
.who-opts::before{content:"";position:absolute;z-index:1;left:0;top:0;width:calc((100% - 20px) / 3);height:100%;background:var(--charcoal);transition:transform var(--dur) var(--ease);pointer-events:none}
.who-opts:has(label:nth-child(2) input:checked)::before{transform:translateX(calc(100% + 10px))}
.who-opts:has(label:nth-child(3) input:checked)::before{transform:translateX(calc(200% + 20px))}
.who-opts label{background:var(--tint);transition:background-color var(--dur) var(--ease)}
.who-opts label:hover{background:var(--pale)}
.who-opts span{position:relative;z-index:2;background:transparent;border-color:transparent;transition:color var(--dur) var(--ease)}
.who-opts label:hover span{background:transparent;border-color:transparent}
.who-opts input:checked+span{background:transparent;border-color:transparent;color:#fff}
@supports not selector(:has(a)){
  .who-opts::before{display:none}
  .who-opts input:checked+span{background:var(--charcoal);border-color:var(--charcoal)}
}
@media (max-width:560px){
  .who-opts::before{width:100%;height:calc((100% - 16px) / 3)}
  .who-opts:has(label:nth-child(2) input:checked)::before{transform:translateY(calc(100% + 8px))}
  .who-opts:has(label:nth-child(3) input:checked)::before{transform:translateY(calc(200% + 16px))}
}
.f input[type=text],.f input[type=tel],.f input[type=email],.f select,.f textarea{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
/* 6. Phone menu: a short olive bar slides in beside the link you press */
.mmenu li:not(:last-child) a{position:relative;transition:padding-left var(--dur) var(--ease),color var(--dur) var(--ease)}
.mmenu li:not(:last-child) a::before{content:"";position:absolute;left:0;top:50%;width:18px;height:4px;margin-top:-2px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.mmenu li:not(:last-child) a:hover,.mmenu li:not(:last-child) a:active,.mmenu li:not(:last-child) a:focus-visible{padding-left:30px;color:var(--olive-deep)}
.mmenu li:not(:last-child) a:hover::before,.mmenu li:not(:last-child) a:active::before,.mmenu li:not(:last-child) a:focus-visible::before{transform:scaleX(1)}
/* 7. Header social marks and the nav keep their own hover; the nav line already uses this curve */
.hdr-social svg,.mmenu-social svg,.socials svg{transition:transform var(--dur) var(--ease)}
.hdr-phone,.ftr-phone,.jump a,.nav-list a{transition:color var(--dur) var(--ease)}

/* Service pages: the six-service strip at the foot of the page, the current service marked (2026-11-02, 13:40 UTC) */
.svc-nav{border-top:1px solid var(--stone);padding-top:clamp(28px,3vw,40px)}
.svc-nav-h{font:700 17px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
@media (max-width:600px){
  .svc-nav-h{margin-bottom:0}
}

/* Service pages and the ad page: the photo beside "What we do" uses the same column as the opening photo above it,
   so their left and right edges line up, and a 16px white gap separates the two (2026-11-02, 13:50 UTC) */
@media (min-width:901px){
  .lp-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px)}
  .lp-two .sv-media{margin-top:calc(16px - var(--sec))}
}

/* ---------- Visual refinement pass (2026-11-02, 14:00 UTC) ----------
   One spacing rhythm: section heading to its first line of text 24px, text to a list 24px, list or text to a button 32px.
   Buttons size to their label on desktop everywhere (they used to stretch across the text column in panel sections). */
.near p,.area p,.callout p{margin-top:24px}
.near p.towns{margin-top:12px}
.bul{margin:24px 0 32px}
.lp-form .lead{margin:var(--gap-intro) 0 36px}
@media (min-width:901px){
  .sv h2{margin-bottom:clamp(20px,1.8vw,24px)}
  .lp-two h2{margin-bottom:clamp(20px,1.8vw,24px)}
  .sv .btn,.lp-two .btn{justify-self:start}
  /* the one-project row on service pages: photo 7/12, words 5/12 at a size that balances the photo */
  .proj-grid-one .proj{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(32px,5vw,72px)}
  .proj-grid-one .proj-title{font-size:clamp(28px,2.6vw,36px)}
  .proj-grid-one .proj-row,.proj-grid-one .proj-desc{font-size:var(--t-body)}
  .proj-grid-one .proj-desc{margin-top:16px;max-width:40ch}
  .proj-grid-one .proj-more{margin-top:12px}
}
/* who cards: both arrows sit level with the top of their title, whatever the title's length */
.who-go{align-self:start}
/* photo framing: the utilities panel is a wide shot in a near-square frame; keep the excavator and the trench both in view */
[data-slot="builders-utilities"] img{object-position:43% 50%}

/* tablets (600 to 900px), refinement pass: use the width instead of stretching or leaving gaps */
@media (min-width:600px) and (max-width:900px){
  /* an odd last project card spans the row, photo left and words right, instead of leaving half the row empty */
  .proj-grid:not(:has(> .proj[hidden])) > .proj:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:center}
  .proj-grid:not(:has(> .proj[hidden])) > .proj:last-child:nth-child(odd) .proj-title{margin-top:0}
  /* buttons size to their label on tablets, as on desktop; only phones run them full width */
  .phero .hero-act,.page-builders .phero .hero-act{flex-direction:row;align-items:center;gap:12px 28px}
  .phero .hero-act .btn,.cta-actions .btn,.pads-bottom .btn,.hc-cta .btn,.pd-cta .btn{width:auto}
  .sv .btn,.lp-two .btn{justify-self:start}
}
/* section heads stack (heading, then its line) once they no longer fit side by side */
@media (max-width:900px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
}
/* the pad list and its closing line: one 24px step when they stack (was 80px: the list's own margin plus the grid gap) */
.pads-bottom .bul{margin-bottom:0}
@media (max-width:900px){ .pads-bottom{gap:24px;margin-top:48px} }
/* stacked CTA bands (Ready to get started?, Have a lot ready to go?): 32px between the words and the buttons, like every button */
@media (max-width:900px){ .area .wrap{row-gap:32px} }
/* page openings: one height on every page at a given screen width (480 to 600px, 40% of the width), so the
   photo no longer sets the band's height by its own shape; a longer heading still makes the band taller */
@media (min-width:901px){
  .phero-split:has(.phero-pic>.photo:not(.photo-drawn)){min-height:calc(clamp(480px,40vw,600px) - 2 * var(--phero-pad))}
  .phero-pic>.photo:not(.photo-drawn){min-height:0;max-height:none}
  .phero-pic>.photo:not(.photo-drawn)>img{position:absolute;inset:0}
}
/* Projects page: the newest project runs the full width when the count would leave one card alone on the last row
   (the build marks it .proj-wide). Only with no filter on; a filtered grid goes back to plain cards. */
@media (min-width:901px){
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(32px,5vw,72px);align-items:center;margin-bottom:8px}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide .proj-title{margin-top:0;font-size:clamp(28px,2.6vw,36px)}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide .proj-row,.proj-grid:not(:has(> .proj[hidden])) > .proj-wide .proj-desc{font-size:var(--t-body)}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide .proj-desc{margin-top:16px;max-width:40ch}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide .proj-more{margin-top:12px}
}

/* ---------- Service pages and the ad page: "What we do" photo lines up with its text (2026-11-02, 15:00 UTC) ----------
   Desktop only. The photo used to run to the screen edge, top to bottom of its band, with only a 16px gap under the
   opening photo. Now it sits inside the content width, its top level with the heading and its bottom level with the
   button, so a full section of space separates it from the opening photo. When the list is short the photo keeps a
   5:3 minimum and the button moves down to meet its bottom edge. Phones and tablets are unchanged. */
@media (min-width:901px){
  .lp-two{align-items:stretch}
  .lp-two > div:not(.sv-media){display:flex;flex-direction:column;align-items:flex-start;grid-column:1;grid-row:1;min-width:0}
  .lp-two > div:not(.sv-media) > *{max-width:100%}
  .lp-two > div:not(.sv-media) > .btn:last-child{margin-top:auto}
  .lp-two .sv-media{grid-column:2;grid-row:1;align-self:stretch;margin:0;position:relative;min-height:340px}
  .lp-two .sv-media>.photo,.lp-two .sv-media>.ba{position:absolute;inset:0;height:auto;min-height:0;aspect-ratio:auto}
}

/* ---------- Image layout review (2026-11-02, 15:40 UTC) ----------
   Homeowners and Builders: on desktop the section photos used to run top to bottom of their band and out to the
   screen edge, so neighbouring photos met corner to corner, wide shots were cut to half their width, and the photo
   edges jumped between two lines down the page. Now they sit inside the content width like the service pages:
   the photo's top is level with the heading and its bottom level with the button, never shorter than 5:3, sides
   alternating. The shed-pad picture on Homeowners and the project page slider also stop at the content edge. */
@media (min-width:901px){
  .sv .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:stretch}
  .sv .wrap > div:not(.sv-media){display:flex;flex-direction:column;align-items:flex-start;grid-column:2;grid-row:1;min-width:0}
  .sv-flip .wrap > div:not(.sv-media){grid-column:1}
  .sv .wrap > div:not(.sv-media) > *{max-width:100%}
  .sv .wrap > div:not(.sv-media) > .btn:last-child{margin-top:auto}
  .sv .sv-media,.sv-flip .sv-media{grid-column:1;grid-row:1;align-self:stretch;margin:0;position:relative}
  .sv-flip .sv-media{grid-column:2}
  .sv .sv-media::before{content:"";display:block;padding-top:60%}
  .sv .sv-media>.photo,.sv .sv-media>.ba{position:absolute;inset:0;height:auto;min-height:0;aspect-ratio:auto}
  .pads-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start}
  .pads-pic{margin:0}
  .pads-bottom{column-gap:clamp(32px,5vw,80px)} /* its second column starts on the same line as the photo above */
  .pd-ba{margin-right:0}
  /* two related jobs on a service page fill the row, half each, instead of leaving a third of it empty */
  .proj-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones and tablets: the shed-pad section reads heading, photo, then words, like every other section on the page */
@media (max-width:900px){
  .pads-top{row-gap:0}
  .pads-top > div:first-child{display:contents}
  .pads-top h2{order:-2;margin-bottom:20px}
  .pads-pic{order:-1;margin:0 calc(-1 * var(--gut)) 24px}
  .pads-top .sv-intro{margin-top:0}
}
/* phones: two gallery photos stack full width (tablets keep them side by side) */
@media (max-width:600px){
  .pd-grid:has(> :nth-child(2):last-child) > *{grid-column:1/-1}
}

/* ---- Page openings as real jobs (2026-11-02): audience line above the title, proof card on the photo; Projects intro under its title ---- */
.phero-eyebrow{display:flex;align-items:center;gap:12px;font:700 16px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-deep);margin-bottom:clamp(16px,1.8vw,22px);animation:settle .9s var(--ease) both}
.phero-eyebrow::before{content:"";width:26px;height:3px;background:var(--olive);flex:none}
.phero-pic{position:relative}
/* "In this photo" caption bar, v4 (2026-11-02 late; Jeremy picked option 2 of five): a slim charcoal bar across the
   foot of the opening photo, two lines on every desktop (label and town/month above, job title below) so all three bars are the same height,
   and a full-height olive arrow tab at the right. The whole bar is the link. It covers the least of the photo, keeps the opening the same height
   and reads like a photo caption. Comes in once, just after the photo, rising out of the photo's bottom edge.
   "See the 6 photos" stays in the link for screen readers only; the arrow says it on screen. */
.phero-job{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:stretch;background:var(--charcoal);color:#fff;text-decoration:none;animation:jobIn .6s var(--ease) .35s both}
.phero-job .job-text{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px 12px;min-width:0;padding:15px 24px 17px}
.phero-job small{grid-row:1;grid-column:1}
.phero-job .job-meta{grid-row:1;grid-column:2}
.phero-job strong{grid-row:2;grid-column:1/-1}
.phero-job small{font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-light)}
.phero-job strong{font:700 clamp(20px,1.6vw,23px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.phero-job .job-meta{font-size:15px;line-height:1;color:#C9CCC6}
.phero-job .job-meta::before{content:"";display:inline-block;width:1px;height:12px;margin-right:12px;background:#5C6467;vertical-align:-1px}
.phero-job .see{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.phero-job .who-go{grid-column:2;grid-row:1;align-self:stretch;width:auto;height:auto;display:flex;align-items:center;justify-content:center;margin:0;background:var(--olive-deep);color:#fff}
.phero-job .who-go svg{display:block;width:24px;height:24px}
.phero-job:hover .who-go,.phero-job:focus-visible .who-go{background:var(--olive-deeper)}
.phero-job:hover .who-go svg,.phero-job:focus-visible .who-go svg{transform:translateX(4px)}
.phero-job:focus-visible{outline:3px solid #fff;outline-offset:-7px}
@keyframes jobIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.page-homeowners .phero-pic>.photo:not(.photo-drawn)>img{object-position:50% 90%}
@media (min-width:901px) and (max-width:1180px){
  .phero-job{grid-template-columns:minmax(0,1fr) 54px}
  .phero-job .job-text{padding:13px 18px 14px;gap:7px 10px}
}
/* Opening photo ending (2026-11-03, Jeremy's choice B, after trying the screen-edge photo, an olive edge bar and a plain stop):
   on Homeowners, Builders & Contractors and More Services the desktop photo is framed by the warm-gray band. It sits in
   from the top, right and bottom by the same page margin (--gut), so it reads as a placed, finished picture rather than
   one cut off at the screen edge. Hard, square edges; never a fade, blur or mask. Phones and tablets are unchanged
   (photo edge to edge under the text). */
/* (now on every page with a photo opening: see "Opening photo ending everywhere" at the end of this file) */
.proj-head{display:block;margin-bottom:40px}
.proj-head p{margin-top:clamp(20px,2.4vw,28px);max-width:56ch;font-size:clamp(19px,1.7vw,22px);line-height:1.5}
@media (max-width:900px){
  .phero-job{position:static;grid-template-columns:minmax(0,1fr) 60px;animation:none}
  .phero-job .job-text{padding:16px 18px 17px var(--gut)}
}
@media (max-width:600px){
  .phero-job .job-text{grid-template-columns:minmax(0,1fr);gap:7px 0}
  .phero-job small{grid-row:1}
  .phero-job strong{grid-row:2;font-size:20px}
  .phero-job .job-meta{grid-row:3;grid-column:1;line-height:1.3}
  .phero-job .job-meta::before{content:none}
}
@media (prefers-reduced-motion:reduce){.phero-job{animation:none}}

/* ---- Pre-launch polish (2026-11-02, evening) ---- */
.crumb svg{width:16px;height:16px;transform:scaleX(-1);transition:transform var(--dur) var(--ease)}
.crumb a:hover svg,.crumb a:focus-visible svg{transform:scaleX(-1) translateX(4px)}
@media (prefers-reduced-motion:reduce){.crumb a:hover svg,.crumb a:focus-visible svg{transform:scaleX(-1)}}
.pd-head .proj-row a{color:inherit;text-decoration:underline;text-decoration-color:var(--olive);text-decoration-thickness:2px;text-underline-offset:4px}
.pd-head .proj-row a:hover,.pd-head .proj-row a:focus-visible{color:var(--olive-deep)}
.mmenu li:not(:last-child) a[aria-current="page"]{padding-left:30px;color:var(--olive-deep)}
.mmenu li:not(:last-child) a[aria-current="page"]::before{transform:scaleX(1)}
/* Keyboard focus never lands under the phone Call / Get an Estimate bar (WCAG 2.2, focus not obscured):
   anything scrolled into view stops above the bar, the same way scroll-padding-top clears the header. */
html{scroll-padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px) + 16px)}

/* ---------- Grade A pass (2026-11-03) ---------- */
/* 3. Home, "The work we do most": the intro line sits under its heading, like every other section head */
.svcs .sec-head{flex-direction:column;align-items:flex-start;gap:var(--gap-intro)}
.svcs .sec-head p{max-width:60ch;font-size:clamp(18px,1.5vw,20px);line-height:1.5}
/* 4. Home, "Start with a few photos": a wider, slightly larger paragraph, centred against the How it works card */
.page-home .how-text p{max-width:46ch;font-size:clamp(18px,1.5vw,20px);line-height:1.55}
.how .wrap{align-items:center}
/* 5. One card style for everything you click: a white card, a photo on top, a 6px olive edge under the photo,
   the words padded inside. On white sections the card has a 1px stone border that turns olive on hover. */
.who-card{border-width:1px}
.svc-card .photo{border-bottom:6px solid var(--olive)}
.svc-list a{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--stone);border-top:1px solid var(--stone);padding:0 0 clamp(22px,2.4vw,30px);transition:border-color var(--dur) var(--ease)}
.svc-list a:hover,.svc-list a:focus-visible{border-color:var(--olive)}
.svc-list .photo{margin-bottom:0;border-bottom:6px solid var(--olive)}
.svc-list a>:not(.photo){margin-left:clamp(20px,2.4vw,30px);margin-right:clamp(20px,2.4vw,30px)}
.svc-list a>h2{margin-top:clamp(20px,2.2vw,26px)}
.svc-list .svc-go{align-self:flex-start;margin-top:auto;padding-top:16px}
/* 2. The closing ask on every page that has one: a charcoal band with an olive top edge, like the footer and the
   caption bars. Homeowners, Builders, More Services, Projects and the six service pages. */
.sec.area,.sec.callout{background:var(--charcoal);color:#fff;border-top:6px solid var(--olive)}
.sec.area h2,.sec.callout h2{color:#fff}
.sec.area p,.sec.callout p{color:#D3D6D1}
.sec.area .call-link,.sec.callout .call-link{color:#fff}
.sec.area .call-link svg,.sec.callout .call-link svg{color:var(--olive-light)}
.sec.area .call-link:hover,.sec.area .call-link:focus-visible,.sec.callout .call-link:hover,.sec.callout .call-link:focus-visible{color:var(--olive-light)}
.sec.area :focus-visible,.sec.callout :focus-visible{outline-color:#fff}
@media (min-width:901px){
  .sec.area .wrap,.sec.callout .wrap,.page-service .sec.area .wrap{grid-template-columns:minmax(0,1.3fr) auto;gap:32px clamp(48px,5vw,80px)}
  .sec.area .cta-actions,.sec.callout .cta-actions{justify-content:flex-end}
  .sec.area p,.sec.callout p{max-width:52ch}
}
/* 7. The statement band: the photo a little brighter and the shade lighter in the middle, words still on dark */
.band:has(.band-bg .photo)::after{background:linear-gradient(90deg,rgba(18,22,24,.74) 0%,rgba(18,22,24,.36) 46%,rgba(18,22,24,.7) 66%,rgba(18,22,24,.74) 100%)}
.band-bg .photo>img{filter:brightness(1.16) saturate(1.08)}
/* 8. Project cards: in a row of cards each line (photo, title, place, words, link) starts at the same height,
   even when one title runs to two lines. Each card shares its row's five lines (CSS subgrid). */
@media (min-width:600px){
  .proj-grid:not(.proj-grid-one){row-gap:0}
  .proj-grid:not(.proj-grid-one) > .proj{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;align-content:start;margin-bottom:40px}
  .proj-grid:not(.proj-grid-one) > .proj > .proj-meta{display:contents}
  .proj-grid:not(.proj-grid-one) > .proj .proj-more{justify-self:start;align-self:start}
}
@media (min-width:600px) and (max-width:900px){
  .proj-grid:not(:has(> .proj[hidden])) > .proj:last-child:nth-child(odd){grid-row:auto;grid-template-rows:none}
  .proj-grid:not(:has(> .proj[hidden])) > .proj:last-child:nth-child(odd) > .proj-meta{display:block}
}
@media (min-width:901px){
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide{grid-row:auto;grid-template-rows:none;margin-bottom:48px}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide > .proj-meta{display:block}
}
/* 1. Phones: the six home service cards become compact rows (small photo beside the name and one line), about
   950px of scrolling instead of 2,500. The whole row is the link; the arrow says so. */
@media (max-width:560px){
  .svc-grid{gap:10px}
  .svc-card{display:grid;grid-template-columns:116px minmax(0,1fr) 28px;align-items:stretch}
  .svc-card .photo{aspect-ratio:auto;height:100%;min-height:104px;border-bottom:0}
  .svc-card .photo>img{height:100%;object-fit:cover}
  .svc-body{padding:14px 4px 14px 16px;gap:5px;justify-content:center}
  .svc-body h3{font-size:20px;line-height:1.05}
  .svc-body p{font-size:15px;line-height:1.4}
  .svc-more{display:none}
  .svc-card::after{content:"";align-self:center;justify-self:center;width:9px;height:9px;margin-right:6px;border-top:3px solid var(--olive-deep);border-right:3px solid var(--olive-deep);transform:rotate(45deg)}
}
/* 6. Project pages open like the main pages: the warm band, the title with its olive bar, the place and the words,
   the estimate button, and the before/after slider framed by the band on the right (an even --gut of warm gray
   above, beside and below it, like the Homeowners, Builders and More Services openings) */
.pd-open{--phero-pad:var(--open-pad);background:var(--warm);padding:var(--phero-pad) 0}
.pd-open .pd-top{margin-top:0}
.pd-open .crumb{margin-bottom:clamp(18px,2vw,24px)}
.pd-open h1{font-size:clamp(34px,3.8vw,54px)}
.pd-open .proj-row{margin-top:var(--gap-intro);font-size:var(--t-body)}
.pd-open .pd-desc{margin-top:14px;font-size:clamp(18px,1.5vw,20px);line-height:1.5;max-width:52ch}
.pd-open .hero-act{margin-top:32px}
.pd > .wrap > .pd-group:first-child{margin-top:0}
@media (min-width:901px){
  .pd-open-ba .pd-top{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .pd-open .pd-ba{margin:calc(var(--gut) - var(--phero-pad)) calc(var(--gut) - var(--bleed)) calc(var(--gut) - var(--phero-pad)) 0}
}
@media (max-width:900px){
  .pd-open .pd-top{gap:32px}
  .pd-open .pd-ba{margin:0 calc(-1 * var(--gut)) calc(-1 * var(--phero-pad))}
  .pd-open .hero-act{margin-top:28px}
}
@media (max-width:600px){
  .pd-open .hero-act .btn{width:100%}
}
.pd-open .hero-act{gap:14px 28px}
/* a project with no before/after pair (build.mjs PROJECT_OPEN_PHOTO false): the title on the left, its write-up and
   buttons on the right, lined up with the top of the title behind a hairline, so nothing floats (Jeremy's pick C,
   2026-11-03, over a photo on the right and over one block on the left) */
@media (min-width:901px){
  .pd-open:not(.pd-open-ba) .pd-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"crumb crumb" "title words" "row words";column-gap:clamp(40px,5vw,80px);align-items:start}
  .pd-open:not(.pd-open-ba) .crumb{grid-area:crumb}
  .pd-open:not(.pd-open-ba) h1{grid-area:title}
  .pd-open:not(.pd-open-ba) .proj-row{grid-area:row}
  .pd-open:not(.pd-open-ba) .pd-words{grid-area:words;align-self:start;padding-top:.45em;border-left:1px solid var(--stone);padding-left:clamp(28px,3vw,44px);margin-left:calc(-1 * clamp(28px,3vw,44px))}
  .pd-open:not(.pd-open-ba) .pd-desc{margin-top:0;max-width:40ch}
}
}
}
/* phones: the photos come straight after the words (the call bar at the foot of the screen and the button under the
   photos still ask for the estimate) */
@media (max-width:600px){ .pd-open .hero-act{display:none} }
/* phones and tablets: the words run across the whole photo, so the brighter photo gets an even shade */
@media (max-width:900px){ .band:has(.band-bg .photo)::after{background:rgba(18,22,24,.62)} }

/* ---------- Service strip, floating bar (2026-11-03; Jeremy picked option 4 of 4; v2 the same night for a grade A:
   sharper icons, roomier cells, a real contour map) ----------
   One white bar holding the six services. On the home page it floats over the foot of the hero, lifted on a deep soft
   shadow, with a 6px olive top edge and faint topographic contour lines (a grading plan's lines, generated from a smooth
   height field with every fifth line heavier, /assets/img/contour.svg, shown at its own size so the lines stay 1px).
   Each service has a 32px line icon in a 56px olive square; the icons are drawn on a 32px grid with 2px lines and shown
   at exactly 32px, so they are pixel sharp on ordinary laptop screens. Hover or focus: the cell turns warm gray, its
   square darkens, a darker olive segment draws across the top edge above it, the title's olive line draws in and an
   arrow slides in. The same bar, not lifted, sits at the foot of the six service pages with the page you are on marked. */
:root{--ss-lift:clamp(40px,4vw,56px)}
.svc-strip{position:relative;z-index:2}
.svc-strip .wrap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:min(calc(100% - 2 * var(--gut)),calc(var(--max) - 2 * var(--gut)));margin-inline:auto;padding:0;
  background:var(--paper) url(/assets/img/contour.svg) 50% 50%/1600px 400px no-repeat;border-top:6px solid var(--olive);
  box-shadow:0 1px 3px rgba(35,43,46,.10),0 30px 60px -28px rgba(35,43,46,.55)}
.page-home .svc-strip{margin-top:calc(-1 * var(--ss-lift))}
.page-home .svc-strip .wrap{animation:ssRise .7s var(--ease) .62s both}
@keyframes ssRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.svc-strip a{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:24px 18px 24px 24px;border-left:1px solid var(--stone);color:var(--ink);text-decoration:none;transition:background-color var(--dur) var(--ease)}
.svc-strip a:first-child{border-left:0}
.svc-strip a::before{content:"";position:absolute;left:-1px;right:0;top:-6px;height:6px;background:var(--olive-deeper);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.svc-strip a:first-child::before{left:0}
.svc-strip a:focus-visible{outline-offset:-4px}
.svc-strip .ss-ic{display:grid;place-items:center;width:56px;height:56px;flex:none;margin-bottom:18px;background:var(--olive-deep);color:#fff;transition:background-color var(--dur) var(--ease)}
.svc-strip .ss-ic svg{display:block;width:36px;height:36px}
.svc-strip b{position:relative;font:700 19px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;padding-bottom:7px;transition:color var(--dur) var(--ease)}
.svc-strip b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.svc-strip .ss-d{margin-top:6px;font-size:15px;line-height:1.3;color:var(--ink-soft)}
.svc-strip .ss-go{position:absolute;top:42px;right:18px;width:20px;height:20px;color:var(--olive-deep);opacity:0;transform:translateX(-6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.svc-strip a:hover,.svc-strip a:focus-visible{background:rgba(243,242,238,.82)}
.svc-strip a:hover::before,.svc-strip a:focus-visible::before{transform:scaleX(1)}
.svc-strip a:hover .ss-ic,.svc-strip a:focus-visible .ss-ic{background:var(--olive-deeper)}
.svc-strip a:hover b,.svc-strip a:focus-visible b{color:var(--olive-deep)}
.svc-strip a:hover b::after,.svc-strip a:focus-visible b::after{transform:scaleX(1)}
.svc-strip a:hover .ss-go,.svc-strip a:focus-visible .ss-go{opacity:1;transform:none}
/* the page you are on (service pages): warm cell, dark edge segment, charcoal square, title underlined, no arrow */
.svc-strip a[aria-current]{background:rgba(243,242,238,.82)}
.svc-strip a[aria-current]::before{transform:scaleX(1)}
.svc-strip a[aria-current] .ss-ic{background:var(--charcoal)}
.svc-strip a[aria-current] b{color:var(--olive-deep)}
.svc-strip a[aria-current] b::after{transform:scaleX(1)}
.svc-strip a[aria-current] .ss-go{display:none}
/* at the foot of the service pages: the same bar, not lifted, with room under it before the footer */
.svc-nav-h{margin-bottom:18px}
.svc-nav .svc-strip{padding-bottom:clamp(36px,4vw,56px)}
/* home hero: keep the buttons clear of the bar that rises over the photo's foot */
@media (min-width:901px){
  .page-home .hero-in{padding-bottom:calc(clamp(48px,8vh,96px) + var(--ss-lift))}
}
/* "Shed & Garage Pads" becomes "Shed Pads" wherever the long name would not fit on one line */
@media (min-width:1024px) and (max-width:1299px){
  .svc-strip .ss-l{display:none}
}
/* laptops from 1181 to 1299px: a little less side padding and a 14px line, so every descriptor stays on one line */
@media (min-width:1181px) and (max-width:1299px){
  .svc-strip a{padding:24px 14px 24px 20px}
  .svc-strip .ss-d{font-size:14px}
  .svc-strip .ss-go{right:14px}
}
/* small laptops: six narrower cells */
@media (min-width:1024px) and (max-width:1180px){
  .svc-strip a{padding:20px 10px 20px 14px}
  .svc-strip .ss-ic{width:52px;height:52px;margin-bottom:16px}
  .svc-strip b{font-size:17px}
  .svc-strip .ss-d{font-size:13px}
  .svc-strip .ss-go{top:36px;right:10px;width:18px;height:18px}
}
/* tablets: three across, two rows */
@media (min-width:601px) and (max-width:1023px){
  .svc-strip .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-strip a:nth-child(3n+1){border-left:0}
  .svc-strip a:nth-child(3n+1)::before{left:0}
  .svc-strip a:nth-child(n+4){border-top:1px solid var(--stone)}
  .svc-strip a:nth-child(n+4)::before{display:none}
}
@media (min-width:601px) and (max-width:900px){
  .page-home .hero .hero-in{padding-bottom:calc(30px + var(--ss-lift))}
}
@media (min-width:601px) and (max-width:699px){
  .svc-strip .ss-l{display:none}
  .svc-strip .ss-d{font-size:14px}
}
/* phones: two columns of chips inside the bar, each with its icon square; the page you are on is charcoal */
@media (max-width:600px){
  :root{--ss-lift:28px}
  .page-home .hero .hero-in{padding-bottom:calc(30px + var(--ss-lift) + 8px)}
  .svc-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border-top-width:5px;box-shadow:0 1px 3px rgba(35,43,46,.10),0 20px 40px -22px rgba(35,43,46,.5)}
  .svc-strip a{flex-direction:row;align-items:center;min-height:48px;padding:0 8px 0 0;border:0;background:var(--tint)}
  .svc-strip a::before{display:none}
  .svc-strip a:hover,.svc-strip a:focus-visible,.svc-strip a:active{background:var(--pale)}
  .svc-strip .ss-ic{width:48px;height:48px;margin:0 12px 0 0}
  .svc-strip .ss-ic svg{width:32px;height:32px}
  .svc-strip b{font-size:15px;letter-spacing:.05em;padding-bottom:0}
  .svc-strip b::after,.svc-strip .ss-d,.svc-strip .ss-l,.svc-strip .ss-go{display:none}
  .svc-strip a[aria-current]{background:var(--charcoal)}
  .svc-strip a[aria-current] b{color:#fff}
  .svc-strip a[aria-current] .ss-ic{background:var(--olive-deep)}
}
@media (max-width:359px){
  .svc-strip .ss-ic{width:44px;height:44px;margin-right:10px}
  .svc-strip .ss-ic svg{width:28px;height:28px}
  .svc-strip b{font-size:14px;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .page-home .svc-strip .wrap{animation:none}
  .svc-strip a::before,.svc-strip .ss-go{transition:none}
}

/* ---------- Header fit (2026-11-03): with Facebook, Google and Instagram side by side the 1360px-up header ran about
   10 to 15px past the content column, so its Get an Estimate button stuck out past the edge of everything under it.
   A slightly smaller fixed gap between the header's groups puts the button back on the content edge at every width. */
@media (min-width:1360px){
  .hdr-in{gap:18px}
}

/* ---------- Opening photo ending everywhere (2026-11-03): Jeremy asked for every opening photo to follow the
   Builders edging, so the framed ending (an even --gut of warm gray above, right of and below the photo) now applies
   on every page with a photo opening: Homeowners, Builders, More Services, the six service pages and the ad page. ---------- */
@media (min-width:901px){
  .phero-pic:has(>.photo:not(.photo-drawn)){margin:calc(var(--gut) - var(--phero-pad)) calc(var(--gut) - var(--bleed)) calc(var(--gut) - var(--phero-pad)) 0}
}

/* ---------- Paragraph line breaks (2026-11-03): no single word left alone on the last line of a paragraph
   (browsers that don't know text-wrap:pretty simply ignore it). ---------- */
p{text-wrap:pretty}

/* ---------- Home rhythm (2026-11-03): Jeremy felt the space between the Homeowner/Builder cards and "The work we do
   most" could be a hair tighter. The Who section's bottom padding is 70% of the usual section space (about 72px
   instead of 104px on a big screen, 36px instead of 52px on a phone). ---------- */
.page-home .sec.who{padding-bottom:calc(var(--sec) * .7)}

/* ---------- Builders sections, Projects top and the shed-pad closing block (2026-11-03, push 2) ----------
   6. Builders service sections (Site Prep, Utilities, Driveways & Concrete, Final Grading): the four phases of the
   phase track above them, so each heading carries an olive keyword line (service + base town, from site.config.json). The photo gets a 6px olive bottom edge
   and an offset contour panel behind it (20px down and outward), the same contour map as the service strip, so the
   picture reads as a placed print instead of a loose rectangle. Columns a hair closer. */
.sv-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:700 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--olive-deep)}
.sv-eyebrow::before{content:"";width:28px;height:4px;background:var(--olive)}
.sv-intro{font-size:clamp(18px,1.5vw,20px);line-height:1.5;max-width:46ch}
.sv .bul{gap:10px}
.sv .bul li{padding-left:26px}
.sv .bul li::before{top:.55em;width:10px;height:10px}
.sv .fine{margin:-12px 0 28px;padding:2px 0 2px 14px;border-left:3px solid var(--pale)}
@media (min-width:901px){
  .sv .wrap{column-gap:clamp(32px,4.2vw,64px)}
  .sv .sv-media{isolation:isolate;margin-bottom:20px}
  .sv .sv-media::after{content:"";position:absolute;top:20px;right:20px;bottom:-20px;left:-20px;z-index:-1;
    background:var(--tint) url(/assets/img/contour.svg) 50% 50%/1600px 400px no-repeat}
  .sv-flip .sv-media::after{left:20px;right:-20px}
  .sec-tint.sv .sv-media::after{background-color:var(--paper)}
  .sv .sv-media>.photo,.sv .sv-media>.ba{border-bottom:6px solid var(--olive)}
}
/* 7. Projects page top: short. Title and intro side by side on a warm band with the filters along its foot, so the
   grid starts within the first screen (Jeremy: pull it up and fill the space by shrinking it, no added text). The band
   carries the strip's contour map, faint, as its only decoration. The first, full-width project's words sit in a tint
   panel that fills the column beside its photo instead of floating in white space. */
.proj-open{position:relative;overflow:hidden;padding:clamp(32px,4vw,52px) 0 clamp(24px,2.5vw,32px)}
.proj-open::before{content:"";position:absolute;inset:0;background:url(/assets/img/contour.svg) 100% 50%/1600px 400px no-repeat;opacity:.55;pointer-events:none}
.proj-open .wrap{position:relative}
.proj-open .proj-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px clamp(32px,5vw,72px);align-items:end;margin-bottom:0}
.proj-open .proj-head p{margin:0;padding-bottom:2px;max-width:46ch}
.proj-open .filters{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--stone)}
.proj-open .filters button{background:var(--paper)}
.proj-open .filters button:hover{background:var(--pale)}
.proj-open .filters button[aria-pressed="true"]{background:var(--charcoal)}
.proj-list{padding-top:clamp(40px,5vw,64px)}
@media (min-width:901px){
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide{align-items:stretch}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide > .proj-meta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:var(--tint);border-left:6px solid var(--olive);padding:32px clamp(28px,3vw,44px)}
  .proj-grid:not(:has(> .proj[hidden])) > .proj-wide .proj-more{margin-top:16px}
}
@media (max-width:900px){
  .proj-open .proj-head{grid-template-columns:1fr;gap:16px}
  .proj-open .proj-head p{padding-bottom:0}
}
/* 8. Homeowners, shed and garage pads: the closing line and button sit in a white card with an olive top edge beside
   the list, instead of floating in the tint. */
.pads-ask{background:var(--paper);border-top:6px solid var(--olive);padding:26px 30px 30px}
.pads-ask-h{font-size:var(--t-h3);margin:0 0 10px}
.pads-bottom .pads-ask p{margin-bottom:24px;max-width:none;font-size:clamp(17px,1.4vw,19px);line-height:1.5}
@media (min-width:901px){.pads-bottom{align-items:start;gap:clamp(40px,5vw,72px)}}
@media (max-width:900px){.sv-eyebrow{order:-3;margin-bottom:10px}} /* phones: keyword line, heading, photo, words */

/* ---------- Spacing, sizing and scaling pass (2026-11-03) ----------
   Jeremy: too much scrolling for no reason. Four shared tokens now carry the page rhythm (see :root): --sec for the space
   around every section (84px on a big screen, was 104; 44px on phones, was 52), --open-pad for page openings and the
   tops of pages without a band (Estimate, Home Construction, Thanks, 404 used 88 to 120px; all 56 now, like the title
   bands), --gap-head for a section head to its content, --gap-intro (24px) for a title or heading to its first line.
   The statement band on the home page is 120px tall at the top and bottom instead of 168. Buttons are one size
   everywhere (54px; the hero pair was 56). "Serving Chattanooga" uses the normal h2 size (it was 54px, the token is 52).
   Section intros on Homeowners (the pad section) match the other section intros. No new rules below; the values
   changed in place.
   Second step the same night (Jeremy: phones now "incredible", desktop "still feels super long", wants 5 to 10% more): desktop
   values only. --sec 64 (was 84), --gap-head 40 (was 48), the band 92 (was 120), footer top 52 (was 64), project page gallery
   groups and closing buttons 40px apart (were 56), and the home service card photos 16:10 like the audience cards
   (were 4:3). Phones keep every value from the first step. ---------- */
@media (min-width:901px){ .pd-group,.hc-cta,.pd-cta{margin-top:40px} }

/* ---- Header touches and hero touches (2026-11-03, after the spacing pass). Jeremy asked for "cool UI/UX elements...
   not too busy" on the header and a 5-10% better hero with the same photo. Each piece is independent:
   B one olive marker on a hairline under the menu that slides to the hovered link and home to the current page
   (site.js; without JS the old per-link underline stays), C the header's bottom edge fills olive as the page is read
   (--read from site.js), D faint contour lines behind the menu. Jeremy picked B, C and D; A (a keyword stack beside the
   logo, wide screens only) was offered and not taken.
   Hero: the photo is graded at build time (GRADE in build.mjs). ---- */
/* B: the ground line and the one marker (the per-link underline stays for browsers without JS) */
html.nav-js .nav-list a::after{display:none}
.nav{position:relative}
.nav-mark{display:none}
html.nav-js .nav::before{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--stone)}
html.nav-js .nav-mark{display:block;position:absolute;bottom:4px;height:3px;background:var(--olive);left:var(--mx,0px);width:var(--mw,0px);opacity:var(--mo,0);transition:left .32s var(--ease),width .32s var(--ease),opacity .2s ease;pointer-events:none}
@media (prefers-reduced-motion:reduce){html.nav-js .nav-mark{transition:none}}
/* C: the reading line on the header's bottom edge */
.hdr::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:var(--read,0%);background:var(--olive-deep);pointer-events:none}
/* D: contour whisper behind the menu, desktop only */
@media (min-width:1024px){
  .hdr::before{content:"";position:absolute;inset:0;z-index:0;background:url(/assets/img/contour.svg) 50% 45%/1600px 400px no-repeat;opacity:.75;-webkit-mask:linear-gradient(90deg,transparent 25%,#000 36%,#000 64%,transparent 76%);mask:linear-gradient(90deg,transparent 25%,#000 36%,#000 64%,transparent 76%);pointer-events:none}
  .hdr-in{position:relative;z-index:1}
}

/* Framed section photos everywhere (Jeremy, 2026-11-03: the Builders panel "on ALL photos when it makes sense").
   Same recipe as the .sv sections above: an offset tint panel carrying the contour map sits behind the photo, pushed
   away from the words, and the photo gets the 6px olive edge. Applied to the service pages' "What we do" photo and the
   landing page's (.lp-two, photo on the right), the Homeowners pad photo (.pads-pic, right) and the single "Recent job
   like this" row on the service pages (.proj-grid-one, photo on the left; the panel is a grid-placed ::before because
   the slider clips its overflow). Cards, galleries, grids of sliders and the page openings keep their own treatment.
   Desktop only, like the Builders sections. */
@media (min-width:901px){
  .lp-two .sv-media,.pads-pic{isolation:isolate;margin-bottom:20px}
  .pads-pic{position:relative;margin:0 0 20px}
  .lp-two .sv-media::after,.pads-pic::after{content:"";position:absolute;top:20px;left:20px;right:-20px;bottom:-20px;z-index:-1;
    background:var(--tint) url(/assets/img/contour.svg) 50% 50%/1600px 400px no-repeat}
  .sec-tint .lp-two .sv-media::after,.sec-tint .pads-pic::after{background-color:var(--paper)}
  .lp-two .sv-media>.photo,.lp-two .sv-media>.ba,.pads-pic>.photo{border-bottom:6px solid var(--olive)}
  .proj-grid-one .proj{isolation:isolate;margin-bottom:20px}
  .proj-grid-one .proj>.ba{grid-column:1;grid-row:1;border-bottom:6px solid var(--olive)}
  .proj-grid-one .proj>.proj-meta{grid-column:2;grid-row:1}
  .proj-grid-one .proj::before{content:"";grid-column:1;grid-row:1;align-self:stretch;justify-self:stretch;position:relative;z-index:-1;margin:20px 20px -20px -20px;
    background:var(--tint) url(/assets/img/contour.svg) 50% 50%/1600px 400px no-repeat}
  .sec-tint .proj-grid-one .proj::before{background-color:var(--paper)}
}

/* ---- Three touches (2026-11-03) ---- */
/* 1. Page to page: the header holds still while the page under it cross-fades (Chrome, Edge, Safari 18.2+;
      other browsers load pages the usual way). Off under reduced motion. */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
.mbar{view-transition-name:mbar}
::view-transition-old(root){animation:.18s var(--ease) both vt-out}
::view-transition-new(root){animation:.32s var(--ease) .04s both vt-in}
/* the header and the phone bar do not cross-fade (two headers blended read as a glitch): the new page's own appears at once, only the page under them fades */
::view-transition-group(hdr),::view-transition-group(mbar),::view-transition-new(hdr),::view-transition-new(mbar){animation:none}
::view-transition-old(hdr),::view-transition-old(mbar){display:none}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 2. Project photo viewer: charcoal backdrop, the photo as big as the screen allows, square olive-edged buttons */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(24,30,32,.985);color:#fff;
  display:none;place-items:center;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.lb[open]{display:grid;animation:lb-fade .22s var(--ease) both}
.lb.lb-out{animation:lb-fade .18s var(--ease) reverse both}
.lb::backdrop{background:transparent}
.lb-fig{width:100%;height:100%;display:grid;place-items:center;padding:clamp(56px,7vw,88px) clamp(12px,7vw,104px) clamp(64px,8vw,96px)}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-bottom:6px solid var(--olive);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);user-select:none;-webkit-user-drag:none}
.lb-img.lb-c{animation:lb-pop .3s var(--ease) both}
.lb-img.lb-r{animation:lb-from-r .28s var(--ease) both}
.lb-img.lb-l{animation:lb-from-l .28s var(--ease) both}
.lb-cap{position:absolute;left:0;right:0;bottom:clamp(18px,3vw,32px);text-align:center;font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#E3E7E0}
.lb-btn{position:absolute;width:52px;height:52px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.lb-btn svg{width:22px;height:22px}
.lb-btn:hover{background:var(--olive-deep);border-color:var(--olive-light)}
.lb-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lb-prev{left:clamp(10px,2vw,32px);top:50%;margin-top:-26px}
.lb-prev svg{transform:rotate(180deg)}
.lb-next{right:clamp(10px,2vw,32px);top:50%;margin-top:-26px}
.lb-prev:hover{transform:translateX(-3px)}
.lb-next:hover{transform:translateX(3px)}
.lb-close{top:clamp(10px,2vw,24px);right:clamp(10px,2vw,24px)}
.lb-one .lb-prev,.lb-one .lb-next{display:none}
@media (max-width:600px){
  .lb-fig{padding:64px 0 72px}
  .lb-img{border-bottom-width:4px}
  .lb-prev,.lb-next{top:auto;bottom:10px;margin:0;width:48px;height:48px}
}
@keyframes lb-fade{from{opacity:0}}
@keyframes lb-pop{from{opacity:0;transform:scale(.97)}}
@keyframes lb-from-r{from{opacity:0;transform:translateX(28px)}}
@keyframes lb-from-l{from{opacity:0;transform:translateX(-28px)}}
.pd-photo{cursor:zoom-in}

/* 3. Brand polish: highlighted text in pale olive (olive-light on the charcoal footer and statement band), and the
      "Copied" note that follows a tapped email address */
::selection{background:var(--pale);color:var(--ink)}
.ftr ::selection,.band ::selection{background:var(--olive-light);color:var(--charcoal)}
.copied{display:inline-block;margin-left:10px;font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--olive-deep);
  opacity:0;transform:translateY(3px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none}
.copied.on{opacity:1;transform:none}
.ftr .copied{color:var(--olive-light)}
/* empty, the note takes no room, so it never pushes a blank line under the email in a narrow footer column */
.ftr .copied:empty{margin:0}

/* ---- Round two (2026-11-03, 14:20 UTC): project openings, Next job + Share, card glide, form memory, side contours ---- */
/* A project without a before/after pair opens with its photo where the slider would sit (build.mjs > projectDetail) */
.ba-single{cursor:default}
.ba-single .pd-photo{display:block;width:100%;height:100%;aspect-ratio:auto;background:none}

/* Next job + Share at the foot of every project page */
.pd-more{margin-top:48px;padding-top:32px;border-top:1px solid var(--stone);display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.pd-next{display:flex;align-items:center;gap:20px;min-width:0;max-width:640px;text-decoration:none;color:inherit}
.pd-next-pic{flex:none;width:132px;aspect-ratio:4/3;overflow:hidden;background:var(--tint);border-bottom:4px solid var(--olive)}
.pd-next-pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.pd-next:hover .pd-next-pic img,.pd-next:focus-visible .pd-next-pic img{transform:scale(1.03)}
.pd-next-text{display:grid;gap:5px;min-width:0}
.pd-next-k{font:700 var(--t-small)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--olive-deep)}
.pd-next-t{font:700 clamp(22px,2vw,28px)/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.pd-next-row{font-size:var(--t-small);color:var(--ink-soft)}
.pd-next-arrow{flex:none;width:28px;height:28px;color:var(--olive-deep);transition:transform var(--dur) var(--ease)}
.pd-next:hover .pd-next-arrow,.pd-next:focus-visible .pd-next-arrow{transform:translateX(4px)}
.pd-share-wrap{display:inline-flex;align-items:center}
.pd-share-wrap .copied{margin:0 14px 0 0}
.pd-share{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;font:700 var(--t-small)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);box-shadow:inset 0 0 0 2px var(--stone);transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease)}
.pd-share svg{width:20px;height:20px}
.pd-share:hover,.pd-share:focus-visible{box-shadow:inset 0 0 0 2px var(--olive);color:var(--olive-deep)}
@media (max-width:600px){
  .pd-more{display:grid;gap:20px}
  .pd-next-pic{width:104px}
  .pd-share-wrap,.pd-share{width:100%;justify-content:center}
}

/* Desktop: resting the pointer on a project card glides the before/after handle across to the finished photo, and
   back on leave (site.js adds .ba-glide for the glide only, so a drag stays on the pointer) */
@property --pos{syntax:"<percentage>";inherits:true;initial-value:50%}
.ba-glide{transition:--pos .8s var(--ease)}

/* The estimate form kept what the visitor typed earlier (site.js) */
.draft-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 24px;padding:12px 16px;background:var(--tint);border-left:4px solid var(--olive);font-size:var(--t-small)}
.draft-note button{font:700 var(--t-small)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--olive-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.draft-note button:hover{color:var(--olive-deeper)}

/* Wide screens: the header's contour map, barely there, in the margins either side of the page. It sits under the
   page, so the sections with their own colour or photo cover it and only the white sections show it, fading out
   well before the content edge. */
@media (min-width:1600px){
  body{position:relative;z-index:0}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:url(/assets/img/contour.svg) 50% 50%/cover no-repeat;opacity:.42;
    -webkit-mask:linear-gradient(90deg,#000 0,#000 calc(50% - 860px),transparent calc(50% - 720px),transparent calc(50% + 720px),#000 calc(50% + 860px),#000 100%);
    mask:linear-gradient(90deg,#000 0,#000 calc(50% - 860px),transparent calc(50% - 720px),transparent calc(50% + 720px),#000 calc(50% + 860px),#000 100%)}
}

/* Home hero, balanced edges (2026-11-03, Jeremy: "make the right side kind of match the left side", "subtle is key").
   The left scrim darkens the trees behind the headline, which left the right edge (bright sky through the pines, pale
   gravel) reading far brighter. A softer mirror of the scrim comes in from the right edge (.50 fading to nothing by a
   third of the way in) with a gentle lift-off at the top right corner for the sky. The house and the excavator's body
   stay clear; only the edge of the arm and bucket sit in the last of the shade. Desktop only: on phones the photo
   sits above the text with no scrim. */
@media (min-width:901px){
  .hero::after{background:
    radial-gradient(70% 80% at 100% 0%,rgba(16,20,22,.32) 0%,rgba(16,20,22,.12) 45%,rgba(16,20,22,0) 75%),
    linear-gradient(270deg,rgba(16,20,22,.5) 0%,rgba(16,20,22,.34) 7%,rgba(16,20,22,.17) 16%,rgba(16,20,22,.05) 26%,rgba(16,20,22,0) 34%),
    linear-gradient(90deg,rgba(16,20,22,.84) 0%,rgba(16,20,22,.6) 34%,rgba(16,20,22,.06) 62%,rgba(16,20,22,0) 100%)}
}

/* Refine pass (2026-11-04, Jeremy: make an already great site 5-10% better, no redesign, nothing just for show).
   Five small fixes found in a full review of every page at phone, tablet and desktop widths. */
/* 1. "What happens next" on the service pages and the pad landing page reads like the homepage's version of the same
      section: it was held to a 32ch column (about 270px) at every width, five short lines on desktop and narrower
      than the screen on phones. The Related links keep their small size and now sit on one line. */
.how-text p{max-width:46ch;font-size:clamp(18px,1.5vw,20px);line-height:1.55}
.how-text p.svc-related{font-size:var(--t-small);line-height:1.5;max-width:none}
/* 2. Estimate forms: a fieldset's legend sits outside the grid, so "I'm a..." got none of the 10px gap every other
      label has above its field. And "optional, ..." notes that wrap start flush left instead of 6px in. */
.f-who > legend{margin-bottom:10px}
.f-l:has(> .opt){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px}
.f-l > .opt{margin-left:0}
/* 3. Footer: the phone number, the email and Back to top get a 44px tap area (they were 24 to 32px tall). Padding
      with a matching negative margin, so nothing moves.
      The phone number and the email sit 6px apart, so their tap areas meet in that gap instead of overlapping. */
.ftr-phone{padding-block:13px 3px;margin-block:-13px 3px}
.ftr-phone + .ftr-list a{padding-block:3px 17px;margin-block:-3px -17px;background-position:0 calc(100% - 14px)} /* the hover underline stays 3px under the words */
.ftr-top{padding-block:10px;margin-block:-10px}
/* 4. Footer: the divider above the copyright line ran out to the page gutters; it now stops at the content edges,
      in line with the logo and Back to top. */
.ftr-bottom{position:relative;border-top:0}
.ftr-bottom::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:rgba(255,255,255,.08)}
/* 5. Footer on laptops and tablets held sideways (960 to 1180px): the four link columns in one row under the logo,
      as on desktop, instead of a tall two-by-two stack. */
@media (min-width:960px) and (max-width:1180px){
  .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);column-gap:32px}
}
/*    On desktop the Pages column was 135-150px wide, so "Builders & Contractors" (150px) broke onto two lines; the
      column is now never narrower than its longest link, and the other columns give up the few pixels that takes. */
@media (min-width:1181px){
  .ftr-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr) minmax(max-content,.8fr) minmax(0,1fr)}
}

/* Framed lone project photo (Jeremy, 2026-11-04: "match the framing style used in other photos on everything that
   makes sense", with a project page's single "Before" photo as the example). A gallery group with one photo runs the
   full content width on its own, so on desktop it gets the placed-photo frame: the 6px olive edge and the offset
   contour panel 20px down and to the right. The panel is a grid-placed ::before on the grid, like .proj-grid-one,
   because the tile clips its overflow. Groups of two or more stay plain, like every other grid of photos. */
@media (min-width:901px){
  .pd-grid:has(> .g-full:only-child){isolation:isolate;margin-bottom:20px}
  .pd-grid > .g-full:only-child{grid-row:1;border-bottom:6px solid var(--olive)}
  .pd-grid:has(> .g-full:only-child)::before{content:"";grid-column:1/-1;grid-row:1;position:relative;z-index:-1;margin:20px -20px -20px 20px;
    background:var(--tint) url(/assets/img/contour.svg) 50% 50%/1600px 400px no-repeat}
}

/* Refine pass two (2026-11-04, Jeremy: "hit me with another pass", "small spacing anything"). Every section's padding
   and every heading, text and button gap measured on 18 pages at 1440 and 390; these were the ones out of step. */
/* 1. Project cards (home Recent projects, a service page's Recent jobs, the Projects page): each card keeps a 40px
      margin below it as the space between rows, so the last row carried 40px extra and those sections ended about
      104px below the last line instead of the usual 64px (84 instead of 44 on phones). Only grids that hold cards. */
@media (min-width:600px){
  .proj-grid:not(.proj-grid-one):has(> .proj){margin-bottom:-40px}
}
/* 2. Projects page opening: 52px above and 32px below, where every other page opening has the same space above and
      below (--open-pad). On phones the title sat 16px over its intro line instead of the usual 24px. */
.proj-open{padding:var(--open-pad) 0}
@media (max-width:900px){ .proj-open .proj-head{row-gap:var(--gap-intro)} }
/* 3. A line of text before a button is 32px above it everywhere else: the Homeowners "What to send us" card had 24px
      and the "Qualified trades..." note on Builders and Site Prep had 28px. That note also sat 16px or 20px under its
      list depending on the page; it is 20px on both now. */
.pads-bottom .pads-ask p{margin-bottom:32px}
.fine,.sv .fine{margin-top:-12px;margin-bottom:32px}
/* 4. A button with "Or call us" under it on phones: 16px apart on every page (the project pages and Home Construction
      had 20px). */
.hc-cta,.pd-cta{row-gap:16px}
/* 5. Phones, home "The work we do most" rows: the service name sat 5px over its description, where every other card
      has 8-10px. */
@media (max-width:560px){ .svc-body{gap:8px} }
/* 6. Phones and tablets, Builders phase list: the description lines up under the phase name instead of under the
      number, so each phase reads as one block. */
@media (max-width:900px){
  .phase-track a{display:grid;grid-template-columns:minmax(14px,auto) minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:baseline}
  .ph-d{grid-column:2}
}
/* 7. Project pages on phones: "Share this job" sat 14px in from the left edge, pushed by the (empty) "Link copied"
      note in front of it. The note now floats beside the button on desktop and under it on phones, taking no space. */
.pd-share-wrap{position:relative}
.pd-share-wrap .copied{position:absolute;right:100%;top:50%;margin:-.5em 14px 0 0;white-space:nowrap}
@media (max-width:900px){ .pd-share-wrap .copied{right:auto;left:0;top:100%;width:100%;margin:10px 0 0;text-align:center} }

/* The crew (2026-11-04, Jeremy: Joey's new excavator "will be a trademark of his business", "make it something
   together" with the dozer, which stays exactly as it is). Footer only. Markup: src/partials/excavator.html and
   truck.html, placed by footer.html: .ftr-lane (road + truck, under the dozer) then the excavator, then the dozer.
   Sizes hang off --k, the dozer's own scale (150px / 260 on desktop, 104 / 260 at 900px and under), so the three
   machines keep their proportions at every width: the excavator a touch smaller than the dozer, the truck taller
   than both. The story, once the footer scrolls into view (site.js adds .armed then .go to .ftr-ground, not under
   reduced motion, where everything simply sits parked): the excavator digs two buckets (0.5 to 5.5s) and swings them
   into the truck's bed while the dozer rolls in (0 to 6s, unchanged) grading a road behind it; the loaded truck pulls
   away at 6.3s, drives the new road and fades out behind the dozer (the lane's mask), leaving the excavator, the road
   and the dozer. Phones (under 600px): no truck or road, the excavator dumps onto a spoil pile that grows with each
   bucket. All the arm angles come from a small inverse-kinematics script (/mnt/project-files/tvis-excavator/source). */
.ftr-ground{--k:.5769;--dzw:calc(260px*var(--k));--ke:calc(var(--k)*.82);--kt:calc(var(--k)*1.25);--trl:calc(var(--gut) + 184.5px*var(--k))}
@media (max-width:900px){.ftr-ground{--k:.4}}
.ftr-ground .dozer{z-index:3}
.exc{position:absolute;left:calc(var(--gut) - 11.5px*var(--k));bottom:0;width:calc(300px*var(--ke));height:auto;overflow:visible;z-index:2}
.ftr-lane{position:absolute;left:0;right:0;top:-40px;bottom:0;overflow:hidden;z-index:1;--fade:linear-gradient(90deg,#000 calc(100% - var(--gut) - var(--dzw) + 30px*var(--k)),transparent calc(100% - var(--gut) - var(--dzw)*.5));-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.truck{position:absolute;left:var(--trl);bottom:0;width:calc(150px*var(--kt));height:auto;overflow:visible;--drive:calc(100vw - var(--gut) - var(--dzw)*.5 + 8px - var(--trl))}
.ftr-road{position:absolute;left:calc(var(--trl) + 4px*var(--kt));right:calc(var(--gut) + var(--dzw) - 40px*var(--k));bottom:0;height:7px;overflow:hidden}
.road-run{position:absolute;inset:0;border-top:2px solid rgba(163,182,84,.85);background:radial-gradient(circle,rgba(163,182,84,.8) 0 1px,transparent 1.4px) 0 1px/6px 5px,rgba(163,182,84,.24)}
.exc *,.truck *{transform-box:view-box}
.xpuff,.xpuff-idle,.tpuff{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
/* resting pose (also the reduced-motion picture): bucket down at the pile */
.ex-boom{transform-origin:134px 80px;transform:rotate(-31.0deg)}.ex-stick{transform-origin:190px 26px;transform:rotate(18.5deg)}.ex-bucket{transform-origin:218.5px 109.2px;transform:rotate(27.4deg)}
.ex-rig{transform-origin:76px 128px}
.ex-load,.ex-drop circle,.ex-kick circle,.sp-clod{opacity:0}
.ex-pile{transform-origin:205px 128px}
.ex-spoil,.sp-bits{display:none}.ex-spoil{transform-origin:281px 128px;transform:scale(0)}.sp-clod{transform-origin:281px 108px}
.sp-clod:nth-of-type(1),.sp-clod:nth-of-type(2){translate:0 6px}
.tr-load{transform-origin:50px 25px;transform:scaleY(0)}.tr-rig{transform-origin:75px 60px}
.tdust2{opacity:0;transform-origin:14px 76px}
/* the excavator: two buckets over 5s from 0.5s (dig, curl, lift, swing over the bed, dump, swing back) */
@keyframes ex-boom{0%{transform:rotate(-31.0deg)}7%{transform:rotate(-22.1deg)}15%{transform:rotate(-30.3deg)}24%{transform:rotate(-30.2deg)}31%{transform:rotate(2.8deg)}35%{transform:rotate(6.2deg)}40%{transform:rotate(6.2deg)}45%{transform:rotate(-30.2deg)}50%{transform:rotate(-31.0deg)}57%{transform:rotate(-22.1deg)}65%{transform:rotate(-30.3deg)}74%{transform:rotate(-30.8deg)}81%{transform:rotate(0.5deg)}85%{transform:rotate(3.6deg)}90%{transform:rotate(3.6deg)}95%{transform:rotate(-30.8deg)}100%{transform:rotate(-31.0deg)}}
@keyframes ex-stick{0%{transform:rotate(18.5deg)}7%{transform:rotate(15.1deg)}15%{transform:rotate(23.0deg)}24%{transform:rotate(-2.3deg)}31%{transform:rotate(-87.5deg)}35%{transform:rotate(-93.3deg)}40%{transform:rotate(-93.3deg)}45%{transform:rotate(-2.3deg)}50%{transform:rotate(18.5deg)}57%{transform:rotate(15.1deg)}65%{transform:rotate(23.0deg)}74%{transform:rotate(-4.8deg)}81%{transform:rotate(-85.1deg)}85%{transform:rotate(-90.3deg)}90%{transform:rotate(-90.3deg)}95%{transform:rotate(-4.8deg)}100%{transform:rotate(18.5deg)}}
@keyframes ex-bucket{0%{transform:rotate(27.4deg)}7%{transform:rotate(-8.0deg)}15%{transform:rotate(77.3deg)}24%{transform:rotate(117.5deg)}31%{transform:rotate(159.7deg)}35%{transform:rotate(42.2deg)}40%{transform:rotate(42.2deg)}45%{transform:rotate(117.5deg)}50%{transform:rotate(27.4deg)}57%{transform:rotate(-8.0deg)}65%{transform:rotate(77.3deg)}74%{transform:rotate(120.6deg)}81%{transform:rotate(159.6deg)}85%{transform:rotate(41.7deg)}90%{transform:rotate(41.7deg)}95%{transform:rotate(120.6deg)}100%{transform:rotate(27.4deg)}}
.ftr-ground.go .ex-boom{animation:ex-boom 5s ease-in-out .5s both}
.ftr-ground.go .ex-stick{animation:ex-stick 5s ease-in-out .5s both}
.ftr-ground.go .ex-bucket{animation:ex-bucket 5s ease-in-out .5s both}
.ftr-ground.go .ex-rig{animation:ex-rock 2.5s ease-in-out .5s 2 both}
@keyframes ex-rock{0%,6%{transform:none}16%{transform:rotate(.45deg)}28%{transform:rotate(.7deg)}40%{transform:none}54%{transform:rotate(-.35deg)}68%,100%{transform:none}}
.ftr-ground.go .ex-load{animation:ex-load 2.5s linear .5s 2 both}
@keyframes ex-load{0%,24%{opacity:0}31%,68%{opacity:.75}73%,100%{opacity:0}}
.ftr-ground.go .ex-pile{animation:pile-dug 5.5s ease-out both}
@keyframes pile-dug{0%,21%{transform:none}26%,66%{transform:scale(.98,.94)}71%,100%{transform:scale(.96,.88)}}
.ftr-ground.go .ex-kick circle{animation:ex-kick-a 2.5s cubic-bezier(.2,.6,.5,1) .5s 2 both}
.ftr-ground.go .ex-kick circle:nth-child(2){animation-name:ex-kick-b}.ftr-ground.go .ex-kick circle:nth-child(3){animation-name:ex-kick-c}
@keyframes ex-kick-a{0%,15%{opacity:0;transform:none}18%{opacity:.9}30%{opacity:.9;transform:translate(-5px,-9px)}40%,100%{opacity:0;transform:translate(-9px,4px)}}
@keyframes ex-kick-b{0%,16%{opacity:0;transform:none}19%{opacity:.85}31%{opacity:.85;transform:translate(4px,-7px)}40%,100%{opacity:0;transform:translate(8px,5px)}}
@keyframes ex-kick-c{0%,17%{opacity:0;transform:none}20%{opacity:.8}30%{opacity:.8;transform:translate(-8px,-5px)}38%,100%{opacity:0;transform:translate(-12px,4px)}}
.ftr-ground.go .ex-drop circle{animation:ex-drop 2.5s cubic-bezier(.5,0,.8,.6) .5s 2 both}
.ftr-ground.go .ex-drop circle:nth-child(2){animation-delay:.56s}.ftr-ground.go .ex-drop circle:nth-child(3){animation-delay:.6s}
@keyframes ex-drop{0%,69%{opacity:0;transform:translateY(-4px)}72%{opacity:.9}84%{opacity:.9;transform:translateY(8px)}88%,100%{opacity:0;transform:translateY(10px)}}
.ftr-ground.go .xpuff{animation:puff 1.5s cubic-bezier(.2,.6,.4,1) 1.15s 2 both}.ftr-ground.go .xpuff:nth-child(2){animation-delay:1.4s}
.ftr-ground.go .xpuff-idle{animation:puff-idle 3.6s ease-out 6.1s infinite}
/* the truck: the load rises a step with each bucket, the bed takes the weight, then it drives off at 6.3s */
.ftr-ground.go .tr-load{animation:load 5.5s linear both}
@keyframes load{0%,41%{transform:scaleY(0)}46%,86%{transform:scaleY(.55)}91%,100%{transform:scaleY(1)}}
.ftr-ground.go .tr-rig{animation:tr-rig 7.3s ease-in-out both}
@keyframes tr-rig{0%,31%{transform:none}33%{transform:translateY(1.4px)}36%,66%{transform:none}68%{transform:translateY(1.8px)}71%,86%{transform:none}91%{transform:rotate(-1.3deg)}100%{transform:none}}
.ftr-ground.go .truck{animation:drive 5.6s cubic-bezier(.42,0,.32,1) 6.3s both}
@keyframes drive{from{transform:none}to{transform:translateX(var(--drive))}}
.ftr-ground.go .tpuff{animation:puff 1.5s cubic-bezier(.2,.6,.4,1) 6.1s both}.ftr-ground.go .tpuff:nth-child(2){animation-delay:6.7s}
.ftr-ground.go .tdust2{animation:tdust 1.4s ease-out 6.7s both}.ftr-ground.go .tdust2:nth-of-type(2){animation-delay:7.5s}.ftr-ground.go .tdust2:nth-of-type(3){animation-delay:8.3s}
/* the road: it appears behind the dozer in step with the roll (the same keyframes, the same easing) */
.ftr-ground.armed .road-run{transform:translateX(-45vw);opacity:0}
.ftr-ground.go .road-run{animation:dozer-roll 6s cubic-bezier(.3,.5,.25,1) both}
/* phones: no room for three machines, so the excavator dumps onto a spoil pile beside it (lower swing, two-tone
   pile that grows a step per bucket, clods rolling down its sides) and the dozer rolls in as always */
@media (max-width:599px){
  .ftr-lane{display:none}
  .ex-spoil,.sp-bits{display:block}
  .ftr-ground.go .ex-boom{animation-name:ex-boom-b}.ftr-ground.go .ex-stick{animation-name:ex-stick-b}.ftr-ground.go .ex-bucket{animation-name:ex-bucket-b}
  .ftr-ground.go .ex-drop circle{animation-name:ex-drop-b}
  .ftr-ground.go .ex-spoil{animation:spoil 5.5s linear both}
  .ftr-ground.go .sp-clod.l{animation:sp-l .9s cubic-bezier(.3,.4,.6,1) 2.5s both}.ftr-ground.go .sp-clod.r{animation:sp-r .85s cubic-bezier(.3,.4,.6,1) 2.56s both}
  .ftr-ground.go .sp-clod.l:nth-of-type(3){animation-delay:5s}.ftr-ground.go .sp-clod.r:nth-of-type(4){animation-delay:5.08s}
}
@keyframes ex-boom-b{0%{transform:rotate(-31.0deg)}7%{transform:rotate(-22.1deg)}15%{transform:rotate(-30.3deg)}24%{transform:rotate(-28.3deg)}31%{transform:rotate(-9.1deg)}35%{transform:rotate(-5.0deg)}40%{transform:rotate(-5.0deg)}45%{transform:rotate(-28.3deg)}50%{transform:rotate(-31.0deg)}57%{transform:rotate(-22.1deg)}65%{transform:rotate(-30.3deg)}74%{transform:rotate(-28.3deg)}81%{transform:rotate(-9.1deg)}85%{transform:rotate(-5.0deg)}90%{transform:rotate(-5.0deg)}95%{transform:rotate(-28.3deg)}100%{transform:rotate(-31.0deg)}}
@keyframes ex-stick-b{0%{transform:rotate(18.5deg)}7%{transform:rotate(15.1deg)}15%{transform:rotate(23.0deg)}24%{transform:rotate(0.2deg)}31%{transform:rotate(-33.4deg)}35%{transform:rotate(-37.1deg)}40%{transform:rotate(-37.1deg)}45%{transform:rotate(0.2deg)}50%{transform:rotate(18.5deg)}57%{transform:rotate(15.1deg)}65%{transform:rotate(23.0deg)}74%{transform:rotate(0.2deg)}81%{transform:rotate(-33.4deg)}85%{transform:rotate(-37.1deg)}90%{transform:rotate(-37.1deg)}95%{transform:rotate(0.2deg)}100%{transform:rotate(18.5deg)}}
@keyframes ex-bucket-b{0%{transform:rotate(27.4deg)}7%{transform:rotate(-8.0deg)}15%{transform:rotate(77.3deg)}24%{transform:rotate(113.0deg)}31%{transform:rotate(117.5deg)}35%{transform:rotate(-2.9deg)}40%{transform:rotate(-2.9deg)}45%{transform:rotate(113.0deg)}50%{transform:rotate(27.4deg)}57%{transform:rotate(-8.0deg)}65%{transform:rotate(77.3deg)}74%{transform:rotate(113.0deg)}81%{transform:rotate(117.5deg)}85%{transform:rotate(-2.9deg)}90%{transform:rotate(-2.9deg)}95%{transform:rotate(113.0deg)}100%{transform:rotate(27.4deg)}}
@keyframes ex-drop-b{0%,69%{opacity:0;transform:translate(-15px,46px)}72%{opacity:.9}83%{opacity:.9;transform:translate(-15px,60px)}86%,100%{opacity:0;transform:translate(-15px,63px)}}
@keyframes spoil{0%,41%{transform:scale(0)}44%{transform:scale(.8,.56)}47%,86%{transform:scale(.72,.62)}89%{transform:scale(1.18,1.04)}92%,100%{transform:scale(1.12)}}
@keyframes sp-l{0%{opacity:0;transform:none}15%{opacity:.95}100%{opacity:0;transform:translate(-17px,19px)}}
@keyframes sp-r{0%{opacity:0;transform:none}15%{opacity:.95}100%{opacity:0;transform:translate(16px,19px)}}

/* Google reviews: real quotes from project.txt (review: / reviewer:) and site.config.json > reviews, on the homepage and each project page */
.reviews{background:var(--paper)}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px}
.rev{margin:0;padding:28px clamp(20px,2.4vw,32px) 24px;background:var(--warm);border-left:6px solid var(--olive);display:flex;flex-direction:column;gap:18px}
.rev-grid > .rev:only-child{max-width:820px}
.rev-stars{font-size:22px;line-height:1;letter-spacing:2px;color:var(--olive-deep);margin-bottom:-6px}
.rev blockquote{margin:0}
.rev blockquote p{margin:0;font-size:19px;line-height:1.55;color:var(--ink);max-width:60ch}
.rev figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto;font-weight:700;color:var(--ink-soft)}
.rev figcaption svg{width:22px;height:22px;flex:none}
.rev figcaption a{margin-left:auto;font-weight:700;color:var(--olive-deep)}
.rev-links{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:var(--gap-head)}
.pd-rev{margin-top:56px}
.pd-rev h2{margin-bottom:20px}
.pd-ask{margin-top:32px;color:var(--ink-soft)}
.pd-ask a{font-weight:700;color:var(--olive-deep)}
@media (min-width:901px){ .pd-rev{margin-top:40px} .pd-rev .rev{max-width:820px} }

/* ---------- Meet the owner (home, 2026-11-07; polished the same night) ----------
   Joey's photo on the left, placed like the Builders section photos (offset contour panel behind it on desktop), with
   the charcoal "In this photo" caption bar of the page openings sitting UNDER the photo (never over it, so the people
   stay whole) and linking to the job in the picture. Words on the right. Phones: photo edge to edge, caption bar,
   then the words. */
.owner-in{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:40px clamp(48px,6vw,96px);align-items:center}
.owner-photo{position:relative}
.owner-photo>.photo{aspect-ratio:4/3}
.owner-photo>.photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.owner-pic .phero-job{position:static;animation:none;border-top:6px solid var(--olive)}
.owner-text h2{font-size:var(--t-h2);line-height:1}
.owner-text p:not(.sv-eyebrow){margin-top:24px;font-size:clamp(18px,1.5vw,20px);line-height:1.55;max-width:42ch}
.owner-text .bar+p{margin-top:28px}
.owner-text .cta-actions{margin-top:36px}
@media (min-width:901px){
  .owner-pic{position:relative;isolation:isolate;margin-bottom:20px}
  .owner-pic::after{content:"";position:absolute;top:20px;right:20px;bottom:-20px;left:-20px;z-index:-1;
    background:var(--tint) url(/assets/img/contour.svg) 50% 50%/1600px 400px no-repeat}
}
/* the name tag over Joey: a small charcoal tag with a notch pointing down at him (he stands right of centre, his head
   about 20% down the photo) */
.owner-tag{position:absolute;z-index:2;left:39.5%;top:8%;transform:translateX(-50%);display:flex;align-items:baseline;gap:8px;padding:7px 11px 8px;background:var(--charcoal);color:#fff;font:700 17px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;pointer-events:none}
.owner-tag small{font:700 12px/1 var(--display);letter-spacing:.12em;color:var(--olive-light)}
.owner-tag::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--charcoal);border-bottom:0}
@media (max-width:600px){.owner-tag{top:5%;padding:5px 8px 6px;font-size:14px;gap:6px}.owner-tag small{font-size:10px}}
@media (max-width:900px){
  .owner-in{grid-template-columns:1fr;gap:28px}
  .owner-pic{margin:0 calc(-1 * var(--gut))}
}

/* ---------- Home section seams (2026-11-07, Jeremy: "polish ... the transition between the sections") ----------
   The home page steps white, warm, white, warm, white, charcoal band, warm. Each warm section now opens with the
   contour map (the same lines as the service strip, header and footer) fading out over its first 360px, so the colour
   change reads as ground rising rather than a flat cut. Each one sits at a different spot on the map so they don't look
   stamped. The statement band gets the 6px olive top edge the closing bands use. */
.page-home .svcs,.page-home .work,.page-home .near{position:relative;isolation:isolate}
.page-home .svcs::before,.page-home .work::before,.page-home .near::before{content:"";position:absolute;left:0;right:0;top:0;height:min(100%,360px);z-index:-1;
  background:url(/assets/img/contour.svg) var(--cx,50%) 0/1600px 400px repeat-x;opacity:.6;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 45%,transparent 100%);mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 45%,transparent 100%)}
.page-home .svcs{--cx:18%}
.page-home .work{--cx:82%}
.page-home .near{--cx:46%}
.page-home .band{border-top:6px solid var(--olive)}
@media (max-width:900px){.page-home .svcs::before,.page-home .work::before,.page-home .near::before{height:min(100%,240px);opacity:.5}}


/* ---- Home hero v2 (2026-11-07). Jeremy asked for a world-class hero, saw three options built from finished jobs only,
   picked the cinematic one, then picked photo 1 of six for it, and then took out its row of three small project photos
   ("a little less clutter"). One finished job (the East Ridge hillside drive up to the new two-story home under tall
   pines) fills the right of the screen from 30% in (further on wide screens) and fades into the dark field over its first
   third, so the house never sits under the headline; the photo is anchored at its foot so the house and drive fill the
   frame rather than the sky. The contour map whispers on the dark field behind the words. A soft foot at the bottom for
   the service bar. The charcoal caption bar from the openings ("In this photo", town and month, the project title, olive
   arrow tab) sits at the bottom right, a step above the service bar with its right edge on the content edge, and links
   to the job. Under the buttons, with a camera icon: "Send a few photos. We'll look them over and call to talk it
   through." (Joey's estimate wording). Phones and tablets: the photo on top, the caption bar under it (as on the
   openings), then the words on the dark field. ---- */
/* --cl is the content column's left (and right) offset. Every rule that uses it sits on an absolutely positioned child
   of the hero, so 100% is the hero's width (no container query needed, so older Safari gets the same layout) */
.hero.hv{--cl:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}
.hero.hv .hv-job:focus-visible{outline-offset:3px}
.hv-proof{display:flex;align-items:center;gap:12px;max-width:44ch;margin-top:28px;font-size:16px;line-height:1.4;color:#D5D9D2;animation:settle .9s var(--ease) .7s both}
.hv-proof svg{width:24px;height:24px;flex:none;color:var(--olive-light)}
.hv-job{z-index:3}
.hv-job strong{text-wrap:balance}
.hero.hv .hv-job .job-meta{display:none}
@media (min-width:901px){
  /* about 10% smaller than the old hero (Jeremy, 2026-11-07: "shrinks like 5%", "maybe 7%", then "3 percent more") */
  .hero.hv{min-height:clamp(505px,calc(77.5svh - var(--hdr-h) - var(--hdr-edge)),703px)}
  /* the photo starts 30% in (further on wide screens, so it never runs under the words) and fades into the dark field
     over its first third; the house in the photo stays clear of the headline */
  .hero.hv .hero-bg{left:max(30%,calc(var(--cl) + 300px))}
  .hero.hv .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1B2225 0%,rgba(27,34,37,.55) 14%,rgba(27,34,37,0) 36%)}
  .hero.hv::after{background:linear-gradient(0deg,rgba(16,20,22,.5) 0%,rgba(16,20,22,0) 30%)}
  /* the contour map from the header and the service bar whispers on the dark field behind the words */
  .hero.hv::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:auto;width:calc(max(30%,calc(var(--cl) + 300px)) + 12%);background:url(/assets/img/contour.svg) 0 100%/1600px 400px no-repeat;opacity:.6;-webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent);pointer-events:none}
  .hero.hv .hero-bg .photo>img{object-position:50% 100%}
  .hero.hv h1{font-size:clamp(50px,5.4vw,86px)}
  /* the words sit centred between the header and the top of the service bar (the bar rises over the hero by --ss-lift) */
  .page-home .hero.hv .hero-in{padding-top:clamp(48px,7vh,88px);padding-bottom:calc(clamp(48px,7vh,88px) + var(--ss-lift))}
  /* a slim one-line caption tucked into the photo's bottom right corner (Jeremy: "small and more to the right") */
  .hero.hv .hv-job{position:absolute;left:auto;top:auto;right:clamp(16px,2vw,32px);bottom:calc(var(--ss-lift) + 24px);width:auto;max-width:calc(100% - max(30%,calc(var(--cl) + 300px)) - 48px);grid-template-columns:auto 42px}
  .hero.hv .hv-job .job-text{grid-template-columns:auto auto;align-items:center;gap:0;padding:10px 16px 10px 16px}
  .hero.hv .hv-job small{grid-row:1;grid-column:1;font-size:11px;letter-spacing:.12em;padding-right:12px;margin-right:12px;border-right:1px solid #5C6467;line-height:14px}
  .hero.hv .hv-job strong{grid-row:1;grid-column:2;font-size:15px;line-height:1.1;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero.hv .hv-job .job-meta{display:none}
  .hero.hv .hv-job .who-go svg{width:20px;height:20px}
}
@media (max-width:900px){
  /* the caption follows the words in the page (keyboard and screen readers reach the headline and buttons first) but
     sits under the photo on screen, as on the openings */
  .hero.hv{display:flex;flex-direction:column}
  .hero.hv .hero-bg{order:-2;align-self:stretch;height:clamp(214px,34svh,417px)}
  .hero.hv h1{font-size:clamp(37px,11.2vw,54px)}
  .hero.hv .hv-job{order:-1;align-self:stretch;position:relative;left:auto;right:auto;bottom:auto}
  .hero.hv .hero-in{padding-top:28px}
}
@media (max-width:600px){.hv-proof{display:none}}
/* phones: a slim two-line caption (label, then the project name) so both hero buttons stay in the first screen */
@media (max-width:600px){
  .hero.hv .hv-job{grid-template-columns:minmax(0,1fr) 52px}
  .hero.hv .hv-job .job-text{gap:6px 0;padding:11px 14px 12px var(--gut)}
  .hero.hv .hv-job .job-meta{display:none}
  .hero.hv .hv-job strong{font-size:17px}
  .hero.hv .hv-job small{font-size:12px}
}

/* ---- Home hero motion (2026-11-07, Jeremy: "make it move slightly... something interesting instead of this static
   photo alone"). Researched, then kept to the restraint premium builder and architecture sites use: one cinematic
   reveal on load, then stillness. All of it is transform-only (no
   repaint), the photo still paints at once so the page's speed score is unchanged, and none of it runs under
   prefers-reduced-motion (the hero then simply appears, finished).
   1. Before → after (once, Jeremy's pick of two): the page opens on the same hillside lot before the work, tagged
      "Before". After half a second a thin olive blade line sweeps left to right (1.5s) and leaves the finished drive
      behind it. site.js holds the sweep until the before photo has loaded (and drops the before photo if it hasn't
      arrived within 2s), so it never pops in half way. The finished photo eases from 106% to 100% underneath. (The first
      version was a dark panel sliding off the photo.)
   2. The words: each headline line rises from behind its own baseline, the olive bar draws in from the left, then the
      subhead, buttons and photo line settle; the caption bar comes up last, once the photo is uncovered.
   After that the hero holds still. Tried and removed the same day because Jeremy didn't like them: a looping 26s drift
   on the photo, a mouse-depth shift (photo and contour lines moving opposite ways), and a smoothed mouse glide with a
   6s settle. Don't add pointer or idle motion to the hero again. ---- */
.hero.hv .hero-bg{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  /* 1. before → after: the before photo (z 2) under the fade (z 3) and the blade line (z 4); both wait for .hv-wait to go */
  .hero.hv .hv-before{display:block;position:absolute;inset:0;z-index:2;animation:hvWipe 1.5s cubic-bezier(.6,0,.3,1) .55s both}
  .hero.hv .hero-bg::after{z-index:3}
  .hero.hv .hero-bg::before{content:"";position:absolute;z-index:4;top:0;bottom:0;left:0;width:6px;background:var(--olive);box-shadow:0 0 18px rgba(16,20,22,.45);pointer-events:none;animation:hvBlade 1.5s cubic-bezier(.6,0,.3,1) .55s both}
  .hero.hv.hv-wait .hv-before,.hero.hv.hv-wait .hero-bg::before{animation-play-state:paused}
  .hero.hv.hv-skip .hv-before{display:none}
  .hv-before-tag{position:absolute;z-index:5;top:clamp(16px,2.4vw,28px);left:var(--gut);padding:8px 11px;background:#1B2225;color:#fff;font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
  /* the photo eases from 106% to 100% while the blade uncovers it, then stays still */
  .hero.hv .hero-bg .photo>img{animation:hvPhoto 2.2s cubic-bezier(.2,.7,.2,1) both}
  /* 2. the words */
  .hero.hv h1 span{animation:hvLine .95s cubic-bezier(.2,.7,.2,1) .2s both}
  .hero.hv h1 span+span{animation-delay:.34s}
  .hero.hv h1::after{transform-origin:left;animation:hvBar .7s cubic-bezier(.2,.7,.2,1) .62s both}
  .hero.hv .hero-sub{animation-delay:.7s}
  .hero.hv .hero-act{animation-delay:.82s}
  .hero.hv .hv-proof{animation-delay:.95s}
  /* backwards, not both: once it has risen the bar drops its clip-path, which would otherwise hide the focus ring */
  .hero.hv .hv-job{animation:jobIn .6s var(--ease) 2s backwards}
}
@keyframes hvBlade{from{left:0;opacity:1}92%{opacity:1}to{left:100%;opacity:0}}
@keyframes hvWipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.hv-before{display:none}
@media (min-width:901px){.hv-before-tag{left:calc(36% + 16px)}}
@keyframes hvPhoto{from{transform:scale(1.06)}to{transform:none}}
@keyframes hvLine{from{transform:translateY(.5em);clip-path:inset(100% 0 -20% 0)}to{transform:none;clip-path:inset(-20% 0 -20% 0)}}
@keyframes hvBar{from{transform:scaleX(0)}to{transform:none}}
/* phones, reworked smaller (2026-11-07, Jeremy: "too big text" on mobile): a 37px headline at 390px wide instead of 44,
   a 17px subhead, a smaller "where" line and olive bar, tighter steps between them, and a slimmer caption strip */
@media (max-width:600px){
  .hero.hv .hero-in{padding-top:24px}
  .hero.hv .hero-eyebrow{font-size:12px;letter-spacing:.12em;gap:8px;margin-bottom:12px}
  .hero.hv .hero-eyebrow::before{width:16px}
  .hero.hv h1{font-size:clamp(30px,9.1vw,41px);line-height:.98}
  .hero.hv h1::after{width:56px;height:5px;margin-top:16px}
  .hero.hv .hero-sub{margin-top:16px;font-size:17px;line-height:1.4;max-width:30ch}
  .hero.hv .hero-act{margin-top:22px}
  .hero.hv .hero-act .btn{font-size:15px}
  .hero.hv .hv-job .job-text{gap:5px 0;padding:10px 14px 11px var(--gut)}
  .hero.hv .hv-job strong{font-size:15px}
  .hero.hv .hv-job small{font-size:11px}
}
/* small tablets: a step down too */
@media (min-width:601px) and (max-width:900px){
  .hero.hv h1{font-size:clamp(43px,7vw,52px)}
  .hero.hv .hero-sub{font-size:19px}
}
/* SEO pass (2026-11-07): the home hero's "where" line moved inside the H1 ("Excavation & Sitework · Chattanooga, TN
   Groundwork Done Right."), styled exactly as the old paragraph. These keep the headline's span rules off it. */
.hero h1 .hero-eyebrow{display:flex;white-space:normal;text-wrap:wrap}
.hero h1 .hero-eyebrow span{display:inline;animation:none}
.hero.hv h1 .hero-eyebrow{animation:settle .9s var(--ease) both;clip-path:none}
@media (prefers-reduced-motion:no-preference){
  .hero.hv h1 .hl{animation:hvLine .95s cubic-bezier(.2,.7,.2,1) .2s both}
  .hero.hv h1 .hl+.hl{animation-delay:.34s}
}
/* phones and tablets: the hero photo sits closer in (Jeremy, 2026-11-08: "a little far zoomed out on mobile"). Both the
   before and the finished photo use the same crop so the sweep still lines up; anchored low so the sky is what's cut. */
@media (max-width:900px){
  .hero.hv .hero-bg .photo{transform:scale(1.25);transform-origin:46% 82%}
}

/* ---------- Stray Wolf Technology footer badge (2026-11-09) ----------
   The kit's stylesheet, v1, from https://straywolftech.com, kept as supplied (here, not in an inline <style>, which the CSP blocks).
   footer.html uses the dark logo badge, for the charcoal footer. */
.swt-badge{
  --swt-ink:#24221F;--swt-accent:#D9531E;--swt-forehead:#56504A;--swt-facet:#4A453E;--swt-eye:#F4F2EE;--swt-tech:#4A453E;
  display:inline-flex;align-items:center;gap:.6em;
  color:inherit;text-decoration:none;font-size:.875rem;line-height:1.2;
  border-radius:4px;padding:.25em .125em;
  -webkit-tap-highlight-color:transparent;
}
.swt-badge--dark{
  --swt-ink:#F4F2EE;--swt-accent:#EE6A35;--swt-forehead:#6A635A;--swt-facet:#5A544B;--swt-eye:#24221F;--swt-tech:#D8D2C8;
}
@media (prefers-color-scheme:dark){
  .swt-badge--auto{--swt-ink:#F4F2EE;--swt-accent:#EE6A35;--swt-forehead:#6A635A;--swt-facet:#5A544B;--swt-eye:#24221F;--swt-tech:#D8D2C8;}
}
.swt-badge .swt-i{fill:var(--swt-ink)}
.swt-badge .swt-a{fill:var(--swt-accent)}
.swt-badge .swt-h{fill:var(--swt-forehead)}
.swt-badge .swt-f{fill:var(--swt-facet)}
.swt-badge .swt-e{fill:var(--swt-eye)}
.swt-badge .swt-t{fill:var(--swt-tech)}
.swt-badge .swt-c{stroke:var(--swt-accent)}
.swt-badge .swt-mark{display:block;height:2.5em;width:auto;flex:none}
.swt-badge .swt-icon{display:block;height:1.6em;width:auto;flex:none}
.swt-badge .swt-label{white-space:nowrap}
.swt-badge--logo .swt-label{font-size:.857em;opacity:.8}
.swt-badge--text .swt-label b{font-weight:600}
.swt-badge .swt-mark,.swt-badge .swt-icon{transition:transform .2s ease}
.swt-badge:hover .swt-mark,.swt-badge:hover .swt-icon{transform:translateY(-1px)}
.swt-badge--text:hover .swt-label b{text-decoration:underline;text-decoration-color:var(--swt-accent);text-underline-offset:.2em}
.swt-badge:focus-visible{outline:2px solid var(--swt-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.swt-badge .swt-mark,.swt-badge .swt-icon{transition:none}.swt-badge:hover .swt-mark,.swt-badge:hover .swt-icon{transform:none}}
@media print{.swt-badge .swt-mark{height:1.75em}}
/* in the footer's bottom row: keep the badge's own look, not the row's olive underline on hover */
.ftr-bottom .swt-badge,.ftr-bottom .swt-badge:hover{color:#E3E7E0;text-decoration:none}

/* Privacy policy (/privacy): plain reading page, same opening space as the 404 page */
.legal{padding-top:var(--open-pad);padding-bottom:var(--open-pad)}
.legal .wrap>*{max-width:68ch}
.legal-date{margin-top:12px;color:var(--ink-soft,#5a5a52);font-size:var(--t-small)}
.legal h2{font-size:var(--t-h3);margin-top:40px}
.legal p{margin-top:12px}
.ftr-legal a{margin-left:12px}