/* ==========================================================================
   One Cabot Square — Holding Page
   Built from Figma "Holding Page" file. Colour + type values pulled
   directly from the design; see README.txt in /assets for asset swaps.
   ========================================================================== */

@font-face {
  font-family: 'Northwell';
  src: url('../fonts/Northwell.woff2') format('woff2'),
       url('../fonts/Northwell.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --terracotta: #c94a1b;
  --cream: #ebe3c7;
  --dark: #182b2a;
  --forest: #2e4540;

  --font-display: 'mono45-headline', 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body: 'mozaic-geo-variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Northwell', 'Allura', cursive;

  --gutter: clamp(24px, 5vw, 96px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--forest);
  background: var(--cream);
  overflow-x: hidden;
  /* Smooths out ragged line endings in body copy (inherits to every
     paragraph/caption below); figures like "88,612 sq ft" are additionally
     glued together with   in the markup so they never split mid-value. */
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 28px;
}

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.16,.84,.44,1), transform 0.9s cubic-bezier(.16,.84,.44,1);
}
.reveal--from-right { transform: translateX(64px); }
.reveal--from-left { transform: translateX(-64px); }
.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ GRID SYSTEM (custom, Bootstrap-style) ============
   36 columns, 0 gutter, 100% width container. Use .row as the
   grid parent and .col-1 through .col-36 on its direct children
   for a column span; .offset-1 through .offset-35 shifts a
   column's start point. Sections below place their own children
   with explicit grid-column values for exact, verified layout;
   the .col-*/.offset-* utilities are here for any new markup
   you add later. ============ */
.container-fluid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.row {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-auto-flow: dense;
  column-gap: 0;
  row-gap: 0;
  width: 100%;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-13 { grid-column: span 13; }
.col-14 { grid-column: span 14; }
.col-15 { grid-column: span 15; }
.col-16 { grid-column: span 16; }
.col-17 { grid-column: span 17; }
.col-18 { grid-column: span 18; }
.col-19 { grid-column: span 19; }
.col-20 { grid-column: span 20; }
.col-21 { grid-column: span 21; }
.col-22 { grid-column: span 22; }
.col-23 { grid-column: span 23; }
.col-24 { grid-column: span 24; }
.col-25 { grid-column: span 25; }
.col-26 { grid-column: span 26; }
.col-27 { grid-column: span 27; }
.col-28 { grid-column: span 28; }
.col-29 { grid-column: span 29; }
.col-30 { grid-column: span 30; }
.col-31 { grid-column: span 31; }
.col-32 { grid-column: span 32; }
.col-33 { grid-column: span 33; }
.col-34 { grid-column: span 34; }
.col-35 { grid-column: span 35; }
.col-36 { grid-column: span 36; }
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }
.offset-4 { grid-column-start: 5; }
.offset-5 { grid-column-start: 6; }
.offset-6 { grid-column-start: 7; }
.offset-7 { grid-column-start: 8; }
.offset-8 { grid-column-start: 9; }
.offset-9 { grid-column-start: 10; }
.offset-10 { grid-column-start: 11; }
.offset-11 { grid-column-start: 12; }
.offset-12 { grid-column-start: 13; }
.offset-13 { grid-column-start: 14; }
.offset-14 { grid-column-start: 15; }
.offset-15 { grid-column-start: 16; }
.offset-16 { grid-column-start: 17; }
.offset-17 { grid-column-start: 18; }
.offset-18 { grid-column-start: 19; }
.offset-19 { grid-column-start: 20; }
.offset-20 { grid-column-start: 21; }
.offset-21 { grid-column-start: 22; }
.offset-22 { grid-column-start: 23; }
.offset-23 { grid-column-start: 24; }
.offset-24 { grid-column-start: 25; }
.offset-25 { grid-column-start: 26; }
.offset-26 { grid-column-start: 27; }
.offset-27 { grid-column-start: 28; }
.offset-28 { grid-column-start: 29; }
.offset-29 { grid-column-start: 30; }
.offset-30 { grid-column-start: 31; }
.offset-31 { grid-column-start: 32; }
.offset-32 { grid-column-start: 33; }
.offset-33 { grid-column-start: 34; }
.offset-34 { grid-column-start: 35; }
.offset-35 { grid-column-start: 36; }


/* ---------- placeholder media block ---------- */
.media-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.08) 100%),
    linear-gradient(135deg, var(--forest), var(--dark));
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-placeholder span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: 0.55;
  text-transform: uppercase;
}

/* ---------- real photo ---------- */
.media-photo {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 2px;
}

/* mono45-headline only ships weight 700 */
.hero__corner,
.showcase__word,
.footer__heading,
.contact__name,
.download-link {
  font-weight: 700;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--terracotta);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--gutter);
}
.hero__corner {
  position: absolute;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 52px);
  line-height: 60px;
}
.hero__corner--canary {
  left: var(--gutter);
  bottom: var(--gutter);
}
.hero__corner--wharf {
  right: var(--gutter);
  top: var(--gutter);
  text-align: right;
}
.hero__logotype {
  width: 100%;
  aspect-ratio: 1728 / 870;
  position: relative;
}
.hero__logotype img,
.hero__logotype svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

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

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 44px;
  border: 2px solid var(--cream);
  border-radius: 14px;
  opacity: 0.8;
}
.scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: var(--cream);
  border-radius: 2px;
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ============ INTRO ============
   Positioned to match Figma "Section 1 / Variant 2" (frame 1728x870):
   heading vertically centered ~26% down; a soft highlight box sits
   behind the lower-right of the copy; the photo is flush right and
   doesn't run the full section height. All offsets below are that
   frame's pixel values expressed as % of the 1728x870 frame so the
   layout scales with the viewport. ============ */
.intro {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--cream);
}
.intro__box {
  position: absolute;
  left: 0;
  top: 43.91%;
  width: 57%;
  height: 56.09%;
  background: rgba(255, 255, 255, 0.4);
}
.intro__heading {
  position: absolute;
  left: 2.78%;
  top: 25.63%;
  transform: translateY(-50%);
  width: 27.78%;
  min-width: 260px;
  color: var(--terracotta);
  font-size: clamp(40px, 5.8vw, 100px);
  line-height: 1;
  margin: 0;
}
.intro__text {
  position: absolute;
  left: 2.78%;
  bottom: 15.29%;
  width: 29.05%;
  min-width: 240px;
}
.intro__text p {
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.45;
  margin: 0 0 14px;
}
.intro__text p:last-child { margin-bottom: 0; }
.intro__media {
  position: absolute;
  left: 44.44%;
  top: 0;
  width: 55.56%;
  height: 83.79%;
}
.intro__media .media-photo { min-height: 0; }

/* ============ SHOWCASE (location / workspace / amenities) ============
   Three panels built from Figma's "Gallery" component (node 6:451 and
   its sibling Property-1 variants): a split headline fills each half
   of the section edge to edge, a photo scales in centered on top (with
   a dark overlay), and a script caption fades in over the photo. Every
   panel shares the same 1633x878-frame geometry, expressed as % and
   recentred so the whole composition sits on the section's true
   vertical middle. The section is pinned (position: sticky) for five
   viewport-heights of scroll — roughly 1.67 viewport-heights held per
   panel — so JS (see script.js) can crossfade between panels as the
   visitor scrolls; JS reads each panel's share from this height, so
   raising or lowering it is the only change needed to hold panels
   longer or shorter. */
.showcase {
  position: relative;
  height: 500vh;
  background: var(--dark);
}
.showcase__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--cream);
}
.showcase__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.showcase__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.showcase__word {
  position: absolute;
  top: 29.5%;
  height: 41%;
  width: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(48px, 12.7vw, 220px);
  line-height: 1;
  color: var(--terracotta);
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  transition: transform 0.9s cubic-bezier(.16,.84,.44,1), opacity 0.6s ease;
}
.showcase__word--a {
  /* 2.78% matches the same edge margin used elsewhere on the page (e.g.
     .intro__heading, .footer__heading--downloads) — previously flush at
     left:0 with no margin, which read as sitting right on the viewport
     edge. Width trimmed by the same amount so the two words still meet
     exactly at the panel's 50% midline. */
  left: 2.78%;
  width: 47.22%;
  justify-content: flex-start;
  transform: translateX(-55%);
  opacity: 0;
}
.showcase__word--b {
  left: 50%;
  width: 47.22%;
  justify-content: flex-end;
  text-align: right;
  transform: translateX(55%);
  opacity: 0;
}
.showcase__panel.is-active .showcase__word--a,
.showcase__panel.is-active .showcase__word--b {
  transform: translateX(0);
  opacity: 1;
}
.showcase__media {
  position: absolute;
  left: 26.48%;
  top: 9.575%;
  width: 47.03%;
  height: 80.85%;
  z-index: 1;
  transform: scale(0.06);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(.16,.84,.44,1) 0.15s, opacity 0.5s ease 0.15s;
}
.showcase__panel.is-active .showcase__media {
  transform: scale(1);
  opacity: 1;
}
.showcase__media .media-photo { min-height: 0; }
.showcase__media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.showcase__script {
  position: absolute;
  left: 50%;
  top: 31.9%;
  width: 70%;
  height: 36.22%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(64px, 23.7vw, 410px);
  text-align: center;
  color: var(--cream);
  margin: 0;
  transform: translate(-50%, 24px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(.16,.84,.44,1) 0.25s, opacity 0.6s ease 0.25s;
}
.showcase__panel.is-active .showcase__script {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .showcase__panel,
  .showcase__word,
  .showcase__media,
  .showcase__script {
    transition: none;
  }
}

/* ============ FEATURES ============
   Matches Figma "Component 2 / Variant2" (frame 1728x870): photo is
   flush left and bottom (doesn't reach the top), a 2x2 icon grid sits
   on the right with a thin rule between each icon and its caption.
   Offsets below are that frame's pixel values expressed as % so the
   layout scales with the viewport, same technique as .intro. ============ */
.features {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--cream);
}
.features__media {
  position: absolute;
  left: 0;
  top: 16.21%;
  width: 55.56%;
  height: 83.79%;
}
.features__media .media-photo { min-height: 0; }
.features__grid {
  position: absolute;
  left: 63.37%;
  top: 19.54%;
  width: 31.2%;
  min-width: 320px;
  height: 65.06%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 5.4%;
  row-gap: clamp(32px, 6vh, 72px);
}
.feature {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.feature__icon-box {
  height: clamp(56px, 6.2vw, 108px);
  display: flex;
  align-items: flex-end;
  margin-bottom: 16px;
}
.feature__icon {
  max-height: 100%;
  width: auto;
  margin-bottom: 0;
}
.feature__divider {
  width: 100%;
  height: 0;
  margin: 0 0 20px;
  border: none;
  border-top: 1px solid var(--terracotta);
  opacity: 0.9;
}
.feature p {
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.45;
  margin: 0;
  max-width: 26ch;
}

/* ============ FOOTER ============
   Matches Figma "Footer" (frame 1728x586): two headings on a shared
   baseline, download links with an underline + arrow, two contact
   blocks, the JLL mark flush right, a full-width rule, then the
   privacy/terms/address row. Offsets are that frame's pixel values
   expressed as % so the layout scales with the viewport, same
   technique as .intro / .features. ============ */
.footer {
  position: relative;
  aspect-ratio: 1728 / 586;
  min-height: 340px;
  overflow: hidden;
  background: var(--terracotta);
  color: var(--cream);
}
.footer__heading {
  position: absolute;
  top: 25.26%;
  transform: translateY(-50%);
  width: 17%;
  min-width: 180px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.9vw, 44px);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.footer__heading--downloads { left: 2.78%; }
.footer__heading--contact { left: 47.22%; }

.download-link {
  position: absolute;
  left: 2.78%;
  width: 19.44%;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 26px);
  padding-bottom: 10px;
  overflow: hidden;
}
.download-link--1 { top: 34.98%; }
.download-link--2 { top: 50.34%; }

/* Underline is hidden at rest and slides in from the left on hover/focus,
   matching the "Default" vs "Variant2" states on the Figma component. */
.download-link__underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(235,227,199,0.5);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.download-link:hover .download-link__underline,
.download-link:focus-visible .download-link__underline {
  transform: translateX(0);
}

/* Arrow: two stacked copies in a clipped box. At rest, copy A sits in
   view and copy B waits one width to the left; on hover both slide one
   width to the right, so A exits as B slides into its place. */
.download-link__arrow {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.download-link__arrow-icon {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.download-link__arrow-icon--a { transform: translateX(0); }
.download-link__arrow-icon--b { transform: translateX(-100%); }
.download-link:hover .download-link__arrow-icon--a,
.download-link:focus-visible .download-link__arrow-icon--a { transform: translateX(100%); }
.download-link:hover .download-link__arrow-icon--b,
.download-link:focus-visible .download-link__arrow-icon--b { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .download-link__underline,
  .download-link__arrow-icon { transition: none; }
}

.contact {
  position: absolute;
  top: 48.89%;
  transform: translateY(-50%);
  width: 17%;
  min-width: 200px;
}
.contact--matthew { left: 47.22%; }
.contact--jason { left: 66.67%; }
.contact__name {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 26px);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.contact p { margin: 0 0 2px; font-size: clamp(13px, 1vw, 18px); }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }

.footer__logo {
  position: absolute;
  left: 85.88%;
  top: 46.99%;
  transform: translateY(-50%);
  width: 11.34%;
  min-width: 120px;
}
.jll-logo { width: 100%; height: auto; }

.footer__rule {
  position: absolute;
  left: 2.78%;
  right: 2.84%;
  top: 80.38%;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(235,227,199,0.5);
}

.footer__bottom {
  position: absolute;
  left: 2.78%;
  right: 2.84%;
  top: 84.81%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; }
.footer__bottom p { margin: 0 0 0 auto; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  /* Mobile reads in a different order than desktop: hero → intro →
     showcase's "workspace" panel → features → showcase's "location"
     panel → footer (amenities is dropped — see the .showcase rules
     below). <body> becomes the flex container carrying that order;
     .showcase flattens via display: contents so its individual panels
     can slot in between ordinary sections instead of only reordering
     against each other. */
  body {
    display: flex;
    flex-direction: column;
  }
  .hero { order: 1; }
  .intro { order: 2; }
  .features { order: 4; }
  .footer { order: 6; }
  /* Hero: CANARY/WHARF leave their desktop corner positions and become a
     single centered row directly under the (enlarged) logotype — "order"
     re-sequences them after it without touching the HTML/DOM order. The
     logotype bleeds past the hero's own side padding to render ~25%
     larger; .hero's overflow: hidden (set above) clips the small excess
     evenly off both edges instead of forcing a horizontal scrollbar. */
  .hero__logotype {
    order: 1;
    width: 160%;
    margin: 0 -12.5%;
  }
  /* text-align (not flex+gap) so CANARY/WHARF sit in normal inline text
     flow — the whitespace between the two <span>s in the markup collapses
     to one ordinary word space, same as any other run of text. */
  .hero__corners {
    order: 2;
    text-align: center;
    margin-top: 20px;
  }
  .hero__corner--canary,
  .hero__corner--wharf {
    display: inline-block;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    text-align: center;
    line-height: 1.1;
    /* Overrides the desktop .reveal--from-left/--from-right classes'
       translateX (a leftover from when these split to opposite corners)
       so on mobile both words rise up from below into place instead. */
    transform: translateY(28px);
  }
  .intro {
    height: auto;
    overflow: visible;
    padding: clamp(56px, 10vh, 96px) var(--gutter) clamp(40px, 8vh, 72px);
  }
  .intro__box { display: none; }
  .intro__heading,
  .intro__text,
  .intro__media {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: auto;
    min-width: 0;
  }
  .intro__heading { margin: 0 0 28px; }
  .intro__text { margin: 0 0 32px; }
  .intro__media { height: 60vw; max-height: 420px; }
  .features {
    height: auto;
    overflow: visible;
    padding: clamp(56px, 10vh, 96px) var(--gutter);
  }
  .features__media,
  .features__grid {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
    height: 60vw;
    max-height: 420px;
  }
  .features__grid {
    height: auto;
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .footer {
    aspect-ratio: auto;
    min-height: 0;
    padding: clamp(48px, 10vh, 80px) var(--gutter) 32px;
  }
  .footer__heading,
  .download-link,
  .contact,
  .footer__logo,
  .footer__rule,
  .footer__bottom {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: auto;
    min-width: 0;
  }
  .footer__heading--downloads { margin-bottom: 24px; }
  .footer__heading--contact { margin: 40px 0 24px; }
  .download-link { margin-bottom: 16px; }
  .contact { margin-bottom: 24px; }
  /* Half the width the shared position:static reset above leaves it at
     (that reset's width: auto otherwise stretches the logo to the full
     content width on mobile). */
  .footer__logo { width: 50%; margin: 8px 0 40px; }
  .footer__rule { margin-bottom: 20px; }
  .footer__bottom p { margin: 8px 0 0; flex-basis: 100%; }
  /* Below this width the pinned scroll-crossfade turns into three plain
     stacked sections — scroll-jacking a whole screen's height per panel
     doesn't work well on small touch screens — but each section keeps the
     same overlapping headline/photo/script composition as desktop
     (Figma node 180:260: CANARY over the top-left of the photo, WHARF
     over its bottom-right, "location" scripted across its middle),
     re-proportioned to a phone-shaped frame instead of collapsing to a
     plain stacked layout. */
  /* The workspace and location panels no longer sit together as one
     "showcase" block on mobile — they're pulled apart to separate points
     in the page (workspace between the intro and features, location
     between features and the footer; see the body-level order rules
     above), and amenities drops out of mobile entirely. display: contents
     on .showcase and .showcase__pin removes their own boxes so the
     individual .showcase__panel elements become direct flex items of
     <body> and can carry their own page-level `order`, instead of only
     being orderable against their two sibling panels. Each panel now
     paints its own dark green background (previously painted once by
     .showcase behind all three) since .showcase itself no longer has a
     box to paint it on. */
  .showcase,
  .showcase__pin {
    display: contents;
  }
  .showcase__panel {
    position: relative;
    width: 100%;
    aspect-ratio: 933 / 1722;
    opacity: 1;
    visibility: visible;
    transition: none;
    overflow: hidden;
    background: var(--dark);
  }
  .showcase__panel--workspace { order: 3; }
  .showcase__panel--location { order: 5; }
  .showcase__panel--amenities { display: none; }
  /* The panel itself (its green background box) stays put and fully
     visible — no panel-level fade — but its contents reuse the exact
     same entrance desktop uses: .showcase__word--a/--b's own
     opacity:0/translateX(±55%) base state and .showcase__media's
     opacity:0/scale(0.06) base state (both defined up in the un-prefixed
     SHOWCASE section above) are left alone here instead of being forced
     visible, and script.js adds the very same "is-active" class desktop
     toggles — just triggered by an IntersectionObserver watching each
     panel scroll into view instead of by the continuous pinned-scroll
     crossfade. That reuses .showcase__panel.is-active .showcase__word,
     .showcase__media and .showcase__script (and their transition timings
     — word/media/script staggered via their own transition-delay) as-is,
     so mobile plays literally the same animation as desktop, just
     scroll-triggered per panel rather than crossfaded. Only width/height
     need resetting here, since the mobile position overrides below set
     all four inset sides (top/left/right/bottom), which the base rule's
     percentage width/height would otherwise still contest. */
  .showcase__word,
  .showcase__media,
  .showcase__script {
    width: auto;
    height: auto;
  }
  .showcase__word {
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    white-space: nowrap;
    /* Desktop needs the word box clipped so its slide-in transition stays
       within bounds; mobile words are static (no slide), so let this
       overflow instead of hard-clipping the wordmark if a fallback font
       (before the brand font loads) briefly renders a touch wider than
       Figma's box. */
    overflow: visible;
    font-size: 23.58vw;
    /* Figma sets this word's own line-height (360px) to nearly the full
       height of its box (leading-[360px] against a 220px font, in a box
       sized to match) so the text spans the box edge-to-edge instead of
       hugging one side — that's what makes CANARY's bottom and WHARF's
       top actually reach into the photo below. The base rule's
       line-height: 1 leaves ~40% of the box empty, so only one word ever
       reached the photo. 1.636 = 360/220 reproduces that ratio. */
    line-height: 1.636;
  }
  .showcase__word--a {
    top: 15.91%;
    left: 7.72%;
    right: 29.9%;
    bottom: 63.18%;
  }
  .showcase__word--b {
    top: 63.88%;
    left: 40.41%;
    right: 7.61%;
    bottom: 15.21%;
  }
  .showcase__media {
    top: 28.75%;
    left: 7.72%;
    right: 7.61%;
    bottom: 28.75%;
    margin: 0;
    max-width: none;
    aspect-ratio: auto;
  }
  /* Text overlaps the photo again here, same as desktop, so the dark
     scrim comes back for contrast (dropped previously only because the
     old plain-stacked layout had no text over the photo to protect). */
  .showcase__media-overlay {
    background: rgba(0, 0, 0, 0.25);
  }
  .showcase__script {
    top: 44.23%;
    left: 3.64%;
    right: 3.57%;
    bottom: 37.3%;
    text-align: center;
    /* 43.94vw is Figma's own size for "location" (410px against a 933px
       frame) and fits it with room to spare. Figma only mocked up the
       location panel on mobile, though — "workspace" and "amenities" are
       longer words in the same script face, so that size runs each of
       them past the screen edge. Sized per word below so every caption
       reads at roughly the same visual snugness "location" has. */
    font-size: 43.94vw;
    /* Desktop centers this box with left:50% + translateX(-50%) (a
       classic centering hack, since the box's own width varies with its
       text). Mobile positions it with left/right insets instead (above),
       so it's already centered by its own geometry — but it still
       inherits that -50% X shift from the shared base/is-active rules
       defined earlier in the un-prefixed SHOWCASE section. Redefining the
       transform here (same selector/specificity as that base rule, so it
       wins by appearing later in the file) keeps only the Y component the
       reveal animation needs. */
    transform: translateY(24px);
  }
  /* Same fix for the revealed state: without this override, the caption
     starts centered (above) but jumps back to the desktop -50% X shift
     the instant its panel's entrance animation completes and is-active
     lands, since that state is also set by the un-prefixed base rule. */
  .showcase__panel.is-active .showcase__script {
    transform: translateY(0);
  }
  .showcase__panel--workspace .showcase__script {
    font-size: 34.3vw;
  }
  .showcase__panel--amenities .showcase__script {
    font-size: 36.2vw;
  }
}