*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-frame);
  scroll-behavior: smooth;
}

/* The page descends through an Arizona sunset rather than sitting on flat
   black: deep navy overhead, warming through dusk plum into ember shadow by the
   footer. Fixed, so the colour belongs to the page rather than to any one
   section. Every stop was contrast measured against all four ink tokens and
   clears AA with room to spare, the warmest still at 6.38:1 for muted ink. */
body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-ground);
  background-image: none;
  background-attachment: scroll;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--color-ink);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-focus);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-field);
  background: var(--color-gold);
  color: var(--color-accent-ink);
  font-weight: var(--weight-bold);
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-control);
}

.skip-link:focus {
  transform: translateY(0);
}

/* The track is the scroll budget the pinned hero spends. The hero sticks to the
   top for its whole length, so the film holds full screen and that scroll drives
   the letters apart instead of moving the page. The page only advances once the
   wordmark is gone. */
.hero-track {
  position: relative;
  height: 240svh;
}

.hero {
  position: sticky;
  top: 0;
  isolation: isolate;
  display: grid;
  height: 100svh;
  overflow: hidden;
  background: var(--color-ground);
}

/* No JavaScript means no dispersal, so the track would be dead scrolling. */
.no-js .hero-track {
  height: auto;
}

.no-js .hero {
  position: relative;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .hero-track {
    height: auto;
  }

  .hero {
    position: relative;
    min-height: 100svh;
  }
}

.hero-media,
.hero-poster,
.hero-poster img,
.hero-film,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  z-index: -2;
  overflow: hidden;
  background: var(--color-ground);
}

.hero-poster img,
.hero-film {
  display: block;
  object-fit: cover;
}

.hero-film {
  opacity: 0;
  transition: opacity 700ms var(--ease-display);
}

[data-hero-state="playing"] .hero-film {
  opacity: 1;
}

.hero-shade {
  background:
    radial-gradient(82% 62% at 50% 46%, rgb(11 17 24 / 0) 0%, rgb(11 17 24 / 0.24) 68%, rgb(11 17 24 / 0.5) 100%),
    linear-gradient(0deg, rgb(11 17 24 / 0.68) 0%, transparent 40%),
    linear-gradient(180deg, rgb(11 17 24 / 0.38) 0%, transparent 24%);
}

.site-header,
.hero-content,
.transition-intro,
.landmark-route,
.proof-inner,
.services,
.cma,
.areas,
.journeys,
.contact,
.site-footer {
  width: min(100%, calc(var(--measure-wide) + (2 * var(--gutter))));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: start;
  min-height: 4.5rem;
  border-bottom: 1px solid rgb(244 239 227 / 0.28);
}

.wordmark {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
}

.site-nav a {
  text-decoration-color: transparent;
  text-underline-offset: 0.4em;
  transition: color var(--duration-control) var(--ease-control), text-decoration-color var(--duration-control) var(--ease-control);
}

.site-nav a:hover {
  color: var(--color-gold-soft);
  text-decoration-color: var(--color-gold);
}

.site-nav .cic-link {
  padding: 0.62rem 0.95rem;
  border: 1px solid rgb(244 239 227 / 0.4);
  border-radius: var(--radius-control);
  text-decoration: none;
}

.hero-content {
  position: relative;
  z-index: var(--z-content);
  align-self: center;
  padding-top: 6rem;
  padding-bottom: 9.5rem;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

.hero-content h1,
.transition h2,
.proof h2,
.services h2,
.cma h2,
.areas h2,
.journeys h2,
.contact h2,
.journeys h3,
.service h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
}

/* The wordmark is centred cinema, not the old left aligned editorial block. */
.hero-content:has(.hero-title) {
  align-self: center;
  width: 100%;
  text-align: center;
  padding-bottom: 7rem;
}

/* The scrim is much lighter now, so the type earns its own separation from the
   film rather than relying on a wash that buried the footage. */
.hero-content:has(.hero-title) :is(.hero-eyebrow, .hero-name, .hero-url, .hero-support, .hero-wordmark-text) {
  text-shadow: 0 1px 14px rgb(8 5 12 / 0.62), 0 0 3px rgb(8 5 12 / 0.45);
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-width: none;
  transition: opacity 420ms ease;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-light, 300);
  font-size: clamp(0.94rem, 1.55vw, 1.5rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: rgb(246 238 226 / 0.9);
  text-transform: uppercase;
}

/* The flat wordmark is the real heading. It carries the hero on its own when
   the 3D layer is skipped, and steps aside visually once that layer paints. */
.hero-wordmark-text {
  font-family: var(--font-display);
  /* Seven wide capitals plus tracking. The floor stays low on purpose so the
     word is never clipped on a narrow phone. */
  font-size: clamp(2.1rem, 13.5vw, 13rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  text-transform: uppercase;
  color: #efd6a6;
  transition: opacity 300ms ease;
}

.hero-signature {
  margin: clamp(2.6rem, 6vw, 5rem) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.hero-rule {
  width: min(30vw, 22.5rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgb(216 182 129 / 0) 0%,
    rgb(216 182 129 / 0.75) 50%,
    rgb(216 182 129 / 0) 100%
  );
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 1.35vw, 1.31rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.hero-url {
  font-size: clamp(0.58rem, 0.72vw, 0.7rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgb(244 236 224 / 0.52);
}

.hero-wordmark-gl {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Once the geometry is live the flat wordmark yields to it. Visibility rather
   than display or opacity is deliberate: the element keeps its layout box, so
   it reserves exactly the space the letters occupy and everything below still
   flows clear of them. The heading also stays in the accessibility tree. */
[data-wordmark="on"] .hero-wordmark-text {
  visibility: hidden;
  /* The box has to be as tall as the geometry it stands in for, or the
     signature rides up into the letters. The camera frames the wordmark across
     roughly 46% of the viewport width, which this size matches. */
  font-size: clamp(2.1rem, 11vw, 10rem);
}

[data-wordmark="on"] .hero-eyebrow,
[data-wordmark="on"] .hero-signature {
  opacity: var(--wordmark-fade, 1);
  transition: opacity 200ms linear;
}

.hero-content:has(.hero-title) .hero-support {
  margin-left: auto;
  margin-right: auto;
}

.hero-content:has(.hero-title) .hero-actions {
  justify-content: center;
}

.hero-support {
  max-width: 34rem;
  margin: 1.6rem 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1.04rem, 1.8vw, 1.28rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.35rem;
  margin-top: 2.1rem;
}

.primary-action,
.submit-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.15rem;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-gold);
  color: var(--color-accent-ink);
  font-size: 0.88rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-control) var(--ease-control), transform var(--duration-fast) var(--ease-control);
}

.primary-action:hover,
.submit-action:hover {
  background: var(--color-gold-soft);
  transform: translateY(-2px);
}

.primary-action:active,
.submit-action:active {
  transform: translateY(1px) scale(0.98);
}

.text-action,
.service a,
.contact-phone,
.site-footer a {
  color: var(--color-ink);
  font-size: 0.88rem;
  font-weight: var(--weight-bold);
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}

.motion-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: var(--z-content);
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: rgb(11 17 24 / 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-control) var(--ease-control), transform var(--duration-fast) var(--ease-control), border-color var(--duration-control) var(--ease-control);
}

.js .motion-toggle {
  display: inline-flex;
}

[data-hero-state="playing"] .motion-toggle,
[data-hero-state="resting"] .motion-toggle {
  opacity: 1;
  pointer-events: auto;
}

.motion-toggle .motion-toggle-glyph {
  width: 0.6rem;
  height: 0.72rem;
  border-left: 3px solid var(--color-gold-soft);
  border-right: 3px solid var(--color-gold-soft);
}

[aria-pressed="true"].motion-toggle .motion-toggle-glyph {
  width: 0;
  height: 0;
  border-left: 0.62rem solid var(--color-gold-soft);
  border-right: 0;
  border-top: 0.38rem solid transparent;
  border-bottom: 0.38rem solid transparent;
}

.motion-toggle .motion-toggle-label {
  color: var(--color-gold-soft);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.motion-toggle:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.hero-route {
  position: absolute;
  right: -3rem;
  bottom: -2.3rem;
  z-index: 0;
  width: min(61vw, 58rem);
  overflow: visible;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--duration-reveal) var(--ease-display);
}

.js .hero-route {
  opacity: 0;
}

.js [data-hero-state="resting"] .hero-route {
  opacity: 1;
}

.route-base,
.route-progress,
.transition-route-base,
.transition-route-progress,
.proof-route-base,
.proof-route-progress {
  opacity: 0.45;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-base {
  stroke: var(--color-gold);
  stroke-width: 2.25;
  opacity: 0.35;
}

.route-progress {
  stroke: var(--color-gold-soft);
  stroke-width: 3.25;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 1px 0 var(--color-frame));
}

.js .route-progress {
  stroke-dashoffset: 0.58;
}

.the-build, .transition {
  position: relative;
  isolation: isolate;
  min-height: 84rem;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  background:
    radial-gradient(circle at 18% 22%, rgb(201 97 61 / 0.09), transparent 27rem),
    var(--color-frame);
}

.topography {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
}

.topography svg {
  width: 100%;
  height: 100%;
}

.topo-lines path {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1;
  opacity: 0.34;
}

.transition-route-base {
  stroke: var(--color-gold);
  stroke-width: 2;
  opacity: 0.16;
}

.transition-route-progress {
  stroke: var(--color-gold-soft);
  stroke-width: 2.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .transition-route-progress {
  stroke-dashoffset: 1;
}

.transition-intro {
  padding-top: clamp(6rem, 11vw, 10rem);
}

.transition-intro h2 {
  max-width: 12ch;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: 0.96;
}

.transition-intro p {
  max-width: 36rem;
  margin: 1.75rem 0 0 18vw;
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  line-height: var(--leading-body);
}

.landmark-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, 8.5rem);
  gap: 1rem;
  margin-top: 5rem;
  padding-bottom: 8rem;
  list-style: none;
}

.landmark {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.landmark-canyon { grid-area: 1 / 1 / span 1 / span 5; }
.landmark-sedona { grid-area: 2 / 4 / span 1 / span 5; }
.landmark-superstitions { grid-area: 3 / 7 / span 1 / span 5; }
.landmark-flats { grid-area: 4 / 3 / span 1 / span 5; }
.landmark-camelback { grid-area: 5 / 7 / span 1 / span 5; }
.landmark-street { grid-area: 6 / 8 / span 1 / span 5; }

.landmark strong,
.landmark span {
  display: block;
}

.landmark strong {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: var(--weight-medium);
  letter-spacing: -0.03em;
}

.landmark div > span {
  margin-top: 0.28rem;
  color: var(--color-ink-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.landmark-mark {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid rgb(122 84 16 / 0.4);
  border-radius: 50%;
}

.landmark-mark::before,
.landmark-mark::after {
  position: absolute;
  content: "";
}

.landmark-mark::before {
  right: 0.7rem;
  bottom: 0.8rem;
  left: 0.7rem;
  height: 1.7rem;
  border-bottom: 2px solid var(--color-gold-soft);
  clip-path: polygon(0 100%, 22% 35%, 39% 69%, 59% 4%, 78% 58%, 100% 18%, 100% 100%);
  background: linear-gradient(140deg, transparent 48%, rgb(122 84 16 / 0.35) 49%);
}

.landmark-flats .landmark-mark::after {
  top: 0.75rem;
  left: 2.05rem;
  width: 0.4rem;
  height: 2.4rem;
  border-radius: 50% 50% 12% 12%;
  background: var(--color-gold-soft);
  box-shadow: -0.7rem 0.7rem 0 -0.12rem var(--color-gold-soft), 0.7rem 1rem 0 -0.12rem var(--color-gold-soft);
}

.landmark-street .landmark-mark::after {
  right: 1rem;
  bottom: 0.65rem;
  left: 1rem;
  height: 1.75rem;
  border: 2px solid var(--color-ink);
  border-top: 0;
  clip-path: polygon(0 38%, 50% 0, 100% 38%, 100% 100%, 0 100%);
}

.proof {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  /* Transparent so the page sunset carries through this section. */
  background: transparent;
}

.proof-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.proof-route-base {
  opacity: 0.35;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  opacity: 0.12;
}

.proof-route-progress {
  opacity: 0.45;
  stroke: var(--color-gold-soft);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .proof-route-progress {
  opacity: 0.45;
  stroke-dashoffset: 1;
}

/* The portrait is a supporting detail, not the subject. It sits at a fixed
   editorial width beside the copy rather than claiming a full column, and the
   section no longer demands a whole viewport to say one thing. */
.proof-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(8rem, 13vw, 11.5rem) minmax(20rem, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.proof-portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.proof-portrait::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(30 37 50 / 0.1);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.proof-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1084 / 973;
  object-fit: cover;
  object-position: 50% 34%;
}

.proof-copy {
  max-width: 39rem;
}

.proof-copy h2 {
  max-width: 10ch;
  font-size: clamp(3.3rem, 7vw, 6.8rem);
  line-height: 0.94;
}

.proof-copy p {
  max-width: 36rem;
  margin: 1.75rem 0 1.5rem;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: var(--leading-body);
}

.proof-copy .brokerage-note {
  margin-top: -0.45rem;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
}

.services {
  padding-block: clamp(7rem, 12vw, 11rem);
}

.services-heading {
  max-width: 44rem;
  margin-left: clamp(0rem, 10vw, 9rem);
}

.services h2,
.cma h2,
.areas h2,
.journeys h2,
.contact h2 {
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: 0.98;
}

.services-heading p,
.areas-copy p,
.journeys-intro p,
.contact-copy p {
  max-width: 36rem;
  margin: 1.5rem 0 0;
  color: var(--color-ink-soft);
  font-size: 1.04rem;
  line-height: var(--leading-body);
}

.service-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 5rem;
}

.service {
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}


.service h3 {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1;
}

.service p {
  max-width: 29rem;
  margin: 1.5rem 0 2rem;
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}

.cma {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  gap: clamp(3rem, 9vw, 9rem);
  padding-block: clamp(7rem, 12vw, 12rem);
  border-top: 1px solid var(--color-line);
}

.cma-statement p {
  max-width: 42rem;
  margin: 2rem 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  line-height: var(--leading-body);
}

.cma-method {
  align-self: end;
  margin: 0;
}

.cma-method div {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-line);
}

.cma-method dt {
  color: var(--color-gold-soft);
  font-weight: var(--weight-bold);
}

.cma-method dd {
  margin: 0.45rem 0 0;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.areas {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(24rem, 1.28fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: start;
  padding-block: clamp(7rem, 12vw, 11rem);
  border-top: 1px solid var(--color-line);
}

.areas-copy {
  position: sticky;
  top: 5rem;
}

.areas h2 {
  overflow-wrap: normal;
}

.area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-list li {
  min-height: 11rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gold);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 0.98;
}

.area-west,
.area-queen {
  margin-top: 5rem;
}

.journeys {
  padding-top: clamp(7rem, 12vw, 11rem);
  padding-bottom: clamp(8rem, 14vw, 13rem);
  border-top: 1px solid var(--color-line);
}

.journeys-intro {
  max-width: 46rem;
}

.buyer-route,
.seller-route {
  margin-top: clamp(6rem, 11vw, 10rem);
}

.journeys h3 {
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 1;
}

.buyer-route ol,
.seller-route ol {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.buyer-route ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.buyer-route ol::before {
  position: absolute;
  top: 0.4rem;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-ember), var(--color-gold-soft));
  content: "";
}

.buyer-route li {
  padding-top: 2.25rem;
}

.buyer-route li::before {
  position: absolute;
  top: -0.1rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--color-ground);
  border-radius: 50%;
  background: var(--color-gold-soft);
  content: "";
}

.buyer-route strong,
.buyer-route span,
.seller-route strong,
.seller-route span {
  display: block;
}

.buyer-route strong,
.seller-route strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
}

.buyer-route span,
.seller-route span {
  margin-top: 0.85rem;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.seller-route {
  width: min(100%, 61rem);
  margin-left: auto;
}

.seller-route ol {
  border-left: 2px solid var(--color-gold);
}

.seller-route li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(16rem, 1.3fr);
  gap: 2rem;
  padding: 0.5rem 0 3.5rem clamp(2rem, 5vw, 5rem);
}

.seller-route li::before {
  position: absolute;
  top: 0.55rem;
  left: -0.55rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--color-ground);
  border-radius: 50%;
  background: var(--color-gold-soft);
  content: "";
}

.seller-route span {
  margin-top: 0;
}

.contact {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr);
  gap: clamp(3rem, 10vw, 10rem);
  padding-block: clamp(7rem, 13vw, 12rem);
  border-top: 1px solid var(--color-line);
}

.contact-copy {
  align-self: start;
}

.contact-phone {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: var(--weight-medium);
}

.lead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
  align-self: start;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.field {
  display: grid;
  gap: 0.55rem;
}

.field label {
  color: var(--color-ink-soft);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid #71808c;
  border-radius: var(--radius-field);
  background: var(--color-frame);
  color: var(--color-ink);
  padding: 0.8rem 0.9rem;
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-gold);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.field-message,
.submit-action,
.form-status {
  grid-column: 1 / -1;
}

.submit-action {
  justify-self: start;
}

.form-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.83rem;
  line-height: 1.5;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr minmax(20rem, 1.35fr) auto;
  gap: 2rem;
  align-items: start;
  padding-block: 3rem;
  border-top: 1px solid var(--color-line);
}

.site-footer > div {
  display: grid;
  gap: 1rem;
}

.launch-placeholder {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-field);
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.launch-placeholder strong,
.launch-placeholder span {
  display: block;
}

.launch-placeholder strong {
  color: var(--color-gold-soft);
}

.launch-placeholder span {
  margin-top: 0.35rem;
}

@media (prefers-reduced-motion: no-preference) {
  [data-hero-state="playing"] .hero-content h1,
  [data-hero-state="playing"] .hero-support,
  [data-hero-state="playing"] .hero-actions {
    animation: hero-copy-in var(--duration-reveal) var(--ease-display) both;
  }

  [data-hero-state="playing"] .hero-support {
    animation-delay: 90ms;
  }

  [data-hero-state="playing"] .hero-actions {
    animation-delay: 170ms;
  }

  @keyframes hero-copy-in {
    from {
      opacity: 0.01;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 64rem) {
  .transition-intro p {
    margin-left: 10vw;
  }

  .seller-route li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

@media (max-width: 47.99rem) {
  html,
  body {
    max-width: 100%;
  }

  .site-header {
    min-height: 4rem;
  }

  .site-nav > a:not(.cic-link) {
    display: none;
  }

  .site-nav .cic-link {
    padding: 0.55rem 0.75rem;
  }

  .wordmark {
    font-size: 1.05rem;
  }

  .hero-content {
    align-self: end;
    padding-top: 6rem;
    padding-bottom: 8.75rem;
  }

  .hero-content h1 {
    max-width: 8ch;
    font-size: clamp(3.35rem, 16vw, 4.8rem);
  }

  .hero-support {
    max-width: 22rem;
    font-size: 1rem;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-shade {
    background:
      linear-gradient(0deg, rgb(11 17 24 / 0.97) 0%, rgb(11 17 24 / 0.61) 50%, rgb(11 17 24 / 0.1) 72%),
      linear-gradient(180deg, rgb(11 17 24 / 0.55) 0%, transparent 27%);
  }

  .motion-toggle {
    right: auto;
    bottom: 1.35rem;
    left: var(--gutter);
  }

  .hero-route {
    right: -9rem;
    bottom: -1rem;
    width: 40rem;
  }

  .the-build, .transition {
    min-height: auto;
  }

  .topography {
    opacity: 0.55;
  }

  .topography .transition-route-base,
  .topography .transition-route-progress {
    display: none;
  }

  .transition-intro {
    padding-top: 6rem;
  }

  .transition-intro h2 {
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .transition-intro p {
    margin-left: 0;
  }

  .landmark-route {
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 2rem;
    margin: 4rem var(--gutter) 0;
    padding-right: 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-gold);
  }

  .landmark-canyon,
  .landmark-sedona,
  .landmark-superstitions,
  .landmark-flats,
  .landmark-camelback,
  .landmark-street {
    grid-area: auto;
  }

  .landmark {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .landmark-mark {
    width: 3.5rem;
    height: 3.5rem;
    margin-left: -3.3rem;
    background: var(--color-frame);
  }

  .landmark-mark::before {
    right: 0.55rem;
    bottom: 0.6rem;
    left: 0.55rem;
    height: 1.35rem;
  }

  .landmark-flats .landmark-mark::after {
    top: 0.55rem;
    left: 1.55rem;
    height: 1.85rem;
  }

  .landmark strong {
    font-size: 1.75rem;
  }

  .proof-route {
    display: none;
  }

  .proof-inner,
  .cma,
  .areas,
  .contact {
    grid-template-columns: 1fr;
  }

  .proof-inner {
    gap: 3rem;
    min-height: auto;
    padding-block: 5rem 6rem;
  }

  .proof-portrait {
    width: min(100%, 11rem);
    margin-inline: auto;
  }

  .services-heading {
    margin-left: 0;
  }

  .service-lanes {
    grid-template-columns: 1fr;
  }

  .service-buy,
  .service-sell,
  .service-build {
    grid-column: auto;
    min-height: auto;
    padding: 3rem 0;
  }

  .service-sell {
    padding-left: 2rem;
  }

  .service-build {
    padding-left: 4rem;
  }

  .cma,
  .areas,
  .contact {
    gap: 4rem;
  }

  .areas-copy {
    position: static;
  }

  .area-list {
    gap: 1.5rem;
  }

  .area-list li {
    min-height: 7rem;
    font-size: clamp(1.8rem, 10vw, 2.7rem);
  }

  .area-west,
  .area-queen {
    margin-top: 2.5rem;
  }

  .buyer-route ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 2rem;
    border-left: 2px solid var(--color-gold);
  }

  .buyer-route ol::before {
    display: none;
  }

  .buyer-route li {
    position: relative;
    padding: 0 0 3rem 1rem;
  }

  .buyer-route li::before {
    top: 0.3rem;
    left: -2.55rem;
  }

  .seller-route li {
    padding-left: 2rem;
  }

  .lead-form {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .field-message,
  .submit-action,
  .form-status {
    grid-column: auto;
  }

  .submit-action {
    width: 100%;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .route-progress,
  .transition-route-progress,
  .proof-route-progress {
  opacity: 0.45;
    stroke-dashoffset: 0 !important;
  }
}

/* ---- The gold thread ------------------------------------------------------
   The route motif carried the whole way down the page as a scroll progress
   line. Fixed to the edge, drawn from the top, using the same gold as the
   route so the site reads as one continuous drawn journey. */
.scroll-thread {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: 2px;
  height: 100svh;
  pointer-events: none;
  background: rgb(30 37 50 / 0.08);
}

.scroll-thread::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--thread-progress, 0) * 100%);
  background: linear-gradient(
    180deg,
    rgb(154 68 37 / 0.3) 0%,
    rgb(154 68 37 / 0.9) 45%,
    rgb(122 84 16 / 1) 100%
  );
  box-shadow: none;
}

@media (max-width: 47.99rem) {
  .scroll-thread {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
  }

  .scroll-thread::after {
    inset: 0 auto 0 0;
    width: calc(var(--thread-progress, 0) * 100%);
    height: 100%;
    background: linear-gradient(
      90deg,
      rgb(154 68 37 / 0.35) 0%,
      rgb(154 68 37 / 0.9) 60%,
      rgb(122 84 16 / 1) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-thread {
    display: none;
  }
}

/* ---- Tilt parallax --------------------------------------------------------
   The film drifts against the frame as the phone moves. Scaled up slightly so
   the translation never exposes an edge. Values are set by script and default
   to zero, so this is inert without orientation data. */
.hero-media {
  transform: translate3d(
      calc(var(--tilt-x, 0) * 1px),
      calc(var(--tilt-y, 0) * 1px),
      0
    )
    scale(1.055);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media {
    transform: none;
    transition: none;
  }
}

/* ---- The valley web -------------------------------------------------------
   The metro laid out west to east, threaded in the route gold. Served areas
   carry a filled marker and full contrast; the rest sit back as geography so
   the graphic never implies coverage that has not been claimed. */
.valley-web {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.valley-web svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.valley-threads path {
  fill: none;
  stroke: rgb(122 84 16 / 0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.valley-band text {
  fill: rgb(30 37 50 / 0.45);
  font-family: var(--font-body);
  font-size: 19px;
  letter-spacing: 0.34em;
  text-anchor: middle;
  text-transform: uppercase;
}

.valley-cities circle {
  fill: var(--color-surface);
  stroke: rgb(122 84 16 / 0.5);
  stroke-width: 1.5;
}

.valley-cities text {
  fill: var(--color-ink-muted, #b8ae9c);
  font-family: var(--font-body);
  font-size: 20px;
  text-anchor: middle;
}

.city.is-served circle {
  fill: var(--color-gold);
  stroke: var(--color-gold-soft);
}

.city.is-served text {
  fill: var(--color-ink);
}

.city.is-anchor circle {
  filter: none;
}

.city.is-anchor text {
  font-family: var(--font-display);
  font-size: 25px;
}

.valley-web figcaption {
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
}

.valley-key {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.valley-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: none;
}

/* On a phone the full label set collides into noise. The served cities keep
   their names because they are the point; the rest keep their markers so the
   shape of the valley still reads, but drop their labels. */
@media (max-width: 47.99rem) {
  .city:not(.is-served) text {
    display: none;
  }

  .valley-cities text {
    font-size: 34px;
  }

  .city.is-anchor text {
    font-size: 40px;
  }

  .valley-band text {
    font-size: 28px;
    letter-spacing: 0.16em;
  }

  .valley-cities circle {
    stroke-width: 2.5;
  }

  .city:not(.is-served) circle {
    r: 8;
  }
}

/* ---- The drive ------------------------------------------------------------
   The route through the valley, with waypoints that light as the gold reaches
   them. Line art only, no imagery, so it costs nothing and never fails to load. */
.valley-drive .waypoint {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 620ms var(--ease-display), transform 620ms var(--ease-display);
}

.valley-drive .waypoint.is-lit {
  opacity: 1;
  transform: translateY(0);
}

.valley-drive .wp-art path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.valley-drive .waypoint text {
  fill: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 26px;
  letter-spacing: 0.14em;
  text-anchor: middle;
  text-transform: uppercase;
}

.valley-drive .waypoint.is-lit .wp-art path {
  filter: none;
}

/* Arrival is the point of the whole section, so it burns brighter. */
.valley-drive .is-arrival .wp-art path {
  stroke: var(--color-gold-soft);
  stroke-width: 3.5;
}

.valley-drive .is-arrival.is-lit .wp-art path {
  filter: none;
}

@media (max-width: 47.99rem) {
  .valley-drive .waypoint text {
    font-size: 38px;
    letter-spacing: 0.08em;
  }

  .valley-drive .wp-art path {
    stroke-width: 4.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .valley-drive .waypoint {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Hero on a light page -------------------------------------------------
   The page is paper now, but the hero is still a dark cinematic plate, so its
   type keeps the light treatment. Scoped to the hero only, so nothing below it
   inherits the inversion. */
.hero {
  --color-ink: #F7F3EA;
  --color-ink-soft: #E7E1D4;
  --color-ink-muted: #CFC7B8;
  --color-gold: #F0CB78;
  --color-gold-soft: #F5DDA4;
  --color-line: rgb(247 243 234 / 0.28);
  color: #F7F3EA;
}

.hero .hero-eyebrow {
  color: rgb(247 243 234 / 0.92);
}

.hero .hero-name {
  color: #F7F3EA;
}

.hero .hero-url {
  color: rgb(247 243 234 / 0.62);
}

.hero .hero-support {
  color: #E7E1D4;
}

.hero .text-action {
  color: #F7F3EA;
  text-decoration-color: rgb(240 203 120 / 0.85);
}

.hero .primary-action {
  background: var(--color-gold);
  color: #23180B;
}

.hero .site-nav a {
  color: #F7F3EA;
}

.hero .site-nav .cic-link {
  border-color: rgb(247 243 234 / 0.45);
}

.hero .wordmark {
  color: #F7F3EA;
}

.hero .motion-toggle {
  color: #F7F3EA;
  border-color: rgb(247 243 234 / 0.35);
}

/* ---- The dark zone -------------------------------------------------------
   The gradient opens at night and lifts to daylight, so the first section
   below the hero still sits on dark ground and keeps light type. Everything
   past it is on daylight and uses the normal ink. */
.the-build, .transition {
  --color-ink: #F7F3EA;
  --color-ink-soft: #D6DBDF;
  --color-ink-muted: #B2B9BF;
  --color-line: rgb(247 243 234 / 0.18);
  color: #F7F3EA;
  padding-block: clamp(4rem, 10vw, 8rem);
}

.transition .transition-intro p {
  color: #D7D9E4;
}

.ways-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.ways-home li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(247 243 234 / 0.22);
}

.way-step {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  color: #F0CB78;
}

.ways-home strong {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: var(--weight-medium);
  color: #F7F3EA;
}

.way-copy {
  color: #C2C8CD;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* On dark ground the drive reads in warm gold again. */
.transition .valley-drive .wp-art path {
  stroke: #F0CB78;
}

.transition .valley-drive .waypoint text {
  fill: rgb(214 219 223 / 0.85);
}

.transition .topo-lines path {
  stroke: rgb(247 243 234 / 0.1);
}

/* ---- THE BUILD ------------------------------------------------------------
   A pinned stage whose scroll drives a frame sequence. The still underneath is
   the finished home, so reduced motion, no JavaScript and metered connections
   all land on a complete image with the beats stacked over it. */
.the-build {
  position: relative;
  color: #F7F3EA;
}

.build-track {
  position: relative;
  height: 520svh;
}

.build-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #121a27;
  isolation: isolate;
}

.build-still,
#build-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The canvas takes over once enough frames exist; until then the still holds. */
#build-canvas {
  opacity: 0;
  transition: opacity 420ms ease;
}

[data-build="live"] #build-canvas {
  opacity: 1;
}

.build-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(8 12 20 / 0.55) 0%, transparent 34%),
    linear-gradient(0deg, rgb(8 12 20 / 0.7) 0%, transparent 46%);
}

.build-copy {
  position: absolute;
  inset: auto 0 0 0;
  width: min(100%, calc(var(--measure-wide) + (2 * var(--gutter))));
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}

.build-copy h2 {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: var(--weight-medium);
  line-height: 1.02;
  color: #F7F3EA;
}

.build-beats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.build-beat {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(247 243 234 / 0.28);
  opacity: 0;
}

.build-beat span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: #F0CB78;
}

.build-beat strong {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: var(--weight-medium);
  color: #F7F3EA;
}

.build-route {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 4vw, 3rem);
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

#build-route-line {
  fill: none;
  stroke: #F0CB78;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 8px rgb(240 203 120 / 0.5));
}

/* Without the scrub there is no reason to hold 520vh of empty scroll. */
.no-js .build-track,
[data-build="static"] .build-track {
  height: auto;
}

.no-js .build-stage,
[data-build="static"] .build-stage {
  position: relative;
  min-height: 100svh;
}

.no-js .build-beat,
[data-build="static"] .build-beat {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .build-track { height: auto; }
  .build-stage { position: relative; min-height: 100svh; }
  .build-beat { opacity: 1; }
  #build-canvas { display: none; }
}

/* Without scripting the bare lot is meaningless, so the finished home covers it. */
.build-still-final { z-index: 1; }

/* ==== Paper rhythm ==========================================================
   The Apple discipline pass for the near white direction: sections breathe on
   whitespace instead of sitting in bordered boxes, headers become centred
   statements, and hairlines appear only where a division genuinely helps.
   This layer overrides the dark era section styling; it gets folded into the
   base blocks once Tim ratifies the direction. */

.proof,
.services,
.cma,
.areas,
.journeys,
.contact {
  padding-block: clamp(6rem, 13vw, 10.5rem);
}

/* Centred statement headers: small champagne eyebrow, large serif, one lede. */
.services-heading,
.journeys-intro,
.areas-copy {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.services h2,
.cma h2,
.areas h2,
.journeys h2,
.contact h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.04;
}

.services-heading p,
.journeys-intro p,
.areas-copy p,
.cma-statement p {
  margin-top: 1.1rem;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
}

/* Cards stop being boxes. The lane reads through space and type hierarchy,
   with a single hairline above each item, nothing around it. */
.service-lanes {
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

.service {
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.service h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.service p {
  color: var(--color-ink-soft);
}

.service a {
  color: var(--color-gold);
  font-weight: var(--weight-bold);
}

/* Journeys: the two routes read as editorial columns on paper. */
.buyer-route,
.seller-route {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.journeys ol li strong {
  color: var(--color-ink);
}

.journeys ol li span {
  color: var(--color-ink-soft);
}

/* Contact narrows to one calm column; the form fields keep their shells but
   sit on the page, not in a panel. */
.contact-inner,
.contact form {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Footer: quiet, hairline above, generous air. */
.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-muted);
}

/* The build is full bleed: no inherited section padding, dark to its edges. */
.the-build {
  padding-block: 0;
  margin-bottom: 0;
  background: #141A22;
}

@media (max-width: 47.99rem) {
  .proof,
  .services,
  .cma,
  .areas,
  .journeys,
  .contact {
    padding-block: clamp(4rem, 14vw, 6rem);
  }
}

/* ==== The construction rail ================================================ */

.build-rail {
  position: absolute;
  left: var(--gutter);
  bottom: 4.6rem;
  z-index: 3;
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgb(247 243 234 / 0.55);
  font-size: 0.68rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.build-rail li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 300ms ease;
}

.rail-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgb(247 243 234 / 0.45);
  background: transparent;
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.build-rail li[data-reached] {
  color: var(--color-champagne);
}

.build-rail li[data-reached] .rail-dot {
  border-color: var(--color-champagne);
  background: var(--color-champagne);
  box-shadow: 0 0 8px rgb(205 164 90 / 0.55);
}

[data-build="static"] .build-rail {
  display: none;
}

@media (max-width: 47.99rem) {
  .build-rail {
    bottom: 3.4rem;
    flex-wrap: wrap;
    gap: 0.8rem 1.1rem;
  }
}

/* ==== The valley film card ================================================= */

.valley-film {
  max-width: 44rem;
  margin: clamp(3rem, 7vw, 5rem) auto 0;
}

.valley-film-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: #141A22;
  box-shadow: 0 24px 60px rgb(29 29 31 / 0.16);
}

.valley-film video {
  display: block;
  width: 100%;
  height: auto;
}

.valley-film-toggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: rgb(20 26 34 / 0.72);
  color: #F7F3EA;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.valley-film-toggle-glyph {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--color-champagne);
}

.valley-film figcaption {
  margin-top: 0.9rem;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ==== Conversation starters on the valley web ============================== */

.valley-web [data-city] {
  cursor: pointer;
}

.valley-web [data-city]:hover circle,
.valley-web [data-city]:focus-visible circle {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgb(138 100 32 / 0.6));
}

.valley-web [data-city]:focus-visible {
  outline: none;
}

/* ==== The champagne sheen ================================================== */

.primary-action {
  position: relative;
  overflow: hidden;
}

.primary-action::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgb(255 244 214 / 0.35) 48%,
    rgb(255 244 214 / 0.05) 52%,
    transparent 70%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.primary-action:hover::after,
.primary-action:focus-visible::after {
  transform: translateX(120%);
  transition: transform 650ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .primary-action::after {
    display: none;
  }
}

/* ==== The atlas ============================================================
   The valley web over the flight. The film is atmosphere: dim, softened, and
   pausable. The web is the subject: big, light-struck, with champagne pulses
   running the threads between cities. */

.areas.atlas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #141A22;
  color: #F7F3EA;
}

.atlas-floor,
.atlas-floor video,
.atlas-scrim {
  position: absolute;
  inset: 0;
}

.atlas-floor {
  z-index: -1;
}

.atlas-floor video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: blur(3px) saturate(1.1);
  transform: scale(1.04);
}

.atlas-scrim {
  background:
    radial-gradient(90% 70% at 50% 42%, rgb(20 26 34 / 0.1) 0%, rgb(20 26 34 / 0.66) 78%, rgb(20 26 34 / 0.9) 100%),
    linear-gradient(180deg, rgb(20 26 34 / 0.88) 0%, transparent 18% 82%, rgb(20 26 34 / 0.88) 100%);
}

.areas.atlas .areas-copy h2 {
  color: #F7F3EA;
}

.areas.atlas .areas-copy p {
  color: #C9CDD6;
}

/* The web takes the room it deserves. */
.areas.atlas .valley-web {
  max-width: 72rem;
  margin-inline: auto;
}

.areas.atlas .valley-threads path {
  stroke: rgb(247 243 234 / 0.22);
}

.areas.atlas .valley-band text {
  fill: rgb(247 243 234 / 0.4);
}

.areas.atlas .city circle {
  fill: #1B232E;
  stroke: rgb(247 243 234 / 0.5);
}

.areas.atlas .city text {
  fill: rgb(247 243 234 / 0.78);
}

.areas.atlas .city.is-served circle {
  stroke: var(--color-champagne);
  fill: rgb(205 164 90 / 0.2);
}

.areas.atlas .city.is-served text {
  fill: #F0D9A8;
}

.areas.atlas .city.is-anchor circle {
  fill: var(--color-champagne);
}

.valley-pulse {
  fill: var(--color-champagne);
  filter: drop-shadow(0 0 6px rgb(205 164 90 / 0.9));
}

.areas.atlas .valley-key {
  color: #C9CDD6;
}

.areas.atlas .valley-dot {
  background: var(--color-champagne);
}

.areas.atlas .valley-film-toggle {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
}

/* Reduced motion: no pulses, no film. The web stands on the dark ground. */
@media (prefers-reduced-motion: reduce) {
  .valley-pulse {
    display: none;
  }

  .atlas-floor video {
    display: none;
  }
}

/* The atlas breaks out of the reading column: full bleed, copy above, and the
   web at the size that makes it the subject. */
.areas.atlas {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  padding-block: clamp(5rem, 10vw, 8rem);
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.areas.atlas .areas-copy {
  padding-inline: var(--gutter);
}

.areas.atlas .valley-web {
  width: min(94vw, 88rem);
  max-width: none;
  margin: 0;
}

.areas.atlas .valley-web svg {
  width: 100%;
  height: auto;
}

/* At this scale the labels can breathe. */
.areas.atlas .city text {
  font-size: 15px;
}

.areas.atlas .valley-band text {
  font-size: 13px;
  letter-spacing: 0.3em;
}

/* The trap field is for machines only. */
.field-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}