/* ==========================================================================
   JACK CONIAM, INC. · Lawn & Landscaping Services
   Sample website prepared by GoldsWebsite.com
   --------------------------------------------------------------------------
   DESIGN DIRECTION: "Front Yard"

     Premise   This is not a portfolio and it should not behave like one. The
               visitor is standing in their own yard with a phone in their
               hand asking three questions: do you cut my street, what do you
               do, what is the number. The whole layout is built to answer
               those three in that order, and the phone number is never more
               than a thumb away.

     Surfaces  A cool pale green field with white panels on top. Every tone in
               this file is neutral or green. There is no tan, no clay, no
               warm grey and no beige anywhere on this site.
     Anchor    One deep field green. It does four jobs and no others: primary
               buttons, the dark CTA band, the footer, and link text (in a
               lighter step). A lime accent exists but see rule 2.
     Type      Figtree, one family, 400 / 500 / 600 / 700 / 800. No serif, no
               display face, no decorative or script type anywhere.
     Geometry  Soft but not bubbly. 8 to 18px radii. Panels separate by
               shadow; hairlines are reserved for inputs, tables and dividers.
     Motion    Content settles in once on first view. Nothing loops, nothing
               parallaxes, nothing moves on scroll after it has arrived.
               Fully disabled under prefers-reduced-motion.

   THREE RULES THAT KEEP THIS LOOK HONEST. Do not break them in later edits:

     1. ONE DARK OBJECT PER PAGE, plus the footer. The CTA band is it. No dark
        hero, no second dark section. The single inversion late in the page is
        the only moment of weight the layout gets, and it is what makes the
        "Call us" there feel like the end of an argument rather than another
        button. Add a second and both stop working.

     2. LIME IS A MARK, NOT A COLOUR. --lime appears as: the 4px rule under a
        section eyebrow, the marker dot in lists, the check in the service
        ticks, and the focus ring on dark surfaces. It never carries text, it
        never becomes a button, a heading, a background wash or a state. It
        has poor contrast as text by design and it is never asked to be text.

     3. ELEVATION BUDGET: one shadow per element, never two.
          --shadow-panel   resting panels and cards
          --shadow-chrome  things that float clear of the page: the stuck
                           header, the mobile sheet, the mobile call bar, the
                           focused skip link
        Hover never stacks shadow. It lifts 1px and shifts colour. Never raise
        the alpha. This page tips into "free template" the moment it goes
        heavy on shadow.

   Contrast ratios are recorded next to each ink token. They are the reason
   the greys read darker than a typical muted palette. Please do not lighten
   them: this site's audience skews older and reads it outdoors on a phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Surfaces. Cool and green-leaning, never warm. --- */
  --paper:       #FFFFFF;   /* panels, cards, the header */
  --canvas:      #F2F6F2;   /* the field everything sits on */
  --canvas-sink: #E6EDE7;   /* recessed strips, table headers, quiet rows */
  --tint:        #E2F0E6;   /* green chip fills */

  /* --- Ink. Ratios measured against --paper unless noted. --- */
  --ink:      #0F1F17;  /* headings and figures.      17.09 : 1 on white */
  --ink-body: #33453B;  /* body copy and nav links.   10.22 : 1 on white */
  --ink-mute: #56685D;  /* captions, meta, labels.     5.94 : 1 on white,
                           5.44 : 1 on --canvas. TIGHTEST HEADROOM IN THE
                           SYSTEM. Never lighten it, and never set it below
                           14px when it sits on --canvas or --canvas-sink. */

  /* --- The anchor hue. One green, three steps. --- */
  --brand:      #14562F;  /* buttons, CTA band, footer.  8.74 : 1 on white */
  --brand-deep: #0E3D21;  /* hover and pressed states.  12.60 : 1 on white */
  --brand-link: #146C39;  /* text links only.            6.49 : 1 on white */

  /* --- The mark. See rule 2. Never text, never a state. --- */
  --lime: #7BC62D;

  /* --- Focus. Dark ring on light surfaces, lime ring on dark ones. --- */
  --focus:      #0B7A3B;
  --focus-dark: #A9E34B;

  /* --- Lines. Hairlines only: inputs, dividers, tables. --- */
  --line:        #DCE5DE;
  --line-strong: #C6D3C9;
  --border-ui:   #77877D;  /* functional borders on inputs and ghost buttons.
                              3.79 : 1 on white, clears the 3:1 UI floor */

  /* --- On the dark band and the footer (measured against --brand). --- */
  --on-dark:      #FFFFFF;  /* 8.74 : 1 on --brand */
  --on-dark-soft: #E4F2E8;  /* 7.94 : 1 on --brand */
  --on-dark-mute: #B5D6C0;  /* 5.55 : 1 on --brand */
  --on-dark-line: rgba(255, 255, 255, 0.18);

  /* --- Placeholder scaffolding. Loud on purpose so nobody ships it. --- */
  --ph-line:  #8FA396;
  --ph-ink:   #2E4034;
  --ph-field: #F7FAF7;
  --ph-badge: #14562F;

  /* --- Radii. --- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;

  /* --- Elevation. Two tokens, one job each. See rule 3. --- */
  --shadow-panel:  0 1px 2px rgba(15, 31, 23, 0.05), 0 6px 20px rgba(15, 31, 23, 0.06);
  --shadow-chrome: 0 1px 3px rgba(15, 31, 23, 0.10), 0 10px 32px rgba(15, 31, 23, 0.12);

  /* --- Space scale. 4px base. --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 76px;  --s-10: 104px;

  /* --- Measure. --- */
  --shell:   1160px;  /* page gutter width */
  --measure: 66ch;    /* longest comfortable line of body copy */

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2 · Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;   /* clears the stuck header on anchor jumps */
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-body);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-osx-font-smoothing: grayscale;
}

/* The mobile call bar is fixed to the bottom. Keep it off the last element. */
@media (max-width: 780px) {
  body { padding-bottom: 68px; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
h1 { font-size: clamp(34px, 5.2vw, 54px); }
h2 { font-size: clamp(27px, 3.6vw, 38px); }
h3 { font-size: clamp(19px, 2vw, 22px); letter-spacing: -0.014em; }
h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

/* Global focus. Visible, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* On dark surfaces the dark ring disappears, so the mark takes over. */
.band--dark :where(a, button, input, select, textarea):focus-visible,
.site-foot :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--focus-dark);
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-chrome);
  transition: top 0.16s var(--ease);
}
.skip:focus { top: var(--s-4); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3 · Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 560px) { .shell { padding-inline: var(--s-4); } }

.band { padding-block: var(--s-9); }
.band--tight { padding-block: var(--s-8); }
.band--paper { background: var(--paper); }
.band--sink  { background: var(--canvas-sink); }

/* Rule 1: this is the one dark object. */
.band--dark {
  background: var(--brand);
  color: var(--on-dark-soft);
}
.band--dark h2, .band--dark h3 { color: var(--on-dark); }
.band--dark p { color: var(--on-dark-soft); }

@media (max-width: 760px) {
  .band { padding-block: var(--s-8); }
  .band--tight { padding-block: var(--s-7); }
}

/* Section head: eyebrow, lime rule, title, standfirst. */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--s-3);
  padding-bottom: 7px;
  border-bottom: 4px solid var(--lime);   /* rule 2: the mark, not text */
  color: var(--brand-link);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.band--dark .eyebrow { color: var(--on-dark); }

.sec-head { margin-bottom: var(--s-7); }
.sec-head p { margin-top: var(--s-3); margin-bottom: 0; font-size: 18px; }
.sec-head--center { text-align: center; }
.sec-head--center p { margin-inline: auto; }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 940px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4 · Header, nav, mobile sheet
   --------------------------------------------------------------------------
   BREAKPOINTS ARE MEASURED, NOT GUESSED. With the current six-item nav plus
   the phone button, the row needs 1000px before it collides. If you add a
   seventh item, re-measure by sweeping the viewport 1px at a time and account
   for the shell's 24px padding on each side plus the 26px flex gaps. Do not
   nudge these numbers by eye.
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.18s var(--ease);
}
.site-head.is-stuck { box-shadow: var(--shadow-chrome); border-bottom-color: transparent; }

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 78px;
}

/* Wordmark. Set in the body face at 800: no logotype, no serif. */
.brand-lock {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-lock:hover .brand-lock__name { color: var(--brand-deep); }
.brand-lock__mark {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--brand);
  display: grid;
  place-items: center;
}
.brand-lock__mark svg { width: 22px; height: 22px; }
.brand-lock__name {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
  transition: color 0.14s var(--ease);
}
.brand-lock__sub {
  display: block;
  color: var(--ink-mute);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--ink-body);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.nav a:hover { color: var(--brand-deep); border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--lime); }

.head-cta { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--border-ui);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn:hover { border-color: var(--ink-mute); }

/* Below 1000px the nav row cannot hold the six items plus the phone button. */
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .head-row { gap: var(--s-4); }
}
/* Below 560px the phone button in the header would push the wordmark. The
   fixed call bar at the bottom of the screen covers the same job. */
@media (max-width: 560px) {
  .head-cta .btn { display: none; }
  .head-row { min-height: 68px; }
  .brand-lock__mark { width: 36px; height: 36px; }
}

.sheet {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  top: 78px;
  z-index: 99;
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  padding: var(--s-5) 0 var(--s-6);
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-chrome);
}
.sheet.is-open { display: block; }
@media (min-width: 1001px) { .sheet, .sheet.is-open { display: none; } }
@media (max-width: 560px) { .sheet { top: 68px; max-height: calc(100vh - 68px); } }

.sheet a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.sheet a[aria-current="page"] { color: var(--brand); }
.sheet .btn { display: flex; margin-top: var(--s-5); border-bottom: 0; }

/* Fixed call bar. A lawn service is a phone business: on a small screen the
   number stays on screen at all times. */
.call-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 98;
  padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-chrome);
  gap: var(--s-2);
}
.call-bar .btn { flex: 1; }
@media (max-width: 780px) { .call-bar { display: flex; } }

/* --------------------------------------------------------------------------
   5 · Buttons and chips
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s var(--ease), border-color 0.14s var(--ease),
              color 0.14s var(--ease), transform 0.14s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #FFFFFF; }
.btn--primary:hover { background: var(--brand-deep); color: #FFFFFF; }

.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--border-ui);
}
.btn--ghost:hover { background: var(--canvas); color: var(--ink); border-color: var(--ink-mute); }

/* Only for use inside .band--dark. */
.btn--onDark { background: #FFFFFF; color: var(--brand-deep); }
.btn--onDark:hover { background: var(--on-dark-soft); color: var(--brand-deep); }
.btn--onDarkGhost {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--onDarkGhost:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.btn--lg { padding: 17px 30px; font-size: 17.5px; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--brand-link);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}
.chip svg { width: 14px; height: 14px; }
.chip--onDark { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   6 · Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s-9) var(--s-9); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s-4); }
.hero__lede {
  font-size: 19.5px;
  line-height: 1.6;
  margin-bottom: var(--s-6);
}
.hero .btn-row { margin-bottom: var(--s-6); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.hero__trust div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-body);
}
.hero__trust svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--brand-link); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero { padding-block: var(--s-8); }
}

/* --------------------------------------------------------------------------
   7 · Panels and cards
   -------------------------------------------------------------------------- */
.panel {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);   /* rule 3: shadow OR border, not both */
  padding: var(--s-6);
}
.panel--pad { padding: var(--s-7); }
@media (max-width: 560px) { .panel, .panel--pad { padding: var(--s-5); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  padding: var(--s-5);
  transition: transform 0.14s var(--ease);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { font-size: 15.5px; margin-bottom: 0; }
.card__ico {
  width: 46px; height: 46px;
  margin-bottom: var(--s-4);
  border-radius: 12px;
  background: var(--tint);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.card__ico svg { width: 24px; height: 24px; }

/* Anchor cards lift on hover. Rule 3: lift only, shadow does not change. */
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-2px); }
a.card:hover h3 { color: var(--brand-link); }

.card__more {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--brand-link);
  font-size: 14.5px;
  font-weight: 700;
}

/* Ticked list. The check is the lime mark; the text carries the meaning. */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--s-3);
  font-size: 16px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 15px; height: 9px;
  border-left: 3px solid var(--lime);
  border-bottom: 3px solid var(--lime);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.band--dark .ticks li { color: var(--on-dark-soft); }

/* Numbered steps. */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  margin-bottom: var(--s-6);
}
.steps > li:last-child { margin-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--brand);
  font-size: 18px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.steps h3 { margin-bottom: 5px; }
.steps p { font-size: 15.5px; margin-bottom: 0; }

/* Figures: the number is the loud part. */
.stat { text-align: center; }
.stat__fig {
  display: block;
  color: var(--ink);
  font-size: clamp(36px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stat__lab {
  display: block;
  margin-top: var(--s-2);
  color: var(--ink-mute);
  font-size: 14.5px;
  font-weight: 600;
}
.band--dark .stat__fig { color: #FFFFFF; }
.band--dark .stat__lab { color: var(--on-dark-mute); }

/* Split: copy beside a media frame or a panel. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 900px) {
  .split, .split--wide-left, .split--wide-right {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .split__flip { order: -1; }   /* media above copy on a narrow screen */
}

/* --------------------------------------------------------------------------
   8 · Image placeholders
   --------------------------------------------------------------------------
   Retained for any future page drafts that need image briefing blocks. The
   nine production-page placeholders have been replaced by .site-photo assets.
   -------------------------------------------------------------------------- */
.imgph {
  position: relative;
  margin: 0;
  padding: var(--s-5);
  border: 2px dashed var(--ph-line);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      rgba(143, 163, 150, 0.11) 11px 12px),
    var(--ph-field);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);

  /* Holds the box at the real aspect ratio of the finished image, so the
     client is looking at the space the photograph will actually occupy.
     aspect-ratio (not a floated ::before spacer) because this is a flex
     container and floats do not apply to flex items: a spacer would become
     an item in the column and shove every note to the bottom of the box.
     The ratio yields to the content, so a long prompt grows the box instead
     of overflowing it. */
  aspect-ratio: var(--ph-ar, 3 / 2);
  min-height: 210px;
}

.imgph__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.imgph__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--ph-badge);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.imgph__spec {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ink);
  letter-spacing: -0.01em;
}
.imgph__title {
  margin: 0;
  max-width: none;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.imgph__prompt {
  margin: 0;
  max-width: none;
  padding: var(--s-3) var(--s-4);
  background: #FFFFFF;
  border: 1px solid var(--ph-line);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ph-ink);
}
.imgph__prompt b, .imgph__alt b {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-link);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.imgph__alt {
  margin: 0;
  max-width: none;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ph-ink);
}
.imgph__alt b { display: inline; margin-right: 5px; }

/* Compact variant, for use inside cards. */
.imgph--sm { min-height: 150px; padding: var(--s-4); gap: var(--s-2); }
.imgph--sm .imgph__title { font-size: 14.5px; }
.imgph--sm .imgph__prompt { font-size: 12.5px; padding: 10px 12px; }
.imgph--sm .imgph__alt { display: none; }

/* Quiet mode: collapse to a plain plate that still holds the ratio. */
.ph-quiet .imgph {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--canvas-sink);
  align-items: center;
  justify-content: center;
}
.ph-quiet .imgph > * { display: none; }
.ph-quiet .imgph::after {
  content: "Image";
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Finished photography and map assets that replace the sample scaffolding. */
.site-photo {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  object-fit: cover;
}
.site-photo--map {
  background: #EDF3ED;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   9 · Service and area lists
   -------------------------------------------------------------------------- */
.svc-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.svc-row:last-child { border-bottom: 0; }
.svc-row:hover h3 { color: var(--brand-link); }
.svc-row__ico {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: var(--tint);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.svc-row__ico svg { width: 25px; height: 25px; }
.svc-row p { font-size: 15px; margin: 3px 0 0; }
.svc-row__go { color: var(--brand-link); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 620px) {
  .svc-row { grid-template-columns: 44px minmax(0, 1fr); }
  .svc-row__ico { width: 44px; height: 44px; }
  .svc-row__ico svg { width: 21px; height: 21px; }
  .svc-row__go { grid-column: 2; }
}

/* Area index: dense, scannable, alphabetical. */
.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.area-list li { margin: 0; }
.area-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 13px var(--s-3) 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-body);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
}
.area-list a:hover { color: var(--brand-link); }
.area-list a span { color: var(--ink-mute); font-size: 13px; font-weight: 600; }

/* --------------------------------------------------------------------------
   10 · Tables (hours, coverage)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
caption {
  text-align: left;
  padding-bottom: var(--s-3);
  color: var(--ink-mute);
  font-size: 14.5px;
  font-weight: 600;
}
th, td {
  padding: 12px var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--ink);
  font-weight: 700;
  background: var(--canvas-sink);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11 · Reviews
   --------------------------------------------------------------------------
   NOTE FOR LAUNCH: the quote slots on this site are deliberately empty. We do
   not write testimonials on a client's behalf. Paste real review text from
   the Google Business Profile or the BBB profile, with the reviewer's name as
   they published it, and delete the data-placeholder attribute.
   -------------------------------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; color: var(--lime); }
.stars svg { width: 18px; height: 18px; }
.stars--dark { color: var(--focus-dark); }

.rating-lock { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rating-lock__score {
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.band--dark .rating-lock__score { color: #FFFFFF; }
.rating-lock__meta { color: var(--ink-mute); font-size: 14.5px; font-weight: 600; }
.band--dark .rating-lock__meta { color: var(--on-dark-mute); }

.quote-slot {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 2px dashed var(--ph-line);
  border-radius: var(--r-md);
  background: var(--ph-field);
}
.quote-slot__note {
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ph-ink);
}
.quote-slot__note b {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-link);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12 · Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .field--wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
}
.field .opt { color: var(--ink-mute); font-weight: 600; }
.field .hint { color: var(--ink-mute); font-size: 13.5px; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border-ui);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: inherit;
  font-size: 16px;   /* 16px minimum stops iOS Safari zooming on focus */
  line-height: 1.45;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356685D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 19px;
  padding-right: 40px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(11, 122, 59, 0.18);
  outline: none;
}

.err { display: none; color: #A3231B; font-size: 13.5px; font-weight: 600; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #A3231B; }
.field.is-invalid .err { display: block; }

.checkbox { display: flex; align-items: flex-start; gap: 11px; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex-shrink: 0; }
.checkbox label { font-size: 15px; font-weight: 500; color: var(--ink-body); }

.err-summary {
  display: none;
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid #A3231B;
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: #FCF2F1;
  color: #7A1A14;
  font-size: 15px;
  font-weight: 600;
}
.err-summary.is-on { display: block; }

.form-ok {
  display: none;
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--tint);
  text-align: center;
}
.form-ok.is-on { display: block; }
.form-ok h3 { margin-bottom: var(--s-2); }
.form-ok p { margin-inline: auto; }

/* The honeypot. Never visible, never announced, never tabbable. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Setup notes to the developer. Removed at launch. */
.devnote {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 2px dashed var(--ph-line);
  border-radius: var(--r-sm);
  background: var(--ph-field);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ph-ink);
}
.devnote b {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-link);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.devnote p { max-width: none; }

/* --------------------------------------------------------------------------
   13 · Breadcrumb and the "no content" panel
   -------------------------------------------------------------------------- */
.crumb {
  padding-block: var(--s-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
}
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.crumb li + li::before { content: "/"; color: var(--line-strong); }
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--brand-link); text-decoration: underline; }
.crumb [aria-current="page"] { color: var(--ink); }

.empty {
  max-width: 620px;
  margin: var(--s-8) auto;
  padding: var(--s-9) var(--s-6);
  border: 2px dashed var(--ph-line);
  border-radius: var(--r-lg);
  background: var(--ph-field);
  text-align: center;
}
.empty__mark {
  display: inline-flex;
  margin-bottom: var(--s-4);
  padding: 5px 12px;
  border-radius: var(--r-xs);
  background: var(--ph-badge);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.empty h2 { margin-bottom: var(--s-3); }
.empty p { margin-inline: auto; color: var(--ph-ink); font-size: 15.5px; }
.empty .btn-row { justify-content: center; margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   14 · Footer
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--brand);
  color: var(--on-dark-soft);
  padding-block: var(--s-8) var(--s-6);
}
.site-foot h4 {
  margin-bottom: var(--s-4);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Five columns: the blurb, then Services, Areas, Company, Get in touch. The
   last one is widened because it carries the phone number at 22px. */
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr;
  gap: var(--s-5);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--on-dark-line);
}
/* 5 across stops fitting once the columns drop under ~150px. Then 3 across
   (3 + 2), then 2, then stacked. */
@media (max-width: 1040px) { .foot-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-6); } }
@media (max-width: 700px)  { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid p { color: var(--on-dark-mute); font-size: 15px; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: 10px; }
.foot-links a {
  color: var(--on-dark-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.foot-links a:hover { color: #FFFFFF; text-decoration: underline; }

.foot-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: var(--s-4);
  text-decoration: none;
}
.foot-brand__mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.foot-brand__mark svg { width: 22px; height: 22px; }
.foot-brand strong { display: block; color: #FFFFFF; font-size: 17px; font-weight: 800; letter-spacing: -0.025em; }

.foot-tel {
  display: inline-block;
  margin-bottom: var(--s-2);
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.foot-tel:hover { color: #FFFFFF; text-decoration: underline; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  color: var(--on-dark-mute);
  font-size: 14px;
}
.foot-base p { color: var(--on-dark-mute); font-size: 14px; margin: 0; }
.foot-base a { color: var(--on-dark-mute); }
.foot-base nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --------------------------------------------------------------------------
   15 · Motion
   --------------------------------------------------------------------------
   Content settles in once on first view and is then left alone. Anything that
   has not been revealed within a second of load is shown regardless, so a
   failed IntersectionObserver can never leave the page blank.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16 · Print
   -------------------------------------------------------------------------- */
@media print {
  .site-head, .sheet, .call-bar, .band--dark, .imgph, .devnote { display: none !important; }
  body { background: #FFFFFF; color: #000000; padding-bottom: 0; font-size: 12pt; }
  .panel, .card { box-shadow: none; border: 1px solid #999999; }
  a { color: #000000; }
  .site-foot { background: #FFFFFF; color: #000000; padding-block: 12pt; }
  .site-foot h4, .foot-brand strong, .foot-tel, .foot-links a { color: #000000; }
}