/* ============================================================
   K & K DEVELOPMENT — shared design system
   Rebuilt 2026-08-28 on the petrol identity. Replaces navy #14213A + gold
   #A9853F, which Janet retired: the gold was disliked and the navy read dark.
   Brand: petrol #0E4C5B · deep petrol #0A3742 · sage #8FA9A8 (rules only,
          never type — it is 2.5:1 on white) · bone #F4F2ED · ink #1D2328
   Type:  EB Garamond (display) + Archivo (UI/body) — the print kit's faces,
          so the website and the flyers finally look like one company.
   Contrast, measured: ink 15.9:1 and petrol 9.5:1 on white; muted 6.0:1;
          white 9.5:1 and pale petrol 7.0:1 on the petrol band.
   ============================================================ */

:root {
  --bg: #FFFFFF; --ink: #1D2328; --accent: #0E4C5B; --muted: #5C6470;
  --tint: #F4F2ED;                 /* bone — section grounds */
  --rule: #8FA9A8;                 /* sage — hairlines and rules ONLY */
  --line: rgba(29, 35, 40, 0.13);
  --band: #0E4C5B; --band-ink: #FFFFFF; --band-accent: #CFE0E2;
  --sel: rgba(14, 76, 91, 0.18);
  --step--1: clamp(0.80rem, 0.76rem + 0.18vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.28vw, 1.14rem);
  --step-1:  clamp(1.20rem, 1.08rem + 0.55vw, 1.50rem);
  --step-2:  clamp(1.45rem, 1.22rem + 1.00vw, 2.05rem);
  --step-3:  clamp(1.80rem, 1.42rem + 1.70vw, 2.95rem);
  --step-4:  clamp(2.30rem, 1.70rem + 2.70vw, 4.20rem);
  --step-5:  clamp(2.55rem, 1.80rem + 3.40vw, 4.90rem);
  --edge: clamp(1.15rem, 5vw, 5.5rem);
}
/* the dark theme is gone on purpose. Janet, 2026-08: "It is too dark." */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--ink); font-family: 'Archivo', system-ui, sans-serif; font-size: var(--step-0); line-height: 1.55; overflow-x: hidden; transition: background .6s cubic-bezier(.16,1,.3,1), color .6s cubic-bezier(.16,1,.3,1); }
::selection { background: var(--sel); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.serif { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; line-height: 1.04; }
.idx { font-family: 'Archivo'; font-size: var(--step--1); letter-spacing: .30em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
body::after { content:""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .018; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* cursor */
.cursor-dot, .cursor-ring { position: fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:10000; mix-blend-mode: difference; }
.cursor-dot { width:7px; height:7px; background:#fff; transform: translate(-50%,-50%); }
.cursor-ring { width:40px; height:40px; border:1px solid rgba(255,255,255,.6); transform: translate(-50%,-50%); transition: width .3s, height .3s, background .3s; }
.cursor-ring.grow { width:76px; height:76px; background: rgba(255,255,255,.06); }
@media (hover: none){ .cursor-dot, .cursor-ring { display:none; } }

/* nav */
nav { position: fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding: 1.3rem var(--edge); transition: background .4s, backdrop-filter .4s, padding .4s; }
nav.scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top:.9rem; padding-bottom:.9rem; }
nav.on-hero:not(.scrolled) { color:#FDFCF9; }
nav.on-hero:not(.scrolled) .brand .sub, nav.on-hero:not(.scrolled) .nav-links a { color: rgba(255,255,255,.94); }
nav.on-hero:not(.scrolled) .brand .mark, nav.on-hero:not(.scrolled) .brand .sub, nav.on-hero:not(.scrolled) .nav-links a { text-shadow: 0 1px 14px rgba(10,25,30,.65); }
nav.on-hero:not(.scrolled) .toggle { color:#fff; border-color: rgba(255,255,255,.4); }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:500; }
.brand .mark { font-family:'EB Garamond', Georgia, serif; font-size:1.95rem; font-weight:600; letter-spacing:.01em; }
.brand-logo { height:42px; width:auto; display:block; transition: height .4s; }
nav.scrolled .brand-logo { height:34px; }
.brand-logo-rev { display:none; }
nav.on-hero:not(.scrolled) .brand-logo:not(.brand-logo-rev) { display:none; }
nav.on-hero:not(.scrolled) .brand-logo-rev { display:block; filter: drop-shadow(0 2px 14px rgba(9,42,51,.55)); }
nav.on-hero:not(.scrolled) .nav-links a { text-shadow: 0 1px 2px rgba(10,25,30,.85), 0 1px 14px rgba(10,25,30,.7); }
.footer-logo { height:44px; width:auto; }
.brand .sub { font-weight:500; }
.brand .mark b { color: var(--accent); font-weight:600; }
nav.on-hero:not(.scrolled) .brand .mark { color:#fff; }
nav.on-hero:not(.scrolled) .brand .mark b { color: var(--band-accent); }
.brand .sub { font-size: var(--step--1); letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { font-size: var(--step--1); letter-spacing:.08em; text-transform:uppercase; position:relative; }
.nav-links a.phone { color: var(--accent); font-weight:500; }
nav.on-hero:not(.scrolled) .nav-links a.phone { color: var(--band-accent); }
.nav-links a:not(.phone)::after { content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background: var(--accent); transition: width .4s cubic-bezier(.16,1,.3,1); }
.nav-links a:not(.phone):hover::after, .nav-links a.active:not(.phone)::after { width:100%; }
.toggle { border:1px solid var(--line); background:transparent; color:var(--ink); font-family:inherit; font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; padding:.5rem .8rem; cursor:pointer; border-radius:999px; display:flex; align-items:center; gap:.5rem; transition: border-color .3s, color .3s; }
.toggle:hover { border-color: var(--accent); color: var(--accent); }
.toggle .dot { width:8px; height:8px; border-radius:50%; background: currentColor; }
/* nav links wrap to a second row on small screens rather than disappearing */

/* buttons */
.btn { display:inline-flex; align-items:center; gap:.75rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; padding:.95rem 1.6rem; border:1px solid var(--ink); color:var(--ink); transition: background .35s, color .35s, border-color .35s; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.gold { background: var(--accent); border-color: var(--accent); color:#fff; }
.btn.gold:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost-light { border-color: rgba(255,255,255,.6); color:#fff; }
.btn.ghost-light:hover { background:#fff; color: var(--ink); }

/* home hero */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding: clamp(6.5rem,13vh,9rem) var(--edge) 0; }
.hero-media { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 58%; transform: scale(1.04); animation: kenburns 26s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns { from{ transform: scale(1.04) translate(0,0);} to{ transform: scale(1.16) translate(-1.5%,-2%);} }
/* Scrim (2026-08-05, Janet: "front page photo is too dark — should be more alive").
   Photo stays bright across the sky/building; only a thin band under the nav and a
   bottom-anchored wash where the headline sits. Text legibility comes from text-shadow. */
.hero-scrim { position:absolute; inset:0; z-index:-1; background:
    linear-gradient(180deg, rgba(9,42,51,.34) 0%, rgba(9,42,51,.08) 11%, rgba(9,42,51,0) 24%); }
.hero .hero-inner { background: var(--band); padding: 1.15rem var(--edge) 1.35rem;
    margin: 0 calc(-1 * var(--edge)); width: calc(100% + 2 * var(--edge)); }
@media (max-width:700px){
  .hero-scrim { background:
    linear-gradient(180deg, rgba(9,42,51,.38) 0%, rgba(9,42,51,.10) 13%, rgba(9,42,51,0) 30%); }
}
.hero-inner { width:100%; color:#FDFCF9; }
.hero .lede, .hero p { text-shadow: none; }
.hero .idx { color: var(--band-accent); text-shadow: none; }
.hero h1 { font-size: var(--step-5); line-height:1.12; max-width:14ch; margin:.7rem 0 0; text-shadow: 0 2px 40px rgba(10,25,30,.4); }
.hero h1 em { font-style:italic; color: var(--band-accent); }
.hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-top:.9rem; }
.hero-sub { max-width:56ch; color: rgba(255,255,255,.94); font-size: var(--step-0); font-weight:400; }
.cta { display:inline-flex; align-items:center; gap:.85rem; font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:#fff; white-space:nowrap; }
.cta .arrow { width:44px; height:44px; border:1px solid rgba(255,255,255,.6); border-radius:50%; display:grid; place-items:center; transition: background .35s, border-color .35s, color .35s; }
.cta:hover .arrow { background: var(--band-accent); border-color: var(--band-accent); color: var(--ink); }
.scroll-cue { display:none; position:absolute; left:50%; bottom:7.5rem; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-cue::after { content:""; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform: scaleY(.4); opacity:.4; transform-origin:top;} 50%{ transform: scaleY(1); opacity:1; transform-origin:top;} }

/* interior page hero (shorter) */
/* 2026-08-05 (Janet): title/address were covering the building, and the gold logo +
   breadcrumb got lost on the bright sky. Fix: the photo gets the whole hero (building
   framed high, no text over it); the title lives in a compact NAVY CAPTION BAND along the
   bottom edge; a firmer band under the nav carries the logo. */
.page-hero { position:relative; min-height: 74svh; display:flex; align-items:flex-end; overflow:hidden; padding: 0; }
.page-hero .hero-media img { object-position:center 88%; animation-duration: 30s; }
.page-hero .hero-scrim { background:
    linear-gradient(180deg, rgba(9,42,51,.62) 0%, rgba(9,42,51,.28) 12%, rgba(9,42,51,0) 26%, rgba(9,42,51,0) 100%); }
/* The caption band must read as a BAND, not as a tint over the photograph.
   A gradient in petrol makes the parking lot look flooded with green - navy hid
   this because a navy veil reads as shade, while petrol reads as a colour cast.
   Solid band, hard edge: the same treatment as the flyers' footer band. */
.page-hero .hero-inner { width:100%; padding: 1.25rem var(--edge) 1.45rem;
    background: var(--band); }
img.pos-38 { object-position: center 38% !important; }
img.pos-30 { object-position: center 30% !important; }
img.pos-52 { object-position: center 52% !important; }
.page-hero .crumb { color: var(--band-accent); font-size: var(--step--1); letter-spacing:.2em; text-transform:uppercase; margin:0; }
.page-hero .crumb a { opacity:.85; } .page-hero .crumb a:hover { opacity:1; }
.page-hero h1 { font-family:'EB Garamond', Georgia, serif; font-weight:500; font-size: clamp(2.2rem, 4.2vw, 3.6rem); color:#fff; margin:.3rem 0 .1rem; line-height:1.02; }
.page-hero .where { color: rgba(255,255,255,.85); font-size: var(--step-0); margin:0; }
@media (max-width:600px){ .page-hero { min-height:62svh; } .page-hero .hero-media img { object-position:center 70%; } }

/* marquee */
.marquee { background: var(--band); color: var(--band-ink); overflow:hidden; white-space:nowrap; padding:.95rem 0; border-top:1px solid rgba(255,255,255,.08); }
.marquee-track { display:inline-flex; animation: scroll-x 34s linear infinite; }
.marquee-track span { font-family:'EB Garamond', Georgia, serif; font-size: var(--step-1); font-style:italic; padding:0 1.6rem; opacity:.92; }
.marquee-track span::after { content:"·"; color: var(--band-accent); margin-left:3.2rem; font-style:normal; }
@keyframes scroll-x { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* sections */
section.pad { padding: clamp(4rem,11vh,8rem) var(--edge); }
.sec-head { display:flex; align-items:baseline; gap:1.4rem; border-top:2px solid var(--rule); padding-top:1.1rem; margin-bottom: clamp(2rem,6vh,3.5rem); }
.sec-head h2 { font-family:'EB Garamond', Georgia, serif; font-weight:500; font-size: var(--step-3); }

/* intro + stats */
.intro { display:grid; grid-template-columns:1.4fr 1fr; gap: clamp(2rem,6vw,5rem); align-items:end; }
@media (max-width:860px){ .intro{ grid-template-columns:1fr; gap:2rem; } }
.intro .lede { font-family:'EB Garamond', Georgia, serif; font-weight:300; font-size: var(--step-3); line-height:1.16; }
.intro .lede em { font-style:italic; color: var(--accent); }
.intro p.body { color: var(--muted); max-width:42ch; }
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top: clamp(2.5rem,7vh,4.5rem); border-top:1px solid var(--line); padding-top:2.2rem; }
@media (max-width:620px){ .stats{ grid-template-columns:1fr; gap:1.6rem; } }
.stats.four { grid-template-columns: repeat(4,1fr); }
@media (max-width:760px){ .stats.four{ grid-template-columns: repeat(2,1fr); gap:1.8rem 1.5rem; } }
@media (max-width:420px){ .stats.four{ grid-template-columns:1fr; } }
.stat b { font-family:'EB Garamond', Georgia, serif; font-weight:500; font-size: var(--step-4); display:block; line-height:1; color: var(--ink); }
.stat b .u { color: var(--accent); font-size:.5em; margin-left:.1em; }
.stat span { display:block; color: var(--muted); font-size: var(--step--1); letter-spacing:.12em; text-transform:uppercase; margin-top:.7rem; }

/* portfolio rows */
.prop { display:grid; grid-template-columns: 0.9fr 1.5fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; padding: clamp(2rem,5vh,3.2rem) 0; border-bottom:1px solid var(--line); }
.prop:nth-child(even) .prop-media { order:2; }
.prop-media { position:relative; aspect-ratio:4/3; overflow:hidden; background: var(--tint); }
.prop-media img { width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform 1.1s cubic-bezier(.16,1,.3,1), clip-path 1.1s cubic-bezier(.16,1,.3,1); clip-path: inset(0 0 0 0); }
html.js .prop-media img { clip-path: inset(0 0 100% 0); }
html.js .prop-media img.in { clip-path: inset(0 0 0 0); }
.prop:hover .prop-media img { transform: scale(1.08); }
.prop-media .tag { position:absolute; left:1rem; top:1rem; background: var(--accent); color:#fff; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .6rem; font-weight:600; }
.prop-media .tag.leased { background: var(--muted); }
.prop-body .no { font-family:'EB Garamond', Georgia, serif; color: var(--accent); font-size: var(--step-1); }
.prop-body h3 { font-family:'EB Garamond', Georgia, serif; font-weight:500; font-size: var(--step-2); line-height:1.05; margin:.2rem 0 .6rem; }
.prop-body .where { color: var(--muted); font-size: var(--step--1); letter-spacing:.06em; text-transform:uppercase; }
.prop-body p { color: var(--muted); max-width:40ch; margin-top:.9rem; font-size:.95rem; }
.prop-body .more { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color: var(--accent); }
.prop-body .more span { transition: transform .35s; } .prop:hover .prop-body .more span { transform: translateX(5px); }
.prop-spec { display:flex; flex-direction:column; gap:1.1rem; }
.prop-spec .sp b { font-family:'EB Garamond', Georgia, serif; font-size: var(--step-2); font-weight:500; display:block; line-height:1; }
.prop-spec .sp span { color: var(--muted); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.35rem; display:block; }
@media (max-width:860px){ .prop{ grid-template-columns:1fr; gap:1.4rem; } .prop:nth-child(even) .prop-media{ order:0; } .prop-spec{ flex-direction:row; gap:2.5rem; } }

/* navy band */
.band { background: var(--band); color: var(--band-ink); padding: clamp(4.5rem,13vh,9rem) var(--edge); }
.band .idx { color: var(--band-accent); }
.band p.statement { font-family:'EB Garamond', Georgia, serif; font-weight:300; font-size: var(--step-4); line-height:1.12; max-width:18ch; margin-top:1.3rem; }
.band p.statement em { font-style:italic; color: var(--band-accent); }
.band .growth { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top: clamp(2.5rem,7vh,4.5rem); border-top:1px solid rgba(255,255,255,.16); padding-top:2rem; max-width:60ch; }
@media (max-width:620px){ .band .growth{ grid-template-columns:1fr; gap:1.4rem; } }
.band .growth b { font-family:'EB Garamond', Georgia, serif; font-size: var(--step-2); font-weight:500; display:block; }
.band .growth span { color: rgba(241,236,224,.62); font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase; margin-top:.4rem; display:block; }

/* generic two-column split (interior pages) */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items:start; }
.split.wide-left { grid-template-columns: 1.3fr 1fr; }
@media (max-width:860px){ .split, .split.wide-left { grid-template-columns:1fr; gap:2rem; } }
.lede-serif { font-family:'EB Garamond', Georgia, serif; font-weight:300; font-size: var(--step-3); line-height:1.16; }
.lede-serif em { font-style:italic; color: var(--accent); }
.prose p { color: var(--muted); max-width:56ch; margin-bottom:1.1rem; }
.prose p b { color: var(--ink); font-weight:600; }

/* spec / availability table */
.spec-list { border-top:1px solid var(--line); margin-top:1.5rem; }
.spec-list .row { display:flex; justify-content:space-between; gap:1.5rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
.spec-list .row dt { color: var(--muted); font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; }
.spec-list .row dd { font-family:'EB Garamond', Georgia, serif; font-size: var(--step-1); text-align:right; }
.spec-list .row dd.gold { color: var(--accent); }

.suites { width:100%; border-collapse:collapse; margin-top:1rem; }
.suites th, .suites td { text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.suites th { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); font-weight:600; }
.suites td.serif { font-family:'EB Garamond', Georgia, serif; font-size: var(--step-1); }
.suites .status { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; padding:.28rem .55rem; font-weight:600; }
.suites .status.avail { background: var(--accent); color:#fff; }
.suites .status.leased { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--muted); }

/* gallery */
.gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap:.6rem; }
.gallery a { position:relative; overflow:hidden; aspect-ratio:1; background: var(--tint); }
.gallery a.span2 { grid-column: span 2; aspect-ratio: 2/1; }
.gallery img { width:100%; height:100%; object-fit:cover; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.gallery a:hover img { transform: scale(1.06); }
@media (max-width:760px){ .gallery{ grid-template-columns: repeat(2,1fr); } .gallery a.span2{ grid-column: span 2; } }

/* about */
#about, .tint { background: var(--tint); }
.owners { margin-top:2rem; display:flex; gap:3rem; flex-wrap:wrap; }
.owners div b { display:block; font-family:'EB Garamond', Georgia, serif; font-size: var(--step-1); font-weight:600; }
.owners div span { color: var(--muted); font-size: var(--step--1); letter-spacing:.06em; }
.owners div a { color: var(--accent); font-size: var(--step--1); }

/* contact + form */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; gap:2.5rem; } }
.contact h3 { font-family:'EB Garamond', Georgia, serif; font-weight:500; font-size: var(--step-4); line-height:1.02; max-width:12ch; }
.contact h3 em { font-style:italic; color: var(--accent); }
.contact .big { font-family:'EB Garamond', Georgia, serif; font-size: var(--step-3); display:block; }
.contact .big.phone { color: var(--accent); }
.contact .email { font-size: var(--step-1); color: var(--muted); margin-top:.4rem; display:inline-block; position:relative; }
.contact .email::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--line); }
.contact .email:hover::after { background: var(--accent); }
.contact .place { color: var(--muted); margin-top:1.6rem; font-size:var(--step--1); letter-spacing:.05em; line-height:1.8; text-transform:uppercase; }
form.inquiry { display:grid; gap:1.1rem; }
form.inquiry label { display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-bottom:.5rem; }
form.inquiry input, form.inquiry select, form.inquiry textarea { width:100%; background:transparent; border:1px solid var(--line); color: var(--ink); font-family:inherit; font-size:var(--step-0); padding:.85rem 1rem; transition: border-color .3s; }
form.inquiry input:focus, form.inquiry select:focus, form.inquiry textarea:focus { outline:none; border-color: var(--accent); }
form.inquiry .two { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:520px){ form.inquiry .two{ grid-template-columns:1fr; } }
form.inquiry button { justify-content:center; cursor:pointer; }
.form-note { font-size:.78rem; color: var(--muted); }

/* footer */
footer { padding:2.4rem var(--edge); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
footer .mark { font-family:'EB Garamond', Georgia, serif; font-size:1.3rem; font-weight:600; }
footer .mark b { color: var(--accent); }
footer .memberships { color: var(--muted); font-size: var(--step--1); letter-spacing:.14em; text-transform:uppercase; }
footer small { color: var(--muted); font-size:.72rem; letter-spacing:.05em; }
footer .fnav { display:flex; gap:1.5rem; }
footer .fnav a { font-size: var(--step--1); letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }
footer .fnav a:hover { color: var(--accent); }

/* reveal */
.rv { opacity:0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity:1; transform:none; }
.rv-2{ transition-delay:.08s; } .rv-3{ transition-delay:.16s; } .rv-4{ transition-delay:.24s; }

/* ---- phone layout: keep the hero clear of the fixed nav ---- */
@media (max-width: 600px){
  nav { padding-top: .95rem; padding-bottom: .95rem; }
  .nav-links { gap: 1rem; }
  .nav-links a.lease { display: inline-block; }
  .brand-logo { height: 34px; }
  nav.scrolled .brand-logo { height: 30px; }

  .hero .idx { font-size: .72rem; }
  .hero h1 { font-size: clamp(2.45rem, 10vw, 3.4rem); line-height: 1.12; margin-top: .9rem; }
  .hero-sub { font-size: 1.02rem; }
  .scroll-cue { display: none; }                  /* avoid overlap on tall content */
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .rv { opacity:1; transform:none; }
  .prop-media img { clip-path: inset(0 0 0 0); }
  .cursor-dot, .cursor-ring { display:none; }
}

/* ============================================================
   PHONE LAYOUT — reworked 2026-08-28.
   Janet: "does not size good on mobile". Three real faults, not styling taste:
     1. a 100svh hero meant the first screen was photograph and nothing else
     2. the nav hid Portfolio and About, so a phone visitor had no way into the
        properties except by scrolling the whole home page
     3. long unbroken strings (emails, the phone number) forced sideways scroll
   ============================================================ */
@media (max-width: 700px){
  /* (the home hero's in-flow rules now apply at every width — see below) */
  .hero h1 { font-size: clamp(2.2rem, 8.6vw, 3.1rem); max-width: 18ch; }
  .hero-row { margin-top: 1.3rem; gap: 1.2rem; }
  .hero-sub { font-size: 1rem; max-width: 100%; }
  .page-hero { min-height: 56svh; }

  /* 2 — every page stays reachable: the links wrap under the logo instead of
         being hidden, and the phone number is a full-width tap target */
  nav { flex-wrap: wrap; row-gap: .55rem; padding-left: var(--edge); padding-right: var(--edge); }
  .nav-links { gap: 1.15rem; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .nav-links a { display: inline-block; }
  .nav-links a { font-size: .74rem; letter-spacing: .10em; padding: .25rem 0; }
  .nav-links a.phone { margin-left: auto; }
  nav.scrolled { row-gap: .35rem; }

  /* 3 — nothing may push the page sideways */
  body { overflow-x: hidden; }
  a[href^="mailto:"], a[href^="tel:"], .contact .email, .owners div a { overflow-wrap: anywhere; }
  .contact .big { font-size: var(--step-2); }

  /* comfortable reading and thumb-sized targets */
  section.pad { padding-top: 3rem; padding-bottom: 3rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .prop-spec { flex-direction: row; flex-wrap: wrap; gap: 1.6rem 2.2rem; }
  .btn { padding: 1rem 1.5rem; }
  .cta .arrow { width: 40px; height: 40px; }
  .marquee-track span { font-size: 1rem; }
  footer { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  footer .fnav { flex-wrap: wrap; gap: 1rem 1.4rem; }
}
@media (max-width: 380px){
  .stats { grid-template-columns: 1fr; }
}

/* the pointer effects are desktop-only flourishes; on touch they are dead weight */
@media (hover: none){
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* Property hero: show the WHOLE photograph, at every width.
   Two faults, one cause. The caption band sat INSIDE a fixed-height hero box, so
   it covered the bottom of the building (Janet, 2026-08-28: "both of these pages
   are being covered"); and a cover-crop in a tall narrow phone box kept only ~47%
   of the frame's width, which on the Frontage Road picture left a sliver of
   parapet and no building at all. Fix for both: the photo returns to normal flow
   at its own aspect, and the band sits UNDER it, never on it. */
@media all {
  .page-hero { min-height: 0; display: block; }
  .page-hero .hero-media { position: relative; inset: auto; z-index: 0; }
  .page-hero .hero-media img { position: relative; width: 100%; height: auto;
                               object-fit: contain; transform: none; animation: none; }
  .page-hero .hero-scrim { display: none; }
  .page-hero .hero-inner { position: relative; z-index: 1; padding-top: 1.1rem; }
  /* the photo is now IN FLOW, so the fixed nav would sit on top of it. On these
     pages only, the nav gets its own ground and the hero starts below it. */
  body:has(.page-hero) nav { background: color-mix(in srgb, var(--bg) 94%, transparent);
      backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  body:has(.page-hero) nav .brand-logo { filter: none; }
  body:has(.page-hero) nav.on-hero:not(.scrolled) .brand-logo:not(.brand-logo-rev) { display: block; }
  body:has(.page-hero) nav.on-hero:not(.scrolled) .brand-logo-rev { display: none; }
  body:has(.page-hero) nav.on-hero:not(.scrolled) .nav-links a { color: var(--ink); text-shadow: none; }
  body:has(.page-hero) nav.on-hero:not(.scrolled) .nav-links a.phone { color: var(--accent); }
  .page-hero { padding-top: 5.6rem; background: var(--bg); }
}
@media (min-width: 701px){ .page-hero { padding-top: 6.2rem; } }

/* ---- area maps on the property pages ----------------------------------------
   A corridor map at 3112 px scaled into a 390 px phone is an unreadable smear -
   the badges are the whole point of it. So on small screens the map keeps a
   legible minimum width inside a scroller and the visitor swipes it, the same
   treatment the suites table already uses. Tapping opens the full-size file. */
.mapfig { margin: 0 0 clamp(1.6rem,4vh,2.6rem); }
.mapscroll { overflow-x: auto; border: 1px solid var(--line); background: var(--tint);
             -webkit-overflow-scrolling: touch; }
.mapscroll img { display: block; width: 100%; height: auto; }
.mapfig figcaption { color: var(--muted); font-size: var(--step--1); margin-top: .7rem;
                     display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mapfig figcaption b { color: var(--ink); font-weight: 600; }
.map-credit { color: var(--muted); font-size: .78rem; line-height: 1.6; margin-top: .4rem; }
@media (max-width: 820px){
  .mapscroll img { width: auto; min-width: 780px; }
  .mapfig figcaption::after { content: "Swipe the map \2192"; color: var(--accent); font-weight: 600; }
}

/* ============================================================
   HOME HERO — the copy band sits UNDER the photograph, not on it.
   Janet, 2026-08-29: "the header at the bottom of the pic is covering the photo."
   The band was inside a 100svh hero box with the photo cover-filling behind it,
   so the band always overlaid the bottom of the frame. Same cure as the property
   pages: the photo returns to normal flow at its own aspect, the band follows it.
   That also ends the cover-crop, so on a phone the whole building shows instead
   of a third of it.
   ============================================================ */
.hero { min-height: 0; display: block; padding: 0 var(--edge); background: var(--bg); }
.hero .hero-media { position: relative; inset: auto; z-index: 0;
                    margin: 0 calc(-1 * var(--edge)); }
.hero .hero-media img { position: relative; width: 100%; height: auto;
                        object-fit: contain; transform: none; animation: none; }
.hero .hero-scrim { display: none; }
.hero .hero-inner { position: relative; z-index: 1; }
/* the photo no longer sits behind the nav, so the nav needs its own ground */
nav { background: color-mix(in srgb, var(--bg) 94%, transparent);
      backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
nav.on-hero:not(.scrolled) .brand-logo:not(.brand-logo-rev) { display: block; }
nav.on-hero:not(.scrolled) .brand-logo-rev { display: none; }
nav.on-hero:not(.scrolled) .nav-links a,
nav.on-hero:not(.scrolled) .brand .mark { color: var(--ink); text-shadow: none; }
nav.on-hero:not(.scrolled) .nav-links a.phone { color: var(--accent); }
.hero, .page-hero { padding-top: 5.9rem; }
@media (max-width: 700px){ .hero, .page-hero { padding-top: 5.6rem; } }