/* River Rock Condominiums landing page, version 3.
   Mobile first. Palette and type from the brand guidelines.
   Container 1520px of content (1648px with gutters), centered. Every band below the hero is a two column
   arrangement inside the container on desktop: heading and lead on the left,
   content on the right. One shared left edge: the hero's left column starts
   on the same line as the container's left gutter. */

@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/league-spartan-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Brand palette */
  --navy: #214060;
  --navy-deep: #182f47;
  --river: #76c6e5;
  --sand: #d7c6a8;
  --sand-tint: #f4efe5;
  --white: #ffffff;
  --gray-light: #e6e6e6;
  --gray: #4d4d4d;
  --ink: #333333;
  --error: #a12a2a;
  --footer-rule: #3d5a78; /* a lighter navy for the footer rules */

  --display: 'League Spartan', 'Segoe UI', Arial, sans-serif;
  --sans: 'Montserrat', 'Segoe UI', Arial, sans-serif;

  --text: 18px;
  --lead: 21px;
  --h1: clamp(32px, 8vw, 42px); /* mobile: one step down so "Own on the river." holds line one at 375 */
  --h2: clamp(32px, 7.5vw, 40px);

  --max: 1648px; /* 1520px of content plus the 64px gutters */
  --gutter: clamp(20px, 4.5vw, 64px);
  /* The shared left edge: container gutter, or the centered container's left edge on wide screens */
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --measure: 700px; /* 60 to 70 characters at 19px */
  --hero-col: 640px; /* desktop hero left column, holds a 60 to 70 character measure */
  --section-y: clamp(56px, 8vw, 112px);
  --stack: 24px;

  --radius: 2px;
  --focus: 3px solid var(--navy);
}

@media (min-width: 900px) {
  :root {
    --text: 19px;
    --lead: 23px;
    --h1: clamp(46px, 4.4vw, 62px);
    --h2: clamp(40px, 3.4vw, 58px);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.lightbox-open {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  padding-bottom: 84px; /* room for the mobile sticky bar */
}

body.page-thanks,
body.page-privacy {
  padding-bottom: 0;
}

@media (min-width: 900px) {
  body {
    padding-bottom: 0;
  }
}

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

h1,
h2 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 var(--stack);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

p {
  margin: 0 0 var(--stack);
}

a {
  color: var(--navy);
}

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

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--sand {
  background: var(--sand-tint);
}

.section--navy {
  background: var(--navy);
  color: var(--white);
}

.section--navy .section__title {
  color: var(--white);
}

.section__title {
  max-width: 18ch;
}

.section__lead {
  font-size: var(--lead);
  line-height: 1.45;
  max-width: 34ch;
  margin-bottom: 32px;
}

.section__body {
  max-width: var(--measure);
}

.section__cta {
  margin-top: 40px;
}

/* Two column band: heading and lead left, content right */
.band {
  display: grid;
  gap: 0;
}

.band__body {
  max-width: var(--measure);
}

@media (min-width: 1000px) {
  .band {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }
  .band__head .section__title,
  .band__head .section__lead {
    margin-bottom: 20px;
  }
  .band__head .section__lead:last-child {
    margin-bottom: 0;
  }
  .band__body {
    margin-top: 10px; /* optical alignment with the heading's cap height */
  }
  .band + .container {
    margin-top: 48px;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--white);
  z-index: 100;
}

.skip-link:focus {
  top: 16px;
}

/* Buttons */
.button {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--white);
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: 16px 28px;
  min-height: 52px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.button:hover,
.button:focus-visible {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}

.button:disabled {
  opacity: 0.6;
  cursor: default;
}

.button--large {
  font-size: 19px;
  padding: 16px 32px;
}

.button--outline {
  color: var(--navy);
  background: var(--white);
}

.button--outline:hover,
.button--outline:focus-visible {
  color: var(--white);
}

/* White button on navy */
.button--light {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

.button--light:hover,
.button--light:focus-visible {
  color: var(--navy);
  background: var(--sand);
  border-color: var(--sand);
}

/* Outlined white button on navy */
.button--ghost {
  color: var(--white);
  background: transparent;
  border-color: var(--white);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

/* Phone buttons: the label on one line, the number on the next */
.button--phone {
  line-height: 1.15;
  padding-top: 11px;
  padding-bottom: 11px;
}

.button__label {
  display: block;
}

.button__number {
  display: block;
  font-weight: 400;
  font-size: 17px;
  margin-top: 3px;
}

.button__number:empty::before {
  content: ' a0'; /* reserves the line before the number is written in, so nothing shifts */
}

/* Inline number spans reserve their width before main.js writes the number in */
p [data-phone-text]:empty {
  display: inline-block;
  min-width: 8.2em;
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--inline {
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  margin-right: 8px;
}

.button--phone .icon--inline {
  float: left;
  margin-top: 2px;
}

/* Header. Mobile only on the landing page. On desktop the hero panel carries the logo. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding-block: 12px;
}

.site-logo {
  width: 140px;
  height: auto;
}

@media (min-width: 900px) {
  .site-header {
    display: none;
  }
  .site-header--always {
    display: block;
  }
  .site-header--always .site-logo {
    width: 200px;
  }
}

/* Hero.
   Mobile: navy panel (H1, support), photo band, two controls, then the form as the first band.
   Desktop: left column (logo, H1, support, form, phone) on the shared edge, photo on the right. */
.hero {
  display: grid;
  background: var(--navy);
  color: var(--white);
}

.hero__panel {
  padding: 24px var(--gutter) 18px;
}

.hero__logo {
  display: none;
  width: 200px;
  height: auto;
  margin-bottom: 28px;
}

.hero__title {
  color: var(--white);
  max-width: 16ch;
  margin-bottom: 14px;
}

.hero__lead {
  font-size: var(--text);
  line-height: 1.5;
  max-width: 40ch;
  margin-bottom: 0;
}

/* Mobile: each H1 sentence starts its own line, so "Own on the river." holds line one. */
@media (max-width: 899px) {
  .hero__title {
    max-width: none;
    text-wrap: wrap;
  }
  .hero__title-line {
    display: block;
  }
}

.hero__media img {
  /* Mobile: the whole 3:2 frame, full width, uncropped. Desktop overrides below. */
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.hero__actions {
  display: grid;
  gap: 10px;
  padding: 20px var(--gutter) 24px;
}

.hero__actions .button {
  width: 100%;
  min-height: 52px;
}

.hero__form {
  background: var(--sand-tint);
  color: var(--ink);
  padding: 28px var(--gutter) 36px;
}

.hero__phone {
  display: block;
  width: 100%;
  margin-top: 12px;
  color: var(--navy);
  background: var(--white);
  border-color: var(--navy);
}

.hero__phone:hover,
.hero__phone:focus-visible {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

.hero .button:focus-visible,
.hero a:focus-visible {
  outline-color: var(--white);
}

.hero__form .button:focus-visible,
.hero__form a:focus-visible {
  outline-color: var(--navy);
}

@media (min-width: 900px) {
  /* Height is driven by the left column's content, with a viewport floor. The photograph is
     positioned over the right side and stretches to whatever height the column needs, never
     the other way around. On taller viewports the column's contents are centered, so extra
     space splits evenly above the logo and below the phone control. */
  .hero {
    position: relative;
    grid-template-columns: 55vw; /* 55/45: text column left, photograph right */
    grid-template-rows: auto auto;
    grid-template-areas:
      'panel'
      'form';
    align-content: center;
    min-height: 90vh;
  }
  .hero__panel {
    grid-area: panel;
    padding: 32px 40px 0 var(--edge);
  }
  .hero__logo {
    display: block;
    width: 180px;
    margin-bottom: 16px;
  }
  .hero__title {
    /* One step below the desktop H1 scale so the form fits in 90vh at 1920 by 1080 */
    font-size: clamp(38px, 2.4vw, 46px);
    max-width: none;
    margin-bottom: 8px;
  }
  .hero__lead {
    font-size: var(--text);
    line-height: 1.45;
    max-width: 52ch; /* at most 70 characters per line at 19px (measured 65) */
  }
  .hero__actions {
    display: none;
  }
  .hero__form {
    grid-area: form;
    background: transparent;
    color: var(--ink);
    padding: 24px 40px 32px var(--edge);
  }
  .hero__phone {
    color: var(--white);
    background: transparent;
    border-color: var(--white);
    margin-top: 10px;
    padding-top: 13px;
    padding-bottom: 13px;
    min-height: 48px;
  }
  .hero__phone .button__label,
  .hero__phone .button__number {
    display: inline;
  }
  .hero__phone .button__number {
    margin-left: 10px;
    font-size: 19px;
  }
  .hero__phone .icon--inline {
    float: none;
    margin-top: 0;
  }
  .hero__phone:hover,
  .hero__phone:focus-visible {
    color: var(--navy);
    background: var(--white);
    border-color: var(--white);
  }
  .hero__form .button:focus-visible,
  .hero__form a:focus-visible {
    outline-color: var(--white);
  }
  .hero__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 55vw;
    right: 0;
    overflow: hidden;
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-position: 30% 100%;
    /* The slot is taller than 3:2, so the whole frame height would show and the chandelier
       would sit at the top. Scaling up from the bottom edge trims the ceiling, keeps the
       floor, and puts the window wall and river in the upper third. */
    transform: scale(1.28);
    transform-origin: 30% 100%;
  }
}

/* Laptop class screens (1440 by 900 and similar): keep the next band's top edge at the fold.
   The 32px above the logo, 24px above the card, and 32px below the phone control stay;
   the H1 takes one more step down and the card's internal spacing tightens. */
@media (min-width: 900px) and (max-width: 1500px) {
  .hero__title {
    font-size: 32px;
    margin-bottom: 6px;
  }
  .hero__lead {
    line-height: 1.35;
  }
  .tour-form--hero {
    padding: 12px 20px 12px;
  }
  .tour-form--hero .tour-form__title {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .tour-form--hero .field {
    margin-bottom: 4px;
  }
  .tour-form--hero .field label {
    line-height: 1.2;
  }
  .tour-form--hero .form__consent {
    margin-top: 6px;
    line-height: 1.25;
  }
  .hero__phone {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* Hero form card, desktop: compact, capped at 520px, with the phone as the second way to book
   inside the card. On mobile the in-card phone is hidden and the phone sits under the card. */
.hero__card-phone {
  display: none;
}

@media (min-width: 900px) {
  .hero__form .hero__phone {
    display: none;
  }
  .hero__card-phone {
    display: block;
    width: 100%;
    margin-top: 8px;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 18px;
  }
  .hero__card-phone .button__label,
  .hero__card-phone .button__number {
    display: inline;
  }
  .hero__card-phone .button__number {
    margin-left: 10px;
    font-size: 18px;
    margin-top: 0;
  }
  .hero__card-phone .icon--inline {
    float: none;
    margin-top: 0;
  }
  .hero__card-phone:focus-visible {
    outline-color: var(--navy);
  }
  .hero__form .hero__card-phone:focus-visible {
    outline-color: var(--navy);
  }
  .hero .tour-form--hero {
    max-width: 520px;
    padding: 14px 18px 12px;
  }
  .hero .tour-form--hero .tour-form__title {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .hero .tour-form--hero .field {
    margin-bottom: 6px;
  }
  .hero .tour-form--hero .field label {
    margin-bottom: 2px;
    line-height: 1.25;
  }
  .hero .tour-form--hero .field input,
  .hero .tour-form--hero .field select {
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    line-height: 44px;
  }
  .hero .tour-form--hero .form__submit .button {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .hero .tour-form--hero .form__consent {
    font-size: 15px;
    line-height: 1.35;
    margin-top: 8px;
  }
}

/* Plain statement lists */
.statements {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.statements li {
  padding: 16px 0 16px 28px;
  border-top: 1px solid var(--sand);
  position: relative;
}

.statements li:last-child {
  border-bottom: 1px solid var(--sand);
}

.statements li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30px;
  width: 12px;
  height: 2px;
  background: var(--navy);
}

@media (min-width: 900px) {
  .statements--two {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 5vw, 72px);
  }
  .statements--two li:nth-last-child(2) {
    border-bottom: 1px solid var(--sand);
  }
}

/* Photos */
.photo {
  margin: 0 0 40px;
}

.photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sand-tint);
}

@media (min-width: 900px) {
  .photo--wide img {
    aspect-ratio: 16 / 9;
  }
}

/* Walking times */
.walks {
  margin: 0;
  display: grid;
  gap: 0;
}

.walks__item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--sand);
}

.walks__item:last-child {
  border-bottom: 1px solid var(--sand);
}

.walks dt {
  font-weight: 600;
  grid-column: 1;
}

.walks dd {
  margin: 0;
  grid-column: 1;
  color: var(--gray);
  font-size: 17px;
}

.walks__time {
  grid-column: 2 !important;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--navy) !important;
  font-weight: 600;
  font-size: var(--text) !important;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .walks {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .walks__item:nth-last-child(2) {
    border-bottom: 1px solid var(--sand);
  }
}

@media (min-width: 1100px) {
  .walks {
    grid-template-columns: repeat(3, 1fr);
  }
  .walks__item:nth-last-child(3) {
    border-bottom: 1px solid var(--sand);
  }
}

/* Residences gallery: a fixed 3:2 lead slot and a grid of thumbnail buttons.
   A photograph that is not 3:2 sits letterboxed on the band color, never cropped. */
.gallery__lead-btn,
.gallery__thumb {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.gallery__lead-btn img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--sand-tint);
}

.gallery__grid {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gallery__thumb {
  border: 3px solid transparent;
  background: var(--white);
}

.gallery__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.gallery__thumb:hover {
  border-color: var(--sand);
}

.gallery__thumb:focus-visible,
.gallery__lead-btn:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

@media (min-width: 1000px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
  }
}

/* Full screen photograph viewer */
.lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: rgba(16, 26, 38, 0.97);
  color: var(--white);
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.lightbox[open] {
  display: block;
}

.lightbox__stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 64px 12px;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 128px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(16, 26, 38, 0.6);
  color: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lightbox__close svg,
.lightbox__nav svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__close {
  top: 12px;
  right: 12px;
  width: 60px;
  height: 60px;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: 8px;
}

.lightbox__nav--next {
  right: 8px;
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.lightbox__count {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
}

/* Amenities: a photograph per amenity with the approved line as the caption */
.amenities {
  display: grid;
  gap: 28px;
}

.amenity {
  margin: 0;
}

.amenity img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sand-tint);
}

.amenity figcaption {
  margin-top: 12px;
  font-weight: 600;
}

.amenities__text {
  margin-top: 36px;
}

/* Features strip under the amenity tiles: four short facts, one line each,
   ruled like the walks list. */
.features {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.features li {
  padding: 16px 0;
  border-top: 1px solid var(--sand);
}

.features li:last-child {
  border-bottom: 1px solid var(--sand);
}

.features strong {
  display: block;
  font-weight: 600;
  color: var(--navy);
}

.features span {
  display: block;
  color: var(--gray);
  font-size: 17px;
}

@media (min-width: 720px) {
  .amenities {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 32px;
  }
  .features {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .features li:nth-last-child(2) {
    border-bottom: 1px solid var(--sand);
  }
}

@media (min-width: 1000px) {
  .amenities {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 40px;
  }
  .features {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    margin-top: 48px;
  }
  .features li {
    border-bottom: 1px solid var(--sand);
  }
}

/* FAQ */
.faq {
  margin: 0;
}

.faq__item {
  padding: 22px 0;
  border-top: 1px solid var(--sand);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--sand);
}

.faq dt {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 8px;
}

.faq dd {
  margin: 0;
}

/* Tour band: heading, lead, and phone on the left, form on the right */
.tour__phone {
  background: var(--navy);
  color: var(--white);
  padding: 28px clamp(20px, 3vw, 32px);
  margin-bottom: 32px;
}

.tour__phone-label {
  font-weight: 600;
  margin: 0 0 8px;
}

.tour__phone-link {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.2;
  color: var(--white);
  text-decoration: none;
  padding: 6px 0;
  min-height: 48px;
}

.tour__phone-link:hover,
.tour__phone-link:focus-visible {
  text-decoration: underline;
  outline-color: var(--white);
}

.tour__phone-link .icon--inline {
  width: 26px;
  height: 26px;
  vertical-align: -3px;
}

.tour__phone-note {
  color: var(--sand);
  font-size: 17px;
  margin: 12px 0 0;
}

/* Broker block inside the phone card: the listing broker's portrait beside the name,
   under a rule, so the reader knows who answers the call. */
.tour__broker {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 18px;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-rule);
}

.tour__broker-photo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius);
}

.tour__broker-text {
  margin: 0;
  line-height: 1.4;
}

.tour__broker-text strong {
  display: block;
  font-weight: 600;
}

.tour__broker-text span {
  display: block;
  color: var(--sand);
  font-size: 17px;
}

@media (min-width: 900px) {
  .tour__broker {
    grid-template-columns: 104px 1fr;
    column-gap: 20px;
  }
  .tour__broker-photo {
    width: 104px;
    height: 104px;
  }
}

/* Form card, shared by the hero form and the bottom form */
.tour-form {
  background: var(--white);
  border: 1px solid var(--sand);
  padding: clamp(22px, 4vw, 40px);
  max-width: 680px;
}

.tour-form__title {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 16px;
}

@media (min-width: 1000px) {
  .band--tour .band__head {
    max-width: 560px;
  }
  .band--tour .tour__phone {
    margin-bottom: 0;
  }
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
}

.field input,
.field select {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--gray);
  border-radius: var(--radius);
  padding: 11px 14px;
  min-height: 52px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy);
}

.field.is-invalid input {
  border-color: var(--error);
}

.field__error {
  display: none;
  font-size: 16px;
  color: var(--error);
  margin: 6px 0 0;
}

.field.is-invalid .field__error {
  display: block;
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile:not(:empty) {
  min-height: 65px;
  margin-bottom: 18px;
}

.form__submit .button {
  width: 100%;
}

.form__consent {
  font-size: 16px;
  color: var(--gray);
  line-height: 1.5;
  margin: 12px 0 0;
}

.form__status {
  margin: 14px 0 0;
  font-weight: 600;
  color: var(--error);
}

.form__status:empty {
  display: none;
}

/* Compact spacing for the hero form so it fits the desktop fold */
@media (min-width: 900px) {
  .tour-form--hero {
    padding: 14px 20px 14px;
    max-width: none;
  }
  .tour-form--hero .tour-form__title {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .tour-form--hero .field {
    margin-bottom: 6px;
  }
  .tour-form--hero .field label {
    margin-bottom: 3px;
    line-height: 1.3;
  }
  .tour-form--hero .field input,
  .tour-form--hero .field select {
    min-height: 48px;
    line-height: 1.3;
    padding: 8px 12px;
  }
  .tour-form--hero .form__submit .button {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .tour-form--hero .form__consent {
    margin-top: 8px;
    line-height: 1.35;
  }
}

/* Thank-you page */
.thanks {
  min-height: 50vh;
}

.thanks .section__title {
  max-width: 16ch;
}

.thanks__phone {
  display: inline-block;
  min-width: 280px;
  margin-top: 4px;
}

.thanks__photo {
  margin: 32px 0 0;
}

@media (min-width: 1000px) {
  .thanks__photo {
    margin-top: 0;
  }
}

/* Privacy page: heading and lead left, the policy right, in the band layout. */
.privacy .section__title {
  max-width: 16ch;
}

.privacy__body h2 {
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.2;
  max-width: none;
  margin: 36px 0 12px;
}

.privacy__body h2:first-child {
  margin-top: 0;
}

.privacy__body p {
  margin: 0 0 16px;
}

.privacy__body ul {
  margin: 0 0 16px;
  padding-left: 24px;
}

.privacy__body li {
  margin-bottom: 6px;
}

.privacy__updated {
  color: var(--gray);
  font-size: 17px;
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding-block: 48px 44px;
}

.site-footer p {
  margin: 0 0 10px;
  font-size: 17px;
}

.site-footer a {
  color: var(--white);
}

.site-footer__attribution {
  font-weight: 600;
}

/* Footer. Mobile: one left aligned column, rules between the groups.
   Desktop: River Rock left, St. Clair right aligned, a full width bottom row under a rule.
   Neither logo links anywhere. */
.site-footer__top {
  display: grid;
  gap: 0;
}

.site-footer__col {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-bottom: 28px;
}

.site-footer__col p,
.site-footer__bottom p {
  margin: 0;
}

.site-footer__col--right {
  border-top: 1px solid var(--footer-rule);
  padding-top: 28px;
}

.site-footer__logo {
  display: block;
  width: auto;
}

.site-footer__logo--rr {
  height: 56px;
  margin-bottom: 8px;
}

.site-footer__logo--sc {
  height: 96px;
  margin: 4px 0 6px;
}

.site-footer .site-footer__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}

.site-footer__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
  text-decoration: underline;
}

.site-footer__phone .icon--inline {
  vertical-align: 0;
}

.site-footer__phone:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--white);
}

.site-footer__bottom {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--footer-rule);
  padding-top: 24px;
  font-size: 16px;
}

.site-footer__bottom p:empty {
  display: none;
}

@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .site-footer__col {
    padding-bottom: 36px;
  }
  .site-footer__col--right {
    border-top: 0;
    padding-top: 0;
    justify-items: end;
    text-align: right;
  }
  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .site-footer__bottom p:last-child {
    grid-column: 2;
  }
}

/* Mobile sticky bar */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--gray-light);
  transform: translateY(0);
  transition: transform 200ms ease;
}

.sticky-bar[hidden] {
  display: grid;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}

.sticky-bar .button {
  font-size: 17px;
  padding: 13px 18px;
  min-height: 48px;
}

@media (min-width: 900px) {
  .sticky-bar,
  .sticky-bar[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button,
  .sticky-bar {
    transition: none;
  }
}