/* ===========================================================================
   homepage.css — Pomona homepage redesign (NewHome.ascx)
   Scoped under .newhome / .nh-* so it won't collide with hw-custom.css.

   Responsive strategy (keeps the CSS short):
   - Tile rows use auto-fit grids, so they reflow 4->2->1 etc. on their own,
     with no per-device breakpoints to maintain.
   - Headings use clamp() to scale fluidly between mobile and desktop.
   - Photos use object-fit:cover so any image the marketer picks fits its frame.
   - Only one real breakpoint (767px) for the overlapping circles + photo bands.

   COLORS confirmed against the PSD + main.css/hw-custom.css (site source of truth);
   the variables below now hold the real brand values, not eyedropped guesses.
   FONTS reuse the site's existing display classes (inset = caps, northport =
   script). If those don't carry the look here, set font-family in .nh-head-*.
=========================================================================== */

.newhome {
  /* Palette confirmed against the PSD + main.css/hw-custom.css (site source of truth).
     Old eyedropped guesses replaced with the real brand values. */
  --nh-teal: #1cbfde;          /* script accents — was #33a6b8 (not a brand color); = site turquoise */
  --nh-teal-bright: #1cbfde;   /* was #29b5cb; footer/bright turquoise */
  --nh-blue: #326f94;          /* lead/caps headings + award captions (already correct) */
  --nh-olive: #909b3f;         /* CTA buttons — was #9ea63f; = site --pomona-green */
  --nh-text: #252525;          /* body copy — was #4f4f4f; = site body color */
  --nh-maxw: 1200px;
}

/* keep the required-but-unused DNN ContentPane from adding stray space */
.newhome .contentPane:empty { display: none; }

/* ---------- section shell ---------- */
.nh-section {
  position: relative;
  max-width: var(--nh-maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 20px;
  text-align: center;
  color: var(--nh-text);
}
/* keep real content above the decorative leaves */
.nh-section > *:not(.decorative-leaves) { position: relative; z-index: 1; }

/* The inline edit pencil (edit.gif) must never be sized by a section's broad
   "img" rule (the handoff gotcha) — that's prevented by scoping each section's
   photo rule to a specific wrapper / direct child (e.g. .nh-mosaic-item > img,
   .nh-builder-bg img). With no rule touching it, the pencil renders at its
   native size, identical across every section. Do NOT add a width here. */ /* match native edit.gif; KNOB if you want it bigger/smaller */

/* ---------- headline lockup (caps + script) ---------- */
.nh-head { margin: 0 0 1.1rem; line-height: 1.05; }
.nh-head-lead {            /* uses .inset for font; sizing here */
  display: block;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--nh-blue);   /* lead/caps headings = darker blue (script stays teal); applies to ALL sections */
  font-size: clamp(18px, 2.4vw, 26px);
}
.nh-head-script {          /* uses .northport for font; sizing here */
  display: block;
  color: var(--nh-teal);
  font-size: clamp(34px, 5vw, 56px);
}
.nh-sub {
  display: block;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nh-blue);   /* subline = darker blue (script headings stay teal) */
  font-size: 14px;
  margin-top: .4rem;
}
.nh-body {
  font-family: GothamBook, serif;   /* FONT FIX — match site body; was defaulting to Helvetica Neue (read "bolder than it should be") */
  max-width: 760px;
  margin: 0 auto 1.4rem;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
}
.nh-cta {                  /* SHARED olive button (was minimal) */
  margin-top: 1rem; display: inline-block;
  padding: 12px 34px; background: var(--nh-olive);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; transition: opacity .2s ease;
}
.nh-cta:hover { opacity: .88; }
/* Keep the label white in EVERY state — out-specifies any global a / a:hover color */
.newhome .nh-cta,
.newhome .nh-cta:link,
.newhome .nh-cta:visited,
.newhome .nh-cta:hover,
.newhome .nh-cta:focus,
.newhome .nh-cta:active { color: #fff; }

/* ---------- confetti divider (CSS only — random-width color blocks) ---------- */
.nh-confetti {
  position: absolute; left: 0; right: 0; bottom: 0;  /* masthead/content divider; raise this to tuck it under the band */
  height: 28px; z-index: 2;  /* height matched to the PSD comp strip (was 14px); KNOB */
  /* Random widths come from ONE linear-gradient with irregular HARD stops:
     "color A% B%" paints a solid block from A% to B%. Block WIDTHS, SEQUENCE,
     and the thin WHITE SEPARATOR GAPS were sampled pixel-by-pixel off the
     Desktop.jpg design comp and snapped to the real brand palette (blue #326f94,
     turquoise #1cbfde, olive #97a64a, green #909b3f, bright green #73bd42,
     tan #b9b09b, yellow #ecaa20, brown #6b3f24). This mirrors the comp exactly —
     the ~0.8% #ffffff gaps between blocks are intentional, per the design. */
  background: linear-gradient(90deg,
    #b9b09b 0.0% 2.5%, #ffffff 2.5% 3.3%, #ecaa20 3.3% 5.5%, #ffffff 5.5% 6.5%,
    #b9b09b 6.5% 8.6%, #ffffff 8.6% 9.5%, #909b3f 9.5% 10.6%, #ffffff 10.6% 11.5%,
    #6b3f24 11.5% 16.4%, #ffffff 16.4% 17.3%, #909b3f 17.3% 21.8%, #ffffff 21.8% 22.7%,
    #6b3f24 22.7% 24.4%, #ffffff 24.4% 25.2%, #73bd42 25.2% 37.2%, #ffffff 37.2% 38.1%,
    #326f94 38.1% 39.7%, #ffffff 39.7% 40.5%, #1cbfde 40.5% 44.6%, #ffffff 44.6% 45.5%,
    #326f94 45.5% 52.0%, #ffffff 52.0% 52.8%, #1cbfde 52.8% 65.2%, #ffffff 65.2% 66.0%,
    #ecaa20 66.0% 68.5%, #ffffff 68.5% 69.3%, #909b3f 69.3% 72.2%, #ffffff 72.2% 73.1%,
    #ecaa20 73.1% 85.8%, #ffffff 85.8% 86.7%, #73bd42 86.7% 92.9%, #ffffff 92.9% 93.7%,
    #6b3f24 93.7% 95.2%, #ffffff 95.2% 96.1%, #73bd42 96.1% 96.8%, #ffffff 96.8% 97.6%,
    #ecaa20 97.6% 99.3%, #ffffff 99.3% 100.0%);
}

/* ---------- decorative leaves ---------- */
.decorative-leaves {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.decorative-leaves .leaf { position: absolute; opacity: .65; height: auto; max-width: 400px; }
.leaf-intro-left      { top: 4%;   left: 20px;  max-width: 320px; }                          /* banana leaf: moved ~40px inward off the edge; KNOBS */
.leaf-intro-right     { top: 50%;  right: 30px; max-width: 340px; transform: scaleX(-1); }   /* monstera: moved ~40px inward AND flipped to face the other way; KNOBS */
.leaf-location-left   { top: 33%;  left:  10px; transform: rotate(180deg) scaleX(-1); }
.leaf-builders-right  { top: 50%;  right: 0; max-width: 360px; transform: scaleX(-1); }         /* monstera, lower-right, flipped horizontally; KNOBS: top/right/max-width */
.leaf-lifestyle-left  { top: auto; bottom: -90px; left: -315px; }                                /* bottom-left corner, hangs past the section into Amenities; inherits base max-width 400px; KNOBS: bottom/left (+ add rotate() to angle it) */
.nh-lifestyle .decorative-leaves { overflow: visible; }                                          /* let the leaf hang past the section bottom (the base rule clips) */

/* ---------- circular insets ---------- */
.nh-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 2;
}
.nh-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Intro photos live inside grid cells: STATIC (not absolute). Size scales with
   the viewport via clamp so there's no hard jump desktop->laptop. Phone overrides
   to a fixed size in the 767 block. */
.nh-circle--intro-left,
.nh-circle--intro-right {
  position: static;
  width:  clamp(200px, 22vw, 280px);   /* KNOB: photo size range */
  height: clamp(200px, 22vw, 280px);
}

/* ---------- intro: two-column rows — DESKTOP / TABLET (the approved layout) ----
   Row 1 = photo | text ; Row 2 (reverse) = text | photo. Text gets the wider
   column in BOTH rows (the ratios flip per row). This is UNTOUCHED from the
   version you signed off on. On PHONES (<=767) these two rows are flattened with
   display:contents and reordered — see the 767 block — without changing anything
   here, so desktop/tablet stay exactly as-is. */
.nh-intro-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;  /* photo | text : text wider */
  align-items: center;
  gap: 16px;                           /* KNOB */
  max-width: 1040px;                   /* KNOB */
  margin: 0 auto 16px;
}
.nh-intro-row--reverse {
  grid-template-columns: 1.2fr 0.8fr;  /* text | photo : text still wider */
}
.nh-intro-col--text  { text-align: left; }
.nh-intro-col--media { display: flex; }
.nh-intro-row .nh-intro-col--media          { justify-content: flex-end; }   /* family hugs its text */
.nh-intro-row--reverse .nh-intro-col--media { justify-content: flex-start; } /* kayak hugs its text  */
.nh-circle--location     { width: 300px; height: 300px; right: max(16px, calc(45% - (var(--nh-maxw) / 2) + 20px)); bottom: -50px; } /* desktop 300px; KNOBS: +20px inset, -50px hang */
/* Builders circle = mirror of Location: anchored to the content's LEFT edge
   (swap Location's right: for left:), hanging -50px past the band bottom. KNOBS:
   the +20px inset and the -50px hang. */
.nh-circle--builders     { width: 300px; height: 300px; left: max(16px, calc(50% - (var(--nh-maxw) / 2) + 20px)); bottom: -50px; }
/* Amenities: TWO circles. Left sits at the content-left edge, hanging up off the
   band top; right sits at the content-right edge, hanging DOWN past the band into
   the heading (so its pane needs a higher z-index — see .nh-amenities rule).
   All offsets are KNOBS. */
.nh-circle--amenities-left  { width: 300px; height: 300px; left:  max(16px, calc(45% - (var(--nh-maxw) / 2) - 20px)); top: -50px; }
.nh-circle--amenities-right { width: 300px; height: 300px; right: max(16px, calc(45% - (var(--nh-maxw) / 2) - 20px)); bottom: -120px; }

/* ---------- generic auto-fit grid (responsive with no breakpoints) ---------- */
.nh-grid { display: grid; gap: 20px; margin-top: 1.5rem; }

/* Wall of Fame: 4 -> 2 -> 1 */
.nh-wof-grid  { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* 4 desktop -> 2 on phones; KNOB: lower min = more columns hold longer */
.nh-wof-img   { position: relative; aspect-ratio: 2 / 4; border-radius: 4px; overflow: hidden; } /* tall PORTRAIT frame; KNOB: aspect-ratio */
.nh-wof-img img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center; } /* default crop = center */
/* first award card crops toward the right side of its photo */
.nh-wof-card:first-child .nh-wof-img img { object-position: 75% 50%; } /* KNOB: first-card focus */
.nh-wof-seal  { position: absolute; top: 12px; left: 28%; transform: translateX(-50%); width: 150px; height: auto; } /* KNOBS: left % + width */
.nh-wof-seal img { width: 100%; height: auto; display: block; } /* the Image-type seal fills the 64px wrapper */
.nh-wof-cap   {
  font-family: "Campton", serif;   /* FONT FIX — award titles use the caps display font; were defaulting to Helvetica Neue */
  margin-top: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--nh-blue); font-size: 13px; line-height: 1.45;
} /* award info = darker blue */
.nh-wof-cap span { display: block; } /* stack title / subtitle / year */
.nh-wof-title { display: block; font-weight: 700; }


/* KNOB — 4th Wall of Fame seal sits a touch large in the comp; bring it down */
.nh-wof-card:nth-child(4) .nh-wof-seal img {
  width: 90%;    /* KNOB — dial down until it matches the other three seals */
  height: auto;  /* preserves the seal's aspect ratio */
}
.nh-wof-card:nth-child(4) .nh-wof-seal{
  top: 18px!important; 
}

/* Builders: 3 -> 1 (auto-fit). Each grid item is a .nh-builder-cell wrapper so
   the edit pencil can sit OUTSIDE the tile anchor (no nested <a>). */
.nh-builder-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* tiles/backgrounds at least 300px wide; 3-up -> 1-up as the row narrows */
.nh-builder-cell { position: relative; }
.nh-builder-tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 170px; padding: 18px; color: #fff; text-align: center;
  overflow: hidden; text-decoration: none;            /* KNOB: min-height = tile height */
}
/* model photo fills the tile (Image field emits the <img>; scoped wrapper sizing
   so we never need a broad ".nh-builders img" rule that would blow up the pencil) */
.nh-builder-bg { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; } /* overflow:hidden clips a full-size source photo to the tile box */
.nh-builder-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* David Weekley (2nd builder tile) — crop anchor tuned per breakpoint (testing).
   The 3 tiers below cascade by source order: base applies >=768px; the 767 rule
   applies 576-767px; the 575 rule (last, so it wins) applies <=575px. */
.nh-builder-cell:nth-child(2) .nh-builder-bg img { object-position: 50% -3%; }   /* >= 768px */
@media (max-width: 767px) { .nh-builder-cell:nth-child(2) .nh-builder-bg img { object-position: 50% 25%; } }   /* 576-767px */
@media (max-width: 575px) { .nh-builder-cell:nth-child(2) .nh-builder-bg img { object-position: 50% -25%; } }  /* <= 575px */
/* dark scrim so the white logo/price stay legible over any photo */
.nh-builder-tile::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.40); z-index: 1; } /* KNOB: scrim opacity */
.nh-builder-logo, .nh-builder-price { position: relative; z-index: 2; }
.nh-builder-logo img { max-height: 64px; width: auto; display: block; margin: 0 auto 10px; } /* KNOB: logo height */
.nh-builder-price { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 600; }
/* keep the label white in EVERY state when the tile is a link (out-specifies the
   global a / a:hover color, same trick as .nh-cta) */
.newhome a.nh-builder-tile,
.newhome a.nh-builder-tile:link,
.newhome a.nh-builder-tile:visited,
.newhome a.nh-builder-tile:hover,
.newhome a.nh-builder-tile:focus,
.newhome a.nh-builder-tile:active { color: #fff; text-decoration: none; }
.newhome a.nh-builder-tile:hover::before { background: rgba(0,0,0,.25); } /* gentle lighten on hover for linked tiles */

/* Location POIs: 5 -> 3 -> 2 (uses .nh-grid base for display:grid) */
.nh-poi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.nh-poi { text-align: center; }
.nh-poi-icon { margin-bottom: 8px; }
.nh-poi-icon img { height: 48px; width: auto; display: block; margin: 0 auto; } /* designer line-icon (Image field emits the <img>) */
.nh-poi-name { font-family: GothamBook, serif; display: block; color: var(--nh-blue); font-weight: 600; font-size: 14px; line-height: 1.2; } /* FONT FIX — name = blue (per comp), was defaulting to Helvetica Neue */
.nh-poi-miles { font-family: GothamBook, serif; display: block; color: var(--nh-text); font-size: 13px; margin-top: 2px; }                   /* FONT FIX — mileage = gray (per comp) */

/* ---------- two-photo bands (builders) ---------- */
.nh-band { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.nh-band img { width: 100%; height: 360px; object-fit: cover; display: block; }

/* ---------- location: single banner (Photoshop composite), desktop/mobile swap ----------
   The sunset->skyline curve is baked into each image, so CSS just shows the right
   one per breakpoint and never crops (height:auto preserves the composition). */
.nh-location-band,
.nh-builders-band,
.nh-amenities-band {           /* FULL-BLEED: break out of the 1200px .nh-section to full viewport width */
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: visible;          /* must NOT clip the hanging circle */
}
.nh-band-desktop img,
.nh-band-mobile img { width: 100%; height: auto; display: block; }  /* banners only — NOT the edit pencil or circle inside .nh-location-band */
.nh-band-mobile { display: none; }   /* desktop banner shows by default */

/* Location heading is ONE line: lead + script + tail inline (the global
   .nh-head-lead/.nh-head-script are display:block for stacked sections like
   intro). The spaces between the spans in the XSL supply the word spacing. */
.nh-location .nh-head { line-height: 1.12; margin-top: 50px; }   /* gap below the band */
.nh-location .nh-head-lead,
.nh-location .nh-head-script { display: inline; vertical-align: baseline; }
.nh-location .nh-body { text-align: left; }   /* left-justify the intro copy */
.nh-location .nh-sub  { font-size: 18px; }      /* bigger "Snapshot of Nearby Favorites"; KNOB */
.home .nh-location-head .inset {  padding-left: 10px; }

/* Builders heading: STACKED (lead over script) — no inline override, unlike
   Location. Just add room below the band so the hanging circle clears the
   heading. KNOB: margin-top. */
.nh-builders .nh-head { margin-top: 60px; }
.nh-builders .nh-body { text-align: left; }   /* left-justify the intro copy (matches Location) */
.nh-lifestyle .nh-body { text-align: left; }  /* left-justify the intro copy */

/* Amenities heading: stacked, with room below the band for the circles that
   hang past it. Body left-justified like the others. */
.nh-amenities .nh-head { margin-top: 80px; }   /* clear the hanging circles; KNOB */
.nh-amenities .nh-body { text-align: left; }
/* the band pane holds the right circle, which hangs DOWN into the heading pane —
   raise the band pane so that circle paints ON TOP of the heading. */
.nh-amenities > .nh-pane:first-child { z-index: 3; }

/* ---------- lifestyle mosaic (FIXED editorial collage) ----------
   The layout matches the comp by POSITION: the XSL sorts rows by SortOrder, so
   :nth-child(n) == SortOrder n. Each of the 9 slots gets an explicit
   grid-column / grid-row below — ALL KNOBS (nudge spans/widths to taste).
   Photos use object-fit:cover and read an optional per-image object-position
   from the Focus column via the --mosaic-pos custom property (keywords OR
   precise percentages like "50% 34%"). */
.nh-mosaic {
  display: grid;
  grid-template-columns: 3fr 4fr 2fr 3fr;   /* col A | B | C | D — approximate the comp widths; KNOBS */
  grid-auto-rows: 65px;                      /* base row unit; the spans below multiply this; KNOB */
  gap: 10px;
  margin-top: 1.5rem;
}
.nh-mosaic-item { position: relative; overflow: hidden; border-radius: 3px; }
.nh-mosaic-item > img {
  width: 100%; height: 100%; object-fit: cover; display: block;  /* DIRECT-child img = the photo only, never the edit pencil */
  object-position: var(--mosaic-pos, 50% 50%);                   /* Focus column overrides this per image, e.g. "50% 34%" */
}
/* fixed slots — :nth-child(n) == SortOrder n. grid-column / grid-row are ALL KNOBS.
   All columns end flush at row line 18: left col (2/5/7 each span 4) = lion(6)+foam(6)
   = (4+6, span 3 each)+folklorico(6). */
.nh-mosaic-item:nth-child(1) { grid-column: 1 / 5; grid-row: 1  / span 5; } /* 1  top, full width */
.nh-mosaic-item:nth-child(2) { grid-column: 1 / 2; grid-row: 6  / span 4; } /* 2  left, upper (taller than right pair) */
.nh-mosaic-item:nth-child(3) { grid-column: 2 / 4; grid-row: 6  / span 6; } /* 3  big middle (= height of slots 4+6) */
.nh-mosaic-item:nth-child(4) { grid-column: 4 / 5; grid-row: 6  / span 3; } /* 4  right, upper */
.nh-mosaic-item:nth-child(5) { grid-column: 1 / 2; grid-row: 10 / span 4; } /* 5  left, middle */
.nh-mosaic-item:nth-child(6) { grid-column: 4 / 5; grid-row: 9  / span 3; } /* 6  right, lower */
.nh-mosaic-item:nth-child(7) { grid-column: 1 / 2; grid-row: 14 / span 4; } /* 7  left, bottom (flush w/ 8 & 9) */
.nh-mosaic-item:nth-child(8) { grid-column: 2 / 3; grid-row: 12 / span 6; } /* 8  bottom center (flush bottom) */
.nh-mosaic-item:nth-child(9) { grid-column: 3 / 5; grid-row: 12 / span 6; } /* 9  bottom right (flush bottom) */

/* ---------- hero / masthead ---------- */
/* Let the site's existing .top styles size the hero and handle the overlay
   with the global nav, exactly as the live homepage does. We only add the
   new banner/badge positioning below — no height/overflow/position overrides. */
.nh-hero { position: relative; }
/* Inline edit pencil — only renders when logged in with edit rights (DNN leaves
   udt:EditLink empty for the public, so this never shows to visitors). Pinned
   below the header so it's reachable even though the hero content is absolutely
   positioned. Clicking it opens that record's edit form directly. */
.nh-hero .nh-hero-edit { position: absolute; top: 120px; left: 20px; z-index: 50; }
.nh-hero .nh-hero-edit img { width: 26px; height: auto; cursor: pointer; }
/* Soft fade at the foot of the hero — the same treatment as the live homepage,
   which uses ".home .top .gradient { background:url(.../home/gradient.png) }".
   Re-created here as a pseudo-element so it doesn't depend on the live site's
   GSAP-hidden .gradient div. The path is relative to this file in /css/, so
   "../assets/..." resolves to the skin's assets folder, same as main.css. It
   sits above the video (z-index 1) but below the headline/row, and never
   intercepts clicks. */
.nh-hero::after {
  content: ""; position: absolute; left: 0; bottom: -30px;
  width: 100%; height: 300px; z-index: 1; pointer-events: none;
  background: url("../assets/images/home/gradient.png") repeat-x;
}
/* Empty-state floor: keep the hero tall enough that the transparent global nav
   always overlays it, even before the heroPane video has been entered. Once the
   Forms & List video renders, the videobg box drives the real height and this
   floor no longer applies (the pane is no longer :empty). Nothing is hardcoded. */
.nh-hero-pane:empty { display: block; min-height: 80vh; }

/* ---------- background video: COVER the masthead at any aspect ratio ----------
   The native videobg wrappers lock the iframe to a 16:9 box (videobg-aspect's
   padding-bottom:56.25%) and center it with top/bottom:-9999px, which letterboxes
   on portrait and leaves a black void above the video on mobile.

   The native rules are ".home .top .videobg-aspect" (3 classes). To beat them we
   MUST match or exceed that specificity, so every selector here is written as
   ".home .top.nh-hero ..." (4 classes). A 2-class ".nh-hero ..." selector LOSES
   and the override silently does nothing — that was the original bug.

   The masthead is height:100vh / width:100%, so vw/vh map to the container. */
.home .top.nh-hero .videobg { background: transparent; }
.home .top.nh-hero .videobg-width,
.home .top.nh-hero .videobg-aspect,
.home .top.nh-hero .videobg-make-height,
.home .top.nh-hero .videobg-hide-controls {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; margin: 0; padding: 0; transform: none;
}
.home .top.nh-hero .intro-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw;  height: 56.25vw;          /* 16:9 derived from width  */
  min-width: 177.78vh; min-height: 100vh;  /* 16:9 derived from height -> covers portrait */
  border: 0;
}

.nh-hero-banner { /* the title BAND */
  position: absolute; left: 0; right: 0; bottom: 325px; /* TUNABLE per breakpoint below */
  margin: 0; padding: 0 50px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; /* centers H+V; wraps to stack the title on narrow screens */
  min-height: 95px;        /* TUNABLE band thickness; min- so it grows when the title wraps */
  z-index: 2; line-height: 1;
  /* Transparent teal (left) blending to OPAQUE olive (right). The alpha on the
     teal stops lets the video show through; the olive end has no alpha, so it's
     solid. Colors are the real palette: turquoise #1cbfde (28,191,222) ->
     green #909b3f (144,155,63). Tune stop positions / alpha to match the comp. */
  background: linear-gradient(90deg,
    rgba(28,191,222,0.5)  0%,
    rgba(28,191,222,0.5) 40%,
    rgba(144,155,63,0.9) 66%,
    #909b3f 100%);
}
.nh-hero-lead   { /* "A DECADE OF" — Campton, uppercase */
  display: inline; font-family: "Campton", sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em; color: #fff;
  font-size: clamp(20px, 2.4vw, 30px); vertical-align: baseline; }
.nh-hero-script { /* "Excellence" — Thirsty Script (Adobe Typekit) */
  display: inline; font-family: "thirsty-script", sans-serif; color: #fff;
  text-transform: none; line-height: 1;
  font-size: clamp(38px, 7.6vw, 76px); vertical-align: baseline; }

/* transparent circular award/promo badges, bottom-left (editable list) */
.nh-hero-badges { position: absolute; left: 24px; bottom: 24px; z-index: 3;
  display: flex; gap: 14px; align-items: flex-end; }
.nh-hero-badge  { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.nh-hero-badge img { width: 100%; height: 100%; object-fit: contain; display: block; } /* contain preserves transparent badge art */

/* Foreground layering. The headline is absolute so it paints above the video.
   The scroll prompt + button row was in normal flow, so the absolutely-positioned
   video painted OVER it — invisible to signed-out visitors (it only appeared to
   "show" in edit mode because the paused video was transparent to what's beneath).
   Pin that row to the bottom and lift it above the video, same as the headline. */
.nh-hero-banner { z-index: 2; }
/* Intro gate (marketing wants the Skip Intro flow). The scroll prompt + button
   stay hidden while the intro video plays; the toggle script in the skin adds
   .intro-done when Skip Intro is clicked (and as a timed fallback), revealing
   them above the video. Appearance still comes from the skin's own CSS; we only
   set placement + the show/hide. */
.nh-hero .bottom-container,
.nh-hero .nh-confetti,
.nh-hero .nh-hero-banner {
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
/* Raise the Homes button to sit on the SAME level as the scroll prompt, while
   leaving "Scroll to Learn More" exactly where the native skin puts it
   (absolute, centered, bottom:55px). So we DON'T touch .bottom-container or
   .scroll-down-container — only re-anchor the button: pin it right at the same
   bottom:55px and cancel the native top:30px nudge so the two line up.
   ".top.nh-hero" (4-class) out-specifies the native rules. Nudge bottom:55px to
   fine-tune the button's height, right:50px for its horizontal position. */
.home .top.nh-hero .bottom-container .bottom-right {
  position: absolute; right: 50px; bottom: 55px; top: auto; float: none;
}
.home .top.nh-hero .bottom-container .bottom-right a:not(.hoa-badge) {
  top: 0; /* cancel native top:30px so it sits level with the scroll prompt */
  display: inline-block;   /* single clean box for the native border */
  white-space: nowrap;     /* keep the label on one line */
}
.nh-hero.intro-done .bottom-container,
.nh-hero.intro-done .nh-confetti,
.nh-hero.intro-done .nh-hero-banner { opacity: 1; visibility: visible; }


/* Skip Intro button — visible during the intro, removed once skipped. The native
   skin ships ".home .top .skip-video { opacity:0; visibility:hidden }" (the live
   site fades it in via GSAP, which we don't run), so we must force it visible.
   The extra ".top.nh-hero" qualifier out-specifies the native rule. Placed
   bottom-right to sit roughly where the Homes button appears after the reveal;
   nudge right/bottom to line it up exactly. */
.home .top.nh-hero .skip-video {
  position: absolute; right: 24px; bottom: 28px; z-index: 6;
  opacity: 1; visibility: visible;
}
.nh-hero.intro-done .skip-video { display: none; }

/* ---- Tablet / small laptop: ride the band down for the shorter masthead.
   These per-breakpoint bottom/min-height values are knobs — check against the
   real device masthead height and the Mobile.jpg comp and nudge. ---- */
@media (max-width: 991px) {
  /* Banner: keep its tablet position AND crush the line gap. Scoped under the
     hero so the selector (4 classes) out-specifies native ".home h1"
     (element+class) — otherwise that native rule wins and the gap reopens.
     Same 0.2 the phone uses, so the overlap with the phone block is harmless. */
  .home .top.nh-hero .nh-hero-banner {
    bottom: 240px; min-height: 78px; line-height: 0.2;
  }
}

/* ---- Tablet ONLY (768–991px): center the Homes button on the page and nudge
   it up. Bounded with min-width:768 so the top:-70px nudge does NOT reach phones,
   where the button is pinned separately at bottom:120px in the phone block. ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .home .top.nh-hero .bottom-container .bottom-right {
    left: 0; right: 0; bottom: 55px; text-align: center; /* full-width box, centered content */
  }
  .home .top.nh-hero .bottom-container .bottom-right a:not(.hoa-badge) {
    top: -70px;              /* nudge up from the scroll-prompt line */
    display: inline-block;
    white-space: nowrap;
  }
}

/* ===========================================================================
   Phone: stack bands to one column, inline the circle overlaps, shrink leaves,
   and pull the hero band down onto the short mobile masthead.
=========================================================================== */
@media (max-width: 767px) {
  .nh-band { grid-template-columns: 1fr; }
  .nh-band img { height: 240px; }

  /* circles stop overlapping and sit inline, centered (location/builders) */
  .nh-circle {
    position: static;
    width: 150px; height: 150px;
    margin: 14px auto;
  }

  /* Location — mobile */
  .nh-location .nh-band-desktop { display: none; }
  .nh-location .nh-band-mobile  { display: block; }

  /* Clip ONLY the left bleed at the screen edge, NOT the bottom. overflow-x on
     the section (full-width on mobile) trims the horizontal overhang while the
     circle still hangs PAST the band bottom like the design. */
  .nh-location { overflow-x: hidden; }

  /* circle: bigger, overlapping the band, hanging past its bottom, bleeding off LEFT */
  .nh-circle--location {
    position: absolute; right: auto; margin: 0;
    width: 250px; height: 250px;   /* KNOB: mobile circle size */
    left: -70px;                   /* KNOB: how far it bleeds off-screen left */
    bottom: -110px;                /* dropped from -50px so the circle clears the "Pomona" word in the band; KNOB */
  }

  /* extra room below the band on mobile so the lower-hanging circle + heading
     don't crowd the "Pomona" word (desktop stays 50px); KNOB */
  .nh-location .nh-head { line-height: 1.12; margin-top: 100px; }

  /* center the lone last POI (Manvel) when it's alone on the last 2-up row */
  .nh-poi:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* location fern leaf — mobile placement (KNOBS: bottom/left + the transform angle) */
  .decorative-leaves .leaf-location-left {
    top: auto; bottom: 17%; left: 176px;
    transform: rotate(240deg) scaleX(-1);
  }

  /* more breathing room above the CTA */
  .nh-location-cta { margin-top: 30px; }

  /* Builders — mobile (MIRROR of Location: circle bleeds off the RIGHT, not the
     left). Same baked-curve composite swap + single-axis clip. */
  .nh-builders .nh-band-desktop { display: none; }
  .nh-builders .nh-band-mobile  { display: block; }
  .nh-builders { overflow-x: hidden; }   /* clip ONLY the right bleed; circle still hangs past the band bottom */
  .nh-circle--builders {
    position: absolute; left: auto; margin: 0;
    width: 250px; height: 250px;   /* KNOB: mobile circle size */
    right: -70px;                  /* KNOB: how far it bleeds off-screen RIGHT */
    bottom: -50px;                 /* hangs past the band bottom; KNOB */
  }
  .nh-builders .nh-head { margin-top: 40px; } /* tighten the band->heading gap on phones; KNOB */
  .nh-builders-cta { margin-top: 30px; }

  /* Amenities — mobile: swap to the portrait banner, clip side bleed, shrink the
     two circles (left up-top bleeding left, right hanging bottom-right). KNOBS. */
  .nh-amenities .nh-band-desktop { display: none; }
  .nh-amenities .nh-band-mobile  { display: block; }
  .nh-amenities { overflow-x: hidden; }
  .nh-circle--amenities-left,
  .nh-circle--amenities-right { display: none; }   /* circles are desktop-only */
  .nh-amenities .nh-head { margin-top: 40px; } /* no hanging circles on phones; KNOB */
  .nh-amenities-cta { margin-top: 30px; }

  /* builders monstera leaf — mobile placement (KNOBS: top/right; flip kept). No
     max-width here so it inherits the 300px generic mobile leaf size. */
  .decorative-leaves .leaf-builders-right {
    top: 81%; right: 143px;
    transform: scaleX(-1);
  }

  /* lifestyle mosaic — phones: drop the fixed desktop placement, stack 2-up
     (the hero stays full width). */
  .nh-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } /* KNOBS: mobile cols + cell height */
  .nh-lifestyle .nh-mosaic-item { grid-column: auto; grid-row: auto; }          /* clear the desktop nth-child placement */
  .nh-lifestyle .nh-mosaic-item:nth-child(1) { grid-column: 1 / -1; }           /* keep the lead photo full width */

  /* tighten the gap above the family photo so it sits FLUSH under the color bar */
  .nh-intro { padding-top: 0; overflow: hidden; } /* padding-top:0 = photo flush under color bar; overflow:hidden snips the kayak bleed at the edge (no page-widening scrollbar) */

  /* Michelle: shrink the empty gap between Intro and Wall of Fame on mobile.
     The gap = intro's padding-bottom + WoF's padding-top (~40px each from the
     clamp). Halved here to ~20px each; KNOBS — lower further if still too big. */
  .nh-intro { padding-bottom: 20px; }
  .nh-wof   { padding-top: 20px; }

  /* FAMILY photo = HALF-circle hanging from the color bar: FLAT TOP (against the
     bar), domed BOTTOM. Width is responsive so it scales down on smaller phones;
     height is always half the width to keep true semicircle proportions. The big
     bottom radius auto-domes at any size. */
  .nh-circle--intro-left {
    width:  clamp(240px, 90vw, 350px);    /* KNOB: 240px on tiny phones up to 350px on wider ones */
    height: clamp(120px, 45vw, 175px);    /* always ½ of the width above */
    border-radius: 0 0 999px 999px;       /* flat top, domed bottom (size-independent) */
    margin: 0 auto;
  }
  .nh-circle--intro-left img { object-position: center 20%; } /* KNOB: shift to keep the people in frame */

  /* KAYAK photo stays a full circle, prominent */
  .nh-circle--intro-right { width: 300px; height: 300px; margin: 0 auto; margin-right: -165px; margin-top: 50px; margin-bottom: 50px; } /* original left/right position UNCHANGED (-165px right bleed per the design); only 50px added above + below */

  /* --- MOBILE REORDER (desktop/tablet untouched) ---
     Flatten the two rows with display:contents so the heading, both photos and
     both copy blocks become direct flex items of .nh-intro-inner, then ORDER
     them to match the comp: family photo, HEADING, top copy, kayak photo,
     bottom copy. The row/col selectors still work because display:contents
     keeps the elements (only their boxes are removed). */
  .nh-intro-inner { display: flex; flex-direction: column; align-items: center; }
  .nh-intro-row,
  .nh-intro-row--reverse { display: contents; }
  .nh-intro-row .nh-intro-col--media          { order: 1; } /* family photo first */
  .nh-head                                     { order: 2; margin-top: 26px; } /* heading BELOW the family photo, with breathing room above it; KNOB: margin-top */
  .nh-intro-row .nh-intro-col--text            { order: 3; } /* top copy */
  .nh-intro-row--reverse .nh-intro-col--media  { order: 4; } /* kayak photo */
  .nh-intro-row--reverse .nh-intro-col--text   { order: 5; } /* bottom copy */
  /* center the copy and give it side breathing room off the screen edges */
  .nh-intro-col--text { text-align: center; padding: 0 18px; } /* KNOB: side padding */

  /* keep the INTRO leaves visible behind their photos on phone (the generic
     rule below fades all leaves to .3/120px — these two stay larger). The
     ".decorative-leaves" qualifier out-specifies that generic rule. Positions
     are KNOBS: nudge top so each leaf sits behind its photo. */
  .decorative-leaves .leaf { max-width: 300px; opacity: .65; }
  .leaf-lifestyle-left { max-width: 110px; }
  .decorative-leaves .leaf-intro-left  { max-width: 305px; opacity: .65; top: -8%; left: 79px; transform: rotate(-45deg); } /* tuned position; KNOBS: top/left + rotation */
  .decorative-leaves .leaf-intro-right { max-width: 220px; opacity: .65; top: 48%; right: 191px; }

  /* --- HERO BAND: tight lockup on mobile ---
     line-height:0.2 on the band crushes the gap between "A Decade of" and
     "Excellence" (this is the value you confirmed in DevTools). flex-direction
     column stacks the two lines; min-height:0 lets the band hug the text. */
  .nh-hero-banner {
    bottom: 130px;            /* TUNABLE: where the band sits on the short masthead */
    min-height: 0;
    padding: 10px 20px;
    gap: 2px;
    flex-direction: column;
    line-height: 0.2;
  }
  .nh-hero-lead   { font-size: 16px; letter-spacing: .16em; }
  .nh-hero-script { font-size: 42px; line-height: .85; }

  /* --- HOMES button on mobile ---
     Pulled up off the confetti bar to bottom:120px (the value you confirmed).
     left/right:0 makes the absolute box full-width so text-align:center
     actually centers the pill above the scroll prompt. */
  .home .top.nh-hero .bottom-container .bottom-right {
    position: absolute; left: 0; right: 0; bottom: 120px; top: auto;
    text-align: center;
  }
  .home .top.nh-hero .bottom-container .bottom-right a:not(.hoa-badge) {
    display: inline-block;
  }

  .nh-hero-badges { left: 12px; bottom: 12px; gap: 8px; }
  .nh-hero-badge  { width: 64px; height: 64px; }
}