/* ============================================================================
   Rantizo contact pages: /contact/, and /contact/demo/ while it is on hold
   (its pieces stay here so it can come back; see holding/README.md).
   Built on pages.css: .phead, .sect, .facts, the form controls. Everything
   here either composes those or adds what only these pages need:
     .phead--compact  a head that hands the screen to the form quickly
     .split           golden split: form or routes (major), rail (minor)
     .form--ruled     each group opens on a hairline, like the home close
     .choice--mission mission tiles with the fleet's slashed images
     .acres / .est    the acres field and its live coverage estimate
     .done            the confirmation and the honest fallback
     .rail / .hours   direct lines and the live Houston status
     .routes / .hq    the contact page's routing list and headquarters, with
                      the building's photograph beside its address
   ========================================================================== */

/* ================================================================== HEAD == */
.phead--compact {
  min-height: 0;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.25rem);
}
@media (max-width: 860px) {
  .phead--compact { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 2.25rem; }
}

/* ================================================================= SPLIT == */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 3.5rem clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.split__rail { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__rail { position: static; }
}

/* ================================================================== FORM == */
.form--ruled .form__legend {
  display: flex; align-items: baseline; gap: 0.75rem; width: 100%;
  padding-top: 1.25rem; margin-bottom: 0.5rem;
  border-top: 1px solid var(--sc-hairline-strong);
}
.form__step { font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent); }
.form__legend .field__opt { margin-left: auto; color: var(--sc-ink-soft); font-size: 0.8125rem; }
.form__foot { padding-top: 0.25rem; }
.form__submit { min-width: 12.5rem; }
.form__note a, .done__text a, .rail a:not(.link-arrow), .hq a:not(.link-arrow, .hq__num) {
  color: inherit; text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}

/* --------------------------------------------------------- mission tiles --
   pages.css draws the card, the selected state and the tick. The tile adds
   an image cut on the deck's 12.5deg slash, the fleet slabs in miniature. */
.choices--mission { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.choice--mission .choice__face { grid-template-columns: minmax(0, 1fr); padding: 0.5rem 0.5rem 0.875rem; gap: 0.75rem; }
.choice__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 5 / 4;
  /* The cut is 12.5deg off vertical: tan(12.5deg) x height, as a share of
     the width. At 5:4 that is 0.2217 x 0.8 = 17.7%. */
  --cut: 17.7%;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  background: #1a1712;
}
.choice__media img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 24%;
  transform: scale(1.02);
  transition: transform 420ms var(--sc-ease-out), filter 240ms var(--sc-ease-out);
}
.choice--mission { container-type: inline-size; }
.choice--mission .choice__name {
  padding: 0 0.25rem 0 0.375rem;
  font-stretch: 70%; letter-spacing: 0.03em;
  font-size: clamp(0.8125rem, 7.4cqi, 1.125rem);
}
/* The tick moves onto the image's one square corner, on an accent badge, so
   the name keeps the full width. */
.choice--mission .choice__face::before {
  content: ""; position: absolute; z-index: 2; top: 0.875rem; right: 1rem;
  width: 1.5rem; height: 1.5rem; border-radius: var(--r); background: var(--sc-accent);
  opacity: 0; transform: scale(0.6);
  transition: opacity 160ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.choice--mission .choice__face::after {
  z-index: 3; top: 1.36rem; right: 1.43rem; width: 0.66rem; height: 0.36rem;
  border-color: var(--sc-accent-ink);
}
.choice--mission > input:checked + .choice__face::before { opacity: 1; transform: none; }
/* Once a mission is chosen the others step back, so the choice reads at a glance. */
.choices--mission:has(input:checked) .choice > input:not(:checked) + .choice__face .choice__media img { filter: grayscale(1) brightness(0.62); }
.choices--mission:has(input:checked) .choice > input:not(:checked) + .choice__face .choice__name { color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .choice--mission > input:hover + .choice__face .choice__media img { transform: scale(1.06); filter: none; }
  .choice--mission > input:hover + .choice__face .choice__name { color: var(--sc-ink); }
}
@media (max-width: 640px) {
  .choices--mission { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  .choice__media { aspect-ratio: 16 / 10; --cut: 13.9%; }
}

/* ---------------------------------------------- acres and the estimate --
   The acres row folds away for infrastructure and defense. */
.acres {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 360ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out),
              margin-bottom 360ms var(--sc-ease-out), visibility 0s linear 0s;
}
.acres__in { min-height: 0; overflow: hidden; }
.acres.is-off {
  grid-template-rows: 0fr; opacity: 0; margin-bottom: -1rem; visibility: hidden;
  transition-delay: 0s, 0s, 0s, 360ms;
}
.acres.is-instant { transition: none; }
.acres__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  padding-bottom: 0.5rem;
}
.est__note { margin-top: 0.5rem; max-width: 30ch; }

.est {
  border-left: 1px solid var(--sc-hairline-strong);
  padding-left: clamp(1.25rem, 2.4vw, 2rem);
  min-height: 100%;
}
.est__read { display: flex; align-items: baseline; gap: 0.875rem; }
.est__num {
  margin: 0; color: var(--sc-ink);
  font-size: clamp(3.75rem, 6vw, 5.75rem);
  min-width: 0.6em;
  transition: color 240ms var(--sc-ease-out);
}
.est.is-empty .est__num { color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); }
.est.is-days .est__num { color: var(--sc-accent); }
.est__unit { color: var(--sc-ink-soft); }
.est__fleet { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1rem 0 0.875rem; }
.est__say { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--sc-ink); min-height: 1.45em; }
.est.is-empty .est__say { color: var(--sc-ink-soft); }

/* The drone glyph: hairline when idle, the accent when it flies. */
.quad { display: block; width: 1.75rem; height: 1.75rem; color: color-mix(in oklab, var(--sc-ink) 26%, transparent); transition: color 220ms var(--sc-ease-out); }
.quad svg { width: 100%; height: 100%; overflow: visible; }
.quad__frame, .quad__blade { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.quad__disc { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.55; }
.quad__body { fill: none; stroke: currentColor; stroke-width: 1.5; }
.quad__blade { transform-box: fill-box; transform-origin: center; }
.quad.is-on { color: var(--sc-accent); }
.quad.is-on .quad__body { fill: currentColor; }
.quad.is-on .quad__disc { fill: color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.quad.is-spin .quad__blade { animation: quad-spin 900ms cubic-bezier(0.2, 0.6, 0.35, 1); }
@keyframes quad-spin { from { transform: rotate(0deg); } to { transform: rotate(900deg); } }

@media (max-width: 560px) {
  .acres__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .acres__field { display: contents; }
  .acres__field .field__label { margin-bottom: -0.5rem; }
  .est { order: 1; }
  .est__note { order: 2; margin-top: -0.25rem; }
  .est__num { font-size: clamp(3.5rem, 18vw, 4.5rem); }
  .quad { width: 1.625rem; height: 1.625rem; }
  .est__fleet { gap: 0.25rem; }
}

/* ================================================================== DONE == */
.done {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline-strong);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.done:focus, .done:focus-visible { outline: none; }
.done.has-media { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); }
.done__body > div { display: grid; justify-items: start; }
.done__title {
  margin-top: 1rem;
  font-size: clamp(3rem, 6vw, 5.75rem); line-height: 0.88;
  overflow-wrap: anywhere;
}
.done__echo {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0;
  margin: 1.5rem 0 0;
  font: 500 0.8125rem/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink);
}
.done__echo:empty { display: none; }
/* The deck's slash between each part of the request. */
.done__echo > span:not(:last-child)::after { content: "/"; margin: 0 0.75em; color: var(--sc-accent); }
.done__text { margin: 1.25rem 0 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-mid); text-wrap: pretty; }
.done__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.done .form__note { margin-top: 1.25rem; }
.done__media { display: none; }
/* Inside a ruled section the section's rule and title already frame it. */
.sect__body .done { border-top: 0; padding-top: 0; }
.sect__body .done__title { font-size: clamp(2.5rem, 4.4vw, 4.25rem); margin-top: 0.875rem; }
.done.has-media .done__media {
  display: block; position: relative; align-self: stretch;
  min-height: 18rem; overflow: hidden; background: var(--sc-surface);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}
.done__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; }
.done.is-shown { animation: done-in 560ms var(--sc-ease-out) both; }
@keyframes done-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .done.has-media { grid-template-columns: minmax(0, 1fr); }
  .done.has-media .done__media { order: -1; min-height: 0; aspect-ratio: 2 / 1; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
}

/* ================================================================== RAIL == */
.rail { border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.25rem; }
.rail__lead { margin: 1rem 0 0; max-width: 32ch; font-size: 1.0625rem; line-height: 1.55; color: var(--sc-ink); text-wrap: pretty; }
.rail__facts { margin-top: 1.5rem; border-top: 1px solid var(--sc-hairline); }
.rail__facts > div { grid-template-columns: 5.5rem 1fr; }
.rail__facts dd { line-height: 1.5; }
.rail__phone { font-variant-numeric: tabular-nums; }
.rail__exit { margin-top: 1.75rem; }
.rail.is-done .rail__lead { display: none; }
.rail.is-done .rail__facts { margin-top: 1rem; }
@media (max-width: 1080px) {
  .rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); grid-template-rows: auto auto 1fr; gap: 0 clamp(2rem, 6vw, 5rem); }
  .rail > .t-label, .rail__lead, .rail__exit { grid-column: 1; }
  .rail__exit { justify-self: start; align-self: start; }
  .rail__facts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
@media (max-width: 640px) {
  .rail { display: block; }
  .rail__facts { margin-top: 1.5rem; }
}

/* ----------------------------------------------- the live Houston status --
   Beside the phone number it informs. Open breathes in the accent. */
.hours {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.875rem; line-height: 1.4; color: var(--sc-ink-soft);
}
.hours__dot {
  position: relative; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--sc-ink-soft);
}
.hours.is-open { color: var(--sc-ink); }
.hours.is-open .hours__dot { background: var(--sc-accent); box-shadow: none; }
.hours.is-open .hours__dot::after {
  content: ""; position: absolute; inset: -0.25rem; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--sc-accent); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hours.is-open .hours__dot::after { animation: hours-breathe 2.4s var(--sc-ease-out) 0.6s 4; }
}
@keyframes hours-breathe { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ================================================================ ROUTES ==
   The contact page's list of destinations: .linklist's ruled rows, with a
   name, where it goes, and room for a second way in. The whole row follows
   the first link; any other link in it sits above. */
.routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.route {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr) 1rem;
  gap: 0.25rem clamp(1.25rem, 3vw, 2.5rem); align-items: baseline;
  padding: 1.375rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.route__link {
  /* A name that wraps takes the second row too, so the line beneath the
     address stays with it. */
  grid-row: 1 / span 2;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.route__link::after { content: ""; position: absolute; inset: 0; }
.route__link:focus-visible { outline: none; }
.route:has(.route__link:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.route__to { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--sc-ink); }
.route__sub { grid-column: 2; margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }
.route__more { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.375rem 0 0; font-size: 0.9375rem; }
.route__more a { position: relative; z-index: 1; color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.22em; }
.route > svg {
  grid-column: 3; grid-row: 1; align-self: center;
  width: 1rem; height: 1rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: square;
  transition: transform 160ms var(--sc-ease-out);
}
/* Arriving with ?topic= marks the row that matches. */
.route.is-current .route__link { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .route:hover .route__link { color: var(--sc-accent); }
  .route:hover > svg { transform: translateX(3px); }
  .route__more a:hover { color: var(--sc-accent); }
}
@media (max-width: 640px) {
  .route { grid-template-columns: minmax(0, 1fr) 1rem; gap: 0.375rem 1rem; padding: 1.125rem 0; }
  .route__link { grid-row: auto; }
  .route__to, .route__sub, .route__more { grid-column: 1; }
  .route > svg { grid-column: 2; grid-row: 1; }
}

/* ==================================================================== HQ == */
.hq { border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.25rem; }
.hq__addr { margin: 1rem 0 0; font-style: normal; font-size: 1.0625rem; line-height: 1.5; }
.hq__note { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--sc-ink-soft); }
/* The building beside its address, so a first visit knows what to look for. */
.hq__photo {
  display: block; width: 100%; max-width: 32rem; height: auto;
  aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 30%;
  margin-top: 1.25rem; border-radius: var(--r); background: var(--sc-surface);
}
.hq__line { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline); }
.hq__num {
  display: inline-block; margin-top: 0.875rem;
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(2.75rem, 4.2vw, 4rem); line-height: 0.86; letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .hq__num:hover { color: var(--sc-accent); } }
.hq .hours { margin-top: 0.75rem; font-size: 0.9375rem; }
.hq__hours { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--sc-ink-soft); }
.hq__mail { display: inline-block; margin-top: 1.25rem; font-size: 1.0625rem; }

/* Today in Houston as a track, midnight to midnight: business hours in the
   accent, a needle at the current Houston time. The hours line below is its
   legend. On weekends the band goes quiet. */
.track { position: relative; height: 0.875rem; margin-top: 1rem; }
.track__bar { position: absolute; left: 0; right: 0; top: 0.375rem; height: 2px; background: var(--sc-hairline); }
.track__open {
  position: absolute; top: 0.375rem; height: 2px;
  left: calc(8.5 / 24 * 100%); width: calc(8.5 / 24 * 100%);
  background: color-mix(in oklab, var(--sc-accent) 42%, transparent);
}
.track.is-open .track__open { background: var(--sc-accent); }
.track.is-offday .track__open { background: var(--sc-hairline-strong); }
.track__now {
  position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc(var(--now, 0.5) * 100%); background: var(--sc-ink-soft);
}
.track.is-open .track__now { background: var(--sc-ink); }
.hq .track + .hq__hours { margin-top: 0.625rem; }

/* =============================================================== MESSAGE == */
#message { scroll-margin-top: var(--nav-h); }
.message__to { color: var(--sc-ink); }

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .acres, .choice__media img, .quad, .est__num { transition: none; }
  .done.is-shown { animation: none; }
  .quad.is-spin .quad__blade { animation: none; }
}