/* =====================================================================
   SIR'S FIXES (2 Nov 2026). Loaded LAST by index.html, so these rules win.
   Only looks change here: no words, links or photos are changed.
   Nav bar and footer are not touched by this file.
   A. Smaller headings across the homepage (one calm size scale)
   ===================================================================== */

/* A. font sizes. clamp(phone, grows with screen width, biggest) */
#top h1{font-size:clamp(32px,3.9vw,56px)}                         /* was up to 78px */
#top .hprom b{font-size:clamp(24px,2.4vw,34px)}                   /* was up to 43px */
#about .ab8-h{font-size:clamp(32px,3.6vw,52px)}                   /* was up to 81px */
#about .ab8-say{font-size:clamp(17px,1.45vw,21px)}                /* was up to 27px */
#how .hf-title{font-size:clamp(26px,2.6vw,38px)}                  /* was up to 49px */
#how .hcap h3{font-size:clamp(34px,3.9vw,56px)}                   /* was up to 86px */
#show .side h2{font-size:clamp(28px,3vw,42px)}                          /* was up to 52px */
#compare h3,#faq h3{font-size:clamp(22px,2vw,30px)}               /* was up to 37px */
#app h2,#finale h2{font-size:clamp(30px,3.3vw,48px)}              /* was up to 72px */
#stations h2,#locations h2{font-size:clamp(28px,3vw,42px)}        /* was up to 49px */
#faq h2,#franchise h2{font-size:clamp(30px,3.3vw,48px)}           /* was up to 66px */
#stations blockquote{font-size:clamp(17px,1.4vw,20px)}            /* was up to 24px */

/* B. LIGHT SECTIONS: our light colour #F4F0EA, dark text, orange accents.
   The hero 360 and the How it works film stay dark (sir's choice).
   B1. ABOUT = A CREAM SHEET THAT SLIDES UP OVER THE CAR (hiruni's pick).
       About is pulled up by one screen, so it overlaps the last screen of the
       hero while the car is still pinned. It slides up like a sheet of paper
       with rounded top corners; js/sir.js dims the car underneath. */
main{position:relative;z-index:2}
#about.ab8{position:relative;z-index:5;margin-top:-100vh;margin-top:-100svh;background:transparent;color:#191715;isolation:isolate}
/* the cream sheet itself: full screen width, behind the About content */
#about.ab8::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:#F4F0EA;border-radius:32px 32px 0 0;box-shadow:0 -30px 60px -20px rgba(0,0,0,.45)}
#about .chap{color:#6f665d;border-color:rgba(25,23,21,.14)}
#about .ab8-h b span{color:var(--orange-ink)}
@media (max-width:760px){#about.ab8::before{border-radius:22px 22px 0 0}}
@media (prefers-reduced-motion:reduce){#about.ab8{margin-top:0}#about.ab8::before{border-radius:0}}

/* B2. THE APP: light instead of dark brown */
#app.app8{background:radial-gradient(ellipse at 50% 62%,rgba(255,138,51,.16),transparent 62%),#F4F0EA;color:#191715}
#app .chap,#app .chap.light{color:#6f665d;border-color:rgba(25,23,21,.14)}
#app.app8 h2 b{color:var(--orange-ink)}
#app.app8 .sub{color:#5b534b}
#app .aph:not(.real){box-shadow:0 0 0 7px #1d1713,0 50px 90px -30px rgba(120,60,20,.35)}   /* the middle phone (.real) has no frame */
#app .chips8 li{background:rgba(255,255,255,.8);border-color:rgba(25,23,21,.12);color:#191715;box-shadow:0 10px 30px -18px rgba(80,45,15,.4)}
#app .app8-dl .btn.line{color:#191715;border-color:rgba(25,23,21,.4)}

/* C. WHY WASHTRON = LABELS POINTING AT THE CAR (js/sir.js moves the box
   and places each label; js/hero360.js shows one at a time with .now) */
#top .capp.tags{position:absolute;inset:0;z-index:3;pointer-events:none}
#top .capp.tags .label{position:absolute;left:clamp(20px,5vw,64px);top:clamp(96px,15vh,140px);margin:0}
#top .capp.tags .hprom{position:static;height:auto;width:auto;max-width:none;margin:0}
#top .capp.tags .hprom li{position:absolute;inset:auto;width:max-content;max-width:min(300px,80vw);padding:14px 18px;gap:3px;border-radius:14px;
  background:rgba(12,10,8,.55);border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 40px -24px #000;
  transform:translateY(10px);transition:opacity .6s,transform .6s}
#top .capp.tags .hprom li.now{transform:none}
#top .capp.tags .hprom li::after{content:none}
#top .capp.tags .hprom b{font-size:clamp(18px,1.6vw,22px)}
#top .capp.tags .hprom li>span{font-size:13px;margin-top:0;color:rgba(255,255,255,.7)}
.tag-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tag-lines g{opacity:0;transition:opacity .6s}
.tag-lines g.on{opacity:1}
.tag-lines line{stroke:rgba(255,255,255,.55);stroke-width:1}
.tag-lines circle{fill:#ff6a1f}
.tag-lines .halo{fill:rgba(255,106,31,.22);transform-box:fill-box;transform-origin:center;animation:tagpulse 2.2s ease-in-out infinite}
@keyframes tagpulse{50%{transform:scale(1.6);opacity:.3}}
@media (prefers-reduced-motion:reduce){.tag-lines .halo{animation:none}}

/* B3. App Store / Google Play buttons: black store badges with the Apple and
   Play icons (sir's request). Same words, same links; the icon is a picture
   drawn by CSS in front of the words. */
#app .app8-dl .btn.line{display:inline-flex;align-items:center;gap:10px;background:#111;color:#fff;border-color:#111;border-radius:14px;padding:12px 22px 12px 18px}
#app .app8-dl .btn.line:hover{background:#000}
#app .app8-dl .btn.line::before{content:"";width:22px;height:22px;flex:0 0 22px;background:center/contain no-repeat}
#app .app8-dl .btn.line:first-child::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M16.37 12.6c-.02-2.3 1.88-3.4 1.96-3.46-1.07-1.56-2.73-1.78-3.32-1.8-1.41-.14-2.76.83-3.47.83-.72 0-1.82-.81-2.99-.79-1.54.02-2.96.9-3.75 2.27-1.6 2.78-.41 6.89 1.15 9.14.76 1.1 1.67 2.34 2.86 2.3 1.15-.05 1.58-.74 2.97-.74 1.38 0 1.77.74 2.98.72 1.24-.02 2.02-1.12 2.77-2.23.87-1.28 1.23-2.52 1.25-2.58-.03-.01-2.39-.92-2.41-3.66zM14.1 5.86c.63-.77 1.06-1.83.94-2.89-.91.04-2.02.61-2.67 1.37-.58.67-1.1 1.76-.96 2.8 1.02.08 2.06-.52 2.69-1.28z'/%3E%3C/svg%3E")}
#app .app8-dl .btn.line:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2334A853' d='M3.6 2.3 13.5 12l-9.9 9.7c-.4-.2-.6-.6-.6-1.1V3.4c0-.5.2-.9.6-1.1z'/%3E%3Cpath fill='%23FBBC04' d='M16.8 15.3 13.5 12l3.3-3.3 3.8 2.2c.9.5.9 1.7 0 2.2z'/%3E%3Cpath fill='%23EA4335' d='M13.5 12 3.6 21.7c.3.2.8.2 1.2 0l12-6.4z'/%3E%3Cpath fill='%234285F4' d='M13.5 12 16.8 8.7l-12-6.4c-.4-.2-.9-.2-1.2 0z'/%3E%3C/svg%3E")}

/* D. the hero is a little longer, so all 4 labels (the last one is
      "Smarter water use") get time on screen before the About sheet slides up */
#top.h360{height:560vh}
@media (prefers-reduced-motion:reduce){#top.h360{height:440vh}}