/* =========================================================
   Hey Lucky Label Co. — main stylesheet
   ========================================================= */

/* Brand fonts, uploaded via the media library into /wp-content/uploads/fonts/.
   UM Moldena ships only as Black, so it claims the full weight range to keep
   browsers from synthesizing a second bold on top of it; Nailhead is a single
   body weight and leaves bold to the browser so emphasis still reads. */
@font-face {
	font-family: "UM Moldena";
	src: url("../../../../uploads/fonts/UM-Moldena-Black.otf") format("opentype");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Nailhead";
	src: url("../../../../uploads/fonts/Nailhead.otf") format("opentype");
	font-weight: 400;
	font-display: swap;
}

:root {
	--cream: #F6F1E2;
	--cream-2: #EFE8D4;
	--paper: #FBF7EC;
	--ink: #22304C;
	--navy: #1F2B47;
	--navy-2: #24304A;
	--orange: #E2711D;
	--orange-dark: #C95F12;
	--olive: #5C6E3C;
	--olive-dark: #47572C;
	--olive-deep: #3F4D2A;
	--green-tint: #E9EDD9;
	--line: #E0D7C0;
	--line-soft: #E9E1CC;
	--muted: #5B6478;

	--font-serif: "UM Moldena", "Fraunces", Georgia, serif;
	--font-sans: "Nailhead", "Inter", -apple-system, "Helvetica Neue", sans-serif;
	--font-hand: "Caveat", cursive;

	--radius: 10px;
	--radius-sm: 7px;
	--wrap: 1180px;
	--shadow-card: 0 1px 2px rgba(34, 48, 76, 0.06), 0 8px 24px rgba(34, 48, 76, 0.05);
	--shadow-sticker: 0 2px 6px rgba(34, 48, 76, 0.18);
}

/* ---------- Base ---------- */

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 20px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	color: var(--ink);
	line-height: 1.08;
	margin: 0 0 0.4em;
	font-weight: 600;
}

p { margin: 0 0 1em; }

a { color: var(--ink); }

.accent { color: var(--orange); }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 28px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--navy);
	color: var(--cream);
	padding: 10px 16px;
	z-index: 100;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 26px;
	border-radius: var(--radius-sm);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-arrow svg { width: 15px; height: 15px; display: block; }

.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover { background: var(--ink); }

.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dark); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-olive { background: var(--olive); color: var(--cream); }
.btn-olive:hover { background: var(--olive-dark); }

.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: #fff; }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
}
.text-link svg { width: 14px; height: 14px; transition: transform .15s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */

.site-header {
	background: var(--cream);
	border-bottom: 1px solid var(--line-soft);
	position: sticky;
	top: 0;
	z-index: 50;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.site-logo { display: block; flex-shrink: 0; }
.logo-img { display: block; height: 60px; width: auto; }

.site-nav { margin-left: auto; }
.nav-list {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list a {
	text-decoration: none;
	font-size: 19px;
	font-weight: 500;
	color: var(--ink);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.nav-list a:hover { border-bottom-color: var(--orange); }
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a { border-bottom-color: var(--ink); }

.nav-toggle { display: none; }

/* ---------- Photo placeholder ---------- */

.ph {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 24px;
	border-radius: var(--radius);
	border: 1.5px dashed #C9BD9E;
	background:
		linear-gradient(145deg, rgba(92, 110, 60, 0.08), rgba(226, 113, 29, 0.07)),
		var(--cream-2);
	color: #8A8163;
	min-height: 220px;
	overflow: hidden;
}
.ph-tag {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2em;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 2px 8px;
}
.ph-label { font-size: 17px; max-width: 34ch; line-height: 1.45; }

/* ---------- Photos ---------- */

.hl-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* ---------- Stickers ---------- */

.sticker {
	display: block;
	filter: drop-shadow(var(--shadow-sticker));
}

/* ---------- Eyebrow / section headings ---------- */

.eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 28px;
}
.eyebrow.eyebrow-left { justify-content: flex-start; }
.eyebrow .eyebrow-clover svg { width: 15px; height: 15px; color: var(--olive); display: block; }
.eyebrow-rule {
	display: flex;
	align-items: center;
	gap: 16px;
}
.eyebrow-rule::before, .eyebrow-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

/* ---------- Hero (home) ---------- */

.hero { padding: 64px 0 56px; }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: center;
}

.hero-clover svg { width: 44px; height: 44px; color: var(--olive-deep); }

.hero h1 {
	font-size: clamp(44px, 5.6vw, 66px);
	font-weight: 700;
	margin: 12px 0 20px;
}
.hero-sub {
	font-size: 22px;
	color: var(--muted);
	max-width: 44ch;
	margin-bottom: 28px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.feature-row {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.feature-row li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	flex: 1;
	max-width: 120px;
}
/* The home hero's row shares this class but is left-aligned to its headline
   and buttons, so centring is opt-in. */
.feature-row--center { justify-content: center; }
.feature-row svg { width: 26px; height: 26px; color: var(--olive); }

.hero-media { position: relative; }
.hero-media .ph { min-height: 460px; }
.hero-media .hl-img { height: 460px; object-fit: cover; }

/* ---------- Service cards ---------- */

.services { padding: 24px 0 56px; }
.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.service-card {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 26px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.service-icon {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--green-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.service-icon svg { width: 28px; height: 28px; color: var(--olive-deep); }
.service-card h3 {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.service-card p { font-size: 18px; color: var(--muted); margin: 0 0 10px; flex: 1; }

/* ---------- Lucky Drop band ---------- */

.drop-band {
	background: var(--navy);
	border-radius: var(--radius);
	color: var(--cream);
	padding: 44px 48px;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 40px;
	align-items: center;
	margin-bottom: 72px;
}
.drop-band h2 {
	color: var(--cream);
	font-size: 26px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--font-sans);
	font-weight: 700;
}
.drop-band p { color: #B9C2D6; font-size: 19px; max-width: 40ch; }
.drop-stickers {
	display: flex;
	gap: 22px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.drop-stickers .sticker { width: 92px; flex-shrink: 0; transform: rotate(-4deg); }
.drop-stickers .sticker:nth-child(2n) { transform: rotate(5deg); }
.social-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1.5px solid rgba(244, 238, 223, 0.35);
	color: var(--cream);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social-link:hover,
.social-link:focus-visible {
	background: var(--cream);
	color: var(--navy);
	border-color: var(--cream);
}
.social-link svg { width: 24px; height: 24px; display: block; }

/* ---------- Why / keep section ---------- */

.why { padding: 0 0 80px; }
.why-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
	gap: 36px;
	align-items: stretch;
}
.why-media .ph { height: 100%; min-height: 320px; }
.why-media .hl-img { height: 100%; min-height: 320px; object-fit: cover; }

.why-copy h2 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; }
.why-copy .lead { color: var(--muted); font-size: 19px; max-width: 46ch; }

.check-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	font-size: 18px;
	font-weight: 500;
}
.check-grid li { display: flex; align-items: center; gap: 9px; }
.check-grid li::before { content: "\2022"; color: var(--olive); font-size: 20px; line-height: 1; flex-shrink: 0; }
.check-grid svg { width: 15px; height: 15px; color: var(--olive); flex-shrink: 0; }

.testimonial-wrap { position: relative; }
.testimonial {
	background: var(--green-tint);
	border: 1px solid #D8DFC2;
	border-radius: var(--radius);
	padding: 36px 30px 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 14px;
}
.testimonial-quote-mark svg { width: 30px; height: 30px; color: var(--ink); margin: 0 auto; }
.testimonial blockquote {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.55;
}
.testimonial-brand {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.testimonial-clover { display: flex; justify-content: center; }
.testimonial-clover svg { width: 16px; height: 16px; color: var(--olive); }
.testimonial-wrap > .sticker {
	position: absolute;
	top: -34px;
	right: -22px;
	width: 84px;
	transform: rotate(8deg);
}

/* ---------- Footer ---------- */

.site-footer { background: var(--olive); color: var(--cream); }
.footer-inner {
	display: grid;
	/* The signup column is the wider of the two: it carries the form plus the
	   handwritten note beside it, where details is only address and phone. */
	grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
	grid-template-areas:
		"pitch details"
		"signup details";
	column-gap: 72px;
	row-gap: 28px;
	align-items: start;
	padding-top: 42px;
	padding-bottom: 36px;
}
.footer-pitch { grid-area: pitch; max-width: 390px; }
.footer-headline {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 4px;
}
.footer-sub { font-size: 17px; color: #DCE3C8; margin: 0; }

/* nowrap on purpose: the note must shrink to share the column with the form.
   Allowing wrap drops it onto its own line the moment the two basis widths
   exceed the column, which is most of this breakpoint's range. */
.footer-email-signup {
	grid-area: signup;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 18px;
}
.footer-email-widget { flex: 1 1 300px; min-width: 0; max-width: 520px; }

/* Handwritten aside pointing back at the signup form. Nudged up off the
   baseline so the arrow centres on the 52px submit button rather than on the
   taller field-plus-label stack beside it. */
.footer-signup-note {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding-bottom: 12px;
	color: var(--cream);
}
.footer-signup-note-arrow,
.footer-signup-note-icon { flex: none; }
.footer-signup-note-arrow svg {
	width: 24px;
	height: 24px;
	display: block;
	transform: rotate(180deg);
}
/* Free to wrap to two lines — that is what lets the note give width back to
   the form on narrower screens instead of breaking the row. */
.footer-signup-note-text {
	font-family: var(--font-hand);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}
.footer-signup-note-icon svg { width: 20px; height: 20px; display: block; }
.footer-business-details {
	grid-area: details;
	width: 100%;
	max-width: 560px;
	justify-self: end;
}
.footer-widget-title,
.footer-widget .widget-title {
	color: var(--cream);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.footer-widget p,
.footer-widget address,
.footer-widget li { color: #DCE3C8; font-size: 17px; line-height: 1.65; }
.footer-widget p:last-child { margin-bottom: 0; }
.footer-widget address { font-style: normal; }
.footer-widget ul { margin: 0; padding: 0; list-style: none; }
.footer-widget a { color: var(--cream); }
/* The ActiveCampaign embed ships its own layout — a centred wrapper, 20px of
   padding, floated rows, and type="text" on the email field. Its rules are keyed
   to #_form_1_, so overriding them needs !important. Kept here rather than in the
   widget: re-pasting the embed code from ActiveCampaign would wipe edits made there. */
.footer-email-signup div[style*="text-align"] { text-align: left !important; }
.footer-email-signup form {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.footer-email-signup ._form-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 0 !important;
}
.footer-email-signup ._form_element,
.footer-email-signup ._button-wrapper {
	float: none !important;
	margin: 0 !important;
	max-width: none;
}
.footer-email-signup ._form_element {
	flex: 1 1 180px;
	min-width: 0;
}
.footer-email-signup ._clear-element { display: none; }
.footer-email-signup ._form-label {
	font: 700 16px var(--font-sans) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cream) !important;
	margin-bottom: 6px !important;
}
.footer-email-signup .field-required { color: var(--cream); }
.footer-email-signup input[type="email"],
.footer-email-signup ._form_element input[type="text"] {
	width: 100% !important;
	min-height: 52px;
	height: auto;
	border: 1px solid rgba(246, 241, 226, 0.42) !important;
	border-radius: var(--radius-sm) !important;
	background: var(--cream) !important;
	color: var(--ink) !important;
	font: inherit !important;
	padding: 13px 16px !important;
}
.footer-email-signup input[type="email"]::placeholder,
.footer-email-signup ._form_element input[type="text"]::placeholder { color: var(--muted); }
.footer-email-signup input[type="submit"],
.footer-email-signup button,
.footer-email-signup ._submit {
	min-height: 52px !important;
	border: 1px solid var(--cream) !important;
	border-radius: var(--radius-sm) !important;
	background: transparent !important;
	color: var(--cream) !important;
	font: 700 16px var(--font-sans) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 !important;
	padding: 13px 20px !important;
	cursor: pointer;
}
.footer-email-signup input[type="submit"]:hover,
.footer-email-signup button:hover,
.footer-email-signup ._submit:hover { background: var(--cream) !important; color: var(--ink) !important; }
.footer-widget-admin-note {
	border: 1px dashed rgba(246, 241, 226, 0.5);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	font-size: 16px;
	color: #DCE3C8;
}
.footer-widget-admin-note strong,
.footer-widget-admin-note span { display: block; }
.footer-widget-admin-note strong { color: var(--cream); margin-bottom: 2px; }

.footer-legal {
	border-top: 1px solid rgba(246, 241, 226, 0.2);
	padding-top: 14px;
	padding-bottom: 16px;
}
.footer-legal p { margin: 0; font-size: 16px; color: #DCE3C8; }

/* ---------- Page hero (interior pages) ---------- */

.page-hero { padding: 56px 0 44px; }
.page-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
	gap: 48px;
	align-items: center;
}
.page-hero h1 {
	font-size: clamp(38px, 4.8vw, 58px);
	font-weight: 700;
	margin: 10px 0 18px;
}
.page-hero .hero-sub { font-size: 21px; }
.page-hero-media .ph { min-height: 380px; }
.page-hero-media .hl-img { height: 380px; object-fit: cover; }
.page-hero-stickers {
	display: flex;
	gap: 26px;
	align-items: flex-start;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.page-hero-stickers .sticker { width: 96px; }
.page-hero-stickers .sticker:nth-child(1) { transform: rotate(-7deg); margin-top: 30px; }
.page-hero-stickers .sticker:nth-child(2) { transform: rotate(6deg); }
.page-hero-stickers .sticker:nth-child(3) { transform: rotate(-4deg); margin-top: 46px; }

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.kicker svg { width: 14px; height: 14px; color: var(--olive); }

/* ---------- Info cards (About: story / believe) ---------- */

.info-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 28px;
}
.info-card {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 40px;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
	gap: 44px;
	align-items: stretch;
}
.info-card-content { max-width: 64ch; }
.info-card h3 { font-size: 30px; font-weight: 700; }
.info-card p { font-size: 18.5px; color: var(--muted); }
.info-card-media { position: relative; }
.info-card-media .ph { height: 100%; min-height: 320px; }
.info-card-media .hl-img { height: 100%; min-height: 320px; object-fit: cover; }
.info-card-media .sticker {
	position: absolute;
	bottom: -18px;
	left: -18px;
	width: 86px;
	transform: rotate(-8deg);
}
.info-card--belief {
	grid-template-columns: minmax(300px, 5fr) minmax(0, 6fr);
	min-height: 420px;
}
.info-card--belief .info-card-content {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}
.info-card--belief .info-card-media {
	grid-column: 1;
	grid-row: 1;
}
.info-card--belief .info-card-media .sticker {
	left: auto;
	right: -18px;
	transform: rotate(8deg);
}

.mini-checks {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 18px;
	font-size: 17px;
	font-weight: 500;
}
.mini-checks li { display: flex; align-items: center; gap: 8px; }
.mini-checks svg { width: 13px; height: 13px; color: var(--olive); flex-shrink: 0; }
.mini-checks.mini-checks-1col { grid-template-columns: 1fr; }

/* ---------- Drop archive (About) ---------- */

.drop-archive {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 24px;
	margin-bottom: 28px;
}
.drop-card {
	position: relative;
	background: var(--navy);
	color: var(--cream);
	border-radius: var(--radius);
	padding: 32px 30px;
	overflow: hidden;
}
.drop-card .kicker { color: var(--cream); }
.drop-card .kicker svg { color: var(--orange); }
.drop-card h3 { color: var(--cream); font-size: 26px; font-weight: 700; }
.drop-card p { font-size: 17.5px; color: #B9C2D6; max-width: 38ch; }
.drop-card-stickers {
	position: absolute;
	top: 26px;
	right: -14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.drop-card-stickers .sticker { width: 78px; }
.drop-card-stickers .sticker:first-child { transform: rotate(9deg); }
.drop-card-stickers .sticker:last-child { transform: rotate(-7deg); }

.drop-tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.drop-tile {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 18px 12px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.drop-tile .sticker { width: 74%; }
.drop-tile-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.drop-tile-num { display: block; font-size: 15px; font-weight: 400; color: var(--muted); }

/* ---------- CTA band (About) ---------- */

.cta-band {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
	gap: 32px;
	align-items: center;
	padding: 38px 36px;
	margin-bottom: 80px;
}
.cta-band h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; }
.cta-band .cta-copy p { font-size: 18px; color: var(--muted); max-width: 42ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-points { display: flex; flex-direction: row; gap: 22px; }
.cta-point { text-align: center; flex: 1; }
.cta-point svg { width: 24px; height: 24px; color: var(--olive-deep); }
.cta-point-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 6px 0 4px;
}
.cta-point p { font-size: 15.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.cta-media { position: relative; }
.cta-media .ph { min-height: 190px; }
.cta-media .hl-img { height: 190px; object-fit: cover; }
.cta-media .sticker {
	position: absolute;
	bottom: -14px;
	left: -14px;
	width: 76px;
	transform: rotate(-9deg);
}

/* ---------- Product cards (Products) ---------- */

.products-layout {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
	gap: 26px;
	align-items: start;
	margin-bottom: 40px;
}
.product-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.product-card {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	scroll-margin-top: 90px;
}
.product-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	flex: 1;
}
.product-card h3 {
	font-family: var(--font-sans);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 2px;
}
.product-card-sub {
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 10px;
}
.product-card-copy > p { font-size: 17px; color: var(--muted); }
.product-card-media .ph { height: 100%; min-height: 220px; }
.product-card-media .hl-img { height: 100%; min-height: 220px; object-fit: cover; }
.product-card-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-sm { padding: 12px 18px; font-size: 16px; }

/* ---------- Sidebar panel (Products) ---------- */

.side-panel {
	background: var(--paper);
	border: 1.5px solid var(--olive);
	border-radius: 14px;
	padding: 30px 26px;
	text-align: center;
}
.side-panel-icon svg { width: 30px; height: 30px; color: var(--olive); }
.side-panel h3 { font-size: 24px; font-weight: 700; margin: 10px 0 2px; }
.side-panel-kicker { display: block; font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.side-panel > p { font-size: 17.5px; color: var(--muted); text-align: center; }

.steps {
	list-style: none;
	margin: 22px 0 24px;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.step { display: flex; gap: 14px; }
.step-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-icon {
	width: 42px;
	height: 42px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
}
.step-icon svg { width: 18px; height: 18px; color: var(--ink); }
.step-rail::after {
	content: "";
	flex: 1;
	min-height: 14px;
	border-left: 1.5px dashed #B9AF93;
	margin: 4px 0;
}
.step:last-child .step-rail::after { display: none; }
.step-copy { padding-bottom: 16px; }
.step:last-child .step-copy { padding-bottom: 0; }
.step-copy h4 {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 3px;
}
.step-copy p { font-size: 16.5px; color: var(--muted); margin: 0; line-height: 1.5; }

.side-panel-note { font-size: 16.5px; color: var(--muted); margin: 14px 0 0; }
.side-stickers {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin-top: 26px;
}
.side-stickers .sticker { width: 86px; }
.side-stickers .sticker:first-child { transform: rotate(-8deg); }
.side-stickers .sticker:last-child { transform: rotate(7deg); }

/* ---------- Quality strip (Products) ---------- */

.quality-strip {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	overflow: hidden;
	margin-bottom: 80px;
}
.quality-items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 34px 30px;
	align-items: start;
}
.quality-item { text-align: center; }
.quality-item svg { width: 26px; height: 26px; color: var(--olive-deep); }
.quality-item-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 8px 0 5px;
}
.quality-item p { font-size: 15.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.quality-media { position: relative; }
.quality-media .ph {
	height: 100%;
	min-height: 210px;
	border: none;
	border-radius: 0;
}

/* ---------- Work: breadcrumb, filters, gallery ---------- */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--muted);
	padding-top: 30px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

.work-hero { padding: 20px 0 8px; }
.work-hero h1 {
	font-size: clamp(40px, 4.8vw, 58px);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 18px;
}
.work-hero h1 .hero-clover svg { width: 40px; height: 40px; }
.work-sub { font-size: 20px; color: var(--muted); max-width: 56ch; }

.filter-bar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 26px 0 30px;
}
.filter-pill {
	font-family: var(--font-sans);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius-sm);
	padding: 10px 18px;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}
.filter-pill:hover { background: var(--cream-2); }
.filter-pill.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream); }

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	margin-bottom: 64px;
}
.gallery-item {
	grid-column: span 3;
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.gallery-item.is-wide { grid-column: span 4; }
.gallery-item.is-hidden { display: none; }
.gallery-item .ph { border: none; border-radius: 0; min-height: 200px; flex: 1; }
.gallery-link {
	position: relative;
	display: block;
	flex: 1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: zoom-in;
}
.work-gallery-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Sideways rotations swap the image's footprint before the turn: in a 4:3
   frame the pre-rotation element is 75% of the frame's width wide (= its
   height) and 133.4% of its height tall (= its width), so the rotated image
   covers the frame exactly. */
.gallery-item.rot-90 .work-gallery-image,
.gallery-item.rot-270 .work-gallery-image {
	inset: auto;
	top: 50%;
	left: 50%;
	width: 75%;
	height: 133.4%;
	transform: translate(-50%, -50%) rotate(90deg);
}
.gallery-item.rot-270 .work-gallery-image { transform: translate(-50%, -50%) rotate(-90deg); }
.gallery-item.rot-180 .work-gallery-image { transform: rotate(180deg); }
.gallery-empty {
	grid-column: 1 / -1;
	background: var(--paper);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 32px;
	text-align: center;
}
.gallery-empty p { color: var(--muted); margin-bottom: 16px; }

/* ---------- Work: lightbox ---------- */

.hl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(31, 43, 71, 0.92);
	overflow: hidden;
}
.hl-lightbox.is-open { display: flex; }
body.hl-lightbox-open { overflow: hidden; }

.hl-lightbox-stage {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hl-lightbox-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(90vw, 1100px);
	max-height: 84vh;
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
/* Sideways rotations: visual width is the element's height and vice versa,
   so the viewport constraints swap with them. */
.hl-lightbox-img.rot-90,
.hl-lightbox-img.rot-270 {
	max-width: 84vh;
	max-height: min(90vw, 1100px);
}
.hl-lightbox-img.rot-90 { transform: rotate(90deg); }
.hl-lightbox-img.rot-180 { transform: rotate(180deg); }
.hl-lightbox-img.rot-270 { transform: rotate(-90deg); }

.hl-lightbox-close,
.hl-lightbox-prev,
.hl-lightbox-next {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--cream);
	color: var(--ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .12s ease;
}
.hl-lightbox-close:hover,
.hl-lightbox-prev:hover,
.hl-lightbox-next:hover { background: var(--cream-2); }
.hl-lightbox-close { top: 18px; right: 18px; }
.hl-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.hl-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.hl-lightbox.is-single .hl-lightbox-prev,
.hl-lightbox.is-single .hl-lightbox-next { display: none; }

@media (max-width: 640px) {
	.hl-lightbox { padding: 14px; }
	.hl-lightbox-close,
	.hl-lightbox-prev,
	.hl-lightbox-next { width: 38px; height: 38px; font-size: 22px; }
	.hl-lightbox-close { top: 12px; right: 12px; }
	.hl-lightbox-prev { left: 10px; }
	.hl-lightbox-next { right: 10px; }
}

/* ---------- Sticker wall ---------- */

.sticker-wall {
	position: relative;
	background: var(--green-tint);
	border: 1px solid #D8DFC2;
	border-radius: var(--radius);
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr);
	gap: 34px;
	align-items: center;
	padding: 36px 40px;
	margin-bottom: 80px;
	scroll-margin-top: 90px;
}
.wall-cluster { display: flex; flex-wrap: wrap; gap: 4px; }
.wall-cluster .sticker { width: 84px; }
.wall-cluster .sticker:nth-child(1) { transform: rotate(-8deg); }
.wall-cluster .sticker:nth-child(2) { transform: rotate(6deg) translateY(14px); }
.wall-cluster .sticker:nth-child(3) { transform: rotate(-3deg) translateY(-6px); }
.wall-cluster .sticker:nth-child(4) { transform: rotate(9deg); }
.wall-copy h2 {
	font-size: 30px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.wall-copy h2 svg { width: 22px; height: 22px; color: var(--olive); }
.wall-copy p { font-size: 17.5px; color: var(--muted); max-width: 44ch; }
.wall-tiles { display: flex; gap: 14px; justify-content: flex-end; }
.wall-tile {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	padding: 12px;
	width: 92px;
}
.wall-tile .sticker { width: 100%; }
.wall-badge {
	position: absolute;
	top: -22px;
	right: 26px;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--paper);
	border: 1.5px solid var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	transform: rotate(8deg);
	box-shadow: var(--shadow-sticker);
	padding: 10px;
}

/* ---------- Contact: quote form ---------- */

.contact-hero-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	margin-top: 6px;
}
.contact-hero-note svg { width: 18px; height: 18px; color: var(--olive); }

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: 26px;
	align-items: start;
	margin-bottom: 40px;
}

.quote-form-card {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 34px 36px;
}
.form-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 26px;
}
.form-title svg { width: 21px; height: 21px; color: var(--olive); }

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field > label { font-size: 16.5px; font-weight: 700; }
.req { color: var(--orange); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
	font-family: var(--font-sans);
	font-size: 18px;
	color: var(--ink);
	background: #FDFBF4;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 12px 14px;
	width: 100%;
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 1px var(--navy);
}
.form-field ::placeholder { color: #A9A28C; }

.need-tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
.need-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	background: #FDFBF4;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px 8px 13px;
	cursor: pointer;
	transition: border-color .12s ease;
}
.need-tile svg { width: 26px; height: 26px; color: var(--olive-deep); }
.need-tile input { position: absolute; opacity: 0; pointer-events: none; }
.need-tile:hover { border-color: var(--ink); }
.need-tile:has(input:checked) {
	border-color: var(--navy);
	box-shadow: 0 0 0 1.5px var(--navy);
	background: #fff;
}

.radio-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 17.5px;
	font-weight: 500;
}
.radio-list label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.radio-list input { accent-color: var(--navy); width: 16px; height: 16px; margin: 0; }

.form-submit {
	grid-column: 1 / -1;
	justify-content: center;
	width: 100%;
}
.form-note {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 16px;
	color: var(--muted);
	margin: 2px 0 0;
}
.form-note svg { width: 14px; height: 14px; }

/* ---------- Contact: sidebar ---------- */

.help-card {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 26px 28px;
}
.help-card h3 {
	font-size: 21px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}
.help-card h3 svg { width: 16px; height: 16px; color: var(--olive); }
.help-card-sub { font-size: 17px; color: var(--muted); margin-bottom: 14px; }
.help-item {
	display: flex;
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid var(--line-soft);
}
.help-item svg { width: 22px; height: 22px; color: var(--ink); flex-shrink: 0; margin-top: 2px; }
.help-item-title { display: block; font-size: 17px; font-weight: 700; margin-bottom: 1px; }
.help-item p { font-size: 16px; color: var(--muted); margin: 0; line-height: 1.5; }

.help-cta-card {
	position: relative;
	background: var(--navy);
	color: var(--cream);
	border-radius: var(--radius);
	padding: 30px 28px;
	margin-top: 24px;
}
.help-cta-card h3 {
	color: var(--cream);
	font-size: 23px;
	font-weight: 700;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.help-cta-card h3 svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; margin-top: 5px; }
.help-cta-card p { font-size: 17.5px; color: #B9C2D6; }
.help-cta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 17px; font-weight: 500; }
.help-cta-list li { display: flex; align-items: center; gap: 10px; }
.help-cta-list svg { width: 16px; height: 16px; color: var(--cream); }
.help-cta-card .sticker {
	position: absolute;
	bottom: -22px;
	right: -16px;
	width: 88px;
	transform: rotate(9deg);
}

/* ---------- Contact: thanks strip ---------- */

.thanks-strip {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 24px 32px;
	margin-bottom: 80px;
}
.thanks-strip .sticker { width: 100%; }
.thanks-copy { text-align: center; }
.thanks-strip h3 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.thanks-strip p { font-size: 17.5px; color: var(--muted); margin: 0 auto; max-width: 52ch; }

.hide-it {
	display: none !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.page-hero-media .ph { min-height: 280px; }
	.page-hero-media .hl-img { height: 280px; }
	.page-hero-stickers { justify-content: flex-start; }
	.info-cards { grid-template-columns: 1fr; }
	.info-card { padding: 32px; gap: 32px; }
	.drop-archive { grid-template-columns: 1fr; }
	.drop-tiles { grid-template-columns: repeat(3, 1fr); }
	.cta-band { grid-template-columns: 1fr; }
	.products-layout { grid-template-columns: 1fr; }
	.product-cards { grid-template-columns: 1fr 1fr; }
	.quality-strip { grid-template-columns: 1fr; }
	.quality-items { grid-template-columns: 1fr 1fr; }
	.gallery-item, .gallery-item.is-wide { grid-column: span 6; }
	.sticker-wall { grid-template-columns: 1fr; gap: 24px; }
	.wall-tiles { justify-content: flex-start; }
	.contact-layout { grid-template-columns: 1fr; }
	.need-tiles { grid-template-columns: repeat(3, 1fr); }
	.thanks-strip { grid-template-columns: 110px 1fr; }
	.hero-media .ph { min-height: 340px; }
	.hero-media .hl-img { height: 340px; }
	.services-grid { grid-template-columns: 1fr 1fr; }
	.drop-band { grid-template-columns: 1fr; padding: 36px 30px; }
	.drop-stickers { justify-content: flex-start; }
	.social-row { justify-content: flex-start; }
	.why-grid { grid-template-columns: 1fr; }
	.why-media .ph { min-height: 260px; }
	.why-media .hl-img { min-height: 260px; }
	.testimonial-wrap > .sticker { top: -24px; right: 4px; }
	.footer-inner {
		grid-template-columns: 1fr;
		grid-template-areas: "pitch" "signup" "details";
		gap: 28px;
	}
	.footer-business-details { justify-self: start; max-width: 620px; }
}

@media (max-width: 720px) {
	.header-inner { gap: 16px; }
	.header-cta { display: none; }

	.nav-toggle {
		display: flex;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		padding: 8px;
		cursor: pointer;
	}
	.nav-toggle-bar { width: 22px; height: 2px; background: var(--ink); }

	.nav-drawer {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--cream);
		border-bottom: 1px solid var(--line);
		padding: 10px 28px 22px;
	}
	.nav-drawer.is-open { display: block; }
	.nav-list { flex-direction: column; align-items: flex-start; gap: 6px; }
	.nav-list a { font-size: 19px; padding: 8px 0; }
	.footer-email-signup form { grid-template-columns: 1fr; }
	.footer-email-signup input[type="submit"],
	.footer-email-signup button { width: 100%; }
	/* Below the full-width button there is no button edge left to centre the
	   arrow against, and no room to sit beside the form. */
	.footer-email-signup { flex-wrap: wrap; }
	.footer-signup-note { padding-bottom: 0; }

	.services-grid { grid-template-columns: 1fr; }
	.check-grid { grid-template-columns: 1fr; }
	.info-card,
	.info-card--belief {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 24px;
		gap: 24px;
	}
	.info-card--belief .info-card-content,
	.info-card--belief .info-card-media {
		grid-column: auto;
		grid-row: auto;
	}
	.info-card-media .ph { min-height: 260px; }
	.info-card-media .hl-img { min-height: 260px; }
	.product-cards { grid-template-columns: 1fr; }
	.product-card-grid { grid-template-columns: 1fr; }
	.drop-tiles { grid-template-columns: 1fr 1fr; }
	.quality-items { grid-template-columns: 1fr; }
	.cta-points { flex-direction: column; }
	.gallery-item, .gallery-item.is-wide { grid-column: span 12; }
	.form-grid { grid-template-columns: 1fr; }
	.need-tiles { grid-template-columns: 1fr 1fr; }
	.quote-form-card { padding: 26px 22px; }
	.thanks-strip { grid-template-columns: 1fr; }
}

/* ---------- Text: mobile sizing ----------
   Text runs 4px larger than the original scale on desktop and 2px larger on
   mobile, so every rule here restates its desktop size minus 2. Headings
   (h1–h4) are deliberately untouched at both sizes. Selectors mirror their
   originals exactly — several (.page-hero .hero-sub, .cta-band .cta-copy p)
   out-specify the plain element rule, so a looser selector here would lose.
   .nav-list a already had a mobile size of its own and is bumped in place
   above. Keep this block last in the file. */

@media (max-width: 720px) {
	body { font-size: 18px; }

	.btn { font-size: 15px; }
	.btn-sm { font-size: 14px; }
	.text-link { font-size: 14px; }
	.eyebrow { font-size: 14px; }
	.kicker { font-size: 14px; }
	.ph-tag { font-size: 12px; }
	.ph-label { font-size: 15px; }

	.hero-sub { font-size: 20px; }
	.feature-row li { font-size: 14px; }
	.page-hero .hero-sub { font-size: 19px; }
	.service-card p { font-size: 16px; }
	.drop-band p { font-size: 17px; }
	.why-copy .lead { font-size: 17px; }
	.check-grid { font-size: 16px; }
	.testimonial blockquote { font-size: 18px; }
	.testimonial-brand { font-size: 14px; }

	.footer-headline { font-size: 17px; }
	.footer-sub { font-size: 15px; }
	.footer-widget-title,
	.footer-widget .widget-title { font-size: 14px; }
	.footer-widget p,
	.footer-widget address,
	.footer-widget li { font-size: 15px; }
	.footer-email-signup ._form-label { font-size: 14px !important; }
	.footer-email-signup input[type="submit"],
	.footer-email-signup button,
	.footer-email-signup ._submit { font-size: 14px !important; }
	.footer-widget-admin-note { font-size: 14px; }
	.footer-legal p { font-size: 14px; }

	.info-card p { font-size: 16.5px; }
	.mini-checks { font-size: 15px; }
	.drop-card p { font-size: 15.5px; }
	.drop-tile-name { font-size: 14px; }
	.drop-tile-num { font-size: 13px; }
	.cta-band .cta-copy p { font-size: 16px; }
	.cta-point-title { font-size: 13px; }
	.cta-point p { font-size: 13.5px; }

	.product-card-sub { font-size: 15px; }
	.product-card-copy > p { font-size: 15px; }
	.side-panel-kicker { font-size: 16px; }
	.side-panel > p { font-size: 15.5px; }
	.step-copy p { font-size: 14.5px; }
	.side-panel-note { font-size: 14.5px; }
	.quality-item-title { font-size: 13px; }
	.quality-item p { font-size: 13.5px; }

	.breadcrumb { font-size: 14px; }
	.work-sub { font-size: 18px; }
	.filter-pill { font-size: 13.5px; }
	.wall-copy p { font-size: 15.5px; }
	.wall-badge { font-size: 12px; }

	.contact-hero-note { font-size: 16px; }
	.form-title { font-size: 21px; }
	.form-field > label { font-size: 14.5px; }
	.form-field input[type="text"],
	.form-field input[type="email"],
	.form-field input[type="tel"],
	.form-field select,
	.form-field textarea { font-size: 16px; }
	.need-tile { font-size: 14px; }
	.radio-list { font-size: 15.5px; }
	.form-note { font-size: 14px; }

	.help-card-sub { font-size: 15px; }
	.help-item-title { font-size: 15px; }
	.help-item p { font-size: 14px; }
	.help-cta-card p { font-size: 15.5px; }
	.help-cta-list { font-size: 15px; }
	.thanks-strip p { font-size: 15.5px; }
}