/* ==========================================================================
   Pinewood Property Services LLC
   Homepage. Editorial layout, warm Central Florida palette.

   Colour is used by judgement, not by assignment. Cream is the ground,
   charcoal is the dark, cypress carries warmth in secondary text, and sand
   separates. Olive and clay appear once or twice and never as required
   accents. The photography supplies the greens and browns.
   ========================================================================== */

:root{
  --cream:#F4EDE0;
  --cream-lift:#FAF5EB;
  --sand:#DFD2B8;
  --sand-deep:#C9BB9B;
  --cypress:#5A5044;
  --charcoal:#26292A;
  --charcoal-deep:#1B1E1F;
  --olive:#6B7052;
  --clay:#9A6244;

  --ink:#202425;
  --ink-soft:#585F5C;

  --line:rgba(38,41,42,.14);
  --line-strong:rgba(38,41,42,.26);
  --line-light:rgba(244,237,224,.20);
  --line-light-strong:rgba(244,237,224,.42);

  --gutter:clamp(1.25rem, 4vw, 3.5rem);
  --bay:clamp(4.5rem, 8.5vw, 8rem);
  --max:1320px;

  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --disp:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.68;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.018em;line-height:1.1;}
p{margin:0;}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit;}

.shell{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);}
.bay{padding-block:var(--bay);}

/* ---------------------------------------------------------------- shared type */
h2.eyebrow,
h3.eyebrow{
  /* the eyebrow is a real section heading on some sections. these resets keep
     it looking exactly as it did when it was a span. */
  font-weight:700;
  line-height:1.4;
  letter-spacing:.2em;
}
.eyebrow{
  font-family:var(--disp);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cypress);
  display:block;
  margin-bottom:1.4rem;
}
.eyebrow--light{color:rgba(244,237,224,.62);}

.h-sec{font-size:clamp(1.85rem, 3.1vw, 2.85rem);}
.lede{
  font-size:clamp(1rem, 1.15vw, 1.08rem);
  color:var(--cypress);
  line-height:1.72;
}
.lede--light{color:rgba(244,237,224,.76);}

.rule{height:1px;background:var(--line);border:0;margin:0;}
.rule--light{background:var(--line-light);}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--disp);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:1.05rem 1.9rem;
  border:1px solid transparent;
  border-radius:0;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn--solid{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal);}
.btn--solid:hover{background:var(--charcoal-deep);border-color:var(--charcoal-deep);}
.btn--line{border-color:var(--line-strong);color:var(--ink);}
.btn--line:hover{border-color:var(--charcoal);background:rgba(38,41,42,.04);}
.btn--solid-light{background:var(--cream);color:var(--charcoal);border-color:var(--cream);}
.btn--solid-light:hover{background:#fff;border-color:#fff;}
.btn--line-light{border-color:var(--line-light-strong);color:var(--cream);}
.btn--line-light:hover{background:rgba(244,237,224,.10);border-color:var(--cream);}
.btn--sm{padding:.78rem 1.35rem;font-size:.74rem;}

/* Text link with a rule under it, used for the path calls to action */
.tlink{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--disp);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line-strong);
  transition:border-color .18s ease, gap .18s ease;
}
.tlink:hover{border-color:var(--charcoal);gap:1rem;}
.tlink svg{transition:transform .18s ease;}
.tlink:hover svg{transform:translateX(3px);}

/* ================================================================ nav */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  transition:background-color .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--charcoal);
  border-bottom-color:rgba(244,237,224,.12);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  height:88px;
}
.brand{display:flex;align-items:center;gap:.85rem;}
.brand-mark{
  width:44px;height:44px;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:3px;
}
.brand-wm{white-space:nowrap;}
.brand-wm b{
  display:block;
  font-family:var(--disp);
  font-weight:700;
  font-size:1.06rem;
  line-height:1.05;
  color:var(--cream);
  letter-spacing:.01em;
}
.brand-wm span{
  display:block;
  font-size:.575rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(244,237,224,.6);
  margin-top:.28rem;
}
.nav-links{display:none;align-items:center;gap:2.1rem;}
.nav-links a{
  font-size:.86rem;
  font-weight:500;
  color:rgba(244,237,224,.78);
  padding-block:.3rem;
  position:relative;
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--cream);}
.nav-links a.is-here{color:var(--cream);}
.nav-links a.is-here::after{
  content:"";position:absolute;left:0;right:0;bottom:-.2rem;height:2px;background:var(--clay);
}
.nav-side{display:none;align-items:center;gap:1.5rem;}
.nav-tel{font-family:var(--disp);font-size:.86rem;font-weight:600;color:var(--cream);letter-spacing:.02em;white-space:nowrap;}
.nav-mob{display:flex;align-items:center;gap:1rem;}
.nav-mob .nav-tel{font-size:.82rem;}
.nav-toggle{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);
}
.drawer{
  max-height:0;overflow:hidden;
  background:var(--charcoal);
  transition:max-height .3s ease;
}
.drawer.is-open{max-height:520px;}
.drawer-in{padding:.5rem 0 2rem;display:flex;flex-direction:column;}
.drawer-in a:not(.btn){
  padding:.85rem 0;
  border-bottom:1px solid rgba(244,237,224,.1);
  color:rgba(244,237,224,.82);
  font-size:.98rem;
}
.drawer-in .btn{margin-top:1.6rem;align-self:flex-start;}

@media (max-width:480px){
  .nav-in{height:76px;gap:.75rem;}
  .brand-mark{width:38px;height:38px;}
  .brand-wm b{font-size:.95rem;}
  .brand-wm span{font-size:.5rem;letter-spacing:.2em;}
  .nav-mob{gap:.5rem;}
  .nav-mob .nav-tel{font-size:.78rem;}
}

@media (min-width:1080px){
  .nav-links{display:flex;}
  .nav-side{display:flex;}
  .nav-mob{display:none;}
}

/* The desktop navigation switches on at 1080px, but its contents need about
   1122px to fit. Between those two widths the Request Service button ran past
   the viewport and was clipped by the overflow-x:hidden on body, on every
   page of the site.

   The gaps close across that band rather than the breakpoint moving up.
   Raising it to 1122 would hand the hamburger to laptops with room for the
   full navigation, which is the worse trade of the two.

   There was a second, quieter fault alongside it: "Service Area" wrapped onto
   two lines. The links can shrink while the telephone number and the button
   cannot, so the links absorbed the shortfall. That one runs wider than the
   clipping does, from 1080px to about 1230px, so nowrap is set across the
   whole desktop range rather than inside the band. It costs roughly 35px,
   which is why the gaps close as far as they do: below 1180px the two fixes
   only work together.

   Measured at 1080px, the worst case: the nav went from 39px past the
   viewport to 18px clear of it, and Service Area went from two lines to one.
   Above 1180px the spacing returns to normal, so the established desktop
   navigation keeps its proportions everywhere it already fitted. */
@media (min-width:1080px){
  .nav-links a{white-space:nowrap;}
}
@media (min-width:1080px) and (max-width:1180px){
  .nav-in{gap:1.25rem;}
  .nav-links{gap:1.35rem;}
  .nav-side{gap:1rem;}
}

/* ================================================================ photography
   Frames hold the supplied photographs. The source files are never cropped;
   framing is done here with object-fit and object-position so a crop can be
   retuned without touching an image. Aspect ratios are reserved before load.
   ============================================================================ */
.frame{position:relative;margin:0;overflow:hidden;background:var(--sand);}
.frame picture{display:block;width:100%;height:100%;}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* desktop framing, section by section */
.frame--hero img{object-position:50% 58%;}
.frame--property img{object-position:52% 60%;}   /* building and grounds, not sky */
.frame--lawn img{object-position:50% 56%;}       /* house and yard together */
.frame--acreage img{object-position:50% 54%;}    /* keeps horizon and fence line */
.frame--local img{object-position:52% 58%;}      /* the lane leading in */

/* ================================================================ 1. hero */
.hero{position:relative;min-height:clamp(600px, 88vh, 880px);display:flex;align-items:flex-end;}
.hero .frame{position:absolute;inset:0;}
.hero-scrim{
  position:absolute;inset:0;
  background:
    /* directional, anchored to the copy column */
    linear-gradient(100deg,
      rgba(18,20,21,.86) 0%,
      rgba(18,20,21,.70) 27%,
      rgba(18,20,21,.28) 55%,
      rgba(18,20,21,.03) 78%,
      rgba(18,20,21,0) 100%),
    /* a little weight under the buttons only, biased to the lower left */
    linear-gradient(58deg, rgba(18,20,21,.54) 0%, rgba(18,20,21,0) 44%);
}
.hero-in{position:relative;width:100%;padding-block:clamp(3rem,7vw,5.5rem);}
.hero-copy{max-width:60ch;}
.hero h1{
  /* Capped so the headline still wraps inside the 60ch copy column on large
     desktop displays; the previous 5.1rem cap pushed the last line about 55px
     past the column above roughly 1100px. */
  font-size:clamp(2.5rem, 6.2vw, 4.25rem);
  line-height:.97;
  letter-spacing:-.028em;
  text-transform:uppercase;
  /* keeps the three lines evenly set and off a one-word last line */
  text-wrap:balance;
  color:var(--cream);
}
.hero-range{
  margin-top:clamp(1.4rem,2.2vw,2rem);
  font-size:clamp(1.08rem, 1.75vw, 1.5rem);
  font-weight:500;
  line-height:1.42;
  color:rgba(244,237,224,.93);
  max-width:36ch;
}
.hero-area{
  margin-top:1.35rem;
  padding-top:1.35rem;
  border-top:1px solid rgba(244,237,224,.26);
  font-size:.9rem;
  line-height:1.6;
  /* deliberately the quietest line in the hero, but it still has to be
     readable over the photograph, so it sits at .82 rather than .60 */
  color:rgba(244,237,224,.95);
  max-width:44ch;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.9rem,3vw,2.6rem);}

/* ================================================================ 2. what */
.what{background:var(--cream);}
.what-statement{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.35rem, 2.6vw, 2.2rem);
  line-height:1.34;
  letter-spacing:-.016em;
  max-width:29ch;
}
.what-grid{display:grid;gap:clamp(2.2rem,4vw,4.5rem);}
.what-list{border-top:1px solid var(--line-strong);}
.what-list li{border-bottom:1px solid var(--line-strong);}
.what-list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.3;
  color:var(--ink);
  transition:color .15s ease;
}
.what-list a svg{flex-shrink:0;color:var(--cypress);transition:transform .18s ease;}
.what-list a:hover{color:var(--clay);}
.what-list a:hover svg{transform:translateX(3px);}
@media (min-width:900px){
  .what-list{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;border-top:0;}
  .what-list li:nth-child(1),.what-list li:nth-child(2){border-top:1px solid var(--line-strong);}
}
@media (min-width:900px){
  .what-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;}
}

/* ================================================================ 3. paths
   One section, one background, three equal columns. Every column is the same
   width and every figure the same aspect ratio, so aligned image edges are a
   property of the grid rather than something tuned per column. Commercial
   leads by order and wording, never by width. */
/* The pause between the service list and choosing a property type belongs to
   the section that follows it: less room after the list, more before the
   heading, so the whitespace reads as the start of something rather than the
   end of something. The two are consecutive steps in one decision, so the
   pause stays well under a full bay — the tonal step carries the separation
   and the space only has to confirm it. Below 900px the plain .bay rhythm
   takes over and this asymmetry does not apply. */
.what{padding-bottom:calc(var(--bay) * .45);}
.paths{background:var(--cream-lift);padding-top:calc(var(--bay) * .7);}
.paths-intro{max-width:56ch;}
.paths-intro .lede{margin-top:1.2rem;}
.paths-grid{
  display:grid;
  gap:clamp(2.75rem,6vw,3.25rem);
  margin-top:clamp(2.5rem,4.5vw,3.75rem);
}
.path{display:flex;flex-direction:column;}
.path .frame{aspect-ratio:16/10;}
.path-media{display:block;}
.path h3{
  margin-top:1.5rem;
  font-size:clamp(1.35rem,5.6vw,1.6rem);
  line-height:1.16;
}
.path h3 a{transition:color .18s ease;}

/* Each column offers the same destination three ways: the photograph, the
   heading, and the call to action. Hovering any one of them lights all three,
   so the column reads as a single choice without becoming a card. Scoped to
   the links themselves, so crossing the description does nothing. */
@media (hover:hover){
  .path .frame img{transition:transform .5s ease;}
  .path:has(a:hover) .frame img{transform:scale(1.03);}
  .path:has(a:hover) h3 a{color:var(--clay);}
  .path:has(a:hover) .tlink{border-color:var(--charcoal);}
  .path:has(a:hover) .tlink svg{transform:translateX(3px);}
}
@media (prefers-reduced-motion:reduce){
  .path .frame img,
  .path:has(a:hover) .frame img{transition:none;transform:none;}
}
.path-aud{
  margin-top:1.15rem;
  padding-top:1.15rem;
  border-top:1px solid var(--line);
  font-size:.88rem;
  font-weight:500;
  color:var(--ink);
}
.path-copy{margin-top:.9rem;font-size:.97rem;color:var(--cypress);line-height:1.7;}
/* margin-top:auto bottom-aligns the link across all three columns whatever the
   copy runs to; the padding keeps a minimum gap when they run even. */
.path .tlink{margin-top:auto;padding-top:1.75rem;align-self:flex-start;}

/* Three columns start at 1024px, not 900px: below that the columns fall under
   about 260px and the calls to action begin to wrap. Between 900 and 1023 the
   section is one clean stacked column rather than an uneven two-plus-one. */
@media (min-width:1024px){
  .paths-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .path .frame{aspect-ratio:4/3;}
  .path h3{font-size:clamp(1.3rem,1.9vw,1.65rem);}
  /* two lines are reserved for every heading so the hairline above the
     audience lines reads as one continuous rule across the section. */
  .path h3{min-height:2.32em;min-height:2lh;}
}

/* ================================================================ 4. partner */
.partner{background:var(--charcoal);color:var(--cream);}
.partner h2{color:var(--cream);}
.partner-grid{display:grid;gap:clamp(2.4rem,4.5vw,5rem);margin-top:clamp(2rem,3.5vw,3rem);}
.partner-copy p + p{margin-top:1.15rem;}
.principles{border-top:1px solid var(--line-light);}
@media (min-width:620px){
  .principles{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;row-gap:0;border-top:0;}
  .principles li:nth-child(1),.principles li:nth-child(2){border-top:1px solid var(--line-light);}
}
.principles li{padding:1.15rem 0;border-bottom:1px solid var(--line-light);}
.principles li b{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:-.008em;
  color:var(--cream);
  margin-bottom:.45rem;
}
.principles li p{font-size:.92rem;line-height:1.58;color:rgba(244,237,224,.76);}
.partner-close{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:clamp(2rem,3vw,2.5rem);
  border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem;
}
.partner-pull{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.1rem,1.9vw,1.5rem);
  letter-spacing:-.012em;
  color:var(--sand);
  max-width:30ch;
}
@media (min-width:900px){
  .partner-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;}
}

/* ================================================================ 5. local */
.local{background:var(--cream);}
.local-grid{display:grid;gap:clamp(2.2rem,4.5vw,4.5rem);align-items:center;}
.local .frame{aspect-ratio:5 / 4;min-height:0;}
.local-facts{display:flex;flex-wrap:wrap;gap:.5rem 0;margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.local-facts li{font-family:var(--disp);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cypress);display:flex;align-items:center;}
.local-facts li:not(:last-child)::after{content:"";width:3px;height:3px;background:var(--clay);margin-inline:.95rem;}
@media (min-width:900px){
  /* the image carries more of the section's weight here than in How We
     Work above it; the place itself is the point. */
  .local-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}
}

/* ================================================================ 6. request */
.request{background:var(--charcoal-deep);color:var(--cream);}
.request h2{color:var(--cream);font-size:clamp(1.9rem,3.6vw,3.1rem);}
.request-sub{margin-top:1.2rem;max-width:52ch;color:rgba(244,237,224,.74);font-size:1.02rem;}
.picker{
  display:grid;gap:1px;background:var(--line-light);
  border:1px solid var(--line-light);
  margin-top:clamp(2.4rem,4vw,3.2rem);
}
.picker a{
  background:var(--charcoal-deep);
  padding:clamp(1.5rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:.5rem;
  transition:background-color .18s ease;
}
.picker a:hover{background:#242829;}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.picker-head svg{flex-shrink:0;color:rgba(244,237,224,.5);transition:transform .18s ease,color .18s ease;}
.picker a:hover .picker-head svg{transform:translateX(3px);color:var(--cream);}
.picker b{font-family:var(--disp);font-size:1.02rem;font-weight:700;color:var(--cream);}
.picker-desc{font-size:.86rem;color:rgba(244,237,224,.6);line-height:1.55;}
.request-actions{
  margin-top:clamp(2.2rem,3.6vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
}
.request-contact{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;}
.request-contact-label{
  font-size:.86rem;
  color:rgba(244,237,224,.55);
  margin-right:.15rem;
}
.request-contact a{
  font-family:var(--disp);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  color:rgba(244,237,224,.86);
  border-bottom:1px solid rgba(244,237,224,.3);
  padding-bottom:.2rem;
  transition:color .18s ease,border-color .18s ease;
}
.request-contact a:hover{color:var(--cream);border-color:var(--cream);}
.request-contact-divider{color:rgba(244,237,224,.35);}
@media (min-width:760px){ .picker{grid-template-columns:repeat(3,1fr);} }

/* What happens next, carried on the closing call to action of the three
   property-type pages. Same three steps as the Request Service page, said
   shorter: numbered type on the dark band, no cards, and deliberately quieter
   than the button it sits above. */
.next-brief{
  margin-top:clamp(1.6rem,3.2vw,2.6rem);
  padding-top:clamp(1.15rem,2vw,1.7rem);
  border-top:1px solid var(--line-light);
}
.next-brief .eyebrow{margin-bottom:1rem;}
.next-brief-steps{
  /* the site reset covers ul, not ol: clear the UA list indent so the steps
     line up with the heading above them. */
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;counter-reset:nextstep;
}
.next-brief-steps li{
  display:grid;grid-template-columns:1.2rem 1fr;column-gap:.6rem;align-items:start;
  max-width:56ch;
}
.next-brief-steps li::before{
  counter-increment:nextstep;
  content:counter(nextstep);
  font-family:var(--disp);font-weight:700;font-size:.82rem;line-height:1.6;
  color:rgba(244,237,224,.45);
}
.next-brief-steps b{
  display:block;
  font-family:var(--disp);font-weight:600;font-size:.98rem;line-height:1.35;
  color:var(--cream);
}
.next-brief-steps p{
  margin-top:.35rem;font-size:.92rem;line-height:1.6;color:rgba(244,237,224,.66);
}
.next-brief-note{
  margin-top:1.05rem;font-size:.86rem;line-height:1.6;
  color:rgba(244,237,224,.5);max-width:58ch;
}
@media (min-width:900px){
  .next-brief-steps{grid-template-columns:repeat(3,1fr);gap:2rem;}
  .next-brief-steps li{max-width:none;grid-template-columns:1.4rem 1fr;column-gap:.7rem;}
  .next-brief .eyebrow{margin-bottom:1.2rem;}
  .next-brief-note{margin-top:1.4rem;}
}

/* ================================================================ footer */
.foot{background:var(--charcoal);color:var(--cream);padding-block:clamp(3.5rem,6vw,5rem) 2.25rem;}
.foot-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);}
.foot-blurb{margin-top:1.5rem;font-size:.92rem;color:rgba(244,237,224,.58);max-width:34ch;line-height:1.66;}
.foot .foot-h{
  font-family:var(--disp);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(244,237,224,.6);margin:0 0 1.1rem;
}
.foot li{padding:.28rem 0;}
.foot li a,.foot li{font-size:.92rem;color:rgba(244,237,224,.74);}
.foot li a:hover{color:var(--cream);}

/* The email address is one long unbreakable token. Left alone it overflows
   the gutter at 320px, and its min-content width forces the contact grid
   track wider than its 1fr share, squeezing the other three columns. Using
   `anywhere` rather than `break-word` is deliberate: only `anywhere` also
   lowers the min-content contribution, so the footer columns keep their
   intended proportions. Scoped to the email link, so the phone, text and
   navigation links keep breaking on whitespace only. */
.foot li a[href^="mailto:"]{overflow-wrap:anywhere;}
.foot-base{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:1.6rem;
  border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  font-size:.76rem;color:rgba(244,237,224,.55);
}
@media (min-width:820px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr;} }

/* Services band. The seven service pages, exposed on every page without
   turning the footer into a sitemap wall: one heading and one wrapping row
   under the same hairline the base already uses, rather than a fifth column
   the 820px grid has no room for. Below 820px it stacks like every other
   footer group and inherits the same touch target padding. */
.foot-services{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:1.6rem;
  border-top:1px solid var(--line-light);
}
/* From 820px the seven run as one wrapping line rather than a column. The dot
   separator is the same one .local-facts already uses, and it is what makes a
   wrapped line read as one continuous run rather than a ragged grid. */
@media (min-width:820px){
  .foot-services ul{display:flex;flex-wrap:wrap;}
  .foot-services li{display:flex;align-items:center;}
  .foot-services li:not(:last-child)::after{
    content:"";width:3px;height:3px;flex:none;
    background:rgba(244,237,224,.38);
    margin-inline:.85rem;
  }
}
/* From 1160px the band borrows the grid's own track set: heading in the first
   column, the run across the other three, so the two bands share one set of
   column edges and the run is short enough to break 3 and 4 rather than 6 and
   1. 1160 and not 820, for two measured reasons:

     - below about 1090 the email address in Contact is wider than its 1fr
       share and widens that track, so .foot-grid stops resolving to a true
       1.7:1:1:1 and a copy of the template sits up to 18px off;
     - the shortened run only breaks cleanly once it is about 680px wide, which
       it reaches at 1160. At 1100 it is 640px and breaks 3, 3 and 1, while the
       full width run at that size still breaks 5 and 2.

   So below 1160 the run keeps the full width of the shell, and above it the
   grid tracks take over. Both are checked at 320, 375, 430, 768, 1024, 1440
   and 1920. */
@media (min-width:1160px){
  .foot-services{
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr 1fr;
    gap:clamp(2rem,4vw,3.5rem);
  }
  .foot-services .foot-h{grid-column:1;margin-bottom:0;line-height:1.9;}
  .foot-services ul{grid-column:2 / -1;}
}
/* the band's own hairline already divides the two, so the base needs less air
   above it here than when it follows the grid directly */
.foot-services + .foot-base{margin-top:clamp(1.6rem,2.6vw,2.25rem);}

/* ================================================================ motion */
.js .rise{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease;}
.rise.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Interior pages. Variants of the components above, not new components.
   Nothing here introduces a colour, typeface, radius, shadow or motion that
   the homepage does not already use.
   ========================================================================== */

/* Interior page rhythm. Section gaps on these pages measured almost the same
   as the homepage's, but they wrap lighter sections, so the same whitespace
   reads as more empty. --bay is redefined at about three quarters for the
   interior pages only, which scales every .bay section and the .what closing
   gap together without touching the global token or the homepage. Below 900px
   the mobile .bay rule takes over and this has no effect, so the phone keeps
   its own more generous rhythm. */
.page-commercial,
.page-residential,
.page-acreage,
.page-mowing,
.page-acreage-mowing,
.page-property-cleanup,
.page-debris-removal,
.page-exterior-washing,
.page-storm-cleanup,
.page-recurring-maintenance,
.page-hauling{--bay:clamp(3.4rem, 6.4vw, 6rem);}

/* Interior hero: same treatment as the homepage, one step down in scale.
   The homepage h1 stays the largest statement on the site. */
.hero--page{min-height:clamp(460px, 62vh, 640px);}
/* The commercial photograph is considerably brighter than the homepage's, so
   the scrim holds its density further across the frame and the eyebrow runs at
   full cream rather than the 62% used on charcoal. Measured, not eyeballed:
   without this the eyebrow and parts of the headline fall under 3:1. */
.hero--page .hero-scrim{
  background:
    linear-gradient(100deg,
      rgba(18,20,21,.93) 0%,
      rgba(18,20,21,.86) 32%,
      rgba(18,20,21,.64) 56%,
      rgba(18,20,21,.26) 78%,
      rgba(18,20,21,0) 100%),
    linear-gradient(58deg, rgba(18,20,21,.54) 0%, rgba(18,20,21,0) 44%);
}
.hero--page .eyebrow--light{color:var(--cream);}
/* Interior headlines run longer than the homepage's and uppercase display type
   cannot hyphenate gracefully, so the scale is set by the longest single word
   ("STRAIGHTFORWARD.") rather than by the homepage's. The homepage h1 stays
   the largest statement on the site, which is the correct hierarchy anyway.
   break-word is a safety net only; at these sizes nothing reaches it. */
.hero--page h1{font-size:clamp(1.5rem, 7vw, 2.8rem);overflow-wrap:break-word;
  /* interior headlines keep the approved greedy line breaks; balancing is a
     homepage-hero decision only */
  text-wrap:wrap;}
.hero--page .hero-copy{max-width:70ch;}
/* this headline's first line needs 725px against a 713px box, so it broke to
   three lines over 12px. Widened just enough here; the supporting paragraph
   keeps its own 52ch measure, so only the headline moves. */
.page-debris-removal .hero--page .hero-copy{max-width:74ch;}
.hero--page .eyebrow{margin-bottom:1.1rem;display:block;}
.hero--page .hero-range{max-width:52ch;}
/* 3:2 source in a much wider hero band, so the crop is vertical. Biased up to
   hold the building and the beds rather than filling with foreground lawn. */
.frame--commercial img{object-position:50% 40%;}
/* 16:9 subdivision frame in a wide hero band, so the crop is vertical and
   about a third of the height goes. Biased down from the old 46%, which suited
   the previous 4:3 source, to trim the flat sky and keep the house front, the
   beds and the mown verge in view. */
.frame--mowing img{object-position:50% 54%;}
/* 16:9 acreage frame in a wide hero band, so the crop is vertical. Held at the
   60% the previous source used: it still trims the flat sky and keeps the barn,
   the tree line and the broad mown field, so no correction was needed. */
.frame--acreage-mowing img{object-position:50% 60%;}
/* 16:9 frame in a wide hero band, so a third of the height goes. Held at the
   52% the previous panoramic source used: it already keeps the roofline, the
   cleared beds, the walkway and the swept sidewalk, so no correction was
   needed. */
.frame--property-cleanup img{object-position:50% 52%;}
/* 5:4 source in a wide hero band. Biased to keep the drive and the verges. */
.frame--debris-removal img{object-position:52% 56%;}
/* 16:9 source in a wide hero band, so less height is cropped than the 3:2
   stand-in needed and the old 62% pushed too far into the foreground. Eased
   back to 52%, which keeps the roofline whole while still holding the washed
   driveway, walkway and entry, the surfaces this page is about. */
.frame--exterior-washing img{object-position:50% 52%;}
/* Already a wide 2.33:1 composition. Biased UP, unlike the Property Cleanup
   crop of the same stand-in source, so this hero holds the weather and the
   treeline rather than the palmetto ground. The two pages cross link, so the
   crops are deliberately pulled apart until real photography arrives. */
.frame--storm-cleanup img{object-position:50% 34%;}
/* 16:9 source in a wide hero band, so only about a fifth of the height is
   cropped. Biased up slightly to hold the roofline, the planting beds and the
   oak canopy rather than filling the lower band with empty lawn and paving. */
.frame--recurring-maintenance img{object-position:50% 40%;}
/* already a wide 2.67:1 composition, so the hero crop barely moves; a touch
   up to keep the roofline and the oak canopy rather than foreground lawn. */
.frame--residential img{object-position:50% 44%;}
/* Both residential figures run at the sources' own 3:2, so the two
   photographs match each other exactly at every width and neither is cropped.
   Scoped, so the homepage Local figure keeps its 5:4. */
.page-residential .local .frame,
.transition .frame{aspect-ratio:3 / 2;min-height:0;}

/* Acreage carries more horizontal weight than the other interior pages: its
   two section figures run wider than Residential's 3:2, which suits open
   ground and a distant tree line. Both match each other exactly. */
.page-acreage .local .frame,
.page-acreage .tone-lift .frame{aspect-ratio:16 / 10;min-height:0;}
.frame--acreage-hero img{object-position:50% 56%;}    /* horizon and fence line, not sky */
.frame--acreage-behind img{object-position:50% 58%;}
/* ^ Inert with the current source, and deliberately kept. That photograph is
   already 16:10, which is exactly this frame's ratio, so cover crops nothing
   and the position has nothing to act on. The rule stays so a future source of
   a different shape still lands on the ground rather than the sky. */
.frame--acreage-ongoing img{object-position:52% 56%;} /* the drive leading in */
/* the schedule list has no descriptions, so it sits closer to the block above */
.aud-list--sched{margin-top:clamp(2.2rem, 3.6vw, 2.9rem);}
.frame--regular-care img,
.frame--vacant-rental img{object-position:50% 50%;}
/* 2:1 source in a 3:2 figure, so the crop is horizontal. Biased slightly left
   to keep the building, beds and trees with the parking area still in frame. */
.local .frame--vacant{aspect-ratio:3 / 2;}
.frame--vacant img{object-position:45% 50%;}

/* Audience list. The .what-list rhythm without the links, since an audience
   is not a destination. */
.aud-list{border-top:1px solid var(--line-strong);}
.aud-list li{
  border-bottom:1px solid var(--line-strong);
  padding:1rem 0;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.05rem, 1.5vw, 1.28rem);
  line-height:1.3;
}
@media (min-width:900px){
  .aud-list{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;border-top:0;}
  .aud-list li:nth-child(1),.aud-list li:nth-child(2){border-top:1px solid var(--line-strong);}
}

/* What we handle. Term, outcome, and a link onward to the service page. */
.handle{background:var(--cream-lift);}
.handle-intro{max-width:46ch;}
/* this page's What We Handle heading runs longer, and at the shared measure it
   broke to five lines with an orphan. Widened here only, so the locked
   Commercial heading keeps the wrap it was approved with. */
.page-residential .handle-intro,
.page-acreage .handle-intro,
.page-mowing .handle-intro,
.page-acreage-mowing .handle-intro,
.page-property-cleanup .handle-intro,
.page-debris-removal .handle-intro,
.page-exterior-washing .handle-intro,
.page-storm-cleanup .handle-intro,
.page-recurring-maintenance .handle-intro,
.page-service-area .handle-intro,
.page-hauling .handle-intro{max-width:60ch;}

/* Standing measure for a lede carried inside a section intro. Matches the
   value the earlier service-page intros set inline. */
.handle-intro .lede{margin-top:1.3rem;}

/* Closing line under a scope list: what is useful to send, and the way in.
   The list already ends on its own hairline, so nothing is ruled off twice. */
.scope-close{
  margin-top:clamp(1.7rem,2.6vw,2.3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem 2rem;
}
.scope-close p{font-size:.94rem;line-height:1.65;color:var(--cypress);max-width:56ch;}

/* Vacant, rental and transition properties. One tonal step off the upkeep
   section above so the two image led blocks read as separate compositions. */
.transition,
.tone-lift{background:var(--cream-lift);}
.transition-note{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:.9rem;
  line-height:1.65;
  color:var(--cypress);
  max-width:48ch;
}
/* Copy first, image second. The wider column follows the image rather than
   leading, so both photographs on this page render at the same width. */
@media (min-width:900px){
  /* copy runs longer here than the figure is tall, so the photograph aligns to
     the top of the copy rather than floating centred against it */
  .local-grid--copy-first{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    align-items:start;
  }
}
.needs{
  border-top:1px solid var(--line-strong);
  margin-top:clamp(2.4rem,4vw,3.25rem);
}
.needs li{padding:1.3rem 0;border-bottom:1px solid var(--line-strong);}
.needs li a,
.needs li b{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  line-height:1.3;
  color:var(--ink);
}
.needs li a svg{flex-shrink:0;color:var(--cypress);transition:transform .18s ease;}
.needs li a{transition:color .15s ease;}
.needs li a:hover{color:var(--clay);}
.needs li a:hover svg{transform:translateX(3px);}
.needs li p{
  margin-top:.5rem;
  font-size:.94rem;
  line-height:1.65;
  color:var(--cypress);
  max-width:48ch;
}
@media (min-width:900px){
  .needs{display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;border-top:0;}
  .needs li:nth-child(1),.needs li:nth-child(2){border-top:1px solid var(--line-strong);}
}
/* An inline text link inside body copy. Not a call to action: it borrows the
   hairline vocabulary already used for rules and underlines rather than
   introducing a button, chip or arrow. */
.ilink{
  color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  transition:color .15s ease, border-color .15s ease;
}
.ilink:hover{color:var(--clay);border-bottom-color:var(--clay);}

/* A supporting note closing out a section: a hairline, a small heading and a
   short passage, set in the type already used on the page. Deliberately not a
   card, panel, box or callout — the rule and the spacing carry it. */
.section-note{
  margin-top:clamp(2rem, 3.2vw, 2.75rem);
  padding-top:clamp(1.5rem, 2.2vw, 1.9rem);
  border-top:1px solid var(--line);
  max-width:76ch;
}
.section-note h3{
  font-size:clamp(1.04rem, 1.35vw, 1.16rem);
  line-height:1.35;
  letter-spacing:-.008em;
}
.section-note p{
  margin-top:.8rem;
  font-size:.95rem;
  line-height:1.7;
  color:var(--cypress);
}

/* the use case list carries no links, so the row title is a plain term */
.needs--plain{margin-top:clamp(2.4rem,4vw,3.25rem);}

/* Three property types read as one closed set rather than an open-ended list,
   so they run three-up instead of falling into the uneven two-plus-one that
   .needs's two columns would give three items. The three-up waits for 1024px:
   between 900 and 1024 three columns leave about 250px each, which is too
   narrow for the descriptions, so the rows stay stacked and full width there.
   .needs drops the list's own top rule at 900px and puts it on the first two
   items instead, so each arrangement below restores whichever borders that
   leaves wrong. No new colour, type or spacing token is introduced. */
@media (min-width:900px) and (max-width:1023.98px){
  .needs--three{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-strong);}
  .needs--three li:nth-child(2){border-top:0;}
}
@media (min-width:1024px){
  .needs--three{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,3vw,3.5rem);}
  .needs--three li:nth-child(3){border-top:1px solid var(--line-strong);}
}
/* This list sits under a section that already carries an image and two
   paragraphs, so it runs tighter than the What We Handle service list above.
   Scoped to the modifier, so that list is untouched, and to 900px and up, so
   the phone keeps its comfortable row spacing. */
@media (min-width:900px){
  .needs--plain{margin-top:clamp(1.75rem, 2.8vw, 2.25rem);}
  .needs--plain li{padding:1rem 0;}
}
.handle-close{
  margin-top:clamp(2.2rem,3.4vw,3rem);
  padding-top:clamp(1.6rem,2.4vw,2rem);
  border-top:1px solid var(--line);
  font-size:1rem;
  line-height:1.72;
  color:var(--cypress);
  max-width:70ch;
}

/* How Pinewood works, on a warm ground rather than charcoal, so the page does
   not close on two dark sections running together. */
.method{background:var(--sand);color:var(--ink);}
.method h2{color:var(--ink);}
.method .partner-close{border-top-color:rgba(38,41,42,.18);}
.method .partner-pull{color:var(--ink);}
.principles--light{border-top-color:rgba(38,41,42,.18);}
.principles--light li{border-bottom-color:rgba(38,41,42,.18);}
.principles--light li b{color:var(--ink);}
.principles--light li p{color:var(--cypress);}
@media (min-width:620px){
  .principles--light li:nth-child(1),
  .principles--light li:nth-child(2){border-top-color:rgba(38,41,42,.18);}
}

/* How Pinewood Works ran taller than its neighbours, so this section alone is
   condensed: less section padding, a shorter drop to the two columns, tighter
   principle rows, and less air before the closing line. Scoped to .method and
   to 900px and up, so no other section moves and the phone keeps the roomier
   rhythm it already had. */
@media (min-width:900px){
  .method{padding-block:clamp(2.5rem, 4.6vw, 4.3rem);}
  .method .partner-grid{margin-top:clamp(1.5rem, 2vw, 1.75rem);}
  .method .principles li{padding:.75rem 0;}
  .method .partner-close{
    margin-top:clamp(1.6rem, 2.3vw, 2rem);
    padding-top:clamp(1.3rem, 1.9vw, 1.6rem);
  }
}

/* Service area, carried inside the closing call to action rather than taking
   a section of its own. */
.request-area{
  margin-top:clamp(2.2rem,3.4vw,2.9rem);
  padding-top:clamp(1.5rem,2.2vw,1.9rem);
  border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
}
.request-area p{font-size:.94rem;line-height:1.6;color:rgba(244,237,224,.7);max-width:56ch;}
.request .tlink{border-bottom-color:rgba(244,237,224,.32);}
.request .tlink svg{color:rgba(244,237,224,.7);}
.request .tlink:hover{border-bottom-color:var(--cream);}

/* ==========================================================================
   Intentional mobile design (not a vertical stack of the desktop layout).
   Shorter hero, tighter crops, and proportional type so the page stays
   scannable rather than becoming a wall of content.
   ========================================================================== */
@media (max-width:899px){

  /* Hero: shorter, image still clearly visible, copy still leads */
  .hero{min-height:min(76vh, 620px);}
  /* the crop shifts left so the drive and the board fence stay in frame */
  .frame--hero img{object-position:32% 50%;}
  .hero-in{padding-block:2.25rem 2.5rem;}
  /* the 320px floor is set by the longest word pair in the headline, which
     has to clear the gutter with room to spare rather than sit flush */
  .hero h1{font-size:clamp(1.95rem, 9vw, 2.75rem);line-height:1.02;}
  /* interior headlines carry longer words than "properties." and must stay
     inside the gutter at 320px, where the box is only 280px wide */
  .hero--page h1{font-size:clamp(1.4rem, 7.2vw, 2.6rem);}
  /* the copy sits over the brightest part of the commercial photograph here */
  .hero--page .hero-scrim{
    background:
      linear-gradient(180deg,
        rgba(18,20,21,.74) 0%,
        rgba(18,20,21,.66) 20%,
        rgba(18,20,21,.74) 52%,
        rgba(18,20,21,.88) 100%);
  }
  .hero--page .hero-range{max-width:38ch;}
  .hero-range{margin-top:1rem;font-size:clamp(1rem, 4.2vw, 1.18rem);max-width:30ch;}
  .hero-area{margin-top:1rem;padding-top:1rem;font-size:.82rem;max-width:38ch;}
  .hero-cta{margin-top:1.6rem;gap:.65rem;}
  .hero-cta .btn{flex:1 1 auto;min-width:0;padding-inline:1.1rem;}
  /* keep the scrim readable when the copy sits over a lighter photo */
  .hero-scrim{
    background:
      linear-gradient(180deg,
        rgba(18,20,21,.58) 0%,
        rgba(18,20,21,.24) 20%,
        rgba(18,20,21,.64) 52%,
        rgba(18,20,21,.86) 100%);
  }

  /* Section rhythm: tighter but still generous */
  .bay{padding-block:clamp(3.25rem, 11vw, 4.5rem);}

  .what-statement{font-size:clamp(1.25rem, 5.4vw, 1.6rem);max-width:100%;}
  .what-list a{font-size:1.02rem;padding:.9rem 0;}

  /* Service paths: one stacked column, identical order and spacing each time */
  .path .tlink{padding-top:1.6rem;font-size:.76rem;}

  /* How we work: keep the principles list scannable, not a long stack */
  .partner-grid{margin-top:1.75rem;}
  .principles li{padding:1rem 0;}
  .principles li b{font-size:1rem;}
  .principles li p{font-size:.88rem;}
  .partner-close{flex-direction:column;align-items:flex-start;gap:1.4rem;}
  .partner-pull{font-size:1.12rem;}

  /* Local: image cropped wide so the section does not run long */
  .local .frame{min-height:0;aspect-ratio:4/3;}
  .local-facts{margin-top:1.5rem;padding-top:1.15rem;}

  /* Request: picker reads as a clear three way choice */
  .request h2{font-size:clamp(1.7rem, 7.5vw, 2.2rem);}
  .picker{margin-top:1.9rem;}
  .picker a{padding:1.15rem 1.25rem;}
  .request-actions{margin-top:1.9rem;flex-direction:column;align-items:stretch;gap:1.25rem;}
  .request-actions .btn{width:100%;}
  .request-contact{gap:.4rem 1.25rem;}

  .foot{padding-block:3rem 1.75rem;}
  .foot-base{flex-direction:column;gap:.5rem;}
}

@media (max-width:420px){
  .what-list a{font-size:.96rem;}
  .btn{padding:.95rem 1.25rem;font-size:.76rem;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
}

/* ==========================================================================
   Narrow width corrections
   ========================================================================== */

/* The header phone collapses to an icon before it can push the bar wide. */
.nav-mob .nav-tel{display:inline-flex;align-items:center;gap:.45rem;}
.nav-mob .tel-icon{display:none;}

@media (max-width:899px){
  /* Comfortable tap targets on touch screens */
  .tlink{padding-block:.55rem .8rem;}
  .request-contact a{padding-block:.55rem;}
  .picker a{min-height:64px;}

  /* Long button labels wrap instead of forcing their container wide */
  .btn{white-space:normal;text-align:center;}
  .partner-close > *{max-width:100%;}
}

@media (max-width:430px){
  /* Icon only call control: still one tap, no longer competing for bar width */
  .nav-mob .nav-tel{
    width:44px;height:44px;justify-content:center;gap:0;
    border:1px solid rgba(244,237,224,.28);
  }
  .nav-mob .tel-icon{display:block;}
  .nav-mob .tel-text{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .nav-in{gap:.5rem;}
}

/* ==========================================================================
   Target sizes.
   Desktop clears the 24px WCAG 2.5.8 minimum. Touch clears 44px.
   ========================================================================== */
.foot li a{display:inline-block;padding-block:.28rem;}
.request-contact a{display:inline-block;}

@media (max-width:899px){
  .tlink{padding-block:.6rem .85rem;}
  .request-contact a{padding-block:.7rem;}
  .foot li{padding:0;}
  .foot li a{padding-block:.7rem;}
}

/* ==========================================================================
   Keyboard access. Visible focus everywhere, and a skip link that stays
   hidden until it is focused.
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
}
.nav :focus-visible,
.partner :focus-visible,
.request :focus-visible,
.foot :focus-visible,
.hero :focus-visible{
  outline-color:var(--cream);
}
main:focus{outline:none;}

.skip{
  position:absolute;
  left:1rem;
  top:-100px;
  z-index:200;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--disp);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.85rem 1.4rem;
  border:1px solid var(--charcoal);
  transition:top .18s ease;
}
.skip:focus{top:1rem;}

/* ==========================================================================
   The closed mobile drawer must not hold keyboard focus. Without this, a
   keyboard user on desktop tabs into invisible links after the nav.
   ========================================================================== */
.drawer{
  visibility:hidden;
  transition:max-height .28s ease, visibility 0s linear .28s;
}
.drawer.is-open{
  visibility:visible;
  transition:max-height .28s ease, visibility 0s linear 0s;
}
@media (min-width:1080px){
  /* the full nav is visible at this width, so the drawer is not needed at all */
  .drawer{display:none;}
}

/* ==========================================================================
   Logo. The nav carries the badge with the wordmark set in type so the bar
   keeps its proportions. The footer carries the full lockup, reversed to
   cream so it sits correctly on charcoal.
   ========================================================================== */
.brand-mark img{width:100%;height:100%;object-fit:contain;}

.foot-logo{
  width:min(232px, 76%);
  height:auto;
  margin-bottom:.25rem;
}
@media (max-width:899px){
  .foot-logo{width:min(210px, 62%);}
}

/* ==========================================================================
   REQUEST SERVICE PAGE
   Everything below is scoped to .page-request-service or to class names that
   exist on no other page, so the locked pages are untouched by it.
   ========================================================================== */

/* This is the one page with no hero photograph, so there is no dark ground
   for the transparent nav to sit on. Hold it solid from the first pixel and
   push the intro clear of it. Scoped to this page only. */
.page-request-service .nav{
  background:var(--charcoal);
  border-bottom-color:rgba(244,237,224,.12);
}
.page-request-service{--bay:clamp(3.4rem, 6.4vw, 6rem);}

.rs-intro{
  padding-top:calc(88px + clamp(2.75rem, 6vw, 5rem));
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
  border-bottom:1px solid var(--line);
}
@media (max-width:480px){
  .rs-intro{padding-top:calc(76px + clamp(2.25rem, 8vw, 3.25rem));}
}
.rs-intro h1{
  font-size:clamp(2.1rem, 5vw, 3.5rem);
  line-height:1.02;
  letter-spacing:-.026em;
  text-transform:uppercase;
  overflow-wrap:break-word;
}
.rs-intro .lede{margin-top:clamp(1.2rem, 2vw, 1.6rem);max-width:58ch;}

/* -------------------------------------------------------------- the form */
.rs-form-bay{background:var(--cream-lift);}
.rs-form{max-width:820px;}
.rs-req-note{
  font-size:.88rem;
  line-height:1.6;
  color:var(--cypress);
  margin-bottom:clamp(1.8rem, 3vw, 2.4rem);
}
.req-mark{color:var(--clay);font-weight:700;}

.rs-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem, 2.4vw, 1.9rem);}
@media (min-width:760px){
  .rs-grid{grid-template-columns:1fr 1fr;column-gap:clamp(1.6rem, 2.6vw, 2.25rem);}
  .rs-field--full{grid-column:1 / -1;}
  /* Paired fields do not all carry helper text, so their labels are different
     heights. Push the control to the bottom of its grid row and the inputs
     line up across the pair instead of stepping. */
  .rs-field > .rs-input,
  .rs-field > .rs-select{margin-top:auto;}
}

.rs-field{display:flex;flex-direction:column;min-width:0;}
.rs-label{
  font-family:var(--disp);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.005em;
  line-height:1.3;
  color:var(--ink);
  margin-bottom:.5rem;
}
.rs-help{
  font-size:.85rem;
  line-height:1.55;
  color:var(--cypress);
  margin-bottom:.55rem;
}

.rs-input,
.rs-select,
.rs-textarea{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:.85rem 1rem;
  transition:border-color .15s ease, background-color .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.rs-textarea{min-height:9.5rem;resize:vertical;}
.rs-input:hover,
.rs-select:hover,
.rs-textarea:hover{border-color:var(--cypress);}
.rs-input:focus-visible,
.rs-select:focus-visible,
.rs-textarea:focus-visible{
  outline:2px solid var(--charcoal);
  outline-offset:2px;
  border-color:var(--charcoal);
  background:#fff;
}
/* Placeholder contrast. The fields sit on --cream, not white, so the previous
   #8A857A measured 3.16:1 against their own background and failed WCAG 2.1
   AA for normal text. #6A6559 measures 4.98:1 on --cream and 5.80:1 on the
   white focus background, while staying clearly lighter than entered text
   (--ink, 13.5:1) so it still reads as a placeholder rather than a
   value. The Tell Us About the Property guidance is carried here, so it has
   to be legible. */
.rs-input::placeholder,
.rs-textarea::placeholder{color:#6A6559;}

/* Native select needs its own arrow once appearance is stripped. Drawn as a
   background gradient pair so no image asset or icon font is involved. */
.rs-select{
  padding-right:2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cypress) 50%),
    linear-gradient(135deg, var(--cypress) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 1px),
    calc(100% - .8rem)  calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* Netlify honeypot. Hidden by moving it out of view rather than with
   display:none, because some spam bots skip anything that is display:none and
   the field then never does its job. aria-hidden and tabindex="-1" in the
   markup keep it away from real customers using a keyboard or screen reader. */
.rs-honeypot{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
/* The wrapper clips it, but constrain the label and input too so their boxes
   never extend past the viewport on a narrow screen. */
.rs-honeypot label,
.rs-honeypot input{display:block;width:1px;max-width:1px;height:1px;padding:0;border:0;}

/* Three optional photo inputs, side by side where there is room. One field per
   photo because Netlify Forms carries a single file per file field. */
.rs-photo-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
@media (min-width:900px){
  .rs-photo-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:1rem;}
}
.rs-photo{display:flex;flex-direction:column;min-width:0;}
.rs-photo-label{
  font-family:var(--sans);
  font-weight:500;
  font-size:.85rem;
  line-height:1.3;
  color:var(--cypress);
  margin-bottom:.45rem;
}

/* Optional photo upload. A native file input, styled by dressing the
   file-selector button and giving the control the same square frame as every
   other field. No drop zone, no library, no shadow. */
.rs-file{
  width:100%;
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.5;
  color:var(--cypress);
  background:var(--cream);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:.7rem .8rem;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.rs-file:hover{border-color:var(--cypress);}
.rs-file:focus-visible{
  outline:2px solid var(--charcoal);
  outline-offset:2px;
  border-color:var(--charcoal);
}
.rs-file::file-selector-button{
  font-family:var(--disp);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream);
  background:var(--charcoal);
  border:1px solid var(--charcoal);
  border-radius:0;
  padding:.68rem 1.15rem;
  margin:0 .9rem 0 0;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}
.rs-file:hover::file-selector-button{background:var(--charcoal-deep);border-color:var(--charcoal-deep);}
.rs-filecount{
  margin-top:.6rem;
  font-size:.88rem;
  line-height:1.55;
  color:var(--cypress);
  overflow-wrap:anywhere;
}
.rs-filecount:empty{display:none;}
/* Three-up on desktop leaves each control narrow, and one-column on mobile
   is narrow again, so stack the button above the file name at both. The only
   width where they sit side by side is the tablet band. */
@media (max-width:520px), (min-width:900px){
  .rs-file{padding:.8rem;}
  .rs-file::file-selector-button{display:block;width:100%;margin:0 0 .7rem 0;}
}
/* The error under the photo fieldset needs the same left-rule treatment the
   inputs get, since the fieldset itself carries the invalid class. */
.rs-fieldset.is-invalid .rs-photo-grid{
  border-left:3px solid #8C3A24;
  padding-left:.75rem;
}

/* Radio groups. Native controls kept, only the surround is styled. */
.rs-fieldset{border:0;margin:0;padding:0;min-width:0;}
.rs-legend{
  padding:0;
  font-family:var(--disp);
  font-weight:600;
  font-size:.86rem;
  line-height:1.3;
  color:var(--ink);
  margin-bottom:.6rem;
}
.rs-radios{display:flex;flex-wrap:wrap;gap:.55rem .5rem;}
.rs-radio{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem .95rem;
  border:1px solid var(--line-strong);
  background:var(--cream);
  font-size:.95rem;
  line-height:1.3;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.rs-radio:hover{border-color:var(--cypress);}
.rs-radio input{
  width:1.05rem;height:1.05rem;margin:0;flex-shrink:0;
  accent-color:var(--charcoal);cursor:pointer;
}
.rs-radio:has(input:checked){border-color:var(--charcoal);background:var(--sand);}
.rs-radio:has(input:focus-visible){outline:2px solid var(--charcoal);outline-offset:2px;}

/* Validation. Never colour alone: the message text carries the meaning and
   the field gains a left rule as well as a border change. */
.rs-error{
  display:none;
  margin-top:.5rem;
  font-size:.88rem;
  line-height:1.5;
  color:#8C3A24;
}
.rs-field.is-invalid .rs-error,
.rs-fieldset.is-invalid .rs-error{display:block;}
.rs-field.is-invalid .rs-input,
.rs-field.is-invalid .rs-select,
.rs-field.is-invalid .rs-textarea{
  border-color:#8C3A24;
  border-left-width:3px;
  padding-left:calc(1rem - 2px);
}
.rs-fieldset.is-invalid .rs-radios{
  border-left:3px solid #8C3A24;
  padding-left:.75rem;
}

/* -------------------------------------------------------------- submit */
.rs-submit{
  margin-top:clamp(2.2rem, 3.6vw, 3rem);
  padding-top:clamp(1.6rem, 2.4vw, 2rem);
  border-top:1px solid var(--line);
}
.rs-expect{
  margin-top:1.25rem;
  font-size:.92rem;
  line-height:1.65;
  color:var(--cypress);
  max-width:62ch;
}
.rs-terms{
  margin-top:.9rem;
  font-size:.86rem;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:66ch;
}

/* Submission outcome messages. Hidden until the script reveals one. */
.rs-outcome{display:none;margin-top:clamp(1.8rem, 3vw, 2.4rem);}
.rs-outcome.is-shown{display:block;}
.rs-outcome h2{font-size:clamp(1.45rem, 2.4vw, 1.9rem);line-height:1.15;}
.rs-outcome p{margin-top:.85rem;font-size:1rem;line-height:1.7;color:var(--cypress);max-width:60ch;}
.rs-outcome .rs-outcome-note{margin-top:.8rem;font-size:.88rem;color:var(--ink-soft);}
.rs-outcome--ok{border-top:2px solid var(--olive);padding-top:clamp(1.5rem,2.2vw,1.9rem);}
.rs-outcome--fail{border-top:2px solid var(--clay);padding-top:clamp(1.5rem,2.2vw,1.9rem);}
.rs-outcome a{color:var(--ink);border-bottom:1px solid var(--line-strong);}
.rs-outcome a:hover{color:var(--clay);border-bottom-color:var(--clay);}
/* Same reason as the footer: the email address is a single unbreakable token
   and spills past the panel on narrow phones. Scoped to the email link so the
   surrounding sentence keeps wrapping on whitespace. */
.rs-outcome p a[href^="mailto:"]{overflow-wrap:anywhere;}

/* -------------------------------------------------- what happens next */
.rs-steps{
  margin-top:clamp(2.4rem, 4vw, 3.25rem);
  border-top:1px solid var(--line-strong);
  counter-reset:rsstep;
}
.rs-steps li{
  border-bottom:1px solid var(--line-strong);
  padding:1.4rem 0;
  display:grid;
  grid-template-columns:2.5rem 1fr;
  column-gap:1rem;
  align-items:start;
}
.rs-steps li::before{
  counter-increment:rsstep;
  content:counter(rsstep);
  font-family:var(--disp);
  font-weight:700;
  font-size:.9rem;
  line-height:1.5;
  color:var(--clay);
  letter-spacing:.04em;
  padding-top:.1rem;
}
.rs-steps b{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  line-height:1.3;
  color:var(--ink);
}
.rs-steps p{margin-top:.5rem;font-size:.94rem;line-height:1.65;color:var(--cypress);max-width:52ch;}
@media (min-width:900px){
  .rs-steps li{grid-template-columns:3rem 1fr;padding:1.5rem 0;}
}

/* ------------------------------------------------- service area closing */
.rs-area-note{
  margin-top:clamp(1.6rem, 2.4vw, 2rem);
  padding-top:clamp(1.2rem, 1.8vw, 1.5rem);
  border-top:1px solid var(--line-light);
  font-size:.94rem;
  line-height:1.65;
  color:rgba(244,237,224,.78);
  max-width:56ch;
}

/* ==========================================================================
   ABOUT PAGE
   Scoped to .page-about or to .ab-* class names that exist on no other page.
   No new colour, typeface, radius, shadow or motion is introduced: every
   section below is a variant of a component the site already uses.
   ========================================================================== */

/* Like Request Service, About carries no hero photograph, so the transparent
   nav has no dark ground to sit on. Hold it solid from the first pixel and
   push the hero clear of it. Scoped to this page. */
.page-about .nav,
.page-service-area .nav,
.page-404 .nav{
  background:var(--charcoal);
  border-bottom-color:rgba(244,237,224,.12);
}
.page-about,
.page-service-area,
.page-404{--bay:clamp(3.4rem, 6.4vw, 6rem);}

/* ------------------------------------------------------------------ hero */
.ab-hero{
  padding-top:calc(88px + clamp(3rem, 7vw, 6rem));
  padding-bottom:clamp(3rem, 6vw, 5rem);
  border-bottom:1px solid var(--line);
}
@media (max-width:480px){
  .ab-hero{padding-top:calc(76px + clamp(2.5rem, 9vw, 3.75rem));}
}
/* Uppercase display type cannot hyphenate, so the floor is set by the longest
   single word, measured rather than guessed. Here that is "STANDARD" and
   "PROPERTY", both eight characters, needing about 155px of the 280px box at
   320px, so 1.95rem clears it comfortably and the headline lands in three
   lines there and two from tablet up.

   The ceiling is set by length. This headline is 34 characters against the 55
   the previous one ran to, and a shorter line can carry more size before it
   starts to sprawl: at 3.4rem it made a 115px block in a 1320px shell, which
   read light for a masthead. 3.9rem takes that to 132px and still breaks
   "A BETTER STANDARD / OF PROPERTY CARE." in two, while staying under the
   homepage's 4.25rem so the hierarchy between the two pages holds. 404.html
   shares this rule and keeps "PAGE NOT FOUND." on one line throughout.

   max-width holds the block off the full 1320px shell, and text-wrap:balance
   evens the lines the way the photographic heroes on the other pages already
   do. break-word stays as a safety net; at these sizes nothing reaches it. */
.ab-hero h1{
  font-size:clamp(1.95rem, 5.4vw, 3.9rem);
  line-height:1.06;
  letter-spacing:-.028em;
  text-transform:uppercase;
  text-wrap:balance;
  max-width:24ch;
  overflow-wrap:break-word;
}
.ab-hero-copy{
  margin-top:clamp(1.6rem, 2.6vw, 2.25rem);
  max-width:56ch;
}
.ab-hero-copy p + p{margin-top:1rem;}
/* The second paragraph is the service-area line: quieter than the statement
   above it, and set off by a rule rather than by a box. */
.ab-hero-copy p:last-child{
  margin-top:1.5rem;
  padding-top:1.35rem;
  border-top:1px solid var(--line);
  font-size:.96rem;
  max-width:48ch;
}

/* ------------------------------------------------- headline / copy split */
.ab-split,
.sa-split{display:grid;gap:clamp(1.6rem, 3vw, 3.5rem);}
.ab-split h2,
.sa-split h2{max-width:18ch;}
.ab-body,
.sa-body{max-width:62ch;}
.ab-body p + p,
.sa-body p + p{margin-top:1.15rem;}
@media (min-width:900px){
  /* Asymmetric on purpose: the headline column holds, the copy column runs
     wider, so the two sections that use this never read as equal halves. */
  .ab-split,
  .sa-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;}
}

/* ------------------------------------------------------- meet the owner
   The owner's real portrait beside his own account of the business. Photo
   left and story right from 900px; below that the grid collapses and the
   photo comes first, with the heading immediately under it. That is the DOM
   order in about.html, so nothing is visually reordered and the reading
   order matches the visual one on every width.

   The frame is 5:6 because the supplied portrait is 1145x1374, which is
   exactly that. Matching the frame to the source means object-fit has
   nothing to crop, so the photographer's framing survives untouched at
   every width. The rendered width is capped at 470px on desktop to stay
   inside 2x on a retina screen rather than upscaling, and at 420px below
   the breakpoint so a tablet in one column does not stretch a single
   portrait across the full measure.

   Two photographs in the left column now, not one. The story runs a good
   deal taller than the portrait on its own, and the difference used to sit
   as one empty block; the second picture takes most of it. The two carry
   different ratios on purpose, 5:6 and 4:3, so the column reads as a pair
   rather than the same shape twice.

   DOM order is portrait, story, second photo, and grid puts the second one
   back under the portrait from 900px. That order is what the phone gets:
   one picture before the text and one after it, rather than two images to
   scroll past before reaching a word. Row 2 takes the space the portrait
   leaves and the photo centres in it, so whatever the column still gives
   away at narrow desktop widths is split rather than dropped at the bottom.

   No radius, border, badge or shadow: .frame as the rest of the site uses
   it, with the sand ground showing through before the image loads. */
.ab-owner-grid{display:grid;row-gap:clamp(1.4rem, 2.4vw, 2rem);column-gap:clamp(1.8rem, 3.4vw, 3.5rem);}
.ab-owner-grid .frame{max-width:420px;margin-inline:auto;}
.ab-shot-owner{aspect-ratio:5 / 6;}
.ab-shot-work{aspect-ratio:4 / 3;}
/* Keeps the barn roofline and the cutter in frame as the crop narrows. */
.ab-shot-work img{object-position:50% 45%;}
@media (min-width:900px){
  .ab-owner-grid{
    grid-template-columns:minmax(0, clamp(320px, 33vw, 470px)) minmax(0, 1fr);
    grid-template-rows:auto 1fr;
    align-items:start;
  }
  .ab-owner-grid .frame{max-width:none;margin-inline:0;}
  .ab-shot-owner{grid-column:1;grid-row:1;}
  .ab-story{grid-column:2;grid-row:1 / span 2;}
  .ab-shot-work{grid-column:1;grid-row:2;align-self:center;}
}
/* The story column sets its own measure through .ab-body; only the gap under
   the heading is this section's own. */
.ab-story .ab-body{margin-top:clamp(1.3rem, 2vw, 1.6rem);}

/* The slogan closing the owner story. It used to sit inline after a colon at
   the end of the last sentence, where it read as that sentence's tail; it now
   stands alone so it lands as a statement, which is the whole point of a
   slogan.

   Still bold italic, and still Inter rather than the display face: Inter
   italic 600 is the one italic this page loads, and Archivo has no italic
   here, so a display setting would be slanted by the browser rather than
   drawn. 600 for the same reason, since asking <strong> for its default 700
   would have the weight synthesised too. Ink rather than the surrounding
   cypress, the same lift .ab-credo uses on its own line.

   Two classes in the selector because ".ab-body p + p" would otherwise win
   the margin on specificity and pull the slogan back up against the
   paragraph. No hairline: the byline's own rule sits directly under this,
   and a second one that close would box the line in rather than set it off. */
.ab-body .ab-slogan{
  margin-top:clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight:600;
  font-style:italic;
  font-size:clamp(1.12rem, 1.6vw, 1.34rem);
  line-height:1.42;
  letter-spacing:-.008em;
  color:var(--ink);
  max-width:30ch;
}

/* ---------------------------------------------------- owner identity line
   Attaches the story to the person behind it. A name and a role under a
   hairline, set like a byline rather than a team card: no frame, no badge,
   no shadow. It closes the owner section, directly under the last line of
   the story, which is where a signature belongs now that the portrait
   carries the identity at the top of the section. */
.ab-owner{
  margin-top:clamp(1.5rem, 2.4vw, 2rem);
  padding-top:clamp(1.2rem, 2vw, 1.5rem);
  border-top:1px solid var(--line);
  max-width:30ch;
}
.ab-owner b{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.05rem, 1.5vw, 1.2rem);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink);
}
.ab-owner span{
  display:block;
  margin-top:.4rem;
  font-size:.9rem;
  line-height:1.5;
  color:var(--cypress);
}

/* ------------------------------------------ the one dark editorial band */
.ab-dark{background:var(--charcoal);color:var(--cream);}
.ab-dark h2{color:var(--cream);}
.ab-dark .ab-body p{color:rgba(244,237,224,.82);}
.ab-dark .eyebrow{color:rgba(244,237,224,.66);}

/* ---------------------------------------------------- how I run Pinewood */
.ab-ease{background:var(--sand);}
.ab-ease .ab-body p{color:var(--cypress);}
/* This section used to carry two overrides that its old contents needed and
   its current ones do not, so both are gone and it now behaves like the
   other splits on the page. The body's extra margin-top existed to clear the
   large statement that sat under the heading; without it the stacked gap
   matches the dark band above instead of running twice as wide. The equal
   1fr/1fr columns existed because that statement and a ten-word heading
   filled the left column; against a three-word heading they left it mostly
   empty, so the shared .85fr/1.15fr asymmetry applies here too and the copy
   column gets the width instead. */
/* The four-part credo, the one line in the body copy that is lifted out of
   the run of paragraphs. Display type at heading weight under a hairline,
   but it is a paragraph rather than a heading, so it takes its own class
   instead of borrowing an h-level it has no business holding. It stays in
   document order between the paragraphs either side of it, which is why it
   is set inside .ab-body rather than pulled into the headline column: the
   copy reads in sequence on a phone. The selector carries the .ab-ease and
   .ab-body scope it needs to beat ".ab-ease .ab-body p" on colour and
   ".ab-body p + p" on spacing. */
.ab-ease .ab-body .ab-credo{
  margin-top:clamp(1.5rem, 2.4vw, 2rem);
  padding-top:clamp(1.2rem, 2vw, 1.5rem);
  border-top:1px solid var(--line-strong);
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.14rem, 1.75vw, 1.42rem);
  line-height:1.46;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:30ch;
  /* Four short sentences, so the break wants to fall on a full stop rather
     than inside "Respect the property", which is where the natural break
     lands at this measure. balance puts it after "Communicate." instead. */
  text-wrap:balance;
}
.ab-ease .ab-body .ab-credo + p{margin-top:clamp(1.5rem, 2.4vw, 2rem);}

/* The About call to action carries two buttons rather than the button and
   contact row the service pages use, and it is the one .request block on the
   site that runs to a second paragraph. */
.ab-cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,3.2vw,2.6rem);}
.request-sub--next{margin-top:1.1rem;}

/* ==========================================================================
   SERVICE AREA PAGE
   Scoped to .page-service-area or to .sa-* names used on no other page. The
   split, body measure and solid-nav rules are shared with About above rather
   than duplicated, so both pages stay in step by construction.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.sa-hero{
  padding-top:calc(88px + clamp(3rem, 7vw, 6rem));
  padding-bottom:clamp(3rem, 6vw, 5rem);
  border-bottom:1px solid var(--line);
}
@media (max-width:480px){
  .sa-hero{padding-top:calc(76px + clamp(2.5rem, 9vw, 3.75rem));}
}
/* Sized by the longest single word, "HILLSBOROUGH", measured rather than
   guessed. Uppercase display type cannot hyphenate, so below this minimum the
   word breaks mid-word on a phone. */
.sa-hero h1{
  font-size:clamp(1.5rem, 5.9vw, 3.6rem);
  line-height:1.04;
  letter-spacing:-.028em;
  text-transform:uppercase;
  overflow-wrap:break-word;
}
.sa-hero-copy{
  margin-top:clamp(1.6rem, 2.6vw, 2.25rem);
  max-width:56ch;
}
/* The availability caveat is the quieter half of the hero, set off by a rule
   rather than a box, exactly as the About hero handles its service line. */
.sa-hero-copy p:last-child{
  margin-top:1.5rem;
  padding-top:1.35rem;
  border-top:1px solid var(--line);
  font-size:.96rem;
  max-width:48ch;
}

/* ---------------------------------------------------- properties we serve
   The .needs rhythm: hairline rows, term, description. This list adds a link
   out of each row, so the row closes with the site's existing text link
   rather than with a button or a card. */
.sa-types{
  border-top:1px solid var(--line-strong);
  margin-top:clamp(2.4rem, 4vw, 3.25rem);
}
.sa-types li{
  border-bottom:1px solid var(--line-strong);
  padding:1.6rem 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.sa-types b{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.08rem,1.5vw,1.28rem);
  line-height:1.3;
  color:var(--ink);
}
.sa-types p{
  margin-top:.6rem;
  font-size:.94rem;
  line-height:1.65;
  color:var(--cypress);
  max-width:46ch;
}
.sa-types .tlink{margin-top:1.2rem;}
@media (min-width:900px){
  .sa-types{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:3.5rem;
    border-top:0;
  }
  .sa-types li:nth-child(1),
  .sa-types li:nth-child(2){border-top:1px solid var(--line-strong);}
  /* The four rows carry copy of different lengths, so the link is pushed to
     the bottom of its row and the two columns align across the pair. */
  .sa-types .tlink{margin-top:auto;padding-top:1.2rem;}
}

/* ------------------------------------------------- communities we serve
   Three tiers, hairline rows, same rhythm as .sa-types above. The tier
   label and its qualifier sit in the narrow column, the town names flow in
   the wide one, so the QUALIFIER IS READ BEFORE THE TOWNS rather than as a
   footnote after them. That ordering is the whole point of the component:
   tier three is a limited-scope area, and the reader must not meet the
   town names first and infer full service.

   No chips, pills, badges, cards or map. Separators are drawn dots with
   empty content, so nothing extra reaches a screen reader and the list
   still reads as the plain list it is. */
.sa-where{
  border-top:1px solid var(--line-strong);
  margin-top:clamp(2.4rem, 4vw, 3.25rem);
}
.sa-where > li{
  border-bottom:1px solid var(--line-strong);
  padding:1.6rem 0;
  display:grid;
  gap:.75rem;
}
.sa-where-head b{
  display:block;
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(1.08rem,1.5vw,1.28rem);
  line-height:1.3;
  color:var(--ink);
}
.sa-where-head span{
  display:block;
  margin-top:.4rem;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:34ch;
}
.sa-where-list{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  font-size:.94rem;
  line-height:1.9;
  color:var(--cypress);
  max-width:56ch;
}
.sa-where-list li:not(:last-child)::after{
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--sand-deep);
  vertical-align:middle;
  margin-inline:.6rem;
}
@media (min-width:900px){
  .sa-where > li{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:3.5rem;
    align-items:start;
    padding:1.9rem 0;
  }
}

/* ------------------------------------------- the stronger tonal section */
.sa-strong{background:var(--sand);}
.sa-strong .sa-body p{color:var(--cypress);}

/* A short closing note under a section, quieter than the body above it. */
.sa-note{
  margin-top:clamp(1.8rem, 2.8vw, 2.3rem);
  padding-top:clamp(1.3rem, 2vw, 1.7rem);
  border-top:1px solid var(--line);
  font-size:.94rem;
  line-height:1.68;
  color:var(--ink-soft);
  max-width:60ch;
}

/* Two buttons closing the page, as on About. */
.sa-cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,3.2vw,2.6rem);}

/* ==========================================================================
   Hauling landing page (hauling.html, served at /hauling).

   Variants of components already on the site, not new components. Nothing
   here introduces a colour, typeface, radius, shadow or motion the rest of
   the stylesheet does not already use, and every rule is scoped to
   .page-hauling or to a modifier this page is the only user of, so no
   existing page can move.
   ========================================================================== */

/* The Beyond Hauling figure sits in the same two-column band Residential uses
   for its transition photograph, so it takes the same 3:2. The source is
   1400x933, which is close enough that cover barely crops. */
.page-hauling .tone-lift .frame{aspect-ratio:3 / 2;min-height:0;}

/* The service cross links follow the intro copy inside the column rather than
   opening a section, so they need the gap the .what-list on the homepage gets
   from the grid above it. */
.what-list--beyond{margin-top:clamp(1.8rem, 3vw, 2.4rem);}

/* The homepage runs this list two-up across the full shell. Here it sits in
   one column of a two-column band, so two-up leaves about 250px a cell and
   four of the seven names wrap to a second line. One column instead: every
   service name stays on one line, which is the whole point of a list of
   names. The top hairline moves back to the first row only, since there is no
   longer a second row starting at the top of a second column. */
@media (min-width:900px){
  .what-list--beyond{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .what-list--beyond li:nth-child(2){border-top:0;}
}

/* Light variant of the three-step block the property-type pages close on.
   Same structure and the same numbering; only the four colours that were
   tuned for the charcoal band are restated for the cream ground. Done the way
   .principles--light is done, so the pattern stays one component with two
   grounds rather than two components. The counter runs in clay, which is the
   accent this site already uses sparingly for exactly this kind of mark. */
.next-brief--light{
  border-top-color:var(--line-strong);
}
.next-brief--light .next-brief-steps li::before{color:var(--clay);}
.next-brief--light .next-brief-steps b{color:var(--ink);}
.next-brief--light .next-brief-steps p{color:var(--cypress);}
.next-brief--light .next-brief-note{color:var(--ink-soft);}