/*
 * Site header + NavOverlay (global). Tokens only. Comp values (1920 canvas):
 * header 1:73 — MENU pill 72,79 180x70 + 22px teal dot, CONTACT pill 1616,79 237x70,
 * glass rgba(255,255,255,.5), radius 70, label 22px tracked 0.15em white, no logo.
 * overlay 1:1721 — ground #00554F, pills repeat at the same spot, citron rule y 220,
 * HOME label 35px at 111,321, links 74.681/95 at 110,399 (active citron), FOLLOW +
 * socials right-aligned to x 1791 from y 321, address block from y 586, GALLERY phone
 * at 111,1029, GRACE/WATER outlines 636 wide at 1217,793.
 * Open state = html.gw-nav-open (assets/js/gw-header.js).
 */

/* ---- Header metrics. The header condenses once the page scrolls (html.gw-scrolled, gw-header.js; Danny 2026-10-05):
   pills move up and shrink, the lockup loses its icon and its wordmark sits between them on a white band ~70px tall at 1440 (was a
   ~130px zone). On Home the condensed state waits for the hero brand hand-off (gw-hero-motion.js classes).
   --gw-header-h-compact is the offset for anything position: sticky under the header (finder panel, compare row,
   home sidebar, map cap): pinned things only pin after scroll, so they use the compact value as a constant. ---- */
:root {
  --gw-header-top: clamp(20px, 4.115vw, 79px);
  --gw-header-pill: clamp(48px, 3.646vw, 70px);
  --gw-header-top-compact: clamp(12px, 1.04vw, 20px);
  --gw-header-pill-compact: clamp(40px, 2.5vw, 48px);
  --gw-header-h-compact: calc(var(--gw-header-pill-compact) + 2 * var(--gw-header-top-compact)); /* = the white band's height */
}
@media (max-width: 999px) { :root { --gw-header-pill-compact: 44px; } } /* touch height */
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) { --gw-header-top: var(--gw-header-top-compact); --gw-header-pill: var(--gw-header-pill-compact); }
.gw-nav { --gw-header-top: clamp(20px, 4.115vw, 79px); --gw-header-pill: clamp(48px, 3.646vw, 70px); } /* the overlay keeps the comp's full-size pills */

/* ---- NavPill (DS) ---- */
.gw-nav-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: clamp(10px, 1.04vw, 20px);
  min-height: 40px; height: var(--gw-header-pill); padding: 0 clamp(22px, 2.03vw, 39px);
  border: 0; border-radius: var(--gw-radius-nav-pill);
  background: var(--gw-glass-nav); -webkit-backdrop-filter: blur(var(--gw-blur-sheet)); backdrop-filter: blur(var(--gw-blur-sheet));
  color: var(--gw-white); font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-l);
  letter-spacing: var(--gw-track-heading); text-transform: uppercase; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease), transform var(--gw-dur-fast) var(--gw-ease);
}
.gw-nav-pill__label { display: block; line-height: 1; }
.gw-nav-pill__dot { display: block; width: clamp(14px, 1.146vw, 22px); height: clamp(14px, 1.146vw, 22px); border-radius: var(--gw-radius-circle); background: var(--gw-teal-500); transition: background var(--gw-dur) var(--gw-ease), transform var(--gw-dur) var(--gw-ease); }
.gw-nav-pill:hover { background: var(--gw-cream-100); color: var(--gw-green-700); }
.gw-nav-pill:hover .gw-nav-pill__dot { transform: scale(1.15); }
.gw-nav-pill:active { transform: scale(0.98); }
.gw-nav-pill:focus-visible { outline: 2px solid var(--gw-citron-400); outline-offset: 3px; }
/* Salient gotcha: body[data-button-style] button { border-radius: 4px !important } */
body[data-button-style] button.gw-nav-pill { border-radius: var(--gw-radius-nav-pill) !important; }

/* ---- Header: fixed, transparent, pills at the chrome margins ---- */
.gw-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gw-space-3);
  padding: var(--gw-header-top) var(--gw-fluid-margin-chrome) 0;
  transition: padding-top var(--gw-dur-slow) var(--gw-ease);
  pointer-events: none; /* the bar never blocks the page; the pills re-enable */
}
.gw-header > * { pointer-events: auto; }
/* White band behind the condensed row; with it the controls are always the dark-tone ink, whatever section is underneath. */
.gw-header::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: var(--gw-header-h-compact); background: #fff; box-shadow: 0 1px 0 rgba(0, 85, 79, .14); opacity: 0; pointer-events: none; transition: opacity var(--gw-dur-slow) var(--gw-ease); }
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header::before { opacity: 1; }
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header .gw-nav-pill { color: var(--gw-green-700); background: var(--gw-glass-button); }
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header .gw-nav-pill:hover { background: var(--gw-green-700); color: var(--gw-cream-100); }
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header .gw-header__lockup { color: var(--gw-green-700); }
body.admin-bar .gw-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .gw-header { top: 46px; } }
/* Dark tone (cream pages): ink labels on the glass. Light tone (over photo/video): white labels (comp). */
.gw-header[data-gw-tone="dark"] .gw-nav-pill { color: var(--gw-green-700); background: var(--gw-glass-button); } /* white glass vanishes over white / cream, so the dark tone swaps to the DS grey glass (Danny, 2026-09-30) */
.gw-header[data-gw-tone="light"] .gw-nav-pill { color: var(--gw-white); }
.gw-header[data-gw-tone="light"] .gw-nav-pill:hover { color: var(--gw-green-700); }
/* The logo changes tone immediately. Keep the pills in step at section boundaries. */
.gw-header .gw-nav-pill { transition: background var(--gw-dur) var(--gw-ease), transform var(--gw-dur-fast) var(--gw-ease), height var(--gw-dur-slow) var(--gw-ease), padding var(--gw-dur-slow) var(--gw-ease), font-size var(--gw-dur-slow) var(--gw-ease); }
.gw-header .gw-nav-pill__dot { transition: background var(--gw-dur) var(--gw-ease), transform var(--gw-dur) var(--gw-ease), width var(--gw-dur-slow) var(--gw-ease), height var(--gw-dur-slow) var(--gw-ease); }
@media (min-width: 1000px) {
  html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header .gw-nav-pill { padding-inline: clamp(18px, 1.46vw, 28px); font-size: clamp(14px, 0.94vw, 18px); }
  html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header .gw-nav-pill__dot { width: clamp(12px, 0.83vw, 16px); height: clamp(12px, 0.83vw, 16px); }
}
@media (prefers-reduced-motion: reduce) { .gw-header, .gw-header::before, .gw-header .gw-nav-pill, .gw-header .gw-nav-pill__dot { transition: none; } }
html.gw-nav-open .gw-header { visibility: hidden; }
.gw-header__skip:focus { position: fixed; top: 8px; left: 8px; z-index: 9001; width: auto; height: auto; padding: 8px 12px; clip: auto; clip-path: none; background: var(--gw-cream-100); color: var(--gw-green-700); }

/* Salient leftovers: no #header-outer, so nothing should reserve space for it */
body.gw-has-header #header-space { display: none !important; }

/* ---- Overlay ---- */
.gw-nav { position: fixed; inset: 0; z-index: 9500; }
.gw-nav[hidden] { display: none; }
.gw-nav__backdrop { position: absolute; inset: 0; background: rgba(1, 46, 43, 0.5); opacity: 0; transition: opacity var(--gw-dur-slow) var(--gw-ease); }
.gw-nav__panel {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-rows: auto auto 1fr; row-gap: 0;
  padding: clamp(20px, 4.115vw, 79px) var(--gw-fluid-margin-chrome) 0;
  background: var(--gw-green-700); color: var(--gw-cream-100);
  transform: translate3d(0, -100%, 0); transition: transform var(--gw-dur-slow) var(--gw-ease);
}
html.gw-nav-open .gw-nav__backdrop { opacity: 1; }
html.gw-nav-open .gw-nav__panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .gw-nav__backdrop, .gw-nav__panel { transition: none; } }

.gw-nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gw-space-3); }
.gw-nav__panel .gw-nav-pill { color: var(--gw-white); }
.gw-nav__panel .gw-nav-pill:hover { color: var(--gw-green-700); }
.gw-nav__panel .gw-nav-pill.is-open .gw-nav-pill__dot { background: var(--gw-citron-400); }
/* Rule: y 220 in the comp = 71px under the pill row; ~6px citron */
.gw-nav__rule { margin: clamp(24px, 3.7vw, 71px) calc(-1 * var(--gw-fluid-margin-chrome)) 0; border: 0; height: clamp(4px, 0.3125vw, 6px); background: var(--gw-citron-500); }

/* Body grid: links left (x 110), FOLLOW/address right (to x 1791), phone bottom-left, wordmark bottom-right */
.gw-nav__body {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: 1fr auto;
  column-gap: var(--gw-space-6); row-gap: clamp(32px, 4vw, 80px);
  padding: clamp(32px, 5.26vw, 101px) clamp(0px, 2vw, 38px) clamp(24px, 4.5vw, 90px) clamp(0px, 2vw, 38px);
}
.gw-nav__menu { grid-column: 1; grid-row: 1; display: grid; align-content: start; gap: clamp(16px, 1.6vw, 30px); }
.gw-nav__aside { grid-column: 2; grid-row: 1; display: grid; align-content: start; justify-items: end; text-align: right; gap: clamp(40px, 6.5vw, 125px); }
.gw-nav__phone { grid-column: 1; grid-row: 2; align-self: end; }
.gw-nav__wordmark { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: clamp(200px, 33.1vw, 636px); color: var(--gw-citron-400); line-height: 0; display: grid; gap: 0.6vw; }
.gw-nav__wordmark svg { display: block; width: 100%; height: auto; }

/* 35px "small" labels (HOME, FOLLOW, address heading, GALLERY) */
.gw-nav__small { display: block; margin: 0; font-family: var(--gw-font-display) !important; font-weight: 600 !important; font-size: clamp(18px, 1.823vw, 35px); line-height: 1.37; letter-spacing: 0; text-transform: uppercase; color: var(--gw-cream-100); text-decoration: none; }
a.gw-nav__small:hover, a.gw-nav__small:focus-visible { color: var(--gw-citron-400); outline: none; }
.gw-nav__home[aria-current="page"] { color: var(--gw-citron-400); }

.gw-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gw-nav__list li { list-style: none; margin: 0; padding: 0; }
.gw-nav__list a {
  display: inline-block; font-family: var(--gw-font-display) !important; font-weight: 900 !important; font-size: var(--gw-fluid-nav-link);
  line-height: 1.272; text-transform: uppercase; letter-spacing: 0; color: var(--gw-cream-100); text-decoration: none;
  transition: color var(--gw-dur) var(--gw-ease), transform var(--gw-dur) var(--gw-ease);
}
.gw-nav__list a:hover, .gw-nav__list a:focus-visible { color: var(--gw-citron-400); transform: translateX(0.12em); outline: none; }
.gw-nav__list .current-menu-item > a, .gw-nav__list .current_page_item > a, .gw-nav__list .current-menu-ancestor > a { color: var(--gw-citron-500); }

.gw-nav__block { display: grid; gap: clamp(4px, 0.4vw, 8px); }
.gw-nav__follow { justify-items: end; }
.gw-nav__contact { outline: none; display: grid; justify-items: end; }
.gw-nav__contact.is-target .gw-nav__small { color: var(--gw-citron-400); }
.gw-nav__phone.gw-nav__contact { justify-items: start; text-align: left; } /* card #71: address sits under the Sales Gallery phone */
.gw-nav__social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2px, 0.3vw, 6px); justify-items: end; }
.gw-nav__social-list li { list-style: none; margin: 0; padding: 0; }
.gw-nav__social-list a { font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-l); line-height: 1.45; color: var(--gw-cream-100); text-decoration: none; }
.gw-nav__social-list a:hover, .gw-nav__social-list a:focus-visible { color: var(--gw-citron-400); outline: none; }
.gw-nav__address-text { display: block; margin: 0; font-family: var(--gw-font-display); font-weight: 400; font-size: clamp(18px, 1.823vw, 35px); line-height: 1.4; color: var(--gw-cream-100); text-decoration: none; }
a.gw-nav__address-text:hover { color: var(--gw-citron-400); }
.gw-nav__phone-link { display: inline-block; font-family: var(--gw-font-body); font-weight: 400; font-size: clamp(18px, 1.823vw, 35px); line-height: 1.37; color: var(--gw-cream-100); text-decoration: none; }
.gw-nav__phone-link:hover, .gw-nav__phone-link:focus-visible { color: var(--gw-citron-400); outline: none; }

@media (max-width: 999px) {
  .gw-nav__panel { display: block; }
  .gw-nav__bar { position: sticky; top: 0; z-index: 2; background: var(--gw-green-700); }
  .gw-nav__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-inline: 0; row-gap: var(--gw-space-5); }
  .gw-nav__menu, .gw-nav__aside, .gw-nav__phone, .gw-nav__wordmark { grid-column: 1; grid-row: auto; }
  .gw-nav__aside, .gw-nav__follow, .gw-nav__contact, .gw-nav__social-list { justify-items: start; text-align: left; }
  .gw-nav__aside { gap: var(--gw-space-4); }
  .gw-nav__list a { font-size: var(--gw-fluid-display-s); line-height: 1.15; }
  .gw-nav__wordmark { width: min(100%, 420px); justify-self: start; margin-top: var(--gw-space-2); }
}

/* ---- Lockup (Figma 44:467: seal + GRACEWATER AT SARASOTA, 338x186 at 790,79) ---- */
.gw-header__lockup { position: absolute; left: 50%; top: var(--gw-header-top); transform: translateX(-50%); width: clamp(96px, 17.6vw, 338px); color: var(--gw-cream-100); line-height: 0; pointer-events: auto; }
.gw-header__lockup svg { display: block; width: 100%; height: auto; }
.gw-header[data-gw-tone="dark"] .gw-header__lockup { color: var(--gw-green-700); }
.gw-header__lockup:focus-visible { outline: 2px solid var(--gw-citron-400); outline-offset: 6px; border-radius: 4px; }
/* The homepage hero owns the fade. The scrolled selector is a safe fallback if its
   controller cannot start (for example, script failure or reduced motion). */
.gw-header__lockup--home { opacity: 0; pointer-events: none; visibility: hidden; }
html.gw-hero-brand-active .gw-header__lockup--home { opacity: var(--gw-home-lockup-opacity, 0); visibility: visible; }
html.gw-hero-brand-complete .gw-header__lockup--home,
html.gw-scrolled:not(.gw-hero-brand-active):not(.gw-hero-brand-complete) .gw-header__lockup--home { opacity: 1; pointer-events: auto; visibility: visible; }
/* Compact after the page has scrolled (html.gw-scrolled, gw-header.js): half size, centred on the pill row.
   Pill row: top --gw-header-top, height --gw-header-pill (both compact once scrolled); lockup aspect 186/338 = 0.55. */
.gw-header__lockup { transition: width var(--gw-dur-slow) var(--gw-ease), top var(--gw-dur-slow) var(--gw-ease); }
/* Condensed: one SVG all the way through. The icon path (G + palm) fades out while the lockup shrinks and slides up,
   so the wordmark (rows y120-186 of the 338x186 art) glides into the pill row: 0.355 = 120/338 is the icon band
   above the wordmark, 0.0976 = half the wordmark's height, both as fractions of the width. */
.gw-lockup__icon { transition: opacity var(--gw-dur-slow) var(--gw-ease); }
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-lockup__icon { opacity: 0; }
html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header__lockup { width: clamp(120px, 11.1vw, 200px); top: calc(var(--gw-header-top) + var(--gw-header-pill) / 2 - clamp(120px, 11.1vw, 200px) * 0.4526); }
@media (prefers-reduced-motion: reduce) { .gw-header__lockup, .gw-lockup__icon { transition: none; } }
/* Phones: the pills leave no room between them, so the lockup sits under the pill row */
@media (max-width: 599px) { .gw-header__lockup { top: calc(var(--gw-header-top) + var(--gw-header-pill) + 12px); width: 110px; } html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header .gw-nav-pill { padding-inline: 16px; } html.gw-scrolled:is(:not(.gw-hero-brand-active), .gw-hero-brand-complete) .gw-header__lockup { width: 84px; top: calc(var(--gw-header-top) + var(--gw-header-pill) / 2 - 84px * 0.4526); } }

/* ==========================================================================
   Overlay, desktop: the Website Figma file's Menu frame (472:2201, 1920x1205).
   One unit = 1/1920 of the comp width, capped by the viewport height so the
   whole 1205-tall composition always fits without scrolling (a 1920x1080
   window renders it at 89.6%, a 1350x816 one at 67.7%).
   Comp (x, y at 1920): pills y79 h70 · rule y220 · HOME 35/48 at (111, 321) ·
   links 74.7/84 at (110, 399) · FOLLOW + socials 22/32 right edge 1791 from y321 ·
   address 35/32 right edge 1791 from y586 · GALLERY + phone 35/48 at (111, 1029) ·
   GRACE/WATER outlines 636x322 at (1217, 793). The comp sets the five links in
   Oranienbaum (serif, not licensed / not in the DS); they stay Rund ExtraBold.
   ========================================================================== */
@media (min-width: 1000px) {
  .gw-nav { --gw-nav-u: min(0.052083vw, 0.082988vh); }
  .gw-nav__panel { padding: calc(79 * var(--gw-nav-u)) calc(67 * var(--gw-nav-u)) calc(34 * var(--gw-nav-u)) calc(72 * var(--gw-nav-u)); overflow-y: auto; }
  .gw-nav__rule { margin: calc(71 * var(--gw-nav-u)) calc(-67 * var(--gw-nav-u)) 0 calc(-72 * var(--gw-nav-u)); height: calc(4 * var(--gw-nav-u)); }
  /* One row, two columns: phone and wordmark share their column's cell and sit at its bottom
     (the comp's wordmark top, y793, is above the links' bottom, y819, so they cannot stack). */
  .gw-nav__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: minmax(0, 1fr);
    column-gap: calc(48 * var(--gw-nav-u)); row-gap: 0;
    padding: calc(97 * var(--gw-nav-u)) 0 0 calc(38 * var(--gw-nav-u));
  }
  .gw-nav__menu { grid-column: 1; grid-row: 1; align-self: start; }
  .gw-nav__phone { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; }
  .gw-nav__aside { grid-column: 2; grid-row: 1; align-self: start; }
  .gw-nav__wordmark { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; }
  .gw-nav p { padding: 0; } /* Salient pads every p */
  .gw-nav__menu { gap: calc(30 * var(--gw-nav-u)); }
  .gw-nav__small { font-size: calc(35 * var(--gw-nav-u)); line-height: calc(48 / 35); }
  .gw-nav__list a { font-size: calc(74.7 * var(--gw-nav-u)); line-height: calc(84 / 74.7); }
  .gw-nav__aside { gap: calc(35 * var(--gw-nav-u)); padding-right: calc(62 * var(--gw-nav-u)); } /* text column right edge at x1791 */
  .gw-nav__follow { gap: 0; }
  .gw-nav__follow .gw-nav__small { font-size: calc(22 * var(--gw-nav-u)); line-height: calc(32 / 22); margin-bottom: calc(32 * var(--gw-nav-u)); } /* the comp's blank line */
  .gw-nav__social-list { gap: 0; }
  .gw-nav__social-list a { font-size: calc(22 * var(--gw-nav-u)); line-height: calc(32 / 22); }
  .gw-nav__address { gap: 0; }
  .gw-nav__address .gw-nav__small, .gw-nav__address-text { font-size: calc(35 * var(--gw-nav-u)); line-height: 1.1; font-weight: 400; } /* Danny 2026-10-15: phone + address Regular */
  .gw-nav__phone { gap: 0; padding-bottom: 0; margin-bottom: calc(47 * var(--gw-nav-u)); } /* Danny 2026-10-15: last address baseline on the wordmark's bottom edge (wordmark margin 56 minus the line's ~9 below the baseline) */
  .gw-nav__phone-link { font-size: calc(35 * var(--gw-nav-u)); line-height: calc(48 / 35); font-family: var(--gw-font-body); font-weight: 400; } /* Rund Display has no Regular (SemiBold is the lightest licensed), so the lighter phone uses the body face, like the address under it */
  .gw-nav__wordmark { width: calc(636 * var(--gw-nav-u)); gap: calc(32 * var(--gw-nav-u)); margin-bottom: calc(56 * var(--gw-nav-u)); }
}