/* =========================================================================
   GREEN GRASS — DESIGN SYSTEM
   =========================================================================
   Built FROM the approved Figma mockups.

   CANONICAL SOURCES (Figma)
     Homepage   file 2CLC6SeMzT7uTTldJ2l2We, frame 100:225 ("Hubspot Updates" —
                the NEWEST of three homepage revisions on that canvas; 1:2 and
                89:2 are superseded, and the PDF in the project folder is the
                oldest of the three).
     D+B page   file Sam97X22QijxDkNlX12cd6, frame 253:257

   TYPE SYSTEM — THREE families, confirmed via get_design_context:
     Playfair Display  display / headings          (h1 60/1.1, h2 40, h3 22/1.1)
     Maven Pro         body copy                   (16–20 / 1.32, #2d3c39)
     Montserrat        UI labels, nav, eyebrows    (nav 10px/500/1px tracking,
                                                    accordion 15px/1.5px, caps)
   Montserrat was missed on the first pass; nav and accordion labels are NOT
   Maven Pro. Note Maven Pro has no 300 weight — any 300 renders as 400.

   MEASURED SPEC (frame width 1512)
     side margin      147 -> 9.72%      text column   511
     column gutter    185               landscape img 600x371 (1.62:1)
     portrait img     589x679 (6/7)     button        45 tall, radius 50
     services row     640x54 + rule     accordion row ~76 collapsed
     process step     ~131 pitch incl. hairline rule

   FOUR THINGS THIS FILE MUST NOT BREAK
     SEO       real heading hierarchy; no text baked into images; nothing cloaked
     MOBILE    mobile-first; measured px are desktop ceilings via clamp()
     DAM       photo slots are .gg-photo[data-ml-hero]; media-library.js sets
               --photo. Never replace with a hardcoded <img src>.
     CALLRAIL  phone numbers stay as selectable TEXT. swap.js finds and replaces
               the number string; an image or split digits breaks swapping.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* surfaces */
  --gg-cream:      #fffef8;
  --gg-cream-warm: #f8f4ec;
  --gg-sage-pale:  #dde4d7;
  --gg-slate:      #313b3a;
  --gg-slate-deep: #2c3532;

  /* brand */
  --gg-sage:       #c1c291;   /* button fill           */
  --gg-accent:     #c1c38b;   /* italic display accent */
  --gg-olive:      #6f7448;   /* button hover          */

  /* ink */
  --gg-ink:         #2d3c39;
  --gg-ink-soft:    #45514e;
  --gg-on-dark:     #fffef8;
  --gg-on-dark-mut: rgba(255,254,248,.72);
  --gg-rule:        rgba(45,60,57,.16);
  --gg-rule-dark:   rgba(255,254,248,.22);

  /* type — three families */
  --gg-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --gg-body:    'Maven Pro', -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --gg-ui:      'Montserrat', -apple-system, 'Segoe UI', Helvetica, sans-serif;

  /* layout */
  --gg-container: 1218px;
  --gg-gutter:    clamp(20px, 9.72vw, 147px);
  --gg-col-gap:   clamp(32px, 12vw, 185px);

  /* DESIGN FEEDBACK (Aug 2026): "reduce some of the extra padding at the top and
     bottom" was raised against the services block, the FAQ block, the homepage
     splits, four sections on /commercial, /portfolio, /about/our-team, /contact and
     the FAQ page — i.e. against every section type on the site. Trimmed once here
     rather than per-section, so the vertical rhythm stays consistent. */
  --gg-section-y:    clamp(44px, 5.2vw, 76px);
  --gg-section-y-lg: clamp(56px, 6.6vw, 96px);
}

/* ------------------------------------------------------------- primitives -- */
.gg-wrap {
  width: 100%;
  max-width: calc(var(--gg-container) + var(--gg-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gg-gutter);
}

.gg h1, .gg h2, .gg h3 {
  font-family: var(--gg-display);
  color: var(--gg-ink);
  font-weight: 400;
  margin: 0;
}
.gg h1 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.1; letter-spacing: -.005em; }
.gg h2 { font-size: clamp(26px, 2.9vw, 40px); line-height: 1.15; }
.gg h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.1; }
.gg .italic { font-style: italic; color: var(--gg-accent); }

.gg p {
  font-family: var(--gg-body);
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.32;
  color: var(--gg-ink-soft);
  margin: 0 0 1.1em;
}
.gg .gg-lead { font-size: clamp(17px, 1.35vw, 20px); }

.gg-eyebrow {
  display: block;
  font-family: var(--gg-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gg-accent);
  margin: 0 0 18px;
}

.gg-btn {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 50px;
  background: var(--gg-sage);
  color: var(--gg-ink);            /* designer note: dark text for readability */
  font-family: var(--gg-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .22s ease, color .22s ease;
}
.gg-btn:hover { background: var(--gg-olive); color: #fff; }
.gg-btn:focus-visible { outline: 2px solid var(--gg-ink); outline-offset: 3px; }
.gg-btn--ghost { background: transparent; color: var(--gg-on-dark); border-color: var(--gg-rule-dark); }
.gg-btn--ghost:hover { background: var(--gg-sage); color: var(--gg-ink); }

/* DAM-driven photo slot */
.gg-photo {
  position: relative;
  background: linear-gradient(135deg, #d3dbcd, #c3ccbd);
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
}
.gg-photo::after {
  content: attr(data-ml-hero);
  position: absolute; inset: auto 0 0 0;
  padding: 7px 10px;
  font-family: var(--gg-ui);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(45,60,57,.5); background: rgba(255,255,255,.55);
}
.gg-photo[style*="--photo"]::after { display: none; }

/* --------------------------------------------------------------- sections -- */

/* HERO — DESIGN FEEDBACK (Aug 2026): "decrease height of hero section so that
   you're able to see the heading as soon as you land on the page". At the old 840px
   cap the centred H1 sat around 540px down the page, and with the utility bar and
   header taking ~135px above it, that put the headline below the fold on a 1440x900
   laptop. 600px brings it to roughly 430px, comfortably in view. The sub-page hero
   bottom-aligns its H1 so it sat lower still; it comes down with it. */
.gg-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 600px);
  background: var(--gg-slate-deep);
  overflow: hidden;
}
.gg-hero--sub { align-items: flex-end; min-height: clamp(360px, 34vw, 480px); }
.gg-hero .gg-photo { position: absolute; inset: 0; }
/* designer note on this revision: "Reduced opacity of the gradient" */
.gg-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,26,.22) 0%, rgba(20,28,26,.42) 55%, rgba(20,28,26,.66) 100%);
}
/* VIDEO HERO (Sep 2026). inject-heroes emits, inside the .gg-photo slot, a poster
   <img class="gg-photo__img"> followed by this <video>. The poster is a normal image
   and remains the Largest Contentful Paint; the video sits on top of it and fades in
   only once it is actually playing, so a video that is gated off, refused autoplay or
   still downloading shows the still and nothing flickers.

   ⚠ THESE RULES MUST LIVE IN gg.css, NOT styles.css. There is already a `.hero__video`
   block in styles.css for the full-bleed Bertog hero classes, but the Green Grass pages
   do not load styles.css at all — they load gg.css, gg-chrome.css and gg-decoration.css.
   A video styled only there would render as an unsized inline element in the corner of
   the band.

   z-index: the scrim is a later sibling of .gg-photo inside .gg-hero and .gg-hero__inner
   is z-index 2, so the video stays under the gradient and under the headline. */
.gg-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.gg-hero-video[data-playing] { opacity: 1; }

/* Reduced motion wins outright. The inline boot script also checks this and never
   calls play(), but the rule is here too so the element cannot appear even if the
   script runs in an environment where the media query is unavailable. */
@media (prefers-reduced-motion: reduce) {
  .gg-hero-video { display: none !important; }
}

.gg-hero__inner { position: relative; z-index: 2; width: 100%; }
.gg-hero--sub .gg-hero__inner { padding-bottom: clamp(40px, 5vw, 72px); }
.gg-hero h1 { color: #fff; max-width: 22ch; }
.gg-hero .gg-eyebrow { color: var(--gg-on-dark); opacity: .85; }
.gg-hero__aside { max-width: 52ch; margin-top: 28px; }
.gg-hero__aside p { color: #fff; }

/* HERO — COPY-DOC HEADING INTENT (client feedback, Aug 2026, item 1). The approved
   homepage copy tags the location line as the H1 but sizes it as eyebrow text, and
   sizes "Spend More Time Enjoying Your Property..." as if it were the H1. The page
   spec turns this on with `headline_size: eyebrow` + `display_headline`; the <h1> tag
   does not move, so the heading hierarchy and the SEO it carries are unchanged and
   only the type scale swaps. Both selectors are doubled up (.gg ...) so they outrank
   `.gg h1` and `.gg p`, which would otherwise win on specificity. */
.gg .gg-hero--h1-eyebrow h1 {
  font-family: var(--gg-ui);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gg-on-dark);
  opacity: .85;
  max-width: none;
  margin: 0 0 18px;
}
.gg .gg-hero__display {
  font-family: var(--gg-display);
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: #fff;
  max-width: 22ch;
  margin: 0;
}

/* INTRO — centred, botanical watermark */
.gg-intro {
  position: relative; overflow: hidden;
  background: var(--gg-cream);
  padding-block: var(--gg-section-y);
  text-align: center;
}
.gg-intro__body { position: relative; z-index: 2; max-width: 68ch; margin-inline: auto; }
.gg-intro h2 { margin-bottom: 24px; }

/* INTRO — WIDE. Drops the reading-measure cap for a band that is really a full-width
   component: the /faq category tabs and accordion. DESIGN FEEDBACK (Aug 2026),
   "extend the copy here so that it's wider on the page. Including the tabs." */
.gg-intro--wide { padding-block: var(--gg-section-y); }
.gg-intro--wide .gg-intro__body { max-width: none; margin-inline: 0; text-align: left; }
/* Two intro bands back to back — the /faq preamble, then the questions — stacked a
   full section's padding between a button and the tab row. */
.gg-intro + .gg-intro--wide { padding-top: 0; }

/* INTRO — MEDIA. Copy left, photo right. DESIGN FEEDBACK (Aug 2026): "add an image
   or an image block right next to the text for this whole section (similar to the
   /about page)", raised against the cream band and repeated for /commercial,
   /careers, /locations and the service-area pages. The intro was the only section
   type on the site with no photo slot at all, so those bands were unbroken text. */
.gg-intro--media { text-align: left; }
.gg-intro__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 560fr);
  gap: var(--gg-col-gap);
  align-items: center;
}
.gg-intro--media .gg-intro__body { max-width: 56ch; margin-inline: 0; }
.gg-intro--flip .gg-intro__body  { order: 2; }
.gg-intro--flip .gg-intro__media { order: 1; }
.gg-intro__media { position: relative; aspect-ratio: 560 / 420; }

/* STAKES — bulleted list left, image right with the circular badge overlapping */
.gg-stakes { background: var(--gg-sage-pale); padding-block: var(--gg-section-y-lg); }
.gg-stakes__grid {
  display: grid;
  grid-template-columns: minmax(0, 552fr) minmax(0, 881fr);
  gap: var(--gg-col-gap);
  align-items: center;
}
.gg-stakes h2 { margin-bottom: 20px; }
.gg-stakes ul { list-style: none; margin: 0 0 24px; padding: 0; }
.gg-stakes li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-family: var(--gg-body);
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.5;
  color: var(--gg-ink-soft);
}
.gg-stakes li::before {           /* 10px dot, measured */
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gg-sage);
}
.gg-stakes__media { position: relative; aspect-ratio: 881 / 661; }
.gg-stakes__badge {
  position: absolute; left: -6%; bottom: -8%;
  width: clamp(84px, 10vw, 156px); aspect-ratio: 1;
}

/* PILLARS — dark band with an accordion on the right.
   Labels: Montserrat 15px, 1.5px tracking, uppercase, white. */
.gg-pillars { background: var(--gg-slate); color: var(--gg-on-dark); padding-block: var(--gg-section-y-lg); }
.gg-pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 542fr) minmax(0, 579fr);
  gap: var(--gg-col-gap);
  align-items: start;
}
.gg-pillars h2 { color: #fff; margin-bottom: 18px; }
.gg-pillars p  { color: var(--gg-on-dark-mut); }
.gg-acc { border-top: 1px solid var(--gg-rule-dark); }
.gg-acc details { border-bottom: 1px solid var(--gg-rule-dark); }
.gg-acc summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0;
  font-family: var(--gg-ui);
  font-size: 15px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.gg-acc summary::-webkit-details-marker { display: none; }
.gg-acc summary::after {
  content: '+';
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 300; color: var(--gg-accent);
}
.gg-acc details[open] summary::after { content: '\2014'; font-size: 14px; }
.gg-acc summary:focus-visible { outline: 2px solid var(--gg-accent); outline-offset: 2px; }
.gg-acc__body { padding: 0 44px 22px 0; margin: 0; color: var(--gg-on-dark-mut); }

/* SPLIT — reusable text/image pair. --flip puts the image first. */
.gg-split { padding-block: var(--gg-section-y-lg); }
.gg-split--cream { background: var(--gg-cream); }
.gg-split--warm  { background: var(--gg-cream-warm); }
/* CLIENT FEEDBACK (Sep 2026): the homepage guide section had to become "a square on top
   of shaded box vs. bled edge to edge". Sage-pale is the shade — the same band colour as
   .gg-stakes and .gg-blocks, so it reads as a deliberate panel rather than a new colour. */
.gg-split--sage  { background: var(--gg-sage-pale); }
.gg-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 601fr) minmax(0, 774fr);
  gap: var(--gg-col-gap);
  align-items: center;
}
.gg-split--flip .gg-split__grid { grid-template-columns: minmax(0, 774fr) minmax(0, 601fr); }
.gg-split--flip .gg-split__text  { order: 2; }
.gg-split--flip .gg-split__media { order: 1; }
.gg-split h2 { margin-bottom: 18px; }
.gg-split__media { position: relative; aspect-ratio: 774 / 659; }

/* SERVICES — accordion rows (640x54 + hairline), image right. */
.gg-services { background: var(--gg-cream); padding-block: var(--gg-section-y-lg); }
.gg-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 562fr);
  gap: var(--gg-col-gap);
  /* DESIGN FEEDBACK (Aug 2026): "increase the height of the image so it's aligned to
     the end of the accordion block". `align-items: start` let the media box keep its
     own 562/692 ratio and stop short of the list, leaving a hole the designer read as
     extra padding. Stretch instead and let object-fit crop. */
  align-items: stretch;
  margin-top: 32px;
}
.gg-services__list { border-top: 1px solid var(--gg-rule); }
.gg-services details { border-bottom: 1px solid var(--gg-rule); }
.gg-services summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 15px 48px 15px 0;
  font-family: var(--gg-display);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.1;
  color: var(--gg-ink);
}
.gg-services summary::-webkit-details-marker { display: none; }
.gg-services summary::after {
  content: '+';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 300; color: var(--gg-accent);
  font-family: var(--gg-ui);
}
.gg-services details[open] summary::after { content: '\2014'; font-size: 14px; }
.gg-services summary:focus-visible { outline: 2px solid var(--gg-accent); outline-offset: 2px; }
.gg-services__body { padding: 0 48px 18px 0; margin: 0; }
.gg-services__media { position: relative; aspect-ratio: auto; min-height: clamp(300px, 30vw, 520px); }

/* BLOCKS — alternating text/image, used on subpages */
.gg-blocks { background: var(--gg-sage-pale); padding-block: var(--gg-section-y-lg); }
.gg-block {
  display: grid;
  grid-template-columns: minmax(0, 511fr) minmax(0, 600fr);
  gap: var(--gg-col-gap);
  align-items: center;
}
.gg-block + .gg-block { margin-top: clamp(48px, 6vw, 96px); }
.gg-block__media { aspect-ratio: 600 / 371; }
.gg-block h3 { margin-bottom: 16px; }
.gg-block:nth-of-type(even) { grid-template-columns: minmax(0, 600fr) minmax(0, 511fr); }
.gg-block:nth-of-type(even) .gg-block__text  { order: 2; }
.gg-block:nth-of-type(even) .gg-block__media { order: 1; }

/* TESTIMONIAL */
.gg-quote { background: var(--gg-cream-warm); padding-block: var(--gg-section-y-lg); text-align: center; }
.gg-quote__title { font-family: var(--gg-display); font-size: clamp(24px, 2.6vw, 36px); color: var(--gg-ink); margin: 0 0 32px; }
.gg-quote blockquote {
  max-width: 62ch; margin: 0 auto;
  font-family: var(--gg-body); font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5; color: var(--gg-ink-soft);
}
.gg-quote cite {
  display: block; margin-top: 40px; font-style: normal;
  font-family: var(--gg-ui); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gg-ink-soft);
}

/* PROCESS — dark band, numbered rows, ~131 pitch */
.gg-process { background: var(--gg-slate); color: var(--gg-on-dark); padding-block: var(--gg-section-y-lg); }
.gg-process h2 { color: #fff; }
.gg-process__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 48px); }

/* The optional intro paragraph a process section can carry between the heading row
   and the steps. Body copy on this dark band takes --gg-on-dark-mut, the same as
   .gg-pillars p and .gg-step p; without it the paragraph inherits `.gg p`'s
   --gg-ink-soft and is unreadable on the slate. Doubled up (.gg ...) so it outranks
   `.gg p`, the same trick .gg .gg-lead uses. The bottom margin matches
   .gg-process__head's, so the steps sit the same distance down the page whether or
   not the spec supplies this paragraph. */
.gg .gg-process__lead {
  max-width: 62ch;
  color: var(--gg-on-dark-mut);
  margin: 0 0 clamp(28px, 3.5vw, 48px);
}
.gg-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: baseline;
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--gg-rule-dark);
}
.gg-step:first-of-type { border-top: 1px solid var(--gg-rule-dark); }
.gg-step__num { font-family: var(--gg-display); font-size: clamp(24px, 2.4vw, 34px); font-style: italic; color: var(--gg-on-dark); opacity: .45; }
.gg-step__label { font-family: var(--gg-ui); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gg-accent); }
.gg-step p { margin: 0; color: var(--gg-on-dark-mut); }

/* FAQ — portrait image left (6/7), accordion right */
.gg-faq { background: #fff; padding-block: var(--gg-section-y-lg); }
.gg-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 589fr) minmax(0, 664fr);
  gap: var(--gg-col-gap);
  /* Same Aug 2026 note, raised against every FAQ block on the site: the image has to
     run to the end of the accordion. */
  align-items: stretch;
}
.gg-faq__media { position: relative; aspect-ratio: auto; min-height: clamp(280px, 28vw, 480px); }
.gg-faq h2 { margin-bottom: 28px; }
.gg-faq details { border-bottom: 1px solid var(--gg-rule); }
.gg-faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--gg-ui); font-size: 12.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gg-ink);
}
.gg-faq summary::-webkit-details-marker { display: none; }
.gg-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 300; color: var(--gg-accent); }
.gg-faq details[open] summary::after { content: '\2014'; font-size: 13px; }
.gg-faq summary:focus-visible { outline: 2px solid var(--gg-accent); outline-offset: 2px; }
.gg-faq__a { padding: 0 44px 24px 0; margin: 0; }

/* CLOSING CTA — full-bleed photo, copy left */
.gg-cta {
  position: relative; display: flex; align-items: center;
  min-height: clamp(400px, 47vw, 715px);
  background: var(--gg-slate-deep); color: var(--gg-on-dark); overflow: hidden;
}
.gg-cta .gg-photo { position: absolute; inset: 0; }
.gg-cta__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,28,26,.86) 0%, rgba(20,28,26,.64) 46%, rgba(20,28,26,.2) 100%);
}
.gg-cta__inner { position: relative; z-index: 2; max-width: 56ch; padding-block: clamp(48px, 6vw, 88px); }
.gg-cta h2 { color: #fff; margin-bottom: 20px; }
.gg-cta p  { color: var(--gg-on-dark-mut); }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 900px) {
  .gg-stakes__grid,
  .gg-pillars__grid,
  .gg-split__grid,
  .gg-split--flip .gg-split__grid,
  .gg-services__grid,
  .gg-intro__grid,
  .gg-block,
  .gg-block:nth-of-type(even),
  .gg-faq__grid { grid-template-columns: 1fr; }
  .gg-intro--flip .gg-intro__body,
  .gg-intro--flip .gg-intro__media { order: 0; }
  .gg-intro--media .gg-intro__body { max-width: none; }
  .gg-intro__media { aspect-ratio: 3 / 2; }
  .gg-split--flip .gg-split__text,
  .gg-split--flip .gg-split__media,
  .gg-block:nth-of-type(even) .gg-block__text,
  .gg-block:nth-of-type(even) .gg-block__media { order: 0; }
  .gg-block__media, .gg-split__media, .gg-stakes__media { aspect-ratio: 3 / 2; }
  .gg-services__media { aspect-ratio: 3 / 2; min-height: 0; }
  .gg-faq__media { aspect-ratio: 16 / 10; min-height: 0; }
  .gg-step { grid-template-columns: 40px 1fr; }
  .gg-step p { grid-column: 2; }
  .gg-stakes__badge { left: auto; right: 4%; bottom: -6%; }
}
@media (max-width: 560px) {
  .gg-cta__scrim { background: linear-gradient(180deg, rgba(20,28,26,.5), rgba(20,28,26,.88)); }
  .gg-hero h1 { max-width: none; }
  .gg .gg-hero__display { max-width: none; }
}

/* ---------------------------------------------------------- a11y / motion -- */
@media (prefers-reduced-motion: reduce) {
  .gg *, .gg *::before, .gg *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
@media print {
  .gg-hero__scrim, .gg-cta__scrim, .gg-leaf { display: none; }
  .gg-photo { background: none; }
}