/* =============================================================================
   Rocky Mountain Home Improvement — Leadville, CO

   Palette is taken from the company's own shield: #10407F is the dominant colour
   of the mark, and everything navy on the page derives from it. Amber is the only
   warm colour and it is reserved for one job — booking an appointment. Spruce
   green belongs to the landscape artwork. If a new accent creeps in, the amber
   stops meaning "act" and the page loses its only strong signal.
   ========================================================================== */

:root {
  /* brand, sampled from assets/rmhi-mark.png */
  --navy:        #10407F;
  --navy-deep:   #0A2B57;
  --navy-mid:    #2A5FA8;
  --navy-soft:   #DCE8F6;

  /* action — the booking colour, and nothing else */
  --amber:       #E8730E;
  --amber-deep:  #C25A03;
  --amber-soft:  #FDF0E2;

  /* landscape */
  --spruce:      #1F5348;
  --spruce-deep: #12332D;

  /* neutrals */
  --ink:         #14212F;
  --slate:       #4B5F74;
  --line:        #DCE5EE;
  --paper:       #FFFFFF;
  --wash:        #F2F7FC;
  --sky:         #E9F2FB;

  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --section-pad: clamp(3.75rem, 8vw, 6.5rem);
  --nav-h: 76px;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20, 33, 47, 0.06), 0 3px 8px rgba(20, 33, 47, 0.05);
  --shadow-md: 0 2px 6px rgba(20, 33, 47, 0.07), 0 14px 34px rgba(20, 33, 47, 0.09);
  --shadow-lg: 0 4px 12px rgba(20, 33, 47, 0.08), 0 26px 60px rgba(16, 64, 127, 0.16);
}

/* ------------------------------------------------------------------ base --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.1; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 0.7rem 1.1rem; font-weight: 600;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* --------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.78rem 1.4rem;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn--lg { padding: 0.95rem 1.85rem; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--amber); color: #fff; box-shadow: 0 6px 18px rgba(232, 115, 14, 0.28); }
.btn--primary:hover { background: var(--amber-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232, 115, 14, 0.36); }
.btn--primary:active { transform: translateY(0); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

.btn--ghost { background: rgba(255, 255, 255, 0.9); color: var(--navy); border-color: rgba(16, 64, 127, 0.2); }
.btn--ghost:hover { background: #fff; border-color: var(--navy); transform: translateY(-2px); }

.linkish {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--navy-soft); padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.linkish:hover { color: var(--amber-deep); border-bottom-color: var(--amber); }

/* ------------------------------------------------------------- sticky nav --- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.is-scrolled .nav { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.nav__inner {
  max-width: var(--wrap); margin: 0 auto; min-height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(0.5rem, 1.8vw, 1.5rem);
  padding: 0 var(--gut);
}

.nav__brand { flex: none; display: block; }
.nav__brand img { width: clamp(158px, 17vw, 205px); }

.nav__menu { display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.6rem); margin-left: auto; }
.nav__menu a {
  position: relative; padding: 0.3rem 0;
  font-family: var(--display); font-weight: 600; font-size: 0.97rem;
  color: var(--slate); text-decoration: none; white-space: nowrap;
  transition: color 0.2s;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.22s;
}
.nav__menu a:hover { color: var(--navy); }
.nav__menu a:hover::after, .nav__menu a.is-current::after { transform: scaleX(1); }
.nav__menu a.is-current { color: var(--navy); }

.nav__cta {
  flex: none; padding: 0.6rem 1.15rem; border-radius: 999px;
  background: var(--amber); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(232, 115, 14, 0.28);
  transition: background 0.15s, transform 0.15s;
}
.nav__cta:hover { background: var(--amber-deep); transform: translateY(-1px); }

/* Always present, at every width and scroll position — this and the booking
   button are the only two things the site is really for. */
.nav__call {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.95rem; border-radius: 999px;
  border: 2px solid var(--navy-soft); color: var(--navy); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.nav__call:hover { border-color: var(--navy); background: var(--navy-soft); }

.nav__toggle {
  display: none; flex: none; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink);
  transition: transform 0.24s, opacity 0.18s;
}
.nav__bars { position: relative; margin: 0 auto; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero --- */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(15rem, 26vw, 21rem);
  background: linear-gradient(180deg, #BCD8F2 0%, #DCEBF9 46%, #F1F7FD 100%);
  overflow: hidden;
}

/* The range: absolutely stacked layers, each translated on scroll by app.js. */
.range { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* On a phone the whole 16:9 composition is scaled to roughly fit the band below
   the hero copy, so the peaks are actually visible. On wide screens the artwork
   is blown up past the viewport and cropped, which reads as scale. */
.range__layer {
  position: absolute; left: 50%; bottom: 0;
  width: 112%; height: auto;
  transform: translateX(-50%);
  will-change: transform;
}
.range__haze {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, rgba(228, 240, 250, 0) 0%, rgba(228, 240, 250, 0.7) 100%);
}

.hero__inner {
  position: relative;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.eyebrow {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 0.9rem;
}
.eyebrow--accent { color: var(--amber-deep); }

.hero__title {
  font-weight: 800;
  font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.1rem);
  letter-spacing: -0.022em;
  margin-bottom: 1.1rem;
  color: var(--navy-deep);
}

.hero__lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem);
  color: #3C5570;
  max-width: 33rem;
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.2rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ----------------------------------------------------------------- offer --- */

.offer {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(16, 64, 127, 0.08);
}
.offer__flag {
  margin: 0; padding: 0.6rem 1.25rem;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
}
.offer__body { padding: clamp(1.4rem, 3vw, 1.9rem); text-align: center; }

.offer__price {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(3.6rem, 3rem + 4vw, 5.4rem); line-height: 0.9;
  letter-spacing: -0.04em; color: var(--amber);
}
.offer__dollar { font-size: 0.44em; vertical-align: super; letter-spacing: 0; margin-right: 0.04em; }

.offer__h {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); font-weight: 700;
  margin: 0.35rem 0 0.5rem; letter-spacing: -0.01em;
}
.offer__sub { margin: 0 0 1.1rem; font-size: 0.95rem; }

.offer__list { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.5rem; text-align: left; }
.offer__list li { position: relative; padding-left: 1.7rem; font-size: 0.96rem; color: var(--ink); }
.offer__list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--amber-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25A03' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.offer__fine { margin: 0.85rem 0 0; font-size: 0.8rem; color: #7A8B9C; }

/* ------------------------------------------------------------ trust strip --- */

.strip { background: var(--navy); color: #fff; }
.strip__list {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(1.4rem, 3vw, 2rem) var(--gut);
  list-style: none; display: grid; gap: 1.1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.strip__list li { display: flex; flex-direction: column; gap: 0.15rem; }
.strip__list strong { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: #fff; }
.strip__list span { font-size: 0.9rem; color: #B9CEE9; }

/* --------------------------------------------------------------- sections --- */

.section {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--section-pad) var(--gut);
  scroll-margin-top: var(--nav-h);
}
.section--tint {
  max-width: none;
  padding-inline: max(var(--gut), (100% - var(--wrap)) / 2);
  background: var(--wash);
  border-block: 1px solid var(--line);
}

.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.section__title {
  font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
.section__lede { margin: 0; font-size: clamp(1rem, 0.97rem + 0.25vw, 1.13rem); }
.section__lede a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }

/* Spruce silhouette along the top edge — the landscape motif carried inside. */
.section--trees { position: relative; }
.section--trees::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background-image: url("assets/range/treeline-strip.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  /* Explicit tile size. `auto` resolves unpredictably here because the SVG sets
     preserveAspectRatio="none", and the trees blow up into hills. */
  background-size: 380px 30px;
  opacity: 0.22;
  pointer-events: none;
}

/* ---------------------------------------------------------- pest control --- */

.section--pest { position: relative; }

.pest {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.pest__card {
  padding: clamp(1.5rem, 3.2vw, 2.2rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
/* The residential card carries the offer, so it gets the weight. */
.pest__card:first-child { border-color: rgba(232, 115, 14, 0.4); box-shadow: var(--shadow-md); }
.pest__card--alt { background: var(--wash); }

.pest__title { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 800; letter-spacing: -0.015em; }
.pest__price { margin: 0.5rem 0 0.2rem; font-family: var(--display); font-size: 1.05rem; color: var(--slate); }
.pest__price strong { font-size: 1.9rem; font-weight: 800; color: var(--amber); letter-spacing: -0.02em; }
.pest__card--alt .pest__price strong { color: var(--navy); }
.pest__note { margin: 0 0 1.3rem; font-size: 0.92rem; color: #7A8B9C; }

.ticks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.6rem; flex: 1; }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.36em; width: 1.15rem; height: 1.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310407F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pests {
  list-style: none; margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pests li {
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: var(--navy-soft); color: var(--navy-deep);
  font-family: var(--display); font-weight: 600; font-size: 0.88rem;
}
.pests li:last-child { background: transparent; border: 1px dashed var(--line); color: var(--slate); }

/* --------------------------------------------------------------- services --- */

.grid { display: grid; gap: clamp(0.9rem, 2.2vw, 1.4rem); }
.grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.svc {
  padding: clamp(1.3rem, 2.6vw, 1.75rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(16, 64, 127, 0.22); }
.svc__icon { width: 58px; height: 58px; margin-bottom: 0.9rem; }
.svc__title { font-size: 1.18rem; font-weight: 700; margin-bottom: 0.45rem; letter-spacing: -0.01em; }
.svc p { margin: 0; font-size: 0.96rem; }
.svc--link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; background: var(--navy-soft); border-color: transparent; }
.svc--link p { margin-bottom: 0.3rem; }

/* ---------------------------------------------------------------- gallery --- */

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.chip {
  padding: 0.5rem 1.05rem; border-radius: 999px;
  border: 2px solid var(--line); background: var(--paper); color: var(--slate);
  font-family: var(--display); font-weight: 600; font-size: 0.93rem; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.chip:hover { border-color: var(--navy-mid); color: var(--navy); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.grid--gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }

.shot {
  position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--wash); border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.shot:hover img { transform: scale(1.05); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.75rem;
  background: linear-gradient(180deg, rgba(10, 43, 87, 0) 0%, rgba(10, 43, 87, 0.86) 100%);
  color: #fff; font-family: var(--display); font-weight: 600; font-size: 0.92rem;
}

.gallery__empty {
  margin: 0; padding: clamp(2.5rem, 7vw, 4rem) 1.5rem; text-align: center;
  border: 2px dashed var(--line); border-radius: var(--radius); color: var(--slate);
}
.gallery__empty[hidden] { display: none; }

/* ---------------------------------------------------------------- reviews --- */

.grid--reviews { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.review {
  margin: 0; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1rem;
}
.review blockquote {
  margin: 0; font-size: 1.03rem; color: var(--ink); line-height: 1.6;
  position: relative; padding-top: 1.9rem;
}
.review blockquote::before {
  content: "\201C"; position: absolute; top: -0.55rem; left: -0.2rem;
  font-family: var(--display); font-weight: 800; font-size: 4rem; line-height: 1;
  color: var(--navy-soft);
}
.review figcaption { margin-top: auto; display: flex; align-items: baseline; gap: 0.55rem; }
.review figcaption strong { font-family: var(--display); font-weight: 700; color: var(--ink); }
.review figcaption span { font-size: 0.9rem; color: #7A8B9C; }

/* ------------------------------------------------------------------- form --- */

.req {
  max-width: 50rem;
  padding: clamp(1.4rem, 3.4vw, 2.5rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.req__grid { display: grid; gap: clamp(0.9rem, 2.2vw, 1.3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field > label, .blocks > legend {
  font-family: var(--display); font-weight: 700; font-size: 0.93rem; color: var(--ink); padding: 0;
}
.field .opt { font-family: var(--body); font-weight: 400; color: #7A8B9C; }

.field input, .field select, .field textarea {
  width: 100%; padding: 0.72rem 0.9rem;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C3D2E2; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 4px rgba(16, 64, 127, 0.1);
}
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: #D3452F; }
.field__err { margin: 0; font-size: 0.86rem; color: #C03A26; font-weight: 500; }
.field__err:empty { display: none; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; }

.blocks { border: 0; margin: 0; padding: 0; min-width: 0; grid-column: 1 / -1; }
.blocks__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 0.6rem; }
.block { position: relative; display: block; cursor: pointer; }
.block input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.block__box {
  display: grid; gap: 0.1rem; padding: 0.8rem 0.7rem; text-align: center;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
  transition: border-color 0.18s, background 0.18s;
}
.block__box b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.block__box i { font-style: normal; font-size: 0.85rem; color: #7A8B9C; }
.block:hover .block__box { border-color: #C3D2E2; }
.block input:checked + .block__box { border-color: var(--navy); background: var(--navy-soft); }
.block input:focus-visible + .block__box { outline: 3px solid var(--amber); outline-offset: 2px; }

.req__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: clamp(1.3rem, 3vw, 1.9rem); }
.req__aside { margin: 0; font-size: 0.94rem; }
.req__aside a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }
#reqSubmit[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.req__status { margin: 1.15rem 0 0; font-size: 0.98rem; }
.req__status:empty { display: none; }
.req__status.is-ok {
  padding: 1rem 1.15rem; border-radius: var(--radius-sm);
  background: var(--amber-soft); border: 1px solid rgba(232, 115, 14, 0.35); color: #7A3D02;
}
.req__status.is-bad { color: #C03A26; font-weight: 500; }

/* ----------------------------------------------------------------- footer --- */

.footer { background: var(--navy-deep); color: #C4D6EC; padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; }
.footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.footer__brand img {
  width: 220px; margin-bottom: 1rem;
  background: #fff; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
}
.footer__brand p { margin: 0; font-size: 0.95rem; max-width: 30rem; }

.footer__col h3 { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 0.9rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer__col a { text-decoration: none; transition: color 0.2s; }
.footer__col a:hover { color: #fff; }

.footer__tel {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); color: #fff; text-decoration: none;
  margin-bottom: 1rem; letter-spacing: -0.01em;
}
.footer__tel:hover { color: var(--amber); }

.footer__fine {
  max-width: var(--wrap); margin: clamp(2rem, 5vw, 3rem) auto 0; padding: 1.25rem var(--gut) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.87rem; color: #93AECD;
}

/* ------------------------------------------------------------- responsive --- */

@media (min-width: 940px) {
  .hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr); align-items: center; }
  .hero { padding-bottom: clamp(13rem, 20vw, 18rem); }
  .range__layer { width: max(1600px, 118%); }
}

@media (max-width: 1080px) {
  .nav__menu { gap: 0.9rem; }
  .nav__menu a { font-size: 0.92rem; }
}

/* Below this the links collapse. The booking CTA and the phone number never do. */
@media (max-width: 940px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 0.4rem var(--gut) 1rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { padding: 0.9rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav__menu a::after { display: none; }
}

@media (max-width: 720px) {
  .nav__cta { display: none; } /* the hero and footer CTAs carry it at this width */
  .nav__call { padding: 0.6rem 1rem; }
}

@media (max-width: 400px) {
  /* The logo's own minimum was pushing the bar past the viewport at 320px. */
  .nav__brand img { width: 124px; }
  .nav__inner { gap: 0.4rem; }
  .nav__call-num { display: none; }
  .nav__call::after { content: "Call"; font-family: var(--display); font-weight: 700; }
  .btn--lg { width: 100%; }
}

/* -------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* app.js also stops moving the range; this covers the transform already applied */
  .range__layer { transform: translateX(-50%) !important; }
  .shot:hover img { transform: none; }
}