@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;500&family=Inter:wght@400;500;600&display=swap");

:root {
  --bg: #081a33;
  --ink: #f5f5f5;
  --ink-dim: rgba(245, 245, 245, 0.88);
  --ink-faint: rgba(245, 245, 245, 0.5);
  --rule: rgba(245, 245, 245, 0.38);
  --card: rgba(11, 37, 69, 0.42);
  --card-border: rgba(245, 245, 245, 0.18);
  --accent: #4ea3c4;
  --accent-hover: #6ebcd8;
  --accent-deep: #1f6b8a;
  --accent-ink: #0b2545;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.45);

  /* Spacing scale (4pt base) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Easing curves */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.card:focus-visible {
  outline-offset: 4px;
}

.arrow:focus-visible {
  outline-offset: 4px;
}

.cta:focus-visible {
  outline-offset: 4px;
}

/* Stage */
.stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: clamp(24px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(24px, 3vw, 40px);
}

/* Backdrop */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.backdrop__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.backdrop__slide.is-active {
  opacity: 1;
  animation: ken-burns 6s ease forwards;
}

@keyframes ken-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

.backdrop__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.backdrop__veil {
  position: absolute;
  inset: 0;
  /* Three stacked layers:
     1) a radial anchored to the bottom-left that darkens the hero copy,
     2) a soft linear at the very bottom so the footer stays legible,
     3) a soft linear at the top so the topbar has contrast.
     The radial is sized in pixels so its footprint stays consistent
     across viewport heights, and its right edge fades out before the
     middle of the photo so the image's focal area reads clearly. */
  background:
    /* Diagonal fade anchored at the bottom-left corner. A fixed 45°
       angle with pixel-based stops makes the physical size of the dark
       zone constant across viewport heights — on a tall monitor the
       falloff completes well before the top of the screen instead of
       scaling up with the diagonal like a percent-based gradient. */
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.9) 0,
      rgba(0, 0, 0, 0.86) 300px,
      rgba(0, 0, 0, 0.82) 540px,
      rgba(0, 0, 0, 0.76) 700px,
      rgba(0, 0, 0, 0.66) 840px,
      rgba(0, 0, 0, 0.5) 960px,
      rgba(0, 0, 0, 0.32) 1080px,
      rgba(0, 0, 0, 0.16) 1220px,
      rgba(0, 0, 0, 0.06) 1360px,
      rgba(0, 0, 0, 0) 1560px
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) calc(100% - 280px),
      rgba(0, 0, 0, 0.55) calc(100% - 120px),
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0) 18%
    );
}

.backdrop__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Topbar */
.topbar {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  animation: chrome-enter 560ms var(--ease-out-quart) backwards;
}

@keyframes chrome-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chrome-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand {
  display: inline-flex;
  align-items: center;
}

.iconic-logo {
  height: clamp(42px, 4.2vw, 58px);
  width: auto;
  display: block;
  /* Let the hover-draw stroke render outside the 2094×642 viewBox
     so the 2px stroke on tall letters (the "I"s) isn't clipped. */
  overflow: visible;
}

/* Hover sprite — the "Iconic" wordmark draws on, fills, the "realty"
   sub-mark reveals, and the sheen sweeps across. script.js measures
   path lengths into --len and stagger delays into --delay / --sub-delay. */
.iconic-logo .draw {
  color: #F5F5F5;
  fill: currentColor;
  stroke: currentColor;
  stroke-opacity: 0;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: 0;
}

.iconic-logo .draw.accent {
  color: #0088BA;
}

.iconic-logo .sub {
  fill: #F5F5F5;
  transform-box: fill-box;
  transform-origin: center;
}

.iconic-logo .iconic-sheen rect {
  transform: translateX(0);
}

@media (hover: hover) {
  @keyframes iconic-draw {
    0% {
      fill: transparent;
      stroke-opacity: 1;
      stroke-dashoffset: var(--len, 2400);
    }
    58% {
      fill: transparent;
      stroke-opacity: 1;
      stroke-dashoffset: 0;
    }
    66% {
      fill: currentColor;
      stroke-opacity: 1;
      stroke-dashoffset: 0;
    }
    76% {
      fill: currentColor;
      stroke-opacity: 0;
      stroke-dashoffset: 0;
    }
    100% {
      fill: currentColor;
      stroke-opacity: 0;
      stroke-dashoffset: 0;
    }
  }

  .brand:hover .iconic-logo .draw {
    animation: iconic-draw 700ms cubic-bezier(0.65, 0.02, 0.22, 1)
      var(--delay, 0ms) backwards;
  }

  @keyframes iconic-sub-reveal {
    0% {
      opacity: 0;
      transform: translateY(14px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .brand:hover .iconic-logo .sub {
    animation: iconic-sub-reveal 420ms cubic-bezier(0.22, 0.9, 0.25, 1)
      var(--sub-delay, 0ms) backwards;
  }

  @keyframes iconic-sheen-sweep {
    0%   { transform: translateX(0); }
    100% { transform: translateX(3000px); }
  }

  .brand:hover .iconic-logo .iconic-sheen rect {
    animation: iconic-sheen-sweep 750ms cubic-bezier(0.4, 0.1, 0.2, 1) 780ms;
  }
}

/* CTAs */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  transition: background 260ms var(--ease-out-expo),
    color 200ms var(--ease-out-quart),
    transform 320ms var(--ease-out-expo),
    border-color 200ms var(--ease-out-quart),
    box-shadow 320ms var(--ease-out-expo);
}

@property --glass-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}

.cta::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--glass-angle),
    rgba(255, 255, 255, 0.7) 0deg,
    rgba(255, 255, 255, 0.1) 70deg,
    rgba(255, 255, 255, 0) 120deg,
    rgba(255, 255, 255, 0) 200deg,
    rgba(255, 255, 255, 0.4) 260deg,
    rgba(255, 255, 255, 0.05) 330deg,
    rgba(255, 255, 255, 0.7) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
  transition: opacity 260ms var(--ease-out-quart);
}

.cta:hover::before,
.card:hover::before {
  opacity: 1;
  animation: glass-rotate 2.6s linear infinite;
}

.card::before {
  border-radius: 22px;
}

.cta--primary::before {
  background: conic-gradient(
    from var(--glass-angle),
    rgba(255, 255, 255, 0.8) 0deg,
    rgba(255, 255, 255, 0.18) 70deg,
    rgba(255, 255, 255, 0.02) 120deg,
    rgba(255, 255, 255, 0.02) 200deg,
    rgba(255, 255, 255, 0.55) 260deg,
    rgba(255, 255, 255, 0.12) 330deg,
    rgba(255, 255, 255, 0.8) 360deg
  );
}

@keyframes glass-rotate {
  from { --glass-angle: 0deg; }
  to { --glass-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .cta:hover::before,
  .card:hover::before {
    animation: none;
  }
}

.cta:active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

.cta--primary:hover .cta__dot {
  transform: translateX(3px);
}

.cta__dot {
  transition: transform 320ms var(--ease-out-expo);
}

.cta--ghost {
  border: 1px solid var(--rule);
  color: var(--ink);
  background: rgba(8, 26, 51, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cta--ghost:hover {
  border-color: var(--ink);
  background: rgba(245, 245, 245, 0.08);
}

.cta--primary {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 18px 30px 18px 18px;
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(78, 163, 196, 0.25);
}

.cta--primary:hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: 0 14px 36px rgba(110, 188, 216, 0.35);
}

.cta__dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cta__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--accent);
  border-top: 1.6px solid var(--accent);
  transform: rotate(45deg) translate(-1px, 1px);
}

/* Hero */
.hero {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  max-width: min(640px, 100%);
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 720ms var(--ease-out-expo);
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero__slide > * {
  opacity: 0;
  transform: translateY(10px);
}

@keyframes hero-elem-enter {
  to { opacity: 1; transform: translateY(0); }
}

.hero__slide.is-active > * {
  animation: hero-elem-enter 780ms var(--ease-out-expo) forwards;
}

.hero__slide.is-active > .hero__kicker   { animation-delay: 40ms; }
.hero__slide.is-active > .hero__wordmark { animation-delay: 120ms; }
.hero__slide.is-active > .hero__lede     { animation-delay: 210ms; }
.hero__slide.is-active > .hero__actions  { animation-delay: 300ms; }

.hero__kicker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}

.hero__kicker-fact {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1;
  letter-spacing: 0.002em;
  color: var(--ink);
  align-self: center;
  transform: translateY(1px);
}

.hero__kicker-rule {
  flex-shrink: 0;
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  background: var(--ink-dim);
  align-self: center;
  transform: translateY(2px);
}

.hero__kicker-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  align-self: center;
  transform: translateY(2px);
}

.hero__wordmark {
  display: block;
  width: 100%;
  max-width: min(435px, 35.7vw);
  height: auto;
  margin: 0 0 var(--space-8);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}

.hero__lede {
  margin: 0 0 var(--space-8);
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.65;
  width: 100%;
  max-width: min(536px, 46vw);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero__link {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero__link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Cards */
.cards {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.4vw, 20px);
}

.card {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  padding: 0;
  text-align: left;
  transition:
    width 720ms var(--ease-out-expo),
    height 720ms var(--ease-out-expo),
    opacity 520ms var(--ease-out-expo),
    transform 480ms var(--ease-out-expo),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Hide the card that matches the current slide */
.card.is-active {
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  border-width: 0;
  margin: 0;
  overflow: hidden;
}

/* Next: the slide that comes up next — larger, more prominent. 4:3. */
.card.is-next {
  order: 1;
  width: clamp(175px, 16vw, 219px);
  height: clamp(131px, 12vw, 164px);
}

/* Following: the slide after next — smaller, deferent. 4:3. */
.card.is-following {
  order: 2;
  width: clamp(146px, 13.1vw, 181px);
  height: clamp(110px, 9.8vw, 135px);
}

/* Initial page-load reveal for the whole card strip (runs once on .cards, so class swaps on children don't re-trigger). */
.cards {
  animation: chrome-rise 640ms var(--ease-out-quart) 520ms backwards;
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease, filter 0.35s ease;
  filter: brightness(0.9);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.9) 12%,
    rgba(0, 0, 0, 0.6) 38%,
    rgba(0, 0, 0, 0) 62%
  );
  pointer-events: none;
}

.card__body {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
}

.card__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.15;
  color: var(--ink);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 245, 245, 0.35);
  box-shadow: var(--shadow-lg);
}

.card:hover img {
  transform: scale(1.05);
  filter: saturate(1) brightness(0.9);
}

/* Controls — arrows float at the viewport edges, centered vertically,
   and only appear while the user is hovering the page. */
.arrow {
  position: fixed;
  top: 50%;
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(8, 26, 51, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 300ms var(--ease-out-quart),
    background 200ms ease,
    border-color 200ms ease;
}

.arrow--prev {
  left: clamp(14px, 2.2vw, 36px);
  transform: translateY(-50%);
}

.arrow--next {
  right: clamp(14px, 2.2vw, 36px);
  transform: translateY(-50%);
}

.arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 240ms var(--ease-out-quart);
}

.arrow:hover {
  background: rgba(245, 245, 245, 0.14);
  border-color: var(--ink);
}

.arrow[data-prev]:hover svg { transform: translateX(-3px); }
.arrow[data-next]:hover svg { transform: translateX(3px); }
.arrow:active svg { transition-duration: 120ms; }
.arrow[data-prev]:active svg { transform: translateX(-5px); }
.arrow[data-next]:active svg { transform: translateX(5px); }

@media (hover: hover) {
  .arrow.is-visible,
  .arrow:hover,
  .arrow:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none) {
  .arrow {
    display: none;
  }
}

/* Coming soon footer */
.coming-soon {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: 0;
  padding-top: 0;
  animation: chrome-rise 460ms var(--ease-out-quart) 920ms backwards;
  color: var(--ink-dim);
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-style: italic;
  text-align: center;
}

.coming-soon::before,
.coming-soon::after {
  content: "";
  flex: 0 1 60px;
  height: 1px;
  background: linear-gradient(
    to var(--dir, right),
    transparent,
    var(--accent-deep)
  );
  opacity: 0.7;
}

.coming-soon::before {
  --dir: left;
}

/* Contact popover */
.contact-menu {
  position: relative;
}

.popover {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(8, 26, 51, 0.94);
  border: 1px solid rgba(245, 245, 245, 0.1);
  border-radius: 20px;
  padding: 30px 28px 24px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.94) translateY(-4px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease-out),
    transform 220ms var(--ease-out),
    visibility 0s linear 220ms;
  z-index: 20;
}

.popover[data-state="open"] {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 220ms var(--ease-out),
    transform 260ms var(--ease-out),
    visibility 0s linear 0s;
}

.popover__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.popover__close:hover {
  background: rgba(245, 245, 245, 0.08);
  color: var(--ink);
}

.popover__close:active {
  transform: scale(0.94);
}

.popover__close svg {
  width: 16px;
  height: 16px;
}

.popover__header {
  margin-bottom: 18px;
  padding-right: 28px;
}

.popover__header h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
}

.popover__header p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
}

.cta--ghost[aria-expanded="true"] {
  border-color: var(--ink);
  background: rgba(245, 245, 245, 0.1);
}

/* Form */
.form {
  display: grid;
  gap: 14px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field > span {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(245, 245, 245, 0.04);
  border: 1px solid rgba(245, 245, 245, 0.12);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(245, 245, 245, 0.06);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f5f5f5' opacity='0.5'><path d='M6 8l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Style the native <option> panel — without this, Linux Chrome renders the
   dropdown on the OS's white system background, so the inherited `color:
   var(--ink)` (light) becomes white-on-white. macOS ignores option styling
   at the OS level but this is harmless there. */
.field select option {
  background: var(--bg);
  color: var(--ink);
}

.cta--submit {
  margin-top: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  width: 100%;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cta--submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.form__foot {
  margin: 4px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
}

.form__foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}

.form__success {
  margin: 0;
  text-align: center;
  padding: 12px;
  color: var(--accent);
  font-size: 14px;
  border: 1px solid rgba(78, 163, 196, 0.3);
  background: rgba(78, 163, 196, 0.08);
  border-radius: 10px;
}

/* CMS form-validator status hooks.
   Empty spans would otherwise eat a 14px grid gap each — collapse them
   when they have no content so the layout snaps back to the mockup. */
.form .contact-form-loading-icon:empty,
.form .contact-form-message:empty {
  display: none;
}

.form .contact-form-message {
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 10px;
  color: var(--ink-dim);
  background: rgba(245, 245, 245, 0.04);
  border: 1px solid rgba(245, 245, 245, 0.12);
}

.form.loading .contact-form-message {
  color: var(--ink-faint);
}

.form.success .contact-form-message {
  color: var(--accent);
  background: rgba(78, 163, 196, 0.08);
  border-color: rgba(78, 163, 196, 0.3);
}

.form.error .contact-form-message {
  color: #ff8888;
  background: rgba(255, 120, 120, 0.08);
  border-color: rgba(255, 120, 120, 0.3);
}

/* Invalid required fields — `form-validator.js` adds `.form-invalid` when
   validation fails (e.g. on Send Inquiry with empty required fields). */
.field input.form-invalid,
.field select.form-invalid,
.field textarea.form-invalid {
  border-color: rgba(255, 120, 120, 0.6);
  background: rgba(255, 120, 120, 0.06);
}

.field input.form-invalid:focus,
.field select.form-invalid:focus,
.field textarea.form-invalid:focus {
  border-color: #ff8888;
  background: rgba(255, 120, 120, 0.08);
}

/* Responsive */
@media (max-width: 960px) {
  html,
  body {
    overflow-y: auto;
    height: auto;
    min-height: 100%;
  }

  .stage {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 18px 18px 28px;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 0;
    row-gap: 18px;
  }

  /* Pin the backdrop to the top portion of the screen so the photo is
     visually the hero of the page instead of being mostly hidden. */
  .backdrop {
    position: absolute;
    inset: 0 0 auto 0;
    height: 50vh;
    height: 50dvh;
  }

  /* Drop the Ken Burns zoom on mobile — too much motion on a small screen. */
  .backdrop__slide,
  .backdrop__slide.is-active {
    transform: none;
    transition: opacity 0.6s ease;
    animation: none;
  }

  .backdrop__slide img {
    object-position: center 30%;
  }

  /* Lighten the top of the veil so the photo reads clearly, then
     fade to the solid page background well before the bottom of the
     backdrop so the photo never peeks past the gradient. */
  .backdrop__veil {
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.05) 26%,
        rgba(0, 0, 0, 0) 46%,
        rgba(8, 26, 51, 0.82) 72%,
        var(--bg) 88%
      );
  }

  .topbar {
    grid-row: 1;
  }

  .iconic-logo {
    height: 32px;
  }

  .topbar .cta--ghost {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .cta--primary {
    padding: 10px 22px 10px 10px;
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .cta--primary .cta__dot {
    width: 26px;
    height: 26px;
  }

  .hero {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-width: 100%;
    /* Reserve room for the backdrop above before the content starts. */
    margin-top: clamp(180px, 31vh, 280px);
    margin-top: clamp(180px, 31dvh, 280px);
  }

  .hero__slide {
    justify-content: flex-start;
  }

  .hero__kicker {
    margin-bottom: 18px;
    gap: 12px;
  }

  .hero__kicker-fact {
    font-size: 20px;
  }

  .hero__kicker-label {
    font-size: 10.5px;
    letter-spacing: 0.22em;
  }

  .hero__wordmark {
    max-width: min(220px, 58%);
    margin-bottom: 20px;
  }

  .hero__lede {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
  }

  .hero__actions {
    gap: 14px;
  }

  /* Surface the property navigation on mobile as a compact row. */
  .cards {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    animation: chrome-rise 520ms var(--ease-out-quart) 560ms backwards;
  }

  .card,
  .card::before {
    border-radius: 4px;
  }

  .card.is-active {
    display: none;
  }

  .card.is-next,
  .card.is-following {
    order: 0;
    flex: 1 1 0;
    width: auto;
    height: clamp(60px, 14.6vw, 80px);
  }

  .card__body {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .card__title {
    font-size: 13px;
    line-height: 1.2;
  }

  .coming-soon {
    grid-row: 4;
    gap: 10px;
    margin-top: 12px;
    font-size: 16px;
    letter-spacing: -0.005em;
  }

  .coming-soon::before,
  .coming-soon::after {
    flex: 0 1 36px;
  }
}

@media (max-width: 560px) {
  .form__row {
    grid-template-columns: 1fr;
  }

  .iconic-logo {
    height: 28px;
  }

  .topbar .cta--ghost {
    padding: 7px 13px;
    font-size: 10.5px;
  }

  .cta--primary {
    padding: 9px 20px 9px 9px;
    font-size: 11.5px;
  }

  .cta--primary .cta__dot {
    width: 24px;
    height: 24px;
  }

  .hero__kicker-fact {
    font-size: 18px;
  }

  .hero__wordmark {
    max-width: min(195px, 54%);
  }

  .hero__lede {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}