/* Grand Falcon · Morning Haze
   Bone and sand carry the page, navy is the ink, steel is the structure.
   The logo's lime survives only as a signal dot. One dark act: the restoration. */
:root {
  --bone:   #F3F1EC;
  --paper:  #FAF9F6;
  --sand:   #D9CDB8;
  --sand-2: #E9E3D7;
  --steel:  #A9B3C1;
  --steel-2:#D9DEE5;
  --ink:    #0E1A33;
  --ink-2:  #364059;
  --ink-3:  #646E86;
  --navy:   #0E1A33;
  --navy-2: #182A50;
  --signal: #B7CF3A;
  --accent: #2F5FAE;
  --accent-soft: #A9C1EC;
  --line:   rgb(14 26 51 / .12);
  --line-2: rgb(14 26 51 / .2);

  --sc-canvas: var(--bone);
  --sc-surface: var(--paper);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-2);
  --sc-accent: var(--ink);
  --sc-accent-ink: var(--bone);
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 222 45% 12%;

  --r: 16px;
  --nav-h: 76px;
  --gut: clamp(1rem, 3.2vw, 2.75rem);
}

html { scroll-padding-top: calc(var(--nav-h) + 12px); }
body { background: var(--bone); color: var(--ink); overflow-x: clip; font-feature-settings: "ss01"; }
::selection { background: var(--ink); color: var(--bone); }
img { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
em { font-style: normal; color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--bone); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), 90rem); margin-inline: auto; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }

.h2 {
  font-weight: 500;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 4.4rem);
  line-height: .98; letter-spacing: -0.048em;
  text-wrap: balance; margin: 0;
}
.kicker, .label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 1.35rem; border-radius: 999px; border: 0;
  font-weight: 550; font-size: .95rem; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform 240ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out), color 240ms, box-shadow 240ms;
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform 300ms var(--sc-ease-out); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 40px; padding: 0 1.05rem; font-size: .88rem; }
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink:hover { background: var(--navy-2); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--bone { background: var(--bone); color: var(--ink); }
.btn--bone:hover { background: #fff; }
.btn--ghost-dark { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px rgb(243 241 236 / .28); }
/* legacy names kept by markup */
.btn--signal { background: var(--ink); color: var(--bone); }
.btn--navy { background: var(--ink); color: var(--bone); }
.link { display: inline-flex; align-items: center; gap: .5em; font-weight: 550; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 300ms var(--sc-ease-out); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link svg { width: 1.05em; height: 1.05em; }

/* -------------------------------------------------------------------- nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 80; color: var(--ink); transition: background-color 300ms, box-shadow 300ms, transform 450ms var(--sc-ease-out); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 2rem; width: min(100% - 2 * var(--gut), 90rem); margin-inline: auto; }
.nav.is-solid { background: color-mix(in oklab, var(--bone) 84%, transparent); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: .65rem; }
.brand { gap: .8rem; }
.brand__mark { width: auto; height: 40px; filter: drop-shadow(0 4px 10px rgb(20 39 90 / .16)) drop-shadow(0 0 0.6px rgb(14 26 51 / .3)); }
.brand__word { font-weight: 600; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1; display: grid; gap: 5px; }
.brand__word small { font-weight: 450; font-size: .58rem; letter-spacing: .2em; color: var(--ink-3); }
.nav__links { display: flex; gap: 2rem; margin-left: auto; font-size: .9rem; }
.nav__links a { position: relative; padding: 6px 0; color: var(--ink-2); transition: color 200ms; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 380ms var(--sc-ease-out); }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 1.25rem; margin-left: 2rem; }
.nav__call { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.nav__call:hover { color: var(--ink); }
.nav__call svg { width: 1rem; height: 1rem; }
.nav__menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; position: relative; }
.nav__menu span:not(.sr) { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform 320ms var(--sc-ease-out); }
.nav__menu span:nth-child(1) { top: 18px; } .nav__menu span:nth-child(2) { top: 25px; }
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.drawer { position: fixed; inset: var(--nav-h) 0 0; background: var(--bone); padding: 1.5rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.drawer[hidden] { display: none; }
.drawer > a { font-size: 2.1rem; font-weight: 500; letter-spacing: -0.04em; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.drawer__foot { margin-top: auto; display: grid; gap: .6rem; }
.drawer__foot .btn--signal { background: var(--ink); }
.drawer__foot .btn--ghost-dark { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ------------------------------------------------------------------ proof */
.proof { background: var(--bone); padding: clamp(5rem, 9vw, 9rem) 0 clamp(3rem, 6vw, 6rem); }
.proof__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.proof__lede { margin: 0; font-weight: 450; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.55rem); line-height: 1.12; letter-spacing: -0.035em; text-wrap: pretty; }
.proof__specs { margin: 0; display: grid; }
.proof__specs > div { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "dt dd" "p dd"; column-gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--line-2); }
.proof__specs > div:last-child { border-bottom: 1px solid var(--line-2); }
.proof__specs dt { grid-area: dt; font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.proof__specs p { grid-area: p; margin: .25rem 0 0; font-size: .92rem; color: var(--ink-2); }
.proof__specs dd { grid-area: dd; margin: 0; align-self: center; font-weight: 450; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem); letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- spaces */
.spaces { position: relative; background: var(--bone); padding: clamp(2rem, 4vw, 4rem) 0 clamp(5rem, 9vw, 9rem); }
.spaces__head { max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.spaces__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.spaces__list li { position: relative; z-index: 0; border-bottom: 1px solid var(--line-2); }
.spaces__list a { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: clamp(1.15rem, 2.1vw, 1.8rem) 0; transition: padding 480ms var(--sc-ease-out); }
.spaces__name { font-weight: 450; font-size: clamp(1.5rem, 1rem + 1.9vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.02; }
.spaces__note { color: var(--ink-2); font-size: .98rem; }
.spaces__thumb { display: none; }
.spaces__arrow { width: 1.4rem; height: 1.4rem; color: var(--ink-3); transition: transform 420ms var(--sc-ease-out), color 300ms; }
.spaces__list a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gut)); background: var(--sand-2); transform: scaleY(0); transform-origin: bottom; transition: transform 480ms var(--sc-ease-out); z-index: -1; }
@media (hover: hover) and (pointer: fine) {
  .spaces__list a:hover { padding-left: 1.25rem; }
  .spaces__list a:hover::before { transform: scaleY(1); }
  .spaces__list a:hover .spaces__arrow { color: var(--ink); transform: translateX(6px) rotate(-45deg); }
}
.spaces__float { position: fixed; left: 0; top: 0; z-index: 30; margin: 0; width: 320px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; pointer-events: none; opacity: 0; scale: .9; transition: opacity 280ms var(--sc-ease-out), scale 420ms var(--sc-ease-out); box-shadow: 0 30px 60px -30px rgb(14 26 51 / .5); }
.spaces__float.is-on { opacity: 1; scale: 1; }
.spaces__float img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------- restorations · the shutter */
.restore { position: relative; height: 600svh; background: var(--navy); color: var(--bone); }
.restore__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: calc(var(--nav-h) + 1rem) var(--gut) 2rem; max-width: 96rem; margin-inline: auto; }
.restore .kicker { color: var(--steel); }
.restore__title { margin: 1.1rem 0 0; font-weight: 500; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5rem); line-height: .94; letter-spacing: -0.052em; text-wrap: balance; }
.restore__title em { color: var(--accent-soft); }
.restore__body { margin: 1.4rem 0 0; max-width: 27rem; color: rgb(243 241 236 / .7); }
.plate { margin-top: clamp(1.5rem, 4vh, 2.75rem); padding: 1.1rem 0 0; border-top: 1px solid rgb(243 241 236 / .18); max-width: 27rem; }
.plate__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plate__plot { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.03em; }
.plate__state { font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(243 241 236 / .3); color: rgb(243 241 236 / .8); transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.plate__state.is-after { background: var(--bone); color: var(--ink); box-shadow: none; }
.plate__line { margin: .6rem 0 0; color: rgb(243 241 236 / .7); font-size: .96rem; min-height: 3em; }
.restore__rail { list-style: none; display: flex; gap: 6px; margin: 1.25rem 0 0; padding: 0; max-width: 27rem; }
.restore__rail li { flex: 1; font-family: var(--sc-font-mono); font-size: .64rem; letter-spacing: .06em; color: rgb(243 241 236 / .45); padding-top: .7rem; position: relative; white-space: nowrap; transition: color 300ms; }
.restore__rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(243 241 236 / .14); }
.restore__rail li::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; background: var(--bone); width: calc(var(--fill, 0) * 100%); }
.restore__rail li.is-on { color: var(--bone); }

.restore__frame { position: relative; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: #1c2742; box-shadow: 0 50px 90px -40px rgb(0 0 0 / .7); }
.restore__photo, .restore__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.restore__photo img { transform-origin: 50% 60%; }
.restore__edge { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--signal); box-shadow: 0 0 0 1px rgb(14 26 51 / .15); visibility: hidden; }
.restore__prev { z-index: 1; visibility: hidden; box-shadow: -18px 0 30px -12px rgb(0 0 0 / .45); }
.shutter { position: absolute; inset: 0; z-index: 2; transform: translateY(-101%); will-change: transform; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .35)); }
.shutter__slats {
  position: absolute; inset: 0 0 30px;
  background: repeating-linear-gradient(180deg, #e6e3dc 0, #f6f4ef 6px, #d6d2ca 13px, #b9b5ad 15px, #ecE9e2 17px, #e6e3dc 22px);
  box-shadow: inset 0 -10px 18px rgb(14 26 51 / .12);
}
.shutter__slats::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 26 51 / .14), transparent 14%, transparent 86%, rgb(14 26 51 / .16)); }
.shutter__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, #c9c5bd, #a8a49c); display: flex; align-items: center; justify-content: center; gap: 1.2rem; border-top: 1px solid #f3f1ec; }
.shutter__plot { font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); background: var(--ink); padding: 4px 10px; border-radius: 3px; }
.shutter__handle { width: 42px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #8e8a83, #6b6862); }
.shutter__guide { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 3; background: linear-gradient(90deg, #6e6a64, #b7b3ab, #6e6a64); }
.shutter__guide--l { left: 0; } .shutter__guide--r { right: 0; }
.restore__static { display: none; }

/* --------------------------------------------------------------- listings */
.listings { background: var(--paper); padding: clamp(5rem, 9vw, 9rem) 0; }
.listings__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem; align-items: end; margin-bottom: 2.25rem; }
.listings__sub { margin: 0; color: var(--ink-2); }
.toolbar { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 20; display: grid; gap: .7rem; padding: .7rem; margin: 0 -.7rem; border-radius: 16px; background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: blur(14px); transition: box-shadow 300ms; }
.toolbar.is-stuck { box-shadow: 0 14px 30px -22px rgb(14 26 51 / .45), 0 0 0 1px var(--line); }
.chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-weight: 500; font-size: .9rem; white-space: nowrap; transition: background-color 220ms, color 220ms, box-shadow 220ms; }
.chip small { font-family: var(--sc-font-mono); font-size: .68rem; color: var(--ink-3); }
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); box-shadow: none; }
.chip[aria-pressed="true"] small { color: rgb(243 241 236 / .6); }
.toolbar__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.field { position: relative; display: flex; align-items: center; min-height: 44px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms; }
.field:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.field select, .field input { border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--ink); height: 44px; padding: 0 1rem; outline: none; }
.field select { appearance: none; padding-right: 2.2rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234A5368' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.field--search { flex: 1 1 18rem; }
.field--search svg { position: absolute; left: 14px; color: var(--ink-3); width: 1.05rem; height: 1.05rem; }
.field--search input { width: 100%; padding-left: 2.6rem; }
.saved-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 12px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: .9rem; }
.saved-toggle svg { width: 1.05rem; height: 1.05rem; }
.saved-toggle span { font-family: var(--sc-font-mono); font-size: .74rem; min-width: 1.4em; padding: 2px 6px; border-radius: 6px; background: var(--sand-2); }
.saved-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bone); box-shadow: none; }
.saved-toggle[aria-pressed="true"] span { background: var(--signal); color: var(--ink); }
.listings__count { margin: 1.5rem 0 1rem; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); }
.card { position: relative; display: flex; flex-direction: column; animation: card-in 600ms var(--sc-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--sand-2); }
.card__media img, .qv__main, .spaces__float img, .spaces__thumb { filter: saturate(.78) contrast(.97) brightness(1.02); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sc-ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__open { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; border-radius: 12px; }
.card__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.save { position: absolute; z-index: 2; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(250 249 246 / .9); backdrop-filter: blur(6px); color: var(--ink); transition: transform 200ms var(--sc-ease-out), color 200ms; }
.save svg { width: 1.1rem; height: 1.1rem; }
.save:active { transform: scale(.9); }
.save[aria-pressed="true"] { color: #c23b3b; }
.save[aria-pressed="true"] svg path { fill: currentColor; }
.card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem .15rem 0; flex: 1; }
.card__meta { display: flex; justify-content: space-between; gap: .75rem; font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.card__avail { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); }
.card__avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.card__avail.is-later::before { background: var(--steel); }
.card__title { margin: 0; font-weight: 500; font-size: 1.28rem; line-height: 1.15; letter-spacing: -0.03em; }
.card__loc { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--ink-2); font-size: .9rem; }
.card__loc svg { width: .95rem; height: .95rem; }
.card__specs { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .15rem 0 0; padding: 0; font-size: .86rem; color: var(--ink-2); list-style: none; }
.card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.card__specs svg { width: .95rem; height: .95rem; color: var(--ink-3); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line); }
.card__price { margin: 0; font-weight: 550; font-size: 1.08rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card__price small { font-weight: 400; font-size: .78rem; color: var(--ink-3); letter-spacing: 0; }
.card__wa { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .95rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 550; font-size: .84rem; transition: background-color 220ms, color 220ms, box-shadow 220ms; }
.card__wa:hover { background: var(--ink); color: var(--bone); box-shadow: none; }
.card__wa svg { width: 1rem; height: 1rem; }
.empty { text-align: center; max-width: 34rem; margin: 2rem auto 0; padding: 3rem 1.5rem; border-radius: var(--r); background: var(--bone); }
.empty h3 { margin: 0 0 .5rem; font-weight: 500; font-size: 1.6rem; letter-spacing: -0.035em; }
.empty p { margin: 0 0 1.4rem; color: var(--ink-2); }

/* ----------------------------------------------------------------- owners */
.owners { background: var(--bone); padding: clamp(5rem, 9vw, 9rem) 0; }
.owners__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 7vw, 8rem); }
.owners__sticky { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
.owners__body { margin: 1.4rem 0 0; color: var(--ink-2); max-width: 30rem; font-size: 1.06rem; }
.owners__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.owners__img { margin: 2.5rem 0 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.owners__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--line-2); }
.step:last-child { border-bottom: 1px solid var(--line-2); }
.step__n { font-family: var(--sc-font-mono); font-size: .78rem; letter-spacing: .1em; color: var(--ink-3); padding-top: .55rem; }
.step__n svg { width: 1rem; height: 1rem; }
.step h3 { margin: 0 0 .55rem; font-weight: 500; font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); letter-spacing: -0.04em; line-height: 1.08; }
.step p { margin: 0; color: var(--ink-2); max-width: 34rem; }
.step--aside h3 { font-size: 1.25rem; }

/* ------------------------------------------------------------------ story */
.story { background: var(--sand-2); padding: clamp(5rem, 9vw, 9rem) 0; overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.story__media { margin: 0; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; }
.story__media img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.story__quote { margin: 0; }
.story__quote p { margin: 0; font-weight: 500; font-size: clamp(2.4rem, 1.2rem + 4vw, 5.6rem); line-height: .92; letter-spacing: -0.055em; text-wrap: balance; }
.story__text { display: grid; gap: 1rem; max-width: 34rem; margin-top: clamp(2rem, 4vw, 3rem); color: var(--ink-2); font-size: 1.04rem; }
.story__text p { margin: 0; }
.story__text strong { color: var(--ink); font-weight: 550; }
.story__ar { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 1.1rem; color: var(--ink); text-align: left; }

/* -------------------------------------------------------------------- faq */
.faq { background: var(--paper); padding: clamp(5rem, 8vw, 8rem) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__list details { border-top: 1px solid var(--line-2); }
.faq__list details:last-child { border-bottom: 1px solid var(--line-2); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; font-weight: 500; font-size: 1.12rem; letter-spacing: -0.02em; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; width: 13px; height: 13px; flex: none; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 320ms var(--sc-ease-out); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list p { margin: 0 0 1.5rem; color: var(--ink-2); max-width: 42rem; }

/* ---------------------------------------------------------------- contact */
.contact { background: var(--navy); color: var(--bone); padding-top: clamp(5rem, 9vw, 9rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); }
.contact__title { margin: 0; font-weight: 500; font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.8rem); line-height: .94; letter-spacing: -0.052em; text-wrap: balance; }
.contact__title em { color: var(--accent-soft); }
.reach { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; }
.reach a { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgb(243 241 236 / .12); transition: color 200ms, padding 360ms var(--sc-ease-out); }
.reach a:hover { padding-left: .5rem; }
.reach svg { width: 1.2rem; height: 1.2rem; color: var(--steel); }
.reach span { display: grid; gap: 2px; font-weight: 500; }
.reach small { font-family: var(--sc-font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(243 241 236 / .5); font-weight: 400; }
.enquiry { display: grid; gap: 1rem; align-content: start; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 20px; background: var(--paper); color: var(--ink); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 .25rem; border: 0; border-radius: 999px; background: var(--sand-2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-weight: 500; font-size: .92rem; color: var(--ink-2); transition: background-color 220ms, color 220ms, box-shadow 220ms; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(14 26 51 / .14); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f { display: grid; gap: .4rem; }
.f > span { font-family: var(--sc-font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.f input, .f select, .f textarea { font: inherit; font-size: 1rem; color: var(--ink); border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: .8rem .95rem; min-height: 50px; outline: none; transition: box-shadow 200ms; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.f input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #c23b3b; }
.enquiry__ref { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--sand-2); font-size: .9rem; }
.enquiry__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .25rem; }
.enquiry__note { margin: 0; font-size: .84rem; color: var(--ink-3); flex: 1 1 14rem; }
.enquiry__note.is-error { color: #b22d2d; }
.foot { margin-top: clamp(4rem, 8vw, 7rem); padding-bottom: 2rem; overflow: hidden; }
.foot__ar { font-family: "IBM Plex Sans Arabic", sans-serif; }
.foot__ig { display: inline-flex; align-items: center; gap: .4rem; }
.foot__ig:hover { color: var(--bone); }

/* -------------------------------------------------------------------- fab */
.fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--bone); box-shadow: 0 14px 30px -12px rgb(14 26 51 / .6); transform: translateY(120px); transition: transform 460ms var(--sc-ease-out), background-color 200ms; }
.fab:hover { background: var(--navy-2); }
.fab svg { width: 26px; height: 26px; }
.fab.is-on { transform: none; }

/* ------------------------------------------------------------- quick view */
.qv { width: min(1100px, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 50px 100px -30px rgb(14 26 51 / .55); overflow: hidden; }
.qv::backdrop { background: rgb(14 26 51 / .45); backdrop-filter: blur(6px); }
.qv[open] { animation: qv-in 460ms var(--sc-ease-drawer); }
@keyframes qv-in { from { opacity: 0; transform: translateY(24px) scale(.985); } }
.qv__inner { display: grid; grid-template-columns: 1.1fr 1fr; max-height: calc(100svh - 2rem); }
.qv__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgb(250 249 246 / .92); display: grid; place-items: center; }
.qv__close svg { width: 1.1rem; height: 1.1rem; }
.qv__gallery { background: var(--sand-2); display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.qv__main { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.qv__thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.qv__thumbs button { flex: none; width: 76px; height: 56px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; opacity: .55; transition: opacity 200ms; }
.qv__thumbs button[aria-current="true"], .qv__thumbs button:hover { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.qv__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qv__body { padding: clamp(1.5rem, 3vw, 2.5rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.qv__meta { margin: 0; font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qv__title { margin: 0; font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.045em; line-height: 1.02; padding-right: 2.5rem; }
.qv__price { margin: 0; font-weight: 550; font-size: 1.35rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qv__price small { font-weight: 400; font-size: .85rem; color: var(--ink-3); letter-spacing: 0; }
.qv__specs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.qv__specs div { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.qv__specs div:nth-child(odd) { padding-right: 1rem; }
.qv__specs dt { font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qv__specs dd { margin: .2rem 0 0; font-weight: 500; }
.qv__features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.qv__features li { padding: .4rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .84rem; color: var(--ink-2); }
.qv__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 1080px) {
  .nav__links, .nav__call span { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__menu { display: block; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .nav__actions .btn { display: none; }
  .brand__word small { display: none; }
  .brand__mark { height: 34px; }
  .proof__grid, .owners__grid, .faq__grid, .contact__grid, .story__grid, .listings__head { grid-template-columns: 1fr; }
  .spaces__list a { grid-template-columns: 72px minmax(0, 1fr) auto; gap: .2rem 1rem; }
  .spaces__thumb { display: block; grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 58px; object-fit: cover; border-radius: 8px; }
  .spaces__name { grid-row: 1; align-self: end; }
  .spaces__note { grid-row: 2; align-self: start; }
  .spaces__name { grid-column: 2; }
  .spaces__note { grid-column: 2; font-size: .88rem; }
  .spaces__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .restore { height: 540svh; }
  .restore__stage { grid-template-columns: 1fr; align-content: center; gap: 1.25rem; padding-top: calc(var(--nav-h) + .5rem); }
  .restore__frame { order: -1; }
  .restore__body { display: none; }
  .restore__title { font-size: 2.2rem; margin-top: .6rem; }
  .plate { margin-top: 1rem; }
  .owners__sticky { position: static; }
  .story__media { aspect-ratio: 4 / 3; }
  .enquiry__row { grid-template-columns: 1fr; }
  .qv__inner { grid-template-columns: 1fr; overflow-y: auto; }
  .qv__main { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .qv__body { overflow: visible; }
  .qv__specs { grid-template-columns: 1fr; }
  .qv__specs div:nth-child(odd) { padding-right: 0; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .toolbar__row .field:not(.field--search) { flex: 1 1 40%; }
  .toolbar__row .field select { width: 100%; }
  .saved-toggle { flex: 1 1 100%; justify-content: center; }
  .restore__rail li { font-size: .56rem; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .restore { height: auto; padding: clamp(6rem, 10vw, 9rem) 0 4rem; }
  .restore__stage { position: static; height: auto; display: block; padding-bottom: 2rem; }
  .restore__frame, .plate, .restore__rail { display: none; }
  .restore__static { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .restore__static figure { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .restore__static img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; width: 100%; }
  .restore__static figcaption { grid-column: span 2; font-family: var(--sc-font-mono); font-size: .76rem; color: rgb(243 241 236 / .7); }
  .card, .qv[open] { animation: none; }
  .owners__sticky { position: static; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .restore__static { grid-template-columns: 1fr; }
}

/* backdrop-filter makes the nav a containing block for fixed children,
   which would trap the drawer inside the bar */
.nav:has([data-menu][aria-expanded="true"]) { backdrop-filter: none; background: var(--bone); box-shadow: 0 1px 0 var(--line); }

/* entrance: copy rises line by line once the page is ready */
.hero__kicker, .hero__sub, .hero__mcta, .dock, .hero__meta { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--sc-ease-out), transform 1100ms var(--sc-ease-out); }
.hero__sub { transition-delay: 180ms; }
.dock { transition-delay: 420ms; }
.hero__meta { transition-delay: 520ms; }
.hero__sub { transition-delay: 300ms; }
.hero__mcta { transition-delay: 380ms; }
.is-ready .hero__kicker, .is-ready .hero__sub, .is-ready .hero__mcta, .is-ready .dock, .is-ready .hero__meta { opacity: 1; transform: none; }

/* film grain over the whole page */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

/* ------------------------------------------------- the logo's lime, as signal */
::selection { background: var(--signal); color: var(--ink); }
.nav__links a::after { height: 2px; background: var(--signal); }
.btn--ink svg { color: var(--signal); }
.restore .kicker, .restore .kicker .dot { color: var(--signal); }
.restore__rail li::after { background: var(--signal); }
.plate__state.is-after { background: var(--signal); color: var(--ink); }
.step__n::before { content: ""; display: block; width: 18px; height: 2px; margin-bottom: .6rem; background: var(--signal); }
.reach svg { color: var(--signal); }
.fab svg { color: var(--signal); }
.contact { box-shadow: inset 0 3px 0 var(--signal); }
.chip[aria-pressed="true"] small { color: var(--signal); }
.faq__list details[open] summary::after { color: var(--signal); }
.card__wa:hover svg { color: var(--signal); }


/* ===================================================== hero · the spaces wall */
.hero { position: relative; height: 240svh; background: var(--bone); }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero__copy {
  position: absolute; z-index: 4; left: var(--gut); top: 50%; translate: 0 -46%;
  width: min(38rem, 38vw); will-change: transform, opacity;
}
.hero__kicker { display: flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hero__kicker span[aria-hidden]:not(.dot) { color: var(--ink-3); }
.hero__title { margin: 1.1rem 0 0; font-weight: 500; font-size: clamp(2.9rem, 1rem + 4.3vw, 6.4rem); line-height: .9; letter-spacing: -0.058em; }
.hero__sub { margin: 1.4rem 0 0; max-width: 30ch; color: var(--ink-2); font-size: clamp(1rem, .94rem + .25vw, 1.15rem); line-height: 1.5; }

.dock {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 5px; margin-top: 1.6rem;
  background: var(--paper); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgb(14 26 51 / .35);
}
.dock__field { display: grid; gap: 3px; padding: 9px 16px 9px 14px; border-radius: 10px; min-width: 11.5rem; cursor: pointer; transition: background-color 200ms; }
.dock__field:hover { background: rgb(14 26 51 / .04); }
.dock__field + .dock__field { box-shadow: -1px 0 0 var(--line); }
.dock__field span { font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dock select { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 550; font-size: .95rem; color: var(--ink); padding: 0 20px 0 0; cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E1A33' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px; }
.dock__field:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dock__go { display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 10px; padding: 0 1.2rem; background: var(--ink); color: var(--bone); font-weight: 550; font-size: .92rem; transition: background-color 200ms; }
.dock__go:hover { background: var(--navy-2); }
.dock__go svg { width: 1.05rem; height: 1.05rem; color: var(--signal); }

/* the wall: five drifting columns on a tilted plane, faded at top and bottom */
.wall {
  position: absolute; z-index: 2; inset: 0;

}
/* top and bottom fades: plain gradients over the wall (a mask here forced the
   whole moving wall to re-render offscreen every frame and dropped layers) */
.wall::before, .wall::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.wall::before { top: 0; height: 30%; background: linear-gradient(180deg, var(--bone) 0, var(--bone) calc(var(--nav-h) + 4px), rgb(243 241 236 / 0) 100%); }
.wall::after { bottom: 0; height: 20%; background: linear-gradient(0deg, var(--bone), rgb(243 241 236 / 0)); }
.wall__plane {
  position: absolute; top: -18%; bottom: -18%; left: 0; width: 112vw;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px);
  transform-origin: 50% 50%;
}
.wall__col { position: relative; overflow: visible; }
.wall__track { display: grid; gap: clamp(10px, 1vw, 16px); will-change: transform; }
.tile { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--sand-2); isolation: isolate;
  box-shadow: 0 18px 36px -24px rgb(14 26 51 / .45); transition: transform 600ms var(--sc-ease-out), box-shadow 600ms var(--sc-ease-out); }
.tile--t { aspect-ratio: 4 / 5.2; }
.tile--s { aspect-ratio: 1 / 1; }
.tile--l { aspect-ratio: 4 / 3; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--sc-ease-out); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgb(243 241 236 / .12); pointer-events: none; transition: opacity 500ms; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(14 26 51 / .38)); opacity: 0; transition: opacity 500ms; }
.tile__tag { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--paper); font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: transform 500ms var(--sc-ease-out); }
.tile__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.tile__meta { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; color: #fff; font-size: .86rem; font-weight: 500; letter-spacing: -0.01em; opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 500ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover::before { opacity: 0; }
  .tile:hover::after { opacity: 1; }
  .tile:hover .tile__tag { transform: translateY(-26px); }
  .tile:hover .tile__meta { opacity: 1; transform: none; }
}
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* a bone wash behind the copy, then a centred veil for the payoff line */
.hero__stage::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 54vw; pointer-events: none;
  background: linear-gradient(90deg, var(--bone) 0%, var(--bone) 62%, rgb(243 241 236 / 0) 100%); opacity: var(--wash, 1); }
.hero__veil { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 55% at 50% 50%, rgb(243 241 236 / .96), rgb(243 241 236 / .82) 55%, rgb(243 241 236 / .3) 100%); }
.hero__beat { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; width: min(46rem, 88vw); text-align: center; opacity: 0; pointer-events: none; }
.hero__beat.is-live { pointer-events: auto; }
.hero__beat-kicker { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hero__beat-title { margin: 0 0 2rem; font-weight: 500; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6rem); line-height: .92; letter-spacing: -0.055em; text-wrap: balance; }

@media (max-width: 860px) {
  .hero { height: 200svh; }
  .hero__copy { left: var(--gut); right: var(--gut); width: auto; top: calc(var(--nav-h) + 3vh); translate: none; }
  .hero__title { font-size: clamp(2.7rem, 12.6vw, 4.2rem); margin-top: .8rem; }
  .hero__sub { font-size: .98rem; margin-top: 1rem; }
  .dock { display: none; }
  .hero__stage::before { inset: 0 0 auto 0; width: auto; height: 62%; background: linear-gradient(180deg, var(--bone) 0%, var(--bone) 74%, rgb(243 241 236 / 0) 100%); }
  .wall__plane { width: 190vw; }
  .tile__tag { font-size: .56rem; padding: 5px 8px; left: 7px; bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  body::after { animation: none; }
  .hero__kicker, .hero__sub, .hero__mcta, .dock, .hero__meta, .hero__title .ln > span, .wall__col { opacity: 1; transform: none; transition: none; }
}

/* ============================================== hero · depth, light, arrival */

/* columns rise in, one after another, once the shutter has cleared */
.wall__col { opacity: 0; transform: translate3d(0, 70px, 0); transition: opacity 900ms var(--sc-ease-out), transform 1400ms var(--sc-ease-out); transition-delay: calc(120ms + var(--c, 0) * 110ms); }
.is-ready .wall__col { opacity: 1; transform: none; }

/* headline: each line slides up from behind its own mask */
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__title .ln > span { display: block; transform: translate3d(0, 108%, 0); transition: transform 1200ms cubic-bezier(.2,.8,.2,1); }
.hero__title .ln + .ln > span { transition-delay: 110ms; }
.is-ready .hero__title .ln > span { transform: none; }

/* tiles: a quiet editorial caption instead of a pill */
.tile::after { opacity: 1; background: linear-gradient(180deg, transparent 58%, rgb(14 26 51 / .42)); }
.tile__tag { background: none; padding: 0; left: 12px; bottom: 12px; color: #fff; font-size: .6rem; letter-spacing: .14em; text-shadow: 0 1px 8px rgb(14 26 51 / .4); }
.tile__tag i { box-shadow: 0 0 0 3px rgb(183 207 58 / .25); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover::after { background: linear-gradient(180deg, transparent 35%, rgb(14 26 51 / .6)); }
  .tile:hover .tile__tag { transform: translateY(-24px); }
}

/* the live leasing ticker */
.ticker { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; font-size: .88rem; color: var(--ink-2); }
.ticker__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
.ticker__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--signal); animation: tick-ping 2s var(--sc-ease-out) infinite; }
@keyframes tick-ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.ticker__label { font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ticker__items { position: relative; display: grid; min-width: 0; overflow: hidden; }
.ticker__item { grid-area: 1 / 1; white-space: nowrap; color: var(--ink); font-weight: 500; opacity: 0; transform: translate3d(0, 100%, 0); transition: opacity 500ms, transform 700ms var(--sc-ease-out); }
.ticker__item.is-on { opacity: 1; transform: none; }
.ticker__item.is-out { opacity: 0; transform: translate3d(0, -100%, 0); }
.ticker__go { width: .95rem; height: .95rem; color: var(--ink); flex: none; transition: transform 300ms var(--sc-ease-out); }
.ticker:hover .ticker__go { transform: translateX(3px); }

@media (max-width: 860px) {
}
@media (prefers-reduced-motion: reduce) {
  .ticker__dot::after { animation: none; }
}

/* ================================================= hero · the refined left side */
.hero__copy { width: min(34rem, 37vw); }
.hero__sub { max-width: 34ch; }
.hero__copy .dock { display: flex; width: 100%; margin-top: 2.1rem; }
.hero__copy .dock__field { flex: 1 1 0; min-width: 0; }
.hero__copy .dock__go { padding: 0 1.35rem; }
.hero__mcta { display: none; }
.hero__meta { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.15rem; padding-left: .2rem; min-width: 0; }
.hero__owner { display: inline-flex; align-items: center; gap: .4rem; font-weight: 550; font-size: .9rem; color: var(--ink); white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 300ms var(--sc-ease-out); }
.hero__owner:hover { background-size: 0 1px; background-position: 100% 100%; }
.hero__owner svg { width: .95rem; height: .95rem; color: var(--signal); transition: transform 300ms var(--sc-ease-out); }
.hero__owner:hover svg { transform: translateX(3px); }
.hero__sep { width: 1px; height: 16px; background: var(--line-2); flex: none; }
.ticker__item { font-weight: 450; color: var(--ink-2); }
.ticker:hover .ticker__item.is-on { color: var(--ink); }

@media (max-width: 1180px) and (min-width: 861px) {
  .hero__meta { flex-wrap: wrap; row-gap: .6rem; }
  .hero__sep { display: none; }
}
@media (max-width: 860px) {
  .hero__copy { width: auto; }
  .hero__copy .dock { display: none; }
  .hero__mcta { display: inline-flex; margin-top: 1.4rem; min-height: 48px; }
  .hero__meta { margin-top: 1rem; }
  .hero__sep, .hero__meta .ticker { display: none; }
}

/* =========================================== hero · navy showcase and plan grid */
/* bone, a cobalt breath and the site-plan grid behind the copy */
.hero__stage { background:
  radial-gradient(45% 50% at 8% 92%, rgb(47 95 174 / .10), transparent 70%),
  radial-gradient(35% 40% at 40% 6%, rgb(183 207 58 / .08), transparent 70%),
  var(--bone); }
.hero__plan { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 50vw; pointer-events: none;
  background:
    linear-gradient(rgb(14 26 51 / .07) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, rgb(14 26 51 / .07) 1px, transparent 1px) 0 0 / 88px 100%;
  -webkit-mask: radial-gradient(75% 70% at 32% 52%, #000 25%, transparent 82%);
          mask: radial-gradient(75% 70% at 32% 52%, #000 25%, transparent 82%);
  clip-path: inset(0 100% 0 0); transition: clip-path 1800ms cubic-bezier(.65,0,.35,1) 150ms; opacity: var(--wash, 1); }
.is-ready .hero__plan { clip-path: inset(0 0 0 0); }



@media (max-width: 860px) {
  .hero__plan { width: 100vw; height: 60%; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero__plan { clip-path: none; transition: none; } }

/* ===================================================== hero · deep navy theme */
.hero--navy { background: #0E1A33; }
.hero--navy .hero__stage { background: #0E1A33; }
/* edge fades in the same solid navy, so they only soften the tiles */
.hero--navy .wall::before { background: linear-gradient(180deg, #0E1A33 0, #0E1A33 calc(var(--nav-h) + 4px), rgb(14 26 51 / 0) 100%); }
.hero--navy .wall::after { background: linear-gradient(0deg, #0E1A33, rgb(14 26 51 / 0)); }
.hero--navy .hero__stage::before { display: block; width: 58vw; opacity: var(--wash, 1);
  background: linear-gradient(90deg, rgb(15 29 60 / .97) 0%, rgb(15 29 60 / .92) 62%, rgb(15 29 60 / .5) 80%, rgb(15 29 60 / 0) 100%); }
.hero--navy .hero__plan { background:
  linear-gradient(rgb(243 241 236 / .055) 1px, transparent 1px) 0 0 / 100% 88px,
  linear-gradient(90deg, rgb(243 241 236 / .055) 1px, transparent 1px) 0 0 / 88px 100%; z-index: 3; }
.hero--navy .tile { box-shadow: 0 26px 44px -24px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06); }

/* type on navy */
.hero--navy .hero__kicker { color: rgb(243 241 236 / .66); }
.hero--navy .hero__kicker span[aria-hidden]:not(.dot) { color: rgb(243 241 236 / .35); }
.hero--navy .hero__title { color: var(--bone); }
.hero--navy .hero__title em { color: var(--accent-soft); }
.hero--navy .hero__sub { color: rgb(243 241 236 / .72); }
.hero--navy .dock { background: var(--paper); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .6); }
.hero--navy .hero__owner { color: var(--bone); }
.hero--navy .hero__sep { background: rgb(243 241 236 / .2); }
.hero--navy .ticker__label { color: rgb(243 241 236 / .45); }
.hero--navy .ticker__item { color: rgb(243 241 236 / .72); }
.hero--navy .ticker:hover .ticker__item.is-on { color: var(--bone); }
.hero--navy .ticker__go { color: var(--bone); }
.hero--navy .hero__mcta { background: var(--bone); color: var(--ink); }

/* a lime underline draws in under the accent word */
.hero__title em { position: relative; display: inline-block; }
.hero__title em::after { content: ""; position: absolute; left: .03em; right: .03em; bottom: .02em; height: .065em; border-radius: .04em; background: var(--signal);
  transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.65,0,.35,1) 950ms; }
.is-ready .hero__title em::after { transform: scaleX(1); }

/* the nav reads in bone while it floats over the navy hero */
body:has(.hero--navy) .nav:not(.is-solid) { color: var(--bone); }
body:has(.hero--navy) .nav:not(.is-solid) .nav__links a,
body:has(.hero--navy) .nav:not(.is-solid) .nav__call { color: rgb(243 241 236 / .78); }
body:has(.hero--navy) .nav:not(.is-solid) .nav__links a:hover { color: var(--bone); }
body:has(.hero--navy) .nav:not(.is-solid) .brand__word small { color: rgb(243 241 236 / .5); }
body:has(.hero--navy) .nav:not(.is-solid) .btn--ink { background: var(--bone); color: var(--ink); }
body:has(.hero--navy) .nav:has([data-menu][aria-expanded="true"]) { color: var(--ink); }

/* fact tiles: the palette, drifting with the photos */
.tile--fact { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 1.4vw, 22px); }
.tile--fact::before, .tile--fact::after { display: none; }
.tile--fact b { font-weight: 500; font-size: clamp(2.2rem, 1.2rem + 2.6vw, 4rem); line-height: .9; letter-spacing: -0.055em; }
.tile--fact span { font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; max-width: 16ch; }
.tile--paper { background: var(--paper); color: var(--ink); }
.tile--paper span { color: var(--ink-3); }
.tile--lime { background: var(--signal); color: var(--ink); }
.tile--lime span { color: rgb(14 26 51 / .7); }
.tile--cobalt { background: var(--accent); color: var(--bone); }
.tile--cobalt span { color: rgb(243 241 236 / .75); }

/* payoff over navy */
.hero--navy .hero__veil { background: rgb(14 26 51 / .86); }
.hero--navy .hero__beat-kicker { color: rgb(243 241 236 / .7); }
.hero--navy .hero__beat-title { color: var(--bone); }
.hero--navy .hero__beat-title em { color: var(--accent-soft); }
.hero--navy .hero__beat .btn--ink { background: var(--bone); color: var(--ink); }

@media (max-width: 860px) {
  .hero--navy .hero__stage::before { inset: 0 0 auto 0; width: auto; height: 72%;
    background: linear-gradient(180deg, #0E1A33 0%, #0E1A33 80%, rgb(14 26 51 / 0) 100%); }
  .tile--fact b { font-size: 2rem; }
}

/* ============================================= Abu Dhabi, drawn in at the close */
.skyline { position: relative; width: min(100% - 2 * var(--gut), 90rem); margin: clamp(4rem, 8vw, 7rem) auto 0; }
.skyline__art { aspect-ratio: 2400 / 480; background: rgb(243 241 236 / .5);
  -webkit-mask: url(assets/img/abu-dhabi-skyline.webp) center / 100% 100% no-repeat;
          mask: url(assets/img/abu-dhabi-skyline.webp) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 2800ms cubic-bezier(.65,0,.35,1); }
.skyline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2.1rem; height: 1px; background: var(--signal); opacity: .5;
  transform: scaleX(0); transform-origin: left; transition: transform 2800ms cubic-bezier(.65,0,.35,1); }
.skyline.is-drawn .skyline__art { clip-path: inset(0 0 0 0); }
.skyline.is-drawn::after { transform: scaleX(1); }
.skyline__cap { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgb(243 241 236 / .5); }
.skyline__cap span[aria-hidden]:not(.dot) { color: rgb(243 241 236 / .3); }
.skyline + .foot { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 640px) { .skyline__art { aspect-ratio: 2400 / 640; -webkit-mask-size: 160% 100%; mask-size: 160% 100%; -webkit-mask-position: 0 50%; mask-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skyline__art { clip-path: none; transition: none; } .skyline::after { transform: none; transition: none; } }

/* ================================================= logo lockup, refined */
.brand { gap: 0; }
.brand__mark { height: 40px; width: auto; border-radius: 3px; filter: none;
  box-shadow: 0 0 0 1px rgb(14 26 51 / .1), 0 8px 18px -10px rgb(14 26 51 / .45); }
.brand__word { margin-left: .9rem; padding-left: .9rem; border-left: 1px solid rgb(14 26 51 / .16);
  font-weight: 600; font-size: .9rem; letter-spacing: .15em; gap: 6px; }
.brand__word small { font-weight: 500; font-size: .54rem; letter-spacing: .26em; color: var(--ink-3); }
body:has(.hero--navy) .nav:not(.is-solid) .brand__mark { box-shadow: 0 0 0 1px rgb(243 241 236 / .18), 0 10px 22px -10px rgb(0 0 0 / .6); }
body:has(.hero--navy) .nav:not(.is-solid) .brand__word { border-left-color: rgb(243 241 236 / .22); }
body:has(.hero--navy) .nav:not(.is-solid) .brand__word small { color: rgb(243 241 236 / .55); }
@media (max-width: 860px) {
  .brand__mark { height: 34px; }
  .brand__word { margin-left: .7rem; padding-left: .7rem; font-size: .82rem; }
}

/* ================================================================ footer */
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgb(243 241 236 / .12); }
.foot__lockup { display: inline-flex; align-items: center; }
.foot__lockup img { height: 44px; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgb(243 241 236 / .18), 0 10px 22px -10px rgb(0 0 0 / .6); }
.foot__lockup span { display: grid; gap: 6px; margin-left: .95rem; padding-left: .95rem; border-left: 1px solid rgb(243 241 236 / .22);
  font-weight: 600; font-size: .95rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1; color: var(--bone); }
.foot__lockup small { font-weight: 500; font-size: .56rem; letter-spacing: .26em; color: rgb(243 241 236 / .55); }
.foot__about { margin: 1.4rem 0 0; max-width: 32ch; font-size: .95rem; line-height: 1.55; color: rgb(243 241 236 / .66); }
.foot__ar { margin: .9rem 0 0; font-family: "IBM Plex Sans Arabic", sans-serif; font-size: .95rem; color: rgb(243 241 236 / .55); text-align: left; }
.foot__ig { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem; font-size: .88rem; color: var(--bone); }
.foot__ig svg { width: 1.05rem; height: 1.05rem; color: var(--signal); }
.foot__ig:hover { color: var(--signal); }
.foot__col { display: flex; flex-direction: column; gap: .7rem; }
.foot__col h3 { margin: 0 0 .5rem; font-family: var(--sc-font-mono); font-weight: 400; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgb(243 241 236 / .45); }
.foot__col a { width: fit-content; font-size: .93rem; color: rgb(243 241 236 / .82); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: color 200ms, background-size 300ms var(--sc-ease-out); }
.foot__col a:hover { color: var(--bone); background-size: 100% 1px; }
.foot__col address { font-style: normal; font-size: .93rem; line-height: 1.6; color: rgb(243 241 236 / .82); }
.foot__map { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.foot__map svg, .foot__top svg { width: .9rem; height: .9rem; color: var(--signal); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.4rem 0 .4rem; border-top: 1px solid rgb(243 241 236 / .1); font-size: .82rem; color: rgb(243 241 236 / .5); }
.foot__base p { margin: 0; }
.foot__top { display: inline-flex; align-items: center; gap: .45rem; color: rgb(243 241 236 / .7); }
.foot__top svg { transform: rotate(-90deg); transition: transform 300ms var(--sc-ease-out); }
.foot__top:hover { color: var(--bone); }
.foot__top:hover svg { transform: rotate(-90deg) translateX(3px); }
@media (max-width: 960px) { .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; } .foot__col:last-child { grid-column: 1 / -1; } }

/* desktop: the wall starts clear of the copy, so no flat wash cutting the glow */
@media (min-width: 861px) { .hero--navy .hero__stage::before { display: none; } }
.tile--line { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px rgb(243 241 236 / .28); }
.tile--line span { color: rgb(243 241 236 / .6); }

/* desktop: a narrower plane = smaller tiles, at least three rows in view */
@media (min-width: 861px) { .wall__plane { width: 78vw; gap: clamp(8px, .8vw, 14px); } .wall__track { gap: clamp(8px, .8vw, 14px); } }

/* ============================================ story · the engraved falcon plate */
.plate-print { margin: 0; }
.plate-print__frame { position: relative; aspect-ratio: 4 / 5; padding: clamp(18px, 2.4vw, 34px); background: var(--paper);
  box-shadow: inset 0 0 0 1px rgb(14 26 51 / .14), 0 30px 60px -40px rgb(14 26 51 / .45); }
.plate-print__frame::before { content: ""; position: absolute; inset: clamp(10px, 1.2vw, 16px); border: 1px solid rgb(14 26 51 / .18); pointer-events: none; }
.plate-print__corner { position: absolute; width: 14px; height: 14px; border-color: var(--ink); border-style: solid; border-width: 0; }
.plate-print__corner--tl { left: 6px; top: 6px; border-left-width: 1.5px; border-top-width: 1.5px; }
.plate-print__corner--tr { right: 6px; top: 6px; border-right-width: 1.5px; border-top-width: 1.5px; }
.plate-print__corner--bl { left: 6px; bottom: 6px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.plate-print__corner--br { right: 6px; bottom: 6px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.plate-print__art { position: absolute; inset: clamp(26px, 3.2vw, 46px); background: var(--ink);
  -webkit-mask: url(assets/img/falcon-engraved.webp) center / contain no-repeat; mask: url(assets/img/falcon-engraved.webp) center / contain no-repeat;
  clip-path: inset(0 0 100% 0); transition: clip-path 2600ms cubic-bezier(.65,0,.35,1); }
.plate-print.is-printed .plate-print__art { clip-path: inset(0 0 0 0); }
.plate-print__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-family: var(--sc-font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.plate-print__cap span:first-child { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); }
.plate-print__cap span:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
@media (prefers-reduced-motion: reduce) { .plate-print__art { clip-path: none; transition: none; } }

/* grid: one continuous plan behind copy and wall; fades only at top and bottom */
.hero--navy .hero__plan { z-index: 1; width: 100%;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.hero--navy .wall { z-index: 2; }

/* a larger headline */
.hero__title { font-size: clamp(3.2rem, 1rem + 4.95vw, 7.4rem); }
@media (max-width: 860px) { .hero__title { font-size: clamp(2.7rem, 12.6vw, 4.2rem); } }

/* ===================================================== floating navigation */
:root { --nav-h: 84px; }
.nav { top: 12px; left: 0; right: 0; padding: 0 var(--gut); pointer-events: none; background: none !important; box-shadow: none !important; backdrop-filter: none !important; }
.nav.is-hidden { transform: translateY(calc(-100% - 16px)); }
.nav__inner { pointer-events: auto; width: 100%; max-width: 78rem; height: 60px; margin: 0 auto; padding: 0 8px 0 12px; gap: 1rem; border-radius: 18px;
  background: rgb(250 249 246 / .8); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px rgb(14 26 51 / .08), 0 14px 34px -20px rgb(14 26 51 / .4);
  transition: background-color 400ms, box-shadow 400ms; }
body:has(.hero--navy) .nav:not(.is-solid) .nav__inner { background: rgb(20 37 78 / .62); box-shadow: 0 0 0 1px rgb(243 241 236 / .12), 0 18px 40px -22px rgb(0 0 0 / .6); }
.nav .brand__mark { height: 34px; }
.nav .brand__word { font-size: .82rem; margin-left: .75rem; padding-left: .75rem; }
.nav .brand__word small { font-size: .5rem; }

.nav__links { gap: 2px; margin: 0 auto; font-size: .9rem; }
.nav__links a { padding: 8px 14px; border-radius: 11px; transition: background-color 250ms, color 250ms; }
.nav__links a::after { left: 50%; right: auto; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--signal); transform: scale(0); transition: transform 300ms var(--sc-ease-out); }
.nav__links a:hover { background: rgb(14 26 51 / .06); }
.nav__links a:hover::after { transform: scale(0); }
.nav__links a[aria-current="true"]::after { transform: scale(1); }
body:has(.hero--navy) .nav:not(.is-solid) .nav__links a:hover { background: rgb(243 241 236 / .1); }

.nav__actions { margin-left: 0; gap: 6px; }
.nav__call { width: 44px; height: 44px; justify-content: center; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(14 26 51 / .12); transition: background-color 250ms; }
.nav__call span { display: none; }
.nav__call:hover { background: rgb(14 26 51 / .06); }
body:has(.hero--navy) .nav:not(.is-solid) .nav__call { box-shadow: inset 0 0 0 1px rgb(243 241 236 / .2); }
body:has(.hero--navy) .nav:not(.is-solid) .nav__call:hover { background: rgb(243 241 236 / .1); }
.nav__actions .btn { min-height: 44px; border-radius: 12px; padding: 0 1.1rem; }

/* phones: the same floating bar, the menu drops as a panel beneath it */
@media (max-width: 1080px) {
  .nav__inner { height: 56px; }
  .nav__actions { margin-left: auto; }
  .nav__menu { width: 44px; height: 44px; border-radius: 12px; }
}
.drawer { position: absolute; inset: auto var(--gut) auto var(--gut); top: calc(100% + 8px); pointer-events: auto;
  max-height: calc(100svh - 96px); overflow: auto; padding: 1rem 1.2rem 1.2rem; border-radius: 18px;
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgb(14 26 51 / .08), 0 30px 60px -30px rgb(14 26 51 / .5);
  animation: drawer-in 380ms var(--sc-ease-out); }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.drawer > a { font-size: 1.6rem; padding: .6rem 0; }
.drawer__foot { margin-top: 1.2rem; }
body:has(.hero--navy) .nav:has([data-menu][aria-expanded="true"]) { color: inherit; }
.nav:has([data-menu][aria-expanded="true"]) { background: none; box-shadow: none; }

/* ===================================== story · the engraving, large and faint */
.story { position: relative; isolation: isolate; padding: clamp(6rem, 11vw, 11rem) 0 clamp(5rem, 9vw, 9rem); }
.story__falcon { position: absolute; z-index: 0; right: 2%; bottom: 0; width: min(46vw, 760px); aspect-ratio: 1352 / 1600; pointer-events: none;
  max-width: none; height: auto; object-fit: contain; object-position: center bottom; opacity: .16;
  filter: brightness(0) saturate(100%) invert(9%) sepia(38%) saturate(1455%) hue-rotate(180deg) brightness(94%) contrast(96%);
  clip-path: inset(0 0 100% 0); transition: clip-path 2800ms cubic-bezier(.65,0,.35,1); }
.story__falcon.is-printed { clip-path: inset(0 0 0 0); }
.story__grid { position: relative; z-index: 1; display: block; }
.story__col { max-width: 44rem; }
.story__quote p { font-size: clamp(2.8rem, 1.2rem + 5vw, 6.6rem); }
.story__text { max-width: 31rem; }
@media (max-width: 860px) {
  .story__falcon { width: 118vw; right: -38%; opacity: .1; }
}
@media (prefers-reduced-motion: reduce) { .story__falcon { clip-path: none; transition: none; } }
@media (min-width: 861px) { .hero__title .ln { white-space: nowrap; } }
@media (min-width: 861px) { .hero__copy { width: max-content; max-width: 60vw; } }

/* ================================================ one container for everything */
:root { --container: 84rem; }
.wrap { width: min(100% - 2 * var(--gut), var(--container)); }
/* the nav bar overhangs the container by its own inner padding, so the logo sits
   exactly over the content's left edge and the CTA over its right edge */
.nav { padding: 0 max(4px, calc(var(--gut) - 12px)); }
.nav__inner { max-width: calc(var(--container) + 24px); padding: 0 12px; }
@media (min-width: 861px) {
  .hero__copy { left: max(var(--gut), calc((100% - var(--container)) / 2)); }
}
@media (max-width: 860px) {
  .nav { padding: 0 10px; }
  .nav__inner { padding: 0 8px 0 10px; }
}

/* the filter bar follows the nav: it rises when the nav slides away */
.toolbar { transition: top 450ms var(--sc-ease-out), box-shadow 300ms; }
html.nav-hidden .toolbar { top: 12px; }