/* ==========================================================================
   Grimo Contracting - site stylesheet
   Shared by index.html and every service page (hardscaping.html,
   excavation-grading.html, property-cleanup.html, junk-removal.html).
   Edit once here and every page picks it up.
   ========================================================================== */

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

:root {
  --ink:       #262626;
  --ink-2:     #303030;
  --ink-3:     #1c1c1c;
  --line-dk:   #414141;
  --accent:    #ff914d;
  --accent-lt: #ffa76d;
  --accent-dk: #b0501a;
  --paper:     #ffffff;
  --paper-2:   #f7f6f4;
  --line:      #e5e4e1;
  --text:      #1c1c1c;
  --muted:     #5f5f5f;
  --on-dark:   #f2f2f2;
  --on-dark-m: #a6a6a6;
  --r:         12px;
  --wrap:      75rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.65rem; font-weight: 750; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.015em; font-weight: 700; }
p  { margin: 0 0 1rem; }
a  { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark .lead { color: var(--on-dark-m); }

.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-size: 0.73rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-dk);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--accent); }
.section--dark .eyebrow { color: var(--accent); }
.head-center { text-align: center; }
.head-center .eyebrow { justify-content: center; }
.head-center .lead { margin-inline: auto; }
.lead { font-size: 1.09rem; color: var(--muted); max-width: 46rem; }

/* ---------- Slogan ---------- */
.slogan {
  margin: 1.75rem 0 1.9rem; padding: 0.15rem 0 0.15rem 1.15rem;
  border-left: 3px solid var(--accent);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 750;
  letter-spacing: -0.025em; line-height: 1.25; color: var(--text);
}
.slogan em { font-style: normal; color: var(--accent); }
.footer-slogan {
  margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 750;
  letter-spacing: -0.02em; color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  font: inherit; font-weight: 700; font-size: 0.97rem;
  text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #2b1a09; }
.btn--primary:hover { background: var(--accent-lt); border-color: var(--accent-lt); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: #3d3d3d; border-color: #3d3d3d; }
.btn--outline { border-color: currentColor; background: transparent; }
.btn--outline:hover { background: var(--accent); border-color: var(--accent); color: #2b1a09; }
.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.88rem; }

.link-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 750; font-size: 0.92rem; text-decoration: none; color: var(--accent-dk);
}
.link-cta span { transition: transform 0.15s ease; }
.link-cta:hover span { transform: translateX(4px); }

.link-quiet { font-size: 0.88rem; font-weight: 650; text-decoration: none; color: var(--muted); }
.link-quiet:hover { color: var(--text); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        padding: 0.75rem 1.25rem; background: var(--accent); color: #2b1a09; font-weight: 700; }
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.topbar {
  background: var(--ink); color: var(--on-dark-m);
  font-size: 0.83rem; letter-spacing: 0.01em;
}
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                gap: 0.5rem 1.5rem; padding-block: 0.55rem; }
.topbar strong { color: var(--on-dark); font-weight: 650; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.topbar__set { display: flex; align-items: center; gap: 1.4rem; }
.topbar .ig { display: inline-flex; color: var(--on-dark-m); }
.topbar .ig:hover { color: var(--accent); }
/* On phones drop the secondary text, but never the email or the Instagram link. */
@media (max-width: 44rem) {
  .topbar .wrap { padding-block: 0.5rem; }
  .topbar__set { gap: 1rem; }
  .topbar__extra, .topbar__hours { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 4.75rem; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand__mark { height: 2.7rem; width: auto; flex: none; }
.brand__name { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.brand__name span { display: block; margin-top: 0.15rem; font-size: 0.63rem; font-weight: 700;
                    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 1.45rem; }
.nav a { text-decoration: none; font-size: 0.93rem; font-weight: 650; color: var(--text); }
.nav a:hover { color: var(--accent-dk); }

/* ---------- Services dropdown ----------
   The "Services" item in the header is a button, not a link: it opens the menu
   of the four service pages. On a wide screen the menu also opens on hover and
   on keyboard focus; on a phone the whole nav is already a stacked panel, so the
   menu expands inline underneath the button instead (see the phone block below). */
.nav-drop { position: relative; }
.nav-drop__btn {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0; margin: 0;
  font: inherit; font-size: 0.93rem; font-weight: 650; color: var(--text);
  background: none; border: 0; cursor: pointer;
}
.nav-drop__btn:hover { color: var(--accent-dk); }
.nav-drop__btn svg { flex: none; transition: transform 0.15s ease; }
.nav-drop[data-open="true"] > .nav-drop__btn svg { transform: rotate(180deg); }

.nav-drop__menu {
  position: absolute; z-index: 60; top: calc(100% + 1.15rem); left: 50%;
  width: 19rem; padding: 0.45rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.14);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Invisible bridge across the gap, so the menu doesn't close while the pointer
   travels from the button down to it. */
.nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; }
.nav-drop[data-open="true"] > .nav-drop__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%);
}
.nav-drop__menu a {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.62rem 0.6rem; border-radius: 8px;
  font-size: 0.93rem; font-weight: 700; line-height: 1.25; color: var(--text);
  text-decoration: none; transition: background-color 0.12s ease;
}
.nav-drop__menu a:hover, .nav-drop__menu a:focus-visible { background: var(--paper-2); color: var(--accent-dk); }
.nav-drop__menu a[aria-current="page"] { background: var(--paper-2); color: var(--accent-dk); }
.nav-drop__menu small { display: block; margin-top: 0.12rem; font-size: 0.775rem; font-weight: 600;
                        letter-spacing: 0; color: var(--muted); }
.nav-drop__n {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; margin-top: 0.05rem;
  background: var(--accent); color: #2b1a09;
  font-size: 0.72rem; font-weight: 800; border-radius: 6px;
}
.nav-drop__all {
  margin-top: 0.3rem; padding-top: 0.55rem; border-top: 1px solid var(--line);
}
.nav-drop__all a { font-size: 0.87rem; color: var(--muted); }

.header-cta { display: flex; align-items: center; gap: 0.8rem; }
.header-phone { display: none; align-items: center; gap: 0.45rem;
                font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.header-phone svg { color: var(--accent-dk); }

/* The phone number is a picture of text, not text; the digits appear nowhere in
   this file (see the note by the script at the bottom of the page). Each image was
   rendered from the exact type it replaced, and each box below is that text's
   measured line box converted to rem, so the images sit in precisely the old spot
   and scale with browser zoom and font-size settings the way the text did.
   The odd-looking widths are the measured text widths divided by 16. Chromium lays
   out on a 1/64px grid, so a rounder number here lands a 64th short and nudges
   everything beside it in the header row. */
.phone-img { display: block; }
.phone-img--topbar  { width: 5.263671875rem;  height: 1.3695rem; }  /* 0.83rem / 650 wt */
.phone-img--header  { width: 6.2275390625rem; height: 1.6830rem; }  /* 1.02rem / 800 wt */
.phone-img--contact { width: 6.5927734375rem; height: 1.7490rem; }  /* 1.06rem / 700 wt */
.phone-img--footer  { width: 5.7900390625rem; height: 1.5345rem; }  /* 0.93rem / 400 wt */

.menu-btn { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-left: auto;
            background: transparent; border: 1px solid var(--line); border-radius: 8px;
            color: var(--text); cursor: pointer; }

@media (max-width: 64rem) {
  .nav { display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch;
         gap: 0; padding: 0.25rem 1.25rem 1.35rem;
         background: var(--paper); border-bottom: 1px solid var(--line);
         box-shadow: 0 20px 30px rgba(0,0,0,0.06); }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { margin-top: 1.1rem; }
  .header-cta { display: none; }

  /* Services dropdown, phone / tablet: expands inline inside the stacked nav
     rather than floating over the page. */
  .nav-drop { position: static; }
  .nav-drop__btn { width: 100%; justify-content: space-between;
                   padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-drop__menu {
    position: static; display: none; width: auto; padding: 0.4rem 0 0.75rem;
    background: transparent; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav-drop__menu::before { display: none; }
  .nav-drop[data-open="true"] > .nav-drop__menu { display: block; transform: none; }
  .nav-drop__menu a { padding: 0.7rem 0.6rem; border-bottom: 0; font-size: 0.97rem; }
  .nav-drop__all { margin-left: 0.6rem; margin-right: 0.6rem; }
}
@media (min-width: 64.0625rem) { .menu-btn { display: none; } .nav .btn { display: none; } }
/* Wide screens with a real pointer: hovering the Services item opens the menu,
   so it works without a click.
   Deliberately NOT :focus-within. Escape closes the menu and puts focus back on
   the button, which sits inside .nav-drop, so a :focus-within rule here would
   re-open it immediately and Escape would never appear to work. Keyboard users
   open it the proper way instead: Enter or Space on the button (see js/site.js). */
@media (min-width: 64.0625rem) and (hover: hover) {
  .nav-drop:hover > .nav-drop__menu { opacity: 1; visibility: visible; transform: translateX(-50%); }
}
@media (min-width: 50rem) { .header-phone { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: var(--on-dark);
  background: var(--ink-3);
  /* Drop a wide photo at images/hero.jpg and uncomment the two lines below to use it. */
  /* background-image: linear-gradient(rgba(20,20,20,0.62), rgba(20,20,20,0.72)), url("images/hero.jpg"); */
  /* background-size: cover; background-position: center; */
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255,145,77,0.20), transparent 62%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(255,145,77,0.10), transparent 60%);
}
.hero .wrap { position: relative; padding-block: clamp(3.75rem, 9vw, 7rem); }
.hero__tag {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.75rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); background: rgba(255,145,77,0.12);
  border: 1px solid rgba(255,145,77,0.35); border-radius: 999px;
}
.hero h1 { font-size: clamp(2.25rem, 6vw, 4rem); max-width: 20ch; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--accent); white-space: nowrap; }
.hero__lead { font-size: clamp(1.03rem, 2vw, 1.22rem); color: #d6d6d6; max-width: 44rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }
.hero__tick { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.hero__tick li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: #d6d6d6; }
.hero__tick svg { flex: none; color: var(--accent); }

/* ---------- Stats ---------- */
.stats { background: var(--accent); }
.stats ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
            margin: 0; padding: 0; list-style: none; }
.stats li { padding: 1.6rem 1.25rem; text-align: center; color: #2b1a09;
            border-right: 1px solid rgba(43,26,9,0.16); }
.stats li:last-child { border-right: 0; }
.stats b { display: block; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.stats span { font-size: 0.83rem; font-weight: 650; letter-spacing: 0.04em; opacity: 0.8; }
@media (max-width: 40rem) { .stats li:nth-child(2n) { border-right: 0; } }

/* ---------- Generic grid ---------- */
.grid { display: grid; gap: 1.35rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---------- Who we are ---------- */
.about { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 58rem) { .about { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; } }
.about__pts { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
@media (min-width: 34rem) { .about__pts { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; } }
.about__pts li { display: flex; gap: 0.9rem; }
.about__pts svg { flex: none; margin-top: 0.15rem; color: var(--accent-dk); }
.about__pts b { display: block; margin-bottom: 0.15rem; font-size: 0.99rem; }
.about__pts p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* ---------- Photo frame / placeholders ---------- */
.shot { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper-2);
        border: 1px solid var(--line); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--tall { aspect-ratio: 4 / 5; }
.shot--wide { aspect-ratio: 4 / 3; }
/* Side-by-side before/after photos, 3:2 so neither half gets cropped. */
.shot--pair { aspect-ratio: 3 / 2; }
.ph {
  display: grid; place-content: center; justify-items: center; gap: 0.7rem;
  height: 100%; padding: 1.5rem; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.022) 12px 24px), var(--paper-2);
  color: #9a9a9a;
}
.ph img { width: 3.5rem; height: auto; opacity: 0.5; }
.ph b { font-size: 0.85rem; font-weight: 700; color: #8a8a8a; letter-spacing: 0.02em; }
.ph small { font-size: 0.76rem; max-width: 17rem; line-height: 1.5; }

/* ---------- Service cards ---------- */
.svc {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.svc:hover { border-color: #d2d0cb; box-shadow: 0 16px 38px rgba(0,0,0,0.08); transform: translateY(-3px); }
.svc__media { position: relative; aspect-ratio: 3 / 2; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.svc__media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.svc__num {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.5rem;
  background: var(--accent); color: #2b1a09;
  font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; border-radius: 7px;
}
.svc h3 a { text-decoration: none; }
.svc h3 a:hover { color: var(--accent-dk); }
.svc__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
.svc__body p { color: var(--muted); font-size: 0.96rem; }
.svc__list { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.svc__list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.42rem;
                font-size: 0.91rem; color: var(--muted); line-height: 1.5; }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.45rem; height: 0.45rem; background: var(--accent); border-radius: 2px;
}
.svc__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.15rem;
            margin-top: auto; padding-top: 0.35rem; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 2rem 0 2.25rem; }
.filter {
  padding: 0.55rem 1.1rem; font: inherit; font-size: 0.88rem; font-weight: 650;
  color: var(--muted); background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; transition: all 0.15s ease;
}
.filter:hover { border-color: var(--accent); color: var(--text); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 650; color: var(--muted); }
.gallery [hidden] { display: none; }

/* Gallery photos are buttons: click one to open it full size in the lightbox. */
.gallery .shot {
  display: block; width: 100%; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: zoom-in;
}
.gallery .shot::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0);
  transition: background 0.15s ease;
}
.gallery .shot:hover { border-color: #d2d0cb; }
.gallery .shot:hover::after { background: rgba(0,0,0,0.12); }
.gallery .shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.shot__zoom {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 2;
  display: grid; place-items: center; width: 2.15rem; height: 2.15rem;
  border-radius: 8px; background: rgba(28,28,28,0.66); color: #fff;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.gallery .shot:hover .shot__zoom,
.gallery .shot:focus-visible .shot__zoom { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(16,16,16,0.94);
}
.lb[data-open="true"] { display: flex; }
.lb[hidden], .lb__btn[hidden] { display: none; }
.lb__fig { margin: 0; max-width: min(100%, 82rem); text-align: center; }
.lb__img {
  display: block; margin: 0 auto; max-width: 100%;
  max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r); background: #101010;
}
.lb__cap {
  margin-top: 1rem; color: var(--on-dark);
  font-size: 0.95rem; font-weight: 650; line-height: 1.4;
}
.lb__cap span {
  display: block; margin-top: 0.25rem; color: var(--on-dark-m);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.lb__btn {
  position: absolute; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; padding: 0;
  color: var(--on-dark); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  cursor: pointer; transition: all 0.15s ease;
}
.lb__btn:hover { background: var(--accent); border-color: var(--accent); color: #2b1a09; }
.lb__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lb__close { top: clamp(0.75rem, 2.5vw, 1.5rem); right: clamp(0.75rem, 2.5vw, 1.5rem); }
.lb__prev { left: clamp(0.5rem, 2.5vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(0.5rem, 2.5vw, 1.5rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
  .lb__prev, .lb__next { top: auto; bottom: clamp(0.75rem, 3vw, 1.5rem); transform: none; }
  .lb__img { max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); }
}
body[data-lb="open"] { overflow: hidden; }

/* ---------- Why us ---------- */
.why { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.why article { padding: 1.6rem 1.5rem; background: rgba(255,255,255,0.04);
               border: 1px solid var(--line-dk); border-radius: var(--r); }
.why__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 1.1rem;
             background: rgba(255,145,77,0.15); color: var(--accent); border-radius: 9px; }
.why h3 { color: var(--on-dark); }
.why p { margin: 0; font-size: 0.94rem; color: var(--on-dark-m); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 1.4rem; border-top: 3px solid var(--line); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: block; margin-bottom: 0.5rem;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--accent);
}
.step p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* ---------- Service area ---------- */
.area { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 54rem) { .area { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.area__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
              gap: 0.15rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.area__list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0;
                 font-size: 0.96rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.area__list svg { flex: none; color: var(--accent-dk); }

/* ---------- Form ---------- */
.estimate__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 58rem) { .estimate__grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.contact-list { margin: 2.25rem 0 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 0.95rem; margin-bottom: 1.4rem; }
.contact-list svg { flex: none; margin-top: 0.25rem; color: var(--accent); }
.contact-list strong { display: block; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase;
                       color: var(--on-dark-m); font-weight: 750; }
.contact-list a, .contact-list span.v { font-size: 1.06rem; font-weight: 700; text-decoration: none; color: var(--on-dark); }
.contact-list a:hover { color: var(--accent); }

form { background: var(--paper); border-radius: var(--r); padding: 1.85rem; color: var(--text); }
.field { margin-bottom: 1.15rem; }
.field-row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }
label { display: block; margin-bottom: 0.42rem; font-size: 0.85rem; font-weight: 700; }
label .req { color: var(--accent-dk); }
input, select, textarea {
  width: 100%; padding: 0.82rem 0.95rem; font: inherit; font-size: 0.96rem; color: var(--text);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; appearance: none;
}
textarea { min-height: 7.5rem; resize: vertical; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235f5f5f' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
input::placeholder, textarea::placeholder { color: #9a9a9a; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--paper);
  outline: none; box-shadow: 0 0 0 3px rgba(255,145,77,0.22); }
form .btn { width: 100%; margin-top: 0.4rem; }
.form-note { margin: 0.9rem 0 0; font-size: 0.81rem; color: var(--muted); text-align: center; }

/* ---------- FAQ ---------- */
details { padding: 1.2rem 1.45rem; margin-bottom: 0.7rem;
          background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
details[open] { border-color: #d2d0cb; }
summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between;
          gap: 1rem; font-size: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent-dk); font-size: 1.45rem; line-height: 1; font-weight: 400; }
details[open] summary::after { content: "\2212"; }
details p { margin: 0.85rem 0 0; color: var(--muted); font-size: 0.96rem; }

/* ---------- CTA strip ---------- */
.strip { background: var(--ink); color: var(--on-dark); text-align: center;
         padding: clamp(3rem, 7vw, 4.5rem) 0; }
.strip h2 { margin-bottom: 0.6rem; }
.strip p { max-width: 42rem; margin: 0 auto 1.9rem; color: var(--on-dark-m); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-3); color: var(--on-dark-m); padding: 3.75rem 0 2rem; font-size: 0.93rem; }
.footer-grid { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h4 { margin: 0 0 1rem; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase;
                  color: var(--on-dark); font-weight: 750; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.social { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.4rem; font-size: 0.87rem; }
.social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none;
            color: var(--on-dark); border: 1px solid var(--line-dk); border-radius: 9px;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.social a:hover { background: var(--accent); border-color: var(--accent); color: #2b1a09; }
.site-footer .brand__name { color: var(--on-dark); }
.site-footer .brand__name span { color: var(--on-dark-m); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
                 margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dk); font-size: 0.85rem; }

/* ==========================================================================
   Service pages
   Used by hardscaping.html, excavation-grading.html, property-cleanup.html
   and junk-removal.html. The home page doesn't use any of it.
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.crumbs { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
             margin: 0; padding: 0.75rem 0; list-style: none; color: var(--muted); }
.crumbs a { text-decoration: none; font-weight: 650; }
.crumbs a:hover { color: var(--accent-dk); }
.crumbs li + li::before { content: "/"; margin-right: 0.45rem; color: #c6c4c0; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 700; }

/* ---------- Page hero ----------
   Same treatment as the home page hero, a notch shorter so the content starts
   higher up: an interior page has already been chosen, it isn't selling. */
.hero--page .wrap { padding-block: clamp(3rem, 6.5vw, 5rem); }
.hero--page h1 { font-size: clamp(2.05rem, 5vw, 3.35rem); max-width: 22ch; }

/* ---------- "What's included" cards ---------- */
.inc { padding: 1.7rem 1.6rem 1.5rem;
       background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.section--alt .inc { background: var(--paper); }
.inc h3 { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.inc h3 svg { flex: none; color: var(--accent-dk); }
/* Optional "Starting at $X / sq ft" line under a card heading. */
.inc__price {
  display: inline-flex; align-items: baseline; gap: 0.32rem;
  margin: -0.3rem 0 1rem; padding: 0.38rem 0.8rem;
  background: rgba(255,145,77,0.13); border-radius: 999px;
  font-size: 0.79rem; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-dk);
}
.inc__price b { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.inc__price span { font-weight: 700; }
.inc .svc__list { margin-bottom: 0; }
.inc .svc__list li:last-child { margin-bottom: 0; }

/* ---------- Callout ---------- */
.callout {
  display: flex; gap: 1.1rem; align-items: flex-start;
  margin-top: 2.5rem; padding: 1.5rem 1.6rem;
  background: rgba(255,145,77,0.09); border: 1px solid rgba(255,145,77,0.38);
  border-radius: var(--r);
}
.callout svg { flex: none; margin-top: 0.15rem; color: var(--accent-dk); }
.callout b { display: block; margin-bottom: 0.2rem; }
.callout p { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* ---------- Other services ---------- */
.xlinks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.xlink {
  display: flex; gap: 1rem; align-items: center;
  padding: 1.2rem 1.3rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.xlink:hover { border-color: #d2d0cb; box-shadow: 0 14px 30px rgba(0,0,0,0.08); transform: translateY(-3px); }
.xlink__n { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
            background: var(--accent); color: #2b1a09;
            font-size: 0.88rem; font-weight: 800; border-radius: 7px; }
.xlink__t b { display: block; font-size: 1rem; letter-spacing: -0.015em; color: var(--text); }
/* Scoped to .xlink__t on purpose: a bare `.xlink span` rule here outranks
   .xlink__n and flattens the number badge back to a block. */
.xlink__t span { display: block; margin-top: 0.1rem; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }