/* Qnumara v7 · CoachHub-level energy with Qnumara's own story and colours (Hugo, Nov 6, 2026: v6 felt "boring and dull,
   too protocolary"). The CMO document's hues, turned up: midnight navy for text, a deep ocean blue for the big panels,
   vivid teal and gold for the highlights, ivory and soft tints for calm panels. Bold sans headlines, rounded colour panels,
   a photo mosaic, tabs that move. Still "beneath the surface". Shared by every page; viva.js only adds .viva. */
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope Fallback";src:local("Arial");font-weight:400 500;size-adjust:103.3%;ascent-override:103.2%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 800;size-adjust:103%;ascent-override:103.5%;descent-override:29.1%;line-gap-override:0%}
@font-face{font-family:"Jakarta Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 800;size-adjust:100.8%;ascent-override:102%;descent-override:22%;line-gap-override:0%}

:root{
  /* the document's five, plus their livelier working shades */
  --navy:#101B2D; --ivory:#F6F3EC; --teal:#5D8F84; --gold:#C8A96B; --charcoal:#262A2E;
  --deep:#0E2A47; --sea:#0F4C6E; --navy-3:#0B1321;
  --teal-v:#2FC4B2; --teal-l:#7FE0D2; --teal-d:#17766B; --tint:#E6F4F1;
  --gold-v:#F0B648; --gold-l:#F5C770; --gold-t:#FFF2D6;
  --white:#FFFFFF; --muted:#5A5F66; --soft:#C9D6E3; --softer:#E3EBF3;
  --line:rgba(16,27,45,.12); --line-l:rgba(255,255,255,.16);
  --shade:14,42,71; --d1:var(--gold-v); --d2:var(--teal-d);
  --pad:clamp(20px,5.4vw,88px); --head:72px; --inset:clamp(8px,1vw,14px); --r:clamp(22px,2.4vw,34px); --ease:cubic-bezier(.16,.84,.3,1);
  --sans:"Manrope","Manrope Fallback",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
@media(min-width:1100px){:root{--head:80px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px);-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--charcoal);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px;border-radius:6px}
.deep :focus-visible,.foot :focus-visible,.sheet :focus-visible,.phead :focus-visible{outline-color:var(--teal-l)}
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--white);color:var(--navy);padding:10px 14px;border-radius:8px;transition:top .2s}
.skip:focus{top:12px}

/* type: bold sans, one highlighted phrase per headline */
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;text-wrap:balance;color:var(--navy)}
h1{font-size:clamp(40px,min(4.9vw,8.6vh),78px);line-height:1.02;letter-spacing:-.04em}
h2{font-size:clamp(32px,3.9vw,60px);line-height:1.04}
h3{line-height:1.15}
h1 em,h2 em,.motto em{font-style:normal;color:var(--teal-d)}
.deep h1,.deep h2,.deep h3{color:var(--white)}
.deep h1 em,.deep h2 em,.deep .motto em{color:var(--gold-v)}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.5;text-wrap:pretty}
.mono{display:flex;align-items:center;gap:12px;font:500 12.5px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:var(--tint);color:var(--teal-d);font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.deep .chip{background:rgba(255,255,255,.1);color:var(--teal-l)}
.sec{padding-block:clamp(64px,7vw,112px)}
.sec.tight{padding-block:var(--inset)}
/* sections below the opening are laid out only when they come near, so the first screen paints fast on phones */
main>.sec,.talk,.foot{content-visibility:auto;contain-intrinsic-size:auto 900px}
.sec-head{max-width:980px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{margin-top:16px}
.sec-head .lead{margin-top:16px;max-width:36em;color:var(--muted)}
.deep .sec-head .lead,.deep .lead{color:var(--soft)}

/* rounded colour panels, inset from the edges */
.panel{margin-inline:var(--inset);border-radius:var(--r);overflow:hidden;position:relative;isolation:isolate}
.panel.deep{color:var(--white);background:radial-gradient(70% 90% at 92% 8%,rgba(47,196,178,.34),rgba(47,196,178,0) 60%),radial-gradient(60% 80% at 0 100%,rgba(240,182,72,.16),rgba(240,182,72,0) 62%),linear-gradient(160deg,var(--deep) 0,var(--sea) 100%)}
.panel.tint{background:var(--tint)}

/* buttons: vivid gold is the call to action */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px;border-radius:999px;background:var(--gold-v);color:var(--navy);font-weight:800;font-size:17px;text-decoration:none;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);background:var(--gold-l);box-shadow:0 14px 28px -14px rgba(240,182,72,.7)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.deep{background:var(--deep);color:var(--white)}
.btn.deep:hover{background:var(--sea);box-shadow:0 14px 28px -14px rgba(14,42,71,.7)}
.link{display:inline-flex;gap:8px;text-decoration:none;border-bottom:2px solid var(--gold-v);padding-bottom:2px;font-weight:800;color:var(--navy)}

/* logo: the wordmark keeps the logo's own letters (Plus Jakarta Sans ExtraBold) */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.mark{width:36px;height:34px}
.wm{font-family:"Plus Jakarta Sans","Jakarta Fallback",var(--sans);font-weight:800;font-size:27px;letter-spacing:-.05em;line-height:1;padding-bottom:3px}
/* top of the page: mark + "numara" read as one word, Qnumara (the mark is the Q) */
.logo.lock{align-items:flex-end;gap:3px}
.lock .wm{padding-bottom:1px}

/* header: always light, so the colour lives in the panels */
.top{position:fixed;inset:0 0 auto;z-index:40;color:var(--navy)}
.top::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.96);transition:box-shadow .3s}
.top.solid::before{box-shadow:0 1px 0 var(--line)}
.bar{position:relative;display:flex;align-items:center;gap:20px;height:var(--head)}
.bar .logo{margin-right:auto}
.nav{display:none;align-items:center;gap:4px;font-weight:700;font-size:15.5px}
.nav>a,.nav .dd>button{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background .2s}
.nav>a:hover,.nav .dd>button:hover,.nav .dd.open>button{background:var(--tint)}
.nav [aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold-v)}
.dd{position:relative}
.dd>button svg{width:12px;height:12px;transition:transform .25s}
.dd.open>button svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:-8px;min-width:320px;padding:10px;border-radius:18px;background:var(--white);color:var(--navy);box-shadow:0 30px 60px -24px rgba(16,27,45,.35),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translate3d(0,8px,0);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
.dd.open .menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
.menu.r{left:auto;right:-8px}
.menu a{display:grid;gap:2px;padding:11px 12px;border-radius:12px;text-decoration:none}
.menu a:hover,.menu a:focus-visible{background:var(--tint)}
.menu b{font-size:15px}
.menu small{font-size:13px;font-weight:500;color:var(--muted);line-height:1.35}
.cta{display:none}
.top .cta{display:none}
.menu-btn{font-weight:800;font-size:16px;padding:10px 0 10px 12px}
@media(min-width:1180px){.nav{display:flex}.top .cta{display:inline-flex;min-height:46px;padding:0 20px;font-size:15.5px}.top .menu-btn{display:none}}
.sheet{position:fixed;inset:0;z-index:50;background:var(--deep);color:var(--white);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;overflow-y:auto;--d2:var(--teal-l)}
.sheet.open{opacity:1;visibility:visible;transition:opacity .3s}
.sheet nav{display:grid;gap:2px;margin-top:3vh;padding-bottom:40px}
.sheet nav a{font-weight:800;font-size:clamp(26px,7.4vw,34px);letter-spacing:-.03em;text-decoration:none;padding:5px 0}
.sheet nav .sub{font-weight:600;font-size:16px;letter-spacing:0;color:var(--soft);padding:6px 0 6px 2px}
.sheet nav .lab{margin-top:16px;color:var(--teal-l)}
.sheet nav a.hot{color:var(--gold-v)}

/* hero: the problem and the fix, with a photo mosaic */
.hero2{padding-top:calc(var(--head) + var(--inset))}
.hero-panel{padding-block:clamp(44px,6vw,92px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero-copy h1{margin:22px 0 22px}
.hero-copy .lead{max-width:33em;color:var(--softer)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:30px}
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:1/1.02}
.bento figure,.bento .stat{border-radius:22px;overflow:hidden;min-height:0}
.bento img{width:100%;height:100%;object-fit:cover}
.bento .stat{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(16px,1.8vw,24px);background:var(--ivory);color:var(--navy)}
.stat b{font-size:clamp(46px,4.6vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--teal-d)}
.stat p{font-size:clamp(14px,1.05vw,16px);line-height:1.35;font-weight:600}
.stat a{font:500 11.5px/1.3 var(--mono);color:var(--muted)}
.bento .b4{background:var(--gold-v)}

/* northern lights behind the opening (Hugo, Nov 6): soft ribbons that drift. Only transform and opacity move,
   the glow is painted once (gradients, no animated blur), and a left-side shade keeps the words readable. */
.panel.deep.hero-panel{background:linear-gradient(160deg,#0B2240 0,#0E2A47 45%,#0D3A5A 100%)}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--tw:1200px;--th:520px}
.aurora::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,34,64,.5) 0,rgba(11,34,64,.16) 42%,rgba(11,34,64,0) 62%),linear-gradient(0deg,rgba(11,34,64,.6) 0,rgba(11,34,64,0) 50%)}
/* two curtains painted once (src/art/build-aurora.mjs); each tile repeats sideways without a seam */
.aurora .sway{position:absolute;left:0;right:0;top:-12%;height:var(--th);transform-origin:50% 75%;opacity:0;transition:opacity 2.4s ease}
.aurora.on .sway{opacity:1}
.aurora .s2{top:-21%}
.aurora .flow{position:absolute;left:0;top:0;width:calc(var(--tw) * 2);height:100%;background-repeat:repeat-x;background-size:var(--tw) 100%;will-change:transform,opacity}
.aurora.on .f1{background-image:url(img/v6/aurora-a.webp)}
.aurora.on .f2{background-image:url(img/v6/aurora-b.webp)}
.aurora .ember{position:absolute;left:-10%;bottom:-35%;width:70%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,182,72,.22),rgba(240,182,72,0))}
/* natural motion: the curtains drift sideways at different speeds, sway from their lower edge, and brighten and dim on
   their own slow rhythms (odd periods, so the pattern never visibly repeats). Only transform and opacity move. */
.viva .aurora .f1{animation:drift-l 86s linear infinite,glow1 13s ease-in-out infinite alternate}
.viva .aurora .f2{animation:drift-r 131s linear infinite,glow2 17s ease-in-out infinite alternate;animation-delay:0s,-6s}
.viva .aurora .s1{animation:sway1 23s ease-in-out infinite alternate}
.viva .aurora .s2{animation:sway2 31s ease-in-out infinite alternate;animation-delay:-11s}
.viva .aurora .ember{animation:glow2 19s ease-in-out infinite alternate}
@keyframes drift-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes drift-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes glow1{0%{opacity:.72}40%{opacity:1}70%{opacity:.84}100%{opacity:.97}}
@keyframes glow2{0%{opacity:.55}35%{opacity:.9}65%{opacity:.68}100%{opacity:1}}
@keyframes sway1{0%{transform:skewX(-6deg) scaleY(.94)}50%{transform:skewX(2deg) scaleY(1.06)}100%{transform:skewX(5deg) scaleY(.98)}}
@keyframes sway2{0%{transform:skewX(5deg) scaleY(1.04)}50%{transform:skewX(-3deg) scaleY(.94)}100%{transform:skewX(-6deg) scaleY(1.08)}}
@media(max-width:760px){.aurora{--tw:970px;--th:420px}.aurora .sway{top:-10%}.aurora .s2{top:-18%}.aurora::after{background:linear-gradient(180deg,rgba(11,34,64,0) 0,rgba(11,34,64,.3) 32%,rgba(11,34,64,.72) 100%)}}

/* moving strip of capabilities */
.ticker{overflow:hidden;padding-block:clamp(16px,2vw,24px);border-bottom:1px solid var(--line)}
.track{display:flex;width:max-content}
.track span{display:flex;flex:none}
.track b{display:inline-flex;align-items:center;font:500 13px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.track b::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-v);margin:0 22px}
.track b:nth-child(even)::after{background:var(--teal-v)}

/* Savita's concept images (site.js adds .bg when the section is near, so they never slow the opening) */
.surface.bg .above{background-image:url(img/v6/surface-sky.webp)}
.surface.bg .beneath{background-image:linear-gradient(180deg,rgba(14,42,71,.4) 0,rgba(14,42,71,.62) 45%,rgba(14,42,71,.9) 100%),url(img/v6/surface-deep.webp)}
.talk.bg .talk-panel{background-image:radial-gradient(70% 90% at 92% 8%,rgba(47,196,178,.3),rgba(47,196,178,0) 60%),linear-gradient(160deg,rgba(14,42,71,.92),rgba(15,76,110,.84)),url(img/v6/layers.webp);background-size:cover;background-position:center}

/* the surface model */
.surface{position:relative;border-radius:28px;overflow:hidden;isolation:isolate}
.above{background:linear-gradient(180deg,#F6EBD6,#EFE3CC) center bottom/cover no-repeat;padding:clamp(28px,3.4vw,52px) clamp(22px,3.6vw,58px) clamp(48px,5vw,76px)}
.above .mono{color:var(--muted)}
.seen{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:16px;font-size:clamp(18px,1.6vw,24px);font-weight:700;color:#3C4250}
.beneath{position:relative;color:var(--white);background:linear-gradient(180deg,rgba(14,42,71,.4) 0,rgba(14,42,71,.62) 45%,rgba(14,42,71,.9) 100%) center top/cover no-repeat,#1C3644;padding:clamp(40px,4.4vw,66px) clamp(22px,3.6vw,58px) clamp(34px,4vw,60px)}
.beneath .mono{color:var(--teal-l)}
.causes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);margin-top:20px}
.causes a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 14px;border-top:1px solid var(--line-l);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;line-height:1.12;text-decoration:none;transition:color .3s}
.causes a::after{content:"\2192";font-size:18px;opacity:.5;transition:transform .35s var(--ease),opacity .3s}
@media(hover:hover){.causes a:hover{color:var(--gold-v)}.causes a:hover::after{opacity:1;transform:translateX(4px)}}
.here{display:flex;align-items:center;gap:12px;margin-top:clamp(24px,3vw,40px);font:500 12.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-v)}
.here .mark{width:30px;height:28px;color:var(--white);--d2:var(--teal-l)}
.familiar{margin-top:clamp(36px,4vw,56px)}
.familiar .lead{margin-bottom:16px;font-weight:700;color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips a{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px var(--line);text-decoration:none;font-weight:700;font-size:16.5px;color:var(--navy);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.chips a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal-v);flex:none}
.chips a:hover{transform:translateY(-3px);background:var(--tint);box-shadow:0 0 0 1.5px var(--teal-d),0 16px 30px -18px rgba(14,42,71,.45)}

/* three ways we fix it */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.tile{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.tile:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(14,42,71,.5)}
.tile.tone1{background:var(--deep);color:var(--white)}.tile.tone1 h3{color:var(--white)}
.tile.tone2{background:var(--tint)}
.tile.tone3{background:var(--gold-t)}
.tile-pic{aspect-ratio:16/9;overflow:hidden}
.tile-pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile:hover .tile-pic img{transform:scale(1.05)}
.tile-in{position:relative;display:flex;flex-direction:column;gap:10px;padding:34px 26px 28px;flex:1}
.ico{position:absolute;top:-28px;left:22px;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--gold-v);color:var(--navy);box-shadow:0 10px 24px -12px rgba(16,27,45,.5)}
.tone2 .ico{background:var(--teal-v)}.tone3 .ico{background:var(--deep);color:var(--gold-v)}
.ico svg{width:28px;height:28px}
.kicker{font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
.tile .kicker{margin-top:6px}
.tone1 .kicker{color:var(--teal-l)}
.tile h3{font-size:clamp(22px,1.8vw,27px)}
.fixline{font-size:17px;line-height:1.45}
.tone1 .fixline{color:var(--softer)}
.for{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.for b{padding:3px 10px;border-radius:999px;background:rgba(16,27,45,.07);color:var(--navy);font-weight:700}
.tone1 .for{color:var(--soft)}.tone1 .for b{background:rgba(255,255,255,.12);color:var(--white)}
.more{margin-top:auto;padding-top:8px;display:inline-flex;gap:8px;align-self:flex-start;font-weight:800;font-size:16px;text-decoration:none;color:var(--navy);background:linear-gradient(var(--gold-v),var(--gold-v)) 0 100%/100% 2px no-repeat}
.tone1 .more{color:var(--white)}
.more span{transition:transform .35s var(--ease)}
.more:hover span{transform:translateX(4px)}

/* who we work with: buyer tabs (site.js switches them; without it all three show) */
.who-panel{padding-block:clamp(48px,6vw,88px)}
.buyers{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:start}
.who-list{display:grid;gap:12px}
.who-list button{display:grid;gap:6px;text-align:left;padding:20px 22px;border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line);transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.who-list button small{font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d)}
.who-list button b{font-size:clamp(19px,1.5vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.who-list button:hover{transform:translateX(4px)}
.who-list button[aria-selected="true"]{background:var(--deep);box-shadow:0 22px 40px -24px rgba(14,42,71,.8)}
.who-list button[aria-selected="true"] small{color:var(--teal-l)}.who-list button[aria-selected="true"] b{color:var(--white)}
.who-panels{display:grid}
.who-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start;padding:clamp(22px,2.6vw,34px);border-radius:24px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(14,42,71,.5)}
.js .who-p{grid-area:1/1;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .who-p[data-off]{opacity:0;transform:translate3d(0,10px,0);pointer-events:none;visibility:hidden}
html:not(.js) .who-p+.who-p{margin-top:14px}
.pain{font-size:clamp(18px,1.45vw,21px);font-weight:700;line-height:1.4;color:var(--navy)}
.who-copy{display:grid;gap:14px}
.who-copy .mono{color:var(--teal-d);margin-top:4px}
.who-copy ul{display:grid;gap:10px}
.who-copy li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.45}
.who-copy li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--teal-v)}
.who-copy .btn{justify-self:start;margin-top:6px}
.mini{border-radius:18px;background:var(--ivory);padding:18px;display:grid;gap:14px;align-content:start}
.mini-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-top b{font-size:14.5px;color:var(--navy)}
.mini-top span{padding:3px 9px;border-radius:999px;background:var(--gold-t);color:var(--navy);font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mini-note{font-size:12.5px;color:var(--muted)}
.mini .pair div{grid-template-columns:92px minmax(0,1fr)}
.mini-heat{grid-template-columns:84px repeat(4,minmax(0,1fr))}
.mini-heat i{height:30px}
.heat i.x1{background:var(--tint);color:var(--navy)}.heat i.x2{background:#9FD9CF;color:var(--navy)}.heat i.x3{background:var(--gold-v);color:var(--navy)}.heat i.x4{background:var(--deep);color:var(--white)}
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:150px}
.bars span{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%}
.bars i{align-self:end;display:block;height:var(--v);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--teal-v),var(--teal-d))}
.bars span:last-child i{background:linear-gradient(180deg,var(--gold-l),var(--gold-v))}
.bars small{font:500 11px var(--mono);color:var(--muted);text-align:center}

/* the people lifecycle: problem first, then the fix */
.life{display:grid;gap:18px}
.life-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;isolation:isolate}
.life-line{position:absolute;left:10%;right:10%;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,var(--teal-v),var(--gold-v));opacity:.5;z-index:-1}
.life-track button{position:relative;display:grid;gap:4px;justify-items:center;padding:16px 10px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-weight:800;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;color:var(--navy);transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.life-track button span{font:500 11.5px var(--mono);letter-spacing:.08em;color:var(--teal-d)}
.life-track button:hover{transform:translateY(-3px)}
.life-track button[aria-selected="true"]{background:var(--gold-v);box-shadow:0 18px 30px -18px rgba(240,182,72,.9)}
.life-track button[aria-selected="true"] span{color:var(--navy)}
.life-panels{display:grid}
.life-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);padding:clamp(22px,2.6vw,36px);border-radius:24px;background:var(--ivory)}
.js .life-p{grid-area:1/1;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .life-p[data-off]{opacity:0;transform:translate3d(0,10px,0);pointer-events:none;visibility:hidden}
html:not(.js) .life-p+.life-p{margin-top:12px}
.life-p .mono{color:var(--teal-d);margin-bottom:10px}
.life-p .pain{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.life-p p{font-size:17px;line-height:1.5}
.via{margin-top:12px;font-weight:700;color:var(--teal-d)}

/* evidence band: the copy stays while the numbers pass */
.band{padding-top:0}
.band-panel{padding-block:clamp(56px,7vw,108px)}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.band-copy{position:sticky;top:calc(var(--head) + 40px)}
.band-copy h2{margin:16px 0 18px}
.stats li{padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line)}
.stats li:first-child{border-top:0;padding-top:0}
.stats b{display:block;font-size:clamp(64px,7.4vw,120px);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--teal-d)}
.stats p{margin-top:10px;font-size:18px;line-height:1.4;max-width:24em}
.stats a{display:inline-block;margin-top:10px;font:500 12px/1.4 var(--mono);color:var(--muted)}
.deep .stats li{border-color:var(--line-l)}
.deep .stats b{color:var(--gold-v)}.deep .stats li:nth-child(2) b{color:var(--teal-l)}
.deep .stats p{color:var(--softer)}.deep .stats a{color:var(--soft)}

/* how we work */
.steps-wrap{position:relative}
.steps-line{position:absolute;left:0;right:0;top:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-v),var(--gold-v));opacity:.55}
.steps-dot{position:absolute;left:0;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--gold-v);box-shadow:0 0 0 5px rgba(240,182,72,.3)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding-top:34px}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-34px;width:10px;height:10px;border-radius:50%;background:var(--teal-v)}
.steps .n{font:500 12.5px var(--mono);letter-spacing:.08em;color:var(--teal-d)}
.deep .steps .n{color:var(--teal-l)}
.steps h3{margin-top:10px;font-size:clamp(24px,2.2vw,32px)}
.steps p{margin-top:8px;font-size:16.5px;line-height:1.45;color:var(--muted)}
.deep .steps p{color:var(--soft)}
.tm{font:500 .3em var(--sans);vertical-align:super}
.motto{margin-top:clamp(44px,5vw,72px);font-weight:800;font-size:clamp(28px,3.4vw,52px);line-height:1.08;letter-spacing:-.035em;color:var(--navy);text-wrap:balance}
.deep .motto{color:var(--white)}
.method-panel{padding-block:clamp(56px,6vw,96px)}

/* the gap: you (gold) and your team (teal), as in the logo's two dots */
.rail{--s:1;--far:min(40vw,560px);margin-bottom:22px}
.rail-track{position:relative;height:clamp(58px,6vw,86px)}
.r-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--navy);opacity:.4;transform:scaleX(var(--s))}
.r-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 12.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;background:var(--white);border:1px solid var(--line);padding:6px 13px;border-radius:999px;opacity:var(--s)}
.r-you,.r-team{position:absolute;top:50%;border-radius:50%}
.r-you{left:0;width:clamp(50px,5.6vw,84px);height:clamp(50px,5.6vw,84px);margin-top:calc(clamp(50px,5.6vw,84px) / -2);background:radial-gradient(circle at 34% 30%,#FBDDA0,var(--gold-v) 74%);transform:translate3d(calc((1 - var(--s)) * var(--far)),0,0)}
.r-team{right:0;width:clamp(24px,2.6vw,40px);height:clamp(24px,2.6vw,40px);margin-top:calc(clamp(24px,2.6vw,40px) / -2);background:var(--teal-v);transform:translate3d(calc((var(--s) - 1) * var(--far)),0,0)}
.flows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px)}
.flow h3{font:600 12.5px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.flow ol{display:flex;flex-wrap:wrap;gap:8px 10px;font-size:clamp(18px,1.55vw,23px);font-weight:800;line-height:1.3;color:var(--navy)}
.flow li+li::before{content:"\2192";margin-right:10px;font-weight:400;color:var(--muted)}
.flow.lived{text-align:right}
.flow.lived ol{justify-content:flex-end}
.flow.lived li span{background:linear-gradient(rgba(240,182,72,.5),rgba(240,182,72,.5)) 0 88%/100% .38em no-repeat}

/* page heads (inner pages): a deep panel like the home opening */
.phead{position:relative;margin:calc(var(--head) + var(--inset)) var(--inset) 0;border-radius:var(--r);overflow:hidden;isolation:isolate;color:var(--white);background:radial-gradient(70% 90% at 92% 8%,rgba(47,196,178,.3),rgba(47,196,178,0) 60%),radial-gradient(60% 80% at 0 100%,rgba(240,182,72,.14),rgba(240,182,72,0) 62%),linear-gradient(160deg,var(--deep),var(--sea));padding-block:clamp(56px,7vw,110px)}
.phead h1{font-size:clamp(40px,5vw,80px);margin:20px 0 18px;max-width:15em;color:var(--white)}
.phead h1 em{color:var(--gold-v)}
.phead .chip{background:rgba(255,255,255,.1);color:var(--teal-l)}
.phead .lead{max-width:36em;color:var(--softer)}
.ln{display:block}

/* prose blocks (services, about, philosophy) */
.prose{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,90px);align-items:start;padding-block:clamp(44px,5vw,72px);border-top:1px solid var(--line)}
.prose:first-child{border-top:0;padding-top:0}
.prose h2{font-size:clamp(30px,3.4vw,50px)}
.prose .mono{color:var(--teal-d)}
.prose .body{display:grid;gap:16px;font-size:clamp(17.5px,1.3vw,20px);line-height:1.6;max-width:38em}
.prose .body ul{display:grid;gap:12px}
.prose .body li{position:relative;padding-left:26px}
.prose .body li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--teal-v)}
.prose .body b{font-weight:800;color:var(--navy)}
.quote{font-weight:800;font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-.03em;color:var(--teal-d)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--navy);font:600 12.5px var(--sans)}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pillars div{padding:20px;border-radius:18px;background:var(--tint);display:grid;gap:6px}
.pillars div:nth-child(2),.pillars div:nth-child(3){background:var(--gold-t)}
.pillars b{font-size:17.5px}
.pillars p{font-size:16px;color:var(--muted);line-height:1.45}

/* why Qnumara (home) */
.name{max-width:1040px}
.name h2{margin:16px 0 20px}
.name .lead{max-width:36em;color:var(--muted)}
.name .acts{margin-top:24px}

/* talk + form */
.talk{padding-top:0;padding-bottom:0}
.talk-panel{padding-block:clamp(48px,6vw,96px)}
.talk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,4.6vw,80px);align-items:center}
.talk h2{margin:16px 0 18px}
.talk .lead{max-width:27em}
.askq{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-l);color:var(--soft);max-width:27em}
.askq a{color:var(--gold-v);font-weight:800;text-decoration:none;border-bottom:1px solid currentColor}
.form{background:var(--white);color:var(--charcoal);border-radius:24px;padding:clamp(22px,2.6vw,36px);display:grid;gap:15px;box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field-in{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--navy)}
.field-in input,.field-in select{width:100%;min-height:50px;border-radius:12px;border:1px solid rgba(16,27,45,.22);background:var(--ivory);color:var(--charcoal);padding:0 13px;font:400 16px var(--sans);appearance:none}
.field-in select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101B2D' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field-in input:focus,.field-in select:focus{outline:2px solid var(--teal-d);outline-offset:0;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tick{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--muted)}
.tick input{width:20px;height:20px;margin-top:1px;accent-color:var(--deep);flex:none}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.form .btn{background:var(--deep);color:var(--white)}
.form .btn:hover{background:var(--sea);box-shadow:none}
#msg{font-size:15px;font-weight:700;color:var(--navy)}

/* footer */
.foot{color:var(--soft);background:var(--navy-3);margin-top:var(--inset);padding:clamp(54px,6vw,80px) 0 calc(30px + env(safe-area-inset-bottom));--d2:var(--teal-l)}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:30px}
.foot .logo{color:var(--white)}
.foot p.line{margin-top:14px;font-size:15.5px;max-width:22em}
.foot .fh{font:500 12px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--teal-l);margin-bottom:12px}
.foot ul{display:grid;gap:8px;font-size:15px}
.foot ul a{text-decoration:none}
.foot ul a:hover{color:var(--white);text-decoration:underline}
.legal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:44px;padding-top:18px;border-top:1px solid var(--line-l);font-size:14px;color:#94A0B0}
.legal kuma-signature{margin-left:auto;color:#94A0B0}

/* product views (home tabs and the demo) */
.pair{display:grid;gap:8px}
.pair div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center;font-size:14px;font-weight:700}
.pair .t{position:relative;height:12px;border-radius:99px;background:var(--tint)}
.pair .t i,.pair .t u{position:absolute;top:0;bottom:0;left:0;border-radius:99px}
.pair .t i{background:var(--deep);width:var(--s)}
.pair .t u{background:none;width:var(--o)}
.pair .t u::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--teal-v);box-shadow:0 0 0 2px var(--white)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .k-self{background:var(--deep)}.legend .k-team{background:var(--teal-v)}
.heat{display:grid;grid-template-columns:150px repeat(5,minmax(0,1fr));gap:4px;font-size:13px;align-items:center}
.heat span{font-weight:700}
.heat i{height:34px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12.5px;color:var(--white)}
.heat .h{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center}
.demo{border-radius:28px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 40px 90px -50px rgba(14,42,71,.5);overflow:hidden}
.demo-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--white),#F7F9FA)}
.demo-top .badge{padding:4px 10px;border-radius:999px;background:var(--gold-t);color:var(--navy);font:700 12px var(--sans)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--tint);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs button{white-space:nowrap;flex:none;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--white);color:var(--navy);box-shadow:0 1px 3px rgba(14,42,71,.15)}
.demo-body{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:520px}
.demo-side{border-right:1px solid var(--line);padding:16px;display:grid;gap:8px;align-content:start;background:#F8FAFA}
.demo-side small{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 6px}
.demo-side .who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;text-align:left;width:100%}
.demo-side .who:hover{background:var(--tint)}
.demo-side .who[aria-pressed="true"]{background:var(--white);box-shadow:0 0 0 1.5px var(--teal-v)}
.demo-side .who i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:var(--white);background:var(--c)}
.demo-side .who b{display:block;font-size:14.5px;color:var(--navy)}.demo-side .who em{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.demo-main{padding:22px;display:grid;gap:18px;align-content:start;min-width:0}
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dk{padding:14px 16px;border-radius:16px;background:var(--ivory);display:grid;gap:4px}
.dk small{font-size:12.5px;color:var(--muted)}.dk b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.dk span{font-size:12.5px;color:var(--muted)}.dk .up{color:var(--teal-d)}.dk .dn{color:var(--navy)}
.dpanel{padding:18px;border-radius:18px;box-shadow:0 0 0 1px var(--line);display:grid;gap:14px;min-width:0}
.dpanel h3{font-size:15.5px;letter-spacing:-.01em}
.dpanel .hint{font-size:13.5px;color:var(--muted)}
.focus{padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,var(--tint),var(--gold-t));display:grid;gap:6px}
.focus small{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d)}
.chatlog{display:grid;gap:10px;max-height:340px;overflow:auto;padding-right:4px}
.bub{max-width:82%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.bub.me{justify-self:end;background:var(--deep);color:var(--white);border-bottom-right-radius:4px}
.bub.q{background:var(--tint);border-bottom-left-radius:4px}
.prompts{display:flex;flex-wrap:wrap;gap:8px}
.prompts button{padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--deep);color:var(--deep);font-weight:700;font-size:14px}
.prompts button:hover{background:var(--deep);color:var(--white)}
.tblw{overflow-x:auto}

/* tablets and phones */
@media(max-width:1000px){
  .hero-grid,.buyers,.band-grid,.talk-grid,.prose{grid-template-columns:minmax(0,1fr)}
  .bento{aspect-ratio:auto;grid-template-rows:repeat(2,minmax(150px,26vw))}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.tile-pic{aspect-ratio:auto;height:100%}
  .ico{top:22px;left:auto;right:22px}
  .who-p{grid-template-columns:minmax(0,1fr)}
  .band-copy{position:static}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-body{grid-template-columns:minmax(0,1fr)}.demo-side{border-right:0;border-bottom:1px solid var(--line);grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);overflow-x:auto}.demo-side small{display:none}
}
@media(max-width:760px){
  body{font-size:17px}
  h1{font-size:min(10.4vw,46px)}
  .hero-copy .extra{display:none}
  .hero-copy .lead{font-size:17px}
  .bento{grid-template-rows:repeat(2,minmax(120px,38vw))}
  .bento .b4{display:none}.bento .b3{grid-column:1/-1;grid-row:2}
  .stat b{font-size:44px}
  .ticker{padding-block:14px}
  .chips a{padding:11px 16px;font-size:15px}
  .causes{grid-template-columns:minmax(0,1fr)}
  .causes a{font-size:23px;padding:13px 0 11px}
  .tile{display:flex}.tile-pic{aspect-ratio:16/8;height:auto}
  .ico{top:-26px;left:20px;right:auto}
  .life-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);overflow-x:auto;padding:4px var(--pad) 8px;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);scroll-padding-inline:var(--pad)}
  .life-line{display:none}
  .life-p{grid-template-columns:minmax(0,1fr)}
  .stats b{font-size:64px}
  .flows{grid-template-columns:minmax(0,1fr);gap:24px}.flow.lived{text-align:left}.flow.lived ol{justify-content:flex-start}
  .steps-line{left:4px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--teal-v),var(--gold-v))}.steps-dot{left:-2px;top:0}
  .steps{grid-template-columns:minmax(0,1fr);gap:22px;padding:0 0 0 32px}.steps li::before{left:-32px;top:6px}
  .steps h3{font-size:26px}.steps p{font-size:16px}
  .motto{font-size:28px}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .two{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .legal kuma-signature{margin-left:0}
  .dgrid{grid-template-columns:minmax(0,1fr)}
  .heat{grid-template-columns:110px repeat(5,minmax(44px,1fr));min-width:400px}
  .mini-heat{grid-template-columns:78px repeat(4,minmax(0,1fr));min-width:0}
  .demo-main{padding:16px}
  .phead h1{font-size:min(10.4vw,46px)}
}
@media(max-width:360px){.mark{width:30px;height:28px}.wm{font-size:23px}.menu-btn{padding-left:6px}}

/* opening, plain CSS */
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise 1s var(--ease) backwards}
  .hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.18s}.hero-copy>:nth-child(4){animation-delay:.28s}
  .bento>*{animation:pop 1s var(--ease) backwards}
  .bento>:nth-child(1){animation-delay:.15s}.bento>:nth-child(2){animation-delay:.25s}.bento>:nth-child(3){animation-delay:.35s}.bento>:nth-child(4){animation-delay:.45s}
}
/* the moving layer (viva.js adds .viva) */
.viva .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.viva .rv.in{opacity:1;transform:none}
.viva .tiles .rv:nth-child(2),.viva .steps .rv:nth-child(2){transition-delay:.1s}
.viva .tiles .rv:nth-child(3),.viva .steps .rv:nth-child(3){transition-delay:.2s}
.viva .steps .rv:nth-child(4){transition-delay:.3s}.viva .steps .rv:nth-child(5){transition-delay:.4s}
.viva .stats .rv:nth-child(2){transition-delay:.1s}.viva .stats .rv:nth-child(3){transition-delay:.2s}
.viva .causes li{opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.viva .surface.in .causes li{opacity:1;transform:none}
.viva .surface.in .causes li:nth-child(2){transition-delay:.08s}.viva .surface.in .causes li:nth-child(3){transition-delay:.16s}.viva .surface.in .causes li:nth-child(4){transition-delay:.24s}.viva .surface.in .causes li:nth-child(5){transition-delay:.32s}.viva .surface.in .causes li:nth-child(6){transition-delay:.4s}
.viva .track{animation:slide 48s linear infinite}
.viva .ticker:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
@keyframes rise{from{opacity:.01;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:.01;transform:translate3d(0,18px,0) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Q: ask.js builds it. Labelled on a computer, a round button on a phone; nothing opens by itself */
.chat{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:35;color:var(--charcoal);font:400 16px/1.45 var(--sans)}
.chat-open{position:relative;display:flex;align-items:center;gap:11px;padding:7px 20px 7px 7px;border-radius:999px;background:var(--deep);color:var(--white);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 16px 34px -14px rgba(0,0,0,.6);animation:rise .8s var(--ease) .5s backwards;transition:transform .3s var(--ease),opacity .25s}
.chat-open:hover{transform:translateY(-2px)}
.chat-q{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--navy);--d1:var(--gold-v);--d2:var(--teal-d)}
.chat-q svg{width:31px;height:29px}
.chat-name{display:grid;text-align:left;line-height:1.15}
.chat-name b{font-weight:800;font-size:15.5px;letter-spacing:-.01em}
.chat-name small{margin-top:3px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-l)}
.chat.open .chat-open{opacity:0;pointer-events:none}
.chat-panel{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;width:min(400px,calc(100vw - 40px));height:min(600px,calc(100vh - 100px));overflow:hidden;background:var(--ivory);border-radius:22px;box-shadow:0 0 0 1px var(--line),0 40px 80px -30px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translate3d(0,16px,0);transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
.chat.open .chat-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.chat-head{display:flex;align-items:center;gap:11px;padding:10px 8px 10px 14px;background:var(--deep);color:var(--white)}
.chat-head .chat-q{width:38px;height:38px}
.chat-head .chat-q svg{width:26px;height:24px}
.chat-head .chat-name{flex:1}
.chat-head .chat-name b{font-size:17px}
.chat-x{width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1}
.chat-msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.m{max-width:86%;padding:10px 14px;border-radius:16px;overflow-wrap:anywhere;text-wrap:pretty}
.m.bot{align-self:flex-start;background:var(--white);box-shadow:0 0 0 1px var(--line);border-bottom-left-radius:4px}
.m.you{align-self:flex-end;background:var(--deep);color:var(--white);border-bottom-right-radius:4px}
.m.typing{display:flex;gap:5px;padding:15px 14px}
.m.typing i{width:7px;height:7px;border-radius:50%;background:var(--teal-v);animation:dots 1.2s ease-in-out infinite}
.m.typing i:nth-child(2){animation-delay:.15s}
.m.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,70%,100%{opacity:.35;transform:none}35%{opacity:1;transform:translate3d(0,-3px,0)}}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.chat-chips:empty{display:none}
.chat-chips button{min-height:42px;padding:0 15px;border:1.5px solid var(--deep);border-radius:999px;color:var(--deep);font-weight:700;font-size:15px;line-height:1.2;transition:background .2s,color .2s}
.chat-chips button:hover{background:var(--deep);color:var(--white)}
.chat-form{display:flex;gap:8px;padding:8px 10px 8px 16px;background:var(--white);border-top:1px solid var(--line)}
.chat-form:focus-within{box-shadow:inset 0 2px 0 var(--teal-v)}
.chat-form input{flex:1;min-width:0;min-height:46px;border:0;outline:0;background:none;color:var(--charcoal);font:400 16px var(--sans)}
.chat-form input::placeholder{color:var(--muted);opacity:1}
.chat-form button{flex:none;width:46px;height:46px;border-radius:12px;background:var(--gold-v);color:var(--navy);font-size:20px;font-weight:800}
.chat-note{padding:0 16px 10px;background:var(--white);color:var(--muted);font-size:13px}
@media(max-width:760px){
  .chat{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
  .chat-open{padding:0;background:none;box-shadow:none}
  .chat-open>.chat-q{width:56px;height:56px;box-shadow:0 0 0 1px rgba(38,42,46,.16),0 14px 30px -12px rgba(0,0,0,.6)}
  .chat-open>.chat-q svg{width:36px;height:34px}
  .chat-open>.chat-name{position:absolute;right:66px;top:50%;padding:8px 12px;border-radius:10px;background:var(--deep);white-space:nowrap;transform:translate3d(0,-50%,0);transition:opacity .4s,transform .4s var(--ease)}
  .chat-open>.chat-name small{display:none}
  .chat.quiet .chat-open>.chat-name{opacity:0;transform:translate3d(10px,-50%,0)}
  .chat.over .chat-open{opacity:0;pointer-events:none}
  .chat-panel{position:fixed;inset:var(--vtop,0px) 0 auto;width:100%;height:var(--vh,100dvh);border-radius:0}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}