/* Homepage materials and lighting. The quote wizard has its own stylesheet. */
:root {
  --hero-ink: #100f0d;
  --champagne: #ebcd9a;
  --gold-edge: #e7bc7752;
  --card-shadow: 0 4px 6px -5px #382b1c32, 0 20px 30px -24px #382b1c66;
}

.site-header {
  background: #0c0c0b;
  border-bottom-color: #dbb6742e;
  box-shadow: 0 8px 22px -12px #000b;
}

.header-inner { height: 76px; }
.desktop-nav { margin-left: auto; gap: clamp(19px, 2.5vw, 36px); }
.header-actions { margin-left: 0; }
.header-quote { min-height: 44px; }

.hero-scene {
  min-height: 0;
  background: var(--hero-ink);
}

.hero-scene .hero {
  padding-block: clamp(50px, 5vw, 75px) clamp(46px, 5vw, 72px);
}

.hero-scene .hero-content { max-width: 600px; }
.hero-scene .local-label {
  gap: 11px;
  margin-bottom: 19px;
  color: var(--champagne);
  letter-spacing: .22em;
}

.hero-scene .local-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
}

.hero-scene h1 {
  font-size: clamp(54px, 6.05vw, 93px);
  line-height: .91;
  letter-spacing: -.042em;
  margin-bottom: 20px;
  text-shadow: 0 4px 32px #0006;
}

.hero-scene h1 span { color: var(--champagne); }
.hero-scene .hero-description {
  max-width: 37ch;
  color: #e5dbcb;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px;
  text-wrap: pretty;
}

.hero-scene .hero-visual {
  left: auto;
  width: min(78%, 1540px);
}

.hero-scene .hero-photo { object-position: 90% center; }
.hero-scene .hero-visual::after {
  background:
    linear-gradient(90deg, var(--hero-ink), #100f0ded 13%, #100f0d99 28%, #100f0d22 48%, transparent 64%),
    linear-gradient(0deg, #100f0dfa, #100f0d8c 12%, transparent 38%);
  box-shadow: inset 0 -28px 58px -36px #000b;
}

.hero-scene .photo-caption {
  right: auto;
  left: max(45%, calc(100% - 510px));
  bottom: 28px;
  max-width: calc(55% - 160px);
  padding-left: 13px;
  border-left-color: var(--champagne);
}

.hero-scene .photo-caption div > span {
  color: #f0dfc6;
  margin-top: 5px;
}

.hero-scene .gallery-controls {
  bottom: 25px;
  border-color: #f4e5cc40;
  background: #100f0de6;
  border-radius: 4px;
  box-shadow: 0 5px 14px #0006;
}

.hero-scene .trip-form {
  max-width: 414px;
  padding: 14px;
  border: 1px solid var(--gold-edge);
  border-radius: 7px;
  background: linear-gradient(145deg, #29231bea, #171411f5 68%);
  box-shadow: inset 0 1px #f8d69818, 0 14px 32px #0006;
}

.trip-form .route-fields, .trip-form .date-row { gap: 7px; }
.trip-form .date-row { margin-top: 7px; }
.trip-form .route-fields::after {
  left: 18px;
  top: 29px;
  height: 56px;
  background: #cba86b70;
}

.trip-form .field {
  background: #141311;
  border-color: #6a5840;
  border-radius: 4px;
  color-scheme: dark;
}

.trip-form .field:focus-within {
  border-color: var(--champagne);
  box-shadow: 0 0 0 1px var(--champagne);
}

.trip-form .field label {
  color: #e4ca9f;
  padding-top: 7px;
  font-size: 11px;
  letter-spacing: .025em;
}

.trip-form .field input {
  color: var(--ivory);
  padding-bottom: 7px;
  font-size: 14px;
}

.trip-form .field input::placeholder { color: #c4baac; }
.trip-form .route-field :is(label, input) { padding-left: 34px; }
.trip-form :is(.route-dot, .route-square) {
  top: 24px;
  left: 14px;
  border-color: #d1ab73;
  background: #141311;
}

.trip-form .suggestions { color-scheme: light; }
.hero-scene .quote-start {
  min-height: 48px;
  margin-top: 9px;
  padding-block: 10px;
  font-size: 14px;
}

.site-header .header-quote, .hero-scene .quote-start, .final-section .button-light {
  background: linear-gradient(180deg, #efd2a0, #d9ae6c);
  box-shadow: inset 0 1px #fff4d396, inset 0 -1px #67441d47, 0 6px 13px -4px #0009;
}

.site-header .header-quote:hover, .hero-scene .quote-start:hover, .final-section .button-light:hover {
  background: linear-gradient(180deg, #f8dfb6, #e1bb80);
}

.hero-scene .form-note {
  margin: 9px 0 0;
  color: #e2d6c3;
  text-align: center;
  font-size: 11px;
}

.area-ribbon {
  background: #191612;
  border-block-color: #cfa66a42;
}

.area-ribbon > .container { padding-block: 13px; }
.area-ribbon p { color: #eadac0; font-size: 13px; font-weight: 550; }
.area-ribbon i { background: #ba965f; }
.area-ribbon a {
  color: #f2ddbd;
  border-color: #9b7b4a;
  background: transparent;
}

.area-ribbon a:hover { background: #34291e; }

.places-section { padding-block: clamp(54px, 6.5vw, 94px); }
.places-section .section-top { margin-bottom: 27px; }
.places-section .section-top > p { max-width: 33ch; font-size: 14px; }
.place-cards { gap: clamp(12px, 2vw, 27px); }
.place-card, .fleet-comparison .vehicle-card { box-shadow: var(--card-shadow); }
.place-card { background: var(--surface); }
.place-card:hover { box-shadow: 0 7px 10px -7px #382b1c3b, 0 22px 33px -21px #382b1c70; }
.place-photo { aspect-ratio: 1.85; }
.place-copy h3 { font-size: clamp(25px, 2.4vw, 35px); }
.place-category {
  color: var(--accent);
  letter-spacing: .095em;
  font-weight: 650;
  text-transform: uppercase;
}
.place-copy .button {
  min-height: 44px;
  padding-inline: 0;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.place-copy .button:hover { color: var(--ink); background: transparent; }

.services-grid .service-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.service-photo {
  width: 100%;
  aspect-ratio: 1.9;
  overflow: hidden;
  background: var(--stone);
  border-bottom: 1px solid var(--brass);
}

.service-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.service-photo-cabin img { object-position: center 57%; }

.service-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(16px, 2vw, 26px);
}

.service-copy h3 { font-size: clamp(26px, 2.6vw, 36px); }
.service-copy p { margin-bottom: 20px; }
.service-copy .button { min-height: 44px; }
.service-copy .button:focus-visible { outline-offset: 3px; }

@media (max-width: 800px) {
  .header-actions { margin-left: auto; }
  .hero-scene .hero-visual { width: 82%; }
  .hero-scene .photo-caption { left: 53%; max-width: calc(47% - 115px); bottom: 74px; }
}

@media (max-width: 700px) {
  .header-inner { height: 64px; }
  .hero-scene { grid-template-rows: auto clamp(176px, 53vw, 310px) auto; }
  .hero-scene .hero-content { padding-top: 29px; }
  .hero-scene h1 { font-size: clamp(43px, 11vw, 67px); margin-bottom: 13px; }
  .hero-scene .local-label { margin-bottom: 13px; }
  .hero-scene .hero-description { margin-bottom: 0; font-size: 14px; }
  .hero-scene .hero-visual { width: 100%; }
  .hero-scene .hero-photo {
    height: clamp(188px, 59vw, 348px);
    object-position: 89% center;
    mask-image: linear-gradient(transparent, #000 24%);
  }
  .hero-scene .hero-visual::after {
    background: linear-gradient(180deg, var(--hero-ink) 35%, transparent 69%, #100f0d70 88%, var(--hero-ink));
    box-shadow: none;
  }
  .hero-scene .photo-caption {
    left: 20px;
    bottom: 15px;
    max-width: calc(100% - 180px);
    padding-left: 9px;
  }
  .hero-scene .gallery-controls { bottom: 12px; }
  .hero-scene .trip-form {
    width: calc(100% - 40px);
    margin-block: 4px 22px;
  }
  .trip-form .field input { font-size: 16px; }
  .area-ribbon > .container { padding-block: 15px; }
  .area-ribbon p { font-size: 12px; }
}