/*------------------------- 00. Fonts, self-hosted ------------------------

   Plus Jakarta Sans used to come from fonts.googleapis.com. On a phone on
   a slow connection that costs two extra DNS+TLS handshakes before any
   text can paint, and the stylesheet that names the font files is itself
   a round trip away. Served from our own domain they start downloading as
   soon as this file is parsed.

   These are the variable font files Google serves: one per subset and
   style, covering every weight from 200 to 900. font-display: swap means
   text is readable in the fallback face immediately and re-renders when
   the real one arrives, rather than sitting invisible.

   Licence: SIL Open Font License 1.1, which permits self-hosting.
   Refresh with: python3 fonts/refresh.py
   --------------------------------------------------------------------- */
@font-face{
	font-family: "Plus Jakarta Sans";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
	font-family: "Plus Jakarta Sans";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-italic.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;
}
@font-face{
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-normal.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;
}

/*==========================================================================
  junk.css — No BS Junk Removal
  ==========================================================================

  The ONLY stylesheet the site loads. It used to sit on top of Bootstrap
  (228 KB), Font Awesome (96 KB + webfonts), SlickNav and the lawn site's
  120 KB template CSS; this file replaces all four. Nothing here depends on
  any of them.

  Same family as no-bs-yardwork.com — forest green, brand green, honeydew
  bands, Plus Jakarta Sans, heavy uppercase headings, green pill buttons —
  without being a copy of it.

  COLOUR POLICY: every colour is a token below. Add a token before adding a
  hex to a component rule. Contrast ratios are measured, not guessed.

  Contents
    01. Tokens
    02. Base & typography
    03. Layout: container, grid, utilities
    04. Header & nav
    05. Buttons
    06. Page header & breadcrumb
    07. Homepage hero & trust bar
    08. Section titles & bands
    09. Cards: reason, quote, review, post
    10. What We Take: grid, list, category items, A-Z, can't take
    11. Pricing & tables
    12. Callouts, steps, lists, area pills
    13. FAQ
    14. Photos & before/after
    15. Blog article
    16. Forms & JotForm
    17. Footer
    18. Mobile call bar
    19. Motion
    20. Accessibility & staging banner
==========================================================================*/


/*------------------------------ 01. Tokens ------------------------------*/

:root{
	/* Brand (shared with the lawn site) */
	--primary-color:   #0B3D2C;  /* forest — header, footer, dark bands        */
	--primary-deep:    #072A1E;  /* forest, one step down — hovers, hero base  */
	--accent-color:    #2A7D2E;  /* brand green — buttons, icons. 5.16:1 on white */
	--accent-hover:    #236A27;  /* darker brand green for hover, 6.6:1 on white */
	--accent-on-dark:  #6FCF7C;  /* green TEXT on forest — 6.34:1               */
	--secondary-color: #F0F7EF;  /* honeydew band                               */
	--white-color:     #FFFFFF;

	/* Neutrals */
	--ink:             #0B3D2C;  /* headings                                    */
	--text-color:      #46514C;  /* body copy — 8.3:1 on white, 7.7:1 on band   */
	--muted:           #5F6B66;  /* captions, meta — 5.6:1 on white             */
	--divider-color:   #DFE8E3;
	--on-dark-muted:   rgba(255,255,255,.78);
	--dark-divider:    rgba(255,255,255,.16);

	/* Signals */
	--highlight:       #F5C542;  /* safety yellow — focus ring, price marker    */
	--warning-color:   #9B2C2C;  /* "we can't take this" — 7.53:1 on white      */
	--warning-tint:    #FDECEC;
	--error-color:     #C24141;

	/* Shape & type */
	--radius:    16px;
	--radius-sm: 10px;
	--shadow-sm: 0 1px 2px rgba(7,42,30,.06), 0 2px 8px rgba(7,42,30,.05);
	--shadow-md: 0 2px 4px rgba(7,42,30,.06), 0 12px 32px rgba(7,42,30,.10);
	--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--header-h: 76px;
}


/*------------------------- 02. Base & typography ------------------------*/

*,
*::before,
*::after{ box-sizing: border-box; }

html{
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body{
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--text-color);
	background-color: var(--white-color);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6{
	margin: 0 0 .5em;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ink);
}
h1{ font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem); }
h2{ font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.75rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1.2em; }
ul, ol{ margin: 0 0 1.2em; }
figure{ margin: 0; }
img, svg, video{ max-width: 100%; }
img{ height: auto; }
table{ border-collapse: collapse; }
blockquote{ margin: 0; }

a{
	color: var(--accent-color);
	text-decoration: none;
	transition: color .2s ease;
}
a:hover{ color: var(--accent-hover); }

/* Links inside running text are underlined. Colour alone is not enough to
   mark a link: it fails WCAG 1.4.1, and it is invisible to anyone who cannot
   separate the green from the body grey. Buttons, nav items, cards and tiles
   all carry a class and are excluded — they are already obviously clickable
   from their shape. */
main p a:not([class]),
main dd a:not([class]),
.faq-body a:not([class]){
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

strong{ font-weight: 800; }

.lead-in{ font-size: 1.15rem; max-width: 760px; }


/*--------------- 03. Layout: container, grid, utilities -----------------*/

.container{
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* A deliberately small grid: only the column classes the pages use. Mobile
   first — every column is full width until its breakpoint. */
.row{
	--gx: 28px;
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--gx) / -2);
}
.row > *{
	width: 100%;
	max-width: 100%;
	padding-inline: calc(var(--gx) / 2);
}
.row.g-4{ row-gap: 24px; }

.col-6{ width: 50%; }

@media (min-width: 768px){
	.col-md-4{ width: 33.3333%; }
	.col-md-6{ width: 50%; }
	.col-md-12{ width: 100%; }
}
@media (min-width: 992px){
	.col-lg-3{ width: 25%; }
	.col-lg-4{ width: 33.3333%; }
	.col-lg-5{ width: 41.6667%; }
	.col-lg-6{ width: 50%; }
	.col-lg-7{ width: 58.3333%; }
	.col-lg-8{ width: 66.6667%; }
	.col-lg-9{ width: 75%; }
	.col-lg-10{ width: 83.3333%; }
	.col-lg-12{ width: 100%; }
}

.align-items-center{ align-items: center; }
.justify-content-center{ justify-content: center; }
.d-inline-flex{ display: inline-flex; }
.text-center{ text-align: center; }
.text-start{ text-align: left; }
.mb-4{ margin-bottom: 24px; }

.section-space{ padding-block: clamp(56px, 7vw, 96px); }
.section-space-sm{ padding-block: clamp(40px, 5vw, 64px); }

.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }


/*--------------------------- 04. Header & nav ---------------------------*/

.site-header{
	position: sticky;
	top: 0;
	z-index: 900;
	background-color: var(--primary-color);
	border-bottom: 3px solid var(--accent-color);
	transition: box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(0,0,0,.22); }

.header-bar{
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.brand-lockup{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.brand-lockup img{ height: 46px; width: auto; display: block; }
.division-tag{
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--white-color);
	background-color: var(--accent-color);
	padding: 5px 9px;
	border-radius: 6px;
	line-height: 1;
	white-space: nowrap;
}

.main-menu{ margin-left: auto; }
.nav-list,
.sub-menu{
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list > li{ position: relative; }
.nav-list a{
	display: block;
	color: var(--white-color);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}
.nav-list a:hover{ color: var(--accent-on-dark); }

/* The page you are on. aria-current is the real signal — the styling hangs off
   it rather than off a class, so the two can never disagree. A dropdown parent
   whose child you are on is marked more faintly. */
.nav-list a[aria-current="page"]{ color: var(--accent-on-dark); }
.nav-list > li > a[aria-current="page"],
.nav-list > li > a[data-section="current"]{
	box-shadow: inset 0 -3px 0 var(--accent-on-dark);
}
.nav-list > li > a[data-section="current"]{ color: var(--white-color); }
.nav-list > li:last-child > a[aria-current="page"]{
	box-shadow: none;
	background-color: var(--white-color);
	color: var(--primary-color);
}

/* The last nav item is "Get a Quote" — the one action every page wants. */
.nav-list > li:last-child > a{
	background-color: var(--accent-color);
	border-radius: 100px;
}
.nav-list > li:last-child > a:hover{
	background-color: var(--white-color);
	color: var(--primary-color);
}

.header-call{
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--white-color);
	flex-shrink: 0;
}
.header-call:hover{ color: var(--white-color); }
.hc-icon{
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--accent-color);
	display: grid;
	place-items: center;
	transition: background-color .2s ease, color .2s ease;
}
.hc-icon svg{ width: 22px; height: 22px; }
.header-call:hover .hc-icon{ background-color: var(--white-color); color: var(--primary-color); }
.hc-text{ display: flex; flex-direction: column; line-height: 1.2; }
.hc-label{ font-size: 13px; color: var(--on-dark-muted); }
.header-phone{ font-size: 19px; font-weight: 800; }

.nav-toggle{
	display: none;
	width: 46px;
	height: 46px;
	margin-left: 4px;
	border: 0;
	border-radius: 12px;
	background-color: var(--accent-color);
	color: var(--white-color);
	cursor: pointer;
	place-items: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform .25s ease, background-color .25s ease;
}
.nav-toggle-bars{ position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after{ content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before{ top: -6px; }
.nav-toggle-bars::after{ top: 6px; }
.nav-open .nav-toggle-bars{ background-color: transparent; }
.nav-open .nav-toggle-bars::before{ transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bars::after{ transform: translateY(-6px) rotate(-45deg); }

/* ---- Desktop: inline nav with dropdowns ---- */
@media (min-width: 1100px){
	.nav-list{ display: flex; align-items: center; gap: 2px; }
	.nav-list > li > a{ padding: 10px 12px; border-radius: 8px; }
	.nav-list > li:last-child > a{ padding: 10px 18px; margin-left: 6px; }

	.has-sub > a::after{
		content: "";
		display: inline-block;
		width: 7px;
		height: 7px;
		margin: 0 0 3px 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}
	.sub-menu{
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 250px;
		padding: 8px;
		background-color: var(--white-color);
		border-radius: 14px;
		box-shadow: var(--shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	/* Invisible bridge across the gap so the menu doesn't close mid-reach. */
	.sub-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
	.has-sub:hover > .sub-menu,
	.has-sub:focus-within > .sub-menu{
		opacity: 1;
		visibility: visible;
		transform: translateY(4px);
	}
	.sub-menu a{
		color: var(--ink);
		padding: 9px 14px;
		border-radius: 8px;
		font-size: 15px;
	}
	.sub-menu a:hover{ background-color: var(--secondary-color); color: var(--accent-color); }
}
@media (min-width: 1100px) and (max-width: 1299px){
	.hc-label{ display: none; }
	.nav-list > li > a{ padding: 10px 9px; }
}

/* ---- Below 1100px: slide-down drawer ---- */
@media (max-width: 1099px){
	.nav-toggle{ display: grid; }
	.header-call{ margin-left: auto; }
	.hc-text{ display: none; }

	.main-menu{
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding: 12px 20px 28px;
		background-color: var(--primary-color);
		border-top: 1px solid var(--dark-divider);
		box-shadow: 0 18px 30px rgba(0,0,0,.25);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	.nav-open .main-menu{ visibility: visible; opacity: 1; transform: none; }

	.nav-list > li{ border-bottom: 1px solid var(--dark-divider); }
	.nav-list > li > a{ padding: 14px 4px; font-size: 17px; font-weight: 700; }
	.nav-list > li:last-child{ border-bottom: 0; padding-top: 16px; }
	.nav-list > li:last-child > a{ text-align: center; padding: 14px; }
	.sub-menu{ padding: 0 0 12px 14px; border-left: 2px solid var(--accent-color); margin: 0 0 4px 4px; }
	.sub-menu a{ padding: 8px 4px; font-size: 15px; color: var(--on-dark-muted); font-weight: 600; }

	/* Dropdown parents: label links to the hub, chevron opens the list. The
	   list only collapses once site.js is running (.nav-js), so with
	   JavaScript off every link is still in the drawer. */
	.has-sub{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	.has-sub > .sub-menu{ grid-column: 1 / -1; }
	.sub-toggle{
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--white-color);
		cursor: pointer;
	}
	.sub-toggle::before{
		content: "";
		width: 10px;
		height: 10px;
		margin-top: -5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease, margin .2s ease;
	}
	.sub-toggle[aria-expanded="true"]::before{ transform: rotate(-135deg); margin-top: 5px; }
	.sub-toggle:hover,
	.sub-toggle:focus-visible{ background-color: var(--dark-divider); color: var(--accent-on-dark); }
	.nav-js .has-sub:not(.sub-open) > .sub-menu{ display: none; }
}
@media (min-width: 1100px){
	.sub-toggle{ display: none; }
}
@media (max-width: 575px){
	:root{ --header-h: 68px; }
	.brand-lockup img{ height: 38px; }
	.division-tag{ font-size: 10px; padding: 4px 7px; }
	.header-bar{ gap: 10px; }
	/* The fixed call bar at the bottom carries the phone on phones. */
	.header-call{ display: none; }
	.nav-toggle{ margin-left: auto; }
}


/*----------------------------- 05. Buttons ------------------------------*/

/* The brand's green pill with a round arrow badge. On the lawn site the badge
   hangs half outside the pill, which collides with the screen edge on phones;
   here it sits inside, so the button is the same shape at every width. */
.btn-default{
	--btn-bg: var(--accent-color);
	--btn-fg: var(--white-color);
	--badge-bg: var(--white-color);
	--badge-fg: var(--accent-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 52px;
	padding: 6px 6px 6px 26px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	color: var(--btn-fg);
	background-color: var(--btn-bg);
	border: 2px solid transparent;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-default::after{
	content: "";
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--badge-bg);
	/* Arrow drawn with a gradient mask so it takes the badge colour. */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A7D2E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	transition: transform .2s ease;
}
.btn-default:hover{
	--btn-bg: var(--accent-hover);
	color: var(--btn-fg);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(42,125,46,.28);
}
.btn-default:hover::after{ transform: translateX(3px); }

/* Outlined secondary: no badge, so it pads evenly. */
.btn-default.btn-ghost{
	--btn-bg: transparent;
	padding: 6px 26px;
	border-color: rgba(255,255,255,.85);
}
.btn-default.btn-ghost::after{ display: none; }
.btn-default.btn-ghost:hover{
	--btn-bg: var(--white-color);
	--btn-fg: var(--primary-color);
	box-shadow: none;
}
.btn-default.btn-ghost.on-light{
	--btn-fg: var(--primary-color);
	border-color: var(--primary-color);
}
.btn-default.btn-ghost.on-light:hover{
	--btn-bg: var(--primary-color);
	--btn-fg: var(--white-color);
}

.btn-row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
}
.btn-row.justify-content-center{ justify-content: center; }

@media (max-width: 575px){
	.btn-row{ flex-direction: column; align-items: stretch; }
	.btn-row .btn-default{ width: 100%; }
	.btn-default{ padding-left: 22px; }
}


/*-------------------- 06. Page header & breadcrumb ----------------------*/

.page-header{
	position: relative;
	padding: clamp(40px, 6vw, 72px) 0 clamp(34px, 5vw, 56px);
	background-color: var(--secondary-color);
	border-bottom: 1px solid var(--divider-color);
	overflow: hidden;
}
/* A faint diagonal hazard stripe in the corner — hauling, not landscaping. */
.page-header::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: min(38vw, 420px);
	height: 100%;
	background: repeating-linear-gradient(-45deg,
		rgba(42,125,46,.07) 0 16px, transparent 16px 32px);
	-webkit-mask-image: linear-gradient(to left, #000, transparent);
	mask-image: linear-gradient(to left, #000, transparent);
	pointer-events: none;
}
.page-header .container{ position: relative; z-index: 1; }
.page-header-box h1{
	margin: 0 0 12px;
	text-transform: uppercase;
	max-width: 900px;
}

.breadcrumb{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
}
.breadcrumb-item + .breadcrumb-item::before{
	content: "/";
	padding: 0 10px;
	color: var(--muted);
}
.breadcrumb-item a{ color: var(--accent-color); }
.breadcrumb-item a:hover{ color: var(--primary-color); }


/*----------------------- 07. Homepage hero & trust ----------------------*/

.junk-hero{
	position: relative;
	padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
	background-color: var(--primary-color);
	background-image:
		radial-gradient(ellipse 60% 80% at 85% 40%, rgba(42,125,46,.45), transparent 70%),
		linear-gradient(160deg, var(--primary-color) 0%, var(--primary-deep) 100%);
	color: var(--white-color);
	overflow: hidden;
	isolation: isolate;
}
/* Hazard-stripe texture along the bottom edge — hauling, not landscaping. */
.junk-hero::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	z-index: -1;
	background: repeating-linear-gradient(-45deg, var(--highlight) 0 14px, var(--primary-deep) 14px 28px);
	opacity: .9;
}

.hero-photo{
	position: relative;
	margin: 0 0 0 auto;
	max-width: 460px;
}
.hero-photo img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.hero-badge{
	position: absolute;
	left: -28px;
	bottom: 36px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px 14px 16px;
	background-color: var(--white-color);
	border-radius: 18px;
	box-shadow: 0 16px 36px rgba(0,0,0,.28);
	color: var(--ink);
}
.hb-num{ font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent-color); }
.hb-lab{ font-size: 13px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 1199px){ .hero-badge{ left: 16px; bottom: 16px; } }
@media (max-width: 991px){ .hero-photo{ display: none; } }

.junk-hero h1{
	font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.2rem);
	line-height: 1;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 22px;
}
.junk-hero h1 .accent{ color: var(--accent-on-dark); }
.hero-sub{
	font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
	color: rgba(255,255,255,.9);
	max-width: 640px;
	margin-bottom: 16px;
}
/* The price anchor. No competitor in this market puts a number above the
   fold, so it gets full white and a yellow marker under the figures. */
.hero-price{
	font-size: 1.1rem;
	color: var(--white-color);
	max-width: 640px;
	margin: 0;
}
.hero-price strong{
	color: var(--white-color);
	background-image: linear-gradient(transparent 68%, rgba(245,197,66,.55) 68%);
	padding: 0 2px;
}
.junk-hero .trust-bar{ margin: 26px 0 30px; }
.micro-trust{
	color: rgba(255,255,255,.75);
	font-size: 15px;
	margin: 22px 0 0;
}

.trust-bar{
	background-color: var(--white-color);
	border-left: 6px solid var(--accent-color);
	border-radius: var(--radius);
	padding: 18px 24px;
	margin: 28px 0 30px;
	max-width: 660px;
	box-shadow: var(--shadow-sm);
}
.trust-bar p{ margin: 0; color: var(--text-color); font-size: 16px; line-height: 1.55; }
.trust-bar strong{ color: var(--primary-color); }

.trust-stats{
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.trust-stats .num{
	display: block;
	font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--accent-color);
}
.trust-stats .lab{ font-size: 15px; color: var(--muted); }

/* ---- Stats band ----
   Sits directly under the hero. Dark, so the page does not run white from the
   hero all the way to the pricing block, and the numbers carry their own
   attribution in the label rather than floating free. */
.stat-band{
	background-color: var(--primary-deep);
	border-bottom: 4px solid var(--highlight);
	padding: clamp(26px, 3.5vw, 40px) 0;
}
.stat-row{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.stat-row li{
	padding-left: 22px;
	border-left: 3px solid var(--highlight);
}
.stat-num{
	display: block;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--white-color);
	letter-spacing: -.02em;
}
.stat-lab{
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--on-dark-muted);
}
@media (max-width: 767px){
	.stat-row{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.stat-lab{ font-size: 13px; }
}


/*---------------------- 08. Section titles & bands ----------------------*/

.bg-tint{ background-color: var(--secondary-color); }
.bg-forest{ background-color: var(--primary-color); color: var(--on-dark-muted); }
.bg-forest :is(h2, h3, h4, strong, li){ color: var(--white-color); }
.bg-forest p{ color: var(--on-dark-muted); }
.bg-forest .lead-in{ color: var(--white-color); }
.bg-forest a:not(.btn-default){ color: var(--accent-on-dark); }

.section-title{ margin-bottom: clamp(28px, 4vw, 44px); }
.section-title h2{ text-transform: uppercase; margin: 0; }
.section-title.text-center h2{ max-width: 860px; margin-inline: auto; }

/* The eyebrow is a <p>, not a heading: it is decoration above the h2. */
.eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--accent-color);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
}
.eyebrow::before{
	content: "";
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background-color: currentColor;
}
.text-center .eyebrow::before{ display: none; }
.bg-forest .eyebrow{ color: var(--accent-on-dark); }


/*------------------- 09. Cards: reason, quote, review, post --------------*/

.reason-card,
.quote-card,
.review-card,
.post-card{
	height: 100%;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.reason-card,
.quote-card{ padding: 32px 28px; }

.reason-card:hover,
.post-card:hover{
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: rgba(42,125,46,.35);
}

.rc-icon{
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background-color: var(--secondary-color);
	color: var(--accent-color);
	display: grid;
	place-items: center;
	margin-bottom: 20px;
}
.rc-icon svg{ width: 28px; height: 28px; }
.reason-card h3{ font-size: 1.2rem; text-transform: uppercase; margin-bottom: 10px; }
.reason-card p{ margin-bottom: 0; }
.reason-card p + p{ margin-top: 12px; }

.quote-card .qc-num{
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--accent-color);
	color: var(--white-color);
	font-weight: 800;
	font-size: 19px;
	margin-bottom: 16px;
}
.quote-card h3{ font-size: 1.15rem; text-transform: uppercase; margin-bottom: 10px; }
.quote-card p:last-child{ margin-bottom: 0; }

.review-card{ padding: 30px 28px; display: flex; flex-direction: column; }
.review-card .stars{ color: #E0A800; font-size: 19px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card blockquote{
	flex: 1;
	margin: 0 0 22px;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--text-color);
}
.review-card .reviewer{ display: flex; align-items: center; gap: 14px; }
.review-card .reviewer img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.review-card .reviewer h3{ font-size: 1rem; margin: 0; }
.review-card .reviewer span{ font-size: 14px; color: var(--muted); }
/* Reviews carried over from the landscaping side are always labelled. */
.carryover-flag{
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary-color);
	background-color: var(--secondary-color);
	padding: 5px 10px;
	border-radius: 100px;
	margin-bottom: 14px;
}

.post-card{ padding: 28px 26px; display: flex; flex-direction: column; }
.post-card-meta{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}
.post-card :is(h2, h3){ font-size: 1.25rem; line-height: 1.3; margin-bottom: 10px; }
.post-card :is(h2, h3) a{ color: var(--ink); }
.post-card :is(h2, h3) a:hover{ color: var(--accent-color); }
/* The heading link covers the card, so the whole card is clickable. */
.post-card{ position: relative; }
.post-card :is(h2, h3) a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card p{ font-size: 16px; margin-bottom: 18px; }
.post-card-more{ margin-top: auto; color: var(--accent-color); font-weight: 800; font-size: 15px; }


/*-------- 10. What We Take: grid, list, category items, A-Z, can't take --------*/

.take-grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
}
.take-grid li{ margin: 0; }
.take-grid a{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 24px 10px 20px;
	text-align: center;
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	background-color: var(--white-color);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.take-grid a:hover{
	border-color: var(--accent-color);
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

/* ---- Photo tiles ----
   A tile with a photograph: the image fills it, the label sits on a dark
   gradient along the bottom. Categories without a photo keep the icon tile
   above, so the two styles can live side by side while photos are replaced
   one at a time. */
.take-grid .has-photo a{
	position: relative;
	display: block;
	padding: 0;
	overflow: hidden;
	border-color: transparent;
	background-color: var(--primary-deep);
	aspect-ratio: 3 / 2;
}
.take-grid .has-photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, opacity .3s ease;
}
.take-grid .has-photo a:hover img{ transform: scale(1.06); opacity: .92; }
.take-grid .has-photo .tk-label{
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px 12px 12px;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
	color: var(--white-color);
	text-shadow: 0 1px 3px rgba(0,0,0,.6);
	background: linear-gradient(to top, rgba(7,42,30,.92) 20%, rgba(7,42,30,0));
}
.take-grid .has-photo a:focus-visible{ outline-offset: 2px; }

/* Masked icons so one declaration colours all twelve. Mask URLs live here
   (not in a custom property) so ../images/ resolves against this file.
   Longhands only: the `mask` shorthand also resets mask-image, and this rule
   outranks the .ti-* rules below, so every icon became a solid square. */
.take-grid .ti{
	display: block;
	width: 44px;
	height: 44px;
	background-color: var(--accent-color);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color .2s ease;
}
.take-grid a:hover .ti{ background-color: var(--primary-color); }

.ti-furniture{ -webkit-mask-image: url('../images/icon-take-furniture.svg'); mask-image: url('../images/icon-take-furniture.svg'); }
.ti-appliance{ -webkit-mask-image: url('../images/icon-take-appliance.svg'); mask-image: url('../images/icon-take-appliance.svg'); }
.ti-mattress{ -webkit-mask-image: url('../images/icon-take-mattress.svg'); mask-image: url('../images/icon-take-mattress.svg'); }
.ti-ewaste{ -webkit-mask-image: url('../images/icon-take-ewaste.svg'); mask-image: url('../images/icon-take-ewaste.svg'); }
.ti-reno{ -webkit-mask-image: url('../images/icon-take-reno-debris.svg'); mask-image: url('../images/icon-take-reno-debris.svg'); }
.ti-hot-tub{ -webkit-mask-image: url('../images/icon-take-hot-tub.svg'); mask-image: url('../images/icon-take-hot-tub.svg'); }
.ti-shed{ -webkit-mask-image: url('../images/icon-take-shed-deck.svg'); mask-image: url('../images/icon-take-shed-deck.svg'); }
.ti-concrete{ -webkit-mask-image: url('../images/icon-take-concrete.svg'); mask-image: url('../images/icon-take-concrete.svg'); }
.ti-yard{ -webkit-mask-image: url('../images/icon-take-yard-waste.svg'); mask-image: url('../images/icon-take-yard-waste.svg'); }
.ti-estate{ -webkit-mask-image: url('../images/icon-take-estate.svg'); mask-image: url('../images/icon-take-estate.svg'); }
.ti-scrap{ -webkit-mask-image: url('../images/icon-take-scrap-metal.svg'); mask-image: url('../images/icon-take-scrap-metal.svg'); }
.ti-piano{ -webkit-mask-image: url('../images/icon-take-piano.svg'); mask-image: url('../images/icon-take-piano.svg'); }

/* ---- "Is my thing on the list?" ----
   The search box people want, with the 152 names folded away behind it. */
.take-find{ max-width: 760px; margin: 0 auto; }
.take-search label{
	display: block;
	margin-bottom: 10px;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: center;
}
.take-search-row{ display: flex; gap: 10px; }
.take-search input{
	flex: 1;
	min-width: 0;
	padding: 15px 20px;
	font: inherit;
	font-size: 17px;
	color: var(--ink);
	background-color: var(--white-color);
	border: 2px solid var(--divider-color);
	border-radius: 100px;
	box-shadow: var(--shadow-sm);
}
.take-search input:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(42,125,46,.15);
}
.take-search .btn-default{ flex-shrink: 0; }

.take-all{ margin-top: 18px; }
.take-all summary{
	cursor: pointer;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--accent-color);
	list-style: none;
	padding: 8px;
}
.take-all summary::-webkit-details-marker{ display: none; }
.take-all summary::after{ content: " \25be"; }
.take-all[open] summary::after{ content: " \25b4"; }
.take-all summary:hover{ color: var(--primary-color); }

.take-list{
	margin-top: 10px;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	padding: 22px 24px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--muted);
}
.take-list a{ font-weight: 700; white-space: nowrap; color: var(--accent-color); }

@media (max-width: 575px){
	.take-search-row{ flex-direction: column; }
	.take-search .btn-default{ width: 100%; }
}

/* Hub page category cards */
.cat-card-items{ font-size: 15px; color: var(--muted); margin: 0 0 14px; }
.cat-card-link{ font-weight: 800; }
.cat-card-link:hover{ text-decoration: underline; }

/* Item list on each category page (generated from _categories.py) */
.ci-heading{ margin: 36px 0 14px; text-transform: uppercase; }
.ci-list{ margin: 0 0 18px; }
.ci-item{ padding: 14px 0; border-top: 1px solid var(--divider-color); }
.ci-item:last-child{ border-bottom: 1px solid var(--divider-color); }
.ci-item dt{ color: var(--ink); font-weight: 800; margin: 0 0 4px; }
.ci-item dd{ margin: 0; }
.ci-aka{ display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.ci-more{ margin: 0 0 24px; font-size: 16px; }
.ci-more a{ font-weight: 700; }

/* A to Z index */
.az-tools{ margin: 0 0 22px; }
.az-filter-label{ display: block; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.az-filter{
	width: 100%;
	max-width: 520px;
	padding: 14px 18px;
	font: inherit;
	border: 2px solid var(--divider-color);
	border-radius: var(--radius-sm);
	background-color: var(--white-color);
	color: var(--ink);
}
.az-filter:focus{ outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(42,125,46,.15); }
.az-jump{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.az-jump a{
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 10px;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	color: var(--ink);
	font-weight: 800;
}
.az-jump a:hover,
.az-jump a:focus-visible{ background-color: var(--accent-color); border-color: var(--accent-color); color: var(--white-color); }
.az-body{ padding-top: 56px; }
.az-group{ margin: 0 0 34px; }
.az-letter{
	font-size: 2rem;
	color: var(--ink);
	border-bottom: 3px solid var(--accent-color);
	padding-bottom: 6px;
	margin: 0 0 8px;
}
.az-list{ margin: 0; }
.az-entry{ padding: 14px 0; border-bottom: 1px solid var(--divider-color); }
.az-entry dt{ font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.az-entry dd{ margin: 0; }
.az-entry dd a{ font-weight: 700; }
.az-see dd{ color: var(--muted); }
.az-no dt{ color: var(--warning-color); }
.az-tag{
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.az-tag-no{ background-color: var(--warning-tint); color: var(--warning-color); }
.az-tag-service{ background-color: var(--secondary-color); color: var(--primary-color); }
.az-empty{
	padding: 22px 24px;
	margin: 0 0 30px;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
}
.az-entry[hidden], .az-group[hidden], .az-tools[hidden], .az-empty[hidden]{ display: none !important; }

/* What we can't take */
.nt-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.nt-card{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-left: 5px solid var(--warning-color);
	border-radius: var(--radius);
	padding: 24px 26px;
}
.nt-card h3{ font-size: 1.2rem; margin: 0 0 10px; }
.nt-card p{ margin: 0 0 8px; }
.nt-label{ font-weight: 800; color: var(--ink); }
.nt-card .nt-aka{ font-size: 14px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 1199px){ .take-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px){
	.take-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.take-grid a{ padding: 18px 8px 16px; font-size: 14px; }
	.take-grid .ti{ width: 38px; height: 38px; }
	.take-list{ padding: 20px; }
	.nt-grid{ grid-template-columns: 1fr; }
	.az-letter{ font-size: 1.7rem; }
}


/*------------------------ 11. Pricing & tables --------------------------*/

.price-table,
.where-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--white-color);
	box-shadow: var(--shadow-sm);
	margin-bottom: 18px;
}
.price-table caption{
	caption-side: top;
	text-align: left;
	padding: 0 0 12px;
	color: var(--muted);
	font-size: 15px;
}
.price-table :is(th, td),
.where-table :is(th, td){
	padding: 15px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--divider-color);
}
.price-table thead th,
.where-table thead th{
	background-color: var(--primary-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.price-table tbody tr:last-child :is(th, td),
.where-table tbody tr:last-child :is(th, td){ border-bottom: 0; }
.price-table tbody tr:nth-child(even),
.where-table tbody tr:nth-child(even){ background-color: #F8FBF7; }
.price-table tbody th,
.where-table tbody th{ font-weight: 700; color: var(--ink); }
.price-table tbody tr{ transition: background-color .15s ease; }
.price-table tbody tr:hover{ background-color: var(--secondary-color); }
.price-table .price{
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--accent-color);
	white-space: nowrap;
	text-align: right;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}
.price-table .note{ font-size: 14px; color: var(--muted); font-weight: 400; }

/* "1/3 trailer" means nothing to someone standing in their garage. This column
   says it in objects instead. It is the widest column and the least critical,
   so it is the one that goes on a phone — the price and the tier stay. */
.price-table .looks-like{
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	font-weight: 400;
}
.price-table thead .looks-like{ color: var(--white-color); font-weight: 800; }
@media (max-width: 767px){
	.price-table .looks-like{ display: none; }
}
.price-tbd{
	background-color: var(--secondary-color);
	border: 1px dashed var(--accent-color);
	border-radius: 6px;
	padding: 1px 8px;
	color: var(--accent-color);
}
@media (max-width: 575px){
	.price-table :is(th, td),
	.where-table :is(th, td){ padding: 12px 14px; }
}


/*--------------- 12. Callouts, steps, lists, area pills -----------------*/

.callout{
	position: relative;
	background-color: var(--secondary-color);
	border-left: 6px solid var(--accent-color);
	border-radius: var(--radius);
	padding: 26px 30px;
	margin: 32px 0;
}
.callout h3{ font-size: 1.15rem; text-transform: uppercase; margin-bottom: 8px; }
.callout p:last-child{ margin-bottom: 0; }
.callout .btn-default{ margin-top: 4px; }
.bg-tint .callout{ background-color: var(--white-color); box-shadow: var(--shadow-sm); }
.bg-forest .callout{ background-color: rgba(255,255,255,.06); border-left-color: var(--accent-on-dark); }

.price-includes,
.price-excludes{ list-style: none; padding: 0; margin: 0 0 28px; }
.price-includes li,
.price-excludes li{ position: relative; padding-left: 36px; margin-bottom: 12px; }
.price-includes li::before,
.price-excludes li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}
.price-includes li::before{
	background-color: var(--accent-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.price-excludes li::before{
	background-color: var(--error-color);
	background-size: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.bg-forest .price-includes li::before{ background-color: var(--accent-on-dark); }

.steps{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step;
}
.steps li{
	position: relative;
	counter-increment: step;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	padding: 28px 24px;
	box-shadow: var(--shadow-sm);
}
.steps li::before{
	content: counter(step);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--accent-color);
	color: var(--white-color);
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 16px;
}
.steps h3{ font-size: 1.05rem; text-transform: uppercase; margin-bottom: 6px; }
.steps p{ margin: 0; font-size: 16px; }
@media (max-width: 991px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px){ .steps{ grid-template-columns: 1fr; } }

.area-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.area-list li{
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 8px 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}


/*-------------------------------- 13. FAQ --------------------------------*/

.faq{ display: grid; gap: 12px; }
.faq-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.faq-item summary{
	position: relative;
	display: block;
	padding: 20px 64px 20px 24px;
	cursor: pointer;
	list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary h3{ margin: 0; font-size: 1.08rem; line-height: 1.4; }
.faq-item summary::after{
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background-color: var(--secondary-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A7D2E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px;
	transition: transform .25s ease, background-color .25s ease;
}
.faq-item summary:hover h3{ color: var(--accent-color); }
.faq-item[open] summary::after{ transform: rotate(45deg); background-color: var(--white-color); box-shadow: inset 0 0 0 1px var(--divider-color); }
.faq-item[open]{ border-color: rgba(42,125,46,.35); }
.faq-body{ padding: 0 24px 22px; }
.faq-body p:last-child{ margin-bottom: 0; }


/*----------------------- 14. Photos & before/after ----------------------*/

.page-photo{ margin: 0 0 36px; }
.page-photo img{
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
.page-photo figcaption{ font-size: 14px; color: var(--muted); margin-top: 10px; }

.photo-frame{
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
@media (max-width: 991px){ .photo-frame{ margin-top: 32px; } }

/* ---- Before/after strip (homepage) ----
   Two frames locked side by side, sharing one caption, so the eye compares
   them rather than reading them as two separate photos. */
.ba-strip{ display: grid; gap: 28px; }
.ba-pair{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 16px 16px 4px;
}
.ba-frames{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-shot{ position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.ba-shot img{ display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ba-tag{
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--white-color);
	background-color: rgba(7,42,30,.88);
}
.ba-shot.is-after .ba-tag{ background-color: var(--accent-color); }
.ba-pair figcaption{
	padding: 14px 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	text-align: center;
}
.ba-pair .carryover-flag{ margin: 0 0 12px; }
@media (min-width: 992px){
	.ba-strip{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

.beforeafter{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
.beforeafter figure{ border-radius: var(--radius); overflow: hidden; background-color: var(--secondary-color); }
.beforeafter img{ width: 100%; display: block; }
.beforeafter figcaption{
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 10px 14px;
	color: var(--white-color);
	background-color: var(--primary-color);
}
.beforeafter figure.is-after figcaption{ background-color: var(--accent-color); }
@media (max-width: 767px){ .beforeafter{ grid-template-columns: 1fr; } }


/*---------------------------- 15. Blog article ---------------------------*/

.post-meta{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 20px;
	margin-bottom: 32px;
	border-bottom: 2px solid var(--divider-color);
}
.blog-post{ font-size: 18px; }
.blog-post h2{ font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 44px 0 14px; }
.blog-post h3{ font-size: 1.25rem; margin: 30px 0 10px; }
.blog-post p{ margin-bottom: 1.25em; }
.blog-post :is(ul, ol){ margin: 0 0 24px; padding-left: 22px; }
.blog-post li{ margin-bottom: 10px; }
.blog-post li::marker{ color: var(--accent-color); }
.blog-post a:not(.btn-default){ text-decoration: underline; text-underline-offset: 3px; }
.blog-post a:not(.btn-default):hover{ color: var(--primary-color); }

.post-cta{
	background-color: var(--primary-color);
	border-radius: var(--radius);
	padding: 32px 34px;
	margin-top: 46px;
	color: var(--on-dark-muted);
}
.post-cta h3{ font-size: 1.3rem; text-transform: uppercase; margin: 0 0 10px; color: var(--white-color); }
.post-cta p{ margin-bottom: 22px; color: var(--on-dark-muted); }
.post-cta .btn-ghost.on-light{ --btn-fg: var(--white-color); border-color: rgba(255,255,255,.85); }
.post-cta .btn-ghost.on-light:hover{ --btn-bg: var(--white-color); --btn-fg: var(--primary-color); }
@media (max-width: 575px){ .post-cta{ padding: 26px 22px; } }


/*-------------------------- 16. Forms & JotForm --------------------------*/

.junk-form label{ display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.junk-form :is(input, select, textarea){
	width: 100%;
	padding: 13px 16px;
	font: inherit;
	font-size: 16px;
	color: var(--text-color);
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius-sm);
	margin-bottom: 18px;
}
.junk-form :is(input, select, textarea):focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(42,125,46,.15);
}
.junk-form textarea{ min-height: 130px; resize: vertical; }

.jotform-embed{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}
/* width:1px + min-width:100% is the reliable way to make an iframe fill. */
.jotform-embed iframe{ display: block; width: 1px; min-width: 100%; min-height: 720px; border: 0; }
.form-fallback{ margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.form-fallback a{ font-weight: 700; }
@media (max-width: 767px){ .jotform-embed iframe{ min-height: 900px; } }


/*------------------------------- 17. Footer ------------------------------*/

.site-footer{
	position: relative;
	background-color: var(--primary-color);
	color: var(--on-dark-muted);
	padding: 72px 0 0;
	font-size: 16px;
	border-top: 4px solid var(--accent-color);
}
.site-footer a{ color: var(--white-color); }
.site-footer a:hover{ color: var(--accent-on-dark); }
.site-footer p{ margin: 0 0 10px; }
.site-footer strong{ color: var(--white-color); }

.footer-grid{
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: 40px;
}
.footer-logo{ width: 200px; margin-bottom: 18px; display: block; }
.footer-col h3{
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-on-dark);
	margin: 6px 0 18px;
}
.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin-bottom: 9px; }
.footer-hours{ margin: 0; }
.footer-hours div{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--dark-divider);
}
.footer-hours dt{ color: var(--white-color); font-weight: 600; }
.footer-hours dd{ margin: 0; font-variant-numeric: tabular-nums; }
.footer-phone{ font-size: 1.4rem; font-weight: 800; }

.footer-social{ display: flex; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.footer-social a{
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background-color: rgba(255,255,255,.1);
	color: var(--white-color);
	transition: background-color .2s ease;
}
.footer-social a:hover{ background-color: var(--accent-color); color: var(--white-color); }
.footer-social svg{ width: 20px; height: 20px; }

.footer-bottom{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 56px;
	padding: 26px 0 30px;
	border-top: 1px solid var(--dark-divider);
	font-size: 14px;
}
.footer-bottom p{ margin: 0; }
.footer-bottom img{ display: block; height: 30px; width: auto; }
.footer-bottom .btn-default{ margin-left: auto; min-height: 44px; font-size: 13px; }

@media (max-width: 991px){
	.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
	.site-footer{ padding-top: 52px; }
	.footer-grid{ grid-template-columns: 1fr; gap: 32px; }
	.footer-bottom{ flex-direction: column; align-items: flex-start; }
	.footer-bottom .btn-default{ margin-left: 0; width: 100%; }
}


/*--------------------------- 18. Mobile call bar -------------------------*/

.mobile-call-bar{ display: none; }

@media (max-width: 991px){
	.mobile-call-bar{
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 950;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: var(--primary-color);
		box-shadow: 0 -6px 20px rgba(0,0,0,.18);
	}
	.mobile-call-bar a{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 58px;
		font-size: 16px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: var(--white-color);
	}
	.mobile-call-bar .mcb-call{ background-color: var(--accent-color); }
	.mobile-call-bar .mcb-text{ background-color: var(--primary-color); }
	.mobile-call-bar svg{ width: 20px; height: 20px; }
	/* Keep the bar from covering the end of the page. */
	body{ padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
	/* The bar sits above the header, so while the nav drawer is open it would
	   cover the bottom of the menu — "Get a Quote" included. */
	.nav-open-page .mobile-call-bar{ display: none; }
}


/*-------------------------------- 19. Motion -----------------------------*/

/* Content is fully visible by default. js/site.js adds .reveal-ready to <html>
   only once it is running, and .animated to each element as it scrolls in —
   so if JavaScript never runs, nothing is ever hidden. */
.reveal-ready .wow:not(.animated){ opacity: 0; transform: translateY(22px); }
.reveal-ready .wow{
	transition: opacity .6s ease-out, transform .6s ease-out;
	transition-delay: var(--reveal-delay, 0s);
}

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


/*------------------- 20. Accessibility & staging banner ------------------*/

:focus-visible{
	outline: 3px solid var(--highlight);
	outline-offset: 3px;
	border-radius: 4px;
}
.faq-item summary:focus-visible{ outline-offset: -3px; border-radius: var(--radius); }

.skip-link{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background-color: var(--accent-color);
	color: var(--white-color);
	font-weight: 800;
}
.skip-link:focus{ left: 0; color: var(--white-color); }

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

/*------------------------------ 21. Print ------------------------------*/

/* People do print this site — the rate card especially, and older customers
   comparing quotes on paper. Drop the furniture, keep the words and the
   numbers, and put the phone number somewhere they can read it. */
@media print{
	.site-header,
	.site-footer,
	.mobile-call-bar,
	.nav-toggle,
	.skip-link,
	.take-find,
	.btn-default,
	.page-header::after,
	.hero-photo{ display: none !important; }

	html, body{ background: #fff; color: #000; font-size: 11.5pt; }
	body{ padding-bottom: 0; }
	.section-space,
	.section-space-sm{ padding-block: 12pt; }
	.bg-forest,
	.bg-tint,
	.junk-hero{ background: #fff !important; color: #000 !important; }
	.bg-forest :is(h1, h2, h3, p, li, strong, .lead-in){ color: #000 !important; }
	.container{ max-width: none; padding-inline: 0; }

	/* Tables are the reason anyone prints this. Keep them whole. */
	.price-table,
	.where-table{ box-shadow: none; page-break-inside: avoid; }
	.price-table thead th,
	.where-table thead th{ background: #eee !important; color: #000 !important; }
	.price-table .price{ color: #000; }
	h1, h2, h3{ page-break-after: avoid; }

	/* site.js opens every <details> before printing, so answers are on the
	   page whether or not the reader expanded them on screen. */
	.faq-item{ box-shadow: none; page-break-inside: avoid; }
	.faq-item summary::after{ display: none; }

	a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; }
	main::after{
		content: "No BS Junk Removal, Winnipeg \2014  204.900.0438 \2014  prices as printed, all in.";
		display: block;
		margin-top: 18pt;
		padding-top: 8pt;
		border-top: 1pt solid #000;
		font-weight: 700;
	}
}


/*------------------- 22. Staging banner ------------------*/

/* Injected at serve time by deploy/railway.conf on staging only. */
.jr-staging{
	background-color: var(--secondary-color);
	border-bottom: 2px solid var(--accent-color);
	color: var(--primary-color);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	padding: 12px 20px;
}
.jr-staging strong{
	color: var(--white-color);
	background-color: var(--accent-color);
	letter-spacing: .08em;
	padding: 3px 9px;
	border-radius: 5px;
	margin-right: 8px;
	white-space: nowrap;
}