/* C&M Mowing: shared styles for every page. Colors and fonts follow Branding.md. */
:root {
  /* Brand colors (Branding.md §2) and web shades */
  --forest-950: #0c1811;
  --forest-900: #13241a;
  --forest-700: #274432;
  --bone: #f3efe6;
  --paper: #faf8f3;
  --ink: #141c17;
  --muted: #616a63;
  --brass: #b8955a;
  --brass-light: #d6bb87;
  --brass-ink: #7f6235;
  --error: #a33a2a;

  /* Lines and translucent Bone on dark backgrounds */
  --line: #ddd6c8;
  --line-strong: #8f8778;          /* form field edges: 3.35:1 on Paper */
  --line-dark: rgba(243,239,230,.14);
  --bone-line: rgba(243,239,230,.5); /* outline button border: 4.6:1 on Forest */
  --bone-muted: rgba(243,239,230,.72);
  --bone-soft: rgba(243,239,230,.92);
  --placeholder: #737b75;          /* 4.1:1 on Paper */
  --shadow-card: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06);

  /* Focus ring: Brass on dark, Brass-ink on light (both at least 3:1) */
  --focus: var(--brass-ink);
  --focus-offset: 3px;

  /* Fonts and type scale */
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --fs-caps: .75rem;     /* uppercase labels */
  --fs-fine: .8125rem;   /* fine print, captions, errors */
  --fs-small: .9rem;     /* secondary text, nav, small buttons */
  --fs-ui: .95rem;       /* list items, text links */
  --fs-lead: 1.125rem;   /* lead paragraphs */
  --tracking-caps: .16em;

  /* Layout */
  --header-h: 76px;
  --nav-gap: 30px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .2s;
  --dur: .3s;
  --dur-slow: .4s;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16.5px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.012em; margin: 0 0 .45em; }
h2 { font-size: clamp(2.4rem, 5vw, 3.7rem); }
h3 { font-size: 1.65rem; line-height: 1.15; }
p { margin: 0 0 1em; }
/* No one-word last lines; rules that balance instead override this */
p, li, caption, figcaption { text-wrap: pretty; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 112px 0; }
/* Bone is close to Paper, so a line marks the edge where they meet (like .band); the bottom meets the dark final CTA */
.section-bone { background: var(--bone); border-top: 1px solid var(--line); }
.label { display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: var(--fs-caps); font-weight: 600; line-height: 1.4; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brass-ink); margin: 0 0 24px; }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.label-spaced { margin-bottom: 40px; }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 560px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--focus-offset); }
/* Dark areas switch the ring to Brass; the light quote card inside the hero switches it back */
.header, .hero, .final, .mobile-bar { --focus: var(--brass); }
.quote { --focus: var(--brass-ink); }
.icon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Inline links inside running text */
.one-time a, .fine a, .how li a, .prose a, .faq p a { color: var(--ink); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
.one-time a, .how li a { font-weight: 600; }
.one-time a:hover, .fine a:hover, .how li a:hover, .prose a:hover, .faq p a:hover { color: var(--brass-ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 2px; font: 600 1rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: var(--fs-small); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-bone { background: var(--bone); color: var(--forest-900); }
.btn-bone:hover { background: var(--paper); border-color: var(--brass-light); }
.btn-line { border-color: var(--bone-line); color: var(--bone); }
.btn-line:hover { border-color: var(--bone); }
.btn-forest { background: var(--forest-900); color: var(--bone); }
.btn-forest:hover { background: var(--forest-700); }
.btn-forest:disabled:hover { background: var(--forest-900); }
.btn-block { width: 100%; }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 3px; transition: border-color var(--dur) var(--ease); }
.text-link:hover { border-bottom-color: currentColor; }
.text-link .arrow { transition: transform var(--dur) var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }

/* Logo (files from Logos/; never retype it) */
.brand { display: inline-flex; text-decoration: none; }
.header .brand img { display: block; height: 40px; width: auto; }
/* Bottom margin keeps clear space of at least the "C" height; the left pull aligns the letters with the text below */
.foot-logo { display: block; width: 200px; height: auto; margin: 0 0 24px -26px; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--forest-900) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--bone); border-bottom: 1px solid var(--line-dark); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }
.nav { display: flex; align-items: center; gap: var(--nav-gap); }
.nav .link { text-decoration: none; font-size: var(--fs-small); color: var(--bone-muted); transition: color var(--dur-fast) var(--ease); }
.nav .link:hover { color: var(--bone); }
.nav .phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bone); }
/* Section links: a Brass underline slides in on hover and marks the section on screen (set by the script) */
.nav .link:not(.phone) { position: relative; }
.nav .link:not(.phone)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav .link:not(.phone):hover::after, .nav .link.is-active::after { transform: scaleX(1); }
.nav .link.is-active { color: var(--bone); }
/* Divider between the section links and the phone number, centered in the nav gap */
.nav .phone { position: relative; }
.nav .link + .phone::before { content: ""; position: absolute; left: calc(var(--nav-gap) / -2); top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--line-dark); }
.nav .nav-cta { max-width: 200px; overflow: hidden; white-space: nowrap; transition: max-width var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease), margin var(--dur-slow) var(--ease), opacity var(--dur-fast) var(--ease), visibility var(--dur-slow), background var(--dur) var(--ease); }
/* Collapsed while the quote card is on screen, so the page never shows two "Get my price" buttons at once
   and the phone link sits flush right. The negative margin cancels the nav gap. */
.header.quote-in-view .nav-cta { max-width: 0; padding: 0; margin-left: calc(-1 * var(--nav-gap)); border-width: 0; opacity: 0; visibility: hidden; pointer-events: none; }

/* Hero */
.hero { position: relative; color: var(--bone); background: var(--forest-900); overflow: hidden; }
/* Soft glow behind the form, plus wide diagonal "mow stripes" that fade out under the headline */
.hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 45%, color-mix(in srgb, var(--forest-700) 95%, transparent), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(243,239,230,.02) 0 160px, transparent 160px 320px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 88px; align-items: center; align-content: center; min-height: clamp(640px, calc(100svh - var(--header-h)), 1000px); padding: 72px 24px; }
/* Availability line at the top of the quote card */
.avail { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--fs-fine); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
.hero h1 { font-size: clamp(2.9rem, 5.1vw, 4.4rem); line-height: 1.07; letter-spacing: -.02em; margin-bottom: 28px; text-wrap: balance; }
.hero h1 em { display: inline-block; color: var(--bone-muted); }
.hero h1 .label { color: var(--brass); margin-bottom: 20px; }
.hero-sub { font-size: var(--fs-lead); color: var(--bone-muted); max-width: 500px; margin-bottom: 36px; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px var(--nav-gap); }
.hero-ctas .text-link { color: var(--bone); }
.hero-meta { display: flex; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-dark); max-width: 500px; }
.hero-meta > * { flex: 1 1 0; padding-right: 20px; }
.hero-meta > * + * { padding-left: 20px; border-left: 1px solid var(--line-dark); }
.hero-meta strong { display: flex; align-items: baseline; gap: 6px; font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--brass-light); }
.hero-meta a strong { color: var(--bone); }
.hero-meta strong .stars { font-size: .6em; color: var(--brass-light); }
.hero-meta strong small { font-family: var(--sans); font-size: var(--fs-caps); color: var(--bone-muted); }
.hero-meta span { font-size: var(--fs-fine); color: var(--bone-muted); }
/* Frequency names each price, so it sits a step above the fine print */
.hero-meta > div > span { color: var(--bone-soft); font-weight: 500; }
.hero-meta a { text-decoration: none; }
.hero-meta a:hover span { color: var(--bone); }

/* Quote panel */
.quote { background: var(--paper); color: var(--ink); padding: 36px 36px 28px; position: relative; box-shadow: var(--shadow-card); }
.quote h2 { font-size: 2.2rem; margin-bottom: 6px; }
.quote .sub { color: var(--muted); font-size: var(--fs-small); margin-bottom: 24px; line-height: 1.55; }
.field { margin-bottom: 14px; }
.field label, .field legend { display: block; font-size: var(--fs-fine); font-weight: 600; color: var(--ink); margin-bottom: 2px; padding: 0; }
.field input[type=text], .field input[type=tel] { width: 100%; font: inherit; font-size: 1rem; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); transition: border-color var(--dur-fast) var(--ease); }
.field input::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus { outline: none; border-bottom-color: var(--forest-900); }
.field input.error { border-bottom-color: var(--error); }
fieldset.field { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.freq { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
.freq label { position: relative; display: block; margin: 0; cursor: pointer; }
.freq label + label { margin-left: -1px; }
.freq input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.freq span { display: block; text-align: center; padding: 10px 8px; border: 1px solid var(--line-strong); font-size: var(--fs-small); font-weight: 500; color: var(--muted); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.freq input:checked + span { position: relative; z-index: 1; border-color: var(--forest-900); background: var(--forest-900); color: var(--bone); }
.freq input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: var(--focus-offset); }
.one-time { font-size: var(--fs-fine); color: var(--muted); margin: 10px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { display: block; color: var(--error); font-size: var(--fs-fine); margin-top: 4px; }
.quote .btn { margin-top: 4px; }
.fine { font-size: var(--fs-fine); color: var(--muted); margin: 14px 0 0; text-align: center; line-height: 1.6; text-wrap: balance; }
.fine .sep { margin: 0 8px; }
.success { text-align: center; padding: 30px 0; }
.success .icon { width: 44px; height: 44px; color: var(--brass-ink); margin: 0 auto 18px; display: block; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Promise band */
.band { background: var(--bone); border-bottom: 1px solid var(--line); }
.band ul { list-style: none; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); }
.band li { position: relative; padding: 36px 28px; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; text-wrap: balance; }
/* Dividers stop short of the band's edges */
.band li + li::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.band li:first-child { padding-left: 0; }
.band .icon { display: block; width: 18px; height: 18px; color: var(--brass-ink); margin-bottom: 12px; }
.band strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--ink); margin-bottom: 2px; }

/* Section header split */
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 56px; }
.split-head h2 { text-wrap: balance; }
/* Lead starts level with the heading's first line, below the section label */
.split-head .lead { margin: 0; padding-top: 44px; }

/* Pricing */
/* How it works closes out pricing, so the section ends tighter than the standard padding */
.section-tight-end { padding-bottom: 56px; }
.price-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: start; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table caption { caption-side: top; text-align: left; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); padding-bottom: 24px; }
.price-table caption strong { color: var(--ink); font-weight: 600; }
.price-table th, .price-table td { padding: 20px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; }
/* Column heads track tighter than .label so the plan names fit their columns */
.price-table thead th { font-size: var(--fs-caps); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 0; border-bottom-color: var(--ink); }
.price-table thead th.hl { color: var(--brass-ink); }
.price-table tbody th { font-weight: 400; font-size: 1rem; }
.price-table tbody th small { display: block; color: var(--muted); font-size: var(--fs-fine); margin-top: 2px; }
.price-table td { font-family: var(--serif); font-size: 2.2rem; line-height: 1; width: 28%; }
.price-table td, .price-table thead th + th { padding-left: 20px; padding-right: 12px; }
.price-table td sup { font-size: .55em; vertical-align: .8em; margin-right: 2px; color: var(--ink); }
/* Every 2 weeks is the default plan, so its column gets a faint Bone tint */
.price-table .hl { background: var(--bone); }
.price-table td.none { font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.4; color: var(--muted); vertical-align: middle; }
.price-notes { list-style: none; padding: 0; margin: 28px 0 0; max-width: 560px; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.price-notes li { padding: 10px 0; }
.price-notes strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.included { background: var(--bone); padding: 40px; }
.included h3 { margin-bottom: 16px; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; }
.ticks li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-ui); }
.ticks li:last-child { border-bottom: 0; }
.ticks .icon { color: var(--brass-ink); margin-top: 5px; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 24px; }
.perk { background: var(--paper); padding: 18px; font-size: var(--fs-fine); color: var(--muted); line-height: 1.5; margin: 0; }
.perk strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); line-height: 1.15; margin-bottom: 4px; }
.how { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 32px; align-items: baseline; margin: 64px 0 0; padding: 28px 0 0; border-top: 1px solid var(--ink); counter-reset: how; }
.how ol { display: contents; list-style: none; }
.how-title { margin: 0; white-space: nowrap; }
.how li { counter-increment: how; font-size: var(--fs-ui); color: var(--muted); text-wrap: balance; }
.how li::before { content: counter(how); display: block; font-family: var(--serif); font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--brass-ink); margin-bottom: 8px; }
.how li strong { display: block; color: var(--ink); font-weight: 600; }

/* Work photos, below the reviews */
.gallery-wrap { margin: 56px 0 0; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.gallery .crop-left { object-position: 25% 50%; }

/* Reviews */
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.review { margin: 0; }
.review blockquote { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.28; }
/* The mark's box is trimmed to the glyph so it sits just above its quote */
.review blockquote::before { content: "\201C"; display: block; height: .42em; font-size: 4.5rem; line-height: .9; color: var(--brass); margin-bottom: 10px; }
.review figcaption { font-size: var(--fs-fine); color: var(--muted); }
.review figcaption strong { color: var(--ink); font-weight: 600; margin-right: 8px; }
.stars { color: var(--brass); letter-spacing: .15em; }
.rating { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rating-num { font-family: var(--serif); font-size: 3.6rem; line-height: 1; }
.rating-meta { font-size: var(--fs-small); color: var(--muted); flex: 1; }
.rating-meta .stars { display: block; font-size: 1.2rem; line-height: 1.3; color: var(--brass-ink); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 88px; align-items: start; }
.faq-grid .lead { margin-bottom: 24px; text-wrap: balance; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; text-wrap: balance; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background:
    linear-gradient(var(--brass-ink),var(--brass-ink)) center/16px 1.5px no-repeat,
    linear-gradient(var(--brass-ink),var(--brass-ink)) center/1.5px 16px no-repeat; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; margin: 0; color: var(--muted); }
/* Answers slide open where the browser supports it; elsewhere they open instantly */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Final CTA */
.final { background: var(--forest-900); color: var(--bone); text-align: center; position: relative; overflow: hidden; }
/* Echoes the hero: a soft glow behind the text, and the same mow stripes fading in toward the edges */
.final::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 75% at 50% 50%, color-mix(in srgb, var(--forest-700) 85%, transparent), transparent 70%); }
.final::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(243,239,230,.02) 0 160px, transparent 160px 320px);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, transparent 35%, #000 85%); mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, transparent 35%, #000 85%); }
.final .wrap { position: relative; z-index: 1; }
.final .label { justify-content: center; color: var(--brass); }
.final .label::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.final h2 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.final h2 em { color: var(--bone); }
.final p:not(.label) { color: var(--bone-muted); font-size: var(--fs-lead); margin: 0 auto 36px; max-width: 480px; text-wrap: balance; }
.final .hero-ctas { justify-content: center; }

/* Footer */
/* Light footer: the dark final CTA ends the green, so no divider is needed */
.site-foot { background: var(--paper); color: var(--muted); font-size: var(--fs-small); padding: 64px 0 40px; }
.foot { display: grid; grid-template-columns: 1fr auto; gap: 48px; }
.foot-blurb { max-width: 340px; }
.foot .foot-title { font: 600 var(--fs-caps)/1.4 var(--sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brass-ink); margin: 0 0 16px; }
.foot a { color: var(--ink); text-decoration: none; display: block; margin-bottom: 8px; transition: color var(--dur-fast) var(--ease); }
.foot a:hover { color: var(--brass-ink); }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: var(--fs-fine); }
.foot-bottom:first-child { margin-top: 0; }
.foot-bottom a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.foot-bottom a:hover { color: var(--brass-ink); }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); }

/* Text pages (privacy) */
.page { padding: 56px 0 80px; }
.page .wrap { max-width: 720px; }
.page h1 { font-size: clamp(2.4rem, 6vw, 2.8rem); line-height: 1.1; margin-bottom: 8px; }
.page h2 { font-size: 1.65rem; line-height: 1.15; margin: 40px 0 8px; }
.updated { color: var(--muted); font-size: var(--fs-small); margin-bottom: 32px; }
.page-back { margin-top: 48px; }
.page + .site-foot { padding-top: 0; }

.mobile-bar { display: none; }

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 64px 24px 80px; min-height: 0; }
  .quote { max-width: 560px; }
  .price-grid, .reviews, .faq-grid, .split-head { grid-template-columns: 1fr; }
  .price-grid, .reviews, .faq-grid { gap: 56px; }
  .split-head { gap: 20px; margin-bottom: 44px; }
  .split-head .lead { padding-top: 0; }
  .band ul { grid-template-columns: repeat(2, 1fr); }
  .band li { padding: 24px 20px; }
  .band li:nth-child(3) { padding-left: 0; }
  .band li:nth-child(3)::before { display: none; }
  .band li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .how { grid-template-columns: repeat(3, 1fr); }
  .how-title { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .nav .link:not(.phone), .nav .link + .phone::before { display: none; }
}
@media (max-width: 760px) {
  :root { --header-h: 68px; }
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .section-tight-end { padding-bottom: 40px; }
  .wrap { padding: 0 20px; }
  .header .brand { padding: 8px 0; }
  .header .brand img { height: 32px; }
  .nav .link { display: none; }
  /* The bottom bar or an on-page button always offers "Get my price" on phones */
  .nav .nav-cta { display: none; }
  /* Small links get a 44px tap area without changing how they look */
  .text-link, .one-time a, .fine a, .how li a, .prose a, .faq p a, .foot-bottom a { position: relative; }
  .text-link::after, .one-time a::after, .fine a::after, .how li a::after, .prose a::after, .faq p a::after, .foot-bottom a::after { content: ""; position: absolute; inset: -12px -6px; }
  .foot a { padding: 10px 0; margin: 0; }
  .hero-inner { padding: 48px 20px 64px; gap: 44px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero .hero-ctas .text-link { margin: 4px auto 0; }
  /* Rating drops to its own row so the per-visit prices fit side by side */
  .hero-meta { flex-wrap: wrap; margin-top: 32px; }
  .hero-meta strong { font-size: 1.7rem; }
  .hero-meta > * { padding-right: 12px; }
  .hero-meta > * + * { padding-left: 12px; }
  .hero-meta span { font-size: var(--fs-caps); }
  .hero-meta > a { flex-basis: 100%; margin-top: 16px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .quote { padding: 30px 24px 24px; }
  .band ul { padding: 0 20px; }
  .band li { padding: 20px 14px; font-size: var(--fs-fine); }
  .band li:nth-child(odd) { padding-left: 0; }
  .band strong { font-size: 1.05rem; }
  .price-table td { font-size: 1.75rem; }
  .price-table td, .price-table thead th + th { padding-left: 12px; padding-right: 8px; }
  /* Plan names wrap to two lines here; bottom-align the row so all three heads sit on the rule */
  .price-table thead th { vertical-align: bottom; text-wrap: balance; }
  .price-table tbody th { font-size: var(--fs-small); }
  .included { padding: 32px 24px; }
  .perks { grid-template-columns: 1fr; }
  .how, .foot { grid-template-columns: 1fr; }
  .how { gap: 18px; margin-top: 48px; }
  .how li { display: grid; grid-template-columns: 36px 1fr; }
  .how li::before { grid-row: span 2; margin: 0; font-size: 1.9rem; }
  .faq summary { font-size: 1.3rem; padding: 20px 0; }
  .faq details p { padding-right: 0; }
  .mobile-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--forest-950) 97%, transparent); border-top: 1px solid var(--line-dark); transform: translateY(110%); transition: transform var(--dur-slow) var(--ease); }
  .mobile-bar.show { transform: none; }
  .mobile-bar .btn { flex: 1; min-height: 48px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .dot::after { animation: none; display: none; }
  .spin { animation: none; }
}