/* Autumn welcome + source-led reviews + Hoppy 10/10/10. Assessment page only. */
.hero .poster {
  background-image: url('./images/hoppy-autumn-poster.webp');
  background-position: 50% 48%;
  z-index:-3;
}
.hero > #heroVideo { object-position:50% 48%; opacity:1; z-index:-2; transition:opacity .45s ease; }
.hero > #heroVideo.is-loop-fading { opacity:0; }
.hero::before {
  background: linear-gradient(100deg,rgba(7,22,26,.83) 0%,rgba(7,22,26,.66) 40%,rgba(7,22,26,.24) 72%,rgba(7,22,26,.39) 100%);
}
.hero-media-controls {
  position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center;
  gap:10px; margin-top:26px; padding-bottom:4px;
}
.hero-media-controls button {
  min-height:44px; border:1px solid #ffffff60; border-radius:999px; padding:9px 15px;
  color:white; background:#10262bc9; font-family:inherit; font-size:12px; font-weight:700; line-height:1.3; cursor:pointer;
}
.hero-media-controls button:hover { background:#163c41; border-color:#fff; }
.hero-media-controls button:focus-visible, .promise-motion:focus-visible {
  outline:3px solid #ffa955; outline-offset:4px;
}
.hero-media-controls small { color:#e5eceb; font-size:12px; }
.welcome-dialog {
  width:min(1000px,94vw); padding:16px; border:1px solid #ffffff35; border-radius:20px;
  background:#101e2c; color:white; box-shadow:0 30px 100px #0008; margin:auto;
}
.welcome-dialog::backdrop { background:#06121ddd; backdrop-filter:blur(8px); }
.welcome-dialog video { display:block; width:100%; max-height:75vh; border-radius:12px; background:#000; }
.welcome-dialog .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 12px; }
.welcome-dialog h2 { font-size:18px; margin:0; color:white; }
.welcome-dialog button { min-height:44px; border:1px solid #ffffff70; border-radius:10px; padding:8px 14px; background:transparent; color:#fff; font:inherit; cursor:pointer; }
.welcome-dialog p { margin:12px 0 0; font-size:12px; color:#c9d6df; line-height:1.5; }

.hoppy-reputation { background:#fffdf8; padding-block:clamp(52px,7vw,94px); }
.hoppy-review-story {
  display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:end;
  margin-bottom:30px; text-align:left;
}
.hoppy-review-story .kick { display:block; color:#087775; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.hoppy-review-story h2 { font-size:clamp(36px,4.9vw,62px); line-height:1.04; letter-spacing:-.045em; color:#111e31; max-width:15ch; margin:0; }
.hoppy-review-story h2 span { color:#087775; display:block; }
.hoppy-review-story .story-copy { max-width:44ch; font-size:17px; color:#465b65; line-height:1.65; margin:0 0 4px; }
.hoppy-review-story h3 { color:#111e31; font-size:22px; line-height:1.3; margin:0 0 12px; }
.hoppy-reasons { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; }
.hoppy-reasons span { background:#edf7f3; border:1px solid #d5e8df; color:#086661; font-size:13px; font-weight:800; padding:9px 13px; border-radius:999px; }
.hoppy-reputation .hoppy-review-grid { gap:18px; }
.hoppy-reputation .hoppy-review { border:1px solid #dbe5df; box-shadow:0 8px 24px #152d2410; padding:25px; }
.hoppy-reputation .hoppy-review blockquote { font-size:17px; line-height:1.65; margin-block:16px 24px; }
.hoppy-reputation .hoppy-review b { font-size:15px; color:#111e31; }
.hoppy-reputation .hoppy-source-note { font-size:12px; }

.hoppy-promise {
  position:relative; isolation:isolate; overflow:hidden; margin:48px 0 36px;
  border-radius:28px; padding:clamp(24px,4vw,48px);
  background:linear-gradient(130deg,#102b37 0%,#0b5057 57%,#083d48 100%);
  color:white; box-shadow:0 20px 54px #082e3433;
}
.hoppy-promise::after {
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:6px;
  background:linear-gradient(90deg,#20c2c1,#ffab32,#f27620,#8ddd61); z-index:3;
}
.promise-topline { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:28px; }
.promise-logo { width:130px; height:auto; padding:8px; border-radius:12px; background:white; }
.promise-eyebrow { color:#aaf4e7; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.promise-main { display:grid; grid-template-columns:.84fr 1.16fr; gap:34px; align-items:center; }
.promise-content h3 { font-size:clamp(30px,3.6vw,45px); line-height:1.09; letter-spacing:-.035em; color:white; margin:0 0 18px; }
.promise-content h3 span { color:#ffc474; display:block; }
.promise-content p { color:#d6eee9; font-size:17px; line-height:1.6; margin:0 0 24px; }
.promise-content .btn { width:auto; padding:15px 23px; background:#ffab43; color:#152638; font-size:15px; font-weight:900; box-shadow:0 7px 25px #0002; }
.promise-content .btn:hover { background:#ffc16e; }
.promise-graphic { position:relative; padding:24px 12px 12px; min-width:0; text-align:center; isolation:isolate; }
.promise-glow {
  position:absolute; inset:-45px -28px; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse at 28% 42%,#26e2df65,transparent 53%),radial-gradient(ellipse at 78% 65%,#ffa32869,transparent 58%);
  filter:blur(18px); opacity:.65; transform:scale(.97); animation:hoppy-breathe 3.8s ease-in-out infinite;
}
.promise-roo { position:absolute; width:82px; height:auto; top:-20px; right:0; transform:rotate(7deg); filter:drop-shadow(0 8px 12px #0004); }
.promise-number {
  color:#fff; font-size:clamp(48px,6.2vw,82px); font-weight:950; line-height:1; letter-spacing:-.06em;
  text-shadow:0 3px 0 #062f39,0 0 34px #20c5c155; white-space:nowrap;
}
.promise-number span { color:#ffbf63; padding:0 .025em; }
.promise-number-label { font-size:12px; letter-spacing:.14em; font-weight:850; text-transform:uppercase; color:#bcebe3; margin:11px 0 24px; }
.promise-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.promise-tile {
  display:flex; align-items:center; flex-direction:column; min-width:0; border-radius:18px; padding:18px 10px 20px;
  border:1px solid #ffffff8a; box-shadow:inset 0 1px 0 #ffffff45,0 10px 26px #00192235;
}
.promise-tile.parts { background:linear-gradient(145deg,#0bafd0,#057ca1); }
.promise-tile.labor { background:linear-gradient(145deg,#ff9b2f,#ce4c05); }
.promise-tile.maintenance { background:linear-gradient(145deg,#75bc3d,#287724); }
.promise-tile strong { font-size:clamp(43px,5vw,65px); line-height:1; color:#102833; letter-spacing:-.065em; text-shadow:0 1px 0 #ffffff30; }
.promise-tile .years { margin-top:3px; font-size:12px; letter-spacing:.08em; font-weight:850; text-transform:uppercase; color:#102833; }
.promise-tile b { font-size:clamp(13px,1.3vw,16px); line-height:1.2; margin-top:14px; width:100%; color:white; background:#082936b8; padding:8px 2px; border-radius:8px; }
.promise-tile b span { display:block; }
.promise-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-top:30px; padding-top:21px; border-top:1px solid #ffffff35; }
.promise-terms { color:#c4dedb; max-width:78ch; font-size:12px; line-height:1.65; margin:0; }
.promise-terms strong { color:#fff; }
.promise-motion { flex:0 0 auto; min-height:44px; background:#ffffff0d; color:#e8fffa; border:1px solid #ffffff45; border-radius:999px; padding:8px 14px; font-size:12px; font-weight:750; cursor:pointer; }
.promise-motion:disabled { opacity:.75; cursor:default; }
.hoppy-promise.is-paused .promise-glow { animation-play-state:paused; }
@keyframes hoppy-breathe { 0%,100% { opacity:.45; transform:scale(.95); } 50% { opacity:.95; transform:scale(1.08); } }
.hoppy-no-pressure { margin-top:32px; border-top:1px solid #dbe5df; padding-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hoppy-no-pressure b { display:block; color:#075f5b; font-size:15px; margin-bottom:8px; }
.hoppy-no-pressure p { color:#536774; font-size:14px; line-height:1.55; margin:0; }
@media(max-width:850px) {
  .hoppy-review-story,.promise-main { grid-template-columns:1fr; gap:24px; }
  .hoppy-review-story h2 { max-width:18ch; }
  .promise-content { max-width:58ch; }
  .promise-graphic { max-width:560px; width:100%; margin-inline:auto; }
  .promise-number { font-size:clamp(58px,12vw,82px); }
  .promise-tile strong { font-size:58px; }
  .promise-roo { right:6px; }
}
@media(max-width:540px) {
  .hoppy-review-story h2 { font-size:40px; }
  .hoppy-review-story .story-copy { font-size:16px; }
  .hoppy-promise { border-radius:22px; padding:26px 18px; margin-block:34px; }
  .promise-eyebrow { max-width:18ch; font-size:12px; line-height:1.55; letter-spacing:.07em; }
  .promise-logo { width:111px; }
  .promise-main { gap:36px; }
  .promise-content h3 { font-size:34px; }
  .promise-content p { font-size:16px; }
  .promise-graphic { padding:22px 0 0; }
  .promise-number { font-size:60px; }
  .promise-number-label { font-size:12px; letter-spacing:.08em; margin-bottom:18px; }
  .promise-roo { width:60px; top:-25px; right:-2px; }
  .promise-tiles { gap:7px; }
  .promise-tile { padding:15px 5px 17px; border-radius:13px; }
  .promise-tile strong { font-size:45px; }
  .promise-tile b { font-size:12px; }
  .promise-tile .years { font-size:12px; }
  .promise-footer { flex-direction:column; align-items:flex-start; gap:12px; }
  .hoppy-no-pressure { grid-template-columns:1fr; gap:22px; }
  .hero-media-controls { gap:8px; margin-top:24px; }
  .hero-media-controls small { width:100%; margin-top:3px; }
  .hero::before { background:linear-gradient(90deg,#061b21dc,#061b2190); }
  .hero > #heroVideo, .hero .poster { object-position:50% 50%; background-position:50% 50%; }
}
@media(prefers-reduced-motion:reduce) {
  .promise-glow { animation:none; opacity:.6; transform:none; }
}