/* ==========================================================================
   Redbrook Lawn & Property Care — demo site stylesheet

   THE THREE TIERS DELIBERATELY DIFFER NOW.

   These started identical, on the theory that matching design would make the
   price difference read as scope rather than polish. It did not survive
   contact with the job: if a prospect cannot see the difference, the demo is
   not selling anything. Each tier now carries the design attention its price
   actually buys, which is also the truth of how the work is quoted.

   The shared base below is common to all three. Tier-specific overrides are
   appended at the bottom of tiers 1 and 3. css/tour.css and js/tour.js ARE
   still identical everywhere and should stay that way.

   CONTRAST (measured against --paper #F6F2E9):
     --ink        #1F3D2B   11.8:1   body text
     --ink-soft   #4A5A4E    6.6:1   muted text
     --accent-ink #9A4A22    5.6:1   links and small accent text
     white on --ink         11.8:1   primary button
   --accent #B85C2E is 4.07:1 and FAILS AA for normal text. It is decorative
   only: rules, icon strokes, borders. Never put words in it.
   ========================================================================== */

:root {
  --green:       #1F3D2B;
  --green-deep:  #162C1F;
  --green-mid:   #2F5A40;
  --paper:       #F6F2E9;
  --paper-alt:   #EFE9DC;
  --surface:     #FFFFFF;
  --ink:         #1F3D2B;
  --ink-soft:    #4A5A4E;
  --ink-faint:   #6B7A6E;
  --accent:      #B85C2E;
  --accent-ink:  #9A4A22;
  --accent-tint: #F2E3D7;
  --border:      rgba(31, 61, 43, 0.12);
  --border-strong: rgba(31, 61, 43, 0.24);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1120px;
  --radius:    4px;
  --shadow-sm: 0 2px 10px -4px rgba(31, 61, 43, 0.15);
  --shadow:    0 16px 36px -20px rgba(31, 61, 43, 0.32);
  --header-h:  76px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--green); }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(56px, 8vw, 100px); }
.section--tight { padding-block: clamp(40px, 6vw, 68px); }
.section--alt { background: var(--paper-alt); }
.section--green { background: var(--green); color: var(--paper); }
.section--green h2 { color: var(--paper); }
.section--green p { color: #C9D6CC; }
.page-hero + .section { padding-top: clamp(26px, 3.5vw, 44px); }
.center { text-align: center; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--green); color: #fff; padding: 10px 18px; border-radius: 3px; font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
.section--green .eyebrow { color: #E5B698; }
.section--green .eyebrow::before { background: #E5B698; }
.section-head { max-width: 700px; margin-bottom: clamp(30px, 5vw, 48px); }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem); }
.section-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }
.lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.97rem; line-height: 1;
  padding: 15px 26px; border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-mid); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--ink); border-color: var(--green); transform: translateY(-2px); }
.btn--light { background: var(--paper); color: var(--green); }
.btn--light:hover { background: #fff; color: var(--green); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: rgba(246, 242, 233, 0.4); }
.btn--outline-light:hover { color: #fff; border-color: var(--paper); transform: translateY(-2px); }
.btn--lg { padding: 17px 32px; font-size: 1.04rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 242, 233, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; height: var(--header-h); gap: 18px; }
.nav__brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; flex: none; color: var(--ink); }
.nav__brand:hover { color: var(--ink); }
.nav__brand svg { width: 34px; height: 34px; flex: none; color: var(--green); }
.nav__brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; line-height: 1.1; letter-spacing: -0.01em; }
.nav__brand .wordmark small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.nav__menu { display: flex; align-items: center; gap: 6px; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  position: relative; white-space: nowrap;
  font-weight: 600; font-size: 0.94rem; color: var(--ink-soft);
  padding: 9px 13px; transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform 0.22s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: 8px; }
.nav__toggle {
  display: none; background: transparent; border: 1px solid var(--border-strong);
  width: 44px; height: 44px; border-radius: 3px; cursor: pointer; padding: 0;
  color: var(--ink); align-items: center; justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav[data-open="true"] .nav__toggle .icon-open { display: none; }
.nav[data-open="true"] .nav__toggle .icon-close { display: block; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px clamp(20px, 5vw, 40px) 26px;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .nav__links a::after { display: none; }
  .nav__cta { margin: 14px 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(60px, 10vw, 120px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(720px 380px at 82% 10%, rgba(184, 92, 46, 0.12), transparent 62%),
    linear-gradient(170deg, #FBF8F1 0%, var(--paper) 55%, var(--paper-alt) 100%);
}
.hero__inner { max-width: 760px; }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 3.5rem); letter-spacing: -0.02em; }
.hero h1 .accent { color: var(--accent-ink); }
.hero__lead { color: var(--ink-soft); font-size: clamp(1.06rem, 1rem + 0.5vw, 1.22rem); margin-top: 20px; max-width: 56ch; }
.hero .btn-row { margin-top: 32px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 36px; color: var(--ink-soft); font-size: 0.92rem; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 17px; height: 17px; color: var(--accent-ink); flex: none; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding-block: clamp(42px, 6vw, 76px); background: linear-gradient(170deg, #FBF8F1, var(--paper)); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.page-hero p { color: var(--ink-soft); margin-top: 14px; font-size: 1.08rem; max-width: 60ch; }
.breadcrumb { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 9px; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-faint); }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); height: 100%;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card h3 { font-size: 1.16rem; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 0.96rem; }
a.card { color: inherit; display: block; }
a.card:hover { color: inherit; }
.card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 700; font-size: 0.9rem; color: var(--accent-ink); }
.card__more svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
a.card:hover .card__more svg { transform: translateX(3px); }

.icon-badge {
  width: 46px; height: 46px; border-radius: 3px; display: grid; place-items: center;
  background: var(--accent-tint); border: 1px solid rgba(184, 92, 46, 0.24);
  color: var(--accent-ink); margin-bottom: 16px;
}
.icon-badge svg { width: 23px; height: 23px; }

/* ---------- Checklist ---------- */
.ticks { display: grid; gap: 10px; margin-top: 16px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; color: var(--ink-soft); font-size: 0.95rem; }
.ticks svg { width: 16px; height: 16px; color: var(--accent-ink); margin-top: 5px; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__body p + p { margin-top: 16px; }
.split__body p { color: var(--ink-soft); }

/* Decorative panel standing in for a photograph */
.photo {
  aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--green-mid);
  background:
    repeating-linear-gradient(45deg, rgba(31, 61, 43, 0.045) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, #E4EADF, #D6E0D2);
}
.photo svg { width: 58px; height: 58px; opacity: 0.5; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
}
.chip svg { width: 14px; height: 14px; color: var(--accent-ink); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding-top: 26px; border-top: 2px solid var(--accent); }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -0.85em; left: 0; padding-right: 10px; background: var(--paper);
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--accent-ink);
}
.section--alt .steps li::before { background: var(--paper-alt); }
.steps h3 { font-size: 1.05rem; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- Price list ---------- */
.pricelist { display: grid; gap: 0; max-width: 720px; }
.pricelist div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pricelist dt { font-weight: 700; }
.pricelist dd { margin: 0; color: var(--accent-ink); font-weight: 700; }
.pricelist .note { color: var(--ink-faint); font-size: 0.88rem; width: 100%; }

/* ---------- Quote / testimonial ---------- */
.quote { border-left: 3px solid var(--accent); padding-left: 22px; }
.quote p { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.45; }
.quote footer { color: var(--ink-faint); font-size: 0.92rem; margin-top: 14px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; }
.gallery figcaption { color: var(--ink-soft); font-size: 0.9rem; margin-top: 10px; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.field .hint { color: var(--ink-faint); font-size: 0.85rem; }
.field .req { color: var(--accent-ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: 3px; padding: 13px 14px; width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-ink); background: var(--surface); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A4A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
}
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 620px) { .check-grid { grid-template-columns: 1fr; } }
.check-grid label, .radio-row label { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); cursor: pointer; }
.check-grid input, .radio-row input { width: auto; accent-color: var(--green); margin-top: 3px; flex: none; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.form-actions .privacy { color: var(--ink-faint); font-size: 0.87rem; max-width: 44ch; }

/* ---------- Thanks ---------- */
.thanks { max-width: 620px; }
.thanks__mark { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid rgba(184, 92, 46, 0.3); color: var(--accent-ink); margin-bottom: 24px; }
.thanks__mark svg { width: 26px; height: 26px; }
.thanks h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); }
.thanks__lead { color: var(--ink-soft); font-size: 1.1rem; margin-top: 16px; }
.thanks .btn-row { margin-top: 30px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--green); border-radius: var(--radius); padding: clamp(30px, 5vw, 54px); text-align: center; color: var(--paper); }
.cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem); color: var(--paper); }
.cta-band p { color: #C9D6CC; max-width: 52ch; margin: 14px auto 26px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: var(--paper); padding-block: 52px 26px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: var(--paper); }
.footer-brand svg { width: 32px; height: 32px; color: #9FC0A8; flex: none; }
.footer-brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.site-footer .blurb { color: #AFC0B4; font-size: 0.93rem; max-width: 34ch; }
.footer-col h4 { font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; color: #8FA595; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { display: grid; gap: 1px; }
.footer-col a, .footer-col span { display: inline-block; padding-block: 8px; color: var(--paper); font-size: 0.94rem; }
.footer-col a:hover { color: #E5B698; }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(246, 242, 233, 0.14);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center;
  color: #8FA595; font-size: 0.85rem;
}
/* The demo notice. Do not remove it while these sites are public: they are
   not a real business, and anything that could be mistaken for one should
   say so plainly somewhere a reader will find it. */
.demo-note {
  background: #14261B; color: #AFC0B4; font-size: 0.82rem; text-align: center;
  padding: 11px 20px; border-top: 1px solid rgba(246, 242, 233, 0.1);
}
.demo-note strong { color: #E5B698; }
.demo-note a { color: #E5B698; text-decoration: underline; }

/* ---------- Reveal ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   TIER 1 OVERRIDES — deliberately the plainest of the three

   The three demos used to share one stylesheet so the tiers would read as
   scope rather than polish. In practice that made the difference invisible
   and the demos stopped selling anything, so each tier now gets the amount
   of design attention its price actually buys.

   This is the restrained end: flat surfaces, one column where the higher
   tiers use several, almost no motion. It should look competent and tidy,
   never cheap — a prospect has to be able to imagine accepting it.
   ========================================================================== */

:root { --container: 940px; }

/* Flat, not lifted. No shadows anywhere at this tier. */
.card { box-shadow: none; }
.card:hover { transform: none; box-shadow: none; border-color: var(--border); }
.form-card { box-shadow: none; }

/* Buttons sit still */
.btn:hover { transform: none; }

/* One column for the service list rather than a four-across grid */
.grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .grid--4, .grid--3 { grid-template-columns: 1fr; } }

/* A flat ground instead of the layered gradient wash */
.hero::before { background: var(--paper-alt); }
.hero { padding-block: clamp(48px, 7vw, 84px); }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.8rem); }

/* Plain rules instead of the counter-in-a-gap treatment */
.steps li { border-top-width: 1px; border-top-color: var(--border-strong); }
.steps li::before { color: var(--ink-faint); }

/* The single photo panel is a plain block here */
.photo { background: var(--paper-alt); border-color: var(--border-strong); }

/* Section rhythm is tighter, so the whole page is shorter */
.section { padding-block: clamp(44px, 6vw, 72px); }

/* Reveal animation is off at this tier: it is a polish item */
.js-reveal .reveal { opacity: 1; transform: none; transition: none; }

/* SAFETY NET. An inline SVG with no width from CSS or markup falls back to the
   browser default of 300x150. :where() gives this zero specificity, so every
   real rule still wins; it only catches anything that would otherwise be
   unsized. */
svg:where(:not([width])) { width: 1.15em; height: 1.15em; }