/* ==========================================================================
   Our Story (page-our-story.php) — page-specific pieces only.

   The bands, section headers and buttons come from the component system
   (.section / .section--*, .sec-eyebrow / .sec-title / .sec-intro, .btn). This
   sheet adds what is unique to the page: the photo hero, the two-column splits,
   the credibility pull-quote, the awards badge row, the testimonial cards and the
   "where we've built" map. Tokens only — no raw values.
   ========================================================================== */

/* ---------- 1 · Hero — 60/40 split, type left, three-shot collage right ----------

   The header is SOLID on this page, so the hero opens on type rather than sitting
   under chrome on a photograph. Left column carries the whole argument; the right
   is a three-shot collage on a 6-column grid, two half-width above and a wider one
   offset beneath, which is what stops it reading as a plain gallery.

   The art column stays inside the container. An earlier pass bled it to the
   viewport edge; held in, the collage sits on the same measure as everything below
   it and the page keeps one left and one right edge the whole way down. */
.os-hero { padding-block: var(--hdc-space-9) var(--hdc-space-8); overflow: hidden; }
.os-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--hdc-space-7), 5vw, var(--hdc-space-9));
  align-items: center;
}
.os-hero__lead { min-width: 0; max-width: 30rem; }
.os-hero__title {
  font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular);
  /* One step down from the old full-bleed hero: on a photograph the title had a
     whole viewport to fill, here it shares the row with the artwork. */
  font-size: var(--hdc-fs-850); line-height: var(--hdc-lh-tight); letter-spacing: -0.01em;
  color: var(--hdc-color-heading); margin: var(--hdc-space-3) 0 0; max-width: 14ch;
}
/* The hero carries the story section's copy now, so this is a stack of paragraphs
   rather than one standfirst. First one runs larger — it is still the lead. */
.os-hero__intro { margin: var(--hdc-space-5) 0 0; max-width: 46ch; }
.os-hero__intro p {
  font-size: var(--hdc-fs-400); line-height: var(--hdc-lh-body); color: var(--hdc-color-text);
  margin: 0 0 var(--hdc-space-4);
}
.os-hero__intro p:first-child { font-size: var(--hdc-fs-500); color: var(--hdc-color-heading); }
.os-hero__intro p:last-child { margin-bottom: 0; }


/* 6 columns, so the bottom shot can span 5 and start at 2 — an offset that lines
   its right edge up with the two above while leaving a step on the left. */
.os-hero__art {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--hdc-space-4);
  min-width: 0;
}
.os-hero__shot { margin: 0; }
.os-hero__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--hdc-radius-md);
}
.os-hero__shot--a { grid-column: 1 / span 3; aspect-ratio: 4 / 3; }
.os-hero__shot--b { grid-column: 4 / span 3; aspect-ratio: 4 / 3; }
.os-hero__shot--c { grid-column: 2 / span 5; aspect-ratio: 16 / 9; }

/* ---------- Two-column split (story · independent · where-built) ---------- */
.os-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hdc-space-9); align-items: center; }
.os-split--top { align-items: start; }
.os-photo img { width: 100%; display: block; border-radius: var(--hdc-radius-md); box-shadow: var(--hdc-shadow-1); }
.os-body { margin: var(--hdc-space-6) 0 0; max-width: 52ch; }
.os-body p { margin: 0; }
.os-body p + p { margin-top: var(--hdc-space-4); }

/* ---------- Independent — pull-quote + awards row ---------- */
/* The president's quote, panelled. It is attributed speech sitting beside the
   page's own prose, so it needs to read as a different kind of thing; the tint
   ground and the drawn marks do that without a heavier border.
   ONE edge mechanism per the site rule: the tint against --white is the edge, so
   there is no border and no shadow. */
.os-quote {
  position: relative; margin: 0; isolation: isolate;
  background: var(--hdc-surface-tint); border-radius: var(--hdc-radius-md);
  padding: var(--hdc-space-8) var(--hdc-space-7) var(--hdc-space-7);
}
/* Set in the display face at a size the text would never use, tucked into opposite
   corners and dropped behind the content. They are ornament, so they are quiet
   enough to read as texture rather than punctuation competing with the real quotes
   in the sentence. */
.os-quote__mark {
  position: absolute; z-index: -1; pointer-events: none;
  font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular);
  font-size: clamp(5rem, 9vw, 8rem); line-height: 1;
  color: color-mix(in srgb, var(--hdc-color-primary) 16%, transparent);
}
/* ⚠️ INSIDE the panel, not hung off its corners. They used to sit at negative top
   and bottom offsets: .os-quote isolates, so z-index:-1 only drops them behind the
   panel's own background, and whatever overhung the rounded corners rendered
   outside it. Wide enough it passed as a flourish; at phone width the panel is
   narrower than the glyphs and it just looked broken. */
.os-quote__mark--open  { top: var(--hdc-space-2); left: var(--hdc-space-3); }
.os-quote__mark--close { bottom: 0; right: var(--hdc-space-4); }

.os-quote-big { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem); line-height: 1.32;
  color: var(--hdc-color-heading); margin: 0;
  /* GP italicises a bare <blockquote>, and Literata ships a true italic — see the
     .rev__quote note in theme.css for the same fix. */
  font-style: normal; border: 0; padding: 0; }
/* No rule above the attribution. The panel already separates the quote from the
   page, so a second divider inside it was an edge on top of an edge. */
.os-attrib { margin: var(--hdc-space-5) 0 0; font-size: var(--hdc-fs-300); color: var(--hdc-color-muted); }
.os-attrib b { color: var(--hdc-color-heading); font-weight: var(--hdc-fw-semi); }

/* No rule above the row either. It sits inside the right column now, under the
   prose it backs up, so the column already contains it — a divider was drawing a
   boundary the layout had made unnecessary. Spacing does the separating. */
.os-awards { display: flex; flex-wrap: wrap; gap: var(--hdc-space-5) var(--hdc-space-6); align-items: center;
  margin-top: var(--hdc-space-7); }
/* Sits left of the badges as a quiet label, not a caption under them — the row
   reads as "awarded by X: [seal] [seal]" on one line. Eyebrow vocabulary so it
   matches every other small label on the site. */
.os-awards__lab {
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi);
  letter-spacing: var(--hdc-tracking-eyebrow); text-transform: uppercase;
  color: var(--hdc-color-muted); white-space: nowrap;
}
.os-awards img { height: 50px; width: auto; display: block; }

/* ---------- Where we've built — map + inventory panel ----------

   Map left, a scrolling list of every community right: the same shape the site
   plan uses on the community pages, so the two read as one idea at two scales.

   ⚠️ The artwork FILLS the stage. Pin left/top are the map's own normalised 0–1
   coordinates written straight out as percentages, so ANY inset would silently
   shift every pin. */
.os-mapwrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--hdc-space-7); align-items: stretch;
  border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md);
  background: var(--hdc-surface); overflow: hidden; }

/* --os-base-k crops the resting view. The artwork's viewBox is a rectangle and
   Florida is a diagonal, so a lot of the frame is open ocean. Measured off the
   rendered SVG, the ink runs x 0.070–0.830 and y 0.000–0.875 of the frame.
   ⚠️ The origin is NOT the landmass center, and these numbers are not eyeballed.
   They solve O + k(v - O) = 0 for the stage point v that should land on the
   frame's top-left. RE-SOLVE BOTH if --os-base-k changes.
   x pins v=0.120, NOT the ink's left edge at 0.070. Flush left put the Atlantic
   coast hard against the right edge with no room for a pin, let alone its label;
   giving up the western tip of the panhandle buys ~6% of ocean back on the side
   where every pin actually is.
   y pins v=0.035, which runs past the ink's bottom edge. That costs the tail of
   the Keys and nothing else — the southernmost pin (Pembroke Pines, y 0.681) sits
   well inside.
   ⚠️ our-story.js reads --os-base-k to keep the pins one size across zoom levels. */
.os-map { position: relative; aspect-ratio: 978 / 851; overflow: hidden; --os-base-k: 1.32; }
/* Everything that must move together when a county is zoomed into. */
.os-map__stage { position: absolute; inset: 0;
  transform-origin: 49.5% 14.438%; transform: scale(var(--os-base-k));
  transition: transform var(--hdc-dur-slow) var(--hdc-ease); }
.os-map__fl { position: absolute; inset: 0; }
.florida-map { width: 100%; height: 100%; object-fit: contain; display: block; }

/* display on the button itself outranks the [hidden] UA rule, so the reset sat on
   the map at full zoom-out. State has to beat layout. */
.os-map__back[hidden] { display: none; }
.os-map__back { position: absolute; left: var(--hdc-space-4); top: var(--hdc-space-4); z-index: 4;
  padding: var(--hdc-space-2) var(--hdc-space-4); font-size: var(--hdc-fs-300); background: var(--hdc-surface); }

/* ---- pins ---- */
/* --os-pin-k is 1/zoom, set by our-story.js. Without it the pins scale with the
   stage and a 6x county zoom gives 6x pins. */
.os-pin { position: absolute; z-index: 1; padding: 0; border: 0; background: none;
  transform: translate(-50%, -50%) scale(var(--os-pin-k, 1));
  transition: transform var(--hdc-dur-slow) var(--hdc-ease); }
.os-pin__dot { display: grid; place-items: center; border-radius: var(--hdc-radius-pill);
  border: 2px solid var(--hdc-color-on-dark); box-shadow: var(--hdc-shadow-1);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi);
  color: var(--hdc-color-on-dark); line-height: 1; }
.os-pin--past .os-pin__dot   { width: 13px; height: 13px; background: var(--hdc-color-muted); }
.os-pin--town .os-pin__dot   { width: 13px; height: 13px; background: var(--hdc-color-muted); }
.os-pin--region .os-pin__dot { width: 30px; height: 30px; background: var(--hdc-color-heading); cursor: pointer; }
.os-pin--now .os-pin__dot    { width: 19px; height: 19px; background: var(--hdc-color-primary); }
.os-pin--now { z-index: 3; }
.os-pin--region { z-index: 2; }
/* Towns only exist once their county is open. */
.os-pin--town { opacity: 0; visibility: hidden; pointer-events: none; }
.os-map.is-zoomed .os-pin--town.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.os-map.is-zoomed .os-pin--region.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

/* Labels on demand — eleven permanent ones would bury the map, and in the
   southeast they would overlap each other. */
.os-pin__lab { position: absolute; left: 50%; bottom: calc(100% + var(--hdc-space-2));
  transform: translateX(-50%); min-width: 10rem; max-width: 15rem;
  padding: var(--hdc-space-3) var(--hdc-space-4);
  background: var(--hdc-surface); border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius-sm); box-shadow: var(--hdc-shadow-panel);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); line-height: var(--hdc-lh-snug);
  color: var(--hdc-color-muted); text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity var(--hdc-dur) var(--hdc-ease), visibility 0s linear var(--hdc-dur); }
.os-pin__lab b { display: block; font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-semi);
  color: var(--hdc-color-heading); margin-bottom: 2px; }
.os-pin:hover .os-pin__lab, .os-pin:focus-visible .os-pin__lab {
  opacity: 1; visibility: visible; transition-delay: 0s; }
/* ⚠️ Raise the PIN, not the label. .os-pin carries a transform, which creates a
   stacking context, so a z-index on the label can never lift it out of its own
   pin — a card on a z-index:1 past pin still rendered under the z-index:3 "selling
   now" dots. Lifting the pin takes its card with it. */
.os-pin:hover, .os-pin:focus-visible, .os-pin:focus-within { z-index: 20; }
.os-pin:focus-visible { outline: 2px solid var(--hdc-color-primary); outline-offset: 3px;
  border-radius: var(--hdc-radius-pill); }
/* Label placement is MEASURED, not guessed — our-story.js flips a pin's card when
   its box would leave the map, and sets the class here.
   ⚠️ It used to match on the inline left:/top: values. Those are STAGE coordinates:
   once the stage carries a base crop (and again at county zoom) a pin at left:81.59
   renders at 91.9%, so the thresholds were wrong the moment --os-base-k changed.
   There is no percentage that survives a transform. Measuring does. */
.os-pin--labl .os-pin__lab { left: auto; right: 50%; transform: translateX(0);
  margin-right: var(--hdc-space-2); }
.os-pin--labr .os-pin__lab { left: 50%; right: auto; transform: translateX(0);
  margin-left: var(--hdc-space-2); }
.os-pin--labb .os-pin__lab { bottom: auto; top: calc(100% + var(--hdc-space-2)); }

/* ---- inventory panel ----
   One scrolling list for every community the company has built. Selling-now and
   sold-out are marked off by an eyebrow row rather than boxed separately: same
   kind of thing, different point in its life. */
/* Height comes from the MAP beside it, not from a hard-coded 605px — that number
   was a guess at the map's height and stopped matching the moment the column
   widths moved, leaving dead space under the list.
   ⚠️ The list is taken out of flow (absolute inside a relative panel) ON PURPOSE.
   Left in flow it contributes its full ~1900px of rows to the grid row, and with
   align-items:stretch the map grows to match instead of the other way round. Out
   of flow, the panel measures zero and the map's aspect-ratio wins. */
.os-panel { position: relative; border-left: 1px solid var(--hdc-line);
  min-width: 0; min-height: 0; }
.os-panel__list { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0;
  overflow-y: auto; }

/* The dark band, not the pale blue tint. Tint is the alternating-SECTION color and
   reads as one more panel; ink reads as a rule with a name on it. */
.os-panel__sep { position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--hdc-space-3);
  padding: var(--hdc-space-3) var(--hdc-space-5);
  background: var(--hdc-surface-ink); color: var(--hdc-color-on-dark-muted);
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi);
  letter-spacing: var(--hdc-tracking-eyebrow); text-transform: uppercase; }
.os-panel__sep em { font-style: normal; letter-spacing: 0; font-size: var(--hdc-fs-300);
  color: var(--hdc-color-on-dark); }

/* Selling now: the mega-menu community card (.ms-comm-card), reused as-is rather
   than re-invented — same photo-left split, same display-face name, same hairline
   that turns blue on hover. These two are the only rows with anywhere to go, so
   they get the picture and the call to action; sold-out rows stay one line. */
.os-panel__now { display: block; padding: var(--hdc-space-3) var(--hdc-space-4); }
.os-nowcard { display: flex; align-items: stretch; overflow: hidden; text-decoration: none;
  border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md);
  background: var(--hdc-surface); transition: border-color var(--hdc-dur) var(--hdc-ease); }
.os-nowcard:hover, .os-nowcard:focus-visible { border-color: var(--hdc-color-primary); }
.os-nowcard__shot { width: 132px; height: auto; align-self: stretch; object-fit: cover;
  flex: 0 0 auto; display: block; }
.os-nowcard__body { display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 5px; min-width: 0; padding: var(--hdc-space-4); }
.os-nowcard__name { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-500);
  line-height: 1.1; color: var(--hdc-color-heading); }
.os-nowcard__meta { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300);
  color: var(--hdc-color-text); }
/* Underlined, so it reads as the link it is and not a caption. */
.os-nowcard__cta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  margin-top: var(--hdc-space-2); font-family: var(--hdc-font-ui);
  font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi);
  color: var(--hdc-color-primary); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px; }
.os-nowcard__cta svg { transition: transform var(--hdc-dur-2) var(--hdc-ease); }
.os-nowcard:hover .os-nowcard__cta svg { transform: translateX(3px); }

/* Sold-out rows. The nine we hold logos for get a logo block big enough to read,
   with the name and town beside it. The seventeen with no artwork drop the column
   rather than leave a gap: they sort below the logo rows, so the shape changes
   once, at the boundary between the two groups. */
.os-panel__row { display: grid; grid-template-columns: 96px minmax(0, 1fr);
  align-items: center; gap: var(--hdc-space-4);
  padding: var(--hdc-space-3) var(--hdc-space-5);
  border-bottom: 1px solid var(--hdc-line); font-family: var(--hdc-font-ui); }
.os-panel__row:last-child { border-bottom: 0; }
.os-panel__row--plain { grid-template-columns: minmax(0, 1fr); }
.os-panel__logo { grid-column: 1; width: 96px; height: 44px; object-fit: contain;
  object-position: left center; display: block; }
.os-panel__txt b { display: block; font-size: var(--hdc-fs-400);
  font-weight: var(--hdc-fw-medium); color: var(--hdc-color-heading); }
.os-panel__txt span { display: block; font-size: var(--hdc-fs-200); color: var(--hdc-color-muted); }
.os-panel__row--plain .os-panel__txt { display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--hdc-space-4); }
.os-panel__row--plain .os-panel__txt span { white-space: nowrap; }

/* The closing CTA is the homepage's own .cta section now, styled in chrome.css.
   The bespoke .os-cta dark band that used to live here is gone with it. */

/* Stacked below 1000px, the same way the community site plan stacks — map on top,
   list under it, one border between them. Mirrors the breakpoint and the rules in
   siteplan.css on purpose: two panels doing the same job should not behave
   differently on a phone.
   ⚠️ The list comes OUT of absolute positioning here. Side by side it is taken out
   of flow so the map's aspect-ratio sets the row height; stacked there is no row
   to match, and left absolute it collapses to nothing over the map. */
@media (max-width: 1000px) {
  .os-mapwrap { grid-template-columns: 1fr; gap: 0; }
  .os-panel { border-left: 0; border-top: 1px solid var(--hdc-line); }
  .os-panel__list { position: static; inset: auto; max-height: 26rem; }
  /* Cropping for a wide frame leaves a phone-width map mostly ocean. */
  .os-map { aspect-ratio: 1 / 1; }
  .os-nowcard__shot { width: 108px; }
}

@media (max-width: 900px) {
  /* The hero is the first thing under a solid header, so the desktop top padding
     was measuring against nothing. */
  .os-hero { padding-block: var(--hdc-space-6) var(--hdc-space-7); }
  .os-split { grid-template-columns: 1fr; gap: var(--hdc-space-6); }
  /* Stacked, the quote lands ahead of the argument it is meant to back up. Source
     order keeps it first for the wide layout, where it reads as the left column;
     here it moves under the prose. */
  .os-split--top > .os-quote { order: 2; }
  /* Stacked, the art goes UNDER the copy and stops bleeding — a collage running off
     the edge of a phone is just a cropped photograph. The 6-column grid stays, so
     the offset on the bottom shot survives at any width. */
  .os-hero__grid { grid-template-columns: 1fr; gap: var(--hdc-space-7); }
  .os-hero__lead { max-width: none; }
  .os-hero__title { font-size: var(--hdc-fs-800); max-width: 18ch; }
  /* The label takes a row of its own. Left to wrap naturally it sat BESIDE the
     first badge — the row is label + two ~184px images, so at phone widths the
     label and one badge fit on line one and the second badge dropped under them,
     which read as two unrelated groups rather than a labeled pair. */
  .os-awards__lab { flex: 0 0 100%; }
  .os-awards { gap: var(--hdc-space-4) var(--hdc-space-6); }
}