/* ============================================================
   280 SE 28th Avenue · Pompano Beach
   STANDALONE property landing page.

   Layer 1: assets/colors_and_type.css  (Maison tokens + .btn)
   Layer 2: THIS FILE                   (page layout only)

   Deliberately NOT layered on assets/site.css: that sheet carries the
   main site's fixed nav, video hero and footer rules, which would fight
   this page's own chrome. Everything below is scoped to .p280, so this
   page cannot alter any other page and nothing else can alter it.

   Maison rules honoured here:
     · Bodoni Moda for meaning · Cormorant for voice · Manrope for structure
     · hairlines only — no drop shadows anywhere
     · pill buttons only
     · one italic serif emphasis per spread
   ============================================================ */

/* ------------------------------------------------------------
   PAGE SCAFFOLD
   ------------------------------------------------------------ */
.p280 {
  --navh: 76px;
  --gutter-sm: 24px;
  background: var(--white);
  color: var(--ink);
  overflow-x: clip;
}
.p280 img { max-width: 100%; display: block; }
.p280 :focus-visible {
  outline: 2px solid var(--dusted-deep);
  outline-offset: 3px;
}

.p280-wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.p280-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.p280-skip {
  position: absolute; left: 16px; top: -100px;
  z-index: 200;
  background: var(--navy); color: var(--paper);
  padding: 12px 20px;
  font-family: var(--font-ui); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: top .2s ease;
}
.p280-skip:focus { top: 16px; }

/* ------------------------------------------------------------
   TYPOGRAPHY HELPERS
   ------------------------------------------------------------ */
.p280-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .62;
  margin: 0;
}
.p280-eyebrow--inv { color: var(--dusted); opacity: .95; }

.p280-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0;
}
.p280-h2 em, .p280-h2 i { font-style: italic; }

.p280-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}

.p280-lede {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
  max-width: 62ch;
}

.p280-body p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 1.15em;
  max-width: 68ch;
}
.p280-body p:last-child { margin-bottom: 0; }

.p280-mini {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .62;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--navy-line);
}

.p280-fine {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 14px 0 0;
  max-width: 74ch;
}

/* ------------------------------------------------------------
   NAV — solid white, hairline base. Section anchors only:
   this page is independent of the main site's navigation.
   ------------------------------------------------------------ */
.p280-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--navy-line);
}
.p280-nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.p280-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.p280-brand img {
  height: 42px;
  width: auto;
  /* The supplied lockup is navy artwork on transparent: reads on white
     with no plate and no filter (see site.css logo rules). */
}

.p280-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.p280-links a {
  color: var(--navy);
  opacity: .72;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: opacity .2s ease, border-color .2s ease;
}
.p280-links a:hover { opacity: 1; border-bottom-color: currentColor; }

.p280-nav-cta {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.p280-nav-cta:hover { opacity: .85; }

.p280-burger {
  display: none;
  width: 38px; height: 38px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.p280-burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--navy);
}

.p280-drawer {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--navy-line);
  padding: 16px var(--gutter-sm) 28px;
}
.p280-drawer[data-open="true"] { display: block; }
.p280-drawer a {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  color: var(--navy);
  padding: 14px 0;
  border-bottom: 1px solid var(--navy-line);
}
.p280-drawer a:last-child { border-bottom: 0; }
.p280-drawer .p280-drawer-call {
  margin-top: 18px;
  background: var(--navy);
  color: var(--paper);
  text-align: center;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 16px 20px;
}

/* ------------------------------------------------------------
   1 · OPENING
   photograph (2/3) + property panel (1/3) — original layout order
   ------------------------------------------------------------ */
.p280-hero { padding-top: var(--navh); }

.p280-hero-grid {
  display: grid;
  /* minmax(0,1fr) — NOT 1fr. A plain 1fr track takes its min-content width,
     which here is the 53-thumbnail strip (~3900px) and blows the column out
     to 3963px. The explicit 0 min is what lets the strip scroll instead. */
  grid-template-columns: minmax(380px, 35%) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--navy-line);
}

.p280-summary { min-width: 0; }
.p280-hero-media { min-width: 0; }
.p280-photo-bar { min-width: 0; }

.p280-summary {
  padding: 56px 44px 56px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.p280-loc {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 12px 0 0;
}
.p280-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(29px, 2.9vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 18px 0 0;
}
.p280-tagline {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 19px;
  line-height: 1.42;
  color: var(--navy);
  margin: 16px 0 0;
  max-width: 34ch;
}

.p280-price-wrap {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--navy-line);
}
.p280-price-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.p280-price {
  /* Manrope rather than Bodoni here. At 30-42px Bodoni Moda's hairline
     strokes (the 6, 9 and 7 especially) break up and read faintly, which
     was the client's complaint. Manrope is already the Maison structural
     face, so this stays inside the system — and tabular figures keep the
     digits from shifting width. Weight stays at 400: legible, never heavy. */
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--navy);
  margin: 8px 0 0;
  line-height: 1.05;
}

.p280-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}
.p280-facts li {
  padding: 15px 10px 15px 0;
  border-right: 1px solid var(--navy-line);
  min-width: 0;
}
.p280-facts li:nth-child(4n) { border-right: 0; padding-right: 0; }
.p280-facts strong {
  display: block;
  /* Same reasoning as the price: Manrope + tabular figures for legibility. */
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.p280-facts .p280-amp {
  font-size: .78em;
  padding: 0 .04em;
  opacity: .55;
}
.p280-facts .p280-lbl {
  display: block;
  margin-top: 7px;
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

.p280-note {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
  margin: 24px 0 0;
}

.p280-hl { margin: 24px 0 0; }
.p280-hl-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.p280-hl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p280-hl-list li {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--navy-line);
  position: relative;
}
.p280-hl-list li:last-child { border-bottom: 1px solid var(--navy-line); }
.p280-hl-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 8px; height: 1px;
  background: var(--dusted-deep);
}

/* --- media column --- */
.p280-hero-media {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 560px;
  background: var(--mist);
}
.p280-hero-photo {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--mist);
  cursor: zoom-in;
  overflow: hidden;
  min-height: 420px;
}
.p280-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.p280-hero-photo:hover img { transform: scale(1.022); }
.p280-hero-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(23,34,58,.32), rgba(23,34,58,0));
  pointer-events: none;
}
.p280-hero-count {
  position: absolute;
  left: 24px; bottom: 20px;
  z-index: 2;
  display: block;
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
}

.p280-photo-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-top: 1px solid var(--navy-line);
  background: var(--white);
}
.p280-thumbs {
  /* --thumb-w is the TARGET width of one thumbnail, --thumb-gap the space
     between them, --thumb-grow the most it may stretch by. assets/280.js
     reads all three to work out how many fit left of the button. */
  --thumb-w: 62px;
  --thumb-gap: 8px;
  --thumb-grow: 10px;
  display: flex;
  gap: var(--thumb-gap);
  overflow: hidden;
  min-width: 0;
  /* flex-basis 0, NOT auto. With auto the strip's own content width
     pushes the "View All Photos" button onto a second row, which then
     makes the strip measure wider and fit yet more thumbnails — the row
     kept re-widening itself. A zero basis means the strip always takes
     exactly the space left over beside the button. */
  flex: 1 1 0;
  padding-bottom: 2px;
}
.p280-thumb {
  /* Flex from the designed width up to (width + grow), so the row fills
     the space exactly without any thumbnail becoming a large preview. */
  flex: 1 1 var(--thumb-w);
  min-width: 0;
  max-width: calc(var(--thumb-w) + var(--thumb-grow));
  height: 46px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--mist);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, opacity .2s ease;
  opacity: .78;
}
.p280-thumb[hidden] { display: none; }
.p280-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p280-thumb:hover { opacity: 1; }
.p280-thumb[aria-current="true"] {
  border-color: var(--navy);
  opacity: 1;
}

.p280-viewall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.p280-viewall:hover { background: var(--navy); color: var(--paper); }
.p280-viewall .p280-vg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 9px; height: 9px;
}
.p280-viewall .p280-vg i {
  display: block;
  width: 3.5px; height: 3.5px;
  background: currentColor;
}
.p280-viewall .p280-vcount { opacity: .6; }
.p280-viewall--inv {
  border-color: rgba(244,242,237,.5);
  color: var(--paper);
}
.p280-viewall--inv:hover { background: var(--paper); color: var(--navy); }

/* the primary gallery call-to-action — the one obvious way in */
.p280-viewall--lg {
  padding: 16px 30px;
  font-size: 10px;
  letter-spacing: .3em;
  gap: 11px;
}

/* ------------------------------------------------------------
   SHARED SECTION
   ------------------------------------------------------------ */
.p280-sec { padding: 96px 0; }
.p280-sec--tight { padding: 72px 0; }
.p280-sec--paper { background: var(--paper); }
.p280-sec--mist { background: var(--mist); }
.p280-sec--navy { background: var(--navy); color: var(--paper); }
.p280-sec--navy .p280-h2 { color: var(--paper); }
.p280-sec--navy .p280-h3 { color: var(--paper); }
.p280-sec--navy .p280-fine { color: rgba(244,242,237,.62); }
.p280-sec--navy .p280-mini {
  color: var(--dusted);
  opacity: .95;
  border-bottom-color: rgba(244,242,237,.22);
}

.p280-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--navy-line);
}
.p280-sec--navy .p280-head { border-bottom-color: rgba(244,242,237,.22); }

/* ------------------------------------------------------------
   2 · OVERVIEW
   ------------------------------------------------------------ */
.p280-overview {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(320px, 1.15fr);
  gap: 64px;
  align-items: start;
}
.p280-overview-body p { color: var(--ink); }

/* definition lists — hairlines, no boxes */
.p280-dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy);
}
.p280-dl > div {
  padding: 15px 0;
  border-bottom: 1px solid var(--navy-line);
  min-width: 0;
}
.p280-dl dt {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  line-height: 1.5;
}
.p280-dl dd {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0;
  overflow-wrap: break-word;
}
.p280-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p280-dl--1 { grid-template-columns: 1fr; }

.p280-sec--navy .p280-dl,
.p280-outdoor .p280-dl { border-top-color: rgba(244,242,237,.45); }
.p280-sec--navy .p280-dl > div,
.p280-outdoor .p280-dl > div { border-bottom-color: rgba(244,242,237,.22); }
.p280-sec--navy .p280-dl dt,
.p280-outdoor .p280-dl dt { color: rgba(244,242,237,.55); }
.p280-sec--navy .p280-dl dd,
.p280-outdoor .p280-dl dd { color: var(--paper); }

.p280-sep { opacity: .5; padding: 0 .3em; }

/* ------------------------------------------------------------
   3 · DOCKAGE & OCEAN ACCESS
   ------------------------------------------------------------ */
.p280-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.p280-figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--mist);
}
.p280-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.p280-figure button.p280-zoomable {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.p280-dock-lede {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  margin: 20px 0 32px;
  max-width: 60ch;
}
.p280-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ------------------------------------------------------------
   4 · GALLERY — the original curated preview (7 photographs)

   Layout: one wide lead frame (the original configuration says
   "first is shown wide"), then six supporting frames in a 3 × 2
   grid. The complete 53 open in the viewer, in walkthrough order.
   ------------------------------------------------------------ */
.p280-gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.p280-gal-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--mist);
  min-width: 0;
}
/* the lead frame runs the full width */
.p280-gal-lead {
  grid-column: 1 / -1;
}
.p280-gal-item button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.p280-gal-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.p280-gal-lead img { aspect-ratio: 21 / 9; }
.p280-gal-item:hover img { transform: scale(1.03); }
.p280-gal-item figcaption {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 0 0;
}

.p280-gallery-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--navy-line);
}
.p280-gallery-hint {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 0;
}

/* distinguishing features */
.p280-features { margin-top: 64px; }
.p280-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--navy);
}
.p280-feature-list li {
  padding: 24px 26px 26px 0;
  border-bottom: 1px solid var(--navy-line);
  border-right: 1px solid var(--navy-line);
}
.p280-feature-list li:nth-child(3n) { border-right: 0; padding-right: 0; }
.p280-feature-list h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 8px;
}
.p280-feature-list p {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ------------------------------------------------------------
   5 · OUTDOOR LIVING — the navy band
   ------------------------------------------------------------ */
.p280-outdoor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 0;
  align-items: stretch;
  background: var(--navy);
  min-width: 0;
}
.p280-outdoor-media {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  min-height: 520px;
}
.p280-outdoor-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p280-outdoor-copy {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p280-outdoor-copy p.p280-outdoor-text {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244,242,237,.86);
  margin: 22px 0 34px;
  max-width: 58ch;
}
.p280-outdoor-copy .p280-h2 { color: var(--paper); }
.p280-outdoor-copy .p280-h2 em { font-style: italic; }

/* ------------------------------------------------------------
   6 · NEIGHBORHOOD
   ------------------------------------------------------------ */
.p280-hood-lede {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  margin: 20px 0 30px;
  max-width: 68ch;
}
.p280-hood-ids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  max-width: 620px;
}

.p280-nearby { margin-top: 56px; }
.p280-nb-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--navy);
}
.p280-nb-group { padding-top: 22px; }
.p280-nb-cat {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}
.p280-nb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p280-nb-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 15px;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--navy-line);
  cursor: default;
  font: inherit;
}
.p280-nb-group li:last-child .p280-nb-row { border-bottom: 1px solid var(--navy-line); }
.p280-nb-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--navy);
}
.p280-nb-meta {
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.p280-nb-time::before {
  content: "·";
  margin-right: 10px;
  opacity: .6;
}

/* schools */
.p280-schools { margin-top: 0; }
.p280-schools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
}
.p280-schools-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
}
.p280-school-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy);
}
.p280-school-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--navy-line);
}
.p280-sc-name {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--navy);
}
.p280-sc-meta {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   7 · CONTACT
   ------------------------------------------------------------ */
.p280-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}
.p280-agent-photo {
  margin: 0 0 26px;
  overflow: hidden;
  background: var(--mist);
  max-width: 300px;
}
.p280-agent-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.p280-agent-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
}
.p280-agent-title {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.p280-agent-creds {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.p280-agent-brok {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--navy-line);
}
.p280-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}
.p280-contact-lede {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--navy);
  margin: 18px 0 0;
  max-width: 42ch;
}
.p280-contact-email {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 18px 0 0;
  overflow-wrap: anywhere;
}
.p280-contact-email a { border-bottom: 1px solid var(--navy-line); }
.p280-contact-email a:hover { border-bottom-color: var(--navy); }

/* form — Maison fields: hairlines beneath, no boxes */
.p280-form-wrap {
  background: var(--white);
  padding: 40px;
  border: 1px solid var(--navy-line);
}
.p280-form-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--navy);
  margin: 0 0 6px;
}
.p280-form-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 26px;
}
.p280-field { display: block; margin-bottom: 20px; }
.p280-field-l {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.p280-field input,
.p280-field textarea,
.p280-field select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--navy-line);
  padding: 9px 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.p280-field textarea { resize: vertical; min-height: 92px; }
.p280-field input:focus,
.p280-field textarea:focus,
.p280-field select:focus {
  outline: none;
  border-bottom-color: var(--navy);
}
.p280-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.p280-form-submit { width: 100%; justify-content: center; margin-top: 8px; }
.p280-form-status {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
  color: var(--navy);
  margin: 14px 0 0;
  min-height: 0;
}
.p280-form-consent {
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 14px 0 0;
}
.p280-form-consent a { border-bottom: 1px solid var(--navy-line); }
.p280-thanks {
  padding: 30px 0;
  text-align: center;
}
.p280-thanks .p280-thanks-h {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 24px;
  color: var(--navy);
  margin: 10px 0 0;
}
.p280-form-fields[data-sent="true"] { display: none; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.p280-foot {
  background: var(--navy);
  color: var(--paper);
  padding: 64px 0 40px;
}
.p280-foot-brand img {
  height: 58px;
  width: auto;
  /* Navy script artwork on the navy footer needs a white glow to read.
     A drop-shadow traces the alpha silhouette, so it adds no rectangle
     and does not recolour the yellow plumeria (same approach as the
     shared footer's .foot-brand .oal-img). */
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .9))
    drop-shadow(0 0 5px rgba(255, 255, 255, .7))
    drop-shadow(0 0 10px rgba(255, 255, 255, .45));
}
.p280-foot-service {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(244,242,237,.78);
  max-width: 46ch;
  margin: 22px 0 0;
}
.p280-foot-rule {
  height: 1px;
  background: rgba(244,242,237,.22);
  margin: 40px 0 32px;
}
.p280-foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 1.4fr;
  gap: 40px;
}
.p280-foot-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dusted);
  margin: 0 0 16px;
}
.p280-foot-col a,
.p280-foot-col p {
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(244,242,237,.8);
  margin: 0;
}
.p280-foot-col a:hover { color: var(--paper); }
.p280-foot-note {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.8;
  color: rgba(244,242,237,.62);
  margin: 0;
  max-width: 48ch;
}
/* The Adache mark is navy artwork on a transparent PNG, so it is
   invisible on the navy footer without a plate. Matches the shared
   footer's .foot-adache plate exactly. */
.p280-foot-adache {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 2px;
  padding: 10px 14px;
  margin-top: 22px;
  width: fit-content;
  line-height: 0;
}
.p280-foot-adache img { height: 30px; width: auto; opacity: 1; }
.p280-foot-bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: rgba(244,242,237,.6);
}

/* mobile sticky call */
.p280-mobile-call {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  background: var(--navy);
  color: var(--paper);
  text-align: center;
  padding: 16px 20px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  border-top: 1px solid rgba(244,242,237,.22);
}

/* ------------------------------------------------------------
   GALLERY VIEWER (dialog)
   ------------------------------------------------------------ */
.p280-pv {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(23,34,58,.985);
  display: flex;
  flex-direction: column;
  color: var(--paper);
}
.p280-pv[hidden] { display: none; }
.p280-pv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(244,242,237,.18);
  flex: 0 0 auto;
}
.p280-pv-count {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dusted);
  margin: 0;
}
.p280-pv-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(244,242,237,.45);
  border-radius: var(--radius-pill);
  color: var(--paper);
  padding: 9px 20px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.p280-pv-close:hover { background: var(--paper); color: var(--navy); }

.p280-pv-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  min-height: 0;
  padding: 18px 8px;
}
.p280-pv-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  position: relative;
}
.p280-pv-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.p280-pv-nav {
  width: 44px; height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(244,242,237,.4);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.p280-pv-nav:hover { background: var(--paper); color: var(--navy); }

.p280-pv-cap {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244,242,237,.62);
  text-align: center;
  padding: 0 24px 10px;
  margin: 0;
}
.p280-pv-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 24px 18px;
  border-top: 1px solid rgba(244,242,237,.18);
  scrollbar-width: thin;
}
.p280-pv-strip button {
  flex: 0 0 auto;
  width: 66px; height: 48px;
  padding: 0;
  border: 1px solid transparent;
  background: rgba(244,242,237,.1);
  cursor: pointer;
  overflow: hidden;
  opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
}
.p280-pv-strip button img { width: 100%; height: 100%; object-fit: cover; }
.p280-pv-strip button:hover { opacity: .85; }
.p280-pv-strip button[aria-current="true"] {
  opacity: 1;
  border-color: var(--paper);
}

/* ------------------------------------------------------------
   REVEAL — CSS only hides when JS opts in (assets/280.js),
   so crawlers and no-JS visitors always see the content.
   ------------------------------------------------------------ */
.p280 .p280-reveal { opacity: 1; }
.p280.js-reveal .p280-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.p280.js-reveal .p280-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .p280.js-reveal .p280-reveal { opacity: 1; transform: none; transition: none; }
  .p280-hero-photo:hover img,
  .p280-gal-item:hover img { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- 1180: tighten gutters, drop lesser nav links --- */
@media (max-width: 1180px) {
  .p280 { --gutter: 40px; }
  .p280-links { gap: 20px; font-size: 9.5px; }
  .p280-hero-grid { grid-template-columns: minmax(330px, 38%) minmax(0, 1fr); }
  .p280-summary { padding: 44px 34px 44px var(--gutter); }
  .p280-split,
  .p280-contact { gap: 44px; }
  .p280-outdoor-copy { padding: 64px 44px; }
  .p280-nb-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
}

/* --- 1024: nav collapses to burger --- */
@media (max-width: 1024px) {
  .p280 { --navh: 68px; }
  .p280-links,
  .p280-nav-cta { display: none; }
  .p280-burger { display: flex; }
  .p280-brand img { height: 38px; }
  .p280-overview { grid-template-columns: 1fr; gap: 40px; }
  .p280-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p280-outdoor { grid-template-columns: minmax(0, 1fr); }
  /* A fixed min-height plus an aspect-ratio sets a min-content width of
     min-height × ratio (380 × 1.6 = 608px), which overflowed narrow
     phones. Drive the height from the viewport width instead. */
  .p280-outdoor-media {
    min-height: 0;
    aspect-ratio: auto;
    height: clamp(240px, 54vw, 420px);
  }
  .p280-outdoor-media img { position: static; height: 100%; }
  .p280-outdoor-copy { padding: 56px var(--gutter); }
  .p280-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p280-feature-list li:nth-child(3n) { border-right: 1px solid var(--navy-line); padding-right: 26px; }
  .p280-feature-list li:nth-child(2n) { border-right: 0; padding-right: 0; }

  /* Gallery: the lead frame stays full width; the six supporting
     frames drop to two columns so nothing is squeezed. */
  .p280-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p280-gal-lead { grid-column: 1 / -1; }
  .p280-gal-lead img { aspect-ratio: 16 / 10; }
}

/* --- 900: hero stacks, photo first then panel --- */
@media (max-width: 900px) {
  .p280 { --gutter: 28px; }
  .p280-hero-grid { grid-template-columns: 1fr; }
  .p280-hero-media { order: -1; min-height: 0; }
  .p280-hero-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .p280-hero-photo img { position: static; height: 100%; }
  .p280-summary { padding: 36px var(--gutter) 44px; }
  .p280-title { font-size: clamp(27px, 6vw, 38px); }
  .p280-split,
  .p280-contact { grid-template-columns: 1fr; }
  .p280-sec { padding: 68px 0; }
  .p280-sec--tight { padding: 56px 0; }
  .p280-head { margin-bottom: 32px; padding-bottom: 20px; }
  .p280-schools-grid { gap: 32px; }
  .p280-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p280-foot-col:last-child { grid-column: 1 / -1; }
  .p280-pv-main { grid-template-columns: 44px 1fr 44px; }
  .p280-pv-nav { width: 38px; height: 38px; font-size: 15px; }
  .p280-agent-photo { max-width: 240px; }
}

/* --- 720: single-column detail lists --- */
@media (max-width: 720px) {
  .p280 { --gutter: 22px; }
  .p280-sec { padding: 56px 0; }
  .p280-dl,
  .p280-dl--2,
  .p280-spec,
  .p280-hood-ids { grid-template-columns: 1fr; }
  .p280-schools-grid { grid-template-columns: 1fr; }
  .p280-nb-groups { grid-template-columns: 1fr; }
  .p280-feature-list { grid-template-columns: 1fr; }
  .p280-feature-list li,
  .p280-feature-list li:nth-child(3n),
  .p280-feature-list li:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
  .p280-form-wrap { padding: 26px 20px; }
  .p280-field-row { grid-template-columns: 1fr; gap: 0; }
  .p280-foot-cols { grid-template-columns: 1fr; gap: 30px; }
  .p280-foot-col:last-child { grid-column: auto; }
  .p280-mobile-call { display: block; }
  .p280 { padding-bottom: 56px; }
  .p280-pv-strip { padding: 10px 14px 14px; }
  .p280-pv-main { padding: 10px 0; grid-template-columns: 38px 1fr 38px; }
  .p280-gallery-foot { flex-direction: column; align-items: flex-start; }
  .p280-photo-bar { flex-wrap: wrap; gap: 12px; }
  .p280-gallery-hint { display: none; }

  /* Four specifications become a neat 2 × 2 block rather than
     four cramped columns. Hairlines are redrawn per cell so the
     grid still reads as one table. */
  .p280-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p280-facts li {
    padding: 14px 0;
    border-right: 0;
  }
  .p280-facts li:nth-child(odd) {
    padding-right: 14px;
    border-right: 1px solid var(--navy-line);
  }
  .p280-facts li:nth-child(even) { padding-left: 14px; }
  .p280-facts li:nth-child(-n+2) { border-bottom: 1px solid var(--navy-line); }
  .p280-facts strong { font-size: 20px; }

  /* the primary gallery CTA stays full-width and tappable */
  .p280-viewall--lg {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 9.5px;
  }
}

/* --- 480: smallest phones --- */
@media (max-width: 480px) {
  .p280 { --navh: 62px; --gutter: 18px; }
  .p280-brand img { height: 32px; }
  .p280-hero-photo { aspect-ratio: 4 / 3; }
  .p280-tagline { font-size: 17px; }
  .p280-facts strong { font-size: 19px; }
  .p280-facts .p280-lbl { font-size: 7.5px; letter-spacing: .13em; }
  /* Set the design variables, not a fixed width — the fit routine reads
     these to choose how many thumbnails fit. */
  .p280-thumbs { --thumb-w: 52px; --thumb-gap: 6px; --thumb-grow: 8px; }
  .p280-thumb { height: 39px; }
  .p280-viewall { padding: 9px 14px; font-size: 8px; }
  .p280-viewall--lg { padding: 15px 18px; font-size: 9px; }
  .p280-pv-strip button { width: 54px; height: 40px; }
  .p280-price { font-size: 26px; }
}