/* OUR SERVICES - layered on c06.css, which supplies the page furniture
   (top bar, shell, viewer, sign-off) so the two pages stay one design.

   The running order is the design: pressure washing is the flagship and gets
   the full viewer, and each service below it takes less room than the one
   above. Weight communicates priority faster than any label could. */

/* ---------- opening ----------
   Was an eyebrow, a headline and four hairline rows on white - correct, and
   completely flat. It now uses the same language as the home chooser: a wash
   ground, a headline with one blue phrase, and four cards. */
.open{background:var(--sky-050);padding-block:var(--air)}
.open__say{display:grid;gap:var(--space-6);margin-bottom:clamp(var(--space-10),4vw,var(--space-16))}
@media (min-width:1000px){
  .open__say{grid-template-columns:minmax(0,1fr) minmax(0,36ch);align-items:end;gap:var(--space-12)}
}
.open .eyebrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  margin-bottom:var(--space-4);
  font-weight:var(--weight-heavy);font-size:var(--text-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-500);
}
.open .eyebrow i{
  font-style:normal;width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--sun-500);flex:none;
}
.open .eyebrow span{color:var(--ink-500)}
/* same line-balance polish as the home page headings */
.open__h,.svc__t,.sign__h{text-wrap:balance}
.svc__lead,.note{text-wrap:pretty}

.open__h{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:clamp(var(--text-2xl),5.2vw,calc(var(--text-5xl) * 1.02));
  line-height:1.03;letter-spacing:-.02em;max-width:14ch;
}
/* breaks after the comma rather than leaving 'one' stranded on line one */
.open__h em{font-style:normal;color:var(--sky-600);display:block}
.open__p{font-size:var(--text-lg);line-height:var(--leading-body);color:var(--ink-500);max-width:68ch}

/* H1 carries the service and the place for search. The brand line keeps its
   exact styling; the second line is set at the existing lede size so the hero
   reads as it did. */
.open__h-brand{display:block}
.open__h-sub{
  display:block;margin-top:var(--space-4);
  font-family:var(--font-body);font-weight:var(--weight-body);
  font-size:var(--text-lg);line-height:var(--leading-body);
  letter-spacing:normal;text-transform:none;
  color:var(--ink-500);max-width:46ch;
}

/* the four cards */
.idx{display:grid;gap:var(--space-4)}
@media (min-width:700px){.idx{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.idx{grid-template-columns:repeat(4,1fr)}}
.idx a{
  display:grid;align-content:start;gap:var(--space-2);height:100%;
  padding:var(--space-6);
  background:var(--white);border:1px solid var(--ink-150);
  border-radius:var(--radius-lg);
  transition:border-color var(--speed-base) var(--ease-out),
             box-shadow var(--speed-base) var(--ease-out),
             transform var(--speed-base) var(--ease-out);
}
.idx a:hover{border-color:var(--sky-300);box-shadow:var(--shadow-card);transform:translateY(-2px)}

.idx__n{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:var(--text-2xl);line-height:1;color:var(--sky-600);
  font-variant-numeric:tabular-nums;margin-bottom:var(--space-3);
}
.idx__t{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-lg);letter-spacing:var(--tracking-display);
  line-height:1.2;
}
.idx__k{color:var(--ink-500);font-size:var(--text-sm);line-height:var(--leading-body)}
.idx__go{
  margin-top:var(--space-4);
  font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--sky-700);
}

/* ---------- mobile: the index becomes a 2x2 block ----------
   Four full-width cards ran to three screens before the first photo. As a
   2x2 the whole index is one glance, and dropping the "See what's involved"
   row buys the height that makes it fit: the card was always the tap target,
   the row only repeated what tapping it does. Everything else stays. */
@media (max-width:767px){
  /* grid-auto-rows:1fr makes every row the same height, so the four cards
     read as one block rather than two mismatched pairs */
  .idx{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--space-3)}
  .idx li{display:grid}                    /* card fills its cell, equal heights */
  .idx a{padding:var(--space-4);gap:var(--space-1);height:100%}
  .idx__n{font-size:var(--text-xl);margin-bottom:var(--space-2)}
  .idx__t{font-size:var(--text-md);line-height:1.25}   /* 16px, the stated floor */
  .idx__k{font-size:var(--text-sm)}
  .idx__go{display:none}                   /* the whole card is the target */

  /* the head above tightens on spacing only - no copy is hidden or removed,
     the sub-line lives inside the H1 and the page is indexed mobile-first */
  .open{padding-block:var(--space-10)}
  .open__say{gap:var(--space-4);margin-bottom:var(--space-6)}
  .open .eyebrow{margin-bottom:var(--space-3)}
  .open__h-sub{margin-top:var(--space-3)}
  .open__p{font-size:var(--text-md)}
}

/* leaves the blue ramp on hover: at 14px there is no brighter blue that
   clears 4.5:1, so the shift goes to ink instead */
.idx a:hover .idx__go{color:var(--ink-900)}

/* ---------- a service block ---------- */
/* sections are told apart by ground, not hairlines: white, wash, white, wash,
   then the sky-500 closing band - the same rhythm the home page runs */
.svc{padding-block:var(--air)}
#landscaping,#mowing{background:var(--sky-050)}
/* the viewer stage letterboxes portrait pairs; on the wash bands those side
   panels must show the band, not paint their own white box */
.svc .stage{background:transparent}
.svc__head{display:grid;gap:var(--space-4);margin-bottom:var(--space-10)}
/* at width the lead sits beside the number and title, editorial-style */
@media (min-width:1000px){
  .svc__head{grid-template-columns:minmax(0,1fr) minmax(0,46ch);column-gap:var(--space-16);align-items:end}
  .svc__head .svc__n,.svc__head .svc__t{grid-column:1}
  .svc__head .svc__lead{grid-column:2;grid-row:1/3;align-self:end}
}
.svc__n{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));line-height:1;
  letter-spacing:var(--tracking-display);color:var(--sky-600);
  font-variant-numeric:tabular-nums;
}
/* the numbered service has to outrank its own line items - at 36px it was
   losing to a column of 18px job titles */
.svc__t{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:clamp(var(--text-2xl),4.6vw,var(--text-4xl));
  line-height:1.08;letter-spacing:var(--tracking-display);max-width:15ch;
}
.svc__lead{
  font-size:var(--text-lg);line-height:var(--leading-body);
  color:var(--ink-700);max-width:46ch;
}
/* the flagship carries a marker the others don't */
/* the badge earns its gold: sun-500 as a ground behind ink type, never text */
.svc--lead .svc__n::after{
  content:"Most asked for";
  display:inline-block;margin-left:var(--space-4);vertical-align:middle;
  padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);
  background:var(--sun-500);color:var(--ink-900);
  font-family:var(--font-body);font-weight:var(--weight-heavy);
  font-size:var(--text-xs);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}

/* one shape for all four services: what's included on the left, a single
   before/after on the right. Nothing on this page reads as a special case. */
.svc__body{display:grid;gap:clamp(var(--space-10),4vw,var(--space-16))}
@media (min-width:900px){
  .svc__body{grid-template-columns:minmax(0,72ch)}
}
/* what's included */
.inc{border-top:1px solid var(--ink-150);margin-top:var(--space-8)}
.inc li{
  display:flex;justify-content:space-between;gap:var(--space-5);
  padding-block:var(--space-4);
  border-bottom:1px solid var(--ink-150);
  font-size:var(--text-sm);
}
.inc li span:last-child{color:var(--ink-500);white-space:nowrap}

/* The section already owns the big number, so the viewer inside it drops its
   own - two giant blue numerals in one column read as a mistake. */
.svc .viewer__num{display:none}
.svc .viewer__title{margin-top:var(--space-3);font-size:var(--text-lg)}

/* pictures inside a service - bounded on both axes so a portrait shot can't
   tower over its own section while a landscape one still fills the column */
.shots{display:grid;gap:var(--space-6);align-items:start}
.shots figure{margin:0}
/* the supporting shot in each service is a before/after too, at a fixed frame
   so the two states always line up */
.shots .frame{aspect-ratio:4/3;max-height:min(58vh,520px);margin-inline:auto}
.shots .frame img{width:100%;height:100%;object-fit:cover;display:block}
.shots > figure > img{
  display:block;background:var(--ink-075);
  width:auto;height:auto;
  max-width:100%;max-height:min(62vh,560px);
}
.shots figcaption{
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--ink-150);color:var(--ink-500);
}


/* a quiet note under a service */
.note{
  margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid var(--ink-075);
  color:var(--ink-500);font-size:var(--text-sm);max-width:52ch;
}

/* ---------- how it works ---------- */
.how{padding-block:var(--air);border-top:1px solid var(--ink-150)}
.how__grid{display:grid;gap:var(--space-8);margin-top:var(--space-10)}
@media (min-width:800px){.how__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-10)}}
.how__grid > div{padding-top:var(--space-5);border-top:2px solid var(--ink-900)}
.how__n{
  font-weight:var(--weight-heavy);font-size:var(--text-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-500);
  margin-bottom:var(--space-3);
}
.how__grid h3{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-lg);letter-spacing:var(--tracking-display);
  margin-bottom:var(--space-2);
}
.how__grid p{color:var(--ink-500);line-height:var(--leading-body)}

/* ---------- closing band ----------
   Was a bare heading and an underlined number on white. Now the page's one
   sky-500 moment, in the same language as the home quote band: ink type on
   the brand blue, an inverted white pill, the phone as the quiet second
   option. The pill goes to the home form because the photo upload lives
   there, which is exactly what the heading is asking for. */
.sign{display:block;background:var(--sky-500);border-top:0;padding-block:var(--air)}
.sign__grid{display:grid;gap:var(--space-8)}
@media (min-width:900px){
  .sign__grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-16)}
}
.sign__p{
  margin-top:var(--space-4);color:var(--ink-900);
  font-size:var(--text-lg);line-height:var(--leading-body);max-width:44ch;
  text-wrap:pretty;
}
.sign__act{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6)}
.sign__cta{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);border-radius:var(--radius-pill);
  background:var(--white);color:var(--ink-900);
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-lg);letter-spacing:var(--tracking-display);
  white-space:nowrap;box-shadow:var(--shadow-card);
  transition:transform var(--speed-fast) var(--ease-out),
             box-shadow var(--speed-base) var(--ease-out);
}
.sign__cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.sign__cta:active{transform:scale(.98)}
.sign__cta svg{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* c06 draws the underline as a border in ink-150 with a sky-500 hover; both
   vanish on the blue ground. And a border underline pins the line to the box
   edge, so padding the tap target would push it away from the text. A real
   text underline hugs the text no matter the padding, which lets the link
   reach a 44px tap height without the line drifting. */
.sign__tel{
  /* inline-flex + min-height rather than padding: an inline box's vertical
     padding paints without growing the line box, so the tap height stays a
     guess. A flex box with min-height is a real 44px target everywhere. */
  display:inline-flex;align-items:center;
  min-height:44px;
  border-bottom:0;
  text-decoration:underline;
  text-decoration-color:var(--ink-900);
  text-decoration-thickness:2px;
  text-underline-offset:6px;
  transition:text-decoration-color var(--speed-base) var(--ease-out);
}
.sign__tel:hover{text-decoration-color:var(--white)}

/* ---------- mobile: the table and note fold behind a disclosure ----------
   The photo viewer above is never touched - it is the payoff and stays open.
   Only the editorial table and its note collapse.

   The wrappers are display:contents above the breakpoint, so at desktop width
   the ul and p are laid out exactly as if the wrappers were not in the
   document. No <details>: its content hiding is enforced by the browser and
   cannot be neutralised reliably at desktop width.

   Both the table and the note ship in the HTML and are hidden with CSS.
   Nothing is injected on expand: Google gives accordion content full weight on
   mobile when it is already in the markup, and AJAX-injected content is the
   case that loses value. */
.svc__more{display:none}
.svc__panel,.svc__panel-in{display:contents}

@media (max-width:767px){
  .svc__more{
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-4);width:100%;
    margin-top:var(--space-5);
    padding:var(--space-4) 0;
    border:0;border-top:1px solid var(--ink-150);
    background:none;cursor:pointer;text-align:left;
    font-family:var(--font-display);font-weight:var(--weight-heavy);
    font-size:var(--text-md);letter-spacing:var(--tracking-display);
    color:var(--ink-900);
  }
  /* the FAQ chevron disc, reused rather than rebuilt */
  .svc__more[aria-expanded="true"] .faq__chev{background:var(--sky-500)}
  .svc__more[aria-expanded="true"] .faq__chev::after{
    border-color:var(--ink-900);
    transform:rotate(-135deg) translate(-3px,-3px);
  }

  /* 0fr -> 1fr animates a height the browser can actually interpolate,
     which max-height cannot do without guessing a number */
  .svc__panel{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows var(--speed-base) var(--ease-out);
  }
  .svc__panel-in{display:block;overflow:hidden}
  .svc__panel.is-open{grid-template-rows:1fr}
  /* the panel closes instantly when another opens, so the page never
     reflows under the reader; only the opening panel animates */
  .svc__panel.is-instant{transition:none}

  /* The gap under the thumbnail rail was 84px: 2px of scroll padding on the
     rail, then --air (64px) of padding-bottom on the viewer, then the
     disclosure button's 20px offset. --air is desktop breathing room and on a
     phone it reads as the section having ended. Cut to 8px so the rail, the
     divider line and the button form one group; the divider still carries the
     separation the padding was doing. */
  .viewer{padding-bottom:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){.svc__panel{transition:none}}