/* Pro Shield Roofing — Concept 3 "Free Quote" | Scalus concept design system
   Conversion first layout. Palette taken from the live proshieldroofing.com.au CSS.

   Rebuilt 24 Aug 2026:
     · the house LIQUID GLASS DOCK at the foot of every screen (iOS 26 tab bar),
     · liquid glass carried across every form surface on the page,
     · a real menu with a glass drawer on phones,
     · a full results wall of draggable before and after sliders,
     · a much longer home page: process, warning signs, FAQ, areas, gallery.
   ========================================================================= */

:root{
  --nav0:#06192F;
  --navy:#0B2649;
  --navy2:#123566;
  --blue:#29ACE0;
  --blue2:#3569B4;
  --blue3:#42B3EA;
  --red:#EC162C;
  --ink:#14161A;
  --body:#495666;
  --paper:#F2F6FA;
  --line:#DFE7F0;
  --white:#fff;
  --hd:'Montserrat',system-ui,sans-serif;
  --bd:'Inter',system-ui,sans-serif;
  --wrap:1220px;
  --r:14px;
  --sh:0 20px 48px rgba(6,25,47,.14);
  --dockh:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--bd);color:var(--body);background:var(--white);font-size:17px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--hd);color:var(--navy);margin:0;line-height:1.13;letter-spacing:-.022em}
h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:900;letter-spacing:-.034em}
h2{font-size:clamp(1.7rem,3.2vw,2.55rem);font-weight:800}
h3{font-size:1.18rem;font-weight:800}
p{margin:0 0 1rem}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
body{padding-bottom:calc(var(--dockh) + env(safe-area-inset-bottom))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--hd);font-weight:800;font-size:.95rem;padding:14px 26px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .22s,background .2s,color .2s;min-height:52px;text-align:center}
.btn-p{background:var(--blue);color:#052033;box-shadow:0 12px 28px rgba(41,172,224,.36)}
.btn-p:hover{background:#43BCEC;transform:translateY(-2px);box-shadow:0 18px 38px rgba(41,172,224,.44)}
.btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-g:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-o:hover{border-color:var(--navy);background:var(--paper)}
.btn-lg{padding:17px 32px;font-size:1rem;min-height:58px}
.btn-sm{padding:11px 20px;min-height:46px;font-size:.9rem}
.btn-full{width:100%}

/* ===========================================================================
   LIQUID GLASS PRIMITIVES

   One recipe, reused by the header, the drawer, the quote tool, the chat panel
   and the dock. Four things make it read as glass rather than a grey box:
   a blur that also lifts saturation AND brightness, a masked rotating rim, a
   specular hotspot that moves, and an inner top highlight.

   TRAP: a TRANSFORMED ANCESTOR silently kills backdrop-filter in Chrome and
   Safari. The filter still computes so devtools looks fine, but nothing behind
   is ever sampled. Never put a transform on a wrapper around one of these.
   =========================================================================== */
@property --gl-rim{syntax:'<angle>';inherits:false;initial-value:200deg}

.glass{position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(12,32,58,.62),rgba(4,14,27,.78));
  -webkit-backdrop-filter:blur(28px) saturate(190%) brightness(1.22);
  backdrop-filter:blur(28px) saturate(190%) brightness(1.22);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.66),0 3px 12px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.05)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;
  pointer-events:none;
  background:conic-gradient(from var(--gl-rim),
    rgba(255,255,255,.62),rgba(255,255,255,.05) 18%,
    rgba(41,172,224,.5) 38%,rgba(255,255,255,.04) 55%,
    rgba(255,255,255,.5) 76%,rgba(255,255,255,.08) 90%,rgba(255,255,255,.62));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:glRim 18s linear infinite}
@keyframes glRim{to{--gl-rim:560deg}}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(220px 130px at var(--gl-x,24%) var(--gl-y,-6%),
    rgba(255,255,255,.22),rgba(255,255,255,.05) 46%,rgba(255,255,255,0) 74%)}
.glass > *{position:relative;z-index:3}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:linear-gradient(180deg,#0d2745,#06192F)}
}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(6,25,47,.72);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.1);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.1);
  border-bottom:1px solid rgba(255,255,255,.09);transition:background .3s,border-color .3s}
.hd.solid{background:rgba(6,25,47,.94);border-bottom-color:rgba(255,255,255,.14)}
.hd-in{display:flex;align-items:center;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:44px;height:auto}
.brand-tx{display:flex;flex-direction:column;line-height:1;font-family:var(--hd)}
.brand-tx b{color:#fff;font-size:1.04rem;font-weight:900;letter-spacing:.03em}
.brand-tx i{color:var(--blue);font-size:.7rem;font-style:normal;font-weight:700;letter-spacing:.32em;text-transform:uppercase;margin-top:3px}

/* ---------- menu ---------- */
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{position:relative;font-family:var(--hd);font-weight:700;font-size:.92rem;color:#C7DCEE;
  padding:10px 14px;border-radius:9px;transition:color .2s,background .2s}
.nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:#fff}
.hd-cta{display:flex;align-items:center;gap:10px;flex:none}
.hd-note{color:#9FC2E0;font-size:.85rem;font-weight:500;white-space:nowrap}
.burger{display:none;width:48px;height:48px;border:1px solid rgba(255,255,255,.2);border-radius:12px;
  background:rgba(255,255,255,.06);cursor:pointer;padding:0;place-items:center;flex:none}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;position:relative;transition:.26s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:#fff;transition:.26s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}

/* the drawer. Glass, so no transform on its wrapper — it animates on opacity
   and clip instead of sliding a transformed parent. */
.drawer{position:fixed;inset:0;z-index:59;display:none}
.drawer.on{display:block}
.drawer-sc{position:absolute;inset:0;background:rgba(3,11,22,.6);opacity:0;transition:opacity .3s}
.drawer.in .drawer-sc{opacity:1}
.drawer-pn{position:absolute;top:76px;left:12px;right:12px;border-radius:22px;overflow:hidden;
  padding:14px 14px 18px;opacity:0;clip-path:inset(0 0 100% 0 round 22px);
  transition:opacity .3s ease,clip-path .42s cubic-bezier(.2,.8,.2,1)}
.drawer.in .drawer-pn{opacity:1;clip-path:inset(0 0 0 0 round 22px)}
.drawer-pn a.dl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--hd);font-weight:800;font-size:1.05rem;color:#fff;
  padding:15px 14px;border-radius:13px;min-height:56px;transition:background .2s}
.drawer-pn a.dl:hover,.drawer-pn a.dl:focus-visible{background:rgba(255,255,255,.1)}
.drawer-pn a.dl i{font-style:normal;color:#7FB6DC;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.drawer-pn hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:12px 6px}
.drawer-btns{display:grid;gap:10px;padding:4px 4px 0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--nav0);overflow:hidden;padding:clamp(44px,5.4vw,86px) 0 clamp(56px,6vw,96px)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,25,47,.93) 0%,rgba(6,25,47,.8) 34%,rgba(6,25,47,.4) 66%,rgba(6,25,47,.3) 100%),
    linear-gradient(180deg,rgba(6,25,47,.5),rgba(6,25,47,0) 30%)}
.hero-glow{position:absolute;left:-8%;top:-30%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(41,172,224,.24),rgba(41,172,224,0) 70%);
  animation:heroGlow 14s ease-in-out infinite alternate}
@keyframes heroGlow{to{transform:translate3d(14%,10%,0) scale(1.15)}}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,60px);row-gap:26px;align-items:start}
.hero-copy{grid-column:1;grid-row:1}
.hero-extra{grid-column:1;grid-row:2}
.qz{grid-column:2;grid-row:1 / span 2}
.hero h1{color:#fff;margin-bottom:20px;padding-top:8px}
.hero h1.hero-stack{letter-spacing:-.008em;line-height:1.02;font-size:clamp(2.6rem,5.6vw,4.4rem)}
.hero h1.hero-stack .word{display:block}

.hero h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.1em;border-radius:99px;
  background:linear-gradient(90deg,rgba(41,172,224,.9),rgba(41,172,224,.15));transform:scaleX(0);transform-origin:0 50%;
  animation:underDraw .9s cubic-bezier(.2,.8,.2,1) 1.15s forwards}
@keyframes underDraw{to{transform:scaleX(1)}}
.hero .lede{color:#CFE2F3;font-size:clamp(1.02rem,1.35vw,1.16rem);max-width:560px;margin-bottom:28px}
.hero-ticks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.hero-ticks li{position:relative;padding-left:30px;color:#DCEAF7;font-size:.97rem}
.hero-ticks li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:8px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.hero-alt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.hero-alt span{color:#9FC2E0;font-size:.92rem}
.hero-alt a{font-family:var(--hd);font-weight:900;color:#fff;font-size:1.24rem}
.hero-alt a:hover{color:var(--blue)}

/* the counter strip under the headline */
.hstats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.hstat{flex:1 1 128px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hstat b{display:block;font-family:var(--hd);font-weight:900;font-size:1.55rem;color:#fff;line-height:1;letter-spacing:-.02em}
.hstat span{display:block;margin-top:6px;font-size:.78rem;color:#9FC2E0;line-height:1.35}

/* ---------- qualifier, in glass ---------- */
.qz{border-radius:22px;overflow:hidden;scroll-margin-top:96px}
.qz-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 24px 2px}
.qz-brand img{width:clamp(132px,13vw,168px);height:auto;flex:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.qz-brand span{display:block;font-family:var(--hd);font-weight:800;font-size:.72rem;
  letter-spacing:.17em;color:#9FC2E0}
.qz-hd{padding:16px 24px 0}
.qz-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.qz-bar i{display:block;height:100%;width:25%;border-radius:99px;background:linear-gradient(90deg,var(--blue2),var(--blue));transition:width .42s cubic-bezier(.3,.8,.3,1)}
.qz-step{font-family:var(--hd);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#8FB6D8;margin:12px 0 0}
.qz-step b{color:#fff}
.qz-body{padding:18px 24px 6px;position:relative}
.qs{display:none;animation:qsin .4s ease}
.qs.is-on{display:block}
@keyframes qsin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.qs h2{font-size:clamp(1.22rem,2vw,1.5rem);margin-bottom:16px;color:#fff}
.opts{display:grid;gap:9px}
.opts-3{grid-template-columns:repeat(3,1fr)}
.opt{
  display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:13px;padding:14px 17px;
  cursor:pointer;font-family:var(--bd);transition:.18s;min-height:56px;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
.opt b{font-family:var(--hd);font-weight:800;color:#fff;font-size:.94rem;text-transform:uppercase;letter-spacing:.05em}
.opt span{font-size:.85rem;color:#A9C8E2;line-height:1.45}
.opt:hover{border-color:var(--blue);background:rgba(41,172,224,.18);transform:translateY(-2px)}
.opt.sel{border-color:var(--blue);background:rgba(41,172,224,.26);box-shadow:0 0 0 3px rgba(41,172,224,.18)}
.opt-c{align-items:center;text-align:center;justify-content:center;min-height:70px}
.qz-hint{font-size:.83rem;color:#8FB6D8;margin:14px 0 0;text-align:center}
.qz-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.14);margin-top:14px}
.qz-back{background:none;border:0;font-family:var(--hd);font-weight:700;color:#8FB6D8;font-size:.9rem;cursor:pointer;padding:10px 6px;min-height:44px}
.qz-back:hover{color:#fff}
.qz-trust{font-size:.79rem;color:#8FB6D8;margin-left:auto}
.qz-trust b{color:rgba(255,255,255,.3);margin:0 3px}
.qs form label{display:block;font-family:var(--hd);font-weight:700;font-size:.8rem;color:#DCEAF7;margin-bottom:13px;letter-spacing:.02em}
.fr{display:grid;gap:0 12px}
.fr2{grid-template-columns:1fr 1fr}
.qs input,.qs textarea,.qs select{width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid rgba(255,255,255,.2);border-radius:11px;
  font-family:var(--bd);font-size:1rem;color:#fff;min-height:50px;background:rgba(255,255,255,.09);
  transition:border-color .18s,box-shadow .18s,background .18s}
.qs input::placeholder,.qs textarea::placeholder{color:#7FA3C2}
.qs textarea{min-height:84px;resize:vertical}
.qs input:focus,.qs textarea:focus{outline:0;border-color:var(--blue);background:rgba(255,255,255,.14);box-shadow:0 0 0 4px rgba(41,172,224,.22)}
.qz-fine{font-size:.74rem;color:#87ABC9;text-align:center;margin:12px 0 0}
.qs-done{text-align:center;padding:12px 0 6px}
.qs-done h2{color:#fff}
.qs-done p{color:#C4DBEE}
.done-ic{width:62px;height:62px;border-radius:50%;background:rgba(72,214,139,.18);border:1px solid rgba(72,214,139,.45);color:#63E3A2;display:grid;place-items:center;font-size:1.9rem;margin:0 auto 16px}
.done-sum{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:16px 18px;text-align:left;font-size:.9rem;margin:18px 0;display:grid;gap:7px}
.done-sum div{display:flex;justify-content:space-between;gap:14px}
.done-sum i{font-style:normal;color:#8FB6D8}
.done-sum b{font-family:var(--hd);color:#fff;text-align:right}
.qs-done .btn-o{color:#fff;border-color:rgba(255,255,255,.4)}
.qs-done .btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- trust bar ---------- */
.tbar{background:var(--blue);color:#052033}
.tbar-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;padding:14px 22px;font-family:var(--hd);font-weight:700;font-size:.88rem;text-align:center}
.tbar b{color:rgba(5,32,51,.4)}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,7vw,96px) 0}
.sec-tint{background:var(--paper)}
.sec-dark{background:var(--navy);color:#BDD4E9}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-hd{max-width:760px;margin:0 auto clamp(32px,4vw,50px);text-align:center}
.kicker{font-family:var(--hd);font-weight:800;font-size:.77rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue2);margin-bottom:12px}
.kicker.light{color:var(--blue)}
.sec-hd h2{margin-bottom:12px}
.sec-hd .sub{font-size:1.03rem;margin:0}
.sec-dark .sec-hd .sub{color:#B6CFE6}

/* ---------- services ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.svc-im{position:relative;overflow:hidden}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 46%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.svc:hover img{transform:scale(1.06)}
.svc-tag{position:absolute;left:12px;top:12px;background:rgba(6,25,47,.86);color:#BFE4F8;font-family:var(--hd);font-weight:800;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:99px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.svc-in{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column}
.svc h3{margin-bottom:8px}
.svc p{font-size:.92rem;margin:0 0 14px;line-height:1.6}
.svc ul{list-style:none;padding:0;margin:auto 0 0;display:grid;gap:6px}
.svc li{position:relative;padding-left:20px;font-size:.85rem;color:#6B7B8D}
.svc li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

/* ---------- before and after sliders ---------- */
.ba-lead{max-width:760px;margin:0 auto clamp(30px,4vw,46px);text-align:center}
.bas{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ba{border-radius:var(--r);overflow:hidden;background:#081F38;box-shadow:0 22px 50px rgba(0,0,0,.36)}
.ba-stage{position:relative;aspect-ratio:4/3;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-aft{clip-path:inset(0 0 0 var(--p,50%))}
.ba-hd{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:12px;pointer-events:none}
.ba-lb{font-family:var(--hd);font-weight:800;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:99px;background:rgba(6,25,47,.82);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ba-lb.aft{background:rgba(41,172,224,.92);color:#052033}
.ba-hand{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;
  background:rgba(255,255,255,.92);box-shadow:0 0 18px rgba(0,0,0,.5);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;gap:0;
  background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px) saturate(180%) brightness(1.3);
  backdrop-filter:blur(14px) saturate(180%) brightness(1.3);
  border:1.5px solid rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.6)}
.ba-knob svg{width:26px;height:26px;color:#fff}
.ba-stage:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.ba-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px}
.ba-ft b{font-family:var(--hd);font-weight:800;color:#fff;font-size:.98rem;display:block}
.ba-ft span{display:block;font-size:.82rem;color:#8FB6D8;margin-top:2px}
.ba-ft i{font-style:normal;flex:none;font-family:var(--hd);font-weight:800;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:#BFE4F8;border:1px solid rgba(41,172,224,.45);background:rgba(41,172,224,.15);
  padding:6px 11px;border-radius:99px}
.ba-note{max-width:760px;margin:28px auto 0;text-align:center;font-size:.83rem;color:#8FB6D8;line-height:1.55}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:p}
.proc div{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 22px 24px;transition:transform .22s,box-shadow .22s}
.proc div:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.proc div::before{counter-increment:p;content:counter(p,decimal-leading-zero);position:absolute;right:18px;top:14px;
  font-family:var(--hd);font-weight:900;font-size:2.3rem;color:rgba(41,172,224,.16);line-height:1}
.proc b{display:block;font-family:var(--hd);color:var(--navy);font-size:1.05rem;margin-bottom:8px}
.proc span{font-size:.92rem;line-height:1.6;display:block}

/* ---------- warning signs ---------- */
.signs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.signs-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.signs-list li{position:relative;padding:15px 18px 15px 52px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);font-size:.95rem;color:#D6E6F4}
.signs-list li b{display:block;font-family:var(--hd);color:#fff;font-size:1rem;margin-bottom:2px}
.signs-list li::before{content:"!";position:absolute;left:17px;top:16px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--hd);font-weight:900;font-size:.8rem;
  background:rgba(236,22,44,.22);color:#FF8A96;border:1px solid rgba(236,22,44,.45)}
.signs-media{border-radius:var(--r);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.42)}
.signs-media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- proof ---------- */
.proof-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,58px);align-items:center}
.ticks{list-style:none;padding:0;margin:20px 0 26px}
.ticks li{position:relative;padding-left:30px;margin-bottom:10px;font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:8px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}

/* ---------- why ---------- */
.whys{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.whys div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;transition:transform .22s,box-shadow .22s}
.whys div:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.whys b{display:block;font-family:var(--hd);color:var(--navy);font-size:1.03rem;margin-bottom:7px}
.whys span{font-size:.93rem;line-height:1.6}
.mats{text-align:center;margin-top:44px}
.mats-lb{font-family:var(--hd);font-weight:700;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:#8296AC;margin-bottom:18px}
.mats-row{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}
.mats-row img{height:58px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:.26s}
.mats-row img:hover{filter:none;opacity:1}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px}
.gal figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#0B2649}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-family:var(--hd);
  font-weight:700;font-size:.82rem;color:#fff;
  background:linear-gradient(180deg,rgba(6,25,47,0),rgba(6,25,47,.88))}
.gal .w2{grid-column:span 2}
.gal .h2{grid-row:span 2}

/* ---------- review ---------- */
.grate{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 30px}
.grate .glogo{width:26px;height:26px;flex:none}
.grate b{font-family:var(--hd);font-size:1.5rem;color:var(--navy);line-height:1}
.grate span{font-size:.9rem;color:#7A899B}
.gwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);align-items:stretch}
.gcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh);display:flex;flex-direction:column}
.gtop{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.glogo{width:26px;height:26px;flex:none}
.gtop b{font-family:var(--hd);font-size:.92rem;color:var(--navy)}
.gtop span{font-size:.82rem;color:#8296AC;margin-left:auto}
.stars{color:#FBBC05;font-size:1.15rem;letter-spacing:.16em}
.gcard blockquote{margin:0 0 22px;font-size:clamp(.97rem,1.05vw,1.04rem);line-height:1.64;color:var(--ink);flex:1}
.gwho{display:flex;align-items:center;gap:13px}
.gav{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--blue),var(--blue2));color:#fff;font-family:var(--hd);font-weight:900;font-size:1.05rem}
.gwho b{display:block;font-family:var(--hd);color:var(--navy);font-size:1rem}
.gwho span{display:block;font-size:.85rem;color:#7A899B}

/* ---------- faq ---------- */
.faqs{max-width:840px;margin:0 auto;display:grid;gap:12px}
.faq{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:box-shadow .22s,border-color .22s}
.faq.on{border-color:rgba(41,172,224,.5);box-shadow:0 14px 34px rgba(6,25,47,.1)}
.faq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;
  background:none;border:0;cursor:pointer;padding:19px 22px;min-height:64px;
  font-family:var(--hd);font-weight:800;font-size:1.02rem;color:var(--navy)}
.faq button i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper);position:relative;transition:.25s}
.faq button i::before,.faq button i::after{content:'';position:absolute;left:50%;top:50%;background:var(--blue2);border-radius:2px;transform:translate(-50%,-50%)}
.faq button i::before{width:11px;height:2px}
.faq button i::after{width:2px;height:11px;transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.faq.on button i{background:var(--blue)}
.faq.on button i::before,.faq.on button i::after{background:#052033}
.faq.on button i::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.3,.8,.3,1)}
.faq.on .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{margin:0;padding:0 22px 20px;font-size:.95rem;line-height:1.66}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.area{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:22px 20px}
.area b{display:block;font-family:var(--hd);color:#fff;font-size:1rem;margin-bottom:6px}
.area span{font-size:.89rem;color:#B6CFE6;line-height:1.55}

/* ---------- final cta ---------- */
.cta{position:relative;background:var(--nav0);color:#CFE2F3;padding:clamp(52px,6vw,90px) 0;overflow:hidden}
.cta-bg{position:absolute;inset:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,25,47,.9),rgba(6,25,47,.96))}
.cta-in{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{margin-bottom:26px}
.cta-btns{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:#A9C4DE;padding:60px 0 0;font-size:.92rem}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px}
.ft-brand img{width:56px;margin-bottom:14px}
.ft-brand p{max-width:300px;font-size:.9rem;line-height:1.6}
.ft h5{font-family:var(--hd);color:#fff;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:15px}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin-bottom:10px}
.ft li a:hover{color:var(--blue)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 22px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#8CA9C6}
.by{font-family:var(--hd);color:#8CA9C6;transition:.2s}
.by b{color:var(--blue);font-weight:800}
.by:hover{color:#C9DEF2}

/* ===========================================================================
   LIQUID GLASS DOCK  (.ps-dock)
   The house floating tab bar, built at runtime by ps3.js. On a single page
   site the active item is decided by scroll position rather than a pathname,
   so the pill tracks the section the visitor is actually reading.

   Same TRAP as every other glass surface: the wrapper carries NO transform.
   It is a full width flex row that centres the pill; every transform lives on
   .ps-dock-in or below it.
   =========================================================================== */
@property --pd-rim{syntax:'<angle>';inherits:false;initial-value:200deg}

.ps-dock{position:fixed;z-index:75;left:0;right:0;
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;padding:0 10px;
  opacity:1;transition:opacity .3s ease;pointer-events:none}
.ps-dock.hide{opacity:0;pointer-events:none}
.ps-dock.hide .ps-dock-in{transform:translateY(18px) scale(.96)}

.ps-dock-in{pointer-events:auto;position:relative;isolation:isolate;max-width:100%;
  display:flex;align-items:stretch;gap:1px;padding:7px;border-radius:27px;
  background:linear-gradient(180deg,rgba(14,38,66,.72),rgba(4,13,25,.86));
  -webkit-backdrop-filter:blur(26px) saturate(200%) brightness(1.28);
  backdrop-filter:blur(26px) saturate(200%) brightness(1.28);
  box-shadow:0 26px 54px -14px rgba(0,0,0,.78),0 3px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.05);
  transform:translateY(0) scale(1);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
  animation:pdUp .55s cubic-bezier(.2,.9,.25,1) both}
@keyframes pdUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

.ps-dock-in::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--pd-rim),
    rgba(255,255,255,.6),rgba(255,255,255,.05) 18%,
    rgba(41,172,224,.5) 38%,rgba(255,255,255,.04) 55%,
    rgba(255,255,255,.5) 76%,rgba(255,255,255,.08) 90%,rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pdRim 16s linear infinite}
@keyframes pdRim{to{--pd-rim:560deg}}

.ps-dock-in::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(130px 66px at var(--pd-x,28%) var(--pd-y,-10%),
    rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 72%)}

.ps-dock-pill{position:absolute;top:7px;bottom:7px;left:0;z-index:0;width:var(--w,0px);
  border-radius:21px;pointer-events:none;opacity:0;
  transform:translate3d(var(--x,0px),0,0);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.3);
  transition:transform .5s cubic-bezier(.34,1.35,.5,1),width .5s cubic-bezier(.34,1.35,.5,1),opacity .35s}
.ps-dock.ready .ps-dock-pill{opacity:1}

.ps-dock-i{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-width:64px;padding:8px 8px 7px;border-radius:21px;text-decoration:none;color:#9FC2E0;
  -webkit-tap-highlight-color:transparent;transition:color .25s ease,transform .2s ease}
.ps-dock-i:hover{color:#fff}
.ps-dock-i:active{transform:scale(.93)}
.ps-dock-i.on{color:#fff}
.ps-dock-i .ic{width:26px;height:26px;display:grid;place-items:center;flex:none}
.ps-dock-i .ic svg{width:22px;height:22px;display:block}
.ps-dock-i .lb{font-size:.64rem;font-weight:650;line-height:1;letter-spacing:.005em;white-space:nowrap;font-family:var(--bd)}
.ps-dock-i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ps-dock-i.cta{color:#fff}
.ps-dock-i.cta .ic{border-radius:9px;color:#052033;
  background:linear-gradient(160deg,#5FC8F2,#2A8FC4);
  box-shadow:0 0 16px rgba(41,172,224,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.ps-dock-i.cta .ic svg{width:15px;height:15px}
/* chat rides in the dock on phones only; on a laptop the round launcher in the
   bottom right corner is the way in and this item stays out of the way */
.ps-dock-i.chat{display:none}
@media (max-width:1024px){ .ps-dock-i.chat{display:flex} }

/* ---------- motion ---------- */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--blue2),var(--blue));transform:scaleX(0);transform-origin:0 50%;z-index:80}
.js .reveal{opacity:0;transform:translateY(22px);filter:blur(6px)}
.js .reveal.in{opacity:1;transform:none;filter:none;transition:opacity .68s cubic-bezier(.22,.75,.3,1),transform .68s cubic-bezier(.22,.75,.3,1),filter .68s ease}
.js .svc.in,.js .whys div.in,.js .proc div.in,.js .ba.in,.js .area.in{transition-delay:var(--d,0ms)}
/* the headline is LAID rather than faded in. Each word drops from above at a
   slight angle and settles flat with a small overshoot, the way a tile is
   dropped onto a batten and nudged square. Alternating tilt keeps it from
   reading as a single mechanical sweep. */
.word{display:inline-block;opacity:0;transform-origin:50% 120%;
  transform:translateY(-40px) rotate(-7deg) scale(1.04)}
.word:nth-child(even){transform:translateY(-40px) rotate(7deg) scale(1.04)}
.word.in{opacity:1;transform:none;
  transition:opacity .34s ease,transform .72s cubic-bezier(.18,1.5,.4,1)}

/* the roof line above the headline draws itself once the words have landed */
.roofline{display:block;width:min(280px,52%);height:auto;margin:0 0 14px;overflow:visible}
.roofline path{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520}
.roofline.in path{transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1) .1s;stroke-dashoffset:0}
.roofline .tile{stroke-width:3;opacity:.45}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.word{opacity:1!important;transform:none!important;filter:none!important}
  .hero-bg img,.hero-glow,.glass::before,.ps-dock-in,.ps-dock-in::before,.hero h1 em::after{animation:none!important}
  .ps-dock-pill{transition:opacity .2s}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:grid}
  .hd-note{display:none}
  /* the nav carried the margin-left:auto that pushed the actions across.
     With it hidden the row packs left and the burger floats mid header, so
     the auto margin moves onto the actions and the burger holds the right
     edge of the wrap. */
  .hd-cta{margin-left:auto}
  .brand{min-width:0}
}
@media (max-width:1024px){
  .gwrap{grid-template-columns:1fr;max-width:640px;margin:0 auto;gap:14px}
  /* quote tool sits straight under the headline, trust signals follow it */
  .hero-in{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:28px}
  .hero-copy{grid-column:1;grid-row:1}
  .qz{grid-column:1;grid-row:2}
  .hero-extra{grid-column:1;grid-row:3}
  .hero-copy .lede{margin-bottom:24px}
  .hero-alt{margin-top:0}
  .svcs{grid-template-columns:repeat(2,1fr)}
  .whys{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:1fr}
  .signs-grid{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
}

/* ---------- mobile (RULE ZERO: usability first) ---------- */
@media (max-width:768px){
  .bas{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .hd-in{min-height:64px;gap:10px}
  .brand img{width:36px}
  .brand-tx b{font-size:.9rem}
  .brand-tx i{font-size:.58rem;letter-spacing:.26em}
  .hd-cta .btn-sm{padding:0 16px}
  .drawer-pn{top:66px}

  .hero{padding:30px 0 44px}
  .hero-bg img{object-position:50% 42%}
  .hero-scrim{background:linear-gradient(180deg,rgba(6,25,47,.86) 0%,rgba(6,25,47,.7) 42%,rgba(6,25,47,.9) 100%)}
  h1{font-size:clamp(2.05rem,8.4vw,2.7rem)}
  .hero h1.hero-stack{font-size:clamp(2.15rem,9.4vw,3rem);line-height:1.03}
  .hero .lede{font-size:1rem;margin-bottom:22px}
  .hstats{gap:8px;margin-bottom:22px}
  .hstat{flex:1 1 calc(50% - 4px);padding:12px 14px}
  .hstat b{font-size:1.3rem}
  .hero-ticks{gap:9px;margin-bottom:22px}
  .hero-ticks li{font-size:.93rem}
  .hero-alt{padding-top:18px}
  .hero-alt a{font-size:1.16rem}

  .qz{border-radius:18px}
  .qz-brand{padding:16px 18px 0}
  .qz-hd{padding:14px 18px 0}
  .qz-body{padding:16px 18px 4px}
  .qs h2{font-size:1.16rem;margin-bottom:14px}
  .opts-3{grid-template-columns:1fr}
  .opt{padding:14px 16px}
  .opt-c{min-height:56px}
  .qz-ft{padding:12px 18px 16px;margin-top:12px}
  .fr2{grid-template-columns:1fr}
  .done-sum div{flex-direction:column;gap:2px}
  .done-sum b{text-align:left}

  .tbar-in{font-size:.79rem;padding:12px 18px;line-height:1.5}

  .sec{padding:48px 0}
  .sec-hd{margin-bottom:26px}
  .svcs{grid-template-columns:1fr;gap:14px}
  .svc img{aspect-ratio:16/10}

  .ba-ft{padding:13px 15px}
  .ba-ft i{display:none}
  .ba-knob{width:46px;height:46px}

  .proc{grid-template-columns:1fr;gap:12px}
  .proc div{padding:24px 20px 20px}

  .signs-list li{padding:14px 16px 14px 48px}

  .whys{grid-template-columns:1fr;gap:12px}
  .whys div{padding:20px 18px}
  .mats{margin-top:32px}
  .mats-row{gap:26px}
  .mats-row img{height:46px}

  .gal{grid-template-columns:1fr;grid-auto-rows:200px}
  .gal .w2{grid-column:span 1}
  .gal .h2{grid-row:span 1}

  .gwrap{grid-template-columns:1fr;gap:14px}
  .gcard{padding:24px 20px}
  .gcard blockquote{font-size:1rem}

  .areas{grid-template-columns:1fr}

  .cta-btns{flex-direction:column}
  .cta-btns .btn{width:100%}

  .ft{padding-top:46px}
  .ft-grid{grid-template-columns:1fr;gap:26px;padding-bottom:30px}
  .ft-brand p{max-width:none}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:9px;padding:18px}
  .ft li{margin-bottom:0}
  .ft li a{display:inline-block;padding:11px 0;min-height:44px}
  .by{display:inline-block;padding:11px 0;min-height:44px}
  .brand{padding:4px 0}
  .hero-alt a{display:inline-block;padding:8px 0;min-height:44px}
}

@media (max-width:560px){
  .ps-dock{bottom:calc(10px + env(safe-area-inset-bottom));padding:0 8px}
  .ps-dock-in{padding:6px;border-radius:25px}
  .ps-dock-i{min-width:58px;padding:7px 4px 6px;gap:3px}
  .ps-dock-i .lb{font-size:.6rem}
  .ps-dock-i .ic{width:24px;height:24px}
  .ps-dock-i .ic svg{width:21px;height:21px}
}
@media (max-width:380px){
  .btn-lg{padding:15px 20px;font-size:.94rem}
  .ps-dock-i{min-width:52px}
  .ps-dock-i .lb{font-size:.56rem}
  .hd-cta .btn-sm{padding:0 13px;font-size:.85rem}
}

/* ===========================================================================
   CHAT  (.ps-fab / .ps-panel)  — built at runtime by ps3-chat.js.
   Same liquid glass as the quote tool and the dock. The launcher and the panel
   both sit ABOVE the dock, which owns the bottom edge of every screen.
   =========================================================================== */
.ps-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;
  width:60px;height:60px;border-radius:50%;border:1px solid rgba(255,255,255,.35);cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,rgba(41,172,224,.95),rgba(42,143,196,.95));
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.2);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.2);
  box-shadow:0 16px 34px rgba(6,25,47,.5),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .22s ease}
.ps-fab:hover{transform:translateY(-2px) scale(1.04)}
.ps-fab svg{width:27px;height:27px}
.ps-fab .x{display:none}
.ps-fab.open .b{display:none}
.ps-fab.open .x{display:block}
.ps-fab.ping::after{content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(41,172,224,.8);animation:psPing 1.9s ease-out infinite}
@keyframes psPing{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.6);opacity:0}}

.ps-panel{position:fixed;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:71;
  width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100dvh - 260px));
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .24s ease,transform .26s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(180deg,rgba(12,32,58,.74),rgba(4,14,27,.88));
  -webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.2);
  backdrop-filter:blur(30px) saturate(190%) brightness(1.2);
  box-shadow:0 34px 74px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.ps-panel.open{opacity:1;transform:none;pointer-events:auto}
.ps-panel::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:4;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.04) 42%,rgba(41,172,224,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .ps-panel{background:linear-gradient(180deg,#0d2745,#06192F)}
}

.ps-hd{display:flex;align-items:center;gap:11px;padding:14px 15px;position:relative;z-index:5;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ps-hd img{height:38px;width:auto;flex:none}
.ps-hd b{display:block;font-family:var(--hd);font-weight:900;font-size:.96rem;line-height:1.2;color:#fff;letter-spacing:.02em}
.ps-hd span{display:block;font-size:.75rem;color:#9FC2E0}
.ps-hd .ps-close{margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;
  font-size:1.5rem;line-height:1;color:#9FC2E0;border-radius:12px;flex:none}
.ps-hd .ps-close:hover{background:rgba(255,255,255,.1);color:#fff}

.ps-log{flex:1;overflow-y:auto;padding:16px 15px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:5}
.ps-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:.94rem;line-height:1.55;white-space:pre-wrap}
.ps-msg.bot{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-bottom-left-radius:5px;align-self:flex-start;color:#E4EFF9}
.ps-msg.me{background:linear-gradient(160deg,#29ACE0,#2A8FC4);color:#042033;
  border-bottom-right-radius:5px;align-self:flex-end;font-weight:600}
.ps-msg.bot a{color:#7FD4FF;font-weight:700}
.ps-typing{align-self:flex-start;display:flex;gap:5px;padding:13px 15px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:16px;border-bottom-left-radius:5px}
.ps-typing i{width:7px;height:7px;border-radius:50%;background:#9FC2E0;animation:psBounce 1.1s infinite}
.ps-typing i:nth-child(2){animation-delay:.16s}
.ps-typing i:nth-child(3){animation-delay:.32s}
@keyframes psBounce{0%,60%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.ps-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 10px;position:relative;z-index:5}
.ps-chips button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  border-radius:999px;padding:9px 13px;font-size:.82rem;font-family:inherit;font-weight:600;
  color:#D6E6F4;cursor:pointer;min-height:40px}
.ps-chips button:hover{border-color:var(--blue);color:#fff;background:rgba(41,172,224,.2)}

.ps-form{display:flex;gap:8px;padding:11px 12px;position:relative;z-index:5;
  border-top:1px solid rgba(255,255,255,.14)}
.ps-form input{flex:1;min-height:48px;border:1px solid rgba(255,255,255,.2);border-radius:14px;
  padding:0 14px;font-family:inherit;font-size:.95rem;color:#fff;background:rgba(255,255,255,.09)}
.ps-form input::placeholder{color:#7FA3C2}
.ps-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,172,224,.22)}
.ps-form button{min-width:48px;min-height:48px;border:0;border-radius:14px;cursor:pointer;
  display:grid;place-items:center;color:#042033;background:linear-gradient(160deg,#5FC8F2,#2A8FC4)}
.ps-form button:disabled{background:rgba(255,255,255,.18);color:#7FA3C2;cursor:not-allowed}
.ps-form button svg{width:20px;height:20px}

/* the chat stands down entirely while the menu drawer owns the screen */
body.menu-open .ps-fab,body.menu-open .ps-panel{display:none}

/* below a laptop the launcher stands down entirely: chat lives in the dock, so
   the bottom edge belongs to the dock alone */
@media (max-width:1024px){
  .ps-fab{display:none}
  .ps-panel{bottom:calc(96px + env(safe-area-inset-bottom));max-height:calc(100dvh - 210px)}
}
@media (max-width:640px){
  .ps-panel{right:12px;left:12px;width:auto;
    bottom:calc(88px + env(safe-area-inset-bottom));max-height:calc(100dvh - 190px)}
}