/*
 * GAGGI GROUP THEME — the homepage Andre built in WordPress + Elementor
 * (gaggigroup.com/home/), copied to the pixel for the section editor.
 *
 * Loaded only on a page whose theme is 'gaggi' (bsr_site_pages()), which then
 * drops the site's own header: the theme draws its own (gg_header). Its own
 * footer (gg_footer) went on 2026-10-09: the page ends with the site footer,
 * as every page does (Andre). Every number below was measured off the Elementor page at 1920,
 * 1024 and 390 wide, with its three breakpoints kept as they were: desktop
 * above 1024px, tablet 768-1024px, phone 767px and under.
 *
 * Fonts as the original had them: Montserrat for the copy, and the system
 * stack (Segoe UI on Windows, San Francisco on a Mac) for the scrolling words,
 * which the original never gave a font of its own.
 */

:root {
  --gg-accent: #e02f2e;     /* the red: bar, button border, logo, close X, scrolling words */
  --gg-bg: #191b1e;         /* page ground */
  --gg-light: #f2f2f3;      /* headings, icons */
  --gg-copy: #f7f6f2;       /* paragraphs */
  --gg-muted: #c6c6c5;      /* the small lines around the hero title */
  --gg-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --gg-mont: "Montserrat", sans-serif;
}

html.gg-html { scroll-behavior: smooth; overflow-x: hidden; }
/* overflow-x back to visible: site.css hides it on <body>, which with <html>
   hiding it too makes the body a scroll box, and touch browsers then draw its
   text on a layer of its own in grey, not the sharper colour-fringed text the
   original has. .gg-site does the clipping instead. */
body.gg-page {
  margin: 0;
  overflow-x: visible;
  overscroll-behavior: contain;
  background: var(--gg-bg);
  color: #333;
  font-family: var(--gg-sys);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The original overflowed sideways on tablets and phones (the hero's photo
   column is 104% wide there), and phones zoomed the whole page out to fit it.
   Clipped here, so the layout is the same with the screen at full size. */
.gg-site { overflow-x: clip; }
/* Every theme section's root carries .gg-sec; nothing here reaches a site
   section mixed into the page. site.css makes every image a block. */
:where(.gg-sec) img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; }
:where(.gg-sec) a { color: inherit; text-decoration: none; }
.gg-text p, .gg-ftext p { margin: 0 0 .9rem; }

/* An icon as Elementor drew it: a block (the widget) holding a line box at the
   body's 16px/1.5, and in it an inline-block whose font-size is the icon's
   height. The few pixels under the icon are that line box's descent, kept so
   everything sits where it sat. */
.gg-ico { position: relative; }
.gg-ico-w { text-align: center; }
.gg-ico-i {
  display: inline-block; font-size: 50px; line-height: 1; text-align: center;
  color: var(--gg-light); transition: all .3s;
  margin: 0; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer;
}
a.gg-ico-i, span.gg-ico-i { cursor: inherit; }
a.gg-ico-i[href] { cursor: pointer; }
/* Font Awesome glyphs sit centred in a 1em square, as the icon font drew them;
   a theme SVG or an uploaded image is 1em tall and as wide as it needs. */
.gg-ico-i .gg-fa { display: block; width: 1em; height: 1em; fill: currentColor; }
.gg-ico-i .gg-svg, .gg-ico-i img { display: block; height: 1em; width: auto; max-width: none; }

/* The sign-in and save-search boxes over the header (audit B10: the header, at 1500, sat on top of
   them, sharp and clickable over the dimmed page); still under the full-screen menu. */
.bsr-gate-overlay, .bsr-save-overlay { z-index: 2000; }
/* The Est. payment card and its dimmed page over the header too, under those boxes. */
.bsr-pay-pop { z-index: 1600; }
.bsr-pay-dim { z-index: 1599; }
/* View N photos on a listing's photo: its words as View all N photos below (.bsr-btn above; Andre, 2026-10-15). */
.bsr-prop-act.is-photos { font-family: var(--gg-mont); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
/* A listing's read more in the red, as the heart. */
.bsr-prop-more { color: var(--gg-accent); }

/* ───────────────────────── Header ───────────────────────── */
.gg-header { position: relative; z-index: 1500; display: flex; flex-direction: column; padding: 0 20px; }
.gg-header-in { display: flex; flex-direction: row; width: 100%; max-width: 1800px; margin: 0 auto; }
.gg-hcol { position: relative; z-index: 1500; display: flex; flex-direction: row; align-items: center; width: 33%; flex: 0 1 auto; }
.gg-hcol-l { justify-content: flex-start; }
.gg-hcol-c { justify-content: center; }
.gg-hcol-r { justify-content: flex-end; min-height: 89px; }
.gg-logo .gg-ico-w { margin-top: 30px; }
.gg-logo .gg-ico-i { font-size: 100px; color: var(--gg-accent); }
.gg-talk .gg-ico-i { font-size: 90px; }

/* ───────────────────────── Menu (full screen) ───────────────────────── */
.gg-menu {
  position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: center;
  -webkit-user-select: auto; user-select: auto;
}
.gg-menu[hidden] { display: none; }
.gg-menu-box {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: var(--gg-bg); box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  animation-duration: .5s; animation-fill-mode: both;
}
.gg-menu.is-in .gg-menu-box { animation-name: gg-slide-in-down; }
.gg-menu.is-out .gg-menu-box { animation-name: gg-slide-in-down; animation-direction: reverse; animation-fill-mode: forwards; }
.gg-menu-msg { display: flex; align-items: flex-start; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow: auto; }
.gg-menu-doc { width: 100%; }
.gg-menu-top { position: relative; z-index: 1010; display: flex; flex-direction: column; }
.gg-menu-top-in { display: flex; flex-direction: row; width: 100%; max-width: 1800px; margin: 0 auto; }
.gg-menu-bar { position: relative; z-index: 1000; display: flex; flex-direction: row; width: 100%; flex: 0 1 auto; padding: 0 20px; }
.gg-menu-brand { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; flex: 0 1 auto; }
.gg-menu-brand .gg-ico-w { text-align: start; }
.gg-menu-brand .gg-ico-i { font-size: 80px; }
.gg-menu-mono { display: none; }
.gg-menu-x-col, .gg-menu-talk-col { position: relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; min-height: 89px; flex: 0 1 auto; }
.gg-menu-x-col { width: 5%; }
.gg-menu-talk-col { width: 15%; }
.gg-menu-x .gg-ico-w { transform: rotate(45deg); transition: transform .4s; }
.gg-menu-x .gg-ico-i { color: var(--gg-accent); }
.gg-menu-x .gg-ico-i:focus:not(:focus-visible) { outline: none; } /* the ring shows for the keyboard only */
.gg-menu-talk .gg-ico-i { font-size: 70px; }
.gg-menu-main { position: relative; z-index: 1010; display: flex; flex-direction: column; margin-top: 50px; padding: 0 10px; }
.gg-menu-main-in { display: flex; flex-direction: row; width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 0; }
.gg-menu-nav, .gg-menu-social {
  position: relative; z-index: 1010; display: flex; flex-direction: column; width: 50%; flex: 0 1 auto;
  border-left: 2px solid #2f3134; padding: 0 0 0 80px;
}
.gg-menu-social { justify-content: flex-end; align-self: stretch; }
.gg-mi, .gg-ms, .gg-ml { position: relative; }
.gg-mi h2 {
  font-family: var(--gg-mont); font-size: 33px; font-weight: 600; text-transform: uppercase; line-height: 1;   /* 33px (Andre, 2026-10-14; was the original's 40) */
  color: var(--gg-light); margin: 0 0 25px; transition: color .3s ease;
}
.gg-mi h2:hover { color: var(--gg-accent); }
/* A drop-down (2026-10-15, the guides and their pages): the label opens its links under it in the socials'
   size and grey, one open at a time (theme-gaggi.js [data-gg-group]); the arrow turns, the label stays red. */
.gg-mg h2 { transition: color .3s ease, margin .35s ease; }
.gg-mg.is-open h2 { color: var(--gg-accent); margin-bottom: 18px; }
.gg-mg-btn {
  display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; color: inherit;
}
.gg-mg-btn:focus:not(:focus-visible) { outline: none; }
.gg-mg-ico { flex: none; width: .6em; height: .6em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.gg-mg.is-open .gg-mg-ico { transform: rotate(180deg); }
.gg-mg-list { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s; }
.gg-mg.is-open .gg-mg-list { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease, visibility 0s; }
.gg-mg-list > ul { min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.gg-mg-list li { margin: 0 0 16px; }
.gg-mg-list li:last-child { margin-bottom: 32px; }
.gg-mg-list a {
  font-family: var(--gg-mont); font-size: 20px; font-weight: 500; text-transform: uppercase; line-height: 1.15;
  color: #acabac; text-decoration: none; transition: color .3s ease;
}
.gg-mg-list a:hover, .gg-mg-list a:focus-visible, .gg-mg-list a[aria-current="page"] { color: var(--gg-light); }
@media (max-width: 767.98px) { .gg-mg-list a { font-size: 17px; } }
.gg-ml h2 {
  font-family: var(--gg-mont); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2.5px; line-height: 1;
  color: #acabac; margin: 0 0 30px; transition: color .3s ease; /* the original's 20px and its wrapper's 30px, collapsed */
}
.gg-ms h2 {
  font-family: var(--gg-mont); font-size: 20px; font-weight: 500; text-transform: uppercase; line-height: 1;   /* 20px (Andre, 2026-10-14; was 25) */
  color: var(--gg-light); margin: 0 0 30px; transition: color .3s ease;
}
.gg-ms h2:hover { color: #878787; }
/* The visitor's account in the menu (includes/account.php, 2026-10-13), in the socials' look, Sign in and
   Sign out dressed as the links. At the top of the column, level with the first link, the socials kept at
   its foot (Andre, 2026-10-14: "move it up to the top aligned with the top of home"); signed in just My
   account and a small Sign out, the rest in the header's card. */
.gg-menu-acct { margin-bottom: auto; padding-bottom: 30px; }
.gg-ms h2 button {
  margin: 0; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.gg-ms.is-out h2 { font-size: 14px; letter-spacing: 2px; color: #acabac; margin-top: 6px; }
.gg-ms.is-out h2:hover { color: var(--gg-light); }
/* Light / dark (2026-10-15): the moon or the sun before its words, in their colour. */
.gg-ms h2 button.gg-mode { display: inline-flex; align-items: center; gap: 10px; }
.gg-mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Light / dark centred between the account and the socials, a line above and below it in the column's own grey
   (Andre's mockup, 2026-10-16). */
.gg-menu-social:has(> .is-mode) .gg-menu-acct { margin-bottom: 0; }
.gg-ms.is-mode { margin: auto 0; padding: 64px 0; }
.gg-ms.is-mode h2 { margin: 0; }
.gg-ms.is-mode::before, .gg-ms.is-mode::after { content: ""; position: absolute; left: -24px; width: 168px; height: 1px; background: #2f3134; }
.gg-ms.is-mode::before { top: 0; }
.gg-ms.is-mode::after { bottom: 0; }
.gg-ms.is-mode + .gg-ml { margin-top: 60px; }   /* room under the lower line, as under Sign out above the upper one (Andre, 2026-10-17: it sat 14px over Socials) */
@media (max-width: 767.98px) { .gg-ms.is-mode { margin: 8px 0 40px; padding: 36px 0; } .gg-ms.is-mode::before, .gg-ms.is-mode::after { left: 0; } .gg-ms.is-mode + .gg-ml { margin-top: 0; } }
/* Shorter windows (Andre, 2026-10-17: "scale down the menu till it switches to tablet", without the scrolling):
   on desktop widths everything under the logo bar scales with the window's height. Measured: the menu with a
   five-link drop-down open is 236px that does not scale (logo bar, paddings) plus 720px that does, so --u is
   1px from 956px tall and fits it to the window below that (0.72px at 755, HOME 24px), never under 0.6px. The
   logo, Let's Talk and X keep their size and place over the header's; tablets and phones keep theirs (below). */
@media (min-width: 1025px) {
  .gg-menu { --u: clamp(.6px, calc((100vh - 236px) / 720), 1px); }
  .gg-menu-main { margin-top: calc(50 * var(--u)); }
  .gg-mi h2 { font-size: calc(33 * var(--u)); margin-bottom: calc(25 * var(--u)); }
  .gg-mg.is-open h2 { margin-bottom: calc(18 * var(--u)); }
  .gg-mg-btn { gap: calc(14 * var(--u)); }
  .gg-mg-list li { margin-bottom: calc(16 * var(--u)); }
  .gg-mg-list li:last-child { margin-bottom: calc(32 * var(--u)); }
  .gg-mg-list a { font-size: calc(20 * var(--u)); }
  .gg-ml h2 { font-size: calc(12 * var(--u)); letter-spacing: calc(2.5 * var(--u)); margin-bottom: calc(30 * var(--u)); }
  .gg-ms h2 { font-size: calc(20 * var(--u)); margin-bottom: calc(30 * var(--u)); }
  .gg-menu-acct { padding-bottom: calc(30 * var(--u)); }
  .gg-ms.is-out h2 { font-size: calc(14 * var(--u)); letter-spacing: calc(2 * var(--u)); margin-top: calc(6 * var(--u)); }
  .gg-ms h2 button.gg-mode { gap: calc(10 * var(--u)); }
  .gg-mode svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
  .gg-ms.is-mode { padding: calc(64 * var(--u)) 0; }
  .gg-ms.is-mode + .gg-ml { margin-top: calc(60 * var(--u)); }
}
/* The account beside the homepage's menu button (sections/gg_header.php, 2026-10-14), light on its dark. */
.gg-header .bsr-acct, .gg-header .bsr-acct-in { margin-right: 26px; color: var(--gg-light); }
/* The giant blurred monogram behind the menu, tilting after the mouse. */
.gg-menu-glow {
  position: absolute; top: 0; left: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; min-height: 100vh; margin-top: -600px; padding: 0 0 300px; pointer-events: none;
}
.gg-menu-glow-w { width: 100%; filter: blur(15px); opacity: .05; }
.gg-menu-glow-t { transition: transform .4s; }
.gg-menu-glow .gg-ico-i { font-size: 75vw; cursor: default; }
.gg-menu-glow .gg-svg, .gg-menu-glow img { filter: brightness(0) invert(.95); }
/* Staggered entrances, replayed each time the menu opens. */
.gg-menu .gg-anim { visibility: hidden; }
.gg-menu.is-in .gg-anim { visibility: visible; animation-duration: 1.25s; animation-fill-mode: both; }
.gg-menu.is-in .gg-anim-up { animation-name: gg-fade-in-up; }
.gg-menu.is-in .gg-anim-fade { animation-name: gg-fade-in; animation-duration: 2s; }

@keyframes gg-slide-in-down { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes gg-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes gg-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ───────────────────────── Page transition ───────────────────────── */
/* Half the original's times (Andre, 2026-10-15; was 900ms, .5s delay, .5s fades, 1.2s spinner wait);
   theme-gaggi.js DURATION and PRELOADER_DELAY match. */
.gg-transition {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: var(--gg-accent); animation-fill-mode: both; animation-duration: 450ms;
}
.gg-transition.is-entered { display: none; }
.gg-transition.is-entering { animation-name: gg-pt-slide-out-right; animation-delay: .25s; }
.gg-transition.is-exiting { animation-name: gg-pt-slide-in-left; }
.gg-preloader {
  display: block; font-size: 65px; width: 1em; height: 1em; border-radius: 100%;
  border: .1em solid rgba(255, 255, 255, .3); border-top-color: #fff; opacity: 0;
}
.gg-transition.is-entering .gg-preloader { animation: gg-spin 1400ms linear infinite, gg-pt-fade-out .25s both; transition: none; }
.gg-transition.is-exiting .gg-preloader { opacity: 1; transition: .25s all; transition-delay: .6s; animation: gg-spin 1400ms linear infinite; }
@keyframes gg-pt-slide-out-right { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); visibility: visible; } }
@keyframes gg-pt-slide-in-left { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes gg-pt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gg-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gg-transition { display: none; } }

/* Scroll motion (theme-gaggi.js sets --gg-ty on .gg-mfx). */
.gg-mfx { transform: translateY(var(--gg-ty, 0px)); transition: transform .1s ease; }

/* ───────────────────────── Hero ───────────────────────── */
.gg-hero { position: relative; z-index: 20; display: flex; flex-direction: column; margin-top: -180px; --gg-top: 44px; }
/* The fades over the video, under the title and the photo. The top one darkens the window's top 180px for the
   menu (it was the header's own layer, over the title and Sara: Andre, 2026-10-15); --gg-top is how far the
   hero starts above the page, under the header. */
.gg-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #10100f 0, #10100f var(--gg-top), rgba(16, 16, 15, 0) calc(var(--gg-top) + 180px)),
    linear-gradient(to top, var(--gg-bg) 0%, var(--gg-bg) 8%, transparent 100%),
    linear-gradient(to left, var(--gg-bg) 0%, var(--gg-bg) 20%, transparent 100%);
}
/* Dark overlay (the hero's switch, Andre 2026-10-19): black at 30% over the video and the still, under the fades
   (same layer, drawn first) and the words, so the title stands out. */
.gg-hero.has-overlay::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, .3); }
.gg-hero-still { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.gg-hero-video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; direction: ltr;
  transition: opacity 1s; container-type: size;
}
.gg-hero-video.is-loading { opacity: 0; }
.gg-hero-video iframe, .gg-hero-video video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; border: 0;
  width: max(100cqw, 177.7778cqh); height: max(100cqh, 56.25cqw);
}
.gg-hero-video video { object-fit: cover; }
.gg-hero-in { position: relative; z-index: 20; display: flex; flex-direction: column; min-height: 100vh; }
/* The red bar along the bottom left, holding the property search since 2026-10-10 (Andre): a GG White
   box and a GG Black button, 16px apart, the box starting where the page's content does. */
.gg-hero-search {
  position: absolute; bottom: 0; left: 0; z-index: 400; display: flex; align-items: center; gap: 16px;
  width: 50%; height: 80px; padding: 0 16px 0 max(20px, calc((100vw - 1440px) / 2)); box-sizing: border-box; background: var(--gg-accent);
}
.gg-hs-box {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; box-sizing: border-box;
  background: var(--gg-light); color: var(--gg-accent); cursor: text;
}
.gg-hs-box input {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none;
  font-family: var(--gg-mont); font-size: 15px; font-weight: 500; color: var(--gg-bg);
}
.gg-hs-box input::placeholder { color: #7a7c80; }
.gg-hs-box input::-webkit-search-cancel-button { display: none; }
.gg-hs-box:focus-within { box-shadow: inset 0 0 0 2px var(--gg-bg); }
.gg-hs-go {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border: 0;
  background: var(--gg-bg); color: var(--gg-light); cursor: pointer; white-space: nowrap;
  font-family: var(--gg-mont); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.gg-hs-go:hover, .gg-hs-go:focus-visible { background: var(--gg-light); color: var(--gg-bg); outline: 0; }
@media (max-width: 1024.98px) { .gg-hero-search { width: 75%; } }
@media (max-width: 767.98px) {
  .gg-hero-search { width: 100%; height: 72px; gap: 10px; padding: 0 12px; }
  .gg-hs-box { padding: 0 14px; }
  .gg-hs-box input { font-size: 16px; }   /* 16px: iOS does not zoom */
  .gg-hs-go { padding: 0 16px; }
  .gg-hs-more { display: none; }
}
.gg-hero-row { display: flex; flex-direction: row; justify-content: center; align-items: center; flex: 1 1 auto; width: 100%; max-width: 1440px; margin: 0 auto; }
.gg-hero-text { position: relative; z-index: 20; display: flex; flex-direction: column; width: 60%; flex: 0 0 auto; margin-top: 50px; }
.gg-hero-pre, .gg-hero-post, .gg-hero-title {
  font-family: var(--gg-mont); font-weight: 800; text-transform: uppercase; line-height: .8em; text-align: end; margin: 0; padding: 0;
}
.gg-hero-pre, .gg-hero-post { font-size: 40px; color: var(--gg-muted); }
.gg-hero-post { position: relative; z-index: 300; }
.gg-hero-title { font-size: 200px; color: var(--gg-light); padding: 20px 0; }
.gg-hero-photo { position: relative; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; width: 40%; flex: 0 0 auto; }
.gg-hero-person { position: absolute; top: -453px; right: 63px; z-index: 100; text-align: end; }
.gg-hero-person img { display: inline-block; vertical-align: middle; width: 432px; }
/* Her name and title up her right side, its middle level with the title block's (Andre, 2026-10-15): this column
   sits on the row's middle line and the title block's middle is 25px below it (its 50px top margin); she ends 63px
   in from the column's edge, the name 12px past her. Desktop only: phones show them beside the phone photo,
   tablets have no room. Styles: .gg-fn under Feature. */
.gg-hero-photo > .gg-fn { position: absolute; top: 25px; left: calc(100% - 51px); transform: translateY(-50%) rotate(180deg); }
@media (max-width: 1024.98px) { .gg-hero-photo > .gg-fn { display: none; } }
/* Desktop: the title block ends on the page's centre line, where the red search bar ends (Andre,
   2026-10-10). The row is centred, so 10% of it moves the 60% column's right edge to its middle;
   the photo column stays put. Under ~1600px the title shrinks to keep "GROUP" (3.9em wide) on screen. */
@media (min-width: 1025px) {
  .gg-hero-text { margin-left: -10%; margin-right: 10%; }
  .gg-hero-title { font-size: min(200px, calc((50vw - 40px) / 3.9)); }
}

/* ───────────────────────── Story (photo + copy) ───────────────────────── */
.gg-h2 {
  font-family: var(--gg-mont); font-size: 50px; font-weight: 800; text-transform: uppercase; line-height: 1;
  color: var(--gg-light); margin: 0 0 50px; padding: 0; position: relative;
  /* Never a word broken with a dash (Andre, 2026-10-15): a word too wide for a phone makes the title smaller (site.js). */
}
.gg-text {
  position: relative; font-family: var(--brand-font-body, var(--gg-mont)); font-size: 18px; font-weight: 400; line-height: 1.7em;   /* the story's copy in the body font (2026-10-14) */
  color: var(--gg-copy); text-align: justify;
}
.gg-text a { text-decoration: underline; }
.gg-story {
  position: relative; display: flex; flex-direction: column; min-height: 993px; margin: 400px 0; padding: 0 10px;
  background-repeat: no-repeat; background-position: 0% 5%; background-size: 1100px auto;
}
.gg-story-in { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 0; }
.gg-story-row { position: relative; display: flex; flex-direction: row; align-items: center; min-height: 840px; width: 100%; }
.gg-story-spacer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 50%; flex: 0 0 auto; padding: 10px; }
.gg-story-copy { position: relative; display: flex; flex-direction: column; justify-content: center; width: 50%; flex: 0 0 auto; padding: 100px 0 0; }

/* ───────────────────────── Feature (copy + portrait) ───────────────────────── */
.gg-feature { position: relative; display: flex; flex-direction: column; margin: 0 0 400px; padding: 0 10px; }
.gg-feature-in { display: flex; flex-direction: column; width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 0; }
.gg-feature-row { position: relative; display: flex; flex-direction: row; width: 100%; }
.gg-feature-copy { position: relative; display: flex; flex-direction: column; justify-content: center; width: 50%; flex: 0 0 auto; }
.gg-feature-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; width: 50%; flex: 0 0 auto; margin-top: -100px; padding: 10px; }
.gg-btn-wrap { position: relative; z-index: 50; margin: 50px 0; }
.gg-btn {
  display: inline-block; font-family: var(--gg-mont); font-size: 19px; font-weight: 600; text-transform: uppercase; line-height: 1;
  color: var(--gg-light); background: transparent; border: 2px solid var(--gg-accent); border-radius: 5px;
  padding: 20px 40px; text-align: center; transition: all .3s;
}
.gg-site .gg-btn:hover, .gg-site .gg-btn:focus { background-color: var(--gg-accent); color: var(--gg-light); }
.gg-feature-house { position: relative; z-index: 20; text-align: end; }
.gg-feature-copy > .gg-h2, .gg-feature-copy > .gg-text { position: relative; z-index: 30; }   /* the house sits behind the words and the button (Andre, 2026-10-16) */
.gg-feature-house-in { margin: -130px 0 0 -40px; }   /* Andre, 2026-10-17; 2026-10-19 the new house (its roof at the picture's top) clear of the paragraph, was -300px */
.gg-feature-house img { display: inline-block; vertical-align: middle; width: 880px; max-width: 200%; }   /* 80% of 1100px (Andre, 2026-10-17) */
/* No photo under the button (Andre's mockup, 2026-10-19): the words sit level with the portrait's middle, and the
   section is tall enough that the portrait no longer reaches into the next one. */
@media (min-width: 1025px) { .gg-feature.no-house .gg-feature-copy { padding: 180px 0; } }
/* Phones: about 130px from Let's Talk to the testimonial (Andre, 2026-10-19; it was 277px once the photo was gone). */
@media (max-width: 767.98px) {
  .gg-feature.no-house .gg-btn-wrap { margin-bottom: 0; }
  .gg-feature.no-house .gg-feature-row { margin-bottom: 53px; }
}
.gg-feature-person { position: absolute; top: 20vh; right: 108px; z-index: 100; text-align: center; }
.gg-feature-person img { display: inline-block; vertical-align: middle; width: 500px; }
.gg-feature-pattern { position: absolute; top: 39px; right: 62px; z-index: 50; }
.gg-feature-pattern .gg-ico-i { font-size: 670px; color: var(--gg-accent); cursor: default; }
/* A portrait's name and title up its side (Andre's picture, 2026-10-15): reading upward from one foot, the name
   in GG White capitals, the title in grey beside it. Lucas's sits in his moving box, so it moves with him, beside
   his chest: desktop right of the pattern (it ends 46px past him), tablet right of him, phones left of him. */
.gg-fn {
  display: flex; flex-direction: column; gap: 5px; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--gg-mont); line-height: 1; text-align: start; text-transform: uppercase; white-space: nowrap;
}
.gg-fn-n { font-size: 22px; font-weight: 800; color: var(--gg-light); }
.gg-fn-t { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #9d9fa3; }
.gg-feature-person .gg-mfx { position: relative; display: inline-block; vertical-align: top; }
.gg-feature-person .gg-fn { position: absolute; top: 40%; left: calc(100% + 54px); }
/* The phone photo beside the title (gg_hero.php), phones only. */
.gg-hero-m { display: none; }

/* ───────────────────────── Scrolling words ───────────────────────── */
.gg-marquee { position: relative; display: flex; flex-direction: column; margin-top: 400px; }
.gg-marquee-in { width: 100%; margin: 0 auto; padding-top: 80px; }   /* the window's whole width (Andre, 2026-10-19; was 1800px at most) */
.gg-mq { position: relative; overflow: hidden; white-space: nowrap; width: 100%; margin-bottom: 30px; }
/* The words twice in a row (gg_marquee.php), moved by one copy's width, so the loop has no seam and starts on screen
   (Andre, 2026-10-19; it began a screen's width off to the right and ended in an empty gap). */
.gg-mq-t {
  display: inline-block; color: #adadad; font-weight: 800; text-transform: uppercase;
  animation: gg-scroll-text 350s linear infinite;
}
.gg-mq-t > span { display: inline-block; padding-right: .3em; }
.gg-mq-1 { color: var(--gg-accent); font-size: 50px; line-height: 1.3em; }
.gg-mq-2 { font-size: 150px; line-height: .6em; }
/* The giant line's tops stood 3px above its tight .6em line and were clipped (Andre, 2026-10-19): its box reaches 20px
   higher, the margin 20px less, so the words stay where they were. */
.gg-mq + .gg-mq { padding-top: 20px; margin-top: -20px; }
/* Phones: about half the size, so more of the words show at once (Andre, 2026-10-19; were 50px and 150px). */
@media (max-width: 767.98px) {
  .gg-mq { margin-bottom: 16px; }
  .gg-mq-1 { font-size: 24px; }
  .gg-mq-2 { font-size: 70px; }
  .gg-mq + .gg-mq { padding-top: 10px; margin-top: -10px; }
}
@keyframes gg-scroll-text { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ───────────────────────── Logo pattern band ───────────────────────── */
.gg-band {
  position: relative; display: flex; flex-direction: column; min-height: 187px; margin: 0 0 300px;
  background-repeat: repeat; background-position: 0 0; background-size: 188px auto;
}
.gg-band::before { content: ''; position: absolute; inset: 0; background: var(--gg-bg); opacity: .95; }

/* Scrolling words and the logo band on a page outside the theme (2026-10-09,
   gaggigroup.com): a site section's spacing instead of the homepage's gaps
   (400px above the words, 300px under the band), and the theme's type for the
   words, which the homepage gives its whole body. The homepage is untouched. */
body:not(.gg-page) .gg-marquee { margin: 0; padding: 120px 0 90px; font-family: var(--gg-sys); }
body:not(.gg-page) .gg-marquee-in { padding-top: 0; }
body:not(.gg-page) .gg-band { margin: 0; }
@media (max-width: 767.98px) { body:not(.gg-page) .gg-marquee { padding: 60px 0 40px; } }

/* ───────────────────────── Tablet: 768-1024px ───────────────────────── */
@media (max-width: 1024.98px) {
  .gg-header { margin-bottom: 50px; }
  .gg-header-in { padding-top: 20px; }
  .gg-burger .gg-ico-i { font-size: 52px; }
  .gg-talk .gg-ico-i { font-size: 60px; }

  .gg-menu-bar { padding: 20px 20px 0; }
  .gg-menu-x .gg-ico-i { font-size: 52px; }
  .gg-menu-talk .gg-ico-i { font-size: 60px; }
  .gg-mi h2 { font-size: 30px; }
  .gg-ml h2 { font-size: 10px; }
  .gg-ms h2 { font-size: 20px; }

  .gg-hero { justify-content: flex-start; margin-top: -300px; margin-bottom: 300px; --gg-top: 141px; }
  .gg-hero-in { min-height: 514px; margin-top: 190px; }
  .gg-hero-row { justify-content: flex-start; align-items: flex-start; }
  .gg-hero-text { width: 64%; justify-content: flex-start; margin-top: 0; padding: 97px 0 0 20px; z-index: 200; }
  .gg-hero-pre, .gg-hero-post { font-size: 31px; text-align: start; }
  .gg-hero-title { font-size: 121px; text-align: start; }
  .gg-hero-photo { align-items: center; z-index: 100; }
  .gg-hero-person { top: -48px; }
  .gg-hero-person img { width: 415px; }

  .gg-story { min-height: 0; margin: 0; padding: 0 40px; background-position: 0 0; background-size: 87% auto; }
  .gg-story-in, .gg-feature-in { padding: 0; }
  .gg-story-row { flex-direction: column; align-items: center; min-height: 0; }
  .gg-story-spacer { align-items: center; min-height: 421px; padding: 0; z-index: 30; }
  .gg-story-copy { margin-top: 140px; padding: 0; z-index: 50; }

  .gg-feature { margin: 0; padding: 0 40px; }
  .gg-feature-row { align-items: flex-start; margin-bottom: 200px; }
  .gg-feature-copy { margin-top: 100px; }
  .gg-btn-wrap { margin: 100px 0; text-align: right; }
  .gg-btn { font-size: 25px; }
  .gg-feature-house-in { margin: 0 0 0 -15px; }
  .gg-feature-house img { width: 739px; max-width: 300%; }
  .gg-feature-side { order: 99999; min-height: 581px; margin-top: 107px; padding: 0; }
  .gg-feature-person { right: 36px; }
  .gg-feature-person img { width: 281px; }
  .gg-feature-person .gg-fn { left: calc(100% + 8px); }

  .gg-marquee { margin-top: 0; }
  .gg-marquee-in { padding-top: 0; }

  .gg-band { min-height: 212px; margin: 50px 0 100px; background-size: 140px auto; }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .gg-logo { display: none; }
  .gg-hcol-l { width: 20%; }
  .gg-hcol-c { width: 1012px; }
  .gg-hcol-r { width: 45%; }
  .gg-menu-brand { width: 1012px; }
  .gg-menu-x-col { width: 20%; }
  .gg-menu-talk-col { width: 45%; }
  .gg-menu-word { display: none; }
  .gg-menu-mono { display: block; }
  .gg-story-spacer, .gg-story-copy { width: 500px; }
}

/* ───────────────────────── Phone: 767px and under ───────────────────────── */
@media (max-width: 767.98px) {
  .gg-header { z-index: 900; }
  .gg-hcol { z-index: 900; }
  .gg-hcol-l, .gg-hcol-c { width: 50%; }
  .gg-hcol-r { display: none; }
  /* The account on the left edge (Andre, 2026-10-15), level with the menu button; its card opens inward. */
  .gg-hcol-l { position: static; }
  .gg-header :is(.bsr-acct, .bsr-acct-in) { position: absolute; left: 0; top: calc(50% + 10px); transform: translateY(-50%); margin-right: 0; }
  .gg-header .bsr-acct-menu { left: 0; right: auto; }
  .gg-burger .gg-ico-i { font-size: 36px; }   /* the menu button well under the 56px monogram (Andre, 2026-10-19; was 52px) */

  .gg-menu-brand, .gg-menu-x-col { width: 50%; }
  .gg-menu-word, .gg-menu-talk-col { display: none; }
  .gg-menu-mono { display: block; }
  .gg-menu-main { padding: 0; }
  .gg-menu-main-in { flex-wrap: wrap; padding: 0; }
  .gg-menu-nav, .gg-menu-social { width: 100%; border-left-width: 0; padding: 0 30px; }
  .gg-menu-social { margin-top: 40px; }
  /* A line between the links and the account under them, as around Light mode (Andre, 2026-10-20). */
  .gg-menu-social::before { content: ""; display: block; width: 168px; height: 1px; margin-bottom: 36px; background: #2f3134; }
  .gg-ms h2 { margin-bottom: 20px; }

  /* Phones (Andre, 2026-10-15): no side fade on the video, only the one into the page; Sara centred and
     still, her head right under the search bar, cut at the hips (620px of her 1126px), fading into the
     page, the story starting under her; the story's house photo as big as the phone allows (the house
     fills the width, the image's dark right edge cut off); smaller titles and text; Lucas larger, to the
     right with the monograms centred behind him, his name and title up the side on the left. */
  .gg-hero::after {
    background:
      linear-gradient(180deg, #10100f 0, #10100f var(--gg-top), rgba(16, 16, 15, 0) calc(var(--gg-top) + 180px)),
      linear-gradient(to top, var(--gg-bg) 0%, var(--gg-bg) 8%, transparent 100%);
  }
  .gg-hero { margin-top: -150px; margin-bottom: 460px; padding-top: 100px; --gg-top: 22px; }
  .gg-hero-in { margin-top: 0; margin-bottom: 100px; }
  .gg-hero-row { flex-wrap: wrap; }
  .gg-hero-text { width: 100%; align-items: center; margin-top: 20px; padding: 0; z-index: 1000; }
  .gg-hero-pre, .gg-hero-post { font-size: 21px; text-align: center; }
  .gg-hero-title { font-size: 79px; padding: 6px 0; text-align: center; }
  .gg-hero-photo { width: 100%; min-height: 369px; }
  .gg-hero-person { top: 315px; left: 0; right: 0; text-align: center; }
  .gg-hero-person .gg-mfx {
    height: 620px; margin-top: 33px; overflow: hidden; transform: none;
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
  }
  .gg-hero-person img { width: 318px; }

  .gg-h2 { font-size: 32px; margin-bottom: 32px; }
  .gg-text { font-size: 16px; }

  .gg-story { padding: 0 20px; background-size: 145vw auto; background-position: 47% 0; }
  .gg-story-row { margin-bottom: 100px; }
  .gg-story-spacer { width: 100%; min-height: calc(105vw - 50px); }
  .gg-story-copy { width: 100%; margin-top: 50px; z-index: 200; }
  .gg-story .gg-text { text-align: start; }

  .gg-feature { padding: 0 20px; }
  .gg-feature-row { flex-direction: row-reverse; flex-wrap: wrap-reverse; margin-bottom: 100px; }
  .gg-feature-copy, .gg-feature-side { width: 100%; }
  .gg-feature-side { min-height: 715px; }
  .gg-feature-copy { z-index: 200; }
  .gg-feature .gg-text { text-align: start; }
  .gg-btn-wrap { text-align: center; margin-top: 30px; }   /* Let's Talk closer to the words (Andre, 2026-10-19; was 100px) */
  .gg-feature-house { text-align: center; }
  .gg-feature-house-in { margin: 0 0 0 -143px; }   /* 50px further left (Andre, 2026-10-19; was -93px) */
  .gg-feature-house img { width: 651px; }
  /* Lucas and the monograms centred, a little smaller under 410px so his name fits on his right, 16px in. */
  .gg-feature-person { left: 0; right: 0; text-align: center; }
  .gg-feature-person img { width: min(300px, calc(100vw - 110px)); }
  .gg-feature-pattern { left: 0; right: 0; text-align: center; }
  .gg-feature-pattern .gg-ico-i { font-size: min(600px, calc((100vw - 110px) * 2)); }
  .gg-feature-person .gg-fn { top: calc(8% + 60px); left: calc(100% + 6px); }   /* right of him by his face (Andre's picture, 2026-10-15); 60px lower (2026-10-17) */
  .gg-fn-n { font-size: 18px; }
  .gg-fn-t { font-size: 10px; }

  .gg-marquee { margin-top: 100px; }

  .gg-band { min-height: 187px; margin: 30px 0 100px; background-size: 124px auto; }

  /* With a phone photo (Andre's picture, 2026-10-15): the title on the left, the head-and-shoulders photo on the
     right, its foot fading behind the search bar, the name up its right side; no full-length photo under it. */
  .gg-hero.has-mphoto { margin-bottom: 60px; }
  .gg-hero.has-mphoto .gg-hero-in { min-height: 640px; }
  .gg-hero.has-mphoto .gg-hero-photo { display: none; }
  .gg-hero.has-mphoto .gg-hero-text { align-items: center; padding: 0 20px; }   /* centred (Andre, 2026-10-19; was on the left, 35px in) */
  .gg-hero.has-mphoto :is(.gg-hero-pre, .gg-hero-title, .gg-hero-post) { text-align: center; }
  /* The title as big as the phone allows (Andre's picture, 2026-10-15): "GROUP" is 3.9em wide, 20px from the right. */
  .gg-hero.has-mphoto :is(.gg-hero-pre, .gg-hero-post) { font-size: min(32px, 8.2vw); }
  .gg-hero.has-mphoto .gg-hero-title { font-size: min(86px, calc((100vw - 55px) / 3.9)); }
  /* Sara over the title (Andre: "it doesn't matter if it can't be fully read"), drifting up as the page scrolls;
     the search bar over her foot. */
  .gg-hero-m { display: block; position: absolute; left: 0; right: 0; bottom: -6px; z-index: 1100; pointer-events: none; }   /* centred (Andre); 6px lower, her foot behind the search bar (2026-10-19) */
  .gg-hero.has-mphoto .gg-hero-search { z-index: 1200; }
  .gg-hero-m .gg-mfx { position: relative; }
  .gg-hero-m img { display: block; width: 300px; height: auto; margin: 0 auto; }   /* her hair over the foot of the title (Andre, 2026-10-17: 300px, after 290 and 350; was 250) */
  .gg-hero.has-mphoto .gg-hero-post { display: none; }   /* no "Real Estate" line under the title on phones (Andre, 2026-10-17); desktop keeps it */
  /* A film file fills the hero by its own shape (the phone's portrait cut, gg_hero.php), not as a 16:9 box. */
  .gg-hero-video video { top: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover; }
  .gg-hero-m .gg-fn { position: absolute; top: 34%; right: 10px; }   /* 10px from the screen's right edge */
}

/* ───────── The menu button on the right, "Let's Talk!" on the left (Andre, 2026-10-10) ─────────
   The columns trade places by order, the markup as it was: the button's column
   (gg-hcol-l) last and to the right edge, Let's Talk's (gg-hcol-r) first and to
   the left. Each side keeps the width its old side had. On phones, where Let's
   Talk and the logo are hidden, the button sits on the right too. In the open
   menu the close button goes to the far right, where the menu button was. */
.gg-hcol-r { order: 1; justify-content: flex-start; }
.gg-hcol-c { order: 2; }
/* The logo on phones and tablets too (Andre, 2026-10-15; the original hid it): centred in the bar. */
@media (max-width: 1024.98px) {
  .gg-header-in { position: relative; }
  .gg-hcol-c { position: absolute; top: 0; bottom: 0; left: 50%; width: auto; transform: translateX(-50%); }
  .gg-hcol-l { margin-left: auto; }   /* the menu button stays on the right edge */
  .gg-logo { display: block; }
  .gg-logo .gg-ico-w { margin-top: 20px; }
  .gg-logo .gg-ico-i { font-size: 56px; }
}
.gg-hcol-l { order: 3; justify-content: flex-end; }
.gg-menu-talk-col { order: 2; }
.gg-menu-x-col { order: 3; }
@media (min-width: 768px) and (max-width: 1024.98px) {
  .gg-hcol-l { width: 45%; }
  .gg-hcol-r { width: 20%; }
}

/* The site header on gaggigroup.com's own pages (Andre, 2026-10-10): a 110px bar that blurs
   whatever is behind it, with the logo, the links and the menu button centred in it. */
.bsr-header { height: 110px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.bsr-header .bsr-logo, .bsr-header .bsr-logo.is-full, .bsr-header .bsr-header-right { top: 50%; transform: translateY(-50%); }
/* The logo and the menu on the page's edges (Andre's screenshot, 2026-10-15; they were 65px from the window): the
   container's, 1500px wide and 32px in (40px on phones); the menu's bars on the edge, past the button's 4px. */
.bsr-header { --hd-in: 32px; --hd-edge: max(var(--hd-in), calc((100% - var(--bsr-container)) / 2 + var(--hd-in))); }
@media (max-width: 768.98px) { .bsr-header { --hd-in: 40px; } }
.bsr-header .bsr-logo, .bsr-header .bsr-logo.is-full { left: var(--hd-edge); }
.bsr-header .bsr-header-right { right: calc(var(--hd-edge) - 4px); }
.bsr-header .bsr-menu-btn { justify-content: flex-end; }   /* the bars at its right on a phone's 44px button too */
/* The property search runs the window's full width (Andre, 2026-10-15): the header on its edges, 28px in (16px under 981px). */
body:has(.bsr-ps-app) .bsr-header { --hd-edge: 28px; }
@media (max-width: 980.98px) { body:has(.bsr-ps-app) .bsr-header { --hd-edge: 16px; } }
/* The property search right under it (Andre's mockup, 2026-10-14): the search bar's tiles 13px below the bar. */
@media (min-width: 981px) { .gg-menu-site + .bsr-ps-app { padding-top: 111px; } }

/* The listing page (Andre, 2026-10-13): its header without the blur, over the homepage header's
   dark fade (the homepage hero's top one) at the top of the photo instead. */
body:has(.bsr-prop-hero) .bsr-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bsr-prop-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 180px; pointer-events: none;
  background-image: linear-gradient(180deg, #10100f 0%, rgba(16, 16, 15, 0) 100%);
}

/* A listing's address stops at the middle of the screen and wraps (Andre, 2026-10-10): the
   container is centred, so half its width ends there. Phones keep the full width. */
/* (2026-10-14) The listing photo carries no words now (property.php .bsr-prop-bar): its heading rule went. */

/* Every button in the theme's own style (Andre, 2026-10-12: "make all buttons match that size and
   style", Let's Talk!, .gg-btn above): a 2px border in the red, 5px corners, semi-bold capitals;
   dark words on a light ground, light on a dark one; the red filled in on hover. The filled ones (a
   form's Send) red, darker on hover. Big (19px) on the homepage only, smaller on every other page
   (Andre, 2026-10-14: "they are only big on the homepage"). Not the sign-in boxes' own buttons
   (signin.css: Google, Facebook, Email and their submits, .bsr-si-go), which keep their own look. */
.bsr-btn:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go) {
  font-family: var(--gg-mont); font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  padding: 14px 26px; border: 2px solid var(--gg-accent); border-radius: 5px; background: transparent; color: var(--brand-dark);
}
body.gg-page .bsr-btn:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go) { font-size: 19px; letter-spacing: 0; padding: 20px 40px; }
.bsr-btn.on-dark:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go),
.bsr-btn.bsr-dl-btn:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go) { color: var(--gg-light); }   /* Register for VIP Access, on the dark photo (audit B21) */
.bsr-btn:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go):hover,
.bsr-btn:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go):focus-visible { background: var(--gg-accent); border-color: var(--gg-accent); color: var(--gg-light); }
.bsr-btn.solid:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go), .bsr-btn.accent-solid:not(.bsr-si-btn) { background: var(--gg-accent); color: var(--gg-light); }
/* The listing page's Back to Search (Andre, 2026-10-14): GG black with GG White words, as wide as Send Request
   (the card's 32px sides); over the button rules above. */
.bsr-btn:is(.bsr-prop-back, .bsr-prop-allph):not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go) { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-light); }   /* and View all photos (2026-10-15) */
.bsr-btn:is(.bsr-prop-back, .bsr-prop-allph):not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go):hover,
.bsr-btn:is(.bsr-prop-back, .bsr-prop-allph):not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go):focus-visible { background: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-light)); border-color: color-mix(in srgb, var(--brand-dark) 82%, var(--brand-light)); color: var(--brand-light); }
.bsr-prop-stick .bsr-prop-back { margin-left: 32px; margin-right: 32px; }
@media (max-width: 767.98px) { .bsr-prop-stick .bsr-prop-back { margin-left: 22px; margin-right: 22px; } }
.bsr-btn.solid:not(.bsr-si-btn):not(.bsr-si-email):not(.bsr-si-go):hover, .bsr-btn.accent-solid:not(.bsr-si-btn):hover {
  background: color-mix(in srgb, var(--gg-accent) 82%, #000); border-color: color-mix(in srgb, var(--gg-accent) 82%, #000);
}

/* The page on GG White, so the cards and boxes on it can be white and stand out (Andre,
   2026-10-12). The themed homepage keeps its own dark ground; the header, footer and dark
   bands keep theirs. Sections that painted themselves white show the page instead. */
:root { --bsr-page: var(--gg-light); --bsr-band: var(--brand-light); }   /* site.css draws the page (body.gg-page keeps its dark), its bands and the search bar's Map/Gallery track from these */
/* Dark mode (2026-10-15; site.css "Light and dark"): the homepage's own dark carried to the other pages. Its
   ground #191b1e, cards a step up, GG White for the words, GG red as it is (Andre, 2026-10-15: not a lifted
   salmon; 3.8:1 on the ground, 3.3:1 on the cards). The Brand Guide's values override these (ag_brand_css()).
   A dark section (data-bsr-dark, site.css) takes them on the light page. */
html[data-theme="dark"] body:not(.gg-page, .is-staff-frame),
html[data-theme="dark"] :is(.bsr-acct-menu, .bsr-nav-dropdown-menu-inner, .bsr-dl-contact .bsr-inquiry-card),
html:not([data-theme="dark"]) [data-bsr-dark], html[data-theme="dark"] body.gg-page [data-bsr-dark] {
  --brand-primary: #f2f2f3; --brand-primary-dark: #ffffff;
  --brand-accent: #e02f2e; --brand-accent-dark: #e02f2e;
  --brand-light: #191b1e; --brand-white: #24272b; --brand-dark: #f2f2f3;
  --brand-grey: #b4b6ba; --brand-grey-mid: #9a9da2; --brand-grey-light: #8b8e93;
  --brand-tint: var(--brand-grey-light);
  --bsr-page: #191b1e; --bsr-band: #24272b;
}
html[data-theme="dark"] .bsr-btn.accent-solid { color: var(--gg-light); }   /* GG's red buttons keep their light words (site.css darkens gold ones) */
/* A site section mixed into the themed homepage (Text, Intro, Steps, Cards, Neighbourhoods, Listings) draws the
   page's GG White, as Photo and text does (re-check V20): with no ground of its own it read dark on the homepage's
   dark (re-check 2 D10). :where() leaves it the weakest rule, so any section's own background still wins. */
:where(body.gg-page .bsr-section) { background-color: var(--bsr-page); }
/* Selling and buying's sentence in the homepage's paragraph colour (Andre, 2026-10-19). Its titles' 50px (32px on
   phones), the smaller photo and the strip are in site.css now, for every site; the strip keeps three rows and whole tiles (site.js), so it still ends where the Brand Guide
   cuts it, between a monogram's halves. */
body.gg-page .bsr-buysell-text { color: var(--gg-copy); }
/* A saved home's heart in the red (Andre, 2026-10-14): the site's primary, which BSR's Merlot Flame is, is black here. */
.bsr-save-home.is-saved { color: var(--gg-accent); }
.bsr-prop-specs span { color: var(--brand-grey); }   /* the listing strip's labels in the darker Gray (Andre, 2026-10-14) */
.bsr-card, .bsr-cards-sec.is-light .bsr-card { background: var(--brand-white); }   /* white; the cards' dark in dark mode */
.bsr-card-go { font-family: var(--gg-mont); font-size: 14px; font-weight: 600; letter-spacing: .04em; }   /* a linked card's Read more in the buttons' words (2026-10-15) */
.bsr-card-go svg { stroke: var(--gg-accent); }
.bsr-contact-form { padding: 36px; border-radius: 24px; background: var(--brand-white); box-shadow: 0 10px 28px rgba(25, 27, 30, .06); }
@media (max-width: 767.98px) { .bsr-contact-form { padding: 24px 20px; border-radius: 18px; } }
/* The enquiry card beside a listing, in the same look (Andre, 2026-10-13): white, no edge, round corners. */
.bsr-inquiry-card { padding: 36px 32px; border: 0; border-radius: 24px; background: var(--brand-white); box-shadow: 0 10px 28px rgba(25, 27, 30, .06); }
@media (max-width: 767.98px) { .bsr-inquiry-card { padding: 28px 22px; border-radius: 18px; } }

/* ───────────────────────── A guide's pages (includes/guide.php, 2026-10-15) ─────────────────────────
   The Gaggi guides (First Time Buyers, Upsizing, Downsizing) laid out as the best guide pages are (studied on
   Webflow's real estate templates; Andre approved the mockup): the landing page's banner beside a photo and the
   guide's parts, the parts as a numbered index, a part beside a sticky "In this guide" panel with Previous and
   Next under it, the call to action as a dark panel. Plenty of room between everything (Andre: "a lot more
   space"); numerals solid GG black turning GG red (an outline drew artifacts where strokes overlap). Header and
   footer as they are. */
.gg-ghero { padding: 250px 0 150px; }
.gg-ghero .bsr-heading { margin: 0; font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.01em; }
.gg-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 44px; font-family: var(--gg-mont); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-grey); }
.gg-crumbs a { color: inherit; text-decoration: none; transition: color .25s; }
.gg-crumbs a:hover, .gg-crumbs a:focus-visible { color: var(--gg-accent); }
.gg-crumbs [aria-hidden] { opacity: .45; }
.gg-lead { max-width: 60ch; margin: 44px 0 0; font-size: 18px; line-height: 1.85; color: var(--brand-grey); }
.gg-ghero-acts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 60px; }
.gg-ghero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(64px, 8vw, 140px); align-items: center; }
.gg-ghero-art { position: relative; }
.gg-ghero-photo { aspect-ratio: 4 / 5; max-height: 760px; border-radius: 28px; background: var(--brand-light) center / cover no-repeat; }
.gg-ghero-card { padding: 40px 36px 34px; border-radius: 22px; background: var(--brand-white); box-shadow: 0 30px 70px rgba(16, 16, 15, .10); }
.gg-ghero.has-photo .gg-ghero-card { position: absolute; left: -72px; bottom: 64px; width: min(340px, 86%); }
.gg-ghero.is-part { padding-bottom: 130px; }
.gg-ghero.is-part .gg-crumbs { margin-bottom: 30px; }
.gg-ghero.is-part .bsr-heading { max-width: 20ch; }
.gg-progress { display: flex; align-items: center; gap: 18px; margin: 0 0 36px; font-family: var(--gg-mont); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gg-accent); }
.gg-progress { white-space: nowrap; }   /* "Part 1 of 4" on one line on a small phone, the bar gives way */
.gg-progress i { position: relative; display: block; flex: 0 1 180px; min-width: 40px; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--brand-dark) 12%, transparent); }
.gg-progress i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--gg-accent); }

/* The parts, numbered: the panel beside a part and the card in the landing banner. */
.gg-rail-h { margin: 0 0 22px; font-family: var(--gg-mont); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-grey); }
.gg-gl { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gg-gl a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  font-family: var(--gg-mont); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--brand-dark); transition: background .25s, color .25s;
}
.gg-gl-n { flex: none; min-width: 22px; font-size: 13px; font-weight: 800; color: var(--brand-dark); transition: color .25s; }
.gg-gl a:hover, .gg-gl a:focus-visible { background: var(--bsr-page); }
.gg-gl a:hover .gg-gl-n, .gg-gl a:focus-visible .gg-gl-n { color: var(--gg-accent); }
.gg-gl a[aria-current] { background: var(--brand-dark); color: var(--brand-white); }
.gg-gl a[aria-current] .gg-gl-n { color: var(--gg-accent); }
.gg-rail-back, .gg-pager svg, .gg-index-go svg { flex: none; }
.gg-rail-back svg, .gg-pager svg, .gg-index-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A part: the panel beside its sections, Previous and Next under them. */
.gg-guide { padding: 0 0 170px; }
.gg-guide-in { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(64px, 7vw, 128px); align-items: start; }
.gg-rail { position: sticky; top: 140px; }
.gg-rail-in { padding: 34px 24px 26px; border-radius: 22px; background: var(--brand-white); }
.gg-rail-back {
  display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 22px 16px 0; border-top: 1px solid color-mix(in srgb, var(--brand-dark) 10%, transparent);
  font-family: var(--gg-mont); font-size: 13px; font-weight: 600; color: var(--brand-grey); text-decoration: none; transition: color .25s;
}
.gg-rail-back:hover, .gg-rail-back:focus-visible { color: var(--gg-accent); }
.gg-guide-main { display: flex; flex-direction: column; gap: 150px; min-width: 0; }
/* The page's sections inside the column: their own room, widths and grounds give way to the column's. */
.gg-guide-main > section { padding: 0 !important; background: none !important; }
.gg-guide-main .bsr-container { max-width: none !important; padding: 0 !important; }
.gg-guide-main .bsr-trust-head { max-width: none; margin: 0; text-align: left; }
.gg-guide-main .bsr-rule.center { margin-left: 0; }
.gg-guide-main .bsr-body { max-width: 68ch; font-size: 16.5px; line-height: 1.85; }
.gg-guide-main .bsr-body.center { margin-left: 0; text-align: left; }
.gg-guide-main .bsr-cards-head { margin-bottom: 56px; }
.gg-guide-main .bsr-cards:is(.cols-2, .cols-3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: none; }
.gg-guide-main .bsr-card { padding: 50px 46px; border-radius: 22px; }
.gg-guide-main .bsr-card .bsr-body { max-width: none; }
.gg-guide-main .bsr-cards-outro { margin-top: 60px; text-align: left; }
.gg-guide-main .bsr-ck { max-width: none; }
.gg-guide-main .bsr-cards-sec :is(.bsr-ck-card, .bsr-ck-dot) { background: var(--brand-white); }   /* white on the page, whatever the section's ground */
.gg-guide-main .bsr-ck-card { padding: 48px 50px; border-radius: 22px; }
/* Steps: each its own card, a big numeral solid GG black that turns GG red. */
.gg-guide-main .bsr-step-list { gap: 28px; margin-top: 0; }
.gg-guide-main .bsr-step { grid-template-columns: 130px minmax(0, 1fr); gap: 40px; padding: 60px 56px; border: 0; border-radius: 22px; background: var(--brand-white); }
.gg-guide-main .bsr-step-num { display: block; width: auto; height: auto; border-radius: 0; background: none; font-size: 0; line-height: 1; }
.gg-guide-main .bsr-step-num::before { content: attr(data-n); font-family: var(--gg-mont); font-size: 76px; font-weight: 800; letter-spacing: -.04em; color: var(--brand-dark); transition: color .3s; }
.gg-guide-main .bsr-step:hover .bsr-step-num::before { color: var(--gg-accent); }
.gg-guide-main .bsr-step-title { margin: 6px 0 18px; font-size: 22px; line-height: 1.3; }
.gg-guide-main .bsr-step-text { max-width: none; font-size: 16.5px; line-height: 1.85; }
/* Photo and text: a rounded photo beside the words, inside the column. */
.gg-guide-main .bsr-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.gg-guide-main .bsr-split .photo { order: 0 !important; height: auto; min-height: 0; aspect-ratio: 4 / 5; border-radius: 22px; }
.gg-guide-main .bsr-split .copy { order: 1 !important; max-width: none; padding: 0; justify-self: stretch; }
.gg-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gg-pager a {
  display: grid; align-content: start; gap: 16px; padding: 44px 42px; border: 1.5px solid color-mix(in srgb, var(--brand-dark) 14%, transparent);
  border-radius: 22px; text-decoration: none; transition: border-color .3s, background .3s;
}
.gg-pager a:hover, .gg-pager a:focus-visible { border-color: transparent; background: var(--brand-white); }
.gg-pager-k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gg-mont); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-grey); transition: color .3s; }
.gg-pager a:is(:hover, :focus-visible) .gg-pager-k { color: var(--gg-accent); }
.gg-pager-t { font-family: var(--gg-mont); font-size: 20px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--brand-dark); }
.gg-pager-next { justify-items: end; text-align: right; }

/* The landing page: its parts as a numbered index under the banner. */
.gg-guide-home .bsr-cards-sec.is-index { padding: 20px 0 170px; }
.gg-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--brand-dark) 12%, transparent); }
.gg-index-row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.15fr) 68px; align-items: center; gap: 56px; padding: 60px 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-dark) 12%, transparent); text-decoration: none; transition: background .3s;
}
.gg-index-row:hover, .gg-index-row:focus-visible { background: var(--brand-white); }
.gg-index-n { font-family: var(--gg-mont); font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--brand-dark); transition: color .3s; }
.gg-index-row:hover .gg-index-n, .gg-index-row:focus-visible .gg-index-n { color: var(--gg-accent); }
.gg-index-t { margin: 0; font-family: var(--gg-mont); font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--brand-dark); }
.gg-index-d { font-size: 16.5px; line-height: 1.8; color: var(--brand-grey); }
.gg-index-d > * { margin: 0; }
.gg-index-go {
  display: grid; place-items: center; width: 68px; height: 68px; border: 1.5px solid color-mix(in srgb, var(--brand-dark) 18%, transparent); border-radius: 50%;
  color: var(--brand-dark); transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.gg-index-row:hover .gg-index-go, .gg-index-row:focus-visible .gg-index-go { background: var(--gg-accent); border-color: var(--gg-accent); color: #fff; transform: rotate(-45deg); }

/* The call to action at a guide page's foot: a dark panel inside the page instead of a full-width band. */
.gg-close { padding: 0 0 170px; }
.gg-close > .bsr-work {
  width: calc(100% - 64px); max-width: calc(var(--bsr-container) - 64px); margin: 0 auto; overflow: hidden;
  padding: clamp(72px, 8vw, 120px) clamp(36px, 7vw, 104px); border-radius: 28px; background-color: var(--gg-bg) !important; text-align: left;
}
.gg-close > .bsr-work::before { display: none; }
.gg-close .bsr-work .inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 72px; max-width: none; }
.gg-close .bsr-work .bsr-heading { grid-column: 1; margin: 0; font-size: clamp(30px, 3.6vw, 50px) !important; line-height: 1.08; color: var(--gg-light); }
.gg-close .bsr-work .bsr-body { grid-column: 1; max-width: 52ch; margin: 0; text-align: left; color: #acabac; }
.gg-close .bsr-work .inner > div { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
/* Dark mode: a step up from the dark page. --D-band (the dark card colour taken on <body>, site.css), not
   --brand-white: .bsr-work keeps its light colours in dark mode, where --brand-white is white (Andre's
   screenshot: light words on white). */
html[data-theme="dark"] .gg-close > .bsr-work { background-color: var(--D-band, #24272b) !important; }

@media (max-width: 1100.98px) {
  .gg-ghero-in, .gg-guide-in { grid-template-columns: minmax(0, 1fr); }
  .gg-ghero-art { max-width: 640px; }
  .gg-ghero.has-photo .gg-ghero-card { left: 28px; bottom: 28px; }
  .gg-guide-in { gap: 64px; }
  /* The panel above the part, as on desktop (Andre, 2026-10-15: a sideways strip of 3 or 4 parts hid the rest). */
  .gg-rail { position: static; max-width: 560px; }
  .gg-guide-main { gap: 110px; }
  .gg-index-row { grid-template-columns: 96px minmax(0, 1fr) 56px; gap: 14px 32px; padding: 48px 16px; }
  .gg-index-n { grid-row: span 2; align-self: start; font-size: 52px; }
  .gg-index-d { grid-column: 2; }
  .gg-index-go { grid-column: 3; grid-row: 1 / span 2; width: 56px; height: 56px; }
}
@media (max-width: 767.98px) {
  .gg-ghero { padding: 160px 0 90px; }
  .gg-ghero-acts { margin-top: 44px; }
  .gg-ghero.has-photo .gg-ghero-card { position: relative; inset: auto; z-index: 2; width: auto; margin-top: -48px; margin-inline: 16px; }   /* over the photo's foot, not under it */
  .gg-guide { padding-bottom: 110px; }
  .gg-guide-main { gap: 90px; }
  .gg-guide-main .bsr-cards:is(.cols-2, .cols-3), .gg-guide-main .bsr-split, .gg-pager { grid-template-columns: minmax(0, 1fr); }
  .gg-guide-main .bsr-card { padding: 36px 28px; }
  .gg-guide-main .bsr-step { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 40px 28px; }
  .gg-guide-main .bsr-step-num::before { font-size: 54px; }
  /* A checklist's stages: white bands the screen's full width, the card inside them bare (site.css, Andre 2026-10-20). */
  .gg-guide-main .bsr-cards-sec .bsr-ck-stage { background: var(--brand-white); }
  .gg-guide-main .bsr-cards-sec :is(.bsr-ck-card, .bsr-ck-dot) { padding: 0; border-radius: 0; background: none; }
  .gg-guide-main .bsr-split { gap: 36px; }
  .gg-pager a { padding: 32px 28px; }
  .gg-pager-next { justify-items: start; text-align: left; }
  .gg-index-row { grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 10px 18px; padding: 36px 4px; }
  .gg-index-n { font-size: 36px; }
  .gg-index-go { width: 44px; height: 44px; }
  .gg-guide-home .bsr-cards-sec.is-index, .gg-close { padding-bottom: 110px; }
  .gg-close > .bsr-work { width: calc(100% - 32px); border-radius: 22px; }
  .gg-close .bsr-work .inner { grid-template-columns: minmax(0, 1fr); }
  .gg-close .bsr-work .inner > div { grid-column: 1; grid-row: auto; margin-top: 14px !important; }
}

/* The stats band closes on the monogram, not the whole logo (Andre, 2026-10-16). */
.bsr-stats-banner .inner::after { height: 110px; -webkit-mask-image: var(--brand-monogram, var(--brand-logo)); mask-image: var(--brand-monogram, var(--brand-logo)); }
@media (max-width: 640px) { .bsr-stats-banner .inner::after { height: 84px; } }

/* The header's hover (site.css, 2026-10-16) in GG red, over a dark top or a light one. */
.bsr-header :is(.bsr-header-links a, .bsr-nav-dropdown-trigger, .bsr-acct-in, .bsr-acct-btn):is(:hover, :focus-visible),
.bsr-header :is(.bsr-nav-dropdown.open .bsr-nav-dropdown-trigger, .bsr-acct.open .bsr-acct-btn),
.bsr-header:is(.scrolled, .on-light) :is(.bsr-header-links a, .bsr-nav-dropdown-trigger, .bsr-acct-in, .bsr-acct-btn):is(:hover, :focus-visible),
.bsr-header:is(.scrolled, .on-light) :is(.bsr-nav-dropdown.open .bsr-nav-dropdown-trigger, .bsr-acct.open .bsr-acct-btn) { color: var(--gg-accent); }

/* The property type tiles as on Best Sellers (Andre, 2026-10-16: "similar for gg"): the icons in GG red, ticked or not (theirs
   are antique gold); the hover without a border on the page colour (site.css: GG White, the dark page in dark mode). */
.bsr-pf-tile span svg, .bsr-pf-tile input:checked + span svg { color: var(--gg-accent); }

/* The Buyer's / Seller's Guides' banner card (site.css .bsr-gd-*): 30px up from the photo's foot was for Best Sellers only
   (Andre, 2026-10-16); here it keeps hanging 56px below the photo. */
@media (min-width: 768px) { .bsr-gd-hero.has-photo .bsr-gd-card { bottom: -56px; } }

/* The top bar's drop-downs: round, faint lines between the links (site.css, both sites since 2026-10-16). */

/* No monogram over the testimonials on GG (Andre, 2026-10-17); Best Sellers keeps it. */
.bsr-testimonials .mono { display: none; }
/* Phones, homepage: 200px less between Lucas's house and the quote (Andre, 2026-10-19: 150, then 50 more). The quote
   is centred in the band, so its top padding and its least height both lose 200px. */
@media (max-width: 767.98px) { body.gg-page .bsr-testimonials { padding-top: 0; min-height: 750px; } }
/* Then 100px under Read more testimonials and 100px over Downsizing (Andre, 2026-10-19). The quotes stay where they
   were (38px from the band's top) and the least height fits the longer of the two, so the band keeps its height
   as the slides change; the shorter one centres in it. */
@media (max-width: 767.98px) {
  body.gg-page .bsr-testimonials { padding: 38px 0 100px; min-height: 648px; }
  body.gg-page .bsr-buysell { padding-top: 100px; }
}