/* Sawtooth Insurance Group: page styles.
   Tokens rebrand scrollcraft.css. Everything below styles our own markup only;
   no [data-sc-*] selector or .sc-* mechanism class is restyled. */

:root {
  --sc-canvas:     #0a0f1d;
  --sc-surface:    #111931;
  --sc-ink:        #f3efe6;
  --sc-ink-soft:   #b1b8ca;
  --sc-accent:     #cdb287;
  --sc-accent-ink: #0a0f1d;
  --sc-font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 224 60% 3%;

  --r: 8px;                      /* the one radius for the page */
  --line: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  --gold-dim: color-mix(in oklab, var(--sc-accent) 55%, transparent);
  --rail-h: 92px;
}

html { scroll-behavior: auto; }
body { min-height: 100vh; }

/* ------------------------------------------------------------ header -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2.2vw, 1.6rem) var(--sc-gutter);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__logo { display: block; }
.bar__logo img { height: clamp(58px, 7.4vw, 84px); width: auto; }

/* the quick-pick row: five small entry points straight to a submittal form, always visible since
   the header is fixed. Sized to stay one row tall everywhere: on narrow screens it scrolls
   sideways in its own lane instead of wrapping, so it can never push into the hero copy below it. */
.quickpick {
  display: flex; align-items: center; gap: 0.4rem;
  min-width: 0; flex: 1 1 auto; justify-content: flex-end;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.quickpick::-webkit-scrollbar { display: none; }
.quickpick a, .quickpick button {
  flex: none; appearance: none; background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
  border: 1px solid var(--line); border-radius: var(--r); color: var(--sc-ink);
  padding: 0.6em 1em; font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  min-height: 40px; display: inline-flex; align-items: center;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .quickpick a:hover, .quickpick button:hover { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
}
.quickpick a:focus-visible, .quickpick button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (max-width: 860px) {
  /* narrow enough that not all five fit: scrolls sideways, with a fade at the right edge so it
     reads as "more here" rather than as the row simply ending. */
  .quickpick {
    justify-content: flex-start; padding-right: 1.5rem;
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
  .quickpick a, .quickpick button { padding: 0.5em 0.85em; font-size: 0.7rem; min-height: 36px; }
}

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.8em 1.5em;
  border-radius: var(--r);
  border: 1px solid var(--sc-accent);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text);
  letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--ghost { background: color-mix(in oklab, var(--sc-canvas) 55%, transparent); color: var(--sc-ink); border-color: var(--line); box-shadow: none; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 82%, white); }
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); border-color: var(--sc-accent); color: var(--sc-ink); }
}

/* ---------------------------------------------- fixed atmosphere planes --
   z: world 1 · mist 2 · grain 3 · near ridge 4 · rain 5 · copy 20 · chrome 60 */
.fx { position: fixed; inset: 0; pointer-events: none; }
.fx--mist { z-index: 2; overflow: hidden; }
.fx--near { z-index: 4; overflow: hidden; }
.fx--rain { z-index: 5; }
.mist {
  position: absolute; left: -20%; width: 140%; height: 42vh; filter: blur(28px);
  background: radial-gradient(60% 50% at 30% 50%, color-mix(in oklab, #9db0d4 34%, transparent), transparent 70%),
              radial-gradient(50% 45% at 72% 60%, color-mix(in oklab, #8ea3cb 26%, transparent), transparent 70%);
  opacity: var(--mist, 0.6);
  transform: translate3d(var(--mx, 0px), 0, 0);
  will-change: transform, opacity;
}
.mist--back { bottom: 8vh; animation: drift 46s linear infinite alternate; }
.mist--front { bottom: -6vh; height: 34vh; animation: drift 31s linear infinite alternate-reverse; }
@keyframes drift { from { margin-left: -4%; } to { margin-left: 4%; } }

.near {
  position: absolute; left: -3%; right: -3%; bottom: -2px; height: 17vh; min-height: 96px;
  transform: translate3d(var(--nx, 0px), var(--ny, 0px), 0);
  opacity: var(--near-o, 1);
  will-change: transform, opacity;
}
.near svg { width: 100%; height: 100%; }
.flash { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: #b9c9ee; mix-blend-mode: screen; }
.flash.go { animation: bolt 1.5s 0.5s ease-out 1; }
@keyframes bolt { 0% { opacity: 0 } 6% { opacity: 0.30 } 14% { opacity: 0.04 } 24% { opacity: 0.22 } 60% { opacity: 0 } 100% { opacity: 0 } }

/* -------------------------------------------------------- world legs -- */
[data-sc-segment] :is(img, video) { object-position: 50% 50%; }
@media (max-width: 860px) {
  .seg-1 :is(img, video) { object-position: 78% 50%; }
  .seg-2 :is(img, video) { object-position: 72% 50%; }
  .seg-3 :is(img, video) { object-position: 60% 50%; }
  .seg-4 :is(img, video) { object-position: 66% 50%; }
  .seg-5 :is(img, video) { object-position: 50% 50%; }
  .seg-6 :is(img, video) { object-position: 52% 50%; }
  .seg-7 :is(img, video) { object-position: 44% 50%; }
  .seg-8 :is(img, video) { object-position: 50% 50%; }
}

/* ---------------------------------------------------------------- copy -- */
.blk { position: absolute; max-width: min(34rem, 84vw); }
.blk h1, .blk h2 { font-family: var(--sc-font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.012em; line-height: 1.02; }
.blk h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem); max-width: 16ch; }
.blk:has(> h1) { max-width: min(46rem, 88vw); }
.blk h2 { font-size: clamp(2.1rem, 1.3rem + 3.3vw, 4rem); }
.blk p { margin: 0; text-wrap: pretty; }
.blk .lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); max-width: 34ch; margin-top: var(--sc-5); }
.blk .body { color: var(--sc-ink); opacity: 0.88; max-width: 44ch; margin-top: var(--sc-4); }
.blk .act { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.blk--l { left: var(--sc-gutter); }
.blk--r { right: var(--sc-gutter); text-align: left; }
.blk--top { top: clamp(6.5rem, 17vh, 10rem); }
.blk--mid { top: 50%; translate: 0 -50%; }
.blk--bot { bottom: calc(var(--rail-h) + clamp(1.2rem, 5vh, 3.5rem)); }

.scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.sheet__bg { opacity: 0; }
.scrim--tl { background: radial-gradient(64% 84% at 14% 50%, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 42%, transparent 80%); }
.scrim--bl { background: radial-gradient(70% 62% at 14% 78%, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent 72%); }
.scrim--br { background: radial-gradient(70% 62% at 86% 78%, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent 72%); }
.scrim--mid { background: radial-gradient(60% 60% at 50% 52%, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent 75%); }
.blk h1, .blk h2, .blk p, .blk li { text-shadow: 0 1px 14px hsl(var(--sc-shadow-color) / 0.55); }

/* THE BUTTON ON THE PRINTS. The camera ends directly above the real prints on the hood, and the
   quote button sits on them, tilted a little like the paper. The copy block is the button itself, so it
   carries its own fill. Rotation and centring use the individual `rotate` / `translate` properties
   because the engine owns `transform` on copy blocks. */
.paperbtn {
  position: absolute; left: 50%; top: 56%; translate: -50% -50%; rotate: -1.6deg; max-width: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem;
  width: min(29rem, 84vw); min-height: 172px; padding: 1rem 1.3rem 1rem 1.7rem;
  border: 0; border-radius: 3px; background: #14181f; color: #fff; cursor: pointer; text-align: left;
  font: 800 2.55rem/0.96 var(--sc-font-text); letter-spacing: -0.035em; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 3px 0 rgba(0,0,0,0.35), 0 28px 44px -18px rgba(0,0,0,0.7);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), scale var(--sc-d-fast) var(--sc-ease-out);
}
.paperbtn__go { flex: none; display: grid; place-items: center; width: 3.7rem; height: 3.7rem; border-radius: 50%; background: var(--sc-accent); color: #14181f; transition: transform var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.paperbtn__go svg { width: 1.8rem; height: 1.8rem; }
.paperbtn:active { scale: 0.98; }
.paperbtn:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .paperbtn:hover { background: var(--sc-accent); color: #14181f; }
  .paperbtn:hover .paperbtn__go { background: #14181f; color: var(--sc-accent); transform: translateX(5px); }
}
@media (max-width: 860px) { .paperbtn { top: 53%; min-height: 138px; font-size: 2.05rem; width: min(26rem, 86vw); } .paperbtn__go { width: 3.1rem; height: 3.1rem; } }
.risks { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-3); max-width: 34rem; }
.risks li { padding: 0.8rem 1.05rem; border-radius: var(--r); border: 1px solid var(--line); background: color-mix(in oklab, var(--sc-canvas) 66%, transparent); backdrop-filter: blur(6px); font-size: var(--sc-t-sm); line-height: 1.4; }
.blk--narrow { max-width: min(23rem, 84vw); }
/* the peak line sits in the clear sky above the finished lodge, between logo and CTA */
.blk--peak { left: 50%; translate: -50% 0; top: clamp(2.6rem, 5.5vh, 3.6rem); width: min(44rem, 92vw); max-width: none; text-align: center; }
.blk--peak h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); max-width: none; }
.scrim--tc { background: radial-gradient(56% 36% at 50% 12%, color-mix(in oklab, var(--sc-canvas) 86%, transparent), color-mix(in oklab, var(--sc-canvas) 60%, transparent) 50%, transparent 74%); }
@media (max-width: 860px) { .blk--peak { top: clamp(5.4rem, 14vh, 7rem); } .scrim--tc { background: radial-gradient(90% 40% at 50% 20%, color-mix(in oklab, var(--sc-canvas) 66%, transparent), transparent 74%); } }
.scrim--tr { background: radial-gradient(52% 72% at 88% 34%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 40%, transparent 76%); }
@media (max-width: 860px) { .blk--narrow { max-width: none; } .scrim--tr { background: radial-gradient(90% 60% at 50% 34%, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent 74%); } }

/* finale: licensing map */
/* the range stays in the middle of the frame; the ask sits left, the map right */
.fin {
  left: var(--sc-gutter); right: var(--sc-gutter); max-width: none;
  bottom: calc(var(--rail-h) + clamp(0.8rem, 3vh, 2rem));
  display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 31rem); justify-content: space-between; align-items: end; gap: var(--sc-6);
}
.fin h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem); max-width: 16ch; }
.fin .body { max-width: 40ch; }
.fin__r { justify-self: end; width: 100%; }
.usmap { display: block; width: 100%; height: auto; }
.usmap path { fill: #59607a; stroke: var(--sc-canvas); stroke-width: 0.9; stroke-linejoin: round; transition: fill 600ms var(--sc-ease-out); }
.usmap path.on { fill: var(--sc-accent); }
.usmap path.na { fill: #2c3345; }
.key { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; margin: 0 0.45em 0 1.1em; vertical-align: -1px; }
.key:first-child { margin-left: 0; }
.key--on { background: var(--sc-accent); }
.key--off { background: #59607a; }
.key--na { background: #2c3345; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
.fin .legend { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); letter-spacing: 0.06em; color: var(--sc-ink-soft); }
.fine { margin-top: var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 46ch; }
.scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 84%, transparent) 38%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 56%, transparent 70%); }
@media (max-width: 860px) {
  .fin { grid-template-columns: 1fr; top: auto; bottom: calc(var(--rail-h) + 0.6rem); gap: var(--sc-3); align-items: end; }
  .fin .fine { display: none; }
}

/* ----------------------------------------------------------- ridge rail -- */
.ridge { position: fixed; left: 0; right: 0; bottom: 0; height: var(--rail-h); z-index: var(--sc-z-chrome); pointer-events: none; }
.ridge::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 86%, transparent), transparent); }
.ridge svg { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 6px; width: calc(100% - 2 * var(--sc-gutter)); height: 64px; overflow: visible; }
.ridge .r-base { fill: color-mix(in oklab, var(--sc-ink) 5%, transparent); stroke: color-mix(in oklab, var(--sc-ink) 34%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ridge .r-done { fill: color-mix(in oklab, var(--sc-accent) 18%, transparent); stroke: var(--sc-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ridge__track { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 6px; height: 64px; }
.ridge .pin { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; background: none; border: 0; padding: 0.35rem 0.5rem; color: var(--sc-ink-soft); font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: color var(--sc-d-fast) var(--sc-ease-out); min-height: 44px; justify-content: flex-end; }
.ridge .pin i { width: 1px; height: 8px; background: currentColor; opacity: 0.6; display: block; }
.ridge .pin[aria-current="true"], .ridge .pin.reached { color: var(--sc-accent); }
.ridge .pin[aria-current="true"] { color: var(--sc-ink); }
.ridge .pin .flag { position: absolute; left: 50%; bottom: 100%; width: 9px; height: 9px; margin-bottom: 8px; background: var(--sc-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; transform: translate(0, 4px) scale(0.6); transition: opacity 400ms var(--sc-ease-out), transform 400ms var(--sc-ease-out); }
.ridge .pin.reached .flag { opacity: 1; transform: none; }
.ridge .mark { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--sc-ink); border: 2px solid var(--sc-accent); box-shadow: 0 2px 6px hsl(var(--sc-shadow-color) / 0.5); left: 0; top: 0; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .ridge .pin:hover { color: var(--sc-ink); } }

/* --------------------------------------------------------- quote dialog -- */
dialog#quote {
  width: min(31rem, 100vw); max-width: 100vw; max-height: 100dvh; height: 100dvh;
  margin: 0 0 0 auto; padding: 0; border: 0; color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-surface) 96%, black);
  box-shadow: var(--sc-e3); overflow: auto;
  border-left: 1px solid var(--line);
}
dialog#quote::backdrop { background: color-mix(in oklab, var(--sc-canvas) 62%, transparent); backdrop-filter: blur(3px); }
dialog#quote[open] { animation: slidein var(--sc-d-slow) var(--sc-ease-drawer); }
@keyframes slidein { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.q { padding: clamp(1.4rem, 4vw, 2.4rem); display: grid; gap: var(--sc-5); }
.q__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.q h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1.04; margin: 0; }
.q__x { flex: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: none; color: var(--sc-ink); cursor: pointer; display: grid; place-items: center; }
.q__x svg { width: 18px; height: 18px; }
.q p.sub { margin: 0.5rem 0 0; color: var(--sc-ink-soft); max-width: 40ch; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .q label.l { font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0; margin-bottom: 0.6rem; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--r); border: 1px solid var(--line); cursor: pointer; font-size: var(--sc-t-sm); transition: background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); }
.chips input:checked + label { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); font-weight: 600; }
.chips input:focus-visible + label { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.q input[type="text"], .q input[type="email"], .q input[type="tel"], .q select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border-radius: var(--r);
  border: 1px solid var(--line); background: color-mix(in oklab, var(--sc-canvas) 60%, transparent); color: var(--sc-ink);
}
.q select option:disabled { color: #7c849a; }
.q input:user-invalid, .q select:user-invalid { border-color: #e59a8c; }
.q .row { display: grid; gap: var(--sc-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .q .row { grid-template-columns: 1fr; } }
.q .consent { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.5; }
.q .status { min-height: 1.4em; font-size: var(--sc-t-sm); }
.q .status[data-kind="warn"] { color: #f0c98a; }
.q .status[data-kind="ok"] { color: #a8dcb4; }
.q .status[data-kind="err"] { color: #f0a698; }

@media (max-width: 860px) {
  :root { --rail-h: 84px; }
  .blk h1 { font-size: clamp(2.3rem, 1.1rem + 6vw, 3.2rem); }
  .blk--top { top: clamp(5.4rem, 14vh, 7rem); }
  /* Six labels do not fit a phone. Every summit stays tappable (44px), and only
     the current one is named. */
  .ridge .pin { font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.35rem 0.15rem; min-width: 44px; }
  .ridge .pin > span:not(.flag) { display: none; }
  .ridge .pin[aria-current="true"] > span:not(.flag) { display: block; }
  .ridge .pin:last-of-type { transform: translate(-84%, -100%); }
  .fin h2 { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.3rem); }
  .btn { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .mist { animation: none; }
  .flash { display: none; }
  .fx--rain { display: none; }
  dialog#quote[open] { animation: none; }
}


/* Phones: copy spans the full width, so every scrim becomes a full-width band
   over the top of the frame, where the copy sits (the portrait renders keep the
   sky open there on purpose). Last in the file so it wins over the desktop shapes. */
@media (max-width: 860px) {
  .scrim--tl, .scrim--tr, .scrim--tc {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 46%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 66%,
      transparent 82%);
  }
  .scrim--band {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 70%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 80%,
      transparent 94%);
  }
}





/* Phone finale: the range keeps the upper half of the frame, the ask sits over the lake. */
@media (max-width: 860px) {
  .fin .body { font-size: var(--sc-t-sm); max-width: none; }
  .fin .act { margin-top: var(--sc-4); }
  .fin h2 { font-size: clamp(1.6rem, 1rem + 2.6vw, 2rem); max-width: none; }
  .scrim--band {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 58%,
      color-mix(in oklab, var(--sc-canvas) 45%, transparent) 76%,
      transparent 92%);
  }
}

/* Short phones (about 640px tall): the finale block is tall, so its headline reaches the bright
   summit. Denser scrim there, and the state names stay for screen readers while the map carries them visually. */
@media (max-width: 860px) and (max-height: 700px) {
  .scrim--band {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 80%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 92%,
      transparent 100%);
  }
  .fin .body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}



/* Daylight scenes get a text panel instead of a gradient wash: a wash dark enough to carry white
   type turns a sunny frame into dusk. The panel is a sibling of the text (see the print). */
.blkwrap { position: absolute; left: var(--sc-gutter); top: clamp(6.5rem, 17vh, 10rem); width: min(26rem, calc(100vw - 2 * var(--sc-gutter))); }
.blkwrap .blk { position: relative; max-width: none; padding: 1.5rem 1.6rem 1.7rem; }
.blkwrap .blk h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); }
.blk__panel {
  position: absolute; inset: -26px 0; opacity: 0; border-radius: var(--r);
  background: color-mix(in oklab, var(--sc-canvas) 91%, transparent);
  border: 1px solid var(--line); box-shadow: var(--sc-e3), var(--sc-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.blkwrap .risks { gap: 0; margin-top: var(--sc-4); }
.blkwrap .risks li { padding: 0.75rem 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; backdrop-filter: none; }
.blkwrap .act { margin-top: var(--sc-5); }
@media (max-width: 860px) { .blkwrap { top: clamp(5.4rem, 14vh, 7rem); } }



/* ------------------------------------------------------------ quote forms -- */
.q__area, .qf, .qf__body { display: grid; gap: var(--sc-5); }
.q [hidden], .q__done { display: none !important; }
.q .f { min-width: 0; }
.q .grp { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--sc-4); }
.q .grp > legend { padding: 0; margin: 0 0 var(--sc-3); font: 600 var(--sc-t-xs)/1.3 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); }
.q .grp.lines > legend { color: var(--sc-ink-soft); }
.q .row3 { display: grid; gap: var(--sc-3); grid-template-columns: 1.4fr 1fr 0.8fr; }
@media (max-width: 520px) { .q .row3 { grid-template-columns: 1fr 1fr; } .q .row3 > .f:first-child { grid-column: 1 / -1; } }
.q input[type="date"], .q input[type="text"], .q input[type="email"], .q input[type="tel"], .q input[type="number"], .q input[type="url"], .q select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border-radius: var(--r);
  border: 1px solid var(--line); background: color-mix(in oklab, var(--sc-canvas) 60%, transparent); color: var(--sc-ink);
  color-scheme: dark;
}
.q input:user-invalid, .q select:user-invalid { border-color: #e59a8c; }
.q .hint { margin: calc(-1 * var(--sc-2)) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.q .hp { position: absolute; left: -9999px; }
.q .btn--ghost { background: none; color: var(--sc-ink); border-color: var(--line); box-shadow: none; justify-self: start; }
.q .btn--add span { font-size: 1.3em; line-height: 0; color: var(--sc-accent); }
.q .drivers { display: grid; gap: var(--sc-4); }
.q .drv { position: relative; padding: 1rem 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in oklab, var(--sc-canvas) 40%, transparent); }
.q .drv > legend { padding: 0 0.4rem; margin-left: -0.4rem; }
.q .drv__x { position: absolute; top: 0.55rem; right: 0.7rem; background: none; border: 0; color: var(--sc-ink-soft); font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; min-height: 44px; padding: 0 0.4rem; }
@media (hover: hover) and (pointer: fine) { .q .drv__x:hover { color: var(--sc-ink); } }
.q__done { padding-block: var(--sc-7); text-align: left; gap: var(--sc-4); }
.q__done h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1.04; }
.q__done p { margin: 0.75rem 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 36ch; }
.is-done .q__done { display: block !important; }
.is-done .q__area { display: none; }
.is-done .q__head p.sub { display: none; }


/* fields that share a row line up on the input, even when one label wraps to two lines */
.q .row { align-items: end; }
.q .row3 { align-items: end; }
.q .f > .l { min-height: 0; }
.q .drv__x { top: 0.1rem; }

/* consent: a real checkbox, bottom left, directly above the send button */
/* consent is now a plain statement, not a checkbox: submitting the form is the agreement. */
.q .consent-note { margin: 0; justify-self: start; max-width: 46ch; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); }

/* dec page upload */
.q input[type="file"] { width: 100%; min-height: 48px; padding: 0.55rem 0.7rem; border-radius: var(--r); border: 1px dashed var(--line); background: color-mix(in oklab, var(--sc-canvas) 40%, transparent); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); cursor: pointer; color-scheme: dark; }
.q input[type="file"]::file-selector-button { margin-right: 0.8rem; padding: 0.55rem 0.9rem; border: 1px solid var(--sc-accent); border-radius: var(--r); background: none; color: var(--sc-accent); font: 600 var(--sc-t-sm)/1 var(--sc-font-text); cursor: pointer; }
.q input[type="file"]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.q .file__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0.45rem 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink); }
.q .file__name { overflow-wrap: anywhere; }
.q .file__x { flex: none; background: none; border: 0; color: var(--sc-ink-soft); font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; min-height: 44px; padding: 0 0.4rem; }
@media (hover: hover) and (pointer: fine) { .q .file__x:hover { color: var(--sc-ink); } }
.q textarea { width: 100%; min-height: 6.5rem; padding: 0.7rem 0.9rem; border-radius: var(--r); border: 1px solid var(--line); background: color-mix(in oklab, var(--sc-canvas) 60%, transparent); color: var(--sc-ink); resize: vertical; font: inherit; line-height: 1.45; }
.q textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.q .status[data-kind="err"] { line-height: 1.45; }

/* the Airbnb application: a list of Yes/No questions, plus a few real fields */
.q .yn-list { gap: 0; }
.q .yn { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.q .yn-list > .yn:last-child, .q .yn-list > .cond:last-child .yn:last-child { border-bottom: 0; }
.q .yn__q { font-size: var(--sc-t-sm); line-height: 1.4; }
.q .yn__chips { flex: none; }
.q .yn__chips label { min-height: 40px; padding: 0 0.9rem; }
@media (max-width: 560px) {
  .q .yn { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .q .yn__chips { align-self: flex-start; }
}
/* an "if yes" / "if no" block. Sits inside a .yn-list, so it needs its own top/bottom rhythm and its
   own border, since [hidden] removes it from the list entirely rather than leaving a gap. */
.q .cond { border: 0; margin: 0; padding: 0.9rem 0 0.1rem; display: grid; gap: var(--sc-4); border-bottom: 1px solid var(--line); }
.q .cond:last-child { border-bottom: 0; }
.q .cond .yn { padding: 0; border: 0; }
.q .currency__wrap { position: relative; }
.q .currency__wrap span { position: absolute; left: 0.9rem; top: 50%; translate: 0 -50%; color: var(--sc-ink-soft); pointer-events: none; }
.q .currency input { padding-left: 1.7rem; }

/* ------------------------------------------------------ the Airbnb application page (airbnb.html) --
   Reuses every .q/.grp/.yn/.chips/.currency rule above: <main class="q airbnb-page__main"> just gives
   that whole vocabulary a normal page to live in instead of the drawer's fixed-height dialog. */
body.airbnb-page { min-height: 100vh; }
.bar--static { position: static; background: none; }
.airbnb-page__main {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--sc-gutter) clamp(4rem, 10vw, 7rem);
  display: block; height: auto;
}
/* the drawer's .q__head is a flex row (title block vs. the close X); this page has no close
   button, so the title and subtitle should just stack instead of splitting to opposite ends. */
.airbnb-page .q__head { display: block; margin-bottom: var(--sc-6); }
.airbnb-page .q__head h1 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.2rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.airbnb-page .q__head .sub { margin: 0.85rem 0 0; color: var(--sc-ink-soft); max-width: 46ch; }
.airbnb-page .q__done { padding-block: clamp(3rem, 10vw, 6rem); text-align: left; }
@media (max-width: 860px) { .bar--static { padding-block: 1rem; } .bar--static .bar__logo img { height: 52px; } }