/* ==========================================================================
   Jimmy Homes — Gorman
   Architectural editorial: the building is the cover story. Warm paper ground,
   charcoal for the moments a photograph carries the page, one copper accent
   from the logo. Archivo throughout, set wide for display so headings read
   with the weight of the building; near-square corners; and one motif taken
   from the logo itself — the copper hairline that traces the tower — drawn
   as an offset frame behind key photographs.
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Mono only for measured values: distances and travel times. */
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ----------------------------------------------------
   Light is the default. .on-light is a sand band; .on-dark flips the same
   names to the charcoal set, so a rule written once reads right in all three. */
:root {
  --paper:    #F6F1E9;
  --sand:     #ECE4D6;
  --card:     #FFFCF7;
  --charcoal: #1A1713;

  --fg:       #1E1A16;   /* headings, strong text */
  --fg-2:     #4B443B;   /* body */
  --fg-3:     #6B6257;   /* secondary, captions */
  --line:     rgba(30, 26, 22, .16);
  --line-2:   rgba(30, 26, 22, .08);
  --field-line: #968A7B;
  --placeholder: #766D62;
  --panel:    var(--sand);    /* a tinted area on the current ground */

  --copper:      #C0805A;     /* lines and marks; below text contrast on paper */
  --copper-text: #8A5230;     /* copper for words on paper and sand */
  --copper-btn:  #9A5933;
  --copper-btn-hover: #7A4426;
  --copper-pale: #EDC9AC;     /* copper for words on charcoal */
  --alert:    #9B3220;
  --alert-bg: #FBEAE4;

  --r-sm: 3px;
  --r:    4px;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wide: 118%;               /* display width */

  --shell: min(1360px, 100% - 4rem);
  --narrow: min(820px, 100% - 4rem);
  --header-h: 80px;
  --header-h-sm: 64px;

  --ease: cubic-bezier(.16, 1, .3, 1);   /* expo out */
}
@media (max-width: 900px) {
  :root { --shell: min(1360px, 100% - 2.5rem); --narrow: min(820px, 100% - 2.5rem); }
}
.on-light { --panel: var(--card); background: var(--sand); }
.on-dark {
  --panel:    #27221D;
  --fg:       #F3EDE4;
  --fg-2:     rgba(243, 237, 228, .80);
  --fg-3:     rgba(243, 237, 228, .62);
  --line:     rgba(243, 237, 228, .18);
  --line-2:   rgba(243, 237, 228, .08);
  --copper-text: var(--copper-pale);
  background: var(--charcoal);
  color: var(--fg-2);
}

/* ---------- Reset and browser surfaces -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scrollbar-color: #B5A893 var(--paper);
}
body {
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--copper-text);
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }   /* component display rules would otherwise win */
:focus-visible { outline: 2px solid var(--copper-text); outline-offset: 3px; }
::selection { background: var(--copper-btn); color: #fff; }

/* ---------- Type -----------------------------------------------------
   Display sizes are set wide; h3 and below stay at normal width, so the
   jump between a section and its parts is felt in shape as well as size. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--fg);
  text-wrap: balance;
}
.d1, .d2, .d3 { font-stretch: var(--wide); }
.d1 { font-size: clamp(2.7rem, 1.5rem + 4.3vw, 5.75rem); line-height: .98; letter-spacing: -.038em; }
.d2 { font-size: clamp(2.05rem, 1.3rem + 2.7vw, 3.9rem); line-height: 1; letter-spacing: -.035em; }
.d3 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); letter-spacing: -.03em; }
/* .h3 gives an h2 the h3 size where the outline needs the level but not the weight. */
h3, .h3 { font-size: clamp(1.25rem, 1.12rem + .4vw, 1.45rem); letter-spacing: -.018em; line-height: 1.25; }
p { text-wrap: pretty; }
/* Status tag after a heading: something that is planned but not open yet. */
.soon {
  display: inline-block;
  margin-left: .5rem;
  padding: .2rem .5rem;
  border: 1px solid var(--copper);
  border-radius: var(--r-sm);
  font-size: .75rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: .01em;
  line-height: 1.3;
  vertical-align: .2em;
  white-space: nowrap;
  color: var(--copper-text);
}
.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.dim { color: var(--fg-3); font-weight: 400; }
.bone { color: var(--fg); }

/* ---------- Layout --------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }
.narrow { width: var(--narrow); margin-inline: auto; }
.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section-sm { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section.flush-top { padding-top: 0; }
.head { display: grid; gap: 1.1rem; max-width: 60ch; }
.stack { display: grid; gap: 1.25rem; }
.stack-lg { display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); }

/* ---------- The copper frame ------------------------------------------
   The logo draws its tower as a copper hairline standing off the dark mass.
   Key photographs get the same line, offset up and to the left, behind the
   image; it draws itself in when the photograph arrives. The photograph
   itself is visible from the start. */
.framed { position: relative; isolation: isolate; }
.framed > img { position: relative; z-index: 1; }
.framed::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--frame, 18px)) var(--frame, 18px) var(--frame, 18px) calc(-1 * var(--frame, 18px));
  border: 1px solid var(--copper);
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.framed.rv-wipe::before { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease) .15s; }
.framed.rv-wipe.in::before { clip-path: inset(0 0 0 0); }
@media (max-width: 760px) { .framed { --frame: 10px; } }

/* ---------- Buttons and links ---------------------------------------- */
.arw { width: 1.05em; height: 1.05em; flex: none; transition: transform .45s var(--ease); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 50px;
  padding: .85rem 1.6rem;
  border-radius: var(--r-sm);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--fg);
  border: 1px solid var(--fg);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
/* A fill that sweeps in from the left on hover, in the button's own ink. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: var(--paper); }
.on-dark .btn:hover { color: var(--charcoal); }
.btn:hover .arw, .link:hover .arw, a:hover .arw { transform: translateX(4px); }
.btn-copper { background: var(--copper-btn); border-color: var(--copper-btn); color: #fff; }
.btn-copper::before { background: var(--copper-btn-hover); }
.btn-copper:hover, .on-dark .btn-copper:hover { color: #fff; border-color: var(--copper-btn-hover); }
.btn:disabled { opacity: .6; cursor: progress; }

.link {
  display: inline-flex;
  justify-self: start;   /* in a grid column, hug the words so the rule does too */
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--fg);
  padding-bottom: .2rem;
  background: linear-gradient(var(--copper), var(--copper)) left bottom / 100% 1.5px no-repeat;
  transition: color .3s var(--ease);
}
.link:hover { color: var(--copper-text); }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--fg);
  transition: background-color .45s var(--ease), height .4s var(--ease), box-shadow .45s var(--ease);
}
.hdr.is-solid {
  height: var(--header-h-sm);
  background: rgba(246, 241, 233, .92);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.hdr-inner { width: var(--shell); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: block; flex: none; }
.brand img { height: 40px; width: auto; transition: height .4s var(--ease); }
.hdr.is-solid .brand img { height: 32px; }
.brand .logo-light { display: none; }
@media (max-width: 520px) { .brand img, .hdr.is-solid .brand img { height: 30px; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a {
  position: relative;
  font-size: .96rem;
  font-weight: 500;
  padding: .45rem 0;
  color: inherit;
  opacity: .8;
  transition: opacity .3s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover, .nav a.is-current { opacity: 1; }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.hdr .btn { min-height: 42px; padding: .6rem 1.15rem; font-size: .92rem; }

/* Over the home hero the header floats on the photograph until it scrolls. */
.has-hero:not(.menu-open) .hdr:not(.is-solid) { color: #F3EDE4; }
.has-hero:not(.menu-open) .hdr:not(.is-solid) .logo-dark { display: none; }
.has-hero:not(.menu-open) .hdr:not(.is-solid) .logo-light { display: block; }

.burger { display: none; width: 44px; height: 44px; position: relative; flex: none; color: inherit; }
.burger span {
  position: absolute; left: 11px;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--paper);
  padding: calc(var(--header-h-sm) + 2rem) 0 2.5rem;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  visibility: hidden;
}
body.menu-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer-nav { display: grid; width: var(--shell); margin-inline: auto; }
.drawer-nav a {
  padding: .85rem 0;
  font-size: clamp(1.7rem, 7.5vw, 2.4rem);
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: -.035em;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), color .3s var(--ease);
}
body.menu-open .drawer-nav a { opacity: 1; transform: none; }
.drawer-nav a:hover { color: var(--copper-text); }
.drawer-foot { width: var(--shell); margin: 2rem auto 0; display: grid; gap: 1.25rem; justify-items: start; color: var(--fg-3); }
.drawer-foot .btn { width: 100%; }
.drawer-foot a:not(.btn):hover { color: var(--copper-text); }
@media (max-width: 1060px) { .nav, .hdr .btn { display: none; } .burger { display: block; } }

/* ==========================================================================
   Home hero
   The page's one authored moment. The photograph opens from a tall slot,
   the proportion of the tower in the logo, out to the full frame, while the
   neighbourhood's name sets across the bottom at the width of the page.
   It runs in CSS, so the page arrives whole even if the script never loads.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-media { position: absolute; inset: 0; animation: aperture 1.5s var(--ease) .1s both; }
@keyframes aperture {
  from { clip-path: inset(14% 41% 0 41%); }
  to   { clip-path: inset(0 0 0 0); }
}
/* The image is held oversized throughout so a pan never exposes an edge, and
   the movement is a CSS animation rather than a transition — a transition
   would rewind visibly when the slide loses .is-active. */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.hero-slide.is-active img { animation: kb1 11s linear forwards; }
.hero-slide.is-active:nth-child(2n) img { animation-name: kb2; }
.hero-slide.is-active:nth-child(3n) img { animation-name: kb3; }
.hero-slide.is-active:nth-child(4n) img { animation-name: kb4; }
/* Shallow on purpose: these photographs fill the frame edge to edge, so a
   deeper drift cuts the roofline. Keep the minimum scale above 1 + 2 x the
   largest Y translate, or the pan runs off the image. */
@keyframes kb1 { from { transform: scale(1.20) translate3d(-1.6%,  1%,   0); } to { transform: scale(1.06) translate3d( 1.2%, -.7%, 0); } }
@keyframes kb2 { from { transform: scale(1.06) translate3d( 1.4%, -.7%,  0); } to { transform: scale(1.20) translate3d(-1.2%,  .9%, 0); } }
@keyframes kb3 { from { transform: scale(1.18) translate3d( 1.6%,  .9%,  0); } to { transform: scale(1.07) translate3d(-1.4%, -.9%, 0); } }
@keyframes kb4 { from { transform: scale(1.08) translate3d(-1.2%, -1%,   0); } to { transform: scale(1.19) translate3d( 1.4%,  .8%, 0); } }

/* Shading from below, where the type sits, plus a band under the header;
   the upper frame stays clear so the building is the feature. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(18, 15, 12, .66) 0, rgba(18, 15, 12, .3) 72px, rgba(18, 15, 12, 0) 150px),
    linear-gradient(to top,
      rgba(18, 15, 12, .9) 0%,
      rgba(18, 15, 12, .84) 20%,
      rgba(18, 15, 12, .74) 36%,
      rgba(18, 15, 12, .5) 50%,
      rgba(18, 15, 12, .18) 62%,
      rgba(18, 15, 12, 0) 72%),
    /* extra weight on the left, under the opening line and its copy */
    linear-gradient(to right, rgba(18, 15, 12, .45) 0%, rgba(18, 15, 12, .2) 35%, rgba(18, 15, 12, 0) 55%);
}
.hero-body {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--header-h) + 3rem) 0 clamp(1.25rem, 3vh, 2.25rem);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "lead side" "sub side" "word word";
  align-items: end;
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1.5rem, 4vw, 4rem);
}
.hero h1 { display: contents; }
.h1-lead { grid-area: lead; display: block; font-size: clamp(1.35rem, 1.1rem + 1vw, 2.1rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.025em; line-height: 1.1; color: var(--fg); }
.hero-sub { grid-area: sub; max-width: 42ch; font-size: clamp(1rem, .96rem + .25vw, 1.15rem); color: var(--fg-2); }
.hero-side { grid-area: side; align-self: end; display: grid; gap: 1.1rem; justify-items: end; }
/* The name, set at the width of the page. It is a lockup rather than running
   text, so it is sized to the frame, not to the type scale. */
.h1-word {
  grid-area: word;
  display: block;
  /* "Gorman" measures 4.49em at this width and tracking; dividing the
     column width by 4.5 makes it fill the column exactly at any size. */
  font-size: calc(min(1360px, 100vw - 4rem) / 4.5);
  font-weight: 650;
  font-stretch: 125%;
  letter-spacing: -.055em;
  line-height: .74;
  color: var(--fg);
  margin-left: -.06em;
  padding-top: .04em;
  overflow: hidden;
}
.h1-word > i { display: block; font-style: normal; animation: rise 1.3s var(--ease) .45s both; }
@keyframes rise { from { transform: translateY(102%); } to { transform: none; } }
.hero-fade { animation: fadeUp 1s var(--ease) .9s both; }
.hero-fade.d2 { animation-delay: 1.05s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-nav { display: flex; align-items: center; gap: .9rem; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.hero-dots { display: flex; gap: .4rem; }
.hero-dots button { width: 30px; height: 2px; background: rgba(243, 237, 228, .28); position: relative; overflow: hidden; }
.hero-dots button::before { content: ''; position: absolute; inset: -10px 0; }   /* a touch target taller than the line */
.hero-dots button::after { content: ''; position: absolute; inset: 0; background: var(--copper-pale); transform: scaleX(0); transform-origin: left; }
.hero-dots button.is-active::after { animation: dotFill 7s linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .hero-body { grid-template-columns: 1fr; grid-template-areas: "lead" "sub" "side" "word"; }
  .h1-word { font-size: calc((100vw - 2.5rem) / 4.5); }
  .hero-side { justify-items: start; }
  .hero-nav { display: none; }
}

/* ==========================================================================
   Page header on every other page: a wide title beside a framed photograph
   ========================================================================== */
.banner {
  width: var(--shell);
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}
.banner > .shell { width: auto; margin: 0; order: -1; padding-bottom: clamp(.25rem, 1.5vw, 1rem); }
.banner-media { --frame: 22px; position: relative; isolation: isolate; aspect-ratio: 4 / 3; margin: var(--frame) 0 0 var(--frame); }
.banner-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.banner-media::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--frame)) var(--frame) var(--frame) calc(-1 * var(--frame));
  border: 1px solid var(--copper);
  animation: frameIn 1.6s var(--ease) .3s both;
}
@keyframes frameIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.banner h1 { margin-top: 1.25rem; max-width: 12ch; }
.banner p { margin-top: 1.4rem; }
.banner:not(:has(.banner-media)) { width: var(--narrow); grid-template-columns: 1fr; padding-bottom: 0; }
.banner:not(:has(.banner-media)) + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9rem; color: var(--fg-3); }
.crumbs a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.crumbs a:hover { color: var(--copper-text); text-decoration-color: var(--copper); }
@media (max-width: 880px) {
  .banner { grid-template-columns: 1fr; gap: 2rem; }
  .banner-media { --frame: 12px; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Home: statement and facts
   ========================================================================== */
.statement { font-size: clamp(1.7rem, 1.1rem + 2.3vw, 3.2rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.12; color: var(--fg); max-width: 26ch; text-wrap: balance; }
.statement em { font-style: normal; color: var(--copper-text); }

/* Key facts on a hairline, not in a box. */
.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--fg);
}
.spec > div { display: grid; gap: .35rem; align-content: start; }
.spec dt { font-size: .9rem; color: var(--fg-3); }
.spec dd { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); font-weight: 500; color: var(--fg); line-height: 1.4; }
.spec dd a { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: .25em; }
.spec dd a:hover { color: var(--copper-text); }
@media (max-width: 900px) { .spec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spec:not(.is-compact) { grid-template-columns: 1fr; } }

/* ==========================================================================
   Open lists — content on hairlines rather than in boxes
   ========================================================================== */
.cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.c4 { grid-template-columns: repeat(4, 1fr); }
.cols > * { display: grid; gap: .6rem; align-content: start; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.cols > li > a { display: grid; gap: .6rem; align-content: start; }
.cols p { color: var(--fg-2); font-size: .98rem; }
.cols .go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-weight: 600; color: var(--copper-text); }
.cols a :is(h2, h3) { transition: color .3s var(--ease); }
.cols a:hover :is(h2, h3) { color: var(--copper-text); }
@media (max-width: 980px) { .cols.c3, .cols.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cols.c3, .cols.c4 { grid-template-columns: 1fr; } }

/* Numbered steps, as a list (renting page and residents). */
.row-list { border-top: 1px solid var(--line); }
.row-list > li { border-bottom: 1px solid var(--line); }
.row {
  display: grid;
  /* Fixed last column: each row is its own grid, so an auto column would size
     differently in rows with and without an arrow and the copy would drift. */
  grid-template-columns: 5rem 1fr 1.2fr 2.5rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  transition: padding-left .5s var(--ease);
}
a.row:hover { padding-left: .75rem; }
.row-idx { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 500; font-stretch: 125%; line-height: .9; letter-spacing: -.04em; color: var(--copper-text); font-variant-numeric: tabular-nums; }
.row h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); font-stretch: 110%; }
.row p { font-size: 1rem; color: var(--fg-2); max-width: 48ch; }
.row-go { color: var(--copper-text); justify-self: end; }
.row-go .arw { width: 1.3rem; height: 1.3rem; }
@media (max-width: 900px) {
  .row { grid-template-columns: 3.2rem 1fr; }
  .row p { grid-column: 2; }
  .row-go { display: none; }
}

/* Home: from viewing to keys, as a timeline. The copper line fills as the
   section scrolls through, because getting from one step to the next is
   what the section is about. */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding-top: 2.25rem; }
.timeline::before, .timeline::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; }
.timeline::before { background: var(--line); }
.timeline::after { height: 2px; top: -.5px; background: var(--copper); transform-origin: left; }
@supports (animation-timeline: view()) {
  .timeline::after { animation: lineFill linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  @keyframes lineFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* The link row is pinned to the foot of each column so all four line up. */
.timeline > li { display: grid; grid-template-rows: auto auto 1fr auto; gap: .7rem; position: relative; }
.timeline > li::before { content: ''; position: absolute; top: calc(-2.25rem - 4px); left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--copper); }
.on-light .timeline > li::before { background: var(--sand); }
.timeline .num { font-size: clamp(3rem, 2rem + 3vw, 5.25rem); font-weight: 500; font-stretch: 125%; letter-spacing: -.05em; line-height: .85; color: var(--copper-text); font-variant-numeric: tabular-nums; }
.timeline h3 { margin-top: .5rem; }
.timeline p { font-size: .98rem; }
.timeline a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--fg); margin-top: .2rem; }
.timeline a:hover { color: var(--copper-text); }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; gap: 2rem; }
  .timeline::before, .timeline::after { top: 0; bottom: 0; right: auto; width: 1px; height: auto; }
  .timeline::after { width: 2px; left: -.5px; transform-origin: top; }
  @supports (animation-timeline: view()) {
    .timeline::after { animation-name: lineFillY; }
    @keyframes lineFillY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
  .timeline > li::before { top: .55rem; left: calc(-2rem - 4px); }
  .timeline .num { font-size: 2.6rem; }
}

/* Emergency numbers: what, who, then what to do. */
.contacts { border-top: 1px solid var(--fg); }
.contacts li {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1.6fr;
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.contacts .what { font-weight: 600; color: var(--fg); }
.contacts .num { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 600; font-stretch: 112%; letter-spacing: -.025em; color: var(--copper-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contacts .num a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contacts .do { font-size: .98rem; }
@media (max-width: 760px) { .contacts li { grid-template-columns: 1fr auto; } .contacts .do { grid-column: 1 / -1; } }

/* Facts with a measured value: distances, travel times. */
.facts { display: grid; }
.facts li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.facts li:first-child { border-top: 1px solid var(--line); }
.facts li > span:last-child { font-family: var(--mono); font-size: .82rem; color: var(--copper-text); white-space: nowrap; }

/* ==========================================================================
   Photographs
   ========================================================================== */
.grid { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .g3 { grid-template-columns: repeat(2, 1fr); } }

.photo { display: grid; gap: .8rem; align-content: start; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--sand); }
.photo figcaption, .photo .cap { font-weight: 500; color: var(--fg); }
a.photo img { transition: filter .5s var(--ease); }
a.photo:hover img { filter: brightness(1.06) saturate(1.05); }
a.photo:hover .cap { color: var(--copper-text); }
.photo-note { font-size: .9rem; color: var(--fg-3); }

/* Home: the suites as a filmstrip running off the right edge of the page. */
.strip-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.strip-ctrl { display: flex; align-items: center; gap: .6rem; }
.strip-btn {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--fg);
  border-radius: var(--r-sm);
  color: var(--fg);
  transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.strip-btn:hover:not(:disabled) { background: var(--fg); color: var(--paper); }
.strip-btn:disabled { opacity: .3; cursor: default; }
.strip-btn .arw { width: 1.2rem; height: 1.2rem; }
.strip-btn.prev .arw { transform: scaleX(-1); }
.strip {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Start on the column's left edge, run to the viewport's right edge.
     --edge is measured by site.js; this is the fallback. */
  --edge: max(2rem, (100vw - 1360px) / 2);
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  margin-inline: calc(50% - 50vw);
}
.strip::-webkit-scrollbar { display: none; }
.strip-foot { display: grid; gap: 1rem; }
.strip > figure { flex: 0 0 clamp(260px, 30vw, 440px); scroll-snap-align: start; display: grid; gap: .9rem; }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--sand); }
.strip figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.15rem; font-weight: 600; font-stretch: 110%; letter-spacing: -.02em; color: var(--fg); }
.strip figcaption span { font-size: .85rem; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Split: copy beside a photograph, map or panel
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.split.is-top { align-items: start; }
.split.is-feature { grid-template-columns: 1.25fr .75fr; }
.split.is-feature.is-flip { grid-template-columns: .75fr 1.25fr; }
.split-body { display: grid; gap: 1.3rem; max-width: 54ch; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.split.is-flip .split-media { order: 2; }
@media (max-width: 880px) {
  .split, .split.is-feature, .split.is-feature.is-flip { grid-template-columns: 1fr; }
  .split.is-flip .split-media { order: 0; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem clamp(1rem, 2.5vw, 1.5rem); }
.field { display: grid; gap: .45rem; align-content: start; }
.field.is-full { grid-column: 1 / -1; }
.field label { font-size: .95rem; font-weight: 600; color: var(--fg); line-height: 1.35; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 50px;
  padding: .75rem .95rem;
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  font-size: 1rem;
  color: var(--fg);
  color-scheme: light;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field select {
  padding-right: 2.5rem;
  appearance: none;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A5230' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input[readonly] { background: var(--sand); border-color: var(--line); color: var(--fg-2); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--fg-2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--copper-text);
  box-shadow: 0 0 0 3px rgba(192, 128, 90, .22);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field .hint { font-size: .88rem; color: var(--fg-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .9rem; color: var(--fg-3); line-height: 1.6; }
.form-status { display: none; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--sand); color: var(--fg); font-weight: 500; }
.form-status.is-shown { display: block; }
.form-status.is-error { background: var(--alert-bg); color: var(--alert); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Long forms: numbered sections, so a visitor always knows how far along. */
.fs { border: 0; padding: 0; min-width: 0; }
.fs + .fs { margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: clamp(2.25rem, 5vw, 3.25rem); border-top: 1px solid var(--line); }
/* Floated so the legend leaves the fieldset border instead of sitting in a
   gap cut out of it; the next element clears it. */
.fs legend {
  float: left;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -.025em;
  color: var(--fg);
}
.fs legend + * { clear: both; }
.fs-idx { font-size: .95rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--copper-text); font-variant-numeric: tabular-nums; }
.sub { margin-top: 1.25rem; padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: var(--r); background: var(--sand); }
.sub-head { font-weight: 600; color: var(--fg); margin-bottom: 1rem; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; color: var(--fg-2); cursor: pointer; line-height: 1.55; }
.field label.check { font-weight: 400; color: var(--fg-2); }
.check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--copper-btn); }
.was-validated .field :is(input, select, textarea):invalid { border-color: var(--alert); background-color: #FFF8F5; }
.was-validated .check input:invalid + span { color: var(--alert); }
.aside-sticky { position: sticky; top: calc(var(--header-h-sm) + 1.5rem); }
@media (max-width: 900px) { .aside-sticky { position: static; order: -1; } }

.contact-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Labelled facts in a side column, on hairlines. */
.detail-list { display: grid; border-top: 1px solid var(--fg); }
.detail-list > div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.detail-list .k { font-size: .9rem; font-weight: 600; color: var(--copper-text); }
.detail-list .v { color: var(--fg); line-height: 1.5; }
.detail-list .v a { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: .2em; }
.detail-list .v a:hover { color: var(--copper-text); }
.aside-head { font-size: 1.25rem; font-stretch: 112%; margin-bottom: 1rem; }

/* ==========================================================================
   Callout, questions, map
   ========================================================================== */
.callout { display: grid; gap: .85rem; padding: clamp(1.3rem, 2.6vw, 2rem); border-radius: var(--r); background: var(--panel); }
.callout.is-alert { background: var(--alert-bg); }
.callout.is-alert :is(h2, h3) { color: var(--alert); }
.callout ul { display: grid; gap: .6rem; }
.callout li { padding-left: 1.2rem; position: relative; }
.callout li::before { content: ''; position: absolute; left: 0; top: .66em; width: 7px; height: 1.5px; background: var(--copper); }
.callout.is-alert li::before { background: var(--alert); }
.callout strong { color: var(--fg); font-weight: 600; }
.callout a:not(.btn):not(.link) { color: var(--copper-text); text-decoration: underline; text-underline-offset: .2em; }
.callout.is-alert a:not(.btn):not(.link) { color: var(--alert); font-weight: 600; }

.faq { border-top: 1px solid var(--fg); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.3rem 0;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  font-weight: 600;
  color: var(--fg);
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
/* A drawn plus that turns into a cross. */
.faq summary::after {
  content: '';
  width: 16px; height: 16px;
  background:
    linear-gradient(var(--copper-text), var(--copper-text)) center / 16px 1.5px no-repeat,
    linear-gradient(var(--copper-text), var(--copper-text)) center / 1.5px 16px no-repeat;
  transition: transform .45s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--copper-text); }
.faq .ans { padding: 0 3rem 1.5rem 0; max-width: 64ch; display: grid; gap: .8rem; }
.faq .ans a { color: var(--copper-text); text-decoration: underline; text-underline-offset: .2em; }

.map { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85) sepia(.08); }
/* On charcoal the map is inverted to sit in the dark ground. */
.on-dark .map { background: var(--panel); }
.on-dark .map iframe { filter: grayscale(.4) invert(.9) hue-rotate(180deg) contrast(.9) sepia(.12); }
.map.is-wide { aspect-ratio: 16 / 8; }
@media (max-width: 760px) { .map, .map.is-wide { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Prose
   ========================================================================== */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); font-stretch: 112%; margin-top: 2.6rem; margin-bottom: .75rem; }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a:not(.link) { color: var(--copper-text); text-decoration: underline; text-decoration-color: rgba(138, 82, 48, .4); text-underline-offset: .2em; }
.prose a:not(.link):hover { text-decoration-color: var(--copper-text); }

/* ==========================================================================
   Closing call to action: a full photograph with the line set large
   ========================================================================== */
.cta { position: relative; overflow: hidden; background: var(--charcoal); }
.cta-media { position: absolute; inset: 0; }
.cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(18, 15, 12, .9) 0%, rgba(18, 15, 12, .82) 30%, rgba(18, 15, 12, .4) 50%, rgba(18, 15, 12, .05) 66%, rgba(18, 15, 12, 0) 74%),
    linear-gradient(to top, rgba(18, 15, 12, .5) 0%, rgba(18, 15, 12, 0) 30%);
}
.cta .shell { position: relative; z-index: 2; }
.cta-inner { padding: clamp(5rem, 11vw, 9.5rem) 0; display: grid; gap: 1.5rem; max-width: 40rem; }
.cta-inner .d1 { max-width: 10ch; }
.cta-inner p { color: var(--fg-2); max-width: 38ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--charcoal); }
.ftr-sig {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.ftr-sig a { font-size: clamp(2rem, 1rem + 4.2vw, 5rem); font-weight: 600; font-stretch: 125%; letter-spacing: -.045em; line-height: .95; color: var(--fg); transition: color .3s var(--ease); }
.ftr-sig a:hover { color: var(--copper-pale); }
.ftr-sig p { color: var(--fg-3); max-width: 30ch; }
.ftr-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding: clamp(2.75rem, 5vw, 4rem) 0; }
.ftr-brand img { height: 104px; width: auto; }
.ftr-brand p { margin-top: 1.25rem; max-width: 32ch; font-size: .95rem; color: var(--fg-3); }
.ftr h4 { font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--copper-pale); margin-bottom: 1rem; }
.ftr-links { display: grid; gap: .55rem; }
.ftr-links a, .ftr-contact a { color: var(--fg-2); transition: color .3s var(--ease); }
.ftr-links a:hover, .ftr-contact a:hover { color: var(--fg); }
.ftr-contact { display: grid; gap: .7rem; color: var(--fg-3); }
.ftr-bot { display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; align-items: center; padding: 1.4rem 0 2rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--fg-3); }
.ftr-bot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ftr-bot-client { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; }
/* Auto margin, not justify-content: once the row wraps, space-between packs a
   lone item to the start of its own line and the credit would slide left. */
.ftr-credit { margin-left: auto; text-align: right; }
.ftr-bot a:hover { color: var(--fg); }
@media (max-width: 980px) { .ftr-top { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-sm { margin-top: 1.25rem; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--copper-btn); color: #fff; padding: .75rem 1.2rem; border-radius: var(--r-sm); font-weight: 600; transition: top .3s var(--ease); }
.skip:focus { top: 1rem; }

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 760px) {
  :root { --header-h: 64px; --header-h-sm: 58px; }
  .section    { padding: 3.25rem 0; }
  .section-sm { padding: 1.75rem 0; }
  .hero       { min-height: 92svh; }
  .hero-body  { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 1rem; gap: 1.25rem; }
  .hero-actions .btn { flex: 1 1 auto; }
  .banner     { padding-top: calc(var(--header-h) + 1.75rem); }
  .stack-lg   { gap: 1.75rem; }
  .mt         { margin-top: 1.5rem; }
  .strip      { --edge: 1.25rem; }
  .strip > figure { flex-basis: 74%; }
  .strip-ctrl { display: none; }
  .split      { gap: 2rem; }
  .split-body { gap: 1rem; }
  .split-media img { aspect-ratio: 16 / 11; }

  .cta { display: flex; flex-direction: column; }
  .cta-media { position: relative; inset: auto; order: 1; aspect-ratio: 16 / 10; }
  .cta-media::after { display: none; }
  .cta .shell { order: 2; }
  .cta-inner { padding: 2rem 0 2.75rem; gap: 1.1rem; }

  .ftr-sig    { padding: 2.75rem 0 2rem; }
  .ftr-top    { padding: 2.25rem 0; gap: 1.5rem; }
  .ftr-brand  { grid-column: 1 / -1; }
  .ftr-brand img { height: 70px; }
  .ftr-brand p { margin-top: .8rem; }
  .prose h2   { margin-top: 1.9rem; }
}
@media (max-width: 430px) {
  .d1 { font-size: clamp(2.35rem, 10.5vw, 2.8rem); }
}