/* ============================================================
   FUSION HOSPITALITY — DESIGN SYSTEM
   ------------------------------------------------------------
   HOW TO RETUNE THE LOOK: every color, font and spacing value
   used anywhere on the site is defined in the :root block
   below. Change it there and the whole site follows.
   ============================================================ */

:root {
  /* ---- Color tokens ---- */
  /* "Performance Red" palette — neutrals carry ~90% of the design;
     garnet is the punch (one confident moment per screen); brass is
     rare fine detailing only (thin rules/flourishes, never text). */
  --ink: #1A1815;            /* Charcoal — dark sections, primary text on light */
  --ink-soft: #26221D;       /* raised surfaces on dark (charcoal, lifted) */
  --cream: #F4EFE6;          /* Ivory — light canvas, text on dark sections */
  --paper: #FBF8F2;          /* lightest surface (cards on ivory) */
  --greige: #C7BFB1;         /* Greige — dividers, muted surfaces, borders */
  --stone: #6B635A;          /* muted text on light (AA on ivory: 5.1:1) */
  --mist: #A99F90;           /* muted text on dark (AA on charcoal: 6.8:1) */
  --red: #8A1F2B;            /* Garnet — THE accent: buttons, links, ring motif */
  --red-bright: #6E1822;     /* Garnet (dark) — hover/pressed state of garnet */
  --brass: #B0894F;          /* Brass — thin rules & fine flourishes ONLY */
  --line: #DCD5C7;           /* hairline rules on light (greige-derived) */
  --line-dark: #2C2823;      /* hairline rules on dark */

  /* ---- Type tokens ---- */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;  /* luxury editorial serif */
  --font-body: "Hanken Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;   /* refined, warm grotesque */

  /* Fluid type scale */
  --t-hero: clamp(2.7rem, 6.2vw, 5.7rem);
  --t-h1: clamp(2.4rem, 5.5vw, 4.6rem);
  --t-h2: clamp(1.95rem, 3.9vw, 3.25rem);
  --t-h3: clamp(1.3rem, 2vw, 1.7rem);
  --t-body-lg: clamp(1.08rem, 1.4vw, 1.28rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.72rem;        /* tracked uppercase eyebrows */

  /* ---- Spacing scale ---- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.75rem;
  --s-4: 2.75rem;
  --s-5: 4.5rem;
  --s-6: clamp(4.75rem, 10.5vw, 9.5rem);  /* section rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem); /* page side margins */
  --max-w: 84rem;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.8,.26,.99);
  --dur: .7s;
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--red); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.018em; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; }

.eyebrow {
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
  display: inline-flex; align-items: center; gap: .75rem;
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--red); flex: none; /* garnet accent rule */
}
.dark .eyebrow, .on-dark .eyebrow { color: var(--mist); }
/* Garnet has too little contrast on the charcoal sections, so the eyebrow
   rule uses a muted neutral there instead. */
.dark .eyebrow::before, .on-dark .eyebrow::before, .closing .eyebrow::before { background: var(--mist); }
/* Hero sits on a dark photo — the muted stone eyebrow was nearly invisible.
   Use a light tone, a little weight, and a soft shadow so it stays legible
   even where the photo behind it is bright. */
.hero .eyebrow { color: var(--cream); font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.hero .eyebrow::before { content: ""; width: 2.2rem; height: 2px; background: var(--red); display: inline-block; flex: none; box-shadow: 0 0 8px rgba(0,0,0,.4); }

.lead { font-size: var(--t-body-lg); color: var(--stone); max-width: 44em; }
.dark .lead { color: var(--mist); }

/* ============ Loader: the red ring ============ */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .5s var(--ease), visibility .5s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader svg { width: 72px; height: 72px; }
#loader .ring {
  fill: none; stroke: var(--red); stroke-width: 6;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  transform-origin: center; transform: rotate(-90deg);
  animation: ringDraw .9s var(--ease) forwards;
}
#loader .mark {
  font-family: var(--font-display); font-size: 30px; fill: var(--cream);
  opacity: 0; animation: fadeIn .4s .55s forwards;
}
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ============ Header / navigation ============ */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
/* Top scrim: the header sits over the hero photo, so on bright slides the cream
   logo and nav can wash out. A soft top-down gradient keeps them legible over
   any image, then fades out below the bar. It's hidden once the header gains its
   own solid background on scroll. */
#site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  /* Pool the darkening just around the logo (left) and menu button (right)
     rather than a full-width band, and fade it out within the header strip, so
     the rest of the photo — and the building below — stays as bright as before. */
  background:
    radial-gradient(min(70%, 262px) 78px at 6% 25%, rgba(26,24,21,.82) 0%, rgba(26,24,21,.6) 52%, rgba(26,24,21,0) 88%),
    radial-gradient(min(40%, 150px) 62px at 100% 22%, rgba(26,24,21,.55) 0%, rgba(26,24,21,0) 82%);
  pointer-events: none; z-index: -1;
  transition: opacity .4s var(--ease);
}
#site-header.scrolled::before { opacity: 0; }
#site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: 1.1rem var(--gutter);
  max-width: var(--max-w); margin-inline: auto;
}
#site-header.scrolled {
  background: rgba(26,24,21,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(244,239,230,.08);
}
#site-header.scrolled .bar { padding-block: .7rem; }

.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--cream); }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo .ring-mark { fill: none; stroke: var(--red); stroke-width: 7; }
.logo .mono { font-family: var(--font-display); fill: var(--cream); font-size: 30px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text b { font-family: var(--font-display); font-weight: 520; font-size: 1.05rem; letter-spacing: .01em; color: var(--cream); text-shadow: 0 0 3px rgba(0,0,0,.72), 0 1px 6px rgba(0,0,0,.5); }
/* The subtext is a muted tone that can blend into a lightly-darkened sky, so it
   leans on a tight near-black halo (local edge contrast) rather than more scrim. */
.logo-text span { font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; color: var(--mist); text-shadow: 0 0 2px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6); }
/* Two-color (black + red) logo mark sits on a light chip so it reads on the dark header/footer */
.logo-seal { background: var(--cream); border-radius: 50%; padding: 5px; box-sizing: content-box; }

.nav-desktop { display: flex; align-items: center; gap: .25rem; }
.nav-desktop > li { position: relative; }
.nav-desktop a, .nav-desktop button.nav-top {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .85rem;
  color: var(--cream);
  font-size: .85rem; letter-spacing: .04em;
  border-radius: 3px;
  transition: color .25s;
}
.nav-desktop > li > a:hover,
.nav-desktop > li > button:hover,
.nav-desktop > li > a[aria-current="page"] { color: var(--cream); }
.nav-desktop > li > a::after,
.nav-desktop > li > button::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-desktop > li > a:hover::after,
.nav-desktop > li > button:hover::after,
.nav-desktop > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-desktop .caret { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.dropdown {
  position: absolute; top: calc(100% + .6rem); left: 0;
  min-width: 15rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -18px rgba(26,24,21,.35);
  padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-desktop li:hover > .dropdown,
.nav-desktop li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: .55rem 1.1rem; color: var(--ink);
  font-size: .85rem; border-left: 2px solid transparent;
}
.dropdown a:hover, .dropdown a:focus-visible { border-left-color: var(--red); background: var(--cream); }
.dropdown .dd-label {
  display: block; padding: .55rem 1.1rem .25rem;
  font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; color: var(--stone);
}

.nav-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(244,239,230,.3);
  color: var(--cream);
  padding: .55rem 1.1rem; font-size: .8rem; letter-spacing: .06em;
  transition: border-color .3s, background .3s, color .3s;
  white-space: nowrap;
}
.nav-cta:hover { border-color: var(--red); background: var(--red); color: var(--cream); }

/* Mobile nav */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 95; }
.nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--cream);
  transition: transform .35s var(--ease), opacity .25s;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* While the mobile menu is open, lift the header above the overlay so the
   logo stays visible and the X toggle remains tappable; drop the photo scrim
   since the backdrop is the solid menu. */
body.menu-open #site-header { z-index: 96; }
body.menu-open #site-header::before { opacity: 0; }

#mobile-menu {
  position: fixed; inset: 0; z-index: 92;
  background: var(--ink); color: var(--cream);
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
#mobile-menu.open { opacity: 1; visibility: visible; }
#mobile-menu li { border-bottom: 1px solid var(--line-dark); }
#mobile-menu a, #mobile-menu .sub-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 1.1rem 0;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--cream);
}
#mobile-menu .submenu { display: none; padding: 0 0 1rem 1rem; }
#mobile-menu .submenu.open { display: block; }
#mobile-menu .submenu a { font-family: var(--font-body); font-size: .95rem; padding: .5rem 0; color: var(--mist); }
#mobile-menu .submenu a:hover { color: var(--cream); }
#mobile-menu .sub-toggle .caret { width: 10px; height: 10px; border-right: 1.5px solid var(--mist); border-bottom: 1.5px solid var(--mist); transform: rotate(45deg); transition: transform .3s; }
#mobile-menu .sub-toggle[aria-expanded="true"] .caret { transform: rotate(225deg); }
#mobile-menu .m-cta { margin-top: 2rem; display: inline-block; border: 1px solid var(--red); color: var(--cream); padding: .9rem 1.6rem; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.8rem;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  position: relative; overflow: hidden;
  transition: color .35s var(--ease), border-color .35s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
  z-index: -1;
}
.btn { z-index: 0; }
.btn:hover { color: var(--cream); border-color: var(--red); }
.btn:hover::before { transform: scaleX(1); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-light { border-color: rgba(244,239,230,.45); color: var(--cream); }
.btn-solid { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn-solid::before { background: var(--red-bright); }
.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .3s, gap .3s;
}
.text-link:hover { border-bottom-color: var(--red); gap: .8rem; }

/* ============ Sections ============ */
.section { padding-block: var(--s-6); }
.section.dark { background: var(--ink); color: var(--cream); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-head h2 { max-width: 16em; }

.rule { border: 0; border-top: 1px solid var(--line); }
.dark .rule { border-top-color: var(--line-dark); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

/* ============ Hero ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--ink); color: var(--cream);
  overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(1.02);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(26,24,21,.94) 0%, rgba(26,24,21,.40) 52%, rgba(26,24,21,.66) 100%),
    linear-gradient(105deg, rgba(26,24,21,.55) 0%, rgba(26,24,21,0) 48%);
}
.hero-inner { width: 100%; padding-block: clamp(6rem, 12vh, 9rem) clamp(3.5rem, 9vh, 6.5rem); }
.hero h1 {
  font-size: var(--t-hero);
  max-width: 12em;
  font-weight: 500; line-height: 1.02; letter-spacing: -0.026em;
  margin-block: var(--s-2) var(--s-3);
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--cream); }
.hero .lead { color: rgba(244,239,230,.78); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: var(--s-3);
  border-top: 1px solid rgba(244,239,230,.15);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--mist);
  gap: var(--s-2); flex-wrap: wrap;
}
.scroll-cue { display: inline-flex; align-items: center; gap: .6rem; }
.scroll-cue::after { content: ""; width: 1px; height: 2.4rem; background: linear-gradient(var(--red), transparent); animation: cueDrop 2s var(--ease) infinite; }
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Page hero (interior pages) */
.page-hero { background: var(--ink); color: var(--cream); padding: clamp(9rem, 22vh, 13rem) 0 var(--s-5); }
.page-hero h1 { max-width: 14em; }

/* ============ Home: who we are ============ */
.who-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.who-grid .big {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.drop-rule { width: 1px; height: 5rem; background: var(--red); margin-bottom: var(--s-3); }

/* ============ Stats ============ */
.stats { background: var(--ink); color: var(--cream); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3); }
.stat { border-top: 1px solid var(--line-dark); padding-top: var(--s-3); }
.stat .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .num .affix { color: var(--mist); } /* AA: garnet fails on dark; muted neutral keeps hierarchy */
.stat .lbl { margin-top: .8rem; color: var(--mist); font-size: var(--t-small); max-width: 14em; }

/* ============ Brand strip ============ */
.brand-row { display: grid; grid-template-columns: repeat(6, 1fr); border-block: 1px solid var(--line); margin-top: var(--s-4); }
.brand-cell {
  display: grid; place-items: center; padding: var(--s-3) var(--s-2);
  border-right: 1px solid var(--line);
}
.brand-cell img {
  height: clamp(1.6rem, 2.4vw, 2.2rem); width: auto; max-width: 100%; object-fit: contain;
  filter: grayscale(1) opacity(.6);   /* tonal — logos sit quietly in the neutral palette */
  transition: filter .35s var(--ease);
}
.brand-cell:hover img, .brand-cell:focus-within img { filter: grayscale(0) opacity(1); }
.brand-name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em; color: var(--stone); }
.brand-cell:last-child { border-right: 0; }
.brand-cell:hover { color: var(--ink); }

/* ============ Services trio ============ */
.svc-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.svc-card {
  background: var(--ink); color: var(--cream);
  padding: var(--s-4); min-height: 26rem;
  display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease);
}
/* The property photo stays faintly present so the card reads as a place,
   not an empty black box, then blooms to full on hover/focus. */
.svc-card .bg { position: absolute; inset: 0; z-index: -1; opacity: .26; transition: opacity .6s var(--ease), transform 1.1s var(--ease); transform: scale(1.06); }
.svc-card .bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-card .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,24,21,.93) 0%, rgba(26,24,21,.74) 52%, rgba(26,24,21,.64) 100%);
}
.svc-card:hover .bg, .svc-card:focus-within .bg { opacity: .85; transform: scale(1); }
/* Thin garnet base rule that draws across on hover — a quiet premium signal. */
.svc-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.svc-card:hover::after, .svc-card:focus-within::after { transform: scaleX(1); }
.svc-card .eyebrow { color: var(--mist); }
.svc-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); margin-bottom: var(--s-2); }
.svc-card p { color: var(--cream); opacity: .82; font-size: var(--t-small); max-width: 28em; }
.svc-card .text-link { margin-top: auto; padding-top: var(--s-3); }

/* Services page detail rows */
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: center; padding-block: var(--s-5); border-top: 1px solid var(--line); }
.svc-row:first-of-type { border-top: 0; }
.svc-row:nth-child(even) .svc-media { order: 2; }
.svc-media { aspect-ratio: 4/3; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc-row:hover .svc-media img { transform: scale(1.04); }
.svc-points { margin-top: var(--s-3); display: grid; gap: .6rem; }
.svc-points li { display: flex; gap: .8rem; align-items: baseline; font-size: var(--t-small); color: var(--stone); }
.svc-points li::before { content: ""; width: .45rem; height: .45rem; border: 1px solid var(--red); border-radius: 50%; flex: none; transform: translateY(-1px); } /* garnet flourish */
.partner-tag { display: inline-block; margin-top: var(--s-3); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--red); border: 1px solid var(--line); padding: .5rem .9rem; }

/* ============ Portfolio ============ */
.h-scroll {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(17rem, 28vw, 26rem);
  gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) var(--s-3);
  /* Without this, mandatory snap pulls the first card flush to the screen edge,
     ignoring the padding above. scroll-padding makes cards snap to the gutter so
     the first one lines up with the heading instead of jamming the left edge. */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--red) transparent;
}
.h-scroll::-webkit-scrollbar { height: 4px; }
.h-scroll::-webkit-scrollbar-thumb { background: var(--red); }

.prop-card { scroll-snap-align: start; display: block; position: relative; transition: transform .5s var(--ease); }
.prop-card .frame { aspect-ratio: 4/5; overflow: hidden; background: var(--greige); transition: box-shadow .6s var(--ease); }
/* The tall 4:5 card shows only the middle slice of a wide hero photo, which can
   crop out signage. properties[].cardPosition sets --card-pos to steer it. */
.prop-card img { width: 100%; height: 100%; object-fit: cover; object-position: var(--card-pos, 50% 50%); transition: transform .9s var(--ease), filter .9s var(--ease); }
.prop-card:hover, .prop-card:focus-visible { transform: translateY(-6px); }
.prop-card:hover .frame, .prop-card:focus-visible .frame { box-shadow: 0 30px 55px -30px rgba(26,24,21,.5); }
.prop-card:hover img, .prop-card:focus-visible img { transform: scale(1.06); filter: saturate(1.05); }
.prop-card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.dark .prop-card .meta { border-top-color: var(--line-dark); }
.prop-card .meta h3 { font-size: 1.12rem; }
.prop-card .meta .loc { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }
.dark .prop-card .meta .loc { color: var(--mist); }
.prop-card .flag { position: absolute; top: 1rem; left: 1rem; background: rgba(26,24,21,.82); color: var(--cream); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; padding: .4rem .7rem; backdrop-filter: blur(4px); }

/* Portfolio grid page */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-4); }
.filter-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-right: var(--s-3); }
.filter-group .fg-label { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-right: .4rem; }
.chip {
  border: 1px solid var(--line); padding: .5rem 1rem; font-size: .8rem; letter-spacing: .04em;
  transition: border-color .25s, color .25s, background .25s;
}
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--cream); }
.chip:hover { border-color: var(--red); color: var(--red); }
.chip[aria-pressed="true"]:hover { color: var(--cream); border-color: var(--red-bright); background: var(--red-bright); }

.props-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3); }
.props-grid .prop-card.hidden { display: none; }
.props-count { font-size: var(--t-small); color: var(--stone); margin-bottom: var(--s-3); }

/* Property detail */
.prop-hero { position: relative; min-height: 72svh; display: flex; align-items: flex-end; background: var(--ink); color: var(--cream); overflow: hidden; isolation: isolate; }
.prop-hero .hero-media { inset: -8% 0; }
.prop-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(26,24,21,.92) 0%, rgba(26,24,21,.4) 55%, rgba(26,24,21,.45) 100%);
}
.prop-hero .eyebrow { color: var(--cream); font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.prop-hero .eyebrow::before { background: var(--red); box-shadow: 0 0 8px rgba(0,0,0,.4); }
.prop-hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.prop-hero .lead { color: rgba(244,239,230,.92); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.prop-hero .hero-inner { padding-block: 9rem var(--s-5); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); border-block: 1px solid var(--line); padding-block: var(--s-3); }
.facts dt { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: .4rem; }
.facts dd { font-family: var(--font-display); font-size: 1.15rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.gallery figure { aspect-ratio: 4/3; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.back-link { margin-bottom: var(--s-3); display: inline-flex; }

/* ============ Media / news ============ */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3); }
.news-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(26,24,21,.3); }
.news-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--greige); }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform .6s var(--ease); }
.news-card:hover .thumb img { transform: scale(1.04); }
.news-card .body { padding: var(--s-3); display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.news-card .outlet { display: flex; justify-content: space-between; font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.news-card .outlet time { color: var(--stone); }
.news-card h3 { font-size: 1.2rem; }
.news-card p { font-size: var(--t-small); color: var(--stone); }
.news-card .text-link { margin-top: auto; padding-top: .5rem; }

/* ============ Team ============ */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
/* Portrait-forward principal cards: photo on top, name / role / View bio below,
   centered at every breakpoint. Bios are collapsed until requested so the page
   reads as a clean roster. */
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.team-card .photo { aspect-ratio: 3/4; overflow: hidden; background: var(--greige); width: min(100%, 17rem); margin-inline: auto; }
.team-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); transition: filter .5s; }
.team-card:hover img { filter: grayscale(0); }
.team-card .tc-body { width: 100%; }
.team-card h3 { margin-top: var(--s-3); font-size: 1.4rem; }
.team-card .role { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: .5rem 0 0; display: block; }
.team-card p { font-size: var(--t-small); color: var(--stone); max-width: 34em; text-align: left; margin-inline: auto; }
/* Centered header above the principal grid */
.team-head { text-align: center; margin-bottom: var(--s-5); }
.team-head .eyebrow { margin-bottom: var(--s-2); }

/* The headshot itself is the control: clicking it opens the bio dialog.
   A quiet strip along the photo's lower edge signals it (no separate button),
   and the card lifts / photo zooms on hover so it reads as interactive. */
.photo-btn { display: block; width: min(100%, 17rem); margin-inline: auto; position: relative; cursor: pointer; text-align: left; transition: transform .45s var(--ease); }
.photo-btn .photo { display: block; width: 100%; transition: box-shadow .5s var(--ease); }
.photo-btn img { transition: transform .8s var(--ease), filter .5s; }
.photo-btn:hover, .photo-btn:focus-visible { transform: translateY(-6px); }
.photo-btn:hover .photo, .photo-btn:focus-visible .photo { box-shadow: 0 28px 50px -26px rgba(26,24,21,.55); }
.photo-btn:hover img, .photo-btn:focus-visible img { transform: scale(1.05); filter: grayscale(0); }
.photo-cue {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .75rem .6rem;
  background: linear-gradient(to top, rgba(26,24,21,.78) 0%, rgba(26,24,21,0) 100%);
  color: var(--cream); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  text-align: center; pointer-events: none;
  transition: color .3s;
}
.photo-cue::after {
  content: "\2192"; display: inline-block; margin-left: .45rem;
  opacity: 0; transform: translateX(-5px);
  transition: opacity .3s, transform .3s var(--ease);
}
.photo-btn:hover .photo-cue, .photo-btn:focus-visible .photo-cue { color: #fff; }
.photo-btn:hover .photo-cue::after, .photo-btn:focus-visible .photo-cue::after { opacity: 1; transform: none; }

/* ---- Bio dialog ---- */
.bio-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--gutter);
}
/* display:grid above would defeat the hidden attribute, leaving an invisible
   full-screen overlay that eats every click. Keep hidden meaning hidden. */
.bio-modal[hidden] { display: none; }
.bm-backdrop {
  position: absolute; inset: 0;
  background: rgba(26,24,21,.74);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s var(--ease);
}
.bm-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 58rem; max-height: 88svh;
  background: var(--cream);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(18px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.bio-modal.open .bm-backdrop { opacity: 1; }
.bio-modal.open .bm-panel { opacity: 1; transform: none; }
.bm-photo { min-height: 100%; background: var(--greige); }
.bm-photo img, .bm-photo picture { width: 100%; height: 100%; }
.bm-photo img { object-fit: cover; display: block; }
/* The body must carry its own height cap: the panel clips overflow, and a
   grid row otherwise grows to content, so a long bio would be cut off with
   no way to scroll. overscroll-behavior keeps the scroll inside the dialog. */
.bm-body { padding: clamp(1.75rem, 4vw, 3rem); overflow-y: auto; max-height: 88svh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bm-body h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: .35rem; }
.bm-body .role { display: block; font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: .6rem 0 0; }
.bm-bio { margin-top: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.bm-bio p { font-size: var(--t-small); color: var(--stone); line-height: 1.7; }
.bm-bio p + p { margin-top: 1em; }
.bm-close {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(26,24,21,.06); border-radius: 50%;
  transition: background .25s;
}
.bm-close:hover { background: var(--red); }
.bm-close span { position: absolute; width: 17px; height: 1.6px; background: var(--ink); transition: background .25s; }
.bm-close span:first-child { transform: rotate(45deg); }
.bm-close span:last-child { transform: rotate(-45deg); }
.bm-close:hover span { background: var(--cream); }
@media (max-width: 640px) {
  .bm-panel { grid-template-columns: 1fr; max-height: 92svh; }
  /* Never squeeze the 3:4 headshot into a wide band: cover would crop it to a
     horizontal slice and cut the head off. Show it at its own aspect ratio as
     a compact centered portrait, so nothing is cropped. */
  .bm-photo {
    min-height: 0; height: auto;
    width: 10.5rem; aspect-ratio: 3 / 4;
    margin: var(--s-4) auto 0; background: none;
  }
  /* Portrait (about 14rem tall) + body cap stay inside the 92svh sheet, so the
     bio scrolls within the dialog instead of being clipped. */
  .bm-body { max-height: 52svh; padding-top: var(--s-3); text-align: center; }
  .bm-body .eyebrow { justify-content: center; }
  .bm-bio { text-align: left; }
  .bm-close { background: rgba(26,24,21,.06); }
  .bm-close span { background: var(--ink); }
}

/* Leadership preview (home) */
.lead-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.lead-mini .photo { aspect-ratio: 3/4; overflow: hidden; background: var(--ink-soft); }
.lead-mini img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: filter .5s, transform .8s var(--ease); }
.lead-mini:hover img { filter: grayscale(0); transform: scale(1.04); }
.lead-mini h3 { font-size: 1.05rem; margin-top: 1rem; }
.lead-mini .role { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }

/* ============ Story page ============ */
.story-block { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.4fr); gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.story-block:first-of-type { border-top: 0; }
.story-block h2 { font-size: var(--t-h3); }
.story-img { aspect-ratio: 21/9; overflow: hidden; margin-top: var(--s-5); }
.story-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Contact ============ */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: var(--s-5); }
.contact-aside .item { padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.contact-aside .item .lbl { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: .5rem; }
.contact-aside .item a { font-family: var(--font-display); font-size: 1.3rem; transition: color .25s; }
.contact-aside .item a:hover { color: var(--red); }
.markets { padding-top: var(--s-3); }
.markets .lbl { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--s-2); }
.market-list { list-style: none; margin: 0; padding: 0; }
.market-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-block: .55rem; border-bottom: 1px solid var(--line); }
.market-list li:last-child { border-bottom: 0; }
.market-list .m-state { font-family: var(--font-display); font-size: 1.15rem; }
.market-list .m-count { font-size: var(--t-small); color: var(--stone); letter-spacing: .02em; }

form .field { margin-bottom: var(--s-3); }
form label { display: block; font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: .55rem; }
form input, form select, form textarea {
  width: 100%; background: var(--paper);
  border: 1px solid var(--line); padding: .9rem 1rem;
  font: inherit; color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
form select { background-image: linear-gradient(45deg, transparent 50%, var(--stone) 50%), linear-gradient(135deg, var(--stone) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.field-error { display: none; color: var(--red); font-size: .78rem; margin-top: .4rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red); }
.field.invalid .field-error { display: block; }
.form-status { display: none; padding: 1rem 1.25rem; margin-top: var(--s-2); font-size: var(--t-small); border: 1px solid; }
.form-status.ok { display: block; border-color: #3e6b4f; color: #2f5a40; background: #eef3ec; }
.form-status.err { display: block; border-color: var(--red); color: var(--red); background: #F5EAE8; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ============ Closing CTA ============ */
.closing { background: var(--ink); color: var(--cream); text-align: left; position: relative; overflow: hidden; }
.closing h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 12em; }
.closing .ring-bg {
  position: absolute; right: -8rem; top: 50%; transform: translateY(-50%);
  width: 34rem; height: 34rem; border: 1px solid rgba(138,31,43,.35); border-radius: 50%;
  pointer-events: none;
}
.closing .ring-bg::after { content: ""; position: absolute; inset: 3.5rem; border: 1px solid rgba(138,31,43,.18); border-radius: 50%; }
.closing .ring-mark-img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 13rem; height: auto; opacity: .5;
}

/* ============ Footer ============ */
footer { background: var(--ink); color: var(--mist); border-top: 1px solid var(--line-dark); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-4); padding-block: var(--s-5) var(--s-4); }
.foot-grid .tag { margin-top: var(--s-2); font-size: var(--t-small); max-width: 22em; }
footer h4 { font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--cream); margin-bottom: var(--s-2); font-weight: 500; }
footer li { margin-bottom: .55rem; }
footer a { font-size: var(--t-small); transition: color .25s; }
footer a:hover { color: var(--cream); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-3); border-top: 1px solid var(--line-dark); font-size: .75rem; }

/* ============ Cookie banner / misc ============ */

/* 404 */
.nf { min-height: 100svh; display: grid; place-items: center; background: var(--ink); color: var(--cream); text-align: center; padding: var(--gutter); }
.nf .code { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: 1; color: var(--cream); } /* AA: garnet fails on charcoal */

/* Section progress indicator (home) */
#progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--red); width: 0; z-index: 99; }

/* ============ Responsive ============ */
@media (max-width: 1020px) {
  .nav-desktop, #site-header .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .svc-trio { grid-template-columns: 1fr; }
  .props-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid, .lead-preview { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .who-grid, .svc-row, .story-block, .contact-grid { grid-template-columns: 1fr; }
  .svc-row:nth-child(even) .svc-media { order: 0; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}
/* Footer: the four-up layout squeezes the link columns under ~150px on
   tablets, which wraps the email mid-address. Give the brand block its own
   full-width row and let the three link groups share the width evenly. */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-grid .tag { max-width: 34em; }
}
@media (max-width: 640px) {
  .props-grid, .news-grid, .gallery { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .lead-preview { grid-template-columns: 1fr 1fr; }
  .brand-row { grid-template-columns: repeat(3, 1fr); }
  .brand-cell:nth-child(3n) { border-right: 0; }
  .brand-cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  /* Footer on phones: the brand block and Connect run full width (the brand
     needs room for its tagline, Connect holds a long email that wraps badly in
     half a column), with Services and Company side by side between them.
     minmax(0,1fr) keeps those two columns genuinely equal, and align-items
     start stops short lists from stretching to the tallest cell. */
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--s-4) var(--s-3);
    padding-block: var(--s-4) var(--s-3);
  }
  .foot-grid > :first-child, .foot-grid > :last-child { grid-column: 1 / -1; }
  .foot-grid .tag { max-width: none; }
  /* Company has twice the links of Services; flowing them in two columns keeps
     the two cells the same height, so no void opens above the Connect row. */
  .foot-company ul { columns: 2; column-gap: var(--s-3); }
  .foot-company li { break-inside: avoid; }
  form .row-2 { grid-template-columns: 1fr; }
  .h-scroll { grid-auto-columns: 78vw; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-media { inset: 0; transform: none !important; }
  #loader { display: none; }
}

/* ============ Print ============ */
@media print {
  #site-header, footer, #loader, .hero-foot, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}


/* Logo seal image */
.logo-seal { display: block; flex: none; }
#site-footer .logo-seal { width: 58px; height: 58px; }

/* ============ Hero slideshow (crossfade) ============ */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.85) contrast(1.02); }
/* Adapt hero crop to the device's aspect ratio so the building stays in frame.
   Landscape hotel photos lose their subject if hard-cropped to a tall phone, so
   on portrait/narrow viewports we ease the height and bias the crop upward. */
@media (max-aspect-ratio: 3/4) {
  .hero { min-height: 88svh; }
  .hero-slide img { object-position: center 38%; }
}
@media (max-width: 640px) {
  .hero-slide img { object-position: center 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide:not(.active) { display: none; }
}

/* ============ About / Our Story ============ */
.story-lead {
  max-width: 18em;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.16; color: var(--ink); font-weight: 500;
}
.story-lead .lead-accent { color: var(--red); font-style: italic; }
.story-stats { border-top: 1px solid var(--line-dark); padding-top: var(--s-5); }
.story-flow { display: flex; flex-direction: column; gap: 0; }
.story-row {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-4) var(--s-5); align-items: start;
  padding-block: var(--s-5); padding-left: var(--s-4);
  border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: background .4s var(--ease);
}
.story-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease);
}
.story-row.in::before { transform: scaleY(1); }
.story-row:first-child { border-top: 0; }
.story-row:hover { background: var(--paper); }
.story-row.reverse .story-row-head { order: 2; }
.story-row-head { display: flex; flex-direction: column; gap: var(--s-2); position: relative; }
/* Oversized ghost numeral as an editorial watermark */
.story-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5.5rem); line-height: .9;
  color: var(--greige); font-weight: 500; opacity: .5;
  transition: color .4s var(--ease), opacity .4s var(--ease);
}
.story-row:hover .story-num, .story-row.in .story-num { color: var(--red); opacity: 1; }
.story-row-head h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05;
  padding-left: 0; position: relative;
}
.story-row-head h2::before {
  content: ""; display: block; width: 2.2rem; height: 2px;
  background: var(--red); margin-bottom: var(--s-2);
}
.story-row .lead { margin: 0; }
.story-band { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; position: relative; }
.story-band-media { position: absolute; inset: -8% 0; }
.story-band-media img { width: 100%; height: 100%; object-fit: cover; }
.alt-surface { background: var(--paper); }
.values-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  margin-top: var(--s-5); border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.value-card {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; transition: background .4s var(--ease);
}
.value-card:hover { background: var(--cream); }
.value-rule { display: block; width: 2.6rem; height: 2px; background: var(--red); margin-bottom: var(--s-3); }
.value-card h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; margin-bottom: var(--s-3); line-height: 1.1; }
.value-card p { color: var(--stone); font-size: var(--t-body); line-height: 1.6; max-width: 26em; }
@media (max-width: 1020px) {
  .story-row { grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-4); }
  .story-row.reverse .story-row-head { order: 0; }
}
@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ============ fusionCARES (giving back) ============ */
.cares { background: var(--paper); }
.cares-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-5); align-items: start; }
.cares-lead h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 12em; }
.cares-quote {
  position: relative;
  font-family: var(--font-body); font-style: normal; font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.45;
  color: var(--ink); margin-top: var(--s-5); padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line); border-left: 0; max-width: 26em;
}
.cares-quote::before {
  content: "\201C"; display: block;
  font-family: var(--font-display); font-size: 3.5rem; line-height: .6;
  color: var(--red); margin-bottom: .3rem;
}
.cares-orgs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cares-orgs li { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .cares-inner { grid-template-columns: 1fr; gap: var(--s-4); }
}
.cares-side .eyebrow { color: var(--stone); margin-bottom: var(--s-3); }

/* ============================================================
   MOBILE & TOUCH OPTIMISATION
   ------------------------------------------------------------
   Touch devices have no hover, so the visuals desktop reveals on
   hover are revealed on scroll-into-view instead, and a few spots
   that crammed on narrow screens are loosened.
   ============================================================ */
@media (hover: none) {
  /* Services trio: fade the development / management / construction photo
     in as each card scrolls into view (.in is set by the reveal observer). */
  .svc-card .bg { transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
  .svc-card.in .bg { opacity: 1; transform: scale(1); }
  /* Brand logos can't be hovered to colour — show them in full colour. */
  .brand-cell img { filter: none; }
}

/* HOMEPAGE HERO AS A PHOTO BANNER — phones AND portrait tablets.
   A landscape hotel photo can't fill a portrait screen without cropping the
   building, so present it as a full-width banner that shows the WHOLE hotel,
   then run the copy beneath it on the brand-dark field. Fills the screen (no
   light gap at the bottom) with nothing zoomed or cut. Parallax is off for
   these viewports (see initParallax). */
@media (max-width: 640px), (max-aspect-ratio: 3/4) and (max-width: 900px) {
  /* Scoped to .hero (homepage) — .prop-hero keeps its full-bleed layout. */
  .hero { min-height: 100svh; display: block; }
  .hero .hero-media { inset: 0 0 auto 0; height: 50vw; }   /* full-width band reveals the whole building */
  .hero .hero-slide img { object-fit: cover; object-position: center; }
  /* Compact the copy so the whole hero — including the Southeast / Established
     foot row — clears one screen on real phones (where the address bar eats
     height). Bottom pad respects the iOS home-indicator safe area. */
  .hero .hero-inner { padding-block: calc(50vw + var(--s-3)) max(clamp(1.5rem, 4vh, 2.25rem), env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(2rem, 7.5vw, 2.7rem); }
  .hero .lead { font-size: .95rem; line-height: 1.4; }
  /* Keep "Development · Management · Construction" on a single row above the headline. */
  .hero .eyebrow { font-size: .58rem; letter-spacing: .08em; gap: .5rem; white-space: nowrap; margin-bottom: var(--s-2); }
  .hero .eyebrow::before { width: 1.4rem; }
  /* Homepage banner: only a soft fade at the band's lower edge, blending the
     photo into the dark copy area below. The copy itself sits on solid dark. */
  .hero::after {
    inset: 0 0 auto 0; height: 50vw;
    background: linear-gradient(to top, rgba(26,24,21,.5) 0%, rgba(26,24,21,0) 48%);
  }
}

@media (max-width: 640px) {
  /* Hero footer: keep the two end labels on one tidy row; the animated
     "scroll" cue is redundant (and a constant animation) on touch. */
  .hero-foot { gap: var(--s-2); margin-top: clamp(1.25rem, 3.5vh, 2rem); }
  .hero-foot .scroll-cue { display: none; }
  .hero-ctas { gap: .75rem; margin-top: var(--s-1); }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  /* Tighten the very tall service tiles a little on phones. */
  .svc-card { min-height: 20rem; }
  /* Ease section rhythm so the page isn't one long scroll, without cramming. */
  .section { padding-block: clamp(3rem, 11vw, 4.5rem); }
  .section-head { margin-bottom: var(--s-4); }

  /* Property heroes keep the full-bleed photo with the copy on top, so keep a
     scrim that's strong behind the copy and clears over the building. */
  .prop-hero::after {
    background: linear-gradient(to top,
      rgba(26,24,21,.95) 0%, rgba(26,24,21,.60) 42%,
      rgba(26,24,21,.28) 66%, rgba(26,24,21,.40) 100%);
  }
  /* Closing CTA seal: at 34rem it overruns the headline and button on a phone.
     Shrink it and tuck it into the bottom-right corner as a quiet accent. */
  .closing .ring-bg {
    width: 17rem; height: 17rem;
    right: -5.5rem; top: auto; bottom: -4rem; transform: none;
  }
  .closing .ring-bg::after { inset: 1.9rem; }
  .closing .ring-mark-img { width: 6.5rem; }
}

/* ============ Services intro (centered statement) ============ */
.svc-intro {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  line-height: 1.32; color: var(--ink);
  max-width: 20em; margin: 0 0 var(--s-5);
  padding-left: var(--s-4); border-left: 2px solid var(--red);
}

/* ============ About stat band (animated, premium) ============ */
.story-stat-band { background: var(--ink); }
.story-stats { border-top: 0; padding-top: 0; gap: 0; grid-template-columns: repeat(3, 1fr); }
.story-stats .stat {
  border-top: 0; border-left: 1px solid var(--line-dark);
  padding: var(--s-3) var(--s-4); text-align: left;
}
.story-stats .stat:first-child { border-left: 0; padding-left: 0; }
.story-stats .num {
  font-size: clamp(3.2rem, 7vw, 5.6rem); color: var(--cream);
  display: flex; align-items: baseline;
}
.story-stats .num .affix { color: var(--red); font-size: .5em; }
.story-stats .lbl { color: var(--mist); font-size: var(--t-body); max-width: 12em; margin-top: var(--s-2); }
@media (max-width: 760px) {
  .story-stats { grid-template-columns: 1fr; }
  .story-stats .stat { border-left: 0; border-top: 1px solid var(--line-dark); padding-left: 0; }
  .story-stats .stat:first-child { border-top: 0; }
}

/* ============ fusionCARES org cards ============ */
.cares-orgs a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-3);
}
.cares-orgs .org-main { display: flex; flex-direction: column; gap: .25rem; }
.cares-orgs .org-name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; color: var(--ink); transition: color .25s; }
.cares-orgs .org-focus { font-size: var(--t-small); color: var(--stone); font-family: var(--font-body); }
.cares-orgs .org-arrow { color: var(--red); flex: none; transition: transform .25s; }
.cares-orgs a:hover { padding-left: .5rem; }
.cares-orgs a:hover .org-name { color: var(--red); }
.cares-orgs a:hover .org-arrow { transform: translateX(4px); }