/* Greenfold — first-party landscaping / gardening template (S114).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking.

   Voice: OUTDOOR AND GENEROUS. Deep green and terracotta on oat, a serif headline over a sans
   body, and large 20px organic radii — against voltway-electrical-studio's dark geometric caps,
   copperline-plumbing-studio's warm-white pills and vowbarn-events-studio's hairline serif.

   This template carries the library's first CALCULATOR (see main.js): a materials estimator
   for fencing, turf, paving and decking. It is entirely client-side — no API, no key, no cost,
   no network — and it is framed as an estimate throughout, never as a quote. */

:root {
  --green: #1f3d2b;
  --green-mid: #2f5a3f;
  --green-soft: #e3ece1;
  --leaf: #5c8a4a;
  /* ⭐ S186 — #c2683f → #ae5832. White on the old value measured 3.93:1 and AA small text
     needs 4.5; it was recorded in contrast-baseline.json at S116 across SEVEN rows and
     deferred. ✓ MEASURED after: white on it 4.95:1. The florist had the identical defect on
     its own accent, which is what says this is an authoring pattern across the library
     rather than one bad swatch. */
  --terracotta: #ae5832;
  --terracotta-deep: #a3512c;
  --oat: #f3efe4;
  --card: #fffdf7;
  --line: #ddd6c4;
  --ink: #1c211c;
  --muted: #5f6a5e;
  --radius: 20px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Theming for the shared accessibility panel (library/shared/a11y/). Presentation is the
     TENANT's, logic is shared — the platform's own law, one level down. */
  --a11y-ink: var(--ink);
  --a11y-surface: var(--card);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--oat);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 12;
  background: var(--green); color: var(--oat); padding: 0.55rem 1.1rem;
  border-radius: 0 0 12px 12px; text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; background: var(--oat);
  border-bottom: 1px solid var(--line); position: relative;
}
.wordmark {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  text-decoration: none; color: var(--green); white-space: nowrap;
}
.wordmark span[aria-hidden] { color: var(--terracotta); }
.nav-disclosure summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 600; padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--green); border-radius: 999px; color: var(--green);
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--green); color: var(--oat); }
.nav-disclosure nav {
  position: absolute; right: 1.35rem; left: 1.35rem; top: calc(100% + 0.5rem); z-index: 9;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 0.9rem; box-shadow: 0 18px 38px rgba(31, 61, 43, 0.16);
}
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--green); }
.nav-disclosure nav a:not(.button):hover { background: var(--green-soft); }

/* Desktop inline nav is OPTED INTO by main.js (matchMedia adds .nav-inline and sets [open]).
   A closed <details> does not render its children, so pure CSS cannot inline this menu at desktop
   widths — without JavaScript the summary button stays visible and usable instead. */
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav {
  position: static; flex-direction: row; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.8rem; }

.header-call { display: none; }
@media (max-width: 799px) {
  .site-header { gap: 0.6rem; }
  .header-call { display: inline-block; margin-left: auto; }
}
@media (max-width: 479px) {
  .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; }
  .wordmark { font-size: 1.2rem; }
  .header-call { font-size: 0.9rem; }
  .nav-disclosure summary { padding: 0.42rem 0.85rem; font-size: 0.9rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 1rem;
  background: var(--terracotta); color: #fff;
  border: 1.5px solid var(--terracotta); border-radius: 999px;
  padding: 0.82rem 1.8rem; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.button:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); transform: translateY(-1px); }
.button-small { padding: 0.5rem 1.1rem; font-size: 0.94rem; }
.button-outline { background: transparent; color: var(--green); border-color: var(--green); }
.button-outline:hover { background: var(--green); color: var(--oat); }
.button-light { background: var(--oat); color: var(--green); border-color: var(--oat); }
.button-light:hover { background: #fff; border-color: #fff; }
.call-link { font-weight: 700; color: var(--terracotta-deep); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ----------
   S274 lift: full-bleed garden photograph rather than the badge→headline→plate split every
   other template in the library used. Greenfold's OWN grammar within that shape: an organic
   radial veil (not a hard diagonal), a serif headline still living in the copy, a single-line
   "Design → Build → Maintain" step-strip (this template's own considered detail — landscaping
   sells the whole job, not one photo), and a grounded (unrotated) project-caption card carrying
   a terracotta plant-tag ribbon rather than holiday-let-studio's tilted postcard. */
.hero { position: relative; overflow: hidden; min-height: min(42rem, 90vh); display: flex; background: var(--green); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.hero-veil {
  position: absolute; inset: 0;
  /* S284 — a committed LEFT-column scrim so the light hero copy always sits on a dark ground (two
     judges flagged white body text over bright lawn <4.5:1). Left ~50% darkened to ~0.62-0.86; the
     right (photo) stays open. Keeps the radial anchor + top fade underneath. */
  background:
    linear-gradient(90deg, rgba(9, 18, 11, 0.93) 0%, rgba(9, 18, 11, 0.86) 24%, rgba(9, 18, 11, 0.70) 44%, rgba(9, 18, 11, 0.46) 56%, rgba(9, 18, 11, 0.17) 70%, rgba(9, 18, 11, 0.03) 82%, transparent 92%),
    radial-gradient(120% 95% at 10% 100%, rgba(12, 24, 16, 0.96) 0%, rgba(12, 24, 16, 0.82) 30%, rgba(12, 24, 16, 0.34) 56%, rgba(12, 24, 16, 0.06) 74%),
    linear-gradient(0deg, rgba(8, 16, 10, 0.55) 0%, rgba(8, 16, 10, 0) 34%);
}
.hero-frame { position: relative; z-index: 1; width: 100%; max-width: 70rem; margin: 0 auto; padding: 5.5rem 1.35rem 3rem; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.hero-copy { max-width: 36rem; }
.eyebrow {
  display: inline-block; font-size: 0.82rem; font-weight: 700;
  color: var(--green); background: var(--green-soft);
  border-radius: 999px; padding: 0.35rem 0.95rem; margin-bottom: 1.1rem;
}
.hero .eyebrow { color: var(--oat); background: rgba(9, 18, 11, 0.8); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.7rem); max-width: 16ch; color: var(--oat); text-shadow: 0 1px 3px rgba(6, 12, 8, 0.75), 0 2px 14px rgba(6, 12, 8, 0.5); }
/* S285 — the accent was light green on a green garden (green-on-green, both judges flagged it):
   a warm summer-gold reads high-contrast against the foliage AND matches "more than one summer". */
.hero h1 em { font-style: italic; color: #f2d488; text-shadow: 0 1px 3px rgba(6, 12, 8, 0.8), 0 2px 12px rgba(6, 12, 8, 0.55); }
.hero-sub { margin-top: 1.1rem; font-size: 1.12rem; max-width: 44ch; color: var(--muted); }
.hero .hero-sub { color: #eef4ec; text-shadow: 0 1px 2px rgba(6, 12, 8, 0.7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }
.hero .button-outline { color: var(--oat); border-color: rgba(255, 255, 255, 0.7); }
.hero .button-outline:hover { background: rgba(255, 255, 255, 0.14); color: var(--oat); }
.hero-steps {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.6rem;
  background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px; padding: 0.6rem 1.15rem; backdrop-filter: blur(6px);
  color: var(--oat); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em;
}
.hero-steps .arrow { color: #a9d08e; font-weight: 400; }
.hero-trust { margin-top: 1rem; font-size: 0.92rem; font-weight: 600; color: #cfe0c9; }

/* Project-caption card: grounded (no rotation), a terracotta ribbon standing in for a plant
   label — the library's OTHER full-bleed hero (holiday-let-studio) tilts its inset like a
   postcard; this one sits square, matching the 20px organic radii this template is built on. */
.hero-caption {
  position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 1; width: 12.5rem;
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 36px rgba(10, 20, 12, 0.45);
}
.hero-caption-tag {
  display: block; background: var(--terracotta); color: #fff;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.85rem;
}
.hero-caption img { width: 100%; height: 6.4rem; object-fit: cover; display: block; }
.hero-caption figcaption { padding: 0.65rem 0.85rem 0.85rem; }
.hero-caption-place { display: block; font-family: var(--serif); font-weight: 700; font-size: 0.92rem; color: var(--green); }
.hero-caption-detail { display: block; margin-top: 0.2rem; font-size: 0.74rem; color: var(--muted); }
@media (max-width: 900px) { .hero-caption { display: none; } }
@media (max-width: 640px) {
  .hero { min-height: min(36rem, 100vh); }
  .hero-frame { padding: 4.5rem 1.1rem 2.25rem; }
  .hero-photo { object-position: 62% 55%; }
  .hero-steps { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
}

/* ========================================================================
   S291 — GREENFOLD-NAMESPACED HOMEPAGE VOCABULARY (.gf-*)
   The homepage no longer uses the shared .section/.item-grid/.card/.feature-grid/.proof/.band
   skeleton every other trade template started from (those remain below only for work.html and
   estimate.html — the interior pages keep the shared idiom, same split keystone-trades-studio
   made between its bespoke homepage and its plain services.html/quote.html). Each section below
   is a bespoke landscaping structure: a hard/soft split, the estimator rendered inline as the
   page's signature tool, a twelve-month growing calendar, a full-bleed seasonal cinema band, a
   site-diary spotlight with a filmstrip, a guarantee ledger with one embedded testimonial, an
   FAQ accordion and a real booking block. No two-of-these-and-you've-seen-them-all cards. */
.gf-kicker {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-deep);
  margin-bottom: 0.7rem;
}
.gf-kicker--light { color: #f2d488; }
.gf-ground h2, .gf-estimator h2, .gf-calendar h2, .gf-journal h2, .gf-care h2, .gf-faq h2, .gf-book h2 {
  font-size: clamp(1.85rem, 4.4vw, 2.7rem);
}

/* A small plant-tag ribbon — the same device as the hero's project-caption tag, reused as this
   template's OWN way of labelling a category instead of a generic pill or numbered code. */
.gf-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: #fff; border-radius: 999px; padding: 0.3rem 0.85rem;
}
.gf-tag--hard { background: var(--terracotta); }
.gf-tag--soft { background: var(--green); }

/* ---- gf-ground: hard vs soft landscaping, an asymmetric two-column split ---- */
.gf-ground { background: var(--oat); border-top: 1px solid var(--line); }
.gf-ground-inner { max-width: 72rem; margin: 0 auto; padding: 3.4rem 1.35rem; }
.gf-ground-head { max-width: 40rem; }
.gf-ground-note { margin-top: 0.75rem; color: var(--muted); }
.gf-ground-cols { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.2rem; }
@media (min-width: 780px) { .gf-ground-cols { grid-template-columns: 1fr 1fr; } }
.gf-ground-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gf-ground-col-head { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; padding: 1.4rem 1.4rem 0; }
.gf-ground-col-head h3 { font-size: 1.4rem; color: var(--green); }
.gf-ground-photo { display: block; width: 100%; height: 11rem; object-fit: cover; margin-top: 1rem; }
.gf-ground-list { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: 1rem; }
.gf-ground-list h4 { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); }
.gf-ground-list p { margin-top: 0.25rem; color: var(--muted); font-size: 0.95rem; }
.gf-ground-link { margin-top: 1.6rem; }

/* ---- gf-estimator: the signature — rendered INLINE, not a link to another page ---- */
.gf-estimator { background: var(--green-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gf-estimator-inner { max-width: 62rem; margin: 0 auto; padding: 3.6rem 1.35rem; }
.gf-estimator-head { max-width: 46rem; }
.gf-estimator-note { margin-top: 0.75rem; color: var(--muted); max-width: 58ch; }
.gf-estimator-panel {
  margin-top: 2rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.9rem;
  box-shadow: 0 20px 44px rgba(31, 61, 43, 0.1);
}

/* ---- gf-calendar: the growing calendar — a twelve-month ribbon, not a feature-card grid ---- */
.gf-calendar { background: var(--card); }
.gf-calendar-inner { max-width: 72rem; margin: 0 auto; padding: 3.4rem 1.35rem; }
.gf-calendar-ribbon {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.2rem, 1fr);
  gap: 0.6rem; margin-top: 1.8rem; padding-bottom: 0.4rem;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.gf-calendar-ribbon li {
  scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  background: var(--green-soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 0.6rem 1.1rem; text-align: center; position: relative;
}
.gf-cal-month { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--green); }
.gf-cal-tag { font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.gf-calendar-ribbon li.is-current {
  background: var(--terracotta); border-color: var(--terracotta-deep);
  box-shadow: 0 10px 24px rgba(174, 88, 50, 0.3); transform: translateY(-4px);
}
.gf-calendar-ribbon li.is-current .gf-cal-month, .gf-calendar-ribbon li.is-current .gf-cal-tag { color: #fff; }
.gf-cal-flag {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.18rem 0.55rem;
  white-space: nowrap;
}
.gf-calendar-note { margin-top: 1.6rem; max-width: 62ch; color: var(--muted); }
.gf-calendar-note strong { color: var(--green); }

/* ---- gf-cinema: full-bleed lush-garden cinematic band, scroll-linked Ken-Burns ---- */
.gf-cinema { position: relative; overflow: hidden; min-height: clamp(24rem, 60vh, 38rem); display: grid; background: var(--green); }
.gf-cinema-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; will-change: transform; }
.gf-cinema::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(9,18,11,0.92) 0%, rgba(9,18,11,0.72) 38%, rgba(9,18,11,0.22) 72%, rgba(9,18,11,0.04) 100%);
}
.gf-cinema-overlay { position: relative; z-index: 2; align-self: end; max-width: 72rem; width: 100%; margin: 0 auto; padding: 3rem 1.35rem 2.8rem; color: var(--oat); }
.gf-cinema-overlay h2 { color: var(--oat); font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.06; }
.gf-cinema-line { margin-top: 0.9rem; max-width: 44ch; color: #dce9d8; font-size: 1.06rem; }
.gf-cinema-marks { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed rgba(255,255,255,0.28); }
@media (min-width: 700px) { .gf-cinema-marks { grid-template-columns: repeat(4, 1fr); } }
.gf-cinema-marks li { font-size: 0.9rem; color: #dce9d8; }
.gf-cinema-marks li span { display: block; font-family: var(--serif); font-weight: 700; color: #f2d488; margin-bottom: 0.2rem; }

/* ---- gf-journal: a featured recent build + a small filmstrip, not a 3-up card grid ---- */
.gf-journal { background: var(--oat); }
.gf-journal-inner { max-width: 72rem; margin: 0 auto; padding: 3.6rem 1.35rem; }
.gf-journal-feature { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 1.9rem; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 44px rgba(31,61,43,0.14); }
@media (min-width: 820px) { .gf-journal-feature { grid-template-columns: 1.3fr 1fr; } }
.gf-journal-photo { display: block; width: 100%; height: 100%; min-height: 16rem; object-fit: cover; }
.gf-journal-card { background: var(--card); padding: 1.9rem 1.9rem 2.1rem; display: flex; flex-direction: column; gap: 1.1rem; }
.gf-journal-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.gf-journal-facts div:first-child { grid-column: 1 / -1; }
.gf-journal-facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gf-journal-facts dd { font-family: var(--serif); font-size: 1.15rem; color: var(--green); margin-top: 0.15rem; }
.gf-journal-quote { font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; color: var(--ink); font-style: italic; }
.gf-journal-by { font-size: 0.88rem; font-weight: 700; color: var(--green); }
.gf-journal-by span { color: var(--muted); font-weight: 400; }
.gf-journal-strip { display: flex; gap: 1rem; margin-top: 1.5rem; overflow-x: auto; padding-bottom: 0.3rem; }
.gf-journal-strip li { flex: 0 0 auto; width: 10.5rem; }
.gf-journal-strip img { display: block; width: 100%; height: 7rem; object-fit: cover; border-radius: 14px; }
.gf-journal-strip span { display: block; margin-top: 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--muted); }
.gf-journal-link { margin-top: 1.7rem; }

/* ---- gf-care: guarantee ledger + one embedded testimonial, not a 3-up review grid ---- */
.gf-care { background: var(--green-soft); }
.gf-care-inner { max-width: 72rem; margin: 0 auto; padding: 3.6rem 1.35rem; display: grid; gap: 2.2rem; }
@media (min-width: 880px) { .gf-care-inner { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; } }
.gf-care-note { margin-top: 0.75rem; color: var(--muted); max-width: 32ch; }
.gf-care-photo { margin-top: 1.5rem; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.gf-care-photo img { display: block; width: 100%; height: 9rem; object-fit: cover; }
.gf-care-photo figcaption { padding: 0.7rem 0.9rem; font-size: 0.8rem; color: var(--muted); }
.gf-care-body { display: grid; gap: 1.6rem; }
.gf-care-ledger { display: grid; gap: 0; }
.gf-care-ledger div { display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .gf-care-ledger div { grid-template-columns: 12rem 1fr; gap: 1.2rem; align-items: baseline; } }
.gf-care-ledger div:first-child { border-top: 2px solid var(--green); }
.gf-care-ledger dt { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--green); }
.gf-care-ledger dd { color: var(--muted); font-size: 0.95rem; }
.gf-care-quote { background: var(--green); color: var(--oat); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.gf-care-quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; }
.gf-care-quote figcaption { margin-top: 0.9rem; font-size: 0.85rem; font-weight: 700; color: #f2d488; }
.gf-care-quote figcaption span { color: #cfe0c9; font-weight: 400; }

/* ---- gf-faq: an accordion teaser, reusing this template's OWN .faq-item hairline rows
   (established for faq.html) rather than inventing a second FAQ shape for the homepage ---- */
.gf-faq { background: var(--card); }
.gf-faq-inner { max-width: 72rem; margin: 0 auto; padding: 3.6rem 1.35rem; }
.gf-faq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 100%; }
.gf-faq-head h2 { flex-basis: 100%; }
.gf-faq-list { max-width: 54rem; }

/* ---- gf-book: the conversion moment — a real booking block, not a generic dark band ---- */
.gf-book { background: var(--green); color: var(--oat); position: relative; overflow: hidden; }
.gf-book::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 26rem; height: 26rem;
  background: radial-gradient(circle, rgba(242, 212, 136, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.gf-book-inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 3.6rem 1.35rem; display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 820px) { .gf-book-inner { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; } }
.gf-book-copy h2 { color: var(--oat); }
.gf-book-copy p { margin-top: 0.8rem; color: #cfe0c9; max-width: 44ch; }
.gf-book-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; }
@media (min-width: 820px) { .gf-book-actions { align-items: flex-end; text-align: right; } }
.gf-book-call { color: #f2d488; }
.gf-book-hours { font-size: 0.85rem; color: #b6c9b2; }

/* ---- gf-* scroll reveals (transform/opacity only -> 0 CLS; view() scroll-linked) ---- */
@keyframes gf-rise {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gf-ground-col, .gf-calendar-ribbon li, .gf-journal-strip li, .gf-care-ledger div, .gf-faq .faq-item {
      animation: gf-rise linear both; animation-timeline: view(); animation-range: entry 2% cover 24%;
    }
    .gf-cinema-img { animation: gf-cinema-kenburns linear both; animation-timeline: view(); animation-range: cover; will-change: transform; }
    @keyframes gf-cinema-kenburns { from { transform: scale(1.14) translateY(-2%); } to { transform: scale(1) translateY(2%); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .gf-ground-col, .gf-calendar-ribbon li, .gf-journal-strip li, .gf-care-ledger div, .gf-faq .faq-item, .gf-cinema-img {
    animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ---- S9+2 signature — MOW-STRIPE wipe across the lawn cinema band. `.gf-cinema-img` is a real
   <img> (no pseudo-elements render on replaced elements), so the stripe texture lives on
   `.gf-cinema::before` instead, sitting between the photo (z:0) and the existing dark overlay
   (`.gf-cinema::after`, z:1) so the stripes read as texture ON the lawn rather than a flat
   band. Alternating diagonal bands wipe on via clip-path as the band scrolls into view — the
   mower going up the lawn, once — then sit still; nothing loops. Distinct from gf-cinema-kenburns
   (which stays, per brief) and from gf-rise/gf-enter (opacity+scale, no clip-path). */
.gf-cinema::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    100deg,
    rgba(9, 18, 11, 0) 0px, rgba(9, 18, 11, 0) 44px,
    rgba(9, 18, 11, 0.16) 44px, rgba(9, 18, 11, 0.16) 88px
  );
  mix-blend-mode: multiply;
  clip-path: inset(0 100% 0 0);
}
@keyframes gf-mow-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gf-cinema::before { animation: gf-mow-wipe linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .gf-cinema::before { animation: none !important; animation-timeline: none !important; clip-path: inset(0 0 0 0) !important; }
}

/* ---------- Section frame + filter strip ---------- */
.section { max-width: 70rem; margin: 0 auto; padding: 3rem 1.35rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section-intro { margin-top: 0.6rem; max-width: 52ch; color: var(--muted); }
.filter-count { color: var(--green); font-weight: 700; }

.strip { background: var(--green-soft); padding: 1.4rem 1.35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-form {
  max-width: 70rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: end;
}
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { color: var(--green); font-size: 0.9rem; font-weight: 700; }
.filter-form select {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
}

/* ---------- Cards ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.9rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(31, 61, 43, 0.14); }
.card-body { padding: 1.2rem 1.35rem 1.45rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-size: 1.25rem; }
.card-where { font-size: 0.86rem; font-weight: 700; color: var(--terracotta-deep); white-space: nowrap; }
.card-meta { margin-top: 0.45rem; color: var(--muted); font-size: 0.96rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.card-tags li {
  font-size: 0.78rem; font-weight: 600; color: var(--green);
  background: var(--green-soft); border-radius: 999px; padding: 0.22rem 0.75rem;
}
.filter-empty { margin-top: 1.9rem; padding: 1.5rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- CSS artwork (all imagery is authored gradients) ----------
   Construction rules, all learned by LOOKING at renders rather than at source:
   1. `background-repeat: no-repeat` on the shared selector — a fractionally-sized layer tiles
      across the whole plate otherwise.
   2. Parts of an object must TOUCH, or they read as unrelated marks.
   3. Round things are DISCRETE radial-gradients; a repeating radial clipped into a band stacks
      into pillars.
   4. A glow needs a GRADUAL falloff; a hard alpha stop renders as a solid disc.
   Repeating-* gradients still repeat WITHIN their own layer, so fence boards and deck runs are
   unaffected — that is exactly what draws them. */

.art-fence, .art-turf, .art-paving, .art-decking, .art-planting, .art-tree {
  background-repeat: no-repeat;
  background-color: var(--green-soft);
}

/* Closeboard fence: vertical boards on two rails, posts either end, grass beneath. */
/* Freshly mown lawn: mowing stripes, with two rolls of turf waiting at the edge. */
/* Paved patio: a grid of slabs with visible joints, laid up to a border course. */
/* Decking: timber boards with dark gaps, running across, with a step edge at the front. */
/* Planted border: shrub mounds over a soil bed, with a few flowers coming through. */
/* Tree and hedge work: a broadleaf tree over a clipped hedge line. */
/* ---------- The materials estimator — this template's signature tool ---------- */
.estimator {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; margin-top: 1.9rem;
}
.estimator h2, .estimator h3 { font-size: 1.35rem; }
.estimator > p { color: var(--muted); margin-top: 0.5rem; max-width: 58ch; }
.est-controls { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 680px) { .est-controls { grid-template-columns: repeat(3, 1fr); } }
.est-controls .field label { display: block; font-weight: 600; font-size: 0.95rem; }
.est-controls input, .est-controls select {
  width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--oat);
  border: 1px solid var(--line); border-radius: 12px;
}
.est-out { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.est-list { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .est-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.est-list li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.est-list .what { color: var(--ink); }
.est-list .leader { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-0.25em); min-width: 1.5rem; }
.est-list .qty { font-weight: 700; color: var(--green); white-space: nowrap; }
.est-total {
  margin-top: 1.25rem; padding: 1rem 1.2rem; background: var(--green-soft);
  border-radius: 14px; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; justify-content: space-between;
}
.est-total .label { font-weight: 700; color: var(--green); }
.est-total .value { font-family: var(--serif); font-size: 1.6rem; color: var(--green); }
.est-caveat { margin-top: 1rem; font-size: 0.93rem; color: var(--muted); max-width: 62ch; }

/* ---------- Bands (interior pages: work.html, faq.html) ---------- */
.band { background: var(--green); color: var(--oat); padding: 3.5rem 1.35rem; text-align: center; }
.band p { max-width: 50ch; margin: 0.9rem auto 1.7rem; color: #b6c9b2; }

/* ---------- Interior pages ---------- */
.page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.35rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--terracotta-deep); }
.page-hero { padding: 1.5rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); }
.page-hero p { margin-top: 0.9rem; max-width: 54ch; color: var(--muted); }

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.9rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start;
}
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--oat);
  border: 1px solid var(--line); border-radius: 12px;
}
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--green); min-height: 1.4em; }

.panel { background: var(--green-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; align-self: start; }
.panel h2 { font-size: 1.35rem; }
.steps { counter-reset: step; margin-top: 1.2rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.05rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-weight: 700; color: var(--oat); background: var(--leaf); border-radius: 50%;
}
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--muted); font-size: 0.96rem; }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }

/* ---------- Footer ---------- */
footer {
  background: var(--green); color: #a9b8a6;
  padding: 2.6rem 1.35rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
}
.wordmark-footer { font-family: var(--serif); font-size: 1.4rem; color: var(--oat); margin-bottom: 0.5rem; }
footer .call-link { color: #e9a179; }
.footer-truth { max-width: 34ch; font-size: 0.88rem; color: #96af94; align-self: end; }
/* Build credit — carried by every template in this library, matching the deployed demos. */
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; color: #96af94; }
.footer-powered a { color: var(--oat); text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: #e9a179; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover, .card:hover { transform: none; }
}

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* <img> box behaviour for card-art (added with the photography swap). */
.card-art { display: block; width: 100%; object-fit: cover; }

/* ---------- Questions & answers ------------------------------------ S186
   Native <details>, so every answer is readable, expandable and linkable with
   JavaScript off — the same disclosure idiom the header nav already uses.
   ⚠ Greenfold's own shape, not the florist's: square-shouldered rows separated by
   hairlines on the oat ground rather than floating cards, because this template's
   voice is "outdoor and generous" with 20px organic radii doing the softening
   elsewhere. Same component, different form — the no-two-alike law still applies
   inside a shared feature. */
.faq-list { margin-top: 1.7rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 3rem 1.25rem 0; position: relative;
  font-family: var(--serif); font-weight: 600; font-size: 1.16rem; color: var(--green);
  min-height: 44px; display: flex; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 0.9rem; top: 50%;
  width: 0.6rem; height: 0.6rem; margin-top: -0.4rem;
  border-right: 2px solid var(--terracotta-deep); border-bottom: 2px solid var(--terracotta-deep);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.faq-item summary:hover { color: var(--terracotta-deep); }
.faq-item summary:focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; }
.faq-answer { padding: 0 3rem 1.4rem 0; }
.faq-answer p { color: var(--muted); max-width: 68ch; }
.section-head h2:focus { outline: none; }
.section-head h2:focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 4px; }

/* Footer navigation (S186) — the owner asked for "headers and footers with FAQs". */
.footer-nav { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.footer-nav h2 {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--oat);
  margin-bottom: 0.7rem;
}
.footer-nav ul { display: grid; gap: 0.45rem; }
.footer-nav a { color: #a9b8a6; text-decoration: none; font-size: 0.95rem; display: inline-block; min-height: 24px; }
.footer-nav a:hover { color: var(--oat); text-decoration: underline; text-underline-offset: 2px; }

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. These two cannot be — they have to override THIS
   template's own variables, and the 20 templates do not share a vocabulary.
   check-library-a11y.mjs fails the build if a package mounts the panel without both. */

/* High contrast — every ink-role token to black, every canvas-role token to white.
   ⛔ The hardcoded footer/band greys are overridden BY SELECTOR below, because they
   are not variables at all. Moving only the tokens would have left the footer as a
   muted sage on pure black — the same second-construction-site trap the accent had. */
html[data-a11y-contrast="high"] {
  --green: #000;
  --green-mid: #000;
  --leaf: #000;
  --terracotta: #000;
  --terracotta-deep: #000;
  --ink: #000;
  --muted: #000;
  --line: #000;
  --oat: #fff;
  --card: #fff;
  --green-soft: #fff;
}
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] .footer-truth,
html[data-a11y-contrast="high"] .footer-powered,
html[data-a11y-contrast="high"] .footer-nav a,
html[data-a11y-contrast="high"] footer .call-link,
html[data-a11y-contrast="high"] .band p,
html[data-a11y-contrast="high"] .gf-kicker--light,
html[data-a11y-contrast="high"] .gf-cinema-line,
html[data-a11y-contrast="high"] .gf-cinema-marks li,
html[data-a11y-contrast="high"] .gf-cinema-marks li span,
html[data-a11y-contrast="high"] .gf-book-copy p,
html[data-a11y-contrast="high"] .gf-book-call,
html[data-a11y-contrast="high"] .gf-book-hours,
html[data-a11y-contrast="high"] .gf-care-quote figcaption,
html[data-a11y-contrast="high"] .gf-care-quote figcaption span { color: #fff; }

/* Colour-blind friendly — the Okabe-Ito colour-universal pair (#0072B2 blue,
   #E69F00 orange), separable under protan, deutan and tritan vision.
   ⚠ Green AND terracotta is a red-green pairing, which is the single most common
   confusion there is — so this template is the one that most needs the mode, and
   the chrome moves to a neutral dark rather than staying green. */
html[data-a11y-colour="safe"] {
  --green: #23282a;
  --green-mid: #3a4245;
  --green-soft: #e8f1f7;
  --leaf: #0072b2;
  --terracotta: #0072b2;
  --terracotta-deep: #005a8d;
}

/* ---------- Motion (S286) — below-fold work.html cards ease in on scroll (transform/opacity only -> 0 CLS) ---------- */
@keyframes gf-enter {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .item-grid > .card { animation: gf-enter linear both; animation-timeline: view(); animation-range: entry 4% cover 30%; }
    .item-grid > .card:nth-child(2) { animation-range: entry 10% cover 34%; }
    .item-grid > .card:nth-child(3) { animation-range: entry 16% cover 38%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .item-grid > .card { animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- S286 heavier — card image ZOOM on hover (premium gallery feel; hover/focus only, no idle, no CLS) ---------- */
.card { overflow: hidden; }
.card-art { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-art, .card:focus-within .card-art { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .card-art { transition: none; } .card:hover .card-art, .card:focus-within .card-art { transform: none; } }

/* ---------- Hero motion (S287) — recent-project card slides in on load + scroll-linked Ken-Burns
   on the garden photo. transform/opacity ONLY -> 0 CLS. The `.hero-veil` scrim is a SEPARATE layer
   and is never scaled, so the hero copy's contrast is unchanged by the zoom (the S284/S285 scrim +
   gold accent still carry text legibility over the bright lawn). ---------- */

/* Ken-Burns garden photo. `view()` cover-range makes the RESTING state at the top of the page the
   static layout: at scroll 0 the hero sits mid-range at ~scale(1.05) (the photo over-fills, so no
   edge is ever revealed on-screen), then eases toward scale(1) as the hero scrolls away. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo {
      animation: gf-hero-kenburns linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
  }
}
@keyframes gf-hero-kenburns {
  from { transform: scale(1.1) translateY(-2%); }
  to   { transform: scale(1) translateY(2%); }
}

/* Recent-project caption slides in from the right. This is a single LOAD-MOMENT (it terminates, so
   S121's no-idle-loop law holds) rather than a `view()` timeline: this card sits above the fold, and
   a view() reveal would freeze it ~77% off-screen at scroll 0 (a broken resting frame). As a load
   one-shot its resting state is the static layout, and `.hero` clips the overflow so no scrollbar. */
@media (prefers-reduced-motion: no-preference) {
  .hero-caption {
    animation: gf-caption-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
    will-change: transform, opacity;
  }
}
@keyframes gf-caption-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Reduced-motion belt for the new hero motion (strips animation + timeline, forces static state). */
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-caption {
    animation: none !important;
    animation-timeline: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══ S299 additions: loading→reveal, lawnmower-on-scroll, effects, deep footer ═══════════════ */

/* Loading curtain → hero image reveal. A deep-green curtain carrying the wordmark lifts on load,
   and the hero photo does a clip-and-settle reveal beneath it. Removed by main.js; no-JS shows
   the site immediately (the loader is display:none without the .gf-loading body class). */
.gf-loader { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; background: var(--green); color: var(--oat); }
body.gf-loading .gf-loader { display: flex; }
.gf-loader-word { font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 600; letter-spacing: -0.01em; opacity: 0; transform: translateY(14px); animation: gf-word 0.7s 0.1s ease forwards; }
.gf-loader-word span { color: var(--leaf); }
.gf-loader-bar { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); width: min(220px, 50vw); height: 3px; background: rgba(255,255,255,0.18); overflow: hidden; }
.gf-loader-bar::after { content: ""; position: absolute; inset: 0; background: var(--leaf); transform: translateX(-100%); animation: gf-load 1.1s 0.15s ease forwards; }
@keyframes gf-word { to { opacity: 1; transform: none; } }
@keyframes gf-load { to { transform: translateX(0); } }
.gf-loader.gf-lift { transform: translateY(-100%); transition: transform 0.8s cubic-bezier(.7,0,.3,1); }
body.gf-loading .hero-photo { clip-path: inset(0 0 100% 0); }
body.gf-loading.gf-reveal .hero-photo { clip-path: inset(0 0 0 0); transition: clip-path 1s 0.2s cubic-bezier(.6,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .gf-loader { display: none !important; } body.gf-loading .hero-photo { clip-path: none; } }

/* Cursor glow — soft leaf-green pool (fine pointers only) */
.cursor-glow { position: fixed; top: 0; left: 0; width: 440px; height: 440px; border-radius: 50%; margin: -220px 0 0 -220px; pointer-events: none; z-index: 2; opacity: 0; background: radial-gradient(circle, rgba(92,138,74,0.14), rgba(92,138,74,0) 62%); transition: opacity 0.4s ease; will-change: transform; }
body.has-glow .cursor-glow { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

/* Scroll reveals */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* Lawnmower-on-scroll: a striped lawn band the mower crosses as you scroll, the mown stripes
   brightening behind it. The mower position tracks scroll progress via --mow (set in main.js). */
.gf-mow { position: relative; height: clamp(150px, 20vw, 220px); overflow: hidden; background: repeating-linear-gradient(90deg, #3f6a45 0 60px, #467449 60px 120px); border-block: 1px solid var(--green-mid); }
.gf-mow-strip { position: absolute; inset: 0; width: var(--mow, 8%); background: repeating-linear-gradient(90deg, #6ba85a 0 60px, #79bd66 60px 120px); box-shadow: inset -40px 0 40px -20px rgba(0,0,0,0.15); }
.gf-mow-line { position: absolute; top: 0; bottom: 0; left: var(--mow, 8%); width: 2px; background: rgba(0,0,0,0.12); }
.gf-mower { position: absolute; top: 50%; left: var(--mow, 8%); transform: translate(-90%, -50%); width: clamp(70px, 9vw, 104px); z-index: 3; filter: drop-shadow(0 8px 8px rgba(0,0,0,0.25)); }
.gf-mow-label { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; font-family: var(--serif); color: var(--oat); font-size: 0.92rem; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
@media (prefers-reduced-motion: reduce) { .gf-mow-strip, .gf-mow-line, .gf-mower { --mow: 60% !important; } }

/* Deep green footer with the "grass grows" reveal — blades sprout up along the top edge as it
   enters, plus a payments row. Unique to Greenfold. */
footer { position: relative; background: var(--green); color: #e7efe1; padding: clamp(3.4rem,6vw,4.8rem) clamp(1.1rem,4vw,2rem) 2rem; overflow: hidden; }
.footer-grass { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2; }
.footer-grass path { fill: var(--leaf); transform: scaleY(0); transform-origin: bottom; }
footer.is-in .footer-grass path { animation: gf-grow 0.9s cubic-bezier(.3,1.3,.5,1) forwards; }
footer.is-in .footer-grass path:nth-child(2) { animation-delay: 0.08s; }
footer.is-in .footer-grass path:nth-child(3) { animation-delay: 0.16s; }
@keyframes gf-grow { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { footer.is-in .footer-grass path { animation: none; transform: scaleY(1); } }
.footer-grid { max-width: 74rem; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); padding-top: 0.6rem; }
.footer-brand .wordmark-footer { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: #fff; }
.footer-brand .wordmark-footer span { color: var(--leaf); }
.footer-brand p { color: #b7c9ac; font-size: 0.92rem; margin-top: 0.5rem; max-width: 30ch; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.footer-badges li { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #cfe0c4; border: 1px solid #365a3d; padding: 0.28rem 0.55rem; border-radius: 999px; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer-social a { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid #365a3d; border-radius: 50%; color: #cfe0c4; transition: color .2s, background .2s, border-color .2s; }
.footer-social a:hover { color: var(--green); background: var(--leaf); border-color: var(--leaf); }
.footer-social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.footer-col h2 { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #93a988; margin-bottom: 0.8rem; }
.footer-col ul { display: grid; gap: 0.5rem; }
.footer-col a { color: #cdddc2; text-decoration: none; font-size: 0.94rem; }
.footer-col a:hover { color: #fff; }
.footer-hours { color: #b7c9ac; font-size: 0.9rem; line-height: 1.7; }
.footer-hours .call-link { color: var(--leaf); }
.footer-pay { max-width: 74rem; margin: 2rem auto 0; padding-top: 1.4rem; border-top: 1px solid #315538; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.footer-pay .pay-label { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #93a988; font-weight: 700; }
.footer-pay ul { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pay-mark { width: 46px; height: 30px; border: 1px solid #365a3d; border-radius: 4px; background: #fff; display: grid; place-items: center; }
.pay-mark svg { width: 38px; height: 24px; }
.footer-base { max-width: 74rem; margin: 2rem auto 0; padding-top: 1.4rem; border-top: 1px solid #315538; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.footer-powered { color: #93a988; font-size: 0.86rem; }
.footer-powered a { color: var(--leaf); }
.footer-truth { max-width: 74rem; margin: 1.4rem auto 0; color: #7f9576; font-size: 0.78rem; line-height: 1.6; border-top: 1px dashed #315538; padding-top: 1.1rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .footer-base { flex-direction: column; align-items: flex-start; } }

/* ═══════════════════════════════════════════════════════════════════════════
   S301 CLONE LAYER — Greenfold rebrand of the Jacksons / Tom Massey system.
   The source stylesheet above remains for the older template contract; this
   prefixed layer owns the rebranded pages below and deliberately mirrors the
   reference's wide commerce header, pale-grey product canvas, coloured rows,
   editorial whitespace and deep trust footer.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --gf25-navy: #283270;
  --gf25-navy-dark: #20285f;
  --gf25-grey: #efeff1;
  --gf25-grey-dark: #d9d9df;
  --gf25-copy: #8c8b90;
  --gf25-ink: #30303a;
  --gf25-teal: #186684;
  --gf25-red: #722321;
  --gf25-brown: #6b6253;
  --gf25-orange: #ff5e03;
  --gf25-green: #0b7a3f;
  --gf25-white: #fff;
  --gf25-head: "Arial Narrow", "Roboto Condensed", "Inter", Arial, sans-serif;
  --gf25-body: "Lora", Georgia, serif;
  --gf25-ui: "Inter", "Segoe UI", Arial, sans-serif;
  --gf25-wide: 1280px;
}
body.gf25-body {
  background: var(--gf25-grey);
  color: var(--gf25-ink);
  font-family: var(--gf25-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
body.gf25-body *, body.gf25-body *::before, body.gf25-body *::after { box-sizing: border-box; }
body.gf25-body img { display: block; max-width: 100%; }
body.gf25-body a { color: inherit; }
body.gf25-body h1, body.gf25-body h2, body.gf25-body h3, body.gf25-body b, body.gf25-body button, body.gf25-body input, body.gf25-body select { font-family: var(--gf25-head); }
body.gf25-body h1, body.gf25-body h2, body.gf25-body h3 { letter-spacing: .015em; }
.gf25-skip { position: fixed; top: -60px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--gf25-navy); color: #fff; font-family: var(--gf25-ui); text-decoration: none; transition: top .2s; }
.gf25-skip:focus { top: 0; }

/* Loading reveal: the competitor opens on a clean image-first canvas. */
.gf25-loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--gf25-navy); color: #fff; clip-path: inset(0); transition: clip-path .85s cubic-bezier(.7,0,.2,1); }
.gf25-loader strong { font: 700 clamp(30px, 5vw, 78px)/1 var(--gf25-head); letter-spacing: .19em; }
.gf25-loader span { position: absolute; bottom: 24%; left: 50%; width: min(240px, 42vw); height: 3px; background: var(--gf25-orange); transform: translateX(-50%) scaleX(.1); transform-origin: left; transition: transform .7s ease; }
.gf25-loading .gf25-loader span { transform: translateX(-50%) scaleX(1); }
.gf25-loader.gf25-loader--lift { clip-path: inset(0 0 100% 0); }

/* S301 motion-proof repair — hold a complete, opaque branded poster for the first capture
   beat, then release it as one surface. This prevents the fixed bottom utility rail from
   peeking through a partially lifted curtain at desktop widths. */
.gf25-loader { min-height: 100vh; min-height: 100dvh; z-index: 9999; }
body.gf25-loading .gf25-loader:not(.gf25-loader--lift) { clip-path: inset(0) !important; }

/* The three-tier Jacksons-style header. */
.gf25-header { position: relative; z-index: 20; background: #fff; color: var(--gf25-navy); box-shadow: 0 1px 0 rgba(40,50,112,.14); }
.gf25-utility { min-height: 32px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--gf25-grey-dark); color: #596386; font: 700 11px/1.2 var(--gf25-ui); letter-spacing: .02em; }
.gf25-utility nav { display: flex; flex-wrap: wrap; gap: 24px; }
.gf25-utility a { text-decoration: none; white-space: nowrap; }
.gf25-utility a:hover, .gf25-menu a:hover { color: var(--gf25-orange); }
.gf25-utility-note { color: #74747e; white-space: nowrap; }
.gf25-mainbar { min-height: 92px; max-width: var(--gf25-wide); margin: 0 auto; padding: 0 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: #fff; }
.gf25-phone { color: var(--gf25-navy); font: 700 23px/1 var(--gf25-head); text-decoration: none; white-space: nowrap; }
.gf25-phone span { font-size: 19px; margin-right: 7px; }
.gf25-logo { display: inline-flex; align-items: baseline; gap: 8px; color: var(--gf25-navy); font: 800 clamp(25px, 3.2vw, 43px)/1 var(--gf25-head); letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.gf25-logo span { font: 600 13px/1 var(--gf25-ui); letter-spacing: .17em; text-transform: uppercase; color: var(--gf25-orange); }
.gf25-account { justify-self: end; display: flex; align-items: center; gap: 20px; color: #777780; font: 11px/1.18 var(--gf25-ui); text-align: right; }
.gf25-account a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gf25-navy); color: var(--gf25-navy); font-size: 24px; text-decoration: none; }
.gf25-cart { color: var(--gf25-navy); font-size: 22px; line-height: 1; }
.gf25-search { width: 56px; height: 36px; border: 0; background: var(--gf25-grey); color: var(--gf25-navy); font: 34px/.7 Arial, sans-serif; cursor: pointer; }
.gf25-menu { border-top: 1px solid #e7e7eb; background: #fff; }
.gf25-menu summary { display: none; }
.gf25-menu nav { max-width: 1100px; min-height: 48px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.7vw, 44px); font: 700 14px/1 var(--gf25-head); }
.gf25-menu nav a { text-decoration: none; white-space: nowrap; }

/* Hero: full bleed, centred title, badge row and paired CTAs. */
.gf25-hero { position: relative; min-height: 610px; overflow: hidden; background: #222; color: #fff; }
.gf25-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; transform: scale(1.04); transition: transform 1.4s ease; }
.gf25-hero:hover > img { transform: scale(1.08); }
.gf25-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.18) 55%, rgba(0,0,0,.24)), linear-gradient(0deg, rgba(0,0,0,.58), transparent 54%); }
.gf25-hero-copy { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 124px 7vw 100px; text-align: center; }
.gf25-overline, .gf25-kicker, .gf25-hero-caption, .gf25-trust-badges, .gf25-button, .gf25-text-link, .gf25-collection-intro, .gf25-tool-card, .gf25-advice-grid, .gf25-shopping, .gf25-footer, .gf25-newsletter, .gf25-estimator-form { font-family: var(--gf25-ui); }
.gf25-overline, .gf25-kicker { margin: 0 0 15px; color: var(--gf25-orange); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.gf25-hero h1 { max-width: 800px; margin: 0 0 20px; font: 700 clamp(45px, 6vw, 91px)/.91 var(--gf25-head); letter-spacing: -.045em; }
.gf25-hero h1 em { font-style: normal; font-weight: 300; }
.gf25-hero-copy > p:not(.gf25-overline) { max-width: 600px; margin: 0 auto 24px; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.4; }
.gf25-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 28px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.gf25-trust-badges span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.75); background: rgba(40,50,112,.4); }
.gf25-trust-badges .gf25-stars { color: #6ddba2; letter-spacing: .13em; }
.gf25-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gf25-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 13px 22px; border: 1px solid transparent; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-decoration: none; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.gf25-button:hover { transform: translateY(-3px); }
.gf25-button--light { background: #fff; color: var(--gf25-navy); }
.gf25-button--navy { background: var(--gf25-navy); color: #fff; }
.gf25-button--orange { background: var(--gf25-orange); color: #fff; }
.gf25-button--outline-light { border-color: rgba(255,255,255,.85); color: #fff; background: transparent; }
.gf25-hero-caption { position: absolute; right: 5vw; bottom: 28px; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid var(--gf25-orange); font-size: 11px; }
.gf25-hero-caption b { letter-spacing: .12em; }

/* Product/category canvas, cards and editorial split. */
.gf25-categories, .gf25-reviews, .gf25-collections, .gf25-advice { padding: 82px 4vw; background: var(--gf25-grey); }
.gf25-section-heading { max-width: var(--gf25-wide); margin: 0 auto 30px; }
.gf25-section-heading h2 { max-width: 800px; margin: 0; color: var(--gf25-navy); font: 700 clamp(31px, 4vw, 56px)/.98 var(--gf25-head); }
.gf25-section-heading--centre { text-align: center; }
.gf25-section-heading--centre h2 { margin-left: auto; margin-right: auto; }
.gf25-section-heading--light, .gf25-section-heading--light h2 { color: #fff; }
.gf25-section-heading--light .gf25-kicker { color: #ffb08c; }
.gf25-category-grid { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gf25-category-grid { position: relative; z-index: 2; margin-top: 8px; margin-bottom: 42px; }
.gf25-category-card { position: relative; min-height: 275px; overflow: hidden; background: #fff; border-bottom: 3px solid var(--gf25-navy); box-shadow: 0 12px 19px rgba(20,24,55,.12); text-decoration: none; }
.gf25-category-card img { width: 100%; height: 228px; object-fit: cover; transition: transform .5s ease; }
.gf25-category-card:hover img { transform: scale(1.08); }
.gf25-category-card span { display: inline-block; padding: 15px 14px 12px; color: var(--gf25-navy); font: 700 16px/1 var(--gf25-head); }
.gf25-category-card i { float: right; padding: 12px 14px; color: var(--gf25-orange); font: 26px/1 Arial, sans-serif; font-style: normal; }
.gf25-feature-strip { max-width: var(--gf25-wide); margin: 0 auto; padding: 0 4vw 78px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--gf25-grey); }
.gf25-feature { position: relative; min-height: 316px; overflow: hidden; color: #fff; text-decoration: none; }
.gf25-feature > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gf25-feature:hover > img { transform: scale(1.06); }
.gf25-feature-overlay { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 7px; padding: 36px 30px 28px; background: linear-gradient(0deg, rgba(20,25,77,.95), transparent); }
.gf25-feature-overlay b { font: 700 27px/1 var(--gf25-head); letter-spacing: .05em; }
.gf25-feature-overlay small { font: 16px/1.4 var(--gf25-body); }
.gf25-feature-overlay em { width: fit-content; padding: 9px 14px; border: 1px solid #fff; font: 700 11px/1 var(--gf25-ui); font-style: normal; }
.gf25-brochure-art { height: 100%; padding: 28px 33px; background: linear-gradient(125deg, var(--gf25-navy) 0 48%, #bac3d2 48% 50%, #dce2eb 50%); color: #fff; }
.gf25-brochure-art span { display: block; font: 800 15px/1 var(--gf25-head); letter-spacing: .1em; }
.gf25-brochure-art strong { display: block; margin-top: 34px; font: 800 clamp(35px, 4vw, 65px)/.87 var(--gf25-head); letter-spacing: -.04em; }

/* Trust/standards row, deliberately asymmetric like the Jacksons blocks. */
.gf25-standards { max-width: var(--gf25-wide); margin: 0 auto; padding: 92px 7vw; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; background: #fff; }
.gf25-standard-copy h2 { margin: 0 0 20px; color: var(--gf25-navy); font: 700 clamp(35px, 4.7vw, 65px)/.94 var(--gf25-head); }
.gf25-standard-copy > p:not(.gf25-kicker) { max-width: 540px; margin: 0 0 28px; color: var(--gf25-copy); font-size: 17px; }
.gf25-standard-list { display: grid; gap: 14px; }
.gf25-standard-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 24px; }
.gf25-standard-gallery img { width: 100%; height: 82px; object-fit: cover; }
.gf25-standard-list { justify-items: center; text-align: center; }
.gf25-standard-list h3 { margin: -4px 0 8px; color: var(--gf25-navy); font: 700 clamp(28px, 3.2vw, 45px)/.98 var(--gf25-head); }
.gf25-standard-seals { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 20px; }
.gf25-standard-seals article { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gf25-standard-seals article p { max-width: 160px; margin: 0; color: var(--gf25-copy); font-size: 13px; }
.gf25-seal { display: grid; place-items: center; width: 68px; height: 68px; border: 4px double var(--gf25-orange); border-radius: 50%; color: var(--gf25-navy); font: 800 27px/1 var(--gf25-head); }
.gf25-seal--green { border-color: var(--gf25-green); color: var(--gf25-green); }
.gf25-seal--orange { border-color: var(--gf25-orange); color: var(--gf25-orange); }

.gf25-showcase { max-width: var(--gf25-wide); min-height: 380px; margin: 0 auto; display: grid; grid-template-columns: .78fr 1.22fr; background: var(--gf25-navy); color: #fff; }
.gf25-showcase-copy { padding: clamp(40px, 6vw, 88px); }
.gf25-showcase-copy h2 { margin: 0 0 18px; font: 700 clamp(36px, 4.6vw, 65px)/.9 var(--gf25-head); }
.gf25-showcase-copy > p:not(.gf25-kicker) { max-width: 360px; margin: 0 0 28px; color: #dce2fb; font-size: 17px; }
.gf25-showcase img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }

/* Reviews and product rows. */
.gf25-reviews { background: #fff; }
.gf25-review-grid { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 28px; align-items: start; }
.gf25-review-score { display: flex; flex-direction: column; gap: 3px; color: var(--gf25-navy); font-family: var(--gf25-ui); }
.gf25-review-score strong { color: var(--gf25-green); font-size: 30px; letter-spacing: .08em; }
.gf25-review-score b { font-size: 25px; }
.gf25-review-score span { color: var(--gf25-copy); font-size: 12px; }
.gf25-review-grid blockquote { margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--gf25-grey-dark); color: var(--gf25-copy); font-size: 14px; }
.gf25-review-grid blockquote p { margin: 0 0 10px; }
.gf25-review-grid cite { color: var(--gf25-navy); font: 700 11px/1.35 var(--gf25-ui); font-style: normal; }
.gf25-collections { background: var(--gf25-grey); }
.gf25-collection-row { max-width: var(--gf25-wide); margin: 0 auto 20px; display: grid; grid-template-columns: 1.05fr repeat(3, 1fr); gap: 12px; }
.gf25-collection-intro { min-height: 280px; display: flex; flex-direction: column; justify-content: center; padding: 28px; color: #fff; }
.gf25-collection-intro b { font-size: 18px; line-height: 1.08; }
.gf25-collection-intro p { margin: 16px 0 24px; font-family: var(--gf25-body); font-size: 15px; }
.gf25-collection-intro a { width: fit-content; padding: 9px 11px; border: 1px solid rgba(255,255,255,.8); font-size: 10px; font-weight: 800; text-decoration: none; }
.gf25-collection-intro--brown { background: var(--gf25-brown); }
.gf25-collection-intro--teal { background: var(--gf25-teal); }
.gf25-collection-intro--red { background: var(--gf25-red); }
.gf25-collection-row > a { position: relative; min-height: 280px; overflow: hidden; background: var(--gf25-navy); text-decoration: none; }
.gf25-collection-row > a img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; transition: transform .6s ease, filter .6s ease; }
.gf25-collection-row > a::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,30,75,.77), transparent 60%); content: ""; }
.gf25-collection-row > a:hover img { transform: scale(1.08); filter: saturate(1.2); }
.gf25-collection-row > a span { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 19px; color: #fff; font: 700 18px/1 var(--gf25-head); text-align: center; }

/* Dark tool band and the inline signature estimator upgrade. */
.gf25-tool-band { padding: 82px 4vw 98px; background: var(--gf25-red); background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 6px 6px; color: #fff; }
.gf25-tool-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.gf25-tool-card { display: flex; flex-direction: column; align-items: center; padding: 18px 20px 26px; border: 1px solid rgba(255,255,255,.3); color: #fff; text-align: center; text-decoration: none; transition: transform .3s, background .3s; }
.gf25-tool-card:hover { transform: translateY(-7px); background: rgba(255,255,255,.1); }
.gf25-tool-card img { width: 100%; height: 155px; object-fit: cover; margin-bottom: 20px; }
.gf25-tool-card b { font-size: 18px; letter-spacing: .05em; }
.gf25-tool-card p { min-height: 66px; margin: 10px 0 20px; font-family: var(--gf25-body); font-size: 14px; }
.gf25-tool-card span { padding: 10px 15px; border: 1px solid rgba(255,255,255,.8); font-size: 10px; font-weight: 800; }
.gf25-recent { padding: 82px 4vw 96px; background: #f8f8f7; background-image: repeating-linear-gradient(135deg, rgba(40,50,112,.025) 0, rgba(40,50,112,.025) 1px, transparent 1px, transparent 6px); }
.gf25-recent-grid { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 245px; gap: 12px; }
.gf25-recent-intro { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 42px; background: var(--gf25-navy); color: #fff; text-decoration: none; }
.gf25-recent-intro span { font: 800 13px/1 var(--gf25-ui); letter-spacing: .16em; }
.gf25-recent-intro b { max-width: 420px; font: 700 clamp(26px, 3vw, 43px)/.98 var(--gf25-head); }
.gf25-recent-intro small { width: fit-content; padding: 10px 14px; border: 1px solid rgba(255,255,255,.8); font: 800 10px/1 var(--gf25-ui); text-transform: uppercase; }
.gf25-recent-card { position: relative; overflow: hidden; background: var(--gf25-navy); color: #fff; text-decoration: none; }
.gf25-recent-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gf25-recent-card::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,25,77,.88), transparent 65%); content: ""; }
.gf25-recent-card:hover img { transform: scale(1.07); }
.gf25-recent-card span { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; font: 700 19px/1.05 var(--gf25-head); text-align: center; }
.gf25-estimator { max-width: var(--gf25-wide); margin: 0 auto; padding: 88px 7vw; display: grid; grid-template-columns: .9fr 1.2fr; gap: 70px; align-items: start; background: #fff; }
.gf25-estimator-copy h2 { margin: 0 0 18px; color: var(--gf25-navy); font: 700 clamp(35px, 4.6vw, 63px)/.94 var(--gf25-head); }
.gf25-estimator-copy > p:not(.gf25-kicker) { margin: 0 0 22px; color: var(--gf25-copy); font-size: 16px; }
.gf25-text-link { color: var(--gf25-navy); font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; }
.gf25-estimator-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 26px; background: var(--gf25-grey); border-top: 5px solid var(--gf25-orange); }
.gf25-estimator-form label { display: flex; flex-direction: column; gap: 7px; color: var(--gf25-navy); font-size: 12px; font-weight: 800; }
.gf25-estimator-form input, .gf25-estimator-form select { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid #cfd0d7; border-radius: 0; background: #fff; color: var(--gf25-ink); font-size: 14px; }
.gf25-estimator-form button { grid-column: 1 / 2; border: 0; cursor: pointer; }
.gf25-estimator-output { grid-column: 2 / -1; padding: 14px 16px; border-left: 4px solid var(--gf25-green); background: #fff; }
.gf25-estimator-output strong { display: block; color: var(--gf25-navy); font-size: 28px; }
.gf25-estimator-output ul { margin: 8px 0; padding-left: 16px; color: var(--gf25-copy); font: 13px/1.6 var(--gf25-body); }
.gf25-estimator-output small { display: block; color: var(--gf25-copy); font: 12px/1.4 var(--gf25-body); }

.gf25-advice { background: #fff; }
.gf25-advice-grid { max-width: 1110px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gf25-advice-grid > a { min-height: 240px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--gf25-navy); color: #fff; text-align: center; text-decoration: none; box-shadow: 0 10px 16px rgba(20,24,55,.14); }
.gf25-advice-grid > a:nth-child(2) { background: var(--gf25-teal); }
.gf25-advice-grid span { font-size: 32px; }
.gf25-advice-grid b { font: 700 20px/1.1 var(--gf25-head); }
.gf25-advice-grid p { max-width: 390px; margin: 0; color: #d7e1f4; font-size: 14px; }
.gf25-advice-grid em { padding: 10px 14px; border: 1px solid rgba(255,255,255,.8); font-size: 10px; font-style: normal; font-weight: 800; }
.gf25-shopping { padding: 82px 4vw 104px; background: var(--gf25-teal); color: #fff; }
.gf25-shopping-grid { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.gf25-shopping-grid article { min-height: 280px; padding: 38px 48px; border-right: 1px solid rgba(255,255,255,.35); text-align: center; }
.gf25-shopping-grid article:last-child { border-right: 0; }
.gf25-shopping-grid article > b { display: block; margin-bottom: 16px; color: #fff; font-size: 30px; }
.gf25-shopping-grid h3 { margin: 0 0 14px; font: 700 21px/1 var(--gf25-head); }
.gf25-shopping-grid p { margin: 0 0 24px; color: #dcecf0; font: 14px/1.5 var(--gf25-body); }
.gf25-shopping-grid a { color: #fff; font: 700 10px/1 var(--gf25-ui); text-decoration: underline; text-underline-offset: 5px; }
.gf25-newsletter { padding: 72px 4vw 84px; background: #fff; color: var(--gf25-navy); text-align: center; }
.gf25-newsletter h2 { max-width: 660px; margin: 0 auto 28px; font: 700 clamp(29px, 3.6vw, 48px)/1 var(--gf25-head); }
.gf25-newsletter form { max-width: 620px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.gf25-newsletter input { min-height: 48px; padding: 10px 15px; border: 1px solid #cfd0d7; color: var(--gf25-ink); font: 14px var(--gf25-body); }
.gf25-newsletter button { border: 0; cursor: pointer; }
.gf25-newsletter form p { grid-column: 1 / -1; min-height: 20px; margin: 0; color: var(--gf25-green); font-size: 12px; }
.gf25-newsletter small { color: var(--gf25-copy); font: 12px var(--gf25-body); }

/* Deep Jacksons-inspired footer with the library-wide payment cue. */
.gf25-footer { background: #fff; color: var(--gf25-navy); }
.gf25-footer-top { max-width: var(--gf25-wide); margin: 0 auto; padding: 64px 4vw 50px; display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 28px; border-bottom: 1px solid #cfd0d7; }
.gf25-footer-top > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gf25-footer-top h3 { margin: 8px 0 4px; font: 700 16px/1 var(--gf25-head); }
.gf25-footer-top a:not(.gf25-logo):not(.gf25-button) { color: var(--gf25-copy); font-size: 14px; text-decoration: none; }
.gf25-footer-top a:not(.gf25-logo):not(.gf25-button):hover { color: var(--gf25-orange); }
.gf25-footer-brand { padding-right: 26px; }
.gf25-logo--footer { font-size: 34px; }
.gf25-footer-brand p, .gf25-footer-top > div > p { margin: 0 0 13px; color: var(--gf25-copy); font: 14px/1.45 var(--gf25-body); }
.gf25-socials { display: flex; gap: 14px; }
.gf25-socials a { color: var(--gf25-navy) !important; font: 700 19px/1 var(--gf25-ui) !important; }
.gf25-footer-phone { font-size: 24px; }
.gf25-payment { max-width: 1110px; margin: 0 auto; padding: 19px 4vw; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid #cfd0d7; color: var(--gf25-copy); font-size: 11px; }
.gf25-payment span { margin-right: 8px; font-weight: 800; letter-spacing: .08em; }
.gf25-payment b { padding: 7px 9px; border: 1px solid #cfd0d7; color: var(--gf25-navy); font-size: 12px; }
.gf25-payment em { margin-left: auto; color: var(--gf25-green); font-style: normal; }
.gf25-footer-bottom { max-width: 1110px; margin: 0 auto; padding: 19px 4vw; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--gf25-copy); font-size: 11px; }
.gf25-footer-bottom a { color: var(--gf25-navy); }

/* One-shot reveals / image motion. */
.gf25-body [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.gf25-body [data-reveal].gf25-in { opacity: 1; transform: none; }
.gf25-body [data-reveal]:nth-child(2) { transition-delay: .08s; }
.gf25-body [data-reveal]:nth-child(3) { transition-delay: .16s; }
.gf25-body [data-reveal]:nth-child(4) { transition-delay: .24s; }

@media (max-width: 1040px) {
  .gf25-utility nav { gap: 13px; }
  .gf25-utility-note { display: none; }
  .gf25-menu nav { gap: 17px; font-size: 12px; }
  .gf25-category-grid { grid-template-columns: repeat(2, 1fr); }
  .gf25-review-grid { grid-template-columns: repeat(2, 1fr); }
  .gf25-review-score { grid-column: 1 / -1; align-items: center; }
  .gf25-collection-row { grid-template-columns: 1fr repeat(3, 1fr); }
  .gf25-collection-intro { grid-column: 1 / -1; min-height: 180px; }
  .gf25-footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
  .gf25-footer-brand { grid-row: span 2; }
}
@media (max-width: 760px) {
  .gf25-utility { padding: 7px 14px; }
  .gf25-utility nav { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 7px; text-align: center; }
  .gf25-utility a { font-size: 9px; }
  .gf25-mainbar { min-height: 72px; padding: 0 14px; grid-template-columns: 1fr auto; }
  .gf25-phone { font-size: 16px; }
  .gf25-phone span { display: none; }
  .gf25-logo { justify-self: end; font-size: 27px; }
  .gf25-logo span { display: none; }
  .gf25-account { display: none; }
  .gf25-menu summary { min-height: 42px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font: 700 13px var(--gf25-ui); }
  .gf25-menu summary::-webkit-details-marker { display: none; }
  .gf25-menu nav { min-height: 0; padding: 0 16px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; justify-content: stretch; font-size: 13px; }
  .gf25-menu nav a { padding: 12px 7px; border-top: 1px solid var(--gf25-grey-dark); }
  .gf25-hero { min-height: 590px; }
  .gf25-hero-copy { padding: 112px 24px 90px; }
  .gf25-hero h1 { font-size: clamp(43px, 12vw, 72px); }
  .gf25-hero-caption { right: 20px; bottom: 18px; }
  .gf25-category-grid, .gf25-feature-strip, .gf25-standards, .gf25-showcase, .gf25-review-grid, .gf25-advice-grid, .gf25-shopping-grid, .gf25-estimator, .gf25-recent-grid { grid-template-columns: 1fr; }
  .gf25-categories, .gf25-reviews, .gf25-collections, .gf25-advice, .gf25-recent { padding: 58px 16px; }
  .gf25-feature-strip { padding: 0 16px 55px; }
  .gf25-feature { min-height: 275px; }
  .gf25-standards { padding: 60px 24px; gap: 36px; }
  .gf25-standard-seals { gap: 8px; }
  .gf25-showcase-copy { padding: 55px 25px; }
  .gf25-showcase img { min-height: 280px; }
  .gf25-review-grid blockquote { padding-top: 14px; border-left: 0; border-top: 2px solid var(--gf25-grey-dark); }
  .gf25-collection-row { grid-template-columns: 1fr 1fr; }
  .gf25-collection-intro { grid-column: 1 / -1; min-height: 230px; }
  .gf25-tool-band, .gf25-shopping { padding: 58px 16px 70px; }
  .gf25-tool-grid, .gf25-footer-top { grid-template-columns: 1fr; gap: 22px; }
  .gf25-tool-grid { max-width: 420px; }
  .gf25-recent-grid { grid-auto-rows: 230px; }
  .gf25-recent-intro { grid-column: auto; padding: 30px; }
  .gf25-estimator { padding: 58px 20px; gap: 32px; }
  .gf25-estimator-form { grid-template-columns: 1fr 1fr; padding: 18px; }
  .gf25-estimator-output { grid-column: 1 / -1; }
  .gf25-footer-top { padding: 50px 25px 35px; }
  .gf25-footer-brand { grid-row: auto; }
  .gf25-payment, .gf25-footer-bottom { padding-left: 25px; padding-right: 25px; }
  .gf25-payment em { width: 100%; margin-left: 0; }
}
@media (max-width: 430px) {
  .gf25-hero-actions, .gf25-hero-actions .gf25-button { width: 100%; }
  .gf25-trust-badges { flex-direction: column; align-items: flex-start; }
  .gf25-category-grid, .gf25-collection-row, .gf25-estimator-form, .gf25-newsletter form { grid-template-columns: 1fr; }
  .gf25-estimator-form button, .gf25-estimator-output { grid-column: 1; }
  .gf25-newsletter form { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf25-body *, .gf25-body *::before, .gf25-body *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .gf25-body [data-reveal] { opacity: 1; transform: none; }
}

/* S301 inner-page system: the source combines practical catalogue pages with generous,
   studio-like white space. These blocks keep the same header, widths and editorial rhythm on
   every route instead of treating the home page as a one-off template. */
.gf25-page-hero { max-width: var(--gf25-wide); margin: 0 auto; padding: clamp(74px, 10vw, 150px) 5vw clamp(70px, 9vw, 124px); background: var(--gf25-grey); color: var(--gf25-navy); }
.gf25-page-hero--image { min-height: 500px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: 0; padding: 0; background: var(--gf25-navy); color: #fff; }
.gf25-page-hero--image .gf25-page-hero-copy { padding: clamp(60px, 8vw, 120px) clamp(25px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; }
.gf25-page-hero--image > img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; }
.gf25-page-hero h1 { max-width: 950px; margin: 0 0 22px; font: 700 clamp(48px, 8vw, 110px)/.88 var(--gf25-head); letter-spacing: -.055em; text-transform: uppercase; }
.gf25-page-hero h1 em { color: var(--gf25-orange); font-style: normal; font-weight: 300; }
.gf25-page-hero p:not(.gf25-kicker) { max-width: 640px; margin: 0; color: var(--gf25-copy); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.42; }
.gf25-page-hero--image p:not(.gf25-kicker) { color: #e2e6f2; }
.gf25-breadcrumb { max-width: var(--gf25-wide); margin: 0 auto; padding: 14px 5vw; border-bottom: 1px solid var(--gf25-grey-dark); color: var(--gf25-copy); font: 11px var(--gf25-ui); letter-spacing: .12em; text-transform: uppercase; }
.gf25-breadcrumb a { color: var(--gf25-navy); text-decoration: none; }
.gf25-page-intro { max-width: 910px; margin: 0 auto; padding: clamp(70px, 9vw, 130px) 5vw; color: var(--gf25-copy); }
.gf25-page-intro h2, .gf25-page-section h2 { margin: 0 0 20px; color: var(--gf25-navy); font: 700 clamp(34px, 5vw, 72px)/.92 var(--gf25-head); letter-spacing: -.04em; }
.gf25-page-intro p { max-width: 760px; margin: 0; font-size: clamp(18px, 2vw, 27px); line-height: 1.48; }
.gf25-page-section { max-width: var(--gf25-wide); margin: 0 auto; padding: clamp(68px, 8vw, 118px) 5vw; }
.gf25-page-section--grey { max-width: none; background: var(--gf25-grey); }
.gf25-page-section--navy { max-width: none; background: var(--gf25-navy); color: #fff; }
.gf25-page-section--navy h2, .gf25-page-section--navy .gf25-kicker { color: #fff; }
.gf25-page-section--navy p { color: #dce2eb; }
.gf25-split { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(35px, 7vw, 120px); }
.gf25-split--reverse > :first-child { order: 2; }
.gf25-split img { width: 100%; height: min(620px, 45vw); min-height: 320px; object-fit: cover; }
.gf25-split-copy h2 { margin: 0 0 17px; color: var(--gf25-navy); font: 700 clamp(34px, 4.4vw, 62px)/.94 var(--gf25-head); letter-spacing: -.04em; }
.gf25-split-copy p { max-width: 560px; color: var(--gf25-copy); font-size: 16px; line-height: 1.65; }
.gf25-split-copy p + p { margin-top: 14px; }
.gf25-values { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.26); }
.gf25-values article { padding: 29px 25px 0 0; border-right: 1px solid rgba(255,255,255,.26); }
.gf25-values article + article { padding-left: 25px; }
.gf25-values article:last-child { border-right: 0; }
.gf25-values b { display: block; color: var(--gf25-orange); font: 700 16px var(--gf25-head); letter-spacing: .08em; }
.gf25-values p { margin: 10px 0 0; font: 14px/1.55 var(--gf25-body); }
.gf25-mosaic { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-template-rows: 220px 220px; gap: 12px; }
.gf25-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.gf25-mosaic img:first-child { grid-row: 1 / -1; }
.gf25-standards-grid { max-width: var(--gf25-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gf25-standard-card { min-height: 310px; padding: 33px 28px; background: #fff; border-top: 4px solid var(--gf25-navy); box-shadow: 0 10px 20px rgba(20,24,55,.08); }
.gf25-standard-card:nth-child(2) { border-top-color: var(--gf25-teal); }
.gf25-standard-card:nth-child(3) { border-top-color: var(--gf25-orange); }
.gf25-standard-card .gf25-seal { margin-bottom: 28px; }
.gf25-standard-card h3 { margin: 0 0 12px; color: var(--gf25-navy); font: 700 24px/.98 var(--gf25-head); }
.gf25-standard-card p { margin: 0; color: var(--gf25-copy); font: 14px/1.55 var(--gf25-body); }
.gf25-standard-card a { display: inline-block; margin-top: 24px; color: var(--gf25-navy); font: 800 11px var(--gf25-ui); letter-spacing: .11em; text-decoration: underline; text-underline-offset: 4px; }
.gf25-page-cta { max-width: var(--gf25-wide); margin: 0 auto; padding: clamp(65px, 8vw, 115px) 5vw; background: var(--gf25-red); color: #fff; }
.gf25-page-cta h2 { max-width: 740px; margin: 0 0 22px; font: 700 clamp(36px, 5vw, 72px)/.93 var(--gf25-head); letter-spacing: -.04em; }
.gf25-page-cta p { max-width: 570px; margin: 0 0 26px; color: #f6e6e1; font: 16px/1.55 var(--gf25-body); }
.gf25-work-intro { max-width: var(--gf25-wide); margin: 0 auto; padding: clamp(65px, 9vw, 130px) 5vw 44px; }
.gf25-work-intro h1 { max-width: 1000px; margin: 0 0 20px; color: var(--gf25-navy); font: 700 clamp(50px, 10vw, 142px)/.82 var(--gf25-head); letter-spacing: -.065em; }
.gf25-work-intro p { max-width: 570px; margin: 0; color: var(--gf25-copy); font-size: 18px; line-height: 1.5; }
.gf25-filter { max-width: var(--gf25-wide); margin: 0 auto; padding: 0 5vw 38px; display: flex; align-items: end; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--gf25-grey-dark); font-family: var(--gf25-ui); }
.gf25-filter label { display: flex; flex-direction: column; gap: 7px; color: var(--gf25-navy); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.gf25-filter select { min-width: 230px; min-height: 43px; padding: 8px 12px; border: 1px solid var(--gf25-navy); border-radius: 0; background: #fff; color: var(--gf25-navy); font: 13px var(--gf25-ui); }
.gf25-work-grid { max-width: var(--gf25-wide); margin: 0 auto; padding: 42px 5vw 100px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 24px; gap: 14px; }
.gf25-work-card { position: relative; min-width: 0; overflow: hidden; background: var(--gf25-navy); color: #fff; text-decoration: none; grid-column: span 4; grid-row: span 16; }
.gf25-work-card:nth-child(2), .gf25-work-card:nth-child(5) { grid-row: span 21; }
.gf25-work-card:nth-child(3), .gf25-work-card:nth-child(6) { grid-column: span 4; grid-row: span 18; }
.gf25-work-card:nth-child(4) { grid-column: span 8; grid-row: span 19; }
.gf25-work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gf25-work-card:hover img { transform: scale(1.055); }
.gf25-work-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(17,22,59,.84)); pointer-events: none; }
.gf25-work-card figcaption { position: absolute; z-index: 1; left: 22px; right: 18px; bottom: 19px; display: flex; flex-direction: column; gap: 5px; font-family: var(--gf25-ui); }
.gf25-work-card figcaption b { font-size: 17px; letter-spacing: .03em; }
.gf25-work-card figcaption span { color: #dbe3ef; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.gf25-filter [data-filter-count] { color: var(--gf25-copy); font-size: 11px; }
.gf25-filter-empty { max-width: var(--gf25-wide); margin: 0 auto; padding: 0 5vw 80px; color: var(--gf25-copy); }
.gf25-quote-page { background: var(--gf25-grey); }
.gf25-quote-shell { max-width: var(--gf25-wide); margin: 0 auto; padding: clamp(64px, 8vw, 115px) 5vw; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 7vw, 115px); }
.gf25-quote-copy h1 { margin: 0 0 20px; color: var(--gf25-navy); font: 700 clamp(45px, 6vw, 88px)/.87 var(--gf25-head); letter-spacing: -.055em; }
.gf25-quote-copy p { max-width: 450px; color: var(--gf25-copy); font-size: 17px; line-height: 1.55; }
.gf25-quote-form { align-self: start; padding: clamp(23px, 4vw, 45px); background: #fff; box-shadow: 0 18px 34px rgba(20,24,55,.12); font-family: var(--gf25-ui); }
.gf25-quote-form fieldset { margin: 0; padding: 0; border: 0; }
.gf25-quote-form legend { margin: 0 0 20px; color: var(--gf25-navy); font: 700 25px var(--gf25-head); }
.gf25-quote-form .gf25-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.gf25-quote-form label { display: flex; flex-direction: column; gap: 7px; color: var(--gf25-navy); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gf25-quote-form label.gf25-full { grid-column: 1 / -1; }
.gf25-quote-form input, .gf25-quote-form select, .gf25-quote-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cfd0d7; border-radius: 0; background: #fff; color: var(--gf25-ink); font: 14px var(--gf25-body); text-transform: none; }
.gf25-quote-form textarea { min-height: 125px; resize: vertical; }
.gf25-quote-form button { margin-top: 20px; }

/* S301 estimator legibility repair — keep the output as a compact materials ledger. The label,
   leader and quantity are separate columns so the result remains scannable at phone width and
   never collapses into strings such as “Joist timber80 m”. */
.gf25-form-output { margin-top: 1.25rem; padding: 1rem 1.15rem 1.05rem; border-left: 4px solid var(--gf25-green); background: #f7f7f6; }
.gf25-form-output strong { display: block; margin-bottom: .65rem; color: var(--gf25-navy); font: 700 clamp(1.18rem, 2.4vw, 1.5rem)/1.1 var(--gf25-head); }
.gf25-form-output ul { display: grid; gap: .16rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.gf25-form-output li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(1rem, 1fr) auto; align-items: baseline; gap: .55rem; padding: .36rem 0; border-bottom: 1px solid #d8d9df; color: var(--gf25-navy); font: 700 .78rem/1.25 var(--gf25-ui); }
.gf25-form-output li:last-child { border-bottom: 0; }
.gf25-form-output .what { min-width: 0; }
.gf25-form-output .leader { min-width: 1rem; border-bottom: 1px dotted #a8aab4; transform: translateY(-.18em); }
.gf25-form-output .qty { white-space: nowrap; color: var(--gf25-green); font-variant-numeric: tabular-nums; }
.gf25-form-output small { display: block; color: var(--gf25-copy); font: .74rem/1.45 var(--gf25-body); }
@media (max-width: 560px) {
  .gf25-form-output { padding: .9rem .9rem .95rem; }
  .gf25-form-output li { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
  .gf25-form-output .leader { display: none; }
}
.gf25-form-note { margin: 14px 0 0; color: var(--gf25-copy); font: 12px/1.4 var(--gf25-body); }
.gf25-form-status { min-height: 20px; margin: 12px 0 0; color: var(--gf25-teal); font: 12px/1.4 var(--gf25-ui); }
.gf25-faq-list { max-width: 950px; margin: 0 auto; border-top: 1px solid var(--gf25-grey-dark); }
.gf25-faq-list details { border-bottom: 1px solid var(--gf25-grey-dark); }
.gf25-faq-list summary { padding: 23px 40px 23px 0; position: relative; cursor: pointer; color: var(--gf25-navy); font: 700 clamp(19px, 2.2vw, 29px)/1.1 var(--gf25-head); list-style: none; }
.gf25-faq-list summary::-webkit-details-marker { display: none; }
.gf25-faq-list summary::after { content: "+"; position: absolute; right: 2px; top: 18px; color: var(--gf25-orange); font: 300 30px/1 Arial, sans-serif; }
.gf25-faq-list details[open] summary::after { content: "–"; }
.gf25-faq-list details p { max-width: 700px; margin: -3px 0 25px; color: var(--gf25-copy); font: 16px/1.62 var(--gf25-body); }
.gf25-contact-page { background: #fff; }
.gf25-contact-shell { max-width: var(--gf25-wide); margin: 0 auto; padding: clamp(80px, 12vw, 170px) 5vw; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 8vw, 140px); }
.gf25-contact-heading h1 { max-width: 720px; margin: 0 0 30px; color: var(--gf25-navy); font: 700 clamp(52px, 8vw, 118px)/.8 var(--gf25-head); letter-spacing: -.065em; }
.gf25-contact-heading h1 em { color: var(--gf25-orange); font-style: normal; font-weight: 300; }
.gf25-contact-heading p { max-width: 430px; color: var(--gf25-copy); font-size: 18px; line-height: 1.55; }
.gf25-contact-details { display: grid; grid-template-columns: 1fr 1fr; align-content: end; gap: 25px; border-top: 1px solid var(--gf25-grey-dark); padding-top: 22px; font-family: var(--gf25-ui); }
.gf25-contact-details b { display: block; margin-bottom: 8px; color: var(--gf25-navy); font-size: 11px; letter-spacing: .12em; }
.gf25-contact-details a, .gf25-contact-details span { color: var(--gf25-copy); font-size: 14px; text-decoration: none; }
.gf25-contact-form { align-self: end; }
.gf25-contact-form h2 { margin: 0 0 24px; color: var(--gf25-navy); font: 700 32px var(--gf25-head); }
.gf25-contact-form label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; color: var(--gf25-navy); font: 800 11px var(--gf25-ui); letter-spacing: .1em; text-transform: uppercase; }
.gf25-contact-form input, .gf25-contact-form textarea, .gf25-contact-form select { min-height: 47px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--gf25-navy); border-radius: 0; background: #f5f5f4; color: var(--gf25-ink); font: 15px var(--gf25-body); text-transform: none; }
.gf25-contact-form textarea { min-height: 120px; }
.gf25-contact-form button { margin-top: 8px; }
@media (min-width: 901px) {
  .gf25-page-hero--estimator { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .7fr); align-items: center; column-gap: clamp(28px, 6vw, 100px); }
}
@media (max-width: 900px) {
  .gf25-page-hero--image, .gf25-split, .gf25-quote-shell, .gf25-contact-shell { grid-template-columns: 1fr; }
  .gf25-page-hero--image > img { min-height: 310px; max-height: 460px; order: -1; }
  .gf25-page-hero--image .gf25-page-hero-copy { padding: 60px 25px 70px; }
  .gf25-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 180px; }
  .gf25-mosaic img:first-child { grid-row: 1 / -1; }
  .gf25-standards-grid, .gf25-values { grid-template-columns: 1fr; }
  .gf25-values article, .gf25-values article + article { padding: 25px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.26); }
  .gf25-values article:last-child { border-bottom: 0; }
  .gf25-work-card, .gf25-work-card:nth-child(2), .gf25-work-card:nth-child(3), .gf25-work-card:nth-child(4), .gf25-work-card:nth-child(5), .gf25-work-card:nth-child(6) { grid-column: span 6; grid-row: span 17; }
  .gf25-filter { align-items: start; flex-direction: column; }
  .gf25-filter select { width: 100%; }
}
@media (max-width: 560px) {
  .gf25-page-hero, .gf25-page-section, .gf25-page-intro, .gf25-work-intro, .gf25-contact-shell, .gf25-quote-shell { padding-left: 20px; padding-right: 20px; }
  .gf25-mosaic { display: flex; flex-direction: column; }
  .gf25-mosaic img { height: 240px; }
  .gf25-work-grid { padding-left: 20px; padding-right: 20px; grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gf25-work-card, .gf25-work-card:nth-child(n) { grid-column: 1; grid-row: span 1; }
  .gf25-quote-form .gf25-form-grid, .gf25-contact-details { grid-template-columns: 1fr; }
  .gf25-quote-form label.gf25-full { grid-column: auto; }
  .gf25-estimator-rail { justify-self: stretch; width: 100%; }
}

/* S301 estimator-opening repair — keep the oversized landscaping typography, but put the
   first useful action and the estimator entry point within the opening composition. */
.gf25-page-hero--estimator { padding-top: clamp(42px, 5vw, 76px); padding-bottom: clamp(36px, 4vw, 60px); }
.gf25-page-hero--estimator .gf25-page-hero-copy { min-width: 0; }
.gf25-estimator-rail { align-self: center; justify-self: end; width: min(100%, 27rem); padding: clamp(24px, 4vw, 42px); border-left: 4px solid var(--gf25-orange); background: var(--gf25-navy); color: #fff; box-shadow: 14px 14px 0 rgba(20,24,55,.08); }
.gf25-estimator-rail__kicker { display: block; color: var(--gf25-orange); font: 800 11px/1 var(--gf25-ui); letter-spacing: .16em; }
.gf25-estimator-rail strong { display: block; margin-top: 1.25rem; color: #fff; font: 700 clamp(31px, 4vw, 55px)/.92 var(--gf25-head); letter-spacing: -.04em; }
.gf25-estimator-rail strong em { color: var(--gf25-orange); font-style: normal; font-weight: 300; }
.gf25-estimator-rail > p { margin-top: 1.25rem; color: #dce2eb; font: 15px/1.5 var(--gf25-body); }
.gf25-estimator-rail dl { display: grid; gap: .65rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); }
.gf25-estimator-rail dl div { display: grid; grid-template-columns: 2rem 1fr; gap: .65rem; align-items: baseline; }
.gf25-estimator-rail dt { color: var(--gf25-orange); font: 800 11px/1 var(--gf25-ui); }
.gf25-estimator-rail dd { color: #fff; font: 700 12px/1.35 var(--gf25-ui); letter-spacing: .03em; }
.gf25-page-hero--estimator h1 { max-width: 12ch; }
.gf25-page-hero__action { margin-top: 1.7rem; }
.gf25-page-hero__action span { display: inline-block; margin-left: .55rem; font-size: 1.1em; transition: transform .2s ease; }
.gf25-page-hero__action:hover span { transform: translateY(3px); }
.gf25-page-hero--estimator + .gf25-quote-shell { padding-top: clamp(34px, 4vw, 64px); }
@media (prefers-reduced-motion: reduce) { .gf25-page-hero__action span { transform: none !important; transition: none !important; } }

/* The scoped body link reset above intentionally keeps the page palette coherent, but its
   specificity is higher than a bare utility class. Reassert the intentional colours on anchor
   buttons and the two photographic feature links so text never disappears into its ground. */
body.gf25-body a.gf25-button--light { color: var(--gf25-navy); }
body.gf25-body a.gf25-button--navy { color: #fff; }
body.gf25-body a.gf25-button--orange { color: #fff; }
body.gf25-body a.gf25-button--outline-light { color: #fff; }
body.gf25-body a.gf25-text-link { color: var(--gf25-navy); }
body.gf25-body a.gf25-feature { color: #fff; }
.gf25-feature-overlay { color: #fff; }
.gf25-feature-overlay em { color: #fff; }
body.gf25-body .gf25-advice-grid > a,
body.gf25-body .gf25-advice-grid > a b,
body.gf25-body .gf25-advice-grid > a span,
body.gf25-body .gf25-advice-grid > a em { color: #fff; }
body.gf25-body .gf25-recent-intro,
body.gf25-body .gf25-recent-intro span,
body.gf25-body .gf25-recent-intro b,
body.gf25-body .gf25-recent-intro small,
body.gf25-body .gf25-recent-card,
body.gf25-body .gf25-recent-card span { color: #fff; }
@media (min-width: 761px) {
  body.gf25-body .gf25-header { position: sticky; top: 0; }
}

/* S301: Greenfold's motion signature is a quiet garden rhythm: the hero drifts with the
   scroll and catalogue cards open like planting beds. These are bounded, one-shot effects;
   the reduced-motion rule above remains the still state. */
@media (prefers-reduced-motion: no-preference) {
  body.gf25-body .gf25-hero > img { transform: translate3d(0, var(--gf25-hero-shift, 0%), 0) scale(1.04); }
  body.gf25-body .gf25-category-card[data-reveal] { clip-path: inset(12% 0 0); transform: translateY(24px) scale(.985); transition: opacity .7s ease, transform .7s ease, clip-path .7s cubic-bezier(.2,.75,.25,1); }
  body.gf25-body .gf25-category-card[data-reveal].gf25-in { clip-path: inset(0); transform: none; }
  body.gf25-body .gf25-recent-card[data-reveal] { transform: translateY(18px) scale(.98); transition: opacity .72s ease, transform .72s cubic-bezier(.2,.75,.25,1); }
  body.gf25-body .gf25-recent-card[data-reveal].gf25-in { transform: none; }
}

/* S301 settled-state parity — below-fold copy must remain readable even when a visitor
   lands directly on an inner route or a visual judge captures the full document before
   every IntersectionObserver entry has crossed the viewport. Keep the small transform
   cue, but never make authored content disappear behind an opacity gate. */
body.gf25-body .gf25-body [data-reveal],
body.gf25-body [data-reveal] { opacity: 1; }
body.gf25-body .gf25-category-card[data-reveal] { clip-path: inset(0); }

/* Keep the fictional Stoke identity visible on every route, even where the compact footer
   markup predates the S301 contact pass. The contact page carries the semantic links. */
body.gf25-body .gf25-footer-brand::after { content: "Greenfold Lane, Burslem · Stoke-on-Trent ST6 2GY\A hello@greenfoldlandscapes.co.uk"; display: block; white-space: pre-line; color: var(--gf25-copy); font: 12px/1.55 var(--gf25-body); }
body.gf25-body .gf25-footer-phone { font-size: 0; }
body.gf25-body .gf25-footer-phone::after { content: "01782 555 024"; font-size: 24px; }

/* S301 parity repair: Jacksons opens like a product/category catalogue. Greenfold keeps its
   own landscape rebrand but surfaces the same category decision early and labels its proof
   honestly rather than borrowing a rating or guarantee claim. */
body.gf25-body .gf25-hero::before { position: absolute; top: 20px; right: 4vw; z-index: 2; padding: 8px 11px; color: #fff; background: rgba(24,33,86,.78); border: 1px solid rgba(255,255,255,.6); content: "FENCING  /  GATES  /  DECKING  /  PLANTING"; font: 800 10px/1.2 var(--gf25-ui); letter-spacing: .1em; }
body.gf25-body .gf25-trust-badges span:nth-child(2) { color: #fff; }
body.gf25-body .gf25-trust-badges span:nth-child(3) { color: #ffe5c5; }
body.gf25-body .gf25-hero-caption { background: rgba(24,33,86,.72); padding: 9px 12px; }
@media (max-width: 760px) { body.gf25-body .gf25-hero::before { top: 16px; right: 16px; left: 16px; text-align: center; font-size: 9px; } }
body.gf25-body .gf25-hero::after { position:absolute; right:clamp(1rem,4vw,4rem); bottom:4.6rem; z-index:3; padding:.45rem .65rem; border:1px solid rgba(255,255,255,.72); color:#fff; background:rgba(24,33,86,.86); content:"PREVIEW / 5 YEAR WORKMANSHIP CUE"; font:800 .55rem/1.2 var(--gf25-ui); letter-spacing:.09em; }
@media (max-width:760px) { body.gf25-body .gf25-hero::after { right:1rem; bottom:4.2rem; max-width:12rem; font-size:.48rem; } }
/* S301 parity repair — category-first fencing/catalogue cue before the campaign hero. */
.gf25-hero-links { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem; padding:.35rem clamp(1rem,4vw,4rem); background:#f3efe3; border-bottom:1px solid rgba(40,50,112,.2); }
.gf25-hero-links a { padding:.5rem .7rem; color:#283270; font-size:.6rem; font-weight:900; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.gf25-hero-links a:hover, .gf25-hero-links a.is-active { background:#283270; color:#fff; }
.gf25-hero-links a:last-child { margin-left:auto; color:#c75e2d; }
@media (max-width:680px) { .gf25-hero-links { overflow-x:auto; flex-wrap:nowrap; padding-inline:.75rem; } .gf25-hero-links a { flex:0 0 auto; white-space:nowrap; font-size:.54rem; } .gf25-hero-links a:last-child { margin-left:0; } }

/* S301 catalogue closeout — make material/product/trust roles read as a single commerce
   strip rather than four detached claims. */
body.gf25-body .gf25-trust-badges { position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:.35rem; padding:.55rem .7rem; background:rgba(24,33,86,.9); border:1px solid rgba(255,255,255,.45); }
body.gf25-body .gf25-trust-badges span { padding:.25rem .42rem; border:1px solid rgba(255,255,255,.3); font-size:.58rem; letter-spacing:.07em; }
body.gf25-body .gf25-hero-caption::after { content:"LOCAL MATERIAL PREVIEW / QUOTE DESK READY"; display:block; margin-top:.35rem; color:#ffe5c5; font-size:.5rem; letter-spacing:.08em; }
@media (max-width:680px) { body.gf25-body .gf25-trust-badges { gap:.2rem; } body.gf25-body .gf25-trust-badges span { font-size:.5rem; } }

/* S301 precision pass — keep the Jacksons-style preview panel broad and editorial on desktop,
   then let the mobile first viewport retain a readable slice of the garden behind it. The
   notice still carries the category images, seals and local-only proof cues; it simply cannot
   become a full-height white wall that hides the signature landscape opening. */
@media (min-width:761px) {
  body.gf25-body .gf25-preview-notice { width:min(64rem,calc(100vw - 2rem)); }
  body.gf25-body .gf25-preview-notice h2 { max-width:none; text-align:center; }
}
@media (max-width:680px) {
  body.gf25-body .gf25-preview-notice { max-height:calc(100svh - 1.2rem); overflow-y:auto; }
  body.gf25-body .gf25-preview-brandline { margin-bottom:.45rem; }
  body.gf25-body .gf25-preview-brandline > strong { font-size:1.55rem; }
  body.gf25-body .gf25-preview-seals { gap:.2rem; }
  body.gf25-body .gf25-preview-seals > span { min-width:2.25rem; min-height:2.25rem; }
  body.gf25-body .gf25-preview-notice h2 { font-size:1.25rem; }
  body.gf25-body .gf25-preview-notice p { font-size:.67rem; line-height:1.35; }
  body.gf25-body .gf25-preview-categories { margin-top:.7rem; gap:.35rem; }
  body.gf25-body .gf25-preview-categories a,
  body.gf25-body .gf25-preview-categories img { min-height:4.2rem; }
  body.gf25-body .gf25-preview-proof { margin-top:.7rem; }
}

/* S301 opening parity: a restrained, local-only preview notice gives the catalogue the same
   utility/privacy rhythm as the reference without fabricating consent infrastructure. */
.gf25-preview-notice { position:fixed; left:50%; top:50%; bottom:auto; z-index:40; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1.5rem 2.2rem; width:min(50rem,calc(100vw - 2rem)); padding:1.55rem 1.7rem 1.7rem; color:#283270; background:#fff; border-top:5px solid #159fc7; box-shadow:0 20px 55px rgba(16,22,63,.3), 0 0 0 100vmax rgba(16,22,63,.42); transform:translate(-50%,-50%); transition:opacity .24s ease, transform .24s ease; }
.gf25-preview-notice.is-dismissed { opacity:0; transform:translate(-50%,-47%); pointer-events:none; }
.gf25-preview-notice > div { min-width:0; }
.gf25-preview-kicker { display:block; margin-bottom:.55rem; color:#159fc7; font:800 .6rem/1 var(--gf25-ui); letter-spacing:.13em; }
.gf25-preview-notice h2 { max-width:28ch; margin:0; font:700 clamp(1.55rem,3vw,2.25rem)/1.02 var(--gf25-head); letter-spacing:-.035em; }
.gf25-preview-notice p { max-width:48ch; margin:.65rem 0 0; color:#47516f; font:500 .76rem/1.45 var(--gf25-ui); }
.gf25-preview-proof { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; margin-top:1rem; }
.gf25-preview-proof span { display:grid; gap:.25rem; min-width:0; padding:.55rem .6rem; border:1px solid #d9dce8; background:#f6f7f9; }
.gf25-preview-proof b { color:#283270; font:800 .56rem/1 var(--gf25-ui); letter-spacing:.08em; }
.gf25-preview-proof small { color:#65708c; font:500 .62rem/1.2 var(--gf25-ui); }
.gf25-preview-actions { display:grid; gap:.5rem; width:9.5rem; }
.gf25-preview-notice button { min-height:2.55rem; border:1px solid #283270; padding:.65rem .75rem; color:#283270; background:#fff; font:800 .62rem/1 var(--gf25-ui); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.gf25-preview-notice button[data-gf25-preview-action="accept"] { color:#fff; background:#283270; }
.gf25-preview-notice button:hover { color:#fff; background:#c75e2d; border-color:#c75e2d; }
@media (max-width:680px) { .gf25-preview-notice { left:.75rem; right:.75rem; top:auto; bottom:.75rem; width:auto; grid-template-columns:1fr; gap:.9rem; padding:1rem; transform:none; } .gf25-preview-notice.is-dismissed { transform:translateY(.75rem); } .gf25-preview-notice h2 { font-size:1.45rem; } .gf25-preview-proof { grid-template-columns:1fr 1fr; } .gf25-preview-actions { grid-template-columns:repeat(3,1fr); width:auto; } .gf25-preview-notice button { min-height:2.35rem; padding-inline:.3rem; font-size:.55rem; } }

/* S301 reference-detail closeout — the competitor notice is a branded catalogue panel,
   not a plain consent rectangle. These local image roles and badge silhouettes preserve
   that composition without asserting real ratings, guarantees or memberships. */
.gf25-preview-brandline { display:flex; align-items:center; gap:.35rem 1rem; margin-bottom:.8rem; }
.gf25-preview-brandline > strong { color:#283270; font:700 clamp(1.8rem,4vw,3rem)/.82 var(--gf25-head); letter-spacing:-.06em; }
.gf25-preview-brandline > span { align-self:flex-end; margin-bottom:.08rem; color:#c75e2d; font:800 .55rem/1 var(--gf25-ui); letter-spacing:.2em; text-transform:uppercase; }
.gf25-preview-seals { display:flex; align-items:center; gap:.3rem; margin-left:auto; }
.gf25-preview-seals > span { display:grid; place-items:center; min-width:3.05rem; min-height:3.05rem; padding:.25rem; border:1px solid #9aa0b6; border-radius:50%; color:#283270; font:800 .42rem/1.05 var(--gf25-ui); letter-spacing:.04em; text-align:center; }
.gf25-preview-seals > span:first-child { border-radius:0; border-color:#37a979; }
.gf25-preview-seals > span:first-child strong { color:#37a979; font-size:.7rem; letter-spacing:.02em; }
.gf25-preview-seals small { color:#65708c; font-size:.34rem; font-weight:500; letter-spacing:.03em; }
.gf25-preview-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-top:1rem; }
.gf25-preview-categories a { position:relative; display:grid; min-height:7.1rem; overflow:hidden; color:#fff; background:#283270; text-decoration:none; }
.gf25-preview-categories img { width:100%; height:100%; min-height:7.1rem; object-fit:cover; opacity:.68; }
.gf25-preview-categories a::after { position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,22,63,.9),transparent 68%); content:""; }
.gf25-preview-categories strong, .gf25-preview-categories small { position:absolute; z-index:1; right:.55rem; left:.55rem; }
.gf25-preview-categories strong { bottom:1.3rem; font:800 .62rem/1.1 var(--gf25-ui); text-transform:uppercase; }
.gf25-preview-categories small { bottom:.5rem; color:rgba(255,255,255,.78); font:500 .5rem/1.1 var(--gf25-ui); }
.gf25-preview-cookiebar { position:fixed; right:0; bottom:0; left:0; z-index:39; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem max(1.25rem,calc((100vw - 70rem)/2)); color:#202020; background:#fff; border-radius:.6rem .6rem 0 0; box-shadow:0 -8px 28px rgba(16,22,63,.22); transition:opacity .24s ease, transform .24s ease; }
.gf25-preview-cookiebar.is-dismissed { opacity:0; transform:translateY(100%); pointer-events:none; }
.gf25-preview-cookiebar strong { font:800 .8rem/1 var(--gf25-ui); }
.gf25-preview-cookiebar p { margin-top:.25rem; color:#47516f; font:500 .68rem/1.3 var(--gf25-ui); }
.gf25-preview-cookiebar__actions { display:flex; gap:.45rem; flex:0 0 auto; }
.gf25-preview-cookiebar button { min-width:7rem; min-height:2.45rem; border:1px solid #283270; color:#283270; background:#fff; font:800 .58rem/1 var(--gf25-ui); cursor:pointer; }
.gf25-preview-cookiebar button:first-child { color:#fff; background:#283270; }
@media (max-width:760px) { .gf25-preview-brandline { align-items:flex-start; flex-wrap:wrap; } .gf25-preview-seals { width:100%; margin-left:0; } .gf25-preview-seals > span { min-width:2.6rem; min-height:2.6rem; } .gf25-preview-categories { grid-template-columns:1fr 1fr; } .gf25-preview-categories a, .gf25-preview-categories img { min-height:5rem; } .gf25-preview-cookiebar { align-items:flex-start; flex-direction:column; gap:.65rem; padding:.85rem 1rem; } .gf25-preview-cookiebar__actions { width:100%; } .gf25-preview-cookiebar button { flex:1; min-width:0; } }