/* ==========================================================================
   South Corner, Old Brighton Road, Crawley
   --------------------------------------------------------------------------
   Palette and type are taken from the client's supplied colours-and-fonts.pdf.
   The brand orange #F36C21 is used everywhere orange appears; --green is the
   dark band; --teal is a decorative accent only.
   ========================================================================== */


:root {
  --orange:           #F36C21;  /* large display, rules, button grounds only */
  --green:            #33473D;
  --green-deep:       #26362E;
  --teal:             #009F77;  /* decoration only, see rule above */

  --ink:         #1C231F;
  --ink-soft:    #4A554D;
  --paper:       #FFFFFF;
  --paper-warm:  #F6F5F1;
  --line:        #DFDDD5;

  --title: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:  "Roboto Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(3.5rem, 8vw, 7rem);
  --r: 2px;

  --nav-h: 74px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* -------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--orange); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- typography */
h1, h2, h3 {
  font-family: var(--title);
  font-weight: 600;
  line-height: 1.08;
  /* Poppins runs wider and larger on the lowercase than the brochure's Effra,
     so mixed-case headings are pulled in slightly to match the printed measure. */
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.85rem); }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.95rem); }
p { margin: 0 0 1.1em; }
.lede { font-size: 1.15em; color: var(--ink-soft); }
.band--dark .lede { color: rgba(255,255,255,.86); }

.eyebrow {
  font-family: var(--title);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 .75rem;
}
.eyebrow--on-dark { color: var(--orange); }
.h2--on-dark { color: #fff; }
.note { font-size: .9rem; color: var(--ink-soft); }
/* Areas and postcodes must never break across lines. */
.nowrap { white-space: nowrap; }

/* -------------------------------------------------------------- layout */
/* The header is fixed, so an anchored jump would otherwise land with the
   section's eyebrow and heading hidden underneath it. */
:target, section[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

.wrap { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; }
.band { padding-block: var(--band-y); }
.band--light { background: var(--paper); }
.band--light + .band--light { padding-top: 0; }
.band--dark { background: var(--green); color: #fff; }
.band--dark a { color: var(--orange); }

/* The logo's own mark, repeated as a background texture.
   Measured from Logos/SC logo 1_w.svg: four bars leaning 68 degrees, tapering
   19.39 / 13.02 / 9.62 / 8.05 wide with even ~3.5 gaps, one cycle 60.57 across.
   Those proportions are reproduced below against a 240px cycle.
   112deg is the CSS gradient angle whose bands run at 68 degrees.

   Drawn as a DARKENING overlay rather than a lightening one. Lightening the
   green eroded the backdrop under the statistics on the right of the location
   band, dropping the orange figures to 2.86:1 against a 3:1 floor. Darkening
   keeps the texture and improves every ratio over it. */
.band--dark { position: relative; overflow: hidden; }
.band--dark::after {
  content: "";
  position: absolute; inset: 0; left: auto; width: min(46%, 560px);
  background: repeating-linear-gradient(112deg,
    rgba(0,0,0,.07)   0      76.8px,   /* 32.01% */
    transparent      76.8px  90.4px,   /*  5.67% */
    rgba(0,0,0,.07)  90.4px 142.0px,   /* 21.50% */
    transparent     142.0px 155.8px,   /*  5.77% */
    rgba(0,0,0,.07) 155.8px 193.9px,   /* 15.87% */
    transparent     193.9px 208.0px,   /*  5.88% */
    rgba(0,0,0,.07) 208.0px 239.9px,   /* 13.30% */
    transparent     239.9px 300.0px);  /* breathing space between repeats */
  /* Fade the panel out towards the left rather than ending it on a straight
     vertical edge, which read as a seam down the middle of the band. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
          mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  pointer-events: none;
}
.band--dark > .wrap { position: relative; z-index: 1; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-block;
  font-family: var(--title);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .85em 1.6em;
  border-radius: var(--r);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .18s, color .18s, border-color .18s;
}
/* Orange is only 3.01:1 on white, so it is never used as text on a light
   ground. As a filled button it carries near-black type, which measures
   9.4:1 and passes comfortably. */
.btn--accent { background: var(--orange); color: #1A1207; border-color: var(--orange); }
.btn--accent:hover { background: #FF7E37; border-color: #FF7E37; }
.btn--ghost { color: #fff; border-color: rgba(255,255,255,.65); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  background: transparent;
  transition: background-color .25s, box-shadow .25s;
}
/* Before the bar gains its solid background the links sit directly on the hero
   photograph, which reaches rgb(160,164,162) in places and put white type at
   2.52:1. This scrim guarantees a dark backdrop for them at every scroll
   position, and fades out once the solid bar takes over. */
.nav::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 190%;
  background: linear-gradient(to bottom, rgba(18,26,21,.78) 0%, rgba(18,26,21,.45) 55%, rgba(18,26,21,0) 100%);
  pointer-events: none;
  transition: opacity .25s;
}
.nav.is-stuck::before { opacity: 0; }
.nav__inner { position: relative; z-index: 1; }
/* Arrives as soon as the page has scrolled the height of the bar, rather than
   waiting for the hero to clear. */
.nav.is-stuck { background: var(--green-deep); box-shadow: 0 2px 18px rgba(0,0,0,.28); }
.nav__inner {
  height: 100%;
  width: min(var(--wrap), 100% - (var(--gut) * 2));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__brand {
  display: flex; align-items: center;
  /* Held out until the hero logo has scrolled away, so the mark never appears
     twice on one screen. */
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.nav.is-stuck .nav__brand { opacity: 1; visibility: visible; }
/* The supplied logo is the white variant without the address strapline: the
   address is set as real text in the hero so it stays selectable. */
.nav__logo { width: auto; height: 26px; }

.nav__menu { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.nav__menu > ul {
  display: flex; align-items: center; gap: 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
/* Scoped to the list so the CTA button does not inherit link styling. */
.nav__menu > ul a {
  font-family: var(--title); font-weight: 500; font-size: .92rem;
  color: #fff; text-decoration: none; padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav__menu > ul a:hover, .nav__menu > ul a[aria-current="true"] { border-bottom-color: var(--orange); }
.nav__cta { padding: .6em 1.2em; font-size: .88rem; }

.nav__toggle {
  margin-left: auto; display: none;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 26px; height: 2px; background: #fff; margin-inline: auto;
  transition: transform .2s, opacity .2s;
}
.nav__bars::before, .nav__bars::after { content: ""; }
.nav__bars::before { transform: translateY(-8px); }
.nav__bars::after  { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after  { transform: rotate(-45deg); }

@media (max-width: 899px) {
  .nav__toggle { display: block; }
  .nav__brand { opacity: 1; visibility: visible; }
  .nav__logo { height: 22px; }
  .nav { background: var(--green-deep); }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--green-deep);
    padding: .5rem var(--gut) 1.5rem;
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__menu > ul a { display: block; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav__cta { margin-top: 1.25rem; text-align: center; }
}

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  /* Full viewport height. The previous 900px cap left a band of the next
     section showing on a tall desktop screen. svh is the small viewport
     height, so a mobile browser's collapsing toolbar cannot cause a jump. */
  min-height: 100svh;
  display: grid; align-items: end;
  padding: calc(var(--nav-h) + 2rem) 0 clamp(2.5rem, 6vw, 5rem);
  background: var(--green-deep);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Ken Burns: a very slow, near-imperceptible push on the hero photo. Starts
   slightly zoomed so it can settle outward without ever revealing an edge, and
   runs once rather than looping so it does not pull at the eye while someone
   reads the headline. Silenced under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__media img {
    transform: scale(1.06);
    animation: hero-kenburns 20s var(--ease) forwards;
  }
  @keyframes hero-kenburns {
    from { transform: scale(1.06); }
    to   { transform: scale(1.0); }
  }
}
/* Two scrims. The vertical one carries the text block on tall narrow screens
   where a horizontally weighted gradient would do nothing. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,28,23,.90) 0%, rgba(20,28,23,.62) 38%, rgba(20,28,23,.12) 70%, rgba(20,28,23,.30) 100%),
    linear-gradient(to right, rgba(20,28,23,.60) 0%, rgba(20,28,23,.18) 55%, transparent 100%);
}
/* The wrap width and the text measure are separate jobs. Putting a max-width
   on this element would collapse the wrap and centre the whole block in the
   viewport instead of aligning it to the left gutter, so the measure is capped
   on the individual runs of text below. */
.hero__body {
  position: relative;
  width: min(var(--wrap), 100% - (var(--gut) * 2));
  margin-inline: auto;
  color: #fff;
}
.hero__logo {
  width: auto; height: auto;
  max-width: min(560px, 78%);
  margin-bottom: 1rem;
}
/* The inline copy carries a viewBox but no width, so give it an explicit width
   and let the height follow the aspect ratio. Colours come from each shape's
   own fill attribute (slash bars orange, letters white) - do NOT set fill on
   the whole svg, it would repaint the white letter polygons too. */
.hero__logo--svg { width: min(560px, 78%); height: auto; max-width: none; overflow: visible; }

/* Letter-by-letter on load: the five slash bars and eleven letters, ordered
   left to right and given their --i in the markup, rise and fade in one after
   another; the address line fades in last as a single unit. This is a keyframe
   animation (not a transition), so it plays reliably on first paint without a
   JS trigger, and `both` fill holds each unit hidden through its own delay so
   nothing flashes. Silenced under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__logo--svg .logo-unit {
    transform-box: fill-box;
    animation: logo-rise .7s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 75ms);
  }
  .js .hero__logo--svg .logo-unit--addr {
    animation-name: logo-fade;
    animation-duration: 1s;
  }
  @keyframes logo-rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes logo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
.hero__address {
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin: 0 0 2rem;
}
.hero__kicker {
  font-family: var(--title); font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--orange); margin: 0 0 .5rem;
  max-width: 30ch;
}
.hero__kicker strong { font-weight: 600; color: #fff; }
.hero__title { color: #fff; margin-bottom: .5rem; max-width: 15ch; }
.hero__figure { margin: 0 0 .4rem; }
.hero__sqft {
  font-family: var(--title); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); color: #fff;
}
.hero__sqm { font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: rgba(255,255,255,.82); }
.hero__mez {
  font-size: 1rem; color: rgba(255,255,255,.9);
  border-left: 3px solid var(--orange); padding-left: .9rem; margin: 0 0 1.9rem;
  max-width: 48ch;
}
.hero__mez strong { color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }

/* ----------------------------------------------------------- overview */
.overview { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .overview { grid-template-columns: 1fr 1fr; } }
.overview__media img { border-radius: var(--r); }

/* ------------------------------------------------------------- specs */
.specs {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 2.25rem 1.5rem;
  /* Fixed column counts rather than auto-fit, so labels of different lengths
     cannot make the row step up and down. */
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .specs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .specs { grid-template-columns: repeat(6, 1fr); } }
.spec {
  display: grid; grid-template-rows: auto 1fr; gap: .9rem;
  justify-items: center; text-align: center;
  align-content: start;                 /* labels pin to the top of their cell */
}
.spec__icon { width: clamp(78px, 7vw, 104px); height: clamp(78px, 7vw, 104px); }
.spec__label {
  font-family: var(--title); font-weight: 500;
  font-size: .875rem; line-height: 1.35; letter-spacing: .02em;
  text-transform: uppercase; color: #fff;
  align-self: start;
  /* Labels run to one, two or three lines. Reserving three lines everywhere
     keeps the icon row on a single baseline instead of stepping up and down
     with the length of each caption. */
  min-height: calc(3 * 1.35em);
  max-width: 20ch;
}

/* ---------------------------------------------------------- schedule */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
.schedule { margin-top: 1.5rem; font-variant-numeric: tabular-nums; }
.schedule th, .schedule td { padding: .85rem 1rem; text-align: left; }
.schedule thead th {
  font-family: var(--title); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid var(--green);
}
.schedule tbody th { font-weight: 500; }
.schedule tbody tr { border-bottom: 1px solid var(--line); }
.num { text-align: right; white-space: nowrap; }
.schedule__total { font-family: var(--title); font-weight: 600; background: var(--paper-warm); }
.schedule__total--all { background: rgba(243,108,33,.10); border-bottom: 2px solid var(--orange); }
.schedule__mez { background: rgba(243,108,33,.05); }
.tag {
  display: inline-block; margin-left: .5rem;
  font-family: var(--title); font-weight: 600; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: #1A1207; background: var(--orange);
  padding: .18em .5em; border-radius: var(--r); vertical-align: .12em;
}

/* --------------------------------------------------------- mezzanine */
.mez {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 2px solid var(--line);
}
.mez__head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.mez__icon { width: 72px; height: 72px; flex: none; }
.mez__head .eyebrow { margin-bottom: .25rem; }
.mez__head h3 { margin: 0; }
.mez__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 900px) { .mez__grid { grid-template-columns: 1fr 1.1fr; } }

.mez__facts { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; gap: 1rem; }
.mez__facts li {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .4rem .6rem;
  padding-left: 1rem; border-left: 3px solid var(--orange);
}
.mez__figure { font-family: var(--title); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; }
.mez__unit { font-family: var(--title); font-weight: 500; font-size: 1rem; color: var(--ink-soft); }
.mez__cap { grid-column: 1 / -1; font-size: .95rem; color: var(--ink-soft); }
.mez__cta { margin: 0; }

.mez__media { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.mez__shot { margin: 0; }
.mez__shot--lead { grid-column: 1 / -1; }
.mez__shot img { border-radius: var(--r); width: 100%; }

/* ----------------------------------------------------------- gallery
   All 16 photographs are 16:9, so a true masonry layout is not available:
   masonry needs varied aspect ratios. To get the same broken-up rhythm while
   still filling an exact rectangle, the grid is a mosaic of 2x2 and 1x1 tiles.

   Four columns by seven rows, every cell 16:9. Four tiles span 2x2 (which is
   also 16:9, so those crop no more than the small ones) and twelve are 1x1.
   4x4 + 12x1 = 28 = 4 columns x 7 rows exactly, so there is no ragged edge.

     +-----------+-----+-----+
     |           |  2  |  3  |
     |     1     +-----+-----+
     |           |           |
     +-----+-----+     4     |
     |  5  |  6  |           |
     +-----+-----+-----+-----+
     |           |  8  |  9  |
     |     7     +-----+-----+
     |           |           |
     +-----+-----+    10     |
     | 11  | 12  |           |
     +-----+-----+-----+-----+
     | 13  | 14  | 15  | 16  |
     +-----+-----+-----+-----+                                            */
.gal {
  margin-top: 2rem;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, 1fr);
  /* 4 columns of 16:9 cells over 7 rows: 4 / (7 x 9/16) = 4 / 3.9375 */
  aspect-ratio: 4 / 3.9375;
}
.gal__item {
  margin: 0; padding: 0; border: 0; background: none;
  overflow: hidden; border-radius: var(--r);
  cursor: pointer; position: relative;
}
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gal__item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,28,23,.18); opacity: 1; transition: opacity .3s;
}
.gal__item:hover img, .gal__item:focus-visible img { transform: scale(1.05); }
.gal__item:hover::after, .gal__item:focus-visible::after { opacity: 0; }

/* Explicit placement, so the tiling is exact rather than left to auto-flow. */
.gal__item:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; }
.gal__item:nth-child(2)  { grid-area: 1 / 3 / 2 / 4; }
.gal__item:nth-child(3)  { grid-area: 1 / 4 / 2 / 5; }
.gal__item:nth-child(4)  { grid-area: 2 / 3 / 4 / 5; }
.gal__item:nth-child(5)  { grid-area: 3 / 1 / 4 / 2; }
.gal__item:nth-child(6)  { grid-area: 3 / 2 / 4 / 3; }
.gal__item:nth-child(7)  { grid-area: 4 / 1 / 6 / 3; }
.gal__item:nth-child(8)  { grid-area: 4 / 3 / 5 / 4; }
.gal__item:nth-child(9)  { grid-area: 4 / 4 / 5 / 5; }
.gal__item:nth-child(10) { grid-area: 5 / 3 / 7 / 5; }
.gal__item:nth-child(11) { grid-area: 6 / 1 / 7 / 2; }
.gal__item:nth-child(12) { grid-area: 6 / 2 / 7 / 3; }
.gal__item:nth-child(13) { grid-area: 7 / 1 / 8 / 2; }
.gal__item:nth-child(14) { grid-area: 7 / 2 / 8 / 3; }
.gal__item:nth-child(15) { grid-area: 7 / 3 / 8 / 4; }
.gal__item:nth-child(16) { grid-area: 7 / 4 / 8 / 5; }

/* Below the mosaic breakpoint the tiles would be too small to read. Two even
   columns of 16:9, which is still an exact rectangle: 16 tiles over 8 rows. */
@media (max-width: 999px) {
  .gal {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 2 / 4.5;
  }
  .gal__item:nth-child(n) { grid-area: auto; }
}
@media (max-width: 560px) {
  .gal {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(16, 1fr);
    aspect-ratio: 1 / 9;
    gap: 8px;
  }
}

/* -------------------------------------------------------------- lightbox */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(12,18,14,.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.lb[hidden] { display: none; }
.lb__stage { margin: 0; max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lb__stage img { max-width: 100%; max-height: 84svh; width: auto; height: auto; border-radius: var(--r); }
.lb__close, .lb__nav {
  position: absolute; z-index: 1;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  width: 52px; height: 52px; cursor: pointer;
  font-size: 1.9rem; line-height: 1; font-family: var(--title);
  display: grid; place-items: center;
  transition: background-color .2s, border-color .2s;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.lb__close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); font-size: 1.6rem; }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb__count {
  position: absolute; bottom: clamp(.75rem, 2vw, 1.5rem); left: 50%; transform: translateX(-50%);
  margin: 0; font-family: var(--title); font-size: .85rem; letter-spacing: .1em;
  color: rgba(255,255,255,.75);
}
@media (max-width: 560px) {
  .lb__nav { width: 44px; height: 44px; }
  .lb__nav--prev { left: .35rem; }
  .lb__nav--next { right: .35rem; }
}

/* ------------------------------------------------------------- media */
.media { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 1.75rem; }
.media__frame {
  aspect-ratio: 16 / 9;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.media__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------- location */
/* The hub image runs the full width of the content column (like the video),
   with the location copy set in two columns beneath it. */
.loc__media { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
.loc__media img { border-radius: var(--r); width: 100%; }
.loc__text { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 760px) { .loc__text { grid-template-columns: 1fr 1fr; } }
/* Left column intro, set a few points larger than body so it leads the block. */
.loc__lede {
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.55rem);
  line-height: 1.4;
  margin: 0;
}
.loc__more p:last-child { margin-bottom: 0; }
.w3w { font-family: var(--title); font-weight: 500; font-size: .95rem; }

.stats {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { align-content: start; }
.stats__figure {
  display: block;
  font-family: var(--title); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
  color: var(--orange); margin-bottom: .5rem;
}
.stats__label { display: block; font-size: .95rem; color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------- map */
.map { margin-top: clamp(2.5rem, 5vw, 4rem); }
.map__frame {
  width: 100%;
  height: clamp(20rem, 46vh, 32rem);
  /* A visible ground, so a map that fails to draw reads as an empty frame
     rather than as nothing at all. */
  background: rgba(255,255,255,.05);
  border-radius: var(--r);
}
.map__note {
  margin: .75rem 0 0;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
/* Mapbox injects its own controls and attribution; keep them clear of the
   rounded corners. */
.map .mapboxgl-map { border-radius: var(--r); }

.travel { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 800px) { .travel { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.travel__table { font-variant-numeric: tabular-nums; }
.travel__table caption {
  font-family: var(--title); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); text-align: left; padding-bottom: .75rem;
}
.travel__table th, .travel__table td { padding: .6rem .75rem; text-align: left; }
.travel__table thead th {
  font-family: var(--title); font-weight: 600; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.travel__table tbody th { font-weight: 400; color: #fff; }
.travel__table tbody td { color: rgba(255,255,255,.86); }
.travel__table tbody tr { border-bottom: 1px solid rgba(255,255,255,.12); }

/* ----------------------------------------------------------- contact */
.contact__lede { max-width: 62ch; }
.agents {
  display: grid; gap: 1.5rem; margin-top: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .agents { grid-template-columns: repeat(3, 1fr); } }
.agent {
  padding: 1.75rem;
  background: var(--paper-warm);
  border-top: 3px solid var(--orange);
  border-radius: var(--r);
}
.agent--firm {
  background: var(--green); color: #fff;
  display: flex; flex-direction: column;
}
/* The supplied FTD Johns mark is the white variant, so it needs the green
   card behind it. It replaces the firm's name, so the alt text carries it. */
.agent__logo { width: min(190px, 80%); height: auto; margin-bottom: 1.1rem; }
.agent--firm a { color: var(--orange); }
.agent__name {
  font-family: var(--title); font-weight: 600; font-size: 1.15rem;
  margin: 0 0 .75rem;
}
.agent__line { margin: 0 0 .35rem; }
.agent__line a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* -------------------------------------------------------------- foot */
.foot { background: var(--green-deep); color: rgba(255,255,255,.72); padding-block: 3rem; }
.foot__inner { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .foot__inner { grid-template-columns: 1fr 2fr; gap: 3rem; } }
.foot__addr { color: #fff; margin: 0; }
.foot__legal { font-size: .78rem; line-height: 1.55; }
.foot__legal p { margin: 0 0 .9rem; }
.foot__legal p:last-child { margin-bottom: 0; }
.foot__credit {
  font-family: var(--title); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; font-size: .72rem;
  color: rgba(255,255,255,.6);
}
.foot__credit a {
  color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .12em;
  text-decoration: none; border-bottom: 1px solid rgba(243,108,33,.7);
}
.foot__credit a:hover { color: #fff; border-bottom-color: var(--orange); }

/* A section whose CONFIG value is empty is removed by main.js; this is the
   pre-script state so nothing flashes before it is resolved. */
[data-requires] { display: none; }
[data-requires].is-enabled { display: revert; }
.hero__actions [data-requires].is-enabled { display: inline-block; }


/* ============================================================== motion
   Gated two ways: only when JS has added the `js` class (so nothing is ever
   hidden if the script fails to run) and only when the visitor has not asked
   for reduced motion. Content is fully visible without either. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal,
  .js [data-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  /* Children of a staggered container come in one after another. */
  .js [data-stagger] > * {
    transform: translate3d(0, 16px, 0);
    transition-delay: calc(var(--stagger-i, 0) * 70ms);
  }
  .js .reveal.is-visible,
  .js [data-stagger].is-visible > * {
    opacity: 1;
    transform: none;
  }
}

/* Count-up figures. The final value is the widest the text ever gets, so its
   measured width is reserved as min-width (set inline by main.js) to stop the
   changing digits reflowing their row. */
.hero__sqft [data-count],
.stats__figure[data-count] { display: inline-block; text-align: left; }

}