/* Just Glass, to the brand book: page is the ground, navy ink, teal as the brand colour, cyan and coral as fills only.
   One family, Plus Jakarta Sans, at 500, 700 and 800. No gradients and no shadows except the hero wash over the photo. */
:root{
  --navy:#06182a;--teal:#0b5c78;--slate:#3f5260;--page:#f7fbfc;--pale:#eef8fb;--ice:#d6ebf1;--cyan:#00b4d8;
  --coral:#ff5a36;--coral-ink:#e8461f;--sun:#ffd36b;--sky:#cdeef6;--dome:#b8e2ee;--mist:#8fc6d5;--leaf-deep:#22a585;--white:#fff;
  --font:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --display:800 clamp(40px,5.2vw,60px)/1.06 var(--font);--title:800 clamp(28px,3vw,34px)/1.1 var(--font);
  --body:500 17px/1.55 var(--font);--small:500 14px/1.45 var(--font);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--page);color:var(--navy);font:var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.w{max-width:1120px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.display{font:var(--display)}.display .l2{display:block;color:var(--teal)}
.title{font:var(--title)}.title .l2{color:var(--teal)}
.small{font:var(--small);color:var(--slate)}
.lede{margin-top:10px;max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--teal);color:var(--white);border:2px solid var(--teal);border-radius:999px;padding:14px 24px;font:700 17px var(--font);text-decoration:none;cursor:pointer;transition:transform .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);background:#0a5069}
.btn.ghost{background:var(--white);color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--pale)}
.btn[disabled]{opacity:.7;cursor:default;transform:none}
.linkbtn{background:none;border:0;color:var(--slate);font:700 15px var(--font);cursor:pointer;text-decoration:underline;padding:0}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);font:800 24px/1 var(--font);letter-spacing:-.02em}
.brand svg{width:36px;height:36px}
.nav-r{display:flex;align-items:center;gap:22px}
.tel{color:var(--ice);font-weight:700;text-decoration:none}
.nav .btn{background:var(--cyan);border-color:var(--cyan);color:var(--navy);padding:12px 20px}
.nav .btn:hover{background:#1cc3e6}

/* ---------- hero: the Wasatch photo behind a navy to teal wash ---------- */
.hero{position:relative;background:var(--navy);color:var(--white);overflow:hidden;padding-bottom:60px;border-bottom:3px solid var(--navy)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 35%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,42,.96) 0%,rgba(11,92,120,.84) 42%,rgba(11,92,120,.28) 78%,rgba(6,24,42,.5) 100%),linear-gradient(0deg,rgba(6,24,42,.92) 0%,rgba(6,24,42,0) 38%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding-top:20px}
.hero .display .l2{color:var(--cyan)}
.hero .where{color:var(--cyan);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.hero-copy p{margin:20px 0 26px;max-width:46ch;color:var(--ice);font-size:19px}
.hero-copy p b{color:var(--white);font-weight:700}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .cta .small{max-width:26ch;color:var(--ice)}
.hero .cta .btn{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.hero .cta .btn:hover{background:#1cc3e6}

/* ---------- quote card ---------- */
.card{background:var(--white);border:2px solid var(--navy);border-radius:24px;padding:28px;position:relative;color:var(--navy)}
.card p{color:var(--navy)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.card .kick{font:700 13px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.card .ask{font:800 26px/1.15 var(--font)}
.card .say{color:var(--slate);margin:6px 0 18px}
.card .small{color:var(--slate)}
.cheer{color:var(--teal);font-weight:700;margin-bottom:10px;animation:cheerin .5s cubic-bezier(.34,1.56,.64,1) both}
.card .cheer{color:var(--teal)}
@keyframes cheerin{0%{opacity:0;transform:translateY(-8px) scale(.96)}100%{opacity:1;transform:none}}
.q{animation:slide .32s ease both}
@keyframes slide{0%{opacity:0;transform:translateX(18px)}100%{opacity:1;transform:none}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{position:relative;border:2px solid var(--navy);border-radius:16px;padding:14px 14px 16px;background:var(--page);font:700 15px/1.25 var(--font);color:var(--navy);display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.tile svg{width:58px;height:58px;overflow:visible}
.tile svg *{transform-box:fill-box;transform-origin:center}
.tile:hover{transform:translateY(-4px);border-color:var(--teal);background:var(--white)}
.tile:active{transform:scale(.96)}
.tile[aria-pressed="true"]{background:var(--ice);border-color:var(--teal)}
.tile[aria-pressed="true"]::before{content:"";position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:var(--leaf-deep);border:2px solid var(--navy);animation:pop .35s cubic-bezier(.34,1.56,.64,1) both}
.tile[aria-pressed="true"]::after{content:"";position:absolute;top:-3px;right:-2px;width:7px;height:11px;border:solid var(--white);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tile.pop{animation:pop .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.92)}100%{opacity:1;transform:none}}
.tiles.pills{grid-template-columns:repeat(3,1fr)}
.pills .tile{font-size:24px;font-weight:800;gap:2px;align-items:center;text-align:center;white-space:nowrap;padding-left:8px;padding-right:8px}
.pills .tile .small{font-weight:500}
.navq{display:flex;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap}
.navq .btn{margin-left:auto;padding:12px 22px}
.navq.two-btn{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.navq.two-btn .btn{margin:0}
.steps{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:14px}
.bar{flex:1;height:8px;border:2px solid var(--navy);border-radius:99px;position:relative;overflow:hidden;background:var(--white)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:18%;background:var(--cyan);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.f{display:block;font:700 13px var(--font);color:var(--slate);margin-top:12px;min-width:0}
.f input,.f textarea{display:block;width:100%;margin-top:6px;border:2px solid var(--navy);border-radius:12px;padding:12px 14px;font:500 17px var(--font);color:var(--navy);background:var(--white)}
.f input:focus,.f textarea:focus{outline:3px solid var(--cyan);outline-offset:1px}
.f input[readonly]{background:var(--pale)}
.f.bad input{border-color:var(--coral-ink)}
.three-f{display:grid;grid-template-columns:1fr 70px 110px;gap:12px}.two-f,.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three-f>*,.two-f>*,.two>*{min-width:0}
.err{color:var(--coral-ink);font:700 14px var(--font);margin-top:10px;min-height:1em}
.card .err{color:var(--coral-ink)}
.drop{display:flex;align-items:center;gap:14px;border:2px dashed var(--teal);border-radius:16px;padding:10px 14px;background:var(--pale);cursor:pointer;margin:4px 0 10px}
.drop svg{width:44px;height:44px;flex:none}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:2px solid var(--navy)}
.size{display:flex;align-items:flex-end;gap:12px;margin:6px 0 8px}.size .f{flex:1}.size .x{padding-bottom:14px;color:var(--slate);font-weight:700}
.done .ok{display:inline-flex;width:52px;height:52px;border-radius:50%;background:var(--leaf-deep);border:2px solid var(--navy);align-items:center;justify-content:center;margin-bottom:14px}.done .ok svg{width:28px;height:28px}
.done .nudge{margin-top:14px}

/* tile icons move on their own: fog drifts and cracks grow, the slider opens, the screen rides its track, the flap swings for the dog, tint rolls across, the dots type */
.i-fog{animation:fogdrift 5.2s ease-in-out infinite}
.i-cracks path{stroke-dasharray:1;stroke-dashoffset:1;animation:crack 5.2s ease-out infinite}
.i-cracks path:nth-child(2){animation-delay:.12s}.i-cracks path:nth-child(3){animation-delay:.24s}.i-cracks path:nth-child(4){animation-delay:.36s}.i-cracks path:nth-child(5){animation-delay:.48s}
.i-slider{animation:slideopen 3.6s ease-in-out infinite}
.i-screen{animation:screenup 4s ease-in-out infinite}
.tile svg .i-film{transform-origin:left center;animation:film 4.2s ease-in-out infinite}
.i-edge{animation:edge 4.2s ease-in-out infinite}
.i-flap{transform-origin:top center;animation:swing 2.4s ease-in-out infinite}
.i-dog{animation:peek 2.4s ease-in-out infinite}
.i-sun{animation:breathe 3s ease-in-out infinite}
.i-dots circle{animation:typing 1.4s ease-in-out infinite}
.i-dots circle:nth-child(2){animation-delay:.2s}.i-dots circle:nth-child(3){animation-delay:.4s}
.i-spark{animation:twinkle 2.2s ease-in-out infinite}
@keyframes fogdrift{0%,100%{transform:translate(-3px,0)}50%{transform:translate(4px,-3px)}}
@keyframes crack{0%,12%{stroke-dashoffset:1;opacity:1}45%,80%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes slideopen{0%,20%{transform:translateX(0)}50%,70%{transform:translateX(13px)}100%{transform:translateX(0)}}
@keyframes screenup{0%,25%{transform:translateY(0)}55%,75%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes film{0%,15%{transform:scaleX(0)}60%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes edge{0%,15%{transform:translateX(0)}60%,80%{transform:translateX(37px)}100%{transform:translateX(0)}}
@keyframes swing{0%,15%,100%{transform:rotateX(0)}45%,70%{transform:rotateX(-70deg)}}
@keyframes peek{0%,15%,100%{transform:translateY(16px);opacity:0}45%,70%{transform:translateY(0);opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(20deg);opacity:1}}

/* ---------- sections ---------- */
.sec{padding-top:72px;padding-bottom:72px}
.sec.tight{padding-top:56px;padding-bottom:0}
.sec.pale{background:var(--pale);border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
/* the stat */
.stat-g{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.stat .lead{font-size:28px;font-weight:700;color:var(--slate)}
.stat .num{font:800 clamp(88px,10vw,124px)/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:12px}
.stat .num em{font-style:normal;color:var(--coral-ink);font-size:.52em;transition:opacity .35s ease .5s,transform .35s cubic-bezier(.34,1.56,.64,1) .5s}
.stat.js:not(.seen) .num em{opacity:0;transform:translateY(10px)}
.stat .than{font-size:28px;font-weight:700;color:var(--slate);margin-top:4px}
.stat .src{margin-top:18px;max-width:40ch}
.tags{display:flex;flex-direction:column;gap:22px}
.tag label{display:block;font:700 15px var(--font);margin-bottom:8px}
.tag .t{height:58px;border:2px solid var(--navy);border-radius:12px 29px 29px 12px;position:relative;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.tag.jg .t{width:30%}.tag.new .t{width:100%}
.js:not(.seen) .tag .t{width:0}
.tag .t::after{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;border:2px solid var(--navy);border-radius:50%;background:var(--page);transform:translateY(-50%)}
.tag.jg .t{background:var(--cyan);transition-delay:.15s}
.tag.new .t{background:var(--coral);transition-delay:.35s}
/* three steps */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.step{border:2px solid var(--navy);border-radius:20px;padding:26px;background:var(--white);transition:transform .2s ease,border-color .2s ease,opacity .5s ease}
.js:not(.seen) .step{opacity:0;transform:translateY(16px)}
.seen .step:nth-child(2){transition-delay:.1s}.seen .step:nth-child(3){transition-delay:.2s}
.step:hover{transform:translateY(-5px);border-color:var(--teal);transition-delay:0s}
.step svg{width:64px;height:64px;margin-bottom:16px;overflow:visible}
.step svg *{transform-box:fill-box}
.step h3{font:800 26px/1.1 var(--font);margin-bottom:8px}
.step p{color:var(--slate)}
.step .flash{opacity:0}.step:hover .flash{animation:blink .5s ease}
.step .tape{transform-origin:left center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.step:hover .tape{transform:scaleX(1.5)}
.step .glint{transform:translateX(-28px);opacity:0;transition:transform .55s ease,opacity .2s}.step:hover .glint{transform:translateX(26px);opacity:1}
@keyframes blink{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
/* before and after: the photo wipe */
.ba{position:relative;margin:36px 0 0;border:3px solid var(--navy);border-radius:20px;overflow:hidden;aspect-ratio:1600/826;background:var(--ice)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba.wipe .fog{animation:wipe 7s ease-in-out infinite}
.ba .line{position:absolute;top:0;bottom:0;width:4px;background:var(--cyan);left:0;opacity:0}
.ba.wipe .line{animation:line 7s ease-in-out infinite}
.ba .lbl{position:absolute;bottom:14px;padding:6px 14px;border:2px solid var(--navy);border-radius:999px;font:700 14px var(--font);background:var(--white)}
.ba .lbl.l{left:14px}.ba .lbl.r{right:14px;background:var(--cyan);color:var(--white)}
@keyframes wipe{0%,22%{clip-path:inset(0 0 0 0)}48%,78%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
@keyframes line{0%,22%{left:0;opacity:1}48%{left:calc(100% - 4px);opacity:1}52%,78%{opacity:0;left:calc(100% - 4px)}100%{left:0;opacity:1}}
/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin-top:36px}
.faq h3{font:800 19px/1.3 var(--font);margin-bottom:6px}
.faq p{color:var(--slate)}
/* cities */
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cities a{border:2px solid var(--navy);border-radius:999px;padding:6px 14px;font:700 14px var(--font);color:var(--navy);text-decoration:none;background:var(--white)}
.cities a[aria-current]{background:var(--ice)}
/* end card */
.end{padding-top:80px;padding-bottom:56px;text-align:center;border-top:2px solid var(--navy)}
.end .mark{display:block;width:72px;height:72px;margin:0 auto 18px}.end .mark svg{width:72px;height:72px}
.end .wm{font:800 48px/1 var(--font);letter-spacing:-.03em}
.end .url{color:var(--teal);font-weight:700;font-size:22px;margin-top:8px}
.end .ph{color:var(--slate);font-size:18px;margin-top:4px}.end .ph a{text-decoration:none}
.end .mini{max-width:420px;width:100%;height:auto;margin:34px auto 0;display:block}
.end .small{margin-top:28px}
.end .credit{margin-top:8px;font-size:12px}.end .credit a{color:var(--slate)}
.mbar{display:none}

/* ---------- chat launcher and sheet ---------- */
.dock{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.chat-now{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--navy);cursor:pointer;background:var(--navy);color:var(--white);border-radius:999px;padding:14px 22px 14px 18px;font:800 1rem var(--font)}
.chat-now small{font:600 .78rem var(--font);opacity:.75;margin-left:2px}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--leaf-deep);box-shadow:0 0 0 0 rgba(34,165,133,.6);animation:ping 1.8s infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,165,133,.6)}70%{box-shadow:0 0 0 10px rgba(34,165,133,0)}100%{box-shadow:0 0 0 0 rgba(34,165,133,0)}}
.chip-chat{display:none}
.chat{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:flex-end}
.chat-scrim{position:absolute;inset:0;background:rgba(6,24,42,.35)}
.chat-panel{position:relative;width:min(420px,100%);max-height:min(720px,calc(100svh - 40px));margin:0 max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 0;background:var(--white);border:2px solid var(--navy);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;animation:sheet .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:2px solid var(--navy)}
.chat-head .av{width:40px;height:40px;border-radius:12px;background:var(--teal);display:grid;place-items:center}
.chat-head .av i{width:16px;height:16px;border:2.5px solid var(--ice);border-radius:3px}
.chat-head b{display:block;font:800 1.05rem var(--font)}
.chat-head small{display:flex;align-items:center;gap:6px;color:var(--slate);font-weight:600;font-size:.82rem}
.chat-head .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf-deep)}
.chat-x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--navy);background:var(--white);font:600 20px/1 var(--font);color:var(--navy);cursor:pointer}
.chat-body{padding:16px 18px 18px;overflow-y:auto;display:grid;gap:14px;-webkit-overflow-scrolling:touch}
.bub{max-width:85%;padding:12px 14px;border-radius:18px;font-size:.98rem;line-height:1.4}
.bub.them{background:var(--pale);border-bottom-left-radius:6px;justify-self:start}
.bub.me{background:var(--navy);color:var(--white);border-bottom-right-radius:6px;justify-self:end}
.chat-form{display:grid;gap:0}
.chat-form .f textarea{resize:none}
.chat-form .btn{width:100%;margin-top:14px}
.consent{font-size:.76rem;color:var(--slate);text-align:center;line-height:1.4;margin-top:10px}
.chat-done{display:grid;gap:12px}
.draftbar{position:fixed;left:12px;bottom:12px;z-index:70;display:flex;gap:10px;align-items:center;background:#fff7d6;border:1px solid #e6d18a;border-radius:12px;padding:8px 12px;font:600 .8rem var(--font);color:#5b4a0f}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:28px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(6,24,42,.8) 0%,rgba(11,92,120,.9) 45%,var(--navy) 100%)}
  .stat-g,.three,.faq{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav .btn{display:none}
  .hero{padding-bottom:36px}.hero-copy p{font-size:17px}
  .card{padding:20px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .pills .tile{font-size:20px}
  .sec{padding-top:52px;padding-bottom:52px}
  .end .wm{font-size:40px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--white);border-top:2px solid var(--navy)}
  .mbar .btn{flex:1;min-height:52px}
  .mbar.hide{display:none}
  .dock{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .dock.hide-m{display:none}
  .chat-now{justify-content:center}
  .chip-chat{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--navy);border-radius:999px;background:var(--navy);color:var(--white);font:800 .78rem var(--font);padding:6px 12px;cursor:pointer}
  .chip-chat[hidden]{display:none}
  .chat{justify-content:stretch}
  .chat-panel{width:100%;margin:0;border-radius:24px 24px 0 0;border-bottom:0;max-height:calc(100svh - 24px);padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (max-width:480px){.three-f{grid-template-columns:1fr 60px 90px}.two-f,.two{grid-template-columns:1fr}}