/* ==========================================================================
   Areas (Page 4). This page's own stylesheet, under the owner's direction of
   2026-10-08, 4:06 PM (development mode). Linked from the Areas page alone,
   after the shared stylesheet. Every rule begins with .page-areas, the page's
   body class. Colours come only from the palette; type only from the shared
   families and scale.

   The idea: a guided journey through California, not a mapping application.
   One SVG map (US Census 1:10m outlines, projected for California) stays in
   place while seven quiet scenes pass: the western states for orientation,
   California, then Los Angeles, Orange County, San Diego and San Jose / Bay
   Area (reviewer's ruling of 2026-10-09, 1:58 PM: Orange County added, the
   San Francisco Bay Area become San Jose / Bay Area).
   The page's script names the scene (data-scene) and eases the map's frame;
   everything that lights, draws or fades is decided here.

   Two kinds of mark, never mixed:
     the office mark   a small gold square: a physical ONE Luxury Properties
                       office. Los Angeles only; listed beside the map until
                       verified locations are supplied.
     the market field  a soft aubergine field with a fine ivory ring: a market
                       Shirin serves (Orange County, San Diego, San Jose / Bay
                       Area: service regions, no offices). Never a pin.
   Los Angeles, the primary market, is a warm gold field.

   PLACEHOLDER MAP ART (owner, 4:16 PM): the drawing and its styling in the
   section "The map" below are development-only and will be replaced in a
   later art-direction pass. The choreography depends only on the scene
   names (data-scene), the layer classes and .areas-map__offices, the empty
   layer reserved for the verified Los Angeles office marks.
   ========================================================================== */

/* ---------- Opening ---------- */

.page-areas .areas-open {
  padding-block: var(--space-6) var(--space-5);
}

.page-areas .areas-open__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
}

.page-areas .areas-open__title {
  grid-column: 1 / 11;
  margin: 0;
  max-width: 12ch;
}

.page-areas .areas-open__dek {
  grid-column: 8 / 13;
  margin: var(--space-4) 0 0;
}

/* ---------- The story: stage, chapters, map ---------- */

.page-areas .areas-story {
  position: relative;
}

.page-areas .areas-story__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
  padding-block: var(--space-5);
}

.page-areas .areas-story__chapters {
  grid-column: 1 / 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-areas .areas-chapter__name {
  margin: 0;
}

.page-areas .areas-story__map {
  position: relative;
  grid-column: 5 / 13;
  aspect-ratio: 1 / 1.08;
}

.page-areas .areas-map {
  --u: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.page-areas .areas-story__steps {
  display: none;
}

/* With the script running: the stage holds still while the steps pass. */

.page-areas .areas-story[data-areas-live] .areas-story__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}

.page-areas .areas-story[data-areas-live] .areas-story__grid {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.page-areas .areas-story[data-areas-live] .areas-story__chapters {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: var(--space-5);
}

/* The chapters share one place. A chapter out of its scene is also hidden once it has faded (Phase 1, 2026-10-09:
   the Los Angeles office list now holds buttons, and a faded chapter above it must not take their clicks or keys). */
.page-areas .areas-story[data-areas-live] .areas-chapter {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 700ms var(--ease-silk),
    transform 700ms var(--ease-silk),
    visibility 0s linear 700ms;
}

.page-areas .areas-story[data-areas-live] .areas-story__key {
  grid-row: 2;
}

/* The frame has no hard edge: the drawing fades out at all four sides, so a close
   framing never shows a cut line or the corner of the state's fill. */
.page-areas .areas-story[data-areas-live] .areas-story__map {
  aspect-ratio: auto;
  min-height: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent, var(--graphite) 9%, var(--graphite) 91%, transparent),
    linear-gradient(to bottom, transparent, var(--graphite) 9%, var(--graphite) 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, var(--graphite) 9%, var(--graphite) 91%, transparent),
    linear-gradient(to bottom, transparent, var(--graphite) 9%, var(--graphite) 91%, transparent);
  mask-composite: intersect;
}

.page-areas .areas-story[data-areas-live] .areas-story__steps {
  display: block;
  position: relative;
  margin-top: calc(var(--nav-h) - 100vh);
  margin-top: calc(var(--nav-h) - 100svh);
  pointer-events: none;
}

.page-areas .areas-step {
  height: 85vh;
  height: 85svh;
}

/* Los Angeles holds longest. The last step is a full window or more, so the
   closing view of all four regions is reached while the stage still holds. */
.page-areas .areas-step--la {
  height: 115vh;
  height: 115svh;
}

.page-areas .areas-step--all {
  height: 110vh;
  height: 110svh;
}

.page-areas .areas-story[data-scene="ca"] .areas-chapter--ca,
.page-areas .areas-story[data-scene="all"] .areas-chapter--ca,
.page-areas .areas-story[data-scene="la"] .areas-chapter--la,
.page-areas .areas-story[data-scene="oc"] .areas-chapter--oc,
.page-areas .areas-story[data-scene="sd"] .areas-chapter--sd,
.page-areas .areas-story[data-scene="bay"] .areas-chapter--bay {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 450ms;
}

/* ---------- The offices (Los Angeles) and the key ---------- */

.page-areas .areas-offices {
  display: grid;
  gap: 0.8rem;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.page-areas .areas-office {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  line-height: 1;
}

.page-areas .areas-office__mark,
.page-areas .areas-key__mark--office {
  position: relative;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid var(--gold);
}

.page-areas .areas-office__mark::after,
.page-areas .areas-key__mark--office::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2px;
  height: 2px;
  background: var(--gold);
}

.page-areas .areas-office__mark::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--gold);
  opacity: 0;
}

.page-areas .areas-story[data-scene="la"] .areas-office__mark::before {
  animation: areas-office-pulse 3600ms var(--ease-silk) 1200ms infinite;
}

.page-areas .areas-story[data-scene="la"] .areas-office:nth-child(2) .areas-office__mark::before {
  animation-delay: 1500ms;
}

.page-areas .areas-story[data-scene="la"] .areas-office:nth-child(3) .areas-office__mark::before {
  animation-delay: 1800ms;
}

.page-areas .areas-story[data-scene="la"] .areas-office:nth-child(4) .areas-office__mark::before {
  animation-delay: 2100ms;
}

.page-areas .areas-story[data-scene="la"] .areas-office:nth-child(5) .areas-office__mark::before {
  animation-delay: 2400ms;
}

@keyframes areas-office-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  60%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

.page-areas .areas-story__key {
  display: grid;
  gap: 0.7rem;
}

.page-areas .areas-key {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: var(--ivory-72);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* The service-region key: the same soft aubergine bloom, with its faint warm core, as the regions on the map
   (refinement pass, 8:14 PM: no dotted circles). */
.page-areas .areas-key__mark--market {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(200 169 107 / 0.55) 0 12%, rgb(83 51 64 / 0.95) 34%, rgb(83 51 64 / 0) 74%);
}

.page-areas .areas-story[data-areas-live] .areas-key {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: opacity 900ms var(--ease-silk) 600ms;
}

/* The office key goes only with the Los Angeles office list (owner, review 1). The offices are plotted in the
   Los Angeles scene alone, so no other view names one. */
.page-areas .areas-story:not([data-areas-live]) .areas-key--office {
  display: none;
}

.page-areas .areas-story[data-scene="la"] .areas-key--office,
.page-areas .areas-story[data-scene="oc"] .areas-key--market,
.page-areas .areas-story[data-scene="sd"] .areas-key--market,
.page-areas .areas-story[data-scene="bay"] .areas-key--market,
.page-areas .areas-story[data-scene="all"] .areas-key--market {
  opacity: 1;
}

/* ---------- The map ---------- */

.page-areas .areas-map__context {
  fill: none;
  stroke: rgb(200 169 107 / 0.2);
  stroke-width: calc(var(--u) * 1px);
  stroke-linejoin: round;
  transition: opacity 1400ms var(--ease-silk);
}

.page-areas .areas-story[data-scene="ca"] .areas-map__context,
.page-areas .areas-story[data-scene="la"] .areas-map__context,
.page-areas .areas-story[data-scene="oc"] .areas-map__context,
.page-areas .areas-story[data-scene="sd"] .areas-map__context,
.page-areas .areas-story[data-scene="bay"] .areas-map__context,
.page-areas .areas-story[data-scene="all"] .areas-map__context {
  opacity: 0.4;
}

.page-areas .areas-map__offices {
  opacity: 0;
  transition: opacity 1400ms var(--ease-silk) 500ms;
}

.page-areas .areas-story[data-scene="la"] .areas-map__offices,
.page-areas .areas-story[data-scene="all"] .areas-map__offices {
  opacity: 1;
}

.page-areas .areas-map__state {
  fill: rgb(243 239 233 / 0.04);
  stroke: none;
}

/* ---------- The atlas (Cinematic Atlas, Phase 1, pass 2 of 2026-10-09) ----------
   After the owner's preferred image (5:24 PM): a luxury editorial atlas, not a terrain render. Near-black land with a
   subtle embossed texture, a restrained gold light around the whole outline, nothing technical. Sources, licences and
   the credit the elevation data needs: docs/ATLAS-DATA.md. Layers in the map's
   own units, so every scene's frame and zoom carries them exactly:
     glow     the outline's light, outside it: a raster drawn from California's projected outline;
     tone     the land's near-black ground: a smooth version of the relief, for close scenes;
     relief   the embossed texture (shading from shadedrelief.com via basemap-data, 2 arc-min, with a broad rise from
              ETOPO1), clipped to California's outline;
     coast, borders  the outline itself, one gold hairline all round.
   Lines stay one screen pixel or less at any scale (--u, as for the rest of the map). */
.page-areas .areas-atlas__glow,
.page-areas .areas-atlas__relief {
  transition: opacity 1400ms var(--ease-silk);
}

.page-areas .areas-atlas__coast,
.page-areas .areas-atlas__borders {
  fill: none;
  stroke: rgb(200 169 107 / 0.85);
  stroke-width: calc(var(--u) * 1px);
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The texture is drawn from 2 arc-minute data (about 3.7 km a pixel): fine across the state, coarse once magnified.
   Close in, it gives way to the smooth tone beneath, and the outline's light is kept low. */
.page-areas .areas-story[data-scene="bay"] .areas-atlas__relief {
  opacity: 0.5;
}

.page-areas .areas-story[data-scene="la"] .areas-atlas__relief,
.page-areas .areas-story[data-scene="oc"] .areas-atlas__relief,
.page-areas .areas-story[data-scene="sd"] .areas-atlas__relief {
  opacity: 0;
}

.page-areas .areas-story[data-scene="la"] .areas-atlas__glow,
.page-areas .areas-story[data-scene="oc"] .areas-atlas__glow,
.page-areas .areas-story[data-scene="sd"] .areas-atlas__glow,
.page-areas .areas-story[data-scene="bay"] .areas-atlas__glow {
  opacity: 0.4;
}

.page-areas .areas-stop--gold {
  stop-color: var(--gold);
  stop-opacity: 0.46;
}

.page-areas .areas-stop--gold-mid {
  stop-color: var(--gold);
  stop-opacity: 0.16;
}

.page-areas .areas-stop--gold-end {
  stop-color: var(--gold);
  stop-opacity: 0;
}

.page-areas .areas-stop--aubergine {
  stop-color: var(--aubergine);
  stop-opacity: 0.9;
}

.page-areas .areas-stop--aubergine-mid {
  stop-color: var(--aubergine);
  stop-opacity: 0.42;
}

.page-areas .areas-stop--aubergine-end {
  stop-color: var(--aubergine);
  stop-opacity: 0;
}

/* Each market's field is painted with its gradient above. The reference lives here rather than in the markup,
   whose colour attributes stay within the palette (the colours gate). */
.page-areas .areas-map__field--primary {
  fill: url(#areas-glow-gold);
}

.page-areas .areas-map__field--market {
  fill: url(#areas-glow-aubergine);
}

.page-areas .areas-map__market {
  opacity: 0;
  transition: opacity 1400ms var(--ease-silk) 500ms;
}

.page-areas .areas-story[data-scene="la"] .areas-map__market--la,
.page-areas .areas-story[data-scene="oc"] .areas-map__market--oc,
.page-areas .areas-story[data-scene="sd"] .areas-map__market--sd,
.page-areas .areas-story[data-scene="bay"] .areas-map__market--bay,
.page-areas .areas-story[data-scene="all"] .areas-map__market {
  opacity: 1;
}

.page-areas .areas-story[data-scene="oc"] .areas-map__market--la,
.page-areas .areas-story[data-scene="sd"] .areas-map__market--la,
.page-areas .areas-story[data-scene="sd"] .areas-map__market--oc,
.page-areas .areas-story[data-scene="bay"] .areas-map__market--la,
.page-areas .areas-story[data-scene="bay"] .areas-map__market--oc,
.page-areas .areas-story[data-scene="bay"] .areas-map__market--sd {
  opacity: 0.55;
}

/* The service regions (Orange County, San Diego, San Jose / Bay Area): a soft aubergine illumination with a faint
   warm core, no outline (refinement pass, 8:14 PM: the dotted circles are gone). The market's field, widened, is the
   illumination; its inner circle, once a dotted ring, is now the core. In its own scene a region's bloom gathers as
   the camera arrives, then breathes slowly while the scene holds. */
.page-areas .areas-map__field--market {
  transform: scale(1.3);
  transform-box: fill-box;
  transform-origin: center;
}

.page-areas .areas-map__ring {
  fill: url(#areas-glow-gold);
  stroke: none;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
}

.page-areas .areas-story[data-scene="oc"] .areas-map__market--oc .areas-map__field--market,
.page-areas .areas-story[data-scene="sd"] .areas-map__market--sd .areas-map__field--market,
.page-areas .areas-story[data-scene="bay"] .areas-map__market--bay .areas-map__field--market {
  animation: areas-bloom-gather 2600ms var(--ease-silk) 500ms both, areas-bloom-breathe 7000ms ease-in-out 3100ms infinite alternate;
}

.page-areas .areas-story[data-scene="oc"] .areas-map__market--oc .areas-map__ring,
.page-areas .areas-story[data-scene="sd"] .areas-map__market--sd .areas-map__ring,
.page-areas .areas-story[data-scene="bay"] .areas-map__market--bay .areas-map__ring {
  animation: areas-bloom-core 2600ms var(--ease-silk) 700ms both;
}

@keyframes areas-bloom-gather {
  from {
    opacity: 0.35;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes areas-bloom-breathe {
  from {
    transform: scale(1.3);
  }

  to {
    transform: scale(1.42);
  }
}

@keyframes areas-bloom-core {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 0.7;
    transform: scale(1);
  }
}

.page-areas .areas-map__route {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2200ms var(--ease-silk) 300ms;
}

.page-areas .areas-map__route--line {
  stroke-width: calc(var(--u) * 1.4px);
}

.page-areas .areas-map__route--glow {
  stroke-width: calc(var(--u) * 7px);
  stroke-opacity: 0.14;
}

/* Orange County lies on the way south: its own short route is drawn in its own scene, and from San Diego on the
   south route passes through it. */
.page-areas .areas-story[data-scene="oc"] .areas-map__route--oc,
.page-areas .areas-story[data-scene="sd"] .areas-map__route--south,
.page-areas .areas-story[data-scene="bay"] .areas-map__route--south,
.page-areas .areas-story[data-scene="all"] .areas-map__route--south,
.page-areas .areas-story[data-scene="bay"] .areas-map__route--north,
.page-areas .areas-story[data-scene="all"] .areas-map__route--north {
  stroke-dashoffset: 0;
}

/* ---------- Labels over the map (placed by the script) ---------- */

.page-areas .areas-label {
  position: absolute;
  width: max-content;
  max-width: 8.5rem;
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(1rem, -50%);
  opacity: 0;
  transition: opacity 900ms var(--ease-silk) 700ms;
}

.page-areas .areas-label--la {
  color: var(--gold);
}

.page-areas .areas-story:not([data-areas-live]) .areas-label {
  display: none;
}

.page-areas .areas-story[data-scene="la"] .areas-label--la,
.page-areas .areas-story[data-scene="oc"] .areas-label--oc,
.page-areas .areas-story[data-scene="sd"] .areas-label--sd,
.page-areas .areas-story[data-scene="bay"] .areas-label--bay,
.page-areas .areas-story[data-scene="all"] .areas-label {
  opacity: 1;
}

/* Orange County is not named in the Bay Area's scene: the south stands at the foot of that frame, where its name
   would cross Los Angeles's and the coast. Los Angeles stands for the south there (San Diego is outside the frame). */
.page-areas .areas-story[data-scene="oc"] .areas-label--la,
.page-areas .areas-story[data-scene="sd"] .areas-label--la,
.page-areas .areas-story[data-scene="sd"] .areas-label--oc,
.page-areas .areas-story[data-scene="bay"] .areas-label--la,
.page-areas .areas-story[data-scene="bay"] .areas-label--sd {
  opacity: 0.6;
}

/* Set by the script: beside the place on its left when the right has no room;
   out of sight while the place is outside the frame. */
.page-areas .areas-label[data-areas-left] {
  text-align: right;
  transform: translate(calc(-100% - 1rem), -50%);
}

/* San Diego sits on the coast with the border just to its south: its name is
   raised above the place, beside it, clear of both lines. */
.page-areas .areas-story .areas-label--sd {
  transform: translate(0.5rem, calc(-100% - 0.25rem));
}

.page-areas .areas-story .areas-label--sd[data-areas-left] {
  transform: translate(calc(-100% - 0.5rem), calc(-100% - 0.25rem));
}

.page-areas .areas-story[data-areas-live] .areas-label[data-areas-out] {
  opacity: 0;
  transition-duration: 300ms;
  transition-delay: 0ms;
}

/* ---------- Offices: markers, the list, the card (Cinematic Atlas, Phase 1) ----------
   Only physical brokerage offices open a card; the service regions stay marks on the map. The markers are buttons
   over the map, placed by areas.js from data-areas-at like the labels, shown in the Los Angeles scene alone. */
.page-areas .areas-pin {
  position: absolute;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-silk), visibility 0s linear 900ms;
}

.page-areas .areas-story[data-scene="la"] .areas-pin:not([data-areas-out]) {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--ease-silk) 900ms, visibility 0s linear 900ms;
}

.page-areas .areas-pin__mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.6875rem;
  height: 0.6875rem;
  border: 1px solid var(--gold);
  background: rgb(37 37 38 / 0.72);
  box-shadow: 0 0 0.75rem rgb(200 169 107 / 0.45);
  transition: transform 300ms var(--ease-silk), background-color 300ms var(--ease-silk), box-shadow 300ms var(--ease-silk);
}

.page-areas .areas-pin__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3px;
  height: 3px;
  background: var(--gold);
}

/* The markers keep the list's living pulse (refinement pass, 8:14 PM), each a beat after the last. */
.page-areas .areas-pin__mark::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--gold);
  opacity: 0;
}

.page-areas .areas-story[data-scene="la"] .areas-pin__mark::before {
  animation: areas-office-pulse 3600ms var(--ease-silk) 1200ms infinite;
}

.page-areas .areas-story[data-scene="la"] .areas-pin:nth-of-type(2) .areas-pin__mark::before {
  animation-delay: 1500ms;
}

.page-areas .areas-story[data-scene="la"] .areas-pin:nth-of-type(3) .areas-pin__mark::before {
  animation-delay: 1800ms;
}

.page-areas .areas-story[data-scene="la"] .areas-pin:nth-of-type(4) .areas-pin__mark::before {
  animation-delay: 2100ms;
}

.page-areas .areas-story[data-scene="la"] .areas-pin:nth-of-type(5) .areas-pin__mark::before {
  animation-delay: 2400ms;
}

/* The two Westlake Village suites share one building and one geocoded point. Each has its own marker, drawn just
   either side of that point, each answering only for its own half. */
.page-areas .areas-pin[data-pair] {
  width: 1rem;
}

.page-areas .areas-pin[data-pair="west"] {
  translate: -0.5rem 0;
}

.page-areas .areas-pin[data-pair="east"] {
  translate: 0.5rem 0;
}

/* The local bloom: a soft gold light behind the marker. It glows while the office is lit, and swells once as the
   office's card opens. */
.page-areas .areas-pin__bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(200 169 107 / 0.5) 0, rgb(200 169 107 / 0.18) 36%, rgb(200 169 107 / 0) 70%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity 500ms var(--ease-silk), transform 500ms var(--ease-silk);
}

.page-areas .areas-pin__bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(200 169 107 / 0) 30%, rgb(200 169 107 / 0.42) 52%, rgb(200 169 107 / 0) 70%);
  opacity: 0;
}

.page-areas .areas-pin[data-active] .areas-pin__bloom {
  opacity: 1;
  transform: scale(1);
}

/* As the card opens, a ring of light leaves the marker and fades as it widens. */
.page-areas .areas-pin[data-bloom] .areas-pin__bloom::after {
  animation: areas-pin-bloom 1000ms var(--ease-silk) both;
}

@keyframes areas-pin-bloom {
  from {
    opacity: 0.95;
    transform: scale(0.35);
  }

  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

.page-areas .areas-pin__name {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgb(200 169 107 / 0.35);
  background: var(--graphite);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, 0.25rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-silk), transform 300ms var(--ease-silk);
}

/* An office is lit when its marker or its list entry is pointed at or focused, and while its card is open. */
.page-areas .areas-pin[data-active] .areas-pin__mark {
  background: var(--gold);
  box-shadow: 0 0 0.9rem rgb(200 169 107 / 0.7), 0 0 2rem rgb(200 169 107 / 0.3);
  transform: scale(1.2);
}

.page-areas .areas-story[data-scene="la"] .areas-pin[data-active] .areas-pin__mark::before {
  animation-duration: 2200ms;
  animation-delay: 0ms;
}

.page-areas .areas-pin[data-active] .areas-pin__name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.page-areas .areas-pin[data-active] {
  z-index: 3;
}

.page-areas .areas-pin:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

.page-areas .areas-office__open {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.page-areas .areas-office__open[data-active] {
  color: var(--gold);
}

.page-areas .areas-office__open .areas-office__mark {
  transition: background-color 300ms var(--ease-silk), box-shadow 300ms var(--ease-silk);
}

.page-areas .areas-office__open[data-active] .areas-office__mark {
  background: rgb(200 169 107 / 0.2);
  box-shadow: 0 0 0.7rem rgb(200 169 107 / 0.5);
}

.page-areas .areas-story[data-scene="la"] .areas-office__open[data-active] .areas-office__mark::before {
  animation-duration: 2200ms;
  animation-delay: 0ms;
}

/* Without the page's scripts the offices are names only: nothing to open. */
.page-areas .areas-story:not([data-areas-live]) .areas-office__open {
  pointer-events: none;
  cursor: default;
}

.page-areas .areas-office__open:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* The card. On a wide screen it rests along the foot of the map, over the sea, like a caption: clear of the
   markers and of Los Angeles's name at the centre of the scene; the map stays live. */
.page-areas .areas-card {
  position: absolute;
  inset: auto auto 1.5rem 50%;
  z-index: 3;
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid rgb(200 169 107 / 0.38);
  background: var(--graphite);
  color: var(--ivory);
  box-shadow: 0 1.5rem 3rem rgb(37 37 38 / 0.72);
  transform: translateX(-50%);
}

.page-areas .areas-card[open]:not(:modal) {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}

.page-areas .areas-card:not(:modal) .areas-card__photo img {
  height: 100%;
  min-height: 14rem;
  aspect-ratio: auto;
}

/* The card resolves out of its marker (refinement pass, 8:14 PM): just after the marker blooms, it fades in from a
   slightly smaller scale about the marker's point, travelling a short way from the marker's direction. The script
   supplies the point and the direction; without them (no marker on screen) the card simply rises. */
.page-areas .areas-card[open] {
  transform-origin: var(--card-origin, 50% 100%);
  animation: areas-card-in 640ms var(--ease-silk) 140ms both;
}

@keyframes areas-card-in {
  from {
    opacity: 0;
    translate: var(--card-from-x, 0px) var(--card-from-y, 0.75rem);
    scale: 0.96;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.page-areas .areas-card__photo {
  margin: 0;
}

.page-areas .areas-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: rgb(243 239 233 / 0.06);
}

.page-areas .areas-card__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(200 169 107 / 0.45);
  border-radius: 50%;
  background: rgb(37 37 38 / 0.72);
  cursor: pointer;
}

.page-areas .areas-card__close span::before,
.page-areas .areas-card__close span::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.9rem;
  height: 1px;
  background: var(--ivory);
  transform: rotate(45deg);
}

.page-areas .areas-card__close span::after {
  transform: rotate(-45deg);
}

.page-areas .areas-card__close:focus-visible,
.page-areas .areas-card__option:focus-visible,
.page-areas .areas-card__directions:focus-visible,
.page-areas .areas-card__contact:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.page-areas .areas-card__body {
  padding: 1.1rem 1.5rem 1.25rem;
}

.page-areas .areas-card__eyebrow {
  margin: 0;
  padding-right: 2.75rem;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.page-areas .areas-card__name {
  margin: 0.5rem 0 0;
  outline: none;
}

.page-areas .areas-card__choose {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.page-areas .areas-card__option {
  min-height: 2.25rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgb(200 169 107 / 0.38);
  background: none;
  color: var(--ivory-72);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.page-areas .areas-card__option[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--ivory);
  background: rgb(200 169 107 / 0.12);
}

.page-areas .areas-card__address {
  margin: 0.75rem 0 0;
  color: var(--ivory-72);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.55;
}

.page-areas .areas-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0 0;
}

.page-areas .areas-card__directions {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.page-areas .areas-card__directions:hover {
  background: var(--gold);
  color: var(--graphite);
}

.page-areas .areas-card__away {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-areas .areas-card__contact {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-decoration-color: var(--gold-55);
  text-underline-offset: 0.3em;
}

.page-areas .areas-card__contact:hover {
  color: var(--gold);
}

/* ---------- Not sure where you belong yet? ---------- */

.page-areas .areas-ask {
  padding-block: var(--space-5) var(--space-6);
}

.page-areas .areas-ask__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
  align-items: end;
}

.page-areas .areas-ask__question {
  grid-column: 1 / 12;
  margin: 0 0 var(--space-5);
}

.page-areas .areas-ask__sentence {
  grid-column: 1 / 7;
  margin: 0;
  max-width: 28ch;
}

.page-areas .areas-ask__actions {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.page-areas .areas-ask__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: 0.25rem 2.25rem;
  background: var(--graphite);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-ui) var(--ease-silk);
}

.page-areas .areas-ask__primary:hover,
.page-areas .areas-ask__primary:focus-visible {
  color: var(--gold);
}

/* Call Shirin, the second choice (sitewide call ruling of 2026-10-10): one link under the way in, the words in
   Display S over the number, which comes from the site's contact data. Set to the actions' own alignment. */
.page-areas .areas-ask__call {
  display: inline-grid;
  justify-items: end;
  gap: 0.2rem;
  min-height: 44px;
  margin-top: var(--space-3);
  color: var(--graphite);
  text-align: right;
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-silk);
}

.page-areas .areas-ask__call-words {
  line-height: 1.1;
}

.page-areas .areas-ask__call-number {
  font-family: var(--font-ui);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.page-areas .areas-ask__call:hover,
.page-areas .areas-ask__call:focus-visible {
  color: var(--aubergine);
}

@media (max-width: 1023px) {
  .page-areas .areas-ask__call {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 719px) {
  .page-areas .areas-ask__call {
    align-self: flex-start;
  }
}

/* ---------- Tablets and narrow windows: the map above, the chapter over it ---------- */

/* ---------- Map Data & Credits (ruling of 2026-10-09, 6:55 PM) ----------
   Directly below the geographic story, on its graphite: a quiet disclosure, closed until asked for. It carries the
   credit the elevation data's licence (CC BY 4.0) requires and the relief shading's MIT notice
   (docs/ATLAS-DATA.md). Nothing sits over the map. */
.page-areas .areas-credits {
  padding-block: var(--space-2) var(--space-4);
}

.page-areas .areas-credits__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 2.75rem;
  color: var(--ivory-72);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-silk);
}

.page-areas .areas-credits__summary::-webkit-details-marker {
  display: none;
}

.page-areas .areas-credits__summary::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: -0.2rem;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform var(--dur-ui) var(--ease-silk), margin var(--dur-ui) var(--ease-silk);
}

.page-areas .areas-credits__disclosure[open] .areas-credits__summary::before {
  margin-top: -0.35rem;
  transform: rotate(45deg);
}

.page-areas .areas-credits__summary:hover {
  color: var(--ivory);
}

.page-areas .areas-credits__summary:focus-visible,
.page-areas .areas-credits__body a:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.page-areas .areas-credits__body {
  max-width: 46rem;
  padding-block: var(--space-1) var(--space-2);
  color: var(--ivory-72);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.page-areas .areas-credits__body p {
  margin: 0 0 0.85rem;
}

.page-areas .areas-credits__body strong {
  color: var(--ivory);
  font-weight: 500;
}

.page-areas .areas-credits__body a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.page-areas .areas-credits__body .areas-credits__notice {
  color: rgb(243 239 233 / 0.62);
  font-size: 0.6875rem;
  line-height: 1.6;
}

/* Below the desktop layout, and in a window under 900 px tall, the map is too short for the card to rest beneath the
   offices: the card rises as a sheet instead (areas-offices.js opens it as one by the same rule). */
@media (max-width: 1023px), (max-height: 899px) {
  .page-areas .areas-card:modal {
    position: fixed;
    inset: auto 0 0 0;
    width: min(100%, 40rem);
    max-width: none;
    max-height: 88svh;
    margin: 0 auto;
    border-width: 1px 1px 0;
    transform: none;
  }

  .page-areas .areas-card::backdrop {
    background: rgb(37 37 38 / 0.72);
  }
}

@media (max-width: 1023px) {
  /* Tablets and phones: in each market's own scene only that market is named;
     the closing overview names all four (reviewer ruling, 5:07 PM). */
  .page-areas .areas-story[data-scene="oc"] .areas-label--la,
  .page-areas .areas-story[data-scene="sd"] .areas-label--la,
  .page-areas .areas-story[data-scene="sd"] .areas-label--oc,
  .page-areas .areas-story[data-scene="bay"] .areas-label--la,
  .page-areas .areas-story[data-scene="bay"] .areas-label--oc,
  .page-areas .areas-story[data-scene="bay"] .areas-label--sd {
    opacity: 0;
  }

  .page-areas .areas-open__grid,
  .page-areas .areas-ask__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-areas .areas-open__title {
    grid-column: 1 / -1;
  }

  .page-areas .areas-open__dek {
    grid-column: 3 / 7;
  }

  .page-areas .areas-story__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    padding-block: var(--space-4);
  }

  .page-areas .areas-story__chapters,
  .page-areas .areas-story__map {
    grid-column: 1;
  }

  .page-areas .areas-story[data-areas-live] .areas-story__grid {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .page-areas .areas-story[data-areas-live] .areas-story__chapters {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-content: start;
    align-items: start;
    column-gap: var(--space-3);
  }

  .page-areas .areas-story[data-areas-live] .areas-story__key {
    grid-row: 1;
    grid-column: 2;
  }

  .page-areas .areas-offices {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 0.7rem 1.4rem;
    margin-top: var(--space-3);
  }

  .page-areas .areas-ask__question,
  .page-areas .areas-ask__sentence {
    grid-column: 1 / -1;
  }

  .page-areas .areas-ask__actions {
    grid-column: 1 / -1;
    align-items: flex-start;
    margin-top: var(--space-5);
  }
}

/* ---------- Phones: one column ---------- */

@media (max-width: 719px) {
  /* On a phone the offices sit too close together to tap one by one: the markers show, the list opens the cards. */
  .page-areas .areas-pin {
    pointer-events: none;
  }

  .page-areas .areas-pin__name {
    display: none;
  }

  .page-areas .areas-pin__mark {
    width: 0.4375rem;
    height: 0.4375rem;
  }

  .page-areas .areas-pin__mark::after {
    width: 2px;
    height: 2px;
  }

  .page-areas .areas-pin[data-pair="west"] {
    translate: -0.3125rem 0;
  }

  .page-areas .areas-pin[data-pair="east"] {
    translate: 0.3125rem 0;
  }

  .page-areas .areas-pin__bloom {
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
  }

  .page-areas .areas-office__open {
    min-height: 2.75rem;
  }

  .page-areas .areas-card:modal {
    width: 100%;
    border-width: 1px 0 0;
  }

  .page-areas .areas-open {
    padding-block: var(--space-5) var(--space-4);
  }

  .page-areas .areas-open__dek {
    grid-column: 1 / -1;
  }

  .page-areas .areas-story[data-areas-live] .areas-story__chapters {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-2);
  }

  .page-areas .areas-story[data-areas-live] .areas-story__key {
    grid-row: 2;
    grid-column: 1;
  }

  .page-areas .areas-key {
    font-size: 0.75rem;
  }

  .page-areas .areas-offices {
    grid-template-columns: repeat(2, auto);
    gap: 0.6rem 1rem;
  }

  .page-areas .areas-label {
    transform: translate(0.7rem, -50%);
    letter-spacing: 0.18em;
  }

  .page-areas .areas-label[data-areas-left] {
    transform: translate(calc(-100% - 0.7rem), -50%);
  }

  /* At this size the overview is small against the names. The Bay Area's name
     stacks in short lines, a little further from its place, clear of the
     coast below it and the state line to its east. San Diego's name sits
     offshore, below and to the left, clear of the border and the Arizona line.
     Orange County's name, set to the left of its place in the overview, stands
     a little further from it too, clear of the coast towards Los Angeles. */
  .page-areas .areas-label--bay {
    max-width: 6rem;
    transform: translate(1.1rem, -50%);
  }

  .page-areas .areas-label--oc[data-areas-left] {
    transform: translate(calc(-100% - 1.3rem), -50%);
  }

  .page-areas .areas-story .areas-label--sd,
  .page-areas .areas-story .areas-label--sd[data-areas-left] {
    text-align: right;
    transform: translate(calc(-100% - 0.5rem), 0.25rem);
  }

  .page-areas .areas-ask__question {
    margin-bottom: var(--space-4);
  }

  .page-areas .areas-ask__actions {
    align-items: stretch;
    margin-top: var(--space-4);
  }

  .page-areas .areas-ask__primary {
    min-height: 3.5rem;
    padding-inline: 1.25rem;
  }
}

/* ---------- Reduced motion: the scenes change without travel ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-areas .areas-card[open] {
    animation: none;
  }

  .page-areas .areas-credits__summary,
  .page-areas .areas-credits__summary::before {
    transition: none;
  }

  .page-areas .areas-pin,
  .page-areas .areas-pin__mark,
  .page-areas .areas-pin__name {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .page-areas .areas-story[data-areas-live] .areas-chapter,
  .page-areas .areas-story[data-areas-live] .areas-key,
  .page-areas .areas-map__context,
  .page-areas .areas-map__market,
  .page-areas .areas-map__route,
  .page-areas .areas-label {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .page-areas .areas-story[data-areas-live] .areas-chapter {
    transform: none;
  }

  .page-areas .areas-story[data-scene="la"] .areas-office__mark::before,
  .page-areas .areas-story[data-scene="la"] .areas-pin__mark::before,
  .page-areas .areas-pin[data-bloom] .areas-pin__bloom::after,
  .page-areas .areas-story[data-scene="oc"] .areas-map__market--oc .areas-map__field--market,
  .page-areas .areas-story[data-scene="sd"] .areas-map__market--sd .areas-map__field--market,
  .page-areas .areas-story[data-scene="bay"] .areas-map__market--bay .areas-map__field--market,
  .page-areas .areas-story[data-scene="oc"] .areas-map__market--oc .areas-map__ring,
  .page-areas .areas-story[data-scene="sd"] .areas-map__market--sd .areas-map__ring,
  .page-areas .areas-story[data-scene="bay"] .areas-map__market--bay .areas-map__ring {
    animation: none;
  }

  .page-areas .areas-pin__bloom,
  .page-areas .areas-office__open .areas-office__mark {
    transition-duration: 1ms;
  }
}

/* Oct17 approved six-page CTA and review polish; page-scoped only. */
.page-areas .areas-ask{min-height:clamp(38rem,85svh,58rem);padding-top:clamp(4rem,8vw,8rem);padding-bottom:0;display:grid;align-items:end}.page-areas .areas-ask__grid{width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(2rem,5vw,6rem);align-items:end}.page-areas .areas-ask__question{grid-column:1/-1;grid-row:1;margin-bottom:clamp(2rem,5vw,4rem)}.page-areas .areas-ask__sentence{grid-column:1;grid-row:2;align-self:end}.page-areas .areas-ask__actions{grid-column:1;grid-row:3;align-items:flex-start;justify-self:start;padding-bottom:clamp(2.5rem,6vh,5rem)}.page-areas .areas-ask__call{justify-items:start;text-align:left}.page-areas .areas-ask__primary[hidden]{display:none!important}.page-areas .areas-ask__visual{grid-column:2;grid-row:2/4;justify-self:end;align-self:end;line-height:0}.page-areas .areas-ask__sign{font-size:clamp(.8rem,1.3vw,1.15rem);line-height:normal;vertical-align:bottom}.page-areas .areas-ask__panel{animation:areas-cta-sign-flip 10s ease-in-out 1s infinite}@keyframes areas-cta-sign-flip{0%,24%{transform:rotateX(0deg)}36%,63%{transform:rotateX(180deg)}76%,100%{transform:rotateX(0deg)}}@media(max-width:900px){.page-areas .areas-ask__grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.5rem,4vw,3rem)}.page-areas .areas-ask__question{grid-column:1;grid-row:auto;margin-bottom:0}.page-areas .areas-ask__sentence{grid-column:1;grid-row:auto}.page-areas .areas-ask__actions{grid-column:1;grid-row:auto;padding-bottom:0}.page-areas .areas-ask__visual{grid-column:1;grid-row:auto;justify-self:center}.page-areas .areas-ask__sign{font-size:clamp(.75rem,2.9vw,1rem)}}@media(prefers-reduced-motion:reduce){.page-areas .areas-ask__panel{animation:none}}


/* October 17: remove empty market gallery, then align the closing CTA with
   Buy/Sell/Sold typography and the same planted sign. Map and sign motion stay locked. */
.page-areas .areas-ask__grid {grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;}
.page-areas .areas-ask__copy {grid-column:1;grid-row:1;min-width:0;align-self:center;padding-bottom:clamp(2.5rem,6vh,5rem);}
.page-areas .areas-ask__question {grid-column:auto;grid-row:auto;max-width:14ch;margin:0;color:var(--graphite);font-family:var(--font-display);font-size:clamp(2.8rem,5vw,6rem);font-weight:500;line-height:1.08;letter-spacing:-.012em;font-optical-sizing:none;font-variation-settings:"opsz" 20;}
.page-areas .areas-ask__sentence {grid-column:auto;grid-row:auto;max-width:35ch;margin:clamp(1.4rem,2.8vw,2.4rem) 0 0;font-family:var(--font-display);font-size:clamp(1.25rem,1.8vw,1.75rem);font-weight:500;line-height:1.4;}
.page-areas .areas-ask__actions {grid-column:auto;grid-row:auto;align-items:flex-start;justify-self:start;margin-top:clamp(2.25rem,5vh,3.5rem);padding-bottom:0;}
.page-areas .areas-ask__call {justify-items:start;text-align:left;margin-top:0;}
.page-areas .areas-ask__call-words {font-family:var(--font-display);font-size:clamp(2.1rem,3.6vw,4.1rem);font-weight:500;line-height:1.1;}
.page-areas .areas-ask__call-number {font-size:clamp(1rem,1.3vw,1.3rem);}
.page-areas .areas-ask__visual {grid-column:2;grid-row:1;justify-self:end;align-self:end;}
@media(max-width:900px){
 .page-areas .areas-ask__grid {grid-template-columns:minmax(0,1fr);}
 .page-areas .areas-ask__copy {grid-column:1;grid-row:1;padding-bottom:0;}
 .page-areas .areas-ask__question {font-size:clamp(2.5rem,9vw,4.5rem);}
 .page-areas .areas-ask__visual {grid-column:1;grid-row:2;justify-self:center;}
}

/* Oct 17: universal CTA layout: same geometry on six page-scoped sheets. */
.page-areas .cta-unified{height:clamp(42rem,82svh,56rem);min-height:clamp(42rem,82svh,56rem);padding:0;display:block;overflow:hidden;}
.page-areas .cta-unified__inner{height:100%;min-height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch;gap:clamp(2rem,5vw,6rem);}
.page-areas .cta-unified__copy{min-width:0;min-height:0;height:100%;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding-top:clamp(5rem,11svh,8.5rem);padding-bottom:clamp(5.75rem,11svh,8.5rem);}
.page-areas .cta-unified__heading{grid-row:auto;grid-column:auto;max-width:18.5ch;margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(3rem,5.15vw,5.8rem);line-height:1.09;letter-spacing:-.012em;font-style:normal;font-optical-sizing:none;font-variation-settings:"opsz" 18;color:var(--graphite);}
.page-areas .cta-unified__actions{grid-row:auto;grid-column:auto;position:static;display:block;margin:0;padding:0;align-self:start;justify-self:start;}
.page-areas .cta-unified__call{display:inline-grid;gap:.18rem;align-content:start;justify-items:start;min-height:44px;margin:0;text-align:left;color:var(--graphite);text-decoration:none;}
.page-areas .cta-unified__call-words{font-family:var(--font-display);font-weight:500;font-size:clamp(2.2rem,3.5vw,4rem);line-height:1.1;font-optical-sizing:none;font-variation-settings:"opsz" 14;}
.page-areas .cta-unified__number{font-family:var(--font-ui);font-size:clamp(1rem,1.2vw,1.25rem);font-weight:600;line-height:1.5;letter-spacing:.09em;}
.page-areas .cta-unified__visual{grid-row:1;grid-column:2;justify-self:end;align-self:end;line-height:0;}
.page-areas .cta-unified__visual .sign{vertical-align:bottom;line-height:normal;}
@media(max-width:900px){
.page-areas .cta-unified{height:auto;min-height:0;padding-top:clamp(3.5rem,8vw,5rem);}
.page-areas .cta-unified__inner{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4rem);}
.page-areas .cta-unified__copy{grid-row:1;grid-column:1;height:auto;min-height:0;gap:clamp(2.5rem,6vw,4.5rem);padding:0;}
.page-areas .cta-unified__heading{font-size:clamp(2.6rem,8.2vw,4.6rem);line-height:1.1;max-width:20ch;}
.page-areas .cta-unified__actions{margin:0;}
.page-areas .cta-unified__visual{grid-row:2;grid-column:1;justify-self:center;align-self:end;}
}
.page-areas .cta-unified__copy [hidden]{display:none!important;}

/* Oct23: Areas opening band matches Buy/Sell/Sold exactly. */
.page-areas .areas-open{min-height:clamp(24rem,43svh,34rem);padding-block:clamp(4rem,7vh,6rem);display:block;}
.page-areas .areas-open__grid{display:block;width:100%;}
.page-areas .areas-open__title{grid-column:1 / 12;max-width:20ch;margin:0;font-size:clamp(3rem,6vw,7.25rem);line-height:1.03;letter-spacing:-.015em;}
@media(max-width:719px){.page-areas .areas-open{min-height:clamp(22rem,40svh,28rem);padding-block:3.5rem;}.page-areas .areas-open__title{font-size:clamp(3rem,10vw,4.5rem);}}


/* October 26 Areas phone-only legibility cleanup: no map/scroll changes,
   no altered office coordinates, no other pages or desktop modifications. */
.page-areas .areas-office__mobile-colon,
.page-areas .areas-card__contact--phone { display: none; }
@media (max-width: 719px) {
  /* Five actual addresses remain untouched; the visible squares are fanned
     apart slightly for legibility on a narrow screen. */
  .page-areas .areas-pin[data-entry="calabasas"] { translate: -.85rem -.8rem; }
  .page-areas .areas-pin[data-entry="westlake-village"] { translate: -1.1rem .25rem; }
  .page-areas .areas-pin[data-entry="westlake-executive"] { translate: -.15rem 1.05rem; }
  .page-areas .areas-pin[data-entry="sherman-oaks"] { translate: .65rem -.65rem; }
  .page-areas .areas-pin[data-entry="beverly-hills"] { translate: 1.05rem .5rem; }

  /* Readable office names; only Executive Suites receives a deliberate break. */
  .page-areas .areas-story .areas-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .7rem;
  }
  .page-areas .areas-story .areas-office { min-width: 0; }
  .page-areas .areas-story .areas-office__open {
    min-width: 0;
    max-width: 100%;
    gap: .45rem;
    font-size: clamp(.875rem, 3.5vw, 1.05rem);
    line-height: 1.32;
    letter-spacing: .015em;
  }
  .page-areas .areas-office__executive-label {
    display: inline-block;
    min-width: 0;
    text-align: left;
  }
  .page-areas .areas-office__mobile-colon { display: inline; }
  .page-areas .areas-office__executive-second { display: block; }

  /* Legibility for the service-region key and the region labels. */
  .page-areas .areas-story .areas-key {
    font-size: clamp(1rem, 4vw, 1.14rem);
    line-height: 1.35;
    gap: .7rem;
  }
  .page-areas .areas-story .areas-label {
    font-size: clamp(.83rem, 3.55vw, .97rem);
    letter-spacing: .10em;
    line-height: 1.28;
    max-width: 8.4rem;
    text-shadow: 0 1px 5px rgb(37 37 38 / .96);
  }

  /* Preserve the gold Los Angeles geographic anchor. Stagger the statewide
     overview labels away from LA/OC's near-identical positions; labels still
     follow the original measured map coordinates as the map animates. */
  .page-areas .areas-story[data-scene="all"] .areas-label--la,
  .page-areas .areas-story[data-scene="all"] .areas-label--la[data-areas-left] {
    color: var(--gold);
    text-align: right;
    transform: translate(calc(-100% - .65rem), calc(-100% - 1.35rem));
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--oc,
  .page-areas .areas-story[data-scene="all"] .areas-label--oc[data-areas-left] {
    text-align: right;
    transform: translate(calc(-100% - .55rem), .55rem);
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--sd,
  .page-areas .areas-story[data-scene="all"] .areas-label--sd[data-areas-left] {
    text-align: right;
    transform: translate(calc(-100% - .55rem), .65rem);
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--bay,
  .page-areas .areas-story[data-scene="all"] .areas-label--bay[data-areas-left] {
    max-width: 8rem;
    text-align: left;
    transform: translate(.6rem, calc(-100% - .3rem));
  }

  /* The desktop Contact link is unchanged; only the mobile popup's link
     becomes a large, accessible phone dial action. */
  .page-areas .areas-card__contact--desktop { display: none; }
  .page-areas .areas-card__contact--phone {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ivory);
    font-size: clamp(1.05rem, 4.2vw, 1.2rem);
    line-height: 1.3;
    font-weight: 600;
    text-decoration-color: var(--gold);
    text-underline-offset: .25em;
  }
}


/* Oct 26 Areas mobile R4: single-column office list and calm closing overview.
   Only phone layout changes. All geographic SVG paths, existing HTML buttons,
   modal behavior, click targets, animation timing and desktop rules preserved. */
@media (max-width: 719px) {
  /* Five offices, one per line, left aligned. Keep the second Westlake
     office as a single intentional line, not a wrapped Executive Suites. */
  .page-areas .areas-story .areas-offices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: .2rem;
    margin-top: clamp(.65rem, 1.3svh, .9rem);
  }
  .page-areas .areas-story .areas-office {
    width: 100%;
    min-width: 0;
  }
  .page-areas .areas-story .areas-office__open {
    min-height: 2.75rem;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: clamp(.95rem, 3.7vw, 1.125rem);
    line-height: 1.25;
    white-space: nowrap;
  }
  .page-areas .areas-story .areas-office__open[data-entry="westlake-executive"] {
    font-size: clamp(.82rem, 3.35vw, 1rem);
    letter-spacing: 0;
  }
  .page-areas .areas-office__executive-label {
    display: inline;
    white-space: nowrap;
  }
  .page-areas .areas-office__executive-second {
    display: inline;
    white-space: nowrap;
  }

  /* Visual offsets only; return both Westlake pins and the western office
     marks landward. All five retain their original measured map anchors.
     No markers are shifted west toward the Pacific. */
  .page-areas .areas-pin[data-entry="calabasas"] {
    translate: .7rem -.2rem;
  }
  .page-areas .areas-pin[data-entry="westlake-village"] {
    translate: .35rem -.6rem;
  }
  .page-areas .areas-pin[data-entry="westlake-executive"] {
    translate: .35rem .6rem;
  }
  .page-areas .areas-pin[data-entry="sherman-oaks"] {
    translate: .6rem -.5rem;
  }
  .page-areas .areas-pin[data-entry="beverly-hills"] {
    translate: .8rem .45rem;
  }

  /* Final chapter only: move the entire map up slightly to preserve a
     readable San Diego label above the viewport's lower content boundary.
     Every intermediate map view and animation remains unchanged. */
  .page-areas .areas-story[data-scene="all"] .areas-story__map {
    transform: translateY(-1rem);
  }

  /* Closing overview labels get a clean mobile cartographic arrangement.
     They remain the same four labels, but no longer inherit cramped anchor
     positions or automatic left/right flipping. */
  .page-areas .areas-story[data-scene="all"] .areas-label {
    max-width: none;
    width: max-content;
    font-size: clamp(.73rem, 3.05vw, .9rem);
    line-height: 1.35;
    letter-spacing: .08em;
    white-space: nowrap;
    opacity: 1;
    text-align: left;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--bay,
  .page-areas .areas-story[data-scene="all"] .areas-label--bay[data-areas-left] {
    left: 7% !important;
    top: 28% !important;
    max-width: none;
    white-space: nowrap;
    transform: none;
    text-align: left;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--la,
  .page-areas .areas-story[data-scene="all"] .areas-label--la[data-areas-left] {
    left: 57% !important;
    top: 57% !important;
    color: var(--gold);
    transform: none;
    text-align: left;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--oc,
  .page-areas .areas-story[data-scene="all"] .areas-label--oc[data-areas-left] {
    left: 53% !important;
    top: 67% !important;
    transform: none;
    text-align: left;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--sd,
  .page-areas .areas-story[data-scene="all"] .areas-label--sd[data-areas-left] {
    left: 35% !important;
    top: 82% !important;
    transform: none;
    text-align: left;
  }
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-label[data-areas-out] {
    opacity: 1;
  }
}


/* Oct 26 Areas R5: minimal phone-only corrections after founder's video.
   Geographic markers are returned to their ORIGINAL mobile offsets; no
   synthetic offshore fanning. The scroll sequence and desktop remain locked. */
@media (max-width: 719px) {
  .page-areas .areas-pin[data-entry="calabasas"],
  .page-areas .areas-pin[data-entry="sherman-oaks"],
  .page-areas .areas-pin[data-entry="beverly-hills"] {
    translate: 0 0;
  }
  /* The two Westlake suites share one true point: retain their original
     modest left/right split, not the experimental displacements. */
  .page-areas .areas-pin[data-entry="westlake-village"] {
    translate: -.3125rem 0;
  }
  .page-areas .areas-pin[data-entry="westlake-executive"] {
    translate: .3125rem 0;
  }

  /* Closing Los Angeles and Orange County now start on exactly the same
     horizontal axis; San Diego and Bay Area keep their approved positions. */
  .page-areas .areas-story[data-scene="all"] .areas-label--la,
  .page-areas .areas-story[data-scene="all"] .areas-label--la[data-areas-left] {
    left: 53% !important;
  }

  /* During the Orange County chapter, keep its label consistently on the
     right of the purple market glow, with no adaptive side flip. */
  .page-areas .areas-story[data-scene="oc"] .areas-label--oc,
  .page-areas .areas-story[data-scene="oc"] .areas-label--oc[data-areas-left] {
    text-align: left;
    transform: translate(.65rem, -50%);
  }
}


/* Oct 26 Areas R6: restore full map bounds without moving any locked pins
   or final labels. This overrides only the earlier final-map lift. */
@media (max-width: 719px) {
  /* The original SVG viewBox now includes the north coast and southern edge.
     Do not push the final map into the top clipping mask. */
  .page-areas .areas-story[data-scene="all"] .areas-story__map {
    transform: none;
  }
  /* The service-region legend sits slightly higher; the map itself is not
     translated, so the full California outline stays visible. */
  .page-areas .areas-story[data-scene="all"] .areas-story__key {
    translate: 0 -.75rem;
  }
}


/* October 26 mobile-only final California atlas enlargement.
   The opening, each regional scene, markers, regional captions, sticky scroll
   steps and approved desktop remain unchanged. */
@media (max-width: 719px) {
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(8.5rem, 18svh, 10.5rem) minmax(0, 1fr);
    gap: 0;
    padding-block: clamp(.65rem, 1.5svh, 1rem) clamp(.65rem, 1.5svh, 1.1rem);
  }

  /* California and the service-region key take a compact top band. */
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-story__chapters {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: clamp(.4rem, 1svh, .75rem);
    min-height: 0;
  }
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-story__key {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
    translate: 0 0;
  }

  /* The map takes the full remaining viewport below California. It extends
     to the sides of the phone rather than remaining boxed inside the wrap. */
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-story__map {
    grid-row: 2;
    grid-column: 1;
    width: calc(100% + var(--gutter) + var(--gutter));
    height: 100%;
    min-height: 0;
    margin-inline-start: calc(0px - var(--gutter));
    align-self: stretch;
    justify-self: stretch;
    transform: none;
  }

  /* Retain a very soft edge blend, but remove the 9%-deep upper/lower mask
     that would clip the north coast and San Diego on the enlarged overview. */
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-story__map {
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent),
      linear-gradient(to bottom, #000 0%, #000 99%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent),
      linear-gradient(to bottom, #000 0%, #000 99%, transparent);
    mask-composite: intersect;
  }
}


/* Oct 26 Areas R8: FINAL phone scene only. The California size, fixed city
   coordinates, original map SVG, original map framing, office pins and scroll
   steps are all locked. No desktop changes or intermediate scene restyles. */
@media (max-width: 719px) {
  /* The legend has a predictable home at the bottom-left of the sticky
     viewport, aligned with the California heading's left page gutter. */
  .page-areas .areas-story[data-areas-live][data-scene="all"] .areas-story__key {
    position: absolute;
    z-index: 5;
    left: var(--gutter);
    bottom: clamp(1.25rem, 2.7svh, 2rem);
    width: max-content;
    max-width: calc(100% - 2 * var(--gutter));
    grid-row: auto;
    grid-column: auto;
    margin: 0;
    translate: none;
    pointer-events: none;
  }

  /* A restrained graphite text halo keeps every caption readable where the
     original locked map coordinates cross illuminated coastlines/terrain. */
  .page-areas .areas-story[data-scene="all"] .areas-label {
    z-index: 2;
    text-shadow:
      0 0 .4rem rgb(37 37 38 / .98),
      0 0 .95rem rgb(37 37 38 / .98),
      0 .1rem .2rem rgb(37 37 38 / .95);
  }

  /* No shift of map coordinates or extra zoom during the reveal. The map
     container's one-off Bay-to-final motion is interpolated in areas.js. */
}


/* Oct26 Areas R9: the FINAL California scene's city text follows each
   real region instead of floating north of it. The locked city order,
   California SVG/map dimensions, office pins, legend and animation remain
   unchanged. Phone-only; other scenes and desktop untouched. */
@media (max-width: 719px) {
  .page-areas .areas-story[data-scene="all"] .areas-label--bay,
  .page-areas .areas-story[data-scene="all"] .areas-label--bay[data-areas-left] {
    left: 12% !important;
    top: 38% !important;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--la,
  .page-areas .areas-story[data-scene="all"] .areas-label--la[data-areas-left] {
    left: 53% !important;
    top: 70% !important;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--oc,
  .page-areas .areas-story[data-scene="all"] .areas-label--oc[data-areas-left] {
    left: 53% !important;
    top: 79% !important;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--sd,
  .page-areas .areas-story[data-scene="all"] .areas-label--sd[data-areas-left] {
    left: 57% !important;
    top: 88% !important;
  }
}


/* Oct 27 FINAL Areas micro-pass, mobile only. City label positions follow
   the approved Canva spatial reference. Type, map scale, geographic anchors,
   tracing paths, animations, pins, legend and desktop are untouched. */
.page-areas .areas-map__route-endpoint { display: none; }
@media (max-width: 719px) {
  .page-areas .areas-story[data-scene="all"] .areas-label--bay,
  .page-areas .areas-story[data-scene="all"] .areas-label--bay[data-areas-left] {
    left: 29% !important;
    top: 48% !important;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--la,
  .page-areas .areas-story[data-scene="all"] .areas-label--la[data-areas-left] {
    left: 60% !important;
    top: 78% !important;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--oc,
  .page-areas .areas-story[data-scene="all"] .areas-label--oc[data-areas-left] {
    left: 63% !important;
    top: 85% !important;
  }
  .page-areas .areas-story[data-scene="all"] .areas-label--sd,
  .page-areas .areas-story[data-scene="all"] .areas-label--sd[data-areas-left] {
    left: 68% !important;
    top: 91% !important;
  }

  /* The SVG route paths ALREADY end at the precise service-market anchors:
     north (105.2,705.7), south (325.1,966.1). A restrained landing point
     makes each destination explicit, with the original tracing still intact. */
  .page-areas .areas-map__route-endpoint {
    display: block;
    fill: var(--gold);
    stroke: var(--graphite);
    stroke-width: calc(var(--u) * 1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms var(--ease-silk) 2100ms;
  }
  .page-areas .areas-story[data-scene="sd"] .areas-map__route-endpoint--south,
  .page-areas .areas-story[data-scene="bay"] .areas-map__route-endpoint--south,
  .page-areas .areas-story[data-scene="bay"] .areas-map__route-endpoint--north,
  .page-areas .areas-story[data-scene="all"] .areas-map__route-endpoint--south,
  .page-areas .areas-story[data-scene="all"] .areas-map__route-endpoint--north {
    opacity: 1;
  }
}


/* Oct 27 mobile San Diego label alignment: the individual San Diego chapter
   uses the same landward side as the approved statewide view, without
   modifying its marker, line, map, or any other scene. */
@media (max-width: 719px) {
  .page-areas .areas-story[data-scene="sd"] .areas-label--sd,
  .page-areas .areas-story[data-scene="sd"] .areas-label--sd[data-areas-left] {
    text-align: left;
    transform: translate(.65rem, calc(-100% - .25rem));
    max-width: 11rem;
  }
}