/* ============================================================
   462 DAUPHIN STREET — Leasing site
   A ROLO Properties building. Self-contained stylesheet:
   carries the ROLO design tokens so the site deploys on its own.
   ============================================================ */

:root {
  /* Brand green */
  --green-950:#0F1715; --green-900:#14201D; --green-800:#1E2B28; --green-700:#2A3B37;
  --green-600:#3B4F49; --green-500:#51665F; --green-400:#6E847C; --green-300:#97A89F;
  --green-200:#C3CFC8; --green-100:#DEE5E0; --green-50:#EEF1ED;
  /* Warm neutrals */
  --paper:#F6F3EC; --paper-2:#EFEBE1; --card:#FCFAF5; --white:#FFFFFF;
  --stone-100:#ECE8DE; --stone-200:#E0DBCE; --stone-300:#CFC8B7; --stone-400:#B0A893;
  --stone-500:#8C8472; --stone-600:#6B6557; --stone-700:#4D483E;
  --ink-900:#1A1814; --ink-700:#3A372F;
  --charleston:#232B2B;
  --clay:#9C5B45; --gold:#A98C5A; --moss:#4E6B4A; --moss-tint:#E2EADF;

  /* Semantic */
  --surface-page:var(--paper); --surface-band:var(--paper-2); --surface-card:var(--card);
  --text-primary:var(--ink-900); --text-secondary:var(--stone-600); --text-muted:var(--stone-500);
  --text-on-dark:var(--paper); --text-on-dark-dim:var(--green-300); --text-accent:var(--green-800);
  --border-hairline:var(--stone-300); --border-strong:var(--green-800);
  --border-on-dark:color-mix(in srgb, var(--paper) 18%, transparent);
  --accent:var(--green-800); --accent-hover:var(--green-900);

  /* Type */
  --font-serif:"Cormorant Garamond","Times New Roman",serif;
  --font-sans:"Jost","Century Gothic","Helvetica Neue",system-ui,sans-serif;
  --ls-eyebrow:0.28em; --ls-caps:0.16em; --ls-wide:0.04em; --ls-serif:0.005em;

  /* Space / layout */
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --container:1240px;
  --radius-md:3px;

  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-soft:cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--text-primary);
  font-family:var(--font-sans); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--green-800); color:var(--paper); }
h1,h2,h3,h4,p { margin:0; }
button { font-family:inherit; }

.wrap { max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ---------- Shared type ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:16px;
  font-size:0.75rem; font-weight:500; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--text-accent);
}
.eyebrow.on-dark { color:var(--text-on-dark-dim); }
.eyebrow::before {
  content:""; width:40px; height:1px; background:currentColor; opacity:0.5; flex:none;
}
.eyebrow.no-rule::before { display:none; }

.serif { font-family:var(--font-serif); font-weight:400; letter-spacing:var(--ls-serif); }

.section-h {
  font-family:var(--font-serif); font-weight:400; letter-spacing:var(--ls-serif);
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.08; color:var(--text-primary);
  text-wrap:balance;
}
.lead { font-size:1.125rem; line-height:1.7; color:var(--text-secondary); font-weight:300; }
.body { font-size:1rem; line-height:1.7; color:var(--text-secondary); font-weight:300; }

.rule { height:1px; background:var(--border-hairline); border:0; width:100%; }
.rule.short { width:48px; background:var(--border-strong); }
.rule.on-dark { background:var(--border-on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:0.875rem; font-weight:500; letter-spacing:var(--ls-caps); text-transform:uppercase;
  padding:14px 30px; border-radius:var(--radius-md); border:1px solid transparent;
  cursor:pointer; line-height:1; white-space:nowrap;
  transition:background var(--ease-soft) .24s,color var(--ease-soft) .24s,border-color var(--ease-soft) .24s,transform .14s var(--ease-soft);
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:var(--paper); border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:transparent; color:var(--text-accent); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--accent); color:var(--paper); }
.btn-inverse { background:var(--paper); color:var(--green-900); border-color:var(--paper); }
.btn-inverse:hover { background:var(--stone-100); }
.btn-ghost { background:transparent; border-color:transparent; padding:14px 0; }
.btn-ghost.on-dark { color:var(--paper); }
.btn-ghost:hover { color:var(--green-600); }
.btn-sm { padding:9px 20px; font-size:0.75rem; }

/* ---------- Tags ---------- */
.tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.6875rem; font-weight:500; letter-spacing:var(--ls-caps); text-transform:uppercase;
  padding:5px 11px; border-radius:2px; border:1px solid var(--border-hairline);
  color:var(--text-secondary); background:transparent; line-height:1;
}
.tag .dot { width:6px; height:6px; border-radius:999px; background:var(--stone-500); flex:none; }
.tag.available { color:var(--moss); border-color:color-mix(in srgb,var(--moss) 35%,transparent); background:var(--moss-tint); }
.tag.available .dot { background:var(--moss); }
.tag.inquire { color:var(--green-800); border-color:var(--green-300); background:var(--green-50); }
.tag.inquire .dot { background:var(--green-600); }
.tag.on-dark { color:var(--paper); border-color:var(--border-on-dark); background:transparent; }
.tag.on-dark .dot { background:var(--green-300); }

/* ---------- Header / nav ---------- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter);
  background:var(--green-900);
  border-bottom:1px solid var(--border-on-dark);
  transition:padding .3s var(--ease-soft),box-shadow .3s var(--ease-soft);
}
.site-header.scrolled {
  padding-top:12px; padding-bottom:12px;
  box-shadow:0 12px 34px rgba(15,23,21,0.30);
}
.brand { display:flex; align-items:center; gap:14px; }
.brand img { height:42px; width:auto; transition:height .3s var(--ease-soft); }
.scrolled .brand img { height:36px; }
.brand .addr {
  font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--green-300); border-left:1px solid var(--border-on-dark); padding-left:14px; line-height:1.3;
}
.nav { display:flex; align-items:center; gap:34px; }
.nav a.link {
  font-size:0.8125rem; letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--green-100); font-weight:500; transition:color .24s var(--ease-soft);
}
.nav a.link:hover { color:var(--paper); }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; color:var(--paper); font-size:26px; line-height:1; }

.site-header .btn-secondary { color:var(--paper); border-color:var(--border-on-dark); }
.site-header .btn-secondary:hover { background:var(--paper); color:var(--green-900); border-color:var(--paper); }

/* ---------- Hero ---------- */
.hero {
  position:relative; background:var(--green-900); color:var(--text-on-dark);
  min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-color:var(--green-900);
  background-image:url('assets/hero.webp');
  background-size:cover; background-position:center 38%; background-repeat:no-repeat;
}
.hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,23,21,0.66) 0%, rgba(15,23,21,0.28) 22%, rgba(15,23,21,0.40) 50%, rgba(15,23,21,0.82) 78%, rgba(15,23,21,0.97) 100%),
    linear-gradient(90deg, rgba(15,23,21,0.72) 0%, rgba(15,23,21,0.30) 46%, rgba(15,23,21,0) 76%);
}
.hero-inner { position:relative; z-index:2; width:100%; padding:0 var(--gutter) clamp(3rem,7vh,6rem); }
.hero-inner .wrap-h { max-width:var(--container); margin:0 auto; }
.hero h1 {
  font-family:var(--font-serif); font-weight:400; letter-spacing:var(--ls-serif);
  font-size:clamp(3.5rem,9vw,8.5rem); line-height:0.96; color:var(--paper);
  margin:22px 0 0; text-wrap:balance; text-shadow:0 2px 30px rgba(15,23,21,0.45);
}
.hero .sub { font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.6; color:var(--green-100); font-weight:300; max-width:46ch; margin-top:26px; text-shadow:0 1px 16px rgba(15,23,21,0.55); }
.hero .hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:34px; }
.hero .scrollcue {
  position:absolute; right:var(--gutter); bottom:clamp(3rem,7vh,6rem); z-index:1;
  font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--green-300);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero .scrollcue::after { content:""; width:1px; height:46px; background:var(--green-400); animation:cue 2.4s var(--ease-out) infinite; transform-origin:top; }
@keyframes cue { 0%,100%{transform:scaleY(0.3);opacity:.4;} 50%{transform:scaleY(1);opacity:1;} }

/* ---------- Sections ---------- */
section { position:relative; }
.band { background:var(--paper); padding:clamp(4.5rem,10vh,8rem) 0; }
.band.alt { background:var(--paper-2); }
.band.green { background:var(--green-900); color:var(--text-on-dark); }
.band.green-800 { background:var(--green-800); color:var(--text-on-dark); }

.section-head { max-width:640px; margin-bottom:clamp(2.5rem,5vh,4rem); }
.section-head .section-h { margin-top:18px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before { display:none; }
.section-head.center .eyebrow { gap:0; }

/* Overview split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.split .copy p + p { margin-top:1.1em; }

/* Image placeholder */
.imgph {
  position:relative; background:var(--stone-200); border:1px solid var(--border-hairline);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--stone-500); overflow:hidden;
}
.imgph.green { background:var(--green-800); color:var(--green-300); border-color:transparent; }
.imgph.paper { background:var(--paper-2); }
.imgph i { font-size:32px; opacity:0.65; }
.imgph .ph-label { font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase; }
.imgph .ph-num { position:absolute; top:14px; left:16px; font-family:var(--font-serif); font-size:1.4rem; opacity:0.5; }

/* Stat row */
.stats { display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); }
.stat .fig { font-family:var(--font-serif); font-weight:400; font-size:clamp(2.4rem,3.6vw,3.4rem); line-height:1; color:var(--text-primary); display:flex; align-items:baseline; gap:5px; }
.stat .fig small { font-size:0.42em; font-family:var(--font-sans); font-weight:300; color:var(--text-muted); letter-spacing:var(--ls-wide); }
.stat .lab { margin-top:11px; font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted); }
.band.green .stat .fig, .band.green-800 .stat .fig { color:var(--paper); }
.band.green .stat .lab, .band.green-800 .stat .lab { color:var(--green-300); }
.indicative { font-size:0.6875rem; letter-spacing:var(--ls-wide); color:var(--text-muted); margin-top:22px; font-style:italic; }

/* Spaces */
.spaces { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem); }
.space {
  background:var(--card); border:1px solid var(--border-hairline);
  padding:32px 30px; display:flex; flex-direction:column; min-height:340px;
  transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft),transform .3s var(--ease-soft);
}
.space:hover { border-color:var(--border-strong); box-shadow:0 20px 50px rgba(26,24,20,.09); transform:translateY(-3px); }
.space .space-top { display:flex; justify-content:space-between; align-items:flex-start; }
.space .floor { font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted); }
.space .sqft { font-family:var(--font-serif); font-size:2.6rem; line-height:1; margin-top:26px; color:var(--text-primary); }
.space .sqft small { font-family:var(--font-sans); font-size:0.85rem; font-weight:300; color:var(--text-muted); letter-spacing:var(--ls-wide); margin-left:6px; }
.space .use { font-size:0.95rem; color:var(--text-primary); font-weight:500; margin-top:18px; }
.space .desc { font-size:0.9rem; line-height:1.6; color:var(--text-secondary); font-weight:300; margin-top:8px; }
.space .space-link { margin-top:auto; padding-top:24px; font-size:0.75rem; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--green-800); display:inline-flex; align-items:center; gap:8px; border-top:1px solid var(--border-hairline); }
.space .space-link:hover { color:var(--green-600); }
.space .space-link span.arr { transition:transform .24s var(--ease-out); }
.space:hover .space-link span.arr { transform:translateX(4px); }

/* Location */
.loc-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2.5rem,6vw,5rem); align-items:stretch; }
.loc-list { margin-top:30px; display:flex; flex-direction:column; gap:0; }
.loc-list .row { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--border-on-dark); align-items:flex-start; }
.loc-list .row i { font-size:22px; color:var(--green-300); margin-top:2px; }
.loc-list .row .t { font-size:0.95rem; color:var(--paper); font-weight:500; }
.loc-list .row .d { font-size:0.875rem; color:var(--green-200); font-weight:300; margin-top:3px; line-height:1.5; }
.map-card { position:relative; min-height:360px; border:1px solid var(--border-on-dark); overflow:hidden; display:flex; flex-direction:column; }
.map-footer { display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--green-800); color:var(--green-200); font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase; border-top:1px solid var(--border-on-dark); transition:color .2s; flex-shrink:0; }
.map-footer:hover { color:var(--paper); }

/* Gallery */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gallery .imgph.wide { grid-column:span 2; }
.gallery .imgph.tall { grid-row:span 2; }
.gallery .imgph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery .imgph .ph-label {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:18px 16px 12px; color:#fff; text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  opacity:0; transition:opacity .25s ease;
}
.gallery .imgph:hover .ph-label { opacity:1; }
.gallery .imgph img { cursor:zoom-in; transition:transform .4s ease; }
.gallery .imgph:hover img { transform:scale(1.04); }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:clamp(1.5rem,5vw,4rem);
  background:rgba(12,11,10,0.92); opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-img {
  max-width:100%; max-height:82vh; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  transform:scale(0.97); transition:transform .25s ease;
}
.lightbox.open .lightbox-img { transform:scale(1); }
.lightbox-cap {
  color:#fff; font-size:0.6875rem; letter-spacing:var(--ls-caps); text-transform:uppercase; opacity:0.8;
}
.lightbox-close {
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  width:48px; height:48px; border:1px solid rgba(255,255,255,0.4); background:transparent;
  color:#fff; font-size:1.75rem; line-height:1; cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.lightbox-close:hover { background:rgba(255,255,255,0.12); }

/* Leasing / form */
.lease-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }
.contact-line { display:flex; flex-direction:column; gap:3px; margin-top:10px; }
.contact-line a, .contact-line span { font-size:1.05rem; color:var(--text-primary); font-weight:300; line-height:1.9; }
.contact-line a:hover { color:var(--green-700); }
.form-card { background:var(--card); border:1px solid var(--border-hairline); padding:clamp(1.75rem,3vw,2.75rem); }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:0.6875rem; font-weight:500; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-secondary); }
.field input, .field select, .field textarea {
  font-family:var(--font-sans); font-size:1rem; color:var(--text-primary); background:var(--white);
  border:1px solid var(--border-hairline); border-radius:var(--radius-md); padding:13px 15px; width:100%;
  outline:none; transition:border-color .24s var(--ease-soft),box-shadow .24s var(--ease-soft);
}
.field textarea { resize:vertical; min-height:120px; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--border-strong); box-shadow:0 0 0 3px color-mix(in srgb,var(--green-800) 14%,transparent); }
.form-actions { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; }
.form-note { font-size:0.75rem; color:var(--text-muted); font-weight:300; }
.form-sent { display:none; flex-direction:column; justify-content:center; min-height:360px; }
.form-sent.show { display:flex; }
.form-card.sent .fgrid { display:none; }

/* Footer */
.site-footer { background:var(--green-950); color:var(--text-on-dark); padding:clamp(4rem,8vh,6rem) 0 2.5rem; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.site-footer img { height:74px; width:auto; margin-bottom:26px; }
.site-footer .f-statement { font-family:var(--font-serif); font-size:1.6rem; line-height:1.25; color:var(--paper); max-width:20ch; }
.site-footer .f-head { font-size:0.6875rem; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--green-400); }
.site-footer .f-body { margin-top:16px; font-size:0.9rem; line-height:1.95; color:var(--green-200); font-weight:300; }
.site-footer .f-body a:hover { color:var(--paper); }
.footer-base { margin-top:clamp(3rem,6vh,4.5rem); padding-top:1.75rem; border-top:1px solid var(--border-on-dark); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.6875rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--green-400); }
.f-disclaimer { margin-top:1rem; font-size:0.625rem; line-height:1.6; letter-spacing:var(--ls-wide); color:var(--green-400); max-width:65ch; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } .hero .scrollcue::after { animation:none; } html{scroll-behavior:auto;} }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position:fixed; inset:0; z-index:99; background:var(--green-900); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gutter);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-soft);
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu a { font-family:var(--font-serif); font-size:2.25rem; color:var(--paper); padding:10px 0; border-bottom:1px solid var(--border-on-dark); }
.mobile-menu .mm-close { position:absolute; top:20px; right:var(--gutter); background:none; border:0; color:var(--paper); font-size:30px; cursor:pointer; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .nav .link { display:none; }
  .nav-toggle { display:block; }
  .nav .btn { display:none; }
  .split, .loc-grid, .lease-grid { grid-template-columns:1fr; }
  .spaces { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2.5rem; }
  .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .gallery .imgph.tall { grid-row:span 1; }
  .brand .addr { display:none; }
  .fgrid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .hero .hero-meta { gap:12px; }
  .stats { gap:1.75rem 2rem; }
  .gallery { grid-template-columns:1fr; }
  .gallery .imgph.wide { grid-column:span 1; }
}