/* fonts.css */
/* Libre Franklin (SIL Open Font License), self-hosted latin subset; variable font covers 400-900 */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(assets/fonts/libre-franklin-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(97.5% 0.006 95); --color-paper-2: oklch(94% 0.007 95); --color-paper-3: oklch(89.5% 0.008 95);
  --color-ink: oklch(10% 0.006 95); --color-ink-2: oklch(16% 0.006 95); --color-muted: oklch(40% 0.008 95);
  --color-rule: oklch(10% 0.006 95);
  --color-accent: oklch(90% 0.19 105); --color-accent-ink: oklch(10% 0.006 95); --color-focus: oklch(48% 0.1 110);
  --font-display: "Libre Franklin", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  --font-outlier: var(--font-display);
  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 3px; --shadow-card: none;
  --tracking-display: -0.03em; --display-weight: 900;
}

/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: duotone ink paper con=24 */
[data-slot]:has(> img) { isolation: isolate; background: var(--color-paper); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
[data-slot] > img { z-index: 0; filter: grayscale(1) contrast(1.24); mix-blend-mode: multiply; }
[data-slot]:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-ink); mix-blend-mode: lighten; pointer-events: none; }

/* styles.css */
/* Hallmark · shape: Split Studio · genre: editorial · theme: Brutal (deal 3/3, seed pro-hauling-junk-removal-07ff) · job: hire · draw: 58552c
 * hero: Stage · nav: slab · footer: letter close · imagery: user promotional artwork, natural colour · signature: the supplied $40 offer as a shared-rule price panel
 * axes: light/grotesk-heavy/chromatic-green · posture: committed · brand: MK PRO (supplied images) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, retained the MK PRO truck artwork and real starting price rather than generic stock imagery */
/* Hallmark · hero-review: in-thread, crop and spacing resolved · finish-review: in-thread, copy, disclosure visibility and control height resolved · sweep: 0 FAIL, 0 REFLEX, 0 WARN */
:root {
  --color-paper: oklch(97.5% 0.006 125);
  --color-paper-2: oklch(94% 0.012 125);
  --color-paper-3: oklch(89.5% 0.016 125);
  --color-ink: oklch(21% 0.016 125);
  --color-ink-2: oklch(29% 0.02 125);
  --color-muted: oklch(43% 0.025 125);
  --color-rule: var(--color-ink);
  --color-accent: oklch(84% 0.22 125);
  --color-accent-ink: var(--color-ink);
  --color-focus: oklch(47% 0.12 125);
  --color-clear: transparent;
  --tracking-display: -0.045em;
  --text-display: clamp(3rem, 5.6vw + 0.4rem, 5.5rem);
  --container: 1440px;
  --logo-green: #6cb414; --logo-green-deep: #2f6a06; --logo-black: #0b0d0a;
}
body { font-size: 17px; font-synthesis: none; }
h1, h2 { text-transform: uppercase; line-height: 1.04; }
h3 { letter-spacing: -0.02em; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: var(--color-clear); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skip { position: absolute; top: -100px; left: var(--space-md); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
/* nav: logo colours (green #6cb414 / deep #2f6a06 / black slab / white), sticky, compacts on scroll */
.site-header { --nav-h: 100px; --nav-h-compact: 72px; --brand-w: 200px; --brand-w-compact: 150px; position: sticky; top: 0; z-index: var(--z-sticky-nav); background: #fff; border-bottom: var(--rule-bar) solid var(--logo-green); transition: box-shadow var(--dur-short) var(--ease-out), margin var(--dur-short) var(--ease-out); }
.site-header.is-scrolled { margin-bottom: calc(var(--nav-h) - var(--nav-h-compact)); box-shadow: 0 1px 0 var(--logo-black), 0 10px 24px -12px rgb(0 0 0 / 0.35); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); transition: min-height var(--dur-short) var(--ease-out); }
.is-scrolled .nav-row { min-height: var(--nav-h-compact); }
.brand { display: flex; align-items: center; flex-shrink: 0; width: var(--brand-w); transition: width var(--dur-short) var(--ease-out); }
.is-scrolled .brand { width: var(--brand-w-compact); }
.brand img { width: 100%; height: auto; }
.nav-row nav { display: flex; align-items: center; gap: var(--space-xl); }
.nav-row nav a { white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; min-height: 44px; display: flex; align-items: center; color: var(--logo-black); border-bottom: 3px solid transparent; padding-top: 3px; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.nav-row nav a:hover { color: var(--logo-green-deep); border-bottom-color: var(--logo-green); }
.nav-phone { display: inline-flex; align-items: stretch; min-height: 44px; font-weight: 700; font-size: 16px; text-decoration: none; background: var(--logo-black); color: #fff; }
.nav-phone span { display: flex; align-items: center; padding-inline: var(--space-sm); background: var(--logo-green); color: var(--logo-black); text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; }
.nav-phone b { white-space: nowrap; display: flex; align-items: center; padding-inline: var(--space-md); font-weight: 700; transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.nav-phone:hover b { background: var(--logo-green-deep); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border: 0; background: var(--logo-green); cursor: pointer; flex-shrink: 0; }
.nav-toggle i { display: block; height: 3px; background: var(--logo-black); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.nav-open .nav-toggle i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle i:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* hero: full-bleed truck photo, darkened from the left so the copy stays legible */
.hero-band { position: relative; isolation: isolate; overflow: hidden; background: var(--logo-black); color: #fff; }
.hero-bg { position: absolute; top: 0; right: 0; z-index: -2; width: 72%; height: 100%; object-fit: cover; object-position: 50% 55%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 13 10 / 0.85) 0%, rgb(11 13 10 / 0.55) 40%, rgb(11 13 10 / 0) 70%), linear-gradient(0deg, rgb(11 13 10 / 0.45), rgb(11 13 10 / 0) 35%); }
.hero-band :focus-visible { outline-color: #fff; }
.hero { display: grid; align-items: center; min-height: calc(100dvh - 103px); padding-block: var(--space-2xl); }
.intro-copy { display: grid; justify-items: start; gap: var(--space-lg); max-width: 640px; }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / 0.35); }
.hero .btn { background: var(--logo-green); border-color: var(--logo-green); color: var(--logo-black); }
.hero .btn:hover { background: #fff; border-color: #fff; color: var(--logo-black); }
.hero .btn-quiet { background: var(--color-clear); border-color: #fff; color: #fff; }
.hero .btn-quiet:hover { background: #fff; color: var(--logo-black); }
.hero h1 { max-width: 11ch; }
.hero .lead { max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-lg); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-quiet { background: var(--color-clear); color: var(--color-ink); }
.btn-quiet:hover { background: var(--color-paper-2); color: var(--color-ink); }
.price-panel { display: flex; align-items: center; gap: var(--space-xl); margin-top: var(--space-sm); padding: var(--space-md) var(--space-lg); border-left: 6px solid var(--logo-green); background: rgb(11 13 10 / 0.62); color: #fff; }
.price-panel p { font-size: 14px; }
.price { display: block; font-size: clamp(3rem, 4.5vw, 4.5rem); line-height: 1; font-weight: 900; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--logo-green); }
.price-note { max-width: 19ch; }
.services-section { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.service-layout, .quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.section-intro { display: grid; align-content: start; justify-items: start; gap: var(--space-lg); }
.section-intro p { max-width: 34ch; }
.process-section { padding-block: var(--section-gap); }
.process-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; margin: var(--space-2xl) 0 0; padding: 0; }
.process-list li { border-top: var(--rule-bar) solid var(--color-rule); padding-top: var(--space-lg); }
.process-list p { margin-top: var(--space-md); max-width: 32ch; }
.areas-section { background: var(--logo-green); color: var(--logo-black); padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--logo-black); }
.areas-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.area-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.area-list li { display: flex; align-items: center; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid rgb(11 13 10 / 0.35); font-weight: 700; }
.area-list li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; background: var(--logo-black); }
.area-note { margin-top: var(--space-lg); max-width: 60ch; }
.area-note a { font-weight: 700; }
.quote-section { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--section-gap-s); border-block: var(--rule-bar) solid var(--color-rule); }
.text-link { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.text-link:hover { text-decoration-thickness: 2px; }
.quote-form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: 16px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 52px; padding: var(--space-xs) var(--space-sm); border: var(--rule-bar) solid var(--color-rule); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-size: 16px; }
.field textarea { resize: vertical; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.optional { font-weight: 400; color: var(--color-muted); }
.field input[type="file"] { padding: var(--space-sm); cursor: pointer; }
.field input[type="file"]::file-selector-button { margin-right: var(--space-sm); padding: var(--space-xs) var(--space-md); border: 0; background: var(--logo-black); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.field input[type="file"]:hover::file-selector-button { background: var(--logo-green-deep); }
.field-hint { font-size: 14px; color: var(--color-muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-alt { font-size: 16px; }
.contact-alt .text-link { overflow-wrap: anywhere; }
.field :is(input, textarea):user-invalid { border-color: var(--color-error); }
.quote-form .btn { justify-self: start; }
.form-help { font-size: 14px; max-width: 52ch; min-height: 1lh; }
.faq-section { padding-block: var(--section-gap-l); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.faq-list details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq-list details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq-list summary { padding-block: var(--space-lg); cursor: pointer; font-weight: 700; font-size: 17px; }
.faq-list summary:hover { text-decoration: underline; }
.faq-list details p { margin-bottom: var(--space-lg); max-width: 52ch; }
.faq-list details:not([open]) > p { display: none; }
.site-footer { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-bar) solid var(--color-rule); }
.footer-contact { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); }
.footer-phone { font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 900; letter-spacing: -0.03em; min-width: 0; }
.footer-phone:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.business-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin-block: var(--space-2xl); }
.business-details dt { font-size: 14px; margin-bottom: var(--space-xs); }
.business-details dd { margin: 0; }
.business-details a { font-weight: 700; overflow-wrap: anywhere; }
.fill { padding: var(--space-2xs); border: 1px dashed var(--color-muted); color: var(--color-muted); font-size: 14px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); font-size: 13px; }
@media (min-width: 120rem) { .hero { min-height: 880px; } }
@media (max-width: 70rem) { .nav-row nav { gap: var(--space-lg); } .hero { gap: var(--space-xl); } .hero h1 { font-size: 4rem; } .actions { gap: var(--space-xs); } .btn { padding-inline: var(--space-md); } }
@media (max-width: 70rem) { .nav-row { gap: var(--space-sm); } .nav-phone { margin-left: auto; } .nav-toggle { display: flex; } .nav-row nav { display: none; position: absolute; top: calc(100% + var(--rule-bar)); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-md); background: #fff; border-bottom: var(--rule-bar) solid var(--logo-green); box-shadow: 0 14px 24px -14px rgb(0 0 0 / 0.4); } .nav-open .nav-row nav { display: flex; } .nav-row nav a { min-height: 52px; font-size: 15px; border-bottom: var(--rule-hair) solid var(--color-paper-3); } .nav-row nav a:last-child { border-bottom: 0; } .nav-row nav a:hover { border-bottom-color: var(--color-paper-3); } }
@media (max-width: 60rem) { .site-header { --nav-h: 86px; --nav-h-compact: 64px; --brand-w: 150px; --brand-w-compact: 116px; } .hero { min-height: 0; padding-block: var(--space-3xl); } .hero h1 { font-size: clamp(3rem, 8vw, 5.5rem); } .hero-bg { width: 100%; object-position: 72% 50%; -webkit-mask-image: none; mask-image: none; } .hero-band::before { background: linear-gradient(180deg, rgb(11 13 10 / 0.82) 0%, rgb(11 13 10 / 0.6) 55%, rgb(11 13 10 / 0.78) 100%); } }
@media (max-width: 25rem) { .site-header { --brand-w: 116px; --brand-w-compact: 100px; } .nav-phone { font-size: 13px; } .nav-phone span { display: none; } .nav-phone b { padding-inline: var(--space-xs); white-space: nowrap; } .nav-row { gap: var(--space-xs); } .hero { padding-block: var(--space-xl); } .hero h1 { font-size: 2.85rem; } .price-panel { padding: var(--space-md); gap: var(--space-md); } .price { font-size: 3rem; } .price-note { max-width: 17ch; } }
@media (max-width: 60rem) { .service-layout, .quote-layout, .faq-section, .areas-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .process-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); } .footer-contact { flex-direction: column; align-items: start; gap: var(--space-xl); } .footer-phone { font-size: clamp(1.5rem, 6.5vw, 2.75rem); } .business-details { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .footer-bottom { align-items: start; flex-direction: column; gap: var(--space-md); } .price-panel { padding-block: var(--space-lg); } .quote-form .btn { justify-self: stretch; } }
@media (max-width: 40rem) { .field-pair { grid-template-columns: minmax(0, 1fr); } .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thanks { display: grid; justify-items: start; gap: var(--space-lg); padding-block: var(--section-gap); min-height: 60vh; align-content: center; }

/* footer: full services and service-area lists */
.footer-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-xl); margin-bottom: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer-heading { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-md); }
.footer-lede { margin: 0 0 var(--space-sm); font-weight: 700; }
.footer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: 15px; }
.footer-list-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-list li { padding-block: 6px; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; text-decoration-color: var(--logo-green); text-decoration-thickness: 2px; }
.footer-note { margin: var(--space-md) 0 0; font-size: 14px; }
@media (max-width: 60rem) { .footer-links { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .footer-list, .footer-list-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-list a { display: inline-block; padding-block: 6px; } .footer-list li { padding-block: 0; } .footer-list-areas li { padding-block: 6px; } }

/* services: tile grid, 11 services plus a "text a photo" tile */
.services-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl) var(--gap-columns); margin-bottom: var(--space-2xl); }
.services-head-copy { display: grid; justify-items: start; gap: var(--space-md); max-width: 30rem; }
.service-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.service-tiles > li { display: flex; }
.service-tile { position: relative; flex: 1; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--space-xs); padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 20px); background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.14); border-top: 3px solid var(--logo-green); color: var(--color-paper); text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s; }
.service-tile h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; color: inherit; }
.service-tile p { margin: 0; font-size: 15px; line-height: 1.45; color: rgb(255 255 255 / 0.72); }
.tile-icon { width: 34px; height: 34px; margin-bottom: var(--space-xs); fill: none; stroke: var(--logo-green); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tile-arrow { position: absolute; right: var(--space-lg); bottom: var(--space-md); font-size: 20px; line-height: 1; color: var(--logo-green); transition: transform .2s; }
.service-tile:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.3); border-top-color: var(--logo-green); transform: translateY(-3px); }
.service-tile:hover .tile-arrow { transform: translateX(4px); }
.service-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.service-tile-cta { background: var(--logo-green); border-color: var(--logo-green); color: var(--logo-black); }
.service-tile-cta p { color: var(--logo-black); font-weight: 500; }
.tile-phone { white-space: nowrap; font-weight: 700; }
.service-tile-cta .tile-icon { stroke: var(--logo-black); }
.service-tile-cta .tile-arrow { color: var(--logo-black); }
.service-tile-cta:hover { background: #7fcc1c; border-color: #7fcc1c; border-top-color: #7fcc1c; }
@media (prefers-reduced-motion: reduce) { .service-tile, .tile-arrow { transition: none; } .service-tile:hover { transform: none; } .service-tile:hover .tile-arrow { transform: none; } }
@media (max-width: 70rem) { .service-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .services-head { flex-direction: column; align-items: start; } }
@media (max-width: 40rem) {
  .service-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .service-tile { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-md); row-gap: 2px; padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-md); border-top-width: 1px; border-left: 3px solid var(--logo-green); }
  .service-tile-cta { border-left-color: var(--logo-black); }
  .tile-icon { grid-row: 1 / 3; margin: 2px 0 0; width: 30px; height: 30px; }
  .service-tile h3 { font-size: 1.05rem; }
  .service-tile p { font-size: 14px; }
  .tile-arrow { right: var(--space-md); bottom: auto; top: 50%; margin-top: -10px; }
  .service-tile:hover .tile-arrow { transform: none; }
}

/* services.css */
/* Services page: extends the existing MK Hauling site design. */
.nav-row nav a[aria-current="page"] { border-bottom-color: var(--logo-green); }
.service-explore { background: var(--logo-green); color: var(--logo-black); border-color: var(--logo-green); }
.services-back { font-size: 14px; color: var(--color-paper-3); }
.services-back a { color: inherit; text-decoration: none; }
.services-back a:hover { text-decoration: underline; }
.services-hero h1 { max-width: 13ch; }
.service-catalog { padding-block: var(--space-3xl); }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); }
.catalog-heading p { margin-top: var(--space-lg); }
.catalog-heading .text-link { flex-shrink: 0; }
.service-directory { margin-block: var(--space-xl) var(--space-2xl); border-block: 1px solid var(--color-paper-3); }
.service-directory summary { cursor: pointer; padding-block: var(--space-md); font-weight: 700; }
.service-directory nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); padding-block: var(--space-sm) var(--space-lg); }
.service-directory a { font-size: 15px; min-height: 44px; display: flex; align-items: center; }
.service-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.service-card { min-width: 0; scroll-margin-top: 125px; }
.service-media > img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--color-paper-3); }
.service-media { position: relative; }
.photo-label { position: absolute; left: var(--space-sm); bottom: var(--space-sm); padding: 2px 8px; background: rgb(11 13 10 / 0.72); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.service-card-copy { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-md) var(--space-sm); padding-top: var(--space-lg); border-top: 4px solid var(--logo-green); }
.service-number { font-size: 14px; font-weight: 700; padding-top: 5px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.service-card h3 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); text-wrap: pretty; }
.service-card-copy > :not(.service-number):not(h3) { grid-column: 2; }
.service-card-copy > p { font-size: 16px; }
.service-card-copy .service-examples { color: var(--color-muted); font-size: 14px; }
.service-prep { border-top: 1px solid var(--color-paper-3); }
.service-prep summary { padding-block: var(--space-sm); cursor: pointer; font-size: 14px; font-weight: 700; }
.service-prep p { font-size: 15px; margin-top: var(--space-xs); }
.service-quote { justify-self: start; gap: var(--space-md); text-decoration: none; border-bottom: 2px solid var(--logo-green); }
.service-quote:hover { background: var(--color-paper-3); }
.service-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; border-top: 1px solid var(--color-paper-3); padding-top: var(--space-xl); }
.service-card:last-child .service-card-copy { border-top: 0; padding: 0; }
.service-photo-note { margin-top: var(--space-xl); font-size: 13px; color: var(--color-muted); }
.service-help { background: var(--logo-green); color: var(--logo-black); padding-block: var(--space-2xl); }
.service-help-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.service-help-layout > div { display: grid; justify-items: start; gap: var(--space-lg); }
.service-help-layout > div > p:last-child { font-size: 14px; }
@media (max-width: 60rem) {
  .catalog-heading { align-items: start; flex-direction: column; gap: var(--space-md); }
  .service-cards { column-gap: var(--space-lg); }
  .service-card-copy { grid-template-columns: 28px minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .service-catalog { padding-block: var(--space-2xl); }
  .service-directory nav, .service-help-layout, .service-cards, .service-card:last-child { grid-template-columns: minmax(0, 1fr); }
  .service-directory { margin-bottom: var(--space-xl); }
  .service-cards { gap: var(--space-xl); }
  .service-card:last-child { padding-top: 0; border-top: 0; gap: 0; }
  .service-card:last-child .service-card-copy { border-top: 4px solid var(--logo-green); padding-top: var(--space-lg); }
}