/* Harmony Realty v2 · Sobha-led, quiet luxury.
   Serif statements (Cormorant Garamond), spaced uppercase labels (Jost), ivory paper, red only as the brand accent. */

:root {
  --bg: #fbfaf7;
  --paper: #f3efe7;
  --ink: #151413;
  --ink-2: #45423d;
  --mute: #8b857a;
  --line: #e3ddd2;
  --dark: #0f0e0d;
  --dark-2: #1b1a18;
  --red: #c8161d;
  --red-d: #a10f15;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4.5vw, 72px);
  --max: 1320px;
  --hdr: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 16px/1.7 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
body.locked { overflow: hidden; }

/* ---------- Type ---------- */
.label {
  font: 400 12px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mute);
}
.label.red { color: var(--red); }
.title {
  font: 400 15px/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin: 0; color: var(--red);
}
.display {
  font: 300 clamp(38px, 5.6vw, 84px)/1.04 var(--serif); letter-spacing: -.01em; margin: 0;
}
.display em, .statement em { font-style: italic; }
.statement {
  font: 300 clamp(26px, 3vw, 42px)/1.25 var(--serif); margin: 0;
}
.lead { font-size: 18px; color: var(--ink-2); max-width: 60ch; }
p { margin: 0 0 1.1em; }
.muted { color: var(--mute); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 140px) 0; }
.section.tight { padding: clamp(56px, 7vw, 96px) 0; }
.section.paper { background: var(--paper); }
.section.dark { background: var(--dark); color: #f2efe9; }
.section.dark .label { color: #a39d92; }
.center { text-align: center; }
.head-c { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.head-c .title { margin-bottom: 18px; }
.head-c p { color: var(--ink-2); margin: 0 auto; }
.dark .head-c p { color: #c4beb3; }
.rule { width: 48px; height: 1px; background: var(--red); border: 0; margin: 22px auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 30px;
  font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid currentColor; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn.solid:hover { background: var(--red-d); border-color: var(--red-d); }
.btn.light { color: #fff; }
.btn.light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.link {
  display: inline-flex; align-items: center; gap: 12px;
  font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.link::after { content: ""; width: 34px; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.link:hover::after { width: 56px; }
.arrow { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter);
  color: var(--ink); background: rgba(251, 250, 247, .96); border-bottom: 1px solid var(--line);
  transition: background .4s, color .4s, border-color .4s, height .4s, transform .4s var(--ease);
}
.hdr.over { background: transparent; color: #fff; border-color: transparent; }
.hdr.over::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.45), transparent);
}
.hdr.hide { transform: translateY(-100%); }
.hdr .menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: 14px; font: 400 12px/1 var(--sans); letter-spacing: .26em; }
.burger { width: 26px; height: 12px; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.burger::before { top: 0; width: 26px; }
.burger::after { bottom: 0; width: 18px; }
.menu-btn:hover .burger::after { width: 26px; }
.brand { display: block; height: 44px; }
.brand img { height: 100%; width: auto; }
.brand .on-dark { display: none; }
.hdr.over .brand .on-light { display: none; }
.hdr.over .brand .on-dark { display: block; }
.hdr-right { justify-self: end; display: flex; align-items: center; gap: 28px; }
.hdr-right a { font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.hdr-right .enq { border: 1px solid currentColor; height: 40px; padding: 0 20px; transition: background .3s, color .3s; }
.hdr-right .enq:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Slide-out menu ---------- */
.nav {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(320px, 440px) 1fr;
  visibility: hidden; pointer-events: none;
}
.nav.open { visibility: visible; }
.nav.open .nav-panel { pointer-events: auto; } /* the empty area beside the panel lets clicks reach the dimmed page (scrim), which closes the menu */
.nav-panel {
  background: var(--bg); display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform .6s var(--ease);
}
.nav.open .nav-panel { transform: none; }
.nav-top { display: flex; justify-content: space-between; align-items: center; height: var(--hdr); padding: 0 36px; flex: none; }
.nav-close { width: 26px; height: 26px; position: relative; }
.nav-close::before, .nav-close::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--ink); transform: rotate(45deg); }
.nav-close::after { transform: rotate(-45deg); }
.nav-main { list-style: none; margin: 0; padding: 12px 36px 32px; }
.nav-main > li { border-bottom: 1px solid var(--line); }
.nav-main > li > a, .nav-main > li > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0;
  font: 400 14px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-align: left;
}
.nav-main > li > button .arrow { transition: transform .35s var(--ease); }
.nav-main > li.exp > button .arrow { transform: rotate(90deg); }
.nav-sub { list-style: none; margin: 0; padding: 0 0 0 2px; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.nav-main > li.exp .nav-sub { max-height: 420px; }
.nav-sub a { display: block; padding: 8px 0; font: 400 21px/1.3 var(--serif); color: var(--ink-2); }
.nav-sub li:last-child a { padding-bottom: 22px; }
.nav-sub a:hover { color: var(--red); }
.nav-secondary { margin-top: auto; background: var(--paper); padding: 28px 36px 36px; }
.nav-secondary a { display: block; padding: 8px 0; font: 400 12px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.nav-secondary .contact { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.nav-secondary .contact a { display: inline; padding: 0; font: inherit; letter-spacing: 0; text-transform: none; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; background: #000; color: #fff; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-slide.on { opacity: 1; z-index: 1; }
.hero-slide video, .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.on img { animation: kb 9s linear forwards; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%);
}
.hero-copy { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(96px, 14vh, 150px); max-width: 900px; }
.hero-copy .label { color: rgba(255,255,255,.82); }
.hero-copy .display { margin: 18px 0 26px; }
.hero-meta { display: none; }
.hero-meta.on { display: block; animation: rise 1s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-bar {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 36px;
  display: flex; align-items: center; gap: 28px; font: 400 12px/1 var(--sans); letter-spacing: .2em;
}
.hero-dots { display: flex; gap: 22px; flex: 1; }
.hero-dot { flex: 1; max-width: 140px; text-align: left; color: rgba(255,255,255,.6); padding-top: 14px; position: relative; letter-spacing: .2em; font-size: 11px; text-transform: uppercase; }
.hero-dot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.3); }
.hero-dot i { position: absolute; top: 0; left: 0; height: 1px; width: 0; background: #fff; }
.hero-dot.on { color: #fff; }
.hero-dot.on i { animation: fill var(--dur, 8s) linear forwards; }
@keyframes fill { to { width: 100%; } }
.hero-scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); text-transform: uppercase; font-size: 11px; }
.hero-scroll span { width: 1px; height: 40px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.hero-scroll span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: drip 2s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }

/* ---------- Page hero (inner pages) ---------- */
.phero { position: relative; height: clamp(440px, 78vh, 760px); background: #000; color: #fff; overflow: hidden; }
.phero > img, .phero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.05) 35%, rgba(0,0,0,.65)); }
.phero .wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 8vh, 84px); }
.phero .label { color: rgba(255,255,255,.8); }
.phero .display { margin-top: 16px; max-width: 16ch; }
.phero p { max-width: 54ch; color: rgba(255,255,255,.85); margin: 18px 0 0; font-size: 17px; }
.crumbs { font: 400 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 22px; }
.crumbs a:hover { color: #fff; }
.phero.plain { height: auto; background: var(--paper); color: var(--ink); padding-top: calc(var(--hdr) + 80px); }
.phero.plain::after { display: none; }
.phero.plain .wrap { padding-bottom: 72px; }
.phero.plain .label, .phero.plain .crumbs { color: var(--mute); }
.phero.plain p { color: var(--ink-2); }

/* ---------- Split (Passion at work) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split-media { position: relative; }
.split-media img, .split-media video { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.split-media figcaption { margin-top: 12px; font-size: 12px; color: var(--mute); }
.split-copy .title { margin-bottom: 26px; }
.split-copy p { color: var(--ink-2); }
.split-copy .statement { margin-bottom: 26px; }
.split-copy .link { margin-top: 18px; }

/* ---------- Intro collage ---------- */
/* ---------- The city we build in ---------- */
.city-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(48px, 7vw, 96px); }
.city-head .statement { margin-bottom: 24px; max-width: 18ch; }
.city-head p:not(.statement) { color: var(--ink-2); max-width: 52ch; }
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.city-grid figure { margin: 0; }
.city-grid figure:nth-child(even) { margin-top: clamp(40px, 7vw, 110px); }
.city-grid .wipe { aspect-ratio: 3/4; }
.city-grid figure:hover .wipe img { transform: scale(1.08); }
.city-grid figcaption { margin-top: 14px; display: flex; gap: 12px; align-items: baseline; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.city-grid figcaption span { color: var(--red); letter-spacing: .14em; font-size: 11px; }
@media (max-width: 860px) {
  .city-head { grid-template-columns: 1fr; gap: 20px; }
  .city-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .city-grid figure:nth-child(even) { margin-top: 48px; }
}
@media (max-width: 560px) {
  .city-grid figcaption { font-size: 10px; letter-spacing: .14em; gap: 8px; }
}

.intro { overflow: hidden; }
.intro-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(48px, 8vw, 120px); align-items: center; }
.intro-media { position: relative; padding: 70px 0 90px; }
.intro-year {
  position: absolute; top: 0; left: -2%; z-index: 0; pointer-events: none; user-select: none;
  font: 300 clamp(130px, 17vw, 260px)/.8 var(--serif); font-variant-numeric: lining-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(200,22,29,.28); letter-spacing: -.02em;
}
.intro-main { position: relative; z-index: 1; margin: 0; width: 84%; }
.intro-main .wipe { aspect-ratio: 5/4; }
.intro-inset { position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; width: 46%; background: var(--bg); padding: 10px 0 0 10px; }
.intro-inset .wipe { aspect-ratio: 4/3; }
.intro-main figcaption { margin-top: 12px; max-width: 44%; font-size: 12px; line-height: 1.5; color: var(--mute); }
.intro-inset figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-2); display: flex; gap: 10px; align-items: baseline; }
.intro-inset figcaption b { font: 400 18px/1 var(--serif); color: var(--red); }
.wipe { position: relative; overflow: hidden; background: var(--paper); }
.wipe img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 2s var(--ease); }
.wipe.rv { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease); }
.wipe.rv.in { clip-path: inset(0 0 0 0); }
.wipe.rv.in img { transform: scale(1.02); }
.intro-main:hover .wipe img, .intro-inset:hover .wipe img { transform: scale(1.08); }
.intro-copy .title { margin-bottom: 24px; }
.intro-copy .statement { margin-bottom: 28px; }
.intro-copy > p:not(.statement) { color: var(--ink-2); }
[data-words] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
[data-words] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--k) * 45ms); }
[data-words].in .w > span { transform: none; }
.intro-pillars { list-style: none; margin: 34px 0 36px; padding: 0; border-top: 1px solid var(--line); }
.intro-pillars li {
  position: relative; display: grid; grid-template-columns: 34px 120px 1fr; align-items: baseline; gap: 10px;
  padding: 18px 0; border-bottom: 1px solid var(--line); cursor: default;
}
.intro-pillars li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--red); transition: width .7s var(--ease); }
.intro-pillars span { font: 400 11px/1 var(--sans); letter-spacing: .14em; color: var(--red); }
.intro-pillars b { font: 400 26px/1 var(--serif); transition: transform .5s var(--ease), color .4s; }
.intro-pillars em { font-style: normal; font-size: 14px; color: var(--mute); transition: color .4s; }
.intro-pillars li:hover::after { width: 100%; }
.intro-pillars li:hover b { color: var(--red); transform: translateX(6px); }
.intro-pillars li:hover em { color: var(--ink); }
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { padding: 50px 0 70px; }
  .intro-pillars li { grid-template-columns: 30px 1fr; }
  .intro-pillars em { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .wipe.rv { clip-path: none; transition: none; }
  .wipe img { transform: none; transition: none; }
  [data-words] .w > span { transform: none; transition: none; }
}

/* ---------- Leadership ---------- */
.leaders { padding-top: clamp(24px, 4vw, 48px); }
.leader { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 8vw, 130px); align-items: center; }
.leader + .leader { margin-top: clamp(80px, 11vw, 150px); }
.leader.rev { grid-template-columns: .85fr 1.15fr; }
.leader.rev .leader-copy { order: 2; }
.leader-q { display: block; height: 70px; font: 400 150px/1 var(--serif); color: var(--red); margin: 0 0 18px -6px; }
.leader-copy p { font-size: 18px; line-height: 1.75; color: var(--ink-2); max-width: 54ch; }
.leader-sign { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); max-width: 54ch; }
.leader-sign b { display: block; font: 400 clamp(30px, 3.2vw, 46px)/1.1 var(--serif); color: var(--red); }
.leader-sign span { display: block; margin-top: 12px; font: 500 13px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.leader-photo { position: relative; margin: 0; }
.leader-photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(200,22,29,.35); z-index: 0; transition: inset .7s var(--ease); }
.leader.rev .leader-photo::before { inset: 22px 22px -22px -22px; }
.leader-photo .wipe { position: relative; z-index: 1; aspect-ratio: 4/5; }
.leader-photo .wipe > img { object-position: 50% 15%; }
.leader-photo:hover::before { inset: 12px -12px -12px 12px; }
.leader.rev .leader-photo:hover::before { inset: 12px 12px -12px -12px; }
.leader-mono { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #ece6da, #d9cfbd); }
.leader-mono b { font: 300 clamp(90px, 11vw, 150px)/1 var(--serif); color: rgba(21,20,19,.75); letter-spacing: .04em; }
.leader-mono img { position: absolute; right: -50px; bottom: -50px; width: 240px; height: auto; opacity: .08; transform: none; }
@media (max-width: 860px) {
  .leader, .leader.rev { grid-template-columns: 1fr; }
  .leader .leader-photo, .leader.rev .leader-photo { order: -1; max-width: 420px; width: calc(100% - 22px); }
  .leader.rev .leader-copy { order: 0; }
  .leader.rev .leader-photo::before, .leader.rev .leader-photo:hover::before { inset: 22px -22px -22px 22px; }
  .leader-q { font-size: 110px; height: 52px; }
  .leader-copy p { font-size: 16px; }
}

/* Leadership interactions */
.leader { position: relative; }
.leader-bg {
  position: absolute; z-index: 0; top: -40px; left: -2%; pointer-events: none; user-select: none;
  font: 300 clamp(160px, 22vw, 340px)/.8 var(--serif); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(200,22,29,.16);
}
.leader.rev .leader-bg { left: auto; right: -2%; }
.leader-copy, .leader-photo { position: relative; z-index: 1; }
.scrub p { margin: 0 0 1.1em; }
.sw { color: #cfc8bc; transition: color .5s var(--ease); }
.sw.lit { color: var(--ink-2); }
.leader-q.rv { transform: scale(.4) rotate(-12deg); transform-origin: 20% 80%; transition: opacity .8s var(--ease), transform 1s cubic-bezier(.34, 1.56, .64, 1); }
.leader-q.rv.in { transform: none; }
.leader-sign b { position: relative; display: inline-block; padding-bottom: 10px; }
.leader-sign b::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--red); transition: width 1.2s var(--ease) .5s; }
.leader-sign.in b::after { width: 64px; }
.leader-sign:hover b::after { width: 100%; transition-delay: 0s; }
.leader-photo[data-tilt] { perspective: 1000px; }
.leader-photo .wipe { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .6s var(--ease), clip-path 1.4s var(--ease); box-shadow: 0 30px 60px -35px rgba(15,14,13,.45); }
.leader-photo::before { transform: translate(var(--fx, 0px), var(--fy, 0px)); transition: inset .7s var(--ease), transform .6s var(--ease); }
.leader-photo .wipe > img { filter: saturate(.85); transition: transform 2s var(--ease), filter .8s; }
.leader-photo:hover .wipe > img { filter: saturate(1.05); transform: scale(1.06); }
.leader-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.28), transparent 50%); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.leader-photo:hover .leader-glare { opacity: 1; }
@media (max-width: 860px) {
  .leader-bg { display: none; }
}
/* Slightly smaller portraits on desktop; phones keep their existing sizing. */
@media (min-width: 861px) {
  .leader-photo { width: 84%; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sw { color: var(--ink-2); }
  .leader-q.rv { transform: none; }
  .leader-sign b::after { width: 64px; transition: none; }
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 40px 28px; border-left: 1px solid var(--line); position: relative; overflow: hidden; }
/* Stats entrance: a red rule draws across, the figure counts up, the label slides in. */
.stat::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--red); transition: width 1.4s var(--ease); transition-delay: inherit; }
.stat.in::before { width: 100%; }
.stat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(200,22,29,.06), transparent 70%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.stat:hover::after { opacity: 1; }
.stat b { font-variant-numeric: lining-nums tabular-nums; transition: transform .5s var(--ease), color .5s; }
.stat:hover b { transform: translateY(-4px); color: var(--red); }
.stat span { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s; }
.stat.in span { opacity: 1; transform: none; }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 300 clamp(44px, 4.6vw, 68px)/1 var(--serif); color: var(--ink); }
.stat span { display: block; margin-top: 14px; font: 400 12px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.dark .stats, .dark .stat { border-color: rgba(255,255,255,.14); }
.dark .stat b { color: #fff; }

/* ---------- Finder ---------- */
.finder { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0 auto 44px; border: 1px solid var(--line); width: fit-content; max-width: 100%; background: #fff; }
.finder .tabs { display: flex; border-right: 1px solid var(--line); }
.finder .tab { padding: 0 22px; height: 54px; font: 400 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); position: relative; }
.finder .tab.on { color: var(--ink); }
.finder .tab.on::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 14px; height: 1px; background: var(--red); }
.finder select {
  height: 54px; border: 0; border-right: 1px solid var(--line); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23151413'/%3E%3C/svg%3E") no-repeat right 18px center;
  padding: 0 46px 0 22px; font: 400 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer;
}
.finder select:last-child { border-right: 0; }
.finder-count { text-align: center; margin: -24px 0 34px; font-size: 13px; color: var(--mute); }

.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 28px) / 3); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 32px; }
.rail-nav button { width: 52px; height: 52px; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.rail-nav button:hover:not(:disabled) { border-color: var(--ink); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail-nav .btn { margin-left: 18px; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }

/* ---------- Project card ---------- */
.card { display: block; color: var(--ink); }
.card-media { position: relative; aspect-ratio: 4/4.6; overflow: hidden; background: var(--paper); }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card-media img, .card:hover .card-media video { transform: scale(1.05); }
.card-media .badge { position: absolute; top: 18px; left: 18px; z-index: 2; }
.badge { display: inline-block; padding: 8px 12px; background: rgba(255,255,255,.94); color: var(--ink); font: 400 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.badge.ongoing { background: var(--red); color: #fff; }
.card-body { padding: 22px 2px 0; }
.card-body .label { font-size: 11px; }
.card-body h3 { font: 400 32px/1.1 var(--serif); margin: 10px 0 8px; }
.card-body p { font-size: 14px; color: var(--ink-2); margin: 0; }
.card .link { margin-top: 18px; color: var(--ink); }
/* Interactive cards */
.card.rv { transition-delay: calc(var(--i, 0) * 90ms); }
.card-no { position: absolute; top: 16px; right: 18px; z-index: 3; font: 400 11px/1 var(--sans); letter-spacing: .2em; color: #fff; mix-blend-mode: difference; }
.card-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); z-index: 1; pointer-events: none; }
.card.playing .card-film { opacity: 1; }
.card-play { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 400 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; transition: opacity .4s; }
.card-play i { width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; position: relative; }
.card-play i::after { content: ""; position: absolute; left: 9px; top: 7px; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.card-over {
  position: absolute; inset: auto 0 0; z-index: 2; padding: 70px 24px 22px; color: #fff;
  background: linear-gradient(transparent, rgba(12,11,10,.88) 45%);
  transform: translateY(101%); transition: transform .7s var(--ease);
}
.card-over p { font: 300 20px/1.35 var(--serif); margin: 0 0 14px; color: #fff; }
.card-over ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.card-over li { font: 400 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.35); padding: 7px 10px; }
.card-cta { display: inline-flex; align-items: center; gap: 10px; font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.card-body h3 { transition: color .4s; }
.card-body .label { transition: color .4s; }
.card .link::after { transition: width .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-over { transform: none; }
  .card:hover .card-play { opacity: 0; }
  .card:hover .card-body h3 { color: var(--red); }
  .card:hover .link::after { width: 64px; }
  .card-media { cursor: none; }
}
@media (hover: none) {
  .card-over, .card-play { display: none; }
}
.view-cursor {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; width: 0; height: 0;
}
.view-cursor span {
  position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; background: var(--red); color: #fff;
  font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  transform: scale(0); transition: transform .45s var(--ease);
}
.view-cursor.on span { transform: scale(1); }
body.dragging .view-cursor span { transform: scale(.6); }

/* Rail progress + drag */
.rail.drag { scroll-snap-type: none; cursor: grabbing; }
.rail.drag .card { pointer-events: none; }
.rail { cursor: grab; }
.rail-meta { display: flex; align-items: center; gap: 24px; margin-top: 36px; }
.rail-bar { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.rail-bar i { position: absolute; top: -1px; height: 3px; left: var(--x, 0); width: var(--w, 30%); background: var(--ink); transition: left .25s linear, width .4s var(--ease); }
.rail-count { font: 400 12px/1 var(--sans); letter-spacing: .2em; color: var(--mute); min-width: 64px; text-align: right; }
.rail-count b { color: var(--ink); font-weight: 400; }

/* Typographic placeholder for projects still waiting on renders */
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; background: linear-gradient(160deg, #ece6da, #ddd4c4); color: var(--ink); }
.ph::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(21,20,19,.14); pointer-events: none; }
.ph b { font: 300 clamp(48px, 5vw, 76px)/1 var(--serif); margin-top: auto; position: relative; order: 1; }
.ph small { font: 400 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); position: relative; order: 2; margin-top: 12px; }
.ph-mark { position: absolute; right: -40px; top: -40px; width: 220px; opacity: .08; }

/* ---------- Spotlight ---------- */
.spot { display: grid; grid-template-columns: minmax(280px, 430px) 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.spot-stage { perspective: 1200px; }
.spot-film {
  position: relative; aspect-ratio: 9/16; max-height: 78vh; overflow: hidden; background: #000;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .6s var(--ease);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
}
.spot-film::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.12), transparent 55%), linear-gradient(transparent 60%, rgba(0,0,0,.55)); }
.spot-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease), transform 6s linear; }
.spot-layer.on { opacity: 1; transform: scale(1); z-index: 1; }
img.spot-layer.on { transform: scale(1.06); transition: opacity .9s var(--ease), transform 8s linear; }
.spot-hud { position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.spot-caption { font: 400 11px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.spot-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: background .3s, border-color .3s, opacity .3s; }
.spot-play:hover { background: var(--red); border-color: var(--red); }
.spot-play i { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.spot-play.paused i { width: 0; height: 0; border-right: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.spot-play.hide { opacity: 0; pointer-events: none; }
.spot-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: rgba(255,255,255,.15); }
.spot-progress i { display: block; height: 100%; width: 0; background: var(--red); }
.spot-films { display: flex; gap: 22px; margin-top: 18px; }
.spot-films button { position: relative; padding: 6px 0; font: 400 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #8f897e; transition: color .3s; }
.spot-films button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--red); transition: width .5s var(--ease); }
.spot-films button:hover, .spot-films button.on { color: #fff; }
.spot-films button.on::after { width: 100%; }
.spot-copy .display { margin: 16px 0 24px; }
.spot-copy p { color: #cfc9be; max-width: 52ch; }
.floors { margin: 34px 0 6px; border-top: 1px solid rgba(255,255,255,.14); }
.floors-label { display: block; padding: 16px 0 6px; font: 400 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #8f897e; }
.floor {
  position: relative; width: 100%; display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "no name" "no info";
  align-items: baseline; column-gap: 14px; text-align: left; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #f2efe9;
}
.floor::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.fl-no { grid-area: no; font: 400 11px/1 var(--sans); letter-spacing: .16em; color: #8f897e; transition: color .3s, padding .4s var(--ease); }
.fl-name { grid-area: name; font: 300 24px/1.15 var(--serif); transition: color .3s, transform .4s var(--ease); }
.fl-info { grid-area: info; font-size: 13px; color: #a39d92; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.floor:hover .fl-name, .floor.on .fl-name { color: #fff; transform: translateX(4px); }
.floor.on::before { transform: scaleY(1); }
.floor.on .fl-no { color: var(--red); padding-left: 14px; }
.floor.on .fl-info { max-height: 60px; opacity: 1; margin-top: 8px; }
.floor:hover .fl-no { color: #fff; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 26px 0 40px; border-top: 1px solid rgba(255,255,255,.14); }
.facts div { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.facts dt { font: 400 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9c968b; }
.facts dd { margin: 6px 0 0; font: 400 20px/1.35 var(--serif); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- What we do: expanding panels ---------- */
.wwd { display: flex; gap: 14px; height: clamp(460px, 62vh, 620px); }
.wwd-item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #000; color: #fff; transition: flex-grow .9s var(--ease); }
.wwd-media { position: absolute; inset: 0; }
.wwd-media img, .wwd-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wwd-media img { opacity: .82; transform: scale(1.04); transition: transform 1.4s var(--ease), opacity .8s; }
.wwd-media .card-film { opacity: 0; transition: opacity .7s var(--ease); }
.wwd-item.playing .card-film { opacity: 1; }
.wwd-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.82)); pointer-events: none; }
.wwd-no { position: absolute; top: 24px; left: 24px; z-index: 2; font: 400 11px/1 var(--sans); letter-spacing: .24em; }
.wwd-no::after { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 1px; margin-left: 12px; background: currentColor; transition: width .8s var(--ease); }
.wwd-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 26px; transition: opacity .4s; }
.wwd-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25) 70%, transparent); opacity: 0; transition: opacity .6s; pointer-events: none; }
.wwd-tag { display: block; font: 400 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwd-copy h3 { margin: 10px 0 0; font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--serif); white-space: nowrap; }
.wwd-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease), opacity .5s; }
.wwd-more p { margin: 16px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.85); }
.wwd-meta { display: block; margin-top: 14px; font: 400 10px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.wwd-meta b { font: 300 22px/1 var(--serif); letter-spacing: 0; color: #fff; margin-right: 6px; }
.wwd-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--red); font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .wwd-item { cursor: none; }
  .wwd:hover .wwd-item { flex-grow: .75; }
  .wwd:hover .wwd-item:not(:hover) .wwd-copy { opacity: 0; }
  .wwd:hover .wwd-item:not(:hover) .wwd-media img { opacity: .55; }
  .wwd-item:hover::before { opacity: 1; }
  .wwd .wwd-item:hover { flex-grow: 2.4; }
  .wwd-item:hover .wwd-media img { transform: scale(1.12); opacity: .95; }
  .wwd-item:hover .wwd-no::after { width: 46px; }
  .wwd-item:hover .wwd-more { max-height: 280px; opacity: 1; transition-delay: .2s; }
}
@media (hover: none), (max-width: 860px) {
  .wwd { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .wwd-item { aspect-ratio: 3/4; }
  .wwd-more { max-height: none; opacity: 1; }
  .wwd-more p { display: none; }
  .wwd-copy h3 { white-space: normal; }
}
@media (hover: none), (max-width: 860px) {
  .wwd-item::before { opacity: 1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.75)); }
}
@media (max-width: 600px) {
  .wwd { grid-template-columns: 1fr; }
  .wwd-item { aspect-ratio: 5/4; }
}

/* ---------- Band (redevelopment teaser) ---------- */
.band { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff; overflow: hidden; background: #000; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,9,8,.88) 0%, rgba(10,9,8,.6) 45%, rgba(10,9,8,.15) 100%); }
.band .wrap { position: relative; z-index: 2; padding-top: 110px; padding-bottom: 110px; }
.band blockquote { margin: 22px 0 34px; max-width: 22ch; font: 300 clamp(34px, 4.4vw, 64px)/1.1 var(--serif); }
.band p { max-width: 52ch; color: rgba(255,255,255,.85); }

/* ---------- Partners ---------- */
/* Partners: an open row, each partner under a thin rule with a short red accent that runs full width on hover.
   Project, name and role share rows across a line of partners so they stay aligned however long a name is. */
.partners { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: clamp(20px, 2.6vw, 40px); row-gap: 44px; }
.partner { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.partner::before { content: ""; position: absolute; top: -1px; left: 0; width: 36px; height: 1px; background: var(--red); transition: width .7s var(--ease); }
.partner:hover::before { width: 100%; }
@supports (grid-template-rows: subgrid) {
  .partner { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.partner .label { display: block; font-size: 10px; line-height: 1.7; letter-spacing: .22em; color: var(--red); }
.partner b { display: block; margin-top: 14px; font: 400 clamp(22px, 1.9vw, 27px)/1.15 var(--serif); }
.partner .role { display: block; margin-top: 8px; font-size: 13px; color: var(--mute); }
.llp-eg { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 0 auto 56px; font: 300 clamp(22px, 2.4vw, 32px)/1.3 var(--serif); }
.llp-eg i { font-style: normal; color: var(--red); }

/* ---------- CTA band ---------- */
.cta { text-align: center; position: relative; overflow: hidden; margin-bottom: clamp(72px, 10vw, 140px); } /* same gap below as the section spacing above, so it sits evenly between "Built together" and the footer */
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(243, 239, 231, .65); }
.cta .wrap { position: relative; z-index: 2; }
.cta .display { margin: 18px auto 30px; max-width: 18ch; }
.cta .btn-row { justify-content: center; }

/* ---------- Project page ---------- */
/* Facts card: floats over the bottom of the project hero */
.phero.has-facts { min-height: 520px; }
.phero.has-facts .wrap { padding-bottom: calc(clamp(48px, 8vh, 84px) + 60px); }
.factbar-wrap { position: relative; z-index: 5; margin-top: -64px; padding: 0 var(--gutter); }
.factbar {
  max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 1px;
  background: var(--line); box-shadow: 0 30px 70px -30px rgba(15,14,13,.35), 0 1px 0 var(--line);
}
.fact { position: relative; padding: 30px 26px 28px; background: #fff; overflow: hidden; }
.fact::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 110ms + .15s); }
.fact.in::before { transform: scaleX(1); }
.fact.rv { transition: opacity .9s var(--ease), transform .9s var(--ease), background .4s; transition-delay: calc(var(--i) * 110ms), calc(var(--i) * 110ms), 0s; }
.fact-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); transition: color .4s, border-color .4s, background .4s, transform .5s var(--ease); }
.fact-ic svg { width: 18px; height: 18px; }
.fact dt { font: 400 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.fact dd { margin: 8px 0 0; font: 400 20px/1.3 var(--serif); color: var(--ink); }
.fact:hover { background: var(--bg); }
.fact:hover .fact-ic { color: #fff; background: var(--red); border-color: var(--red); transform: translateY(-3px) rotate(-6deg); }
.st { display: inline-flex; align-items: center; gap: 9px; font: 400 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 8px 12px 8px 10px; border: 1px solid var(--line); }
.st i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
.st-on { color: var(--red); border-color: rgba(200,22,29,.35); }
.st-on i { background: var(--red); }
.st-on i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--red); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.copy { display: inline-flex; align-items: baseline; gap: 10px; font: 400 20px/1.3 var(--serif); text-align: left; }
.copy small { font: 400 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s, color .3s; }
.fact:hover .copy small, .copy:focus-visible small, .copy.copied small { opacity: 1; transform: none; }
.copy.copied small { color: var(--red); }
.overview { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 7vw, 110px); }
.overview .statement { position: sticky; top: calc(var(--hdr) + 40px); align-self: start; }
.overview p { color: var(--ink-2); font-size: 17px; }
.overview p.statement { font-size: clamp(26px, 3vw, 42px); color: var(--ink); }
.hl { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 36px; counter-reset: hl; }
.hl li { counter-increment: hl; padding: 16px 0; border-top: 1px solid var(--line); display: flex; gap: 18px; font-size: 15px; }
.hl li::before { content: counter(hl, decimal-leading-zero); font: 400 11px/2 var(--sans); letter-spacing: .1em; color: var(--red); }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 14px; }
.gallery button { position: relative; overflow: hidden; background: var(--paper); grid-column: span 2; }
.gallery button:nth-child(5n+1) { grid-column: span 4; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery button:hover img { transform: scale(1.05); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 12px; letter-spacing: .08em; text-align: left; opacity: 0; transition: opacity .4s; }
.gallery button:hover figcaption { opacity: 1; }
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.films figure { margin: 0; }
.films video { width: 100%; background: #000; aspect-ratio: 16/9; object-fit: cover; }
.films figure.portrait video { aspect-ratio: 9/14; }
.films figcaption { margin-top: 12px; font-size: 13px; color: #a39d92; }
.tbl-wrap { overflow-x: auto; }
table.units { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.units th { text-align: left; font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.units td { padding: 16px; border-bottom: 1px solid var(--line); }
.units td:not(:first-child), .units th:not(:first-child) { text-align: right; }
.units caption { caption-side: bottom; text-align: left; padding-top: 14px; font-size: 12px; color: var(--mute); }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; font: 400 22px/1.3 var(--serif); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--mute); transition: transform .3s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details p { margin: 0 0 24px; color: var(--ink-2); max-width: 70ch; }
.loc { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.conn { list-style: none; margin: 28px 0 0; padding: 0; }
.conn li { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.conn li span:last-child { color: var(--mute); }
.map { width: 100%; aspect-ratio: 4/3; border: 0; background: var(--paper); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field span { font: 400 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.field input, .field select, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 0 12px;
  font: 300 17px/1.4 var(--sans); color: var(--ink); border-radius: 0; appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); }
.form .note { font-size: 12px; color: var(--mute); margin: 0; }
.form .btn { justify-self: start; margin-top: 8px; }
.dark .field input, .dark .field select, .dark .field textarea { color: #fff; border-color: rgba(255,255,255,.25); }
.dark .field select option { color: var(--ink); }

/* ---------- Enquire drawer + tab ---------- */
.enq-tab {
  position: fixed; right: 0; top: 50%; z-index: 40; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  background: var(--red); color: #fff; padding: 22px 13px; font: 400 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  transition: padding .3s var(--ease), background .3s;
}
.enq-tab:hover { padding-right: 18px; background: var(--red-d); }
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.open { visibility: visible; }
.scrim { position: absolute; inset: 0; background: rgba(15,14,13,.5); opacity: 0; transition: opacity .5s; }
.drawer.open .scrim, .nav.open + .scrim-nav { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100%); background: var(--bg); overflow-y: auto;
  transform: translateX(100%); transition: transform .6s var(--ease); padding: 0 40px 40px;
}
.drawer.open .drawer-panel { transform: none; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; height: var(--hdr); }
.drawer h2 { font: 300 42px/1.1 var(--serif); margin: 16px 0 10px; }
.drawer .intro { color: var(--ink-2); margin-bottom: 30px; }
.drawer .alt { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.drawer .alt a { color: var(--ink); border-bottom: 1px solid var(--line); }
.scrim-nav { position: fixed; inset: 0; z-index: 79; background: rgba(15,14,13,.5); opacity: 0; pointer-events: none; transition: opacity .5s; }
.nav.open + .scrim-nav { pointer-events: auto; }


/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(10,10,10,.96); display: none; align-items: center; justify-content: center; color: #fff; }
.lb.open { display: flex; }
.lb img { max-width: 88vw; max-height: 80vh; object-fit: contain; }
.lb figcaption { text-align: center; margin-top: 16px; font-size: 13px; letter-spacing: .08em; color: #bbb; }
.lb button { position: absolute; width: 56px; height: 56px; display: grid; place-items: center; color: #fff; }
.lb .x { top: 18px; right: 18px; font-size: 30px; font-weight: 200; }
.lb .p { left: 12px; top: 50%; transform: translateY(-50%); }
.lb .n { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Timeline ---------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 180px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl li { display: grid; grid-template-columns: 180px 1fr; gap: 0 44px; padding: 0 0 48px; position: relative; }
.tl li::after { content: ""; position: absolute; left: 176px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--red); }
.tl b { font: 300 38px/1 var(--serif); }
.tl h3 { margin: 4px 0 8px; font: 400 14px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.tl p { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.pillars > div { padding: 40px 36px 36px 0; border-right: 1px solid var(--line); }
.pillars > div + div { padding-left: 36px; }
.pillars > div:last-child { border-right: 0; }
.pillars .num { font: 400 12px/1 var(--sans); letter-spacing: .2em; color: var(--red); }
.pillars h3 { font: 300 38px/1.1 var(--serif); margin: 22px 0 14px; }
.pillars p { color: var(--ink-2); margin: 0; }
.pillars.four { grid-template-columns: repeat(4, 1fr); }
.pillars.four h3 { font-size: 30px; }
.pillars ul { margin: 18px 0 0; padding: 0; list-style: none; }
.pillars li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.dark .pillars, .dark .pillars > div, .dark .pillars li { border-color: rgba(255,255,255,.14); }
.dark .pillars p, .dark .pillars li { color: #c4beb3; }

.steps { counter-reset: st; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps li { list-style: none; counter-increment: st; padding: 30px 28px 34px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(st, decimal-leading-zero); display: block; font: 300 46px/1 var(--serif); color: var(--red); margin-bottom: 16px; }
.steps h3 { margin: 0 0 8px; font: 400 14px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 36ch; }
.steps { padding: 0; margin: 0; }

.quote { font: 300 clamp(30px, 3.6vw, 52px)/1.2 var(--serif); max-width: 24ch; margin: 0 auto; text-align: center; }
.quote::before { content: "“"; display: block; font-size: 1.6em; line-height: .6; color: var(--red); margin-bottom: 14px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 7vw, 110px); }
.cblock { padding: 26px 0; border-top: 1px solid var(--line); }
.cblock .label { display: block; margin-bottom: 10px; }
.cblock p, .cblock a { font: 400 22px/1.45 var(--serif); margin: 0; }
.cblock a { display: block; }
.cblock a:hover { color: var(--red); }

/* ---------- Footer ---------- */
.ftr { background: var(--dark); color: #cfc9be; padding: 96px 0 0; font-size: 14px; }
.ftr-top { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 48px; padding-bottom: 72px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ftr-logo img { width: 190px; }
.ftr-logo p { margin-top: 26px; max-width: 30ch; color: #9c968b; }
.ftr h4 { margin: 8px 0 22px; font: 400 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { padding: 5px 0; }
.ftr a:hover { color: #fff; }
.social { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; margin-top: 22px; }
.social a { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: #e9e4da; transition: color .3s, transform .3s var(--ease); }
.social a:hover { color: var(--red); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }
.ftr address { font-style: normal; line-height: 1.8; }
.ftr-note { padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.8; color: #8a857c; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ftr-note b { color: #cfc9be; font-weight: 400; }
.ftr-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 26px 0 30px; font-size: 12px; color: #8a857c; letter-spacing: .04em; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .12s; } .rv.d2 { transition-delay: .24s; } .rv.d3 { transition-delay: .36s; }
/* Panels keep their flex animation alongside the reveal; stagger applies to the reveal only. */
.wwd-item.rv { transition: opacity 1s var(--ease), transform 1s var(--ease), flex-grow .9s var(--ease); }
.wwd-item.rv.d1 { transition-delay: .12s, .12s, 0s; } .wwd-item.rv.d2 { transition-delay: .24s, .24s, 0s; } .wwd-item.rv.d3 { transition-delay: .36s, .36s, 0s; }
.stat.d1 { transition-delay: .18s; } .stat.d2 { transition-delay: .36s; } .stat.d3 { transition-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .stat::before { width: 100%; transition: none; }
  .stat span { opacity: 1; transform: none; transition: none; }
  .card-over, .view-cursor span, .card-film { transition: none; }
  .spot-layer, .spot-film { transition: none !important; transform: none !important; }
  .fact::before { transform: none; transition: none; }
  .st-on i::after { animation: none; }
  .hero-slide.on img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .factbar { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .rail { grid-auto-columns: calc((100% - 28px) / 2); }
  .partners { grid-template-columns: repeat(3, 1fr); }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .pillars.four { grid-template-columns: repeat(2, 1fr); }
  .pillars.four > div:nth-child(2) { border-right: 0; }
  .pillars.four > div:nth-child(3) { padding-left: 0; }
}
@media (max-width: 860px) {
  :root { --hdr: 68px; }
  .brand { height: 36px; }
  .hdr-right .enq, .hdr-right .phone-txt { display: none; }
  .nav { grid-template-columns: 1fr; }
  .split, .spot, .overview, .loc, .contact-grid { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .spot-stage { max-width: 380px; width: 100%; margin: 0 auto; }
  .floor { grid-template-columns: 72px 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .pillars, .steps { grid-template-columns: 1fr; }
  .pillars > div, .pillars > div + div { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .overview .statement { position: static; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery button, .gallery button:nth-child(5n+1) { grid-column: span 1; grid-row: span 1; }
  .gallery button:nth-child(3n+1) { grid-column: span 2; }
  .ftr-note { grid-template-columns: 1fr; gap: 16px; }
  .enq-tab { display: none; }
  .tl::before { left: 6px; }
  .tl li { grid-template-columns: 1fr; padding-left: 36px; }
  .tl li::after { left: 2px; }
  .tl b { font-size: 32px; margin-bottom: 6px; }
  .finder { width: 100%; }
  .finder .tabs { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .finder .tab { flex: 1; padding: 0 8px; }
  .finder .tab.on::after { left: 8px; right: 8px; }
  .finder select { flex: 1; min-width: 0; padding: 0 30px 0 14px; letter-spacing: .1em; background-position: right 12px center; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .hdr .menu-btn .txt { display: none; }
  .rail { grid-auto-columns: 84%; gap: 16px; }
  .grid3 { grid-template-columns: 1fr; }
  .partners { grid-template-columns: 1fr 1fr; }
  .hl { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr; }
  .hero-dot { font-size: 0; }
  .hero-scroll { display: none; }
  .drawer-panel { padding: 0 22px 32px; }
  .factbar { grid-template-columns: 1fr 1fr; }
  .fact { padding: 20px 16px; }
  .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fact-ic { width: 32px; height: 32px; margin-bottom: 12px; }
  .fact dd, .copy { font-size: 17px; }
  .factbar-wrap { margin-top: -40px; }
  .phero.has-facts .wrap { padding-bottom: 76px; }
  .stat { padding: 30px 18px; }
}

/* ---------- Mobile & tablet refinements ---------- */
/* Header: the first phone number stays visible on tablets. Below 1100px the Enquire button gives way
   (the side "Enquire now" tab and the mobile bar cover it) so the number never crowds the logo. */
@media (max-width: 1100px) {
  .hdr-right .enq { display: none; }
  .hdr-right .phone-txt { letter-spacing: .12em; }
}
@media (max-width: 860px) {
  .hdr-right .phone-txt { display: inline-flex; }
}
@media (max-width: 600px) { /* phones: no room beside the logo for the digits, so a tap-to-call icon */
  .hdr-right .phone-txt span { display: none; }
  .hdr-right .phone-txt { width: 40px; height: 40px; justify-content: center; }
  .hdr-right .phone-txt svg { width: 22px; height: 22px; }
}

/* Touch devices: comfortable tap targets and no double-tap-zoom delay (visual layout unchanged). */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: rgba(200, 22, 29, .14); }
  a, button, summary, select, label, input, textarea { touch-action: manipulation; }
  /* invisible padding around small controls so a thumb can hit them */
  .hdr .menu-btn, .hero-dot, .link, .crumbs a, .hdr-right a { position: relative; }
  .hdr .menu-btn::after, .hero-dot::after, .link::before, .crumbs a::before, .hdr-right a::before { content: ""; position: absolute; inset: -14px -10px; }
  .nav-close { width: 40px; height: 40px; }
  .nav-close::before, .nav-close::after { left: 7px; width: 26px; }
  .ftr li a, .ftr address a { display: inline-block; padding: 8px 0; }
  .nav-sub a { padding: 12px 0; }
  .rail-nav button { width: 56px; height: 56px; }
}

/* Phones & small tablets */
@media (max-width: 860px) {
  /* iOS zooms the page when a field under 16px is focused */
  .finder select, .field input, .field select, .field textarea { font-size: 16px; }
  .finder select { letter-spacing: .04em; }
  /* The header hides the phone and Enquire on small screens, so a quick-action bar takes over */
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.25fr;
    background: rgba(251, 250, 247, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(15, 14, 13, .35);
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .45s var(--ease);
  }
  .mbar.show { transform: none; }
  .mbar a, .mbar button {
    display: flex; align-items: center; justify-content: center; gap: 9px; height: 56px;
    font: 400 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  }
  .mbar a + a, .mbar a + button { border-left: 1px solid var(--line); }
  .mbar svg { width: 18px; height: 18px; }
  .mbar .go { background: var(--red); color: #fff; border-left-color: var(--red); }
  .ftr { padding-bottom: 56px; }
  body.locked .mbar { display: none; }
}
@media (min-width: 861px) { .mbar { display: none; } }

/* Very small phones (320px): long partner names must not push the grid wider than the screen */
@media (max-width: 600px) {
  .partner { min-width: 0; }
  .partner b { font-size: 21px; overflow-wrap: anywhere; }
  .finder select { text-transform: none; letter-spacing: .02em; }
}
@media (max-width: 380px) {
  .btn { padding: 0 20px; letter-spacing: .18em; }
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}
/* Enquiry form: confirmation + error states (forms save to the database; no WhatsApp redirect) */
.form .note.err { color: var(--red); font-size: 14px; }
.form-done { padding: 28px 0 8px; }
.form-done h3 { font: 300 clamp(30px, 3vw, 40px)/1.15 var(--serif); margin: 14px 0 12px; }
.form-done p { color: var(--ink-2); max-width: 46ch; margin: 0 0 22px; }
.dark .form-done p { color: #c4beb3; }
.form-done .link { color: inherit; cursor: pointer; }
/* ---------- Footer legal buttons + Privacy / Terms pages ---------- */
/* Legal links share the tagline's type exactly (12px, muted, .04em spacing); they just brighten on hover. */
/* Three equal tracks: copyright left, tagline truly centred, legal links flush right. */
.ftr-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; }
.ftr-bottom > :first-child { justify-self: start; }
.ftr-bottom > :last-child { justify-self: end; }
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; }
.ftr-legal a { color: inherit; font: inherit; letter-spacing: inherit; padding: 8px 0; margin: -8px 0; transition: color .3s; }
.ftr-legal span { margin: 0 .7em; } /* the bullet, same character and colour as in the tagline */
.ftr-legal a:hover { color: #fff; }
@media (max-width: 600px) {
  .ftr-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ftr-bottom > :last-child { justify-self: auto; }
}

.legal { display: grid; grid-template-columns: 270px 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--hdr) + 28px); background: var(--paper); padding: 26px 26px 18px; max-height: calc(100vh - var(--hdr) - 56px); overflow-y: auto; }
.legal-toc .label { display: block; margin-bottom: 14px; font-size: 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; padding: 7px 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.legal-toc li::before { content: counter(toc) ". "; color: var(--red); font-size: 14px; }
.legal-toc a:hover { color: var(--red); }
.legal-body { max-width: 780px; min-width: 0; }
.legal-body .meta { margin: 0 0 8px; font-size: 14px; color: var(--mute); }
.legal-body h2 { font: 300 clamp(26px, 2.6vw, 34px)/1.2 var(--serif); margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 16px); }
.legal-body .meta + h2 { margin-top: 28px; }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: 16px; }
.legal-body p { margin: 0 0 1em; }
.legal-body ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.legal-body li { padding: 3px 0; overflow-wrap: anywhere; }
.legal-body ul.plain-list { list-style: none; padding-left: 0; }
.legal-body b { font-weight: 500; color: var(--ink); }
.legal-body a { color: var(--ink); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.legal-body a:hover { color: var(--red); border-color: var(--red); }
.legal-body [data-c=phones] a { white-space: nowrap; }
.legal-body [data-c=phones] a + a { margin-left: 16px; }
.legal-body .summary { background: var(--paper); border-left: 2px solid var(--red); padding: 18px 24px 8px; margin-bottom: 8px; }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc { position: static; max-height: none; overflow: visible; }
}
/* Legal pages: contact details table (Grievance Officer) */
.legal-dl { margin: 0 0 1.4em; border-top: 1px solid var(--line); }
.legal-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.legal-dl dt { font: 400 11px/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.legal-dl dd { margin: 0; color: var(--ink-2); font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .legal-dl > div { grid-template-columns: 1fr; gap: 2px; } }
/* Enquiry form: two send options (site database / WhatsApp) */
.form .form-actions { margin-top: 8px; gap: 12px; }
.form .form-actions .btn { margin-top: 0; justify-self: auto; }
.alt-btn svg { width: 18px; height: 18px; flex: none; }
.alt-btn { padding: 0 24px; letter-spacing: .2em; }
.form .btn[disabled] { opacity: .55; pointer-events: none; }
@media (max-width: 600px) {
  .form .form-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .form .form-actions .btn { justify-content: center; width: 100%; }
}
.field .opt { font-style: normal; text-transform: none; letter-spacing: .02em; color: var(--mute); font-size: 12px; }

/* ---------- Enquiry form buttons: transparent, outlined ---------- */
.form .form-actions { gap: 14px; margin-top: 12px; }
.form .form-actions .btn, .form .form-actions .btn.solid {
  position: relative; height: 56px; margin: 0; padding: 0 14px 0 28px; gap: 14px;
  background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 0; box-shadow: none;
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: transform .35s var(--ease);
}
.form .form-actions .alt-btn { padding: 0 20px 0 28px; }
/* hover never changes the background or colours: the button just lifts a little and its icon moves */
.form .form-actions .btn:hover, .form .form-actions .btn.solid:hover { background: transparent; color: inherit; border-color: currentColor; transform: translateY(-2px); }
.form .form-actions .btn:active { transform: none; }
/* icons sit in a thin outlined circle */
.form .form-actions .btn svg {
  box-sizing: border-box; flex: none; width: 32px; height: 32px; padding: 7px; border: 1px solid currentColor; border-radius: 50%;
  transition: transform .4s var(--ease);
}
.form .form-actions .btn.solid:hover .arrow { transform: translateX(4px); }
/* WhatsApp logo: original WhatsApp green, shown as the logo itself (no circle) */
.form .form-actions .alt-btn svg { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; color: #25d366; }
.form .form-actions .alt-btn:hover svg { transform: rotate(-8deg) scale(1.08); }
.form .form-actions .btn[disabled] { opacity: .5; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .form .form-actions .btn, .form .form-actions .btn svg { transition: none; }
  .form .form-actions .btn:hover { transform: none; }
}
@media (max-width: 600px) {
  .form .form-actions .btn { width: 100%; justify-content: center; }
}
/* ---------- Consent pop-up (shown before any enquiry is sent) ---------- */
.consent {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  margin: auto; padding: clamp(26px, 4vw, 40px); border: 0; border-top: 3px solid var(--red);
  background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.consent::backdrop { background: rgba(15,14,13,.6); }
.consent h3 { margin: 14px 0 16px; font: 300 clamp(26px, 3vw, 34px)/1.15 var(--serif); }
.consent p, .consent li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.consent ul { margin: 0 0 1.1em; padding-left: 20px; }
.consent li { margin-bottom: 4px; }
.consent a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.consent .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 480px) { .consent .btn-row .btn { flex: 1 1 100%; justify-content: center; } }