/* Base tokens and utilities. Copy into the site CSS, then set the client's values. */
:root{
  /* type scale: 7 tokens, nothing readable below 14px, body 16px (inputs too, or iOS zooms) */
  --fs-h1:clamp(40px,6vw,76px); --fs-h2:clamp(28px,3.6vw,48px); --fs-h3:clamp(20px,2vw,26px);
  --fs-lead:clamp(18px,1.6vw,21px); --fs-body:16px; --fs-small:14px; --fs-label:14px;
  /* fonts: two families at most, set per client and locale */
  --f-display:system-ui,sans-serif; --f-body:system-ui,sans-serif;
  /* surface and ink table: one row per surface. Accent as TEXT is allowed on dark surfaces only. Fill in and compute contrast (>= 4.5). */
  --paper:#FFFFFF; --ink:#111111;            /* light surface: heading, body */
  --ink-2:#4A4A4A;                           /* light surface: muted text (solid colour, no opacity) */
  --dark:#14181F; --lt:#F4F6F8;              /* dark surface: background, text */
  --lt-2:#C9CED6;                            /* dark surface: muted text */
  --accent:#F2561D;                          /* fills and dark-surface text only */
  --e:cubic-bezier(.22,1,.36,1);             /* default easing */
  --tdir:ltr;                                /* text direction; chrome never mirrors */
}
[hidden]{display:none!important}   /* display:grid or flex on a component otherwise beats the hidden attribute */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:var(--fs-body)/1.55 var(--f-body);color:var(--ink);background:var(--paper);margin:0}
button,input,select,textarea{font:inherit;color:inherit}   /* browser defaults are 13.3px: below the 14px floor */
b,strong{font-weight:600}   /* a bare <b> asks for 700 and fakes it: set a loaded weight */
img,video{max-width:100%;display:block}
main>section{overflow-x:clip}   /* a transform that pushes content sideways inflates page width otherwise */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* language switch changes text direction only. Layout stays physically the same. */
.lay{direction:ltr}
.lay>*{direction:var(--tdir)}
[data-fixed]{direction:ltr}              /* fixed widgets: keep corner, restore text direction inside */
[data-fixed] .txt{direction:var(--tdir)}

/* interactive hover: every clickable thing gets one (100-200ms micro-interactions) */
a,button,[role=button]{transition:transform .15s var(--e),background-color .15s var(--e),color .15s var(--e),border-color .15s var(--e)}
@media (hover:hover){a:hover,button:hover{transform:translateY(-1px)}}

/* entrance: use backwards, not both (both hides an interrupted animation). Resting state is visible. */
.rv{animation:rv .6s var(--e) backwards}
@keyframes rv{from{opacity:0;transform:translateY(14px)}}
.js .rv-wait{opacity:0;transform:translateY(14px)}
.js .rv-wait.in{opacity:1;transform:none;transition:opacity .6s var(--e),transform .6s var(--e)}

/* marquee: set --n clones in markup until the track is wider than the viewport, then double it */
.mq{overflow:hidden}
.mq>.tr{display:flex;gap:var(--g,24px);width:max-content;animation:mq var(--t,40s) linear infinite}
.mq.rev>.tr{animation-direction:reverse}
.mq:hover>.tr{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv-wait{opacity:1;transform:none}
}
html.ax-still *,html.ax-still *::before,html.ax-still *::after{animation:none!important;transition:none!important}

/* dialogs for legal text */
dialog{max-width:min(720px,calc(100% - 24px));max-height:calc(100% - 24px);border:0;border-radius:12px;padding:0;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #0001;position:sticky;top:0;background:var(--paper)}
dialog .dh h2{margin:0;font-size:var(--fs-h3)}
dialog .x{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:24px;line-height:1;color:var(--ink)}
dialog .db{padding:16px 20px 24px;font-size:var(--fs-body)}
dialog .db h3{font-size:var(--fs-lead);margin:20px 0 4px}
dialog .db p{margin:0 0 8px}
.ck{position:fixed;z-index:90;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:400px;background:var(--paper);color:var(--ink);border-radius:12px;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.35);display:grid;gap:12px;font-size:var(--fs-small);line-height:1.5;animation:ckpop .2s var(--e) backwards}
.ck .b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* equal weight: both buttons the same size, same outline; only the fill differs */
.ck button{min-height:44px;border-radius:6px;font:600 var(--fs-small)/1 var(--f-body);cursor:pointer;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.ck button+button{background:transparent;color:var(--ink)}
@keyframes ckpop{from{opacity:0;transform:translateY(6px)}}
@media(max-width:560px){.ck{left:10px;right:10px;max-width:none}}
.ax{position:fixed;z-index:85;left:0;top:50%;transform:translateY(-50%)}
.ax>button{display:grid;place-items:center;width:40px;height:44px;border:0;border-top-right-radius:8px;border-bottom-right-radius:8px;background:#1F4E9B;color:#fff;cursor:pointer}
.ax>button:hover{width:46px}
.ax .pn{position:absolute;left:48px;top:50%;margin-top:-170px;width:240px;background:var(--paper);color:var(--ink);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:12px;display:grid;gap:6px}
.ax .pn[hidden]{display:none}
.ax .pn b{padding:4px 6px 8px;font-size:16px}
.ax .pn button{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:6px;border:1px solid #0002;background:#fff;color:var(--ink);cursor:pointer;text-align:start;font:var(--fs-small)/1.2 var(--f-body)}
.ax .pn button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.ax .pn a{padding:8px 6px;font-size:var(--fs-small);color:var(--ink)}
html.ax-big{font-size:112.5%}
html.ax-big body{--fs-body:18px;--fs-small:16px;--fs-lead:20px}
html.ax-hc body{filter:contrast(1.25)}
html.ax-links a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:4px}
/* ================= Hama: sun and terracotta, real photos ================= */
:root{
  --f-display:'Rubik','Assistant',system-ui,sans-serif; --f-body:'Assistant','Rubik',system-ui,sans-serif;
  --paper:#FFF4DF; --ink:#0E2A3B; --ink-2:#435463;
  --dark:#0E2A3B; --dark-2:#07171F; --lt:#FFF4DF; --lt-2:#BFD0DA;
  --sun:#FFB81C; --sun-d:#E59F00; --terra:#B8401C; --terra-d:#A93A18; --sky:#CDE7EE; --sand:#F6E4C0;
  --rule-l:#0E2A3B26; --rule-d:#FFF4DF33;
  --r:20px; --gx:clamp(20px,5vw,72px); --sec:clamp(64px,8vw,108px); --sh:62px;
  --tdir:rtl;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:76px}
body{font-weight:400;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;letter-spacing:0}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.08}
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.14;text-wrap:balance;max-width:20ch}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25}
p{margin:0}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;top:-60px;inset-inline-start:12px;z-index:200;background:var(--sun);color:var(--ink);padding:12px 16px;border-radius:8px;font-weight:700;transition:top .15s}
.skip:focus{top:12px}
.wrap{width:min(1200px,100% - 2*var(--gx));margin-inline:auto}
main>section{position:relative;padding-block:var(--sec)}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.lead{font-size:var(--fs-lead);line-height:1.5}
.big{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.6vw,46px);line-height:1.25;max-width:24ch;text-wrap:balance}
img{height:auto}

/* ---------- shared motion ---------- */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes sheen{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes swap{from{opacity:0;transform:translateY(8px)}}
@keyframes flow{to{stroke-dashoffset:-38}}
.js .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .split .w>i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform .75s var(--e);transition-delay:calc(var(--i) * 55ms)}
.js .split.in .w>i{transform:none}
.js .clip-rv{clip-path:inset(10% 5% 10% 5% round 28px);opacity:0}
.js .clip-rv.in{clip-path:inset(0 round 28px);opacity:1;transition:clip-path .95s var(--e),opacity .6s var(--e)}

/* buttons: springy, a little tilt, a sheen that passes by */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:2px solid var(--sun);background:var(--sun);color:var(--ink);font:800 var(--fs-lead)/1 var(--f-display);text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--sun-d);translate:var(--mx,0) var(--my,0);transition:transform .15s var(--e),box-shadow .15s var(--e),background-color .15s var(--e)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);transform:translateX(-130%);animation:sheen 5s ease-in-out infinite;pointer-events:none}
.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 7px 0 var(--sun-d)}
.btn:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 var(--sun-d)}
.btn.sm{min-height:44px;padding:0 20px;font-size:var(--fs-small);box-shadow:0 3px 0 var(--sun-d)}
.btn.big{min-height:62px;padding:0 40px;font-size:calc(var(--fs-lead) + 2px)}
.btn.dark{background:var(--ink);color:var(--lt);border-color:var(--ink);box-shadow:0 4px 0 #000}
.btn.dark:hover{box-shadow:0 7px 0 #000}
.btn.ghost-d{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn.ghost-d::after{display:none}
.lnk{border:0;background:none;padding:0;font:700 var(--fs-body)/1.4 var(--f-body);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:80;color:var(--ink);transition:background-color .2s var(--e),box-shadow .2s var(--e),transform .25s var(--e)}
.hd.solid{background:var(--paper);box-shadow:0 1px 0 var(--rule-l)}
.hd.away{transform:translateY(-100%)}
.hd-in{display:flex;align-items:center;gap:clamp(12px,3vw,40px);height:68px;width:min(1320px,100% - 2*var(--gx));margin-inline:auto}
.prog{position:absolute;inset:auto 0 0 0;height:3px;background:var(--sun);transform-origin:right;transform:scaleX(var(--sp,0));opacity:0;transition:opacity .2s}
.hd.solid .prog{opacity:1}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo .rays{transform-origin:24px 24px;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo b{display:block;font:900 var(--fs-h3)/1 var(--f-display)}
.logo small{display:block;font-size:var(--fs-small);line-height:1.2;margin-top:2px;font-weight:600}
.nav{display:flex;gap:clamp(14px,2vw,30px);margin-inline-start:auto}
.nav a{text-decoration:none;font-weight:700;font-size:var(--fs-body);padding:8px 2px;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--terra)}
.hd-act{display:flex;align-items:center;gap:20px}
.hd-tel{text-decoration:none;font:700 var(--fs-body)/1 var(--f-display)}
.hd-tel:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1000px){.nav{display:none}.hd-act{margin-inline-start:auto}}
@media(max-width:700px){.hd-tel{display:none}.logo small{display:none}.btn.sm{padding:0 16px}}

/* ---------- hero: a real photo ---------- */
.hero{position:relative;z-index:2;min-height:max(700px,100svh);padding:0 0 calc(var(--sh) + 28px);display:grid;grid-template-rows:1fr auto;color:var(--ink);isolation:isolate}
.hero-ph{position:absolute;inset:0;overflow:hidden;z-index:-1;background:#E8C9A0}
.hero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left bottom;transform-origin:20% 70%;animation:kb 26s ease-in-out infinite alternate;transition:filter 1s var(--e)}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.16) translate(1.2%,-1%)}}
.hero[data-season=winter] .hero-ph img{filter:saturate(.8) hue-rotate(-10deg) brightness(.97)}
.hero[data-season=cloud] .hero-ph img{filter:saturate(.45) brightness(1.04) contrast(.94)}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(255,244,223,.78),rgba(255,244,223,.45) 38%,transparent 64%);pointer-events:none}
.tint{position:absolute;inset:0;background:var(--tint,transparent);mix-blend-mode:soft-light;opacity:.7;transition:background-color 1.2s linear}
.sweep{position:absolute;inset:-20% -40%;background:linear-gradient(105deg,transparent 42%,rgba(255,240,200,.38) 50%,transparent 58%);mix-blend-mode:screen;animation:sweep 11s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-55%)}55%,100%{transform:translateX(55%)}}
.motes i{position:absolute;border-radius:50%;background:radial-gradient(circle,#FFF6D8,rgba(255,246,216,0) 70%);animation:mote var(--d,14s) linear infinite;animation-delay:var(--dl,0s);opacity:0}
@keyframes mote{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.85}100%{transform:translate(60px,-160px) scale(1.2);opacity:0}}
.hero-in{align-self:center;max-width:min(640px,100%);margin-inline-start:var(--gx);padding:110px 0 24px}
.hero h1{max-width:14ch;text-wrap:balance}
.hero-in .lead{margin-top:20px;max-width:30ch;color:var(--ink);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-ctl{justify-self:end;margin-inline-end:var(--gx);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.live{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,244,223,.88);backdrop-filter:blur(6px);font:700 var(--fs-small)/1 var(--f-display);font-variant-numeric:tabular-nums;box-shadow:0 6px 18px rgba(14,42,59,.15)}
.live .dot{width:9px;height:9px;border-radius:50%;background:var(--terra);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.6);opacity:.5}}
.seasons{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(255,244,223,.88);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(14,42,59,.15)}
.seasons button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:700 var(--fs-small)/1 var(--f-display);cursor:pointer}
.seasons button[aria-pressed=true]{background:var(--ink);color:var(--lt)}
.strip{list-style:none;margin:0;padding:0;position:absolute;inset-inline:var(--gx);bottom:0;transform:translateY(50%);display:grid;grid-template-columns:repeat(4,1fr);background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 26px 54px rgba(14,42,59,.24);z-index:3}
.strip li{padding:20px 24px 22px;display:grid;gap:4px;align-content:start}
.strip li+li{border-inline-start:1px solid var(--rule-l)}
.strip b{font:800 clamp(30px,3.2vw,42px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.strip b::after{content:"";display:block;width:30px;height:4px;border-radius:3px;background:var(--sun);margin-top:8px}
.strip span{font-size:var(--fs-small);line-height:1.35;color:var(--ink-2)}
@media(max-aspect-ratio:13/10){.hero-ph img{object-position:30% bottom;inset:auto 0 -12% 0;height:112%}.hero-ph::after{background:linear-gradient(180deg,rgba(255,244,223,.8),rgba(255,244,223,.5) 45%,transparent 70%)}.hero-in{margin-inline:var(--gx)}}
@media(max-width:700px){
  :root{--sh:98px}
  .hero{min-height:max(740px,100svh)}
  .hero-ph img{object-position:30% bottom;inset:auto 0 -16% 0;height:116%}
  .hero-ph::after{background:linear-gradient(180deg,rgba(255,244,223,.8),rgba(255,244,223,.5) 45%,transparent 70%)}
  .hero-in{padding-top:88px;margin-inline:var(--gx)}
  .hero-ctl{justify-self:start;margin-inline:var(--gx)}
  .strip{grid-template-columns:1fr 1fr}
  .strip li{padding:14px 16px}
  .strip li:nth-child(n+3){border-top:1px solid var(--rule-l)}
  .strip li:nth-child(3){border-inline-start:0}
  .strip b{font-size:28px}
  .cta-row .btn{flex:1 1 auto}
}

/* ---------- problem (cream) ---------- */
.problem{background:var(--paper);padding-top:calc(var(--sec) + var(--sh))}
.prob{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.problem h2{max-width:18ch}
.problem .big{margin-top:24px}
.claims{position:relative;min-height:380px;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.claim{position:absolute;bottom:-60px;max-width:100%;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--sand);color:var(--ink);font:600 var(--fs-body)/1 var(--f-display);white-space:nowrap;animation:rise 12s linear infinite}
.claim i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--terra);color:#fff;font:800 var(--fs-small)/1 var(--f-display);font-style:normal}
@keyframes rise{from{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateY(-420px);opacity:0}}
.pq{margin:48px 0 0;max-width:640px;padding:28px 32px 26px;border-radius:var(--r);background:var(--ink);color:var(--lt);position:relative}
.pq blockquote{margin:0;font:600 clamp(20px,2.2vw,26px)/1.45 var(--f-display)}
.pq::before{content:"”";position:absolute;inset-block-start:-26px;inset-inline-start:24px;font:900 90px/1 var(--f-display);color:var(--sun)}
.pq figcaption{margin-top:14px;font-size:var(--fs-body);color:var(--lt-2)}
@media(max-width:900px){.prob{grid-template-columns:1fr}.claims{min-height:180px;order:2}@keyframes rise{from{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translateY(-230px);opacity:0}}}
@media(max-width:700px){.pq{padding:22px 20px;margin-top:36px}}

/* ---------- symptoms (dark) ---------- */
.symptoms{background:var(--dark);color:var(--lt);padding-bottom:calc(var(--sec) + 120px)}
.sym{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,64px);margin-top:36px;align-items:center}
.sym-vis{position:relative;margin-bottom:26px}
.stage{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#0A2030;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.sp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .7s var(--e),transform 7s linear}
.sp.on{opacity:1;transform:scale(1)}
.chipc{position:absolute;inset-block-start:14px;inset-inline-start:14px;padding:8px 14px;border-radius:999px;background:var(--sun);color:var(--ink);font:800 var(--fs-small)/1 var(--f-display);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.inset{position:absolute;inset-inline-end:-14px;bottom:-26px;width:min(54%,330px);padding:8px;background:#0A2030;border:2px solid var(--sun);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cut{width:100%;height:auto;display:block}
.cut .part{transition:opacity .3s var(--e)}
.cut[data-hl] .part{opacity:.3}
.cut[data-hl~=collector] [data-p=collector],.cut[data-hl~=pipes] [data-p=pipes],.cut[data-hl~=tank] [data-p=tank],.cut[data-hl~=anode] [data-p=anode],.cut[data-hl~=element] [data-p=element],.cut[data-hl~=thermo] [data-p=thermo],.cut[data-hl~=flange] [data-p=flange],.cut[data-hl~=valve] [data-p=valve]{opacity:1}
.cut[data-hl~=element] [data-p=tank],.cut[data-hl~=anode] [data-p=tank],.cut[data-hl~=thermo] [data-p=tank],.cut[data-hl~=flange] [data-p=tank],.cut[data-hl~=valve] [data-p=tank]{opacity:.7}
.cut[data-hl~=element] [data-p=element] path:first-child,.cut[data-hl~=thermo] [data-p=thermo] rect:first-child{animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 7px #FFB81C)}}
.cut[data-hl~=collector] .scale{opacity:1!important;transition:opacity .4s}
.cut[data-hl~=flange] [data-p=flange] .drip,.cut[data-hl~=valve] [data-p=valve] .drip{animation:drip 1.6s ease-in infinite}
@keyframes drip{0%{opacity:0;transform:translateY(-6px)}20%{opacity:1}100%{opacity:0;transform:translateY(34px)}}
.cut .flow{animation:flow 1.3s linear infinite}
.cut .shine{animation:shineMove 4.5s ease-in-out infinite}
@keyframes shineMove{0%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(780px) skewX(-18deg)}}
.cut .bub circle{animation:bubUp 3.2s ease-in infinite}
.cut .bub circle:nth-child(2){animation-delay:-.8s}.cut .bub circle:nth-child(3){animation-delay:-1.6s}.cut .bub circle:nth-child(4){animation-delay:-2.4s}
@keyframes bubUp{0%{transform:translateY(0);opacity:.8}100%{transform:translateY(-70px);opacity:0}}
.cut .wave{animation:waveMove 5s linear infinite}
@keyframes waveMove{to{transform:translateX(-120px)}}
.cut .sunrays{animation:rayPulse 2.4s ease-in-out infinite}
@keyframes rayPulse{50%{opacity:.25}}
.lbl{pointer-events:none;transition:opacity .25s var(--e)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 6px;border-radius:999px;border:1.5px solid var(--rule-d);background:transparent;color:var(--lt);font:600 var(--fs-small)/1 var(--f-display);cursor:pointer;overflow:hidden}
.tabs button img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.tabs button::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--ink);transform:scaleX(0);transform-origin:right}
.tabs button:hover{border-color:var(--lt)}
.tabs button[aria-selected=true]{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.tabs button[aria-selected=true]::after{transform:scaleX(var(--prog,0))}
.panel{margin-top:22px;display:grid;gap:14px}
.panel h3{font-size:clamp(24px,2.6vw,32px);color:var(--sun)}
.panel p{font-size:var(--fs-body);line-height:1.55;max-width:46ch}
.panel .fix{display:grid;gap:4px;padding:14px 16px;border-radius:12px;background:#12324A}
.panel .fix b{font:700 var(--fs-small)/1 var(--f-display);color:var(--lt-2)}
.panel.sw{animation:swap .35s var(--e) backwards}
.meters{display:grid;gap:10px;margin-top:4px}
.meter{display:grid;grid-template-columns:150px 1fr 70px;gap:12px;align-items:center;font-size:var(--fs-small)}
.meter em{font:700 var(--fs-small)/1 var(--f-display);font-style:normal;font-variant-numeric:tabular-nums}
.bar{height:10px;border-radius:99px;background:#12324A;overflow:hidden}
.bar i{display:block;height:100%;width:var(--w,0%);background:var(--sun);border-radius:99px;transition:width .7s var(--e)}
@media(max-width:900px){.sym{grid-template-columns:1fr}.meter{grid-template-columns:1fr 1fr;row-gap:6px}.meter .bar{grid-column:1/-1;order:3}.symptoms{padding-bottom:calc(var(--sec) + 140px)}.inset{width:50%;inset-inline-end:-6px}}

/* ---------- roof report (sun; the phone crosses the seam) ---------- */
.report{background:var(--sun);color:var(--ink)}
.rep{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.rep-txt{display:grid;gap:20px;justify-items:start}
.rep-txt p{font-size:var(--fs-lead);line-height:1.5;max-width:34ch}
.rep-pts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rep-pts li{display:flex;gap:12px;align-items:center;font:600 var(--fs-lead)/1.3 var(--f-display)}
.rep-pts li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.rep-vis{position:relative;display:grid;place-items:center;margin-top:-190px}
.phone{position:relative;width:min(310px,78vw);aspect-ratio:300/620;border-radius:44px;background:var(--ink);padding:12px;box-shadow:0 30px 60px rgba(14,42,59,.38),0 0 0 3px #1c4660;transform:rotate(-3deg)}
.ph-notch{position:absolute;top:18px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:99px;background:#000;z-index:2}
.ph-screen{position:relative;height:100%;border-radius:34px;background:var(--paper);overflow:hidden}
.ph-roll{padding:54px 14px 20px;display:grid;gap:14px;animation:roll 24s ease-in-out infinite alternate}
@keyframes roll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 540px))}}
.phone:hover .ph-roll{animation-play-state:paused}
.r-hd{display:grid;gap:2px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.r-hd b{font:900 var(--fs-h3)/1.1 var(--f-display)}
.r-hd span{font-size:var(--fs-small);color:var(--ink-2)}
.r-st{display:grid;gap:6px}
.r-st time{font:800 var(--fs-body)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--terra)}
.r-ph{border-radius:12px;overflow:hidden;line-height:0;border:1px solid var(--rule-l)}
.r-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.r-st p{font-size:var(--fs-small);line-height:1.35}
.r-ok{padding:12px;border-radius:12px;background:var(--ink);color:var(--lt);display:grid;gap:4px}
.r-ok b{font:800 var(--fs-body)/1.2 var(--f-display);color:var(--sun)}
.r-ok span{font-size:var(--fs-small)}
.bagc{position:absolute;inset-inline-start:-7%;bottom:-6%;width:clamp(150px,17vw,220px);margin:0;padding:8px 8px 40px;background:#fff;border-radius:8px;transform:rotate(6deg);box-shadow:0 24px 44px rgba(14,42,59,.32);z-index:3;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(3deg) translateY(-12px)}}
.bagc img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.bagc figcaption{position:absolute;inset:auto 8px 10px;font:800 var(--fs-small)/1.2 var(--f-display);text-align:center}
@media(max-width:900px){.rep{grid-template-columns:1fr}.rep-vis{margin-top:-130px;order:-1}.phone{transform:none}.bagc{inset-inline-start:-1%;bottom:2%;width:124px;padding-bottom:34px}.rep-vis{margin-bottom:34px}.report{padding-bottom:calc(var(--sec) + 20px)}}

/* ---------- process (cream; zigzag trim) ---------- */
.how{background:var(--paper);padding-top:calc(var(--sec) + 24px)}
.how::before{content:"";position:absolute;inset:-1px 0 auto 0;height:22px;background:var(--sun);clip-path:polygon(0 0,100% 0,100% 100%,97.5% 40%,95% 100%,92.5% 40%,90% 100%,87.5% 40%,85% 100%,82.5% 40%,80% 100%,77.5% 40%,75% 100%,72.5% 40%,70% 100%,67.5% 40%,65% 100%,62.5% 40%,60% 100%,57.5% 40%,55% 100%,52.5% 40%,50% 100%,47.5% 40%,45% 100%,42.5% 40%,40% 100%,37.5% 40%,35% 100%,32.5% 40%,30% 100%,27.5% 40%,25% 100%,22.5% 40%,20% 100%,17.5% 40%,15% 100%,12.5% 40%,10% 100%,7.5% 40%,5% 100%,2.5% 40%,0 100%)}
.steps{list-style:none;margin:48px 0 0;padding:0;position:relative;display:grid;gap:clamp(18px,3vw,36px)}
.steps::before,.steps::after{content:"";position:absolute;inset-block:12px;left:50%;width:6px;margin-left:-3px;border-radius:99px;background:var(--sand)}
.steps::after{background:var(--terra);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .15s linear}
.van{position:absolute;left:50%;top:calc(12px + (100% - 24px) * var(--p,0));width:64px;height:40px;margin-left:-32px;margin-top:-30px;z-index:3;transition:top .15s linear;filter:drop-shadow(0 4px 4px rgba(14,42,59,.3))}
.stp{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:150px}
.stp::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--paper);border:6px solid var(--sand);z-index:2;transition:border-color .3s,transform .3s var(--e)}
.stp.on::before{border-color:var(--terra);transform:scale(1.15)}
.tx{display:grid;gap:6px;max-width:36ch;padding-inline:56px 0}
.stp time{font:900 clamp(40px,5vw,60px)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.stp p{font-size:var(--fs-body);line-height:1.45;color:var(--ink-2)}
.stp .art{width:clamp(120px,12vw,168px);height:auto;filter:drop-shadow(0 8px 10px rgba(14,42,59,.24));animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--k,0) * -1.1s)}
.stp .tx{grid-column:2;grid-row:1}
.stp .art{grid-column:1;grid-row:1;justify-self:end;margin-inline-end:56px}
.stp:nth-child(even) .tx{grid-column:1;justify-self:end;padding-inline:0 56px;text-align:end}
.stp:nth-child(even) .art{grid-column:2;justify-self:start;margin-inline:56px 0}
@media(max-width:700px){
  .steps::before,.steps::after{left:auto;right:22px;margin:0 -3px 0 0}
  .van{left:auto;right:22px;width:52px;height:32px;margin:-30px -26px 0 0}
  .stp,.stp:nth-child(even){grid-template-columns:1fr auto;padding-inline-start:56px;min-height:0;gap:12px}
  .stp::before{left:auto;right:22px;margin:-15px -15px 0 0;top:34px}
  .stp .tx,.stp:nth-child(even) .tx{grid-column:1;grid-row:1;padding:0;text-align:start;justify-self:start}
  .stp .art,.stp:nth-child(even) .art{grid-column:2;grid-row:1;width:84px;margin:0;justify-self:end;align-self:start}
  .stp time{font-size:32px}
}

/* ---------- why: before / after (terracotta, slanted) ---------- */
.why{background:var(--terra-d);color:var(--lt);clip-path:polygon(0 36px,100% 0,100% calc(100% - 36px),0 100%);margin-block:-36px;padding-block:calc(var(--sec) + 36px);z-index:1}
@media(max-width:700px){.why{clip-path:polygon(0 20px,100% 0,100% calc(100% - 20px),0 100%);margin-block:-20px;padding-block:calc(var(--sec) + 20px)}}
.why h2{max-width:22ch}
.vs{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(18px,3vw,40px);margin-top:36px;align-items:center}
.ba{position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);--p:50%;touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-a{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-l{position:absolute;top:14px;padding:7px 14px;border-radius:999px;font:800 var(--fs-small)/1 var(--f-display);background:var(--ink);color:var(--lt);z-index:2}
.ba-l.b{right:14px}.ba-l.a{left:14px;background:var(--sun);color:var(--ink)}
.ba-h{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;z-index:2;box-shadow:0 0 14px rgba(0,0,0,.4)}
.ba-h i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.ba-h i::before,.ba-h i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.ba-h i::before{left:7px;border-right-color:var(--ink);border-left:0}
.ba-h i::after{right:7px;border-left-color:var(--ink);border-right:0}
.ba-r{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;direction:ltr;z-index:3;margin:0}
.lists{display:grid;gap:14px}
.lists>div{padding:clamp(20px,2.6vw,32px);border-radius:var(--r)}
.lists h3{font-size:var(--fs-lead)}
.lists ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.lists li{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-body);line-height:1.4}
.lists li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;align-self:flex-start;transform:translateY(8px)}
.vs-a{background:var(--paper);color:var(--ink-2)}
.vs-a h3{color:var(--ink-2)}
.vs-a li{text-decoration:line-through;text-decoration-color:#B8401C99;text-decoration-thickness:2px}
.vs-a li::before{background:#9aa5ad}
.vs-b{background:var(--dark);color:var(--lt);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.vs-b h3{color:var(--sun)}
.vs-b li::before{background:var(--sun)}
.vs-b li{font-weight:600}
.js .vs-b li,.js .vs-a li{opacity:0;transform:translateX(16px);transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:calc(var(--i,0) * 90ms)}
.js .in li{opacity:1;transform:none}
@media(max-width:900px){.vs{grid-template-columns:1fr}}

/* ---------- reviews (cream) ---------- */
.reviews{background:var(--paper);padding-top:calc(var(--sec) + 60px);overflow:hidden}
.rev-top{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,64px);margin-top:36px;align-items:start}
.qbig{margin:0}
.qbig-in{min-height:220px;display:grid;gap:18px;align-content:start;transition:opacity .35s var(--e),transform .35s var(--e)}
.qbig-in.out{opacity:0;transform:translateY(10px)}
.qbig blockquote{margin:0;font:600 clamp(24px,3vw,36px)/1.35 var(--f-display);text-wrap:balance}
.qbig figcaption{display:flex;gap:10px;align-items:center;font-size:var(--fs-body);color:var(--ink-2)}
.qbig figcaption b{color:var(--ink);font-weight:700}
.qbig figcaption span{padding:4px 10px;border-radius:99px;background:var(--sand);color:var(--ink);font-weight:600;font-size:var(--fs-small)}
.qdots{display:flex;gap:8px;margin-top:20px}
.qdots button{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.qdots button::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sand);border:2px solid var(--ink);transition:transform .15s var(--e),background-color .15s}
.qdots button[aria-selected=true]::before{background:var(--ink);transform:scale(1.25)}
.freq h3{margin:18px 0 14px;font-size:var(--fs-lead)}
.rate{display:flex;align-items:center;gap:16px}
.rate b{font:900 clamp(56px,6vw,80px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.rate span{font-size:var(--fs-small);line-height:1.4;color:var(--ink-2)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bars li{display:grid;grid-template-columns:1fr 54px;gap:6px 10px;align-items:center;font-size:var(--fs-body)}
.bars li .bar{grid-column:1/-1;grid-row:2;background:var(--sand);height:12px}
.bars li .bar i{background:var(--terra);width:0}
.bars.in li .bar i{width:var(--w)}
.bars em{font:700 var(--fs-body)/1 var(--f-display);font-style:normal;text-align:end;font-variant-numeric:tabular-nums}
.src{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 18px}
.src button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 var(--fs-small)/1 var(--f-display);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.src button em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.src button[aria-pressed=true]{background:var(--ink);color:var(--lt)}
.src button[aria-pressed=true] em{color:var(--lt-2)}
.mq .tr{gap:14px;animation-duration:50s}
.rc{width:300px;flex:none;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--rule-l);display:grid;gap:10px;align-content:start}
.rc p{font-size:var(--fs-body);line-height:1.45;color:var(--ink)}
.rc small{font-size:var(--fs-small);color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
.rc small b{color:var(--ink);font-weight:700}
.rc:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(14,42,59,.12)}
@media(max-width:800px){.rev-top{grid-template-columns:1fr}.qbig-in{min-height:130px}.rc{width:260px}}

/* ---------- area (dark; half sun) ---------- */
.area{background:var(--dark);color:var(--lt)}
.area::before{content:"";position:absolute;top:-1px;inset-inline-start:50%;width:260px;height:130px;margin-inline-start:-130px;border-radius:0 0 260px 260px;background:var(--paper)}
.area::after{content:"";position:absolute;top:-1px;inset-inline-start:50%;width:150px;height:75px;margin-inline-start:-75px;border-radius:0 0 150px 150px;background:var(--sun)}
.area h2{margin-top:30px}
.area-g{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(20px,3vw,44px);margin-top:34px;align-items:stretch}
.area-c{display:grid;gap:18px;align-content:start}
.area-p{font-size:var(--fs-lead);line-height:1.5;max-width:30ch}
.sel{position:relative;display:block}
.sel select{appearance:none;width:100%;min-height:56px;padding:0 20px;padding-inline-end:52px;border-radius:14px;border:2px solid var(--rule-d);background:#12324A;color:var(--lt);font:700 var(--fs-lead)/1 var(--f-display);cursor:pointer}
.sel select option{color:var(--ink)}
.sel .ic{position:absolute;inset-inline-end:16px;top:18px;pointer-events:none}
.verdict{display:grid;gap:4px;padding:20px;border-radius:var(--r);background:var(--sun);color:var(--ink)}
.v-from{font:600 var(--fs-body)/1.3 var(--f-display)}
.v-km{display:flex;align-items:baseline;gap:8px}
.v-km b{font:900 clamp(48px,5vw,68px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.v-km span{font:700 var(--fs-lead)/1 var(--f-display)}
.v-eta{font:600 var(--fs-body)/1.4 var(--f-body)}
.verdict.sw{animation:swap .35s var(--e) backwards}
.bases{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-small);color:var(--lt)}
.bases li{display:flex;gap:10px;align-items:center}
.bases i{width:14px;height:14px;border-radius:50%;background:var(--sun);border:3px solid var(--dark);box-shadow:0 0 0 2px var(--sun)}
.bases i.b2{background:var(--lt);box-shadow:0 0 0 2px var(--lt)}
.map{min-height:460px;border-radius:var(--r);overflow:hidden;border:2px solid var(--rule-d);background:#12324A}
.map .maplibregl-ctrl-attrib{font-size:var(--fs-small)}
.pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sun);border:4px solid var(--ink);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.pin.b2{background:#fff}
.pin.me{background:var(--terra);border-color:#fff;animation:pinbounce .6s var(--e)}
@keyframes pinbounce{from{transform:rotate(-45deg) translate(10px,-10px) scale(.4)}}
@media(max-width:900px){.area-g{grid-template-columns:1fr}.map{min-height:300px}.area::before{width:200px;height:100px;margin-inline-start:-100px}.area::after{width:116px;height:58px;margin-inline-start:-58px}}

/* ---------- guarantee (cream) ---------- */
.guar{background:var(--paper)}
.guar .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.seal{width:clamp(170px,22vw,260px);animation:wob 7s ease-in-out infinite}
.seal svg{width:100%;height:auto;display:block;overflow:visible}
.seal text{font-family:var(--f-display)}
@keyframes wob{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) scale(1.03)}}
.g-txt h2{max-width:22ch}
.g-rows{margin:30px 0 0;display:grid;gap:0;border-top:2px solid var(--ink)}
.g-rows>div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--rule-l);align-items:baseline}
.g-rows dt{font:800 var(--fs-lead)/1.2 var(--f-display)}
.g-rows dd{margin:0;font-size:var(--fs-lead);line-height:1.5;max-width:46ch}
@media(max-width:800px){.guar .wrap{grid-template-columns:1fr;justify-items:start}.seal{width:150px}.g-rows>div{grid-template-columns:1fr;gap:4px}}

/* ---------- faq: answers with pictures (sky) ---------- */
.faq{background:var(--sky)}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.qc{position:relative;padding:22px 24px 26px;border-radius:var(--r);background:#fff;display:grid;gap:10px;align-content:start;transition:transform .25s var(--e),box-shadow .25s var(--e);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.qc:hover{box-shadow:0 24px 44px rgba(14,42,59,.18)}
.qc .ci{width:124px;height:124px;margin:-6px 0 -8px -8px;filter:drop-shadow(0 8px 10px rgba(14,42,59,.24));animation:bob 5.5s ease-in-out infinite;animation-delay:calc(var(--k,0) * -.9s)}
.qc h3{font-size:var(--fs-lead);line-height:1.3}
.qc p{font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}
.js .qc{opacity:0;translate:0 26px;transition:opacity .6s var(--e),translate .6s var(--e),transform .25s var(--e),box-shadow .25s var(--e);transition-delay:calc(var(--k,0) * 80ms),calc(var(--k,0) * 80ms),0s,0s}
.js .qa.in .qc{opacity:1;translate:0 0}
.qa-more{margin-top:28px;font:600 var(--fs-lead)/1.4 var(--f-display)}
@media(max-width:900px){.qa{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.qa{grid-template-columns:1fr;gap:12px}.qc{grid-template-columns:84px 1fr;column-gap:14px;padding:16px}.qc .ci{grid-row:1/span 2;width:84px;height:84px;margin:0}.qc h3{align-self:end}}

/* ---------- booking (sun) ---------- */
.quote{background:var(--sun);color:var(--ink);padding-bottom:calc(var(--sec) + 40px)}
.q-sub{margin-top:14px;font-size:var(--fs-lead);max-width:40ch}
.qb{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px rgba(14,42,59,.28);max-width:1040px;position:relative}
.qb-prev{background:var(--sky);display:grid;min-height:400px;position:relative;overflow:hidden}
.pv{position:absolute;inset:0;display:grid;place-items:center;animation:swap .4s var(--e) backwards}
.pv[hidden]{display:none}
.pv>img{width:100%;height:100%;object-fit:cover;animation:kb2 12s ease-in-out infinite alternate}
@keyframes kb2{to{transform:scale(1.08)}}
.pv>div{width:100%;height:100%;display:grid;place-items:center}
#pvCut{background:#0A2030;padding:14px}
.when{display:grid;justify-items:center;gap:8px;padding:20px;text-align:center}
.when img{width:min(220px,60%);filter:drop-shadow(0 8px 10px rgba(14,42,59,.24));animation:bob 5s ease-in-out infinite}
.when b{font:900 clamp(28px,3vw,38px)/1.1 var(--f-display)}
.when span{font-size:var(--fs-body);color:var(--ink-2)}
.tkt{width:min(330px,88%);padding:24px;border-radius:14px;background:#fff;border:2px dashed var(--ink);display:grid;gap:12px;transform:rotate(-2deg)}
.tkt b{font:800 var(--fs-h3)/1.2 var(--f-display)}
.tkt dl{margin:0;display:grid;gap:8px}
.tkt dl div{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-body)}
.tkt dt{color:var(--ink-2)}.tkt dd{margin:0;font-weight:700;text-align:end}
.tkt i{height:10px;border-radius:99px;background:var(--sun)}
.qb-steps{padding:clamp(22px,3vw,40px);display:grid;gap:22px;align-content:start}
.dots{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.dots li{flex:1;height:6px;border-radius:99px;background:var(--sand);transition:background-color .3s}
.dots li.on{background:var(--terra)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font:800 clamp(24px,2.6vw,30px)/1.2 var(--f-display);margin-bottom:18px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--ink);background:#fff;font:700 var(--fs-body)/1 var(--f-display);transition:transform .15s var(--e),background-color .15s}
.chips input:checked+span{background:var(--ink);color:var(--lt);transform:scale(1.03)}
.chips input:focus-visible+span{outline:3px solid var(--terra);outline-offset:3px}
.chips label:hover span{transform:translateY(-2px)}
.up{display:grid;place-items:center;margin-top:16px;min-height:72px;border:2px dashed var(--ink);border-radius:var(--r);background:#fff;cursor:pointer;font:700 var(--fs-body)/1.3 var(--f-display);text-align:center;padding:12px;position:relative;transition:background-color .15s}
.up:hover{background:var(--sand)}
.up input{position:absolute;opacity:0;width:1px;height:1px}
.fld{display:grid;gap:10px}
.fld input{min-height:52px;padding:0 18px;border-radius:12px;border:2px solid var(--ink);background:#fff;font:600 var(--fs-body)/1 var(--f-body)}
.fld input.tel{text-align:end}
.fld input::placeholder{color:var(--ink-2)}
.cns{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:var(--fs-small);line-height:1.4;cursor:pointer}
.cns input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}
.err{min-height:20px;margin-top:8px;color:#8E2A10;font-weight:700;font-size:var(--fs-small)}
.qb-nav{display:flex;gap:10px;align-items:center}
.qb-nav .btn{min-height:52px}
.done{padding:18px 20px;border-radius:14px;background:var(--ink);color:var(--lt);animation:swap .4s var(--e) backwards}
.done b{font:800 var(--fs-lead)/1.2 var(--f-display);color:var(--sun)}
.done p{margin-top:6px;font-size:var(--fs-body)}
@media(max-width:800px){.qb{grid-template-columns:1fr}.qb-prev{min-height:0;aspect-ratio:16/10}}

/* ---------- footer ---------- */
.ft{background:var(--dark-2);color:var(--lt);padding:clamp(48px,6vw,80px) 0 calc(24px + 70px)}
.ft-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,48px)}
.ft-brand{display:grid;gap:16px;align-content:start;justify-items:start}
.ft-brand p{font-size:var(--fs-lead);line-height:1.5;max-width:26ch;color:var(--lt)}
.ft-ic{display:flex;gap:10px;flex-wrap:wrap}
.ft-ic a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--rule-d);color:var(--lt)}
.ft-ic a:hover{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.ft-col{display:grid;gap:10px;align-content:start;font-size:var(--fs-body)}
.ft-col h3{font:800 var(--fs-body)/1 var(--f-display);color:var(--sun);margin-bottom:6px}
.ft-col a{text-decoration:none;color:var(--lt);width:fit-content;padding:2px 0}
.ft-col a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-col span{color:var(--lt-2);line-height:1.5}
.ft-col .tl{font:800 var(--fs-h3)/1 var(--f-display);color:var(--lt);display:block;text-align:end}
.ft-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--rule-d);align-items:center}
.demo{font-size:var(--fs-small);color:var(--lt-2)}
.ft-legal{display:flex;gap:6px;flex-wrap:wrap}
.ft-legal button{min-height:44px;padding:0 12px;border:0;background:none;color:var(--lt);font:600 var(--fs-small)/1 var(--f-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media(max-width:900px){.ft-g{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}

/* ---------- bottom bar on phones ---------- */
.bbar{display:none}
@media(max-width:700px){
  .bbar{position:fixed;inset:auto 0 0 0;z-index:84;display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);box-shadow:0 -1px 0 var(--rule-l),0 -10px 30px rgba(7,23,31,.25);transform:translateY(110%);transition:transform .25s var(--e)}
  .bbar.on{transform:none}
  .bbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;border:2px solid var(--ink);text-decoration:none;font:700 var(--fs-small)/1 var(--f-display);color:var(--ink)}
  .bbar a.main{background:var(--sun);border-color:var(--sun)}
  .bbar .ic{width:18px;height:18px}
}

/* ---------- assistant: Shira structure, re-skinned (sun orb, drop symbol) ---------- */
@property --sh-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes shSpin{to{--sh-a:360deg}}
@keyframes shDot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-3px);opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
.sh-orb{display:block;position:relative;flex:none;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),rgba(255,255,255,0) 42%),radial-gradient(circle,rgba(14,42,59,.05),rgba(14,42,59,.55)),
  conic-gradient(from var(--sh-a),#0E2A3B,#2E6485 16%,#4DA3C7 30%,#FFE9A8 46%,#FFB81C 58%,#E4572E 76%,#0E2A3B);animation:shSpin 8s linear infinite}
.sh-orb::before{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;border-radius:0 60% 60% 60%;background:#fff;transform:rotate(-45deg) translate(1px,1px);box-shadow:0 0 12px rgba(255,255,255,.7);animation:drop 2.4s ease-in-out infinite}
@keyframes drop{50%{transform:rotate(-45deg) translate(1px,1px) scale(.82)}}
.sh{direction:ltr;position:fixed;right:28px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;transition:bottom .25s var(--e),opacity .25s var(--e),transform .25s var(--e)}
.sh>*{pointer-events:auto}
.sh.hid{opacity:0;transform:translateY(16px);pointer-events:none}
.sh.hid>*{pointer-events:none}
.sh-panel,.sh-tease{direction:var(--tdir)}
body.ck-on .sh{opacity:0;pointer-events:none}
.sh-launch{width:60px;height:60px;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .15s var(--e)}
.sh-launch .sh-orb{width:60px;height:60px}
.sh-launch .sh-orb::before{width:18px;height:18px}
.sh-launch:hover{transform:translateY(-2px) scale(1.04)}
.sh-launch:active{transform:scale(.95)}
.sh-tease{display:flex;align-items:flex-start;gap:10px;max-width:260px;padding:12px 14px;background:var(--paper);color:var(--ink);border-radius:14px;border-bottom-right-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:var(--fs-small);line-height:1.45;cursor:pointer;opacity:0;transform:translateY(6px);pointer-events:none!important;transition:opacity .2s var(--e),transform .2s var(--e)}
.sh-tease.on{opacity:1;transform:none;pointer-events:auto!important}
.sh-tease b{display:block;font-size:var(--fs-small)}
.sh-tease button{flex:none;border:0;background:none;color:var(--ink-2);font-size:20px;line-height:1;padding:0 2px;cursor:pointer}
.sh-panel{width:360px;max-width:calc(100vw - 32px);height:min(560px,calc(100dvh - 130px));display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden;transition:opacity .2s var(--e),transform .2s var(--e)}
.sh-panel[hidden]{display:flex!important;opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;visibility:hidden}
.sh-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule-l)}
.sh-hd .sh-orb{width:34px;height:34px}
.sh-hd .sh-orb::before{width:11px;height:11px}
.sh-hd div{flex:1;line-height:1.3}
.sh-hd b{display:block;font-size:var(--fs-body)}
.sh-hd small{font-size:var(--fs-small);color:var(--ink-2)}
.sh-hd small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#3E9B57;margin-inline-end:6px;vertical-align:1px}
.sh-x{width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.sh-x:hover{background:var(--sand)}
.sh-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.sh-m{max-width:86%;padding:10px 14px;border-radius:14px;font-size:var(--fs-small);line-height:1.55;animation:pop .2s var(--e)}
.sh-m.bot{align-self:flex-start;background:var(--sand);border-start-start-radius:4px}
.sh-m.me{align-self:flex-end;background:var(--ink);color:var(--lt);border-start-end-radius:4px}
.sh-m.typing{display:flex;gap:4px;padding:14px}
.sh-m.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);animation:shDot 1s ease-in-out infinite}
.sh-m.typing i:nth-child(2){animation-delay:.15s}.sh-m.typing i:nth-child(3){animation-delay:.3s}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px}
.sh-chips button{border:1px solid #C9B58A;background:#fff;color:var(--ink);border-radius:999px;padding:8px 13px;font-size:var(--fs-small);cursor:pointer}
.sh-chips button:hover{border-color:var(--ink)}
.sh-mic{display:flex;flex-direction:column;align-items:center;gap:8px;margin-block:6px 2px;font-size:var(--fs-small);color:var(--ink-2)}
.sh-mic button{border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.sh-mic .sh-orb{width:64px;height:64px}
.sh-mic .sh-orb::before{width:20px;height:20px}
.sh-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rule-l)}
.sh-in input{flex:1;min-width:0;height:44px;border:1px solid #C9B58A;border-radius:999px;padding:0 16px;font-size:var(--fs-body);background:#fff;color:var(--ink)}
.sh-in button{width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center}
.sh-in .ic{width:18px;height:18px;transform:scaleX(-1)}
.sh-open .sh-tease{display:none}
@media(max-width:700px){.sh{right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}.sh-panel{height:min(520px,calc(100dvh - 190px))}.sh-tease,.sh-tease.on{display:none!important}}

/* compliance blocks, re-themed */
.ck{border-radius:14px}
.ax>button{background:var(--ink);border:2px solid var(--sun);border-inline-start:0}
@media(max-width:700px){.ck{bottom:calc(76px + env(safe-area-inset-bottom,0px))}.ax{top:40%}}

.ask-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 6px;border:0;border-radius:999px;background:var(--ink);color:var(--lt);font:700 var(--fs-small)/1 var(--f-display);cursor:pointer;box-shadow:0 6px 18px rgba(14,42,59,.25)}
.ask-chip .sh-orb{width:28px;height:28px}.ask-chip .sh-orb::before{width:9px;height:9px}
/* in a right-to-left page the track grows to the left, so it must travel to the right */
@keyframes mqr{to{transform:translateX(50%)}}
[dir=rtl] .mq>.tr{animation-name:mqr}