/* Task Tango v2.0 site styles.
   Palette from the logo: night indigo for the stage, sunset orange for action and "in progress",
   magenta for "quality check", cyan for "done" and live signals, lilac for reading surfaces. */

/* ---------- Fonts (self-hosted, SIL Open Font Licence) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --night:#14162D; --ink:#1E2247; --ink-deep:#14162D; --ink-mid:#2B2C5E; --panel:#1B1D3C;
  --text:#433C52; --muted:#655C73;
  --orange:#F5843F; --orange-dark:#E5702A; --orange-soft:#F7A26B; --orange-tint:#FFF0E6;
  --magenta:#C2559F; --plum:#8E3F80; --cyan:#38C6F4; --green:#1E6B3A; --green-tint:#E6F4EA;
  --lilac:#F6ECF4; --pink:#EFDBEB; --tile:#F3E4EF; --line:#E9DDE6; --line2:#D8CCD6;
  --on-dark:#CFC6DA; --on-dark-muted:#A99FBA;
  --radius:20px; --radius-sm:12px; --radius-lg:28px;
  --font-head:"Poppins",system-ui,sans-serif; --font-body:"Source Sans 3",system-ui,sans-serif;
  --max:1200px; --hh:76px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --sunset:linear-gradient(90deg,#F5843F,#C2559F 55%,#38C6F4);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:96px}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--orange-dark)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(36px,4.6vw,60px);line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(30px,3.3vw,44px);line-height:1.1;letter-spacing:-.025em}
h3{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
h4{font-size:16px;font-weight:600;letter-spacing:0}
h1,h2{text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55}
.small{font-size:15px;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:10px;width:fit-content;font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:0;color:var(--plum);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--magenta));flex-shrink:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section--tight{padding:48px 0}
.bg-lilac{background:var(--lilac)}
.bg-pink{background:var(--pink)}
.bg-ink{background:var(--ink);color:var(--on-dark)}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .eyebrow{color:var(--orange-soft)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;z-index:100;font-weight:600}
.skip:focus{left:8px}
.placeholder{color:var(--plum);font-weight:600}

/* ---------- Buttons, links, chips ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--font-head);font-weight:600;font-size:16px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;text-align:center;translate:var(--tx,0) var(--ty,0);transition:background .2s,border-color .2s,color .2s,box-shadow .3s,translate .45s var(--spring)}
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 10px 28px -12px rgba(245,132,63,.75)}
.btn-primary:hover{background:#F7924F;color:var(--ink);box-shadow:0 18px 38px -14px rgba(245,132,63,.9)}
.btn-primary::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-primary:hover::after{left:125%}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:rgba(30,34,71,.03)}
.btn-light{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.32)}
.btn-light:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link{font-family:var(--font-head);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.link svg{transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(4px)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--ink)}
.chip-tint{background:var(--tile);border-color:var(--tile)}
.chip-live{background:var(--green-tint);color:var(--green);border-color:var(--green-tint);font-family:var(--font-head);font-size:13px}
.chip-soon{background:var(--orange-tint);color:#A4480B;border-color:var(--orange-tint);font-family:var(--font-head);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ico{width:48px;height:48px;border-radius:14px;background:var(--tile);display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;transition:transform .4s var(--spring),background .3s,color .3s}
.ico-sm{width:40px;height:40px;border-radius:12px}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .35s,box-shadow .35s;view-transition-name:site-header}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hh);transition:height .35s var(--ease)}
.header.scrolled,.header.menu-open,html:not(.js) .header{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line),0 12px 30px -20px rgba(30,34,71,.3)}
.header.scrolled .wrap{height:64px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:42px;height:42px;border-radius:50%;transition:transform .6s var(--spring)}
.brand:hover img{transform:rotate(-12deg) scale(1.05)}
.brand span{font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;transition:color .35s}
.nav{display:flex;align-items:center;gap:26px}
.nav a{position:relative;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;padding:8px 0;white-space:nowrap;transition:color .35s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;background:var(--sunset);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--plum)}
.nav .nav-cta{display:none}
.header-cta{display:flex;align-items:center;gap:20px;flex-shrink:0}
.header-cta .phone{font-family:var(--font-head);font-weight:500;font-size:15px;white-space:nowrap;color:var(--ink);transition:color .35s}
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;transition:background .35s,border-color .35s,color .35s}
/* over the dark stage at the top of every page */
.dark-top .header:not(.scrolled):not(.menu-open) .brand span,
.dark-top .header:not(.scrolled):not(.menu-open) .nav > a:not(.btn),
.dark-top .header:not(.scrolled):not(.menu-open) .phone{color:#fff}
.dark-top .header:not(.scrolled):not(.menu-open) .nav > a:not(.btn):hover{color:var(--orange-soft)}
.dark-top .header:not(.scrolled):not(.menu-open) .nav-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
html:not(.js) .dark-top .header .brand span,html:not(.js) .dark-top .header .nav > a:not(.btn),html:not(.js) .dark-top .header .phone{color:var(--ink)}
@media (max-width:1240px){ .header-cta .phone{display:none} .nav{gap:20px} }
@media (max-width:1060px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;box-shadow:0 18px 40px -12px rgba(30,34,71,.25);max-height:calc(100vh - 64px);overflow:auto}
  .nav.open{display:flex;animation:drop .35s var(--ease)}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav a:not(.btn)::after{display:none}
  .nav .nav-cta{display:inline-flex;margin-top:14px;border:0}
  .header-cta .btn,.header-cta .phone{display:none}
  .nav-toggle{display:inline-flex}
}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Stage: the dark, glowing sections ---------- */
.stage{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--on-dark)}
.stage h1,.stage h2,.stage h3{color:#fff}
.stage .eyebrow{color:var(--orange-soft)}
.stage .small{color:var(--on-dark-muted)}
.stage .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.stage .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.stage .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.stage .link{color:#fff}
.stage .crumb,.stage .crumb a{color:var(--on-dark-muted)}
.stage .crumb a:hover{color:#fff}
.stage .crumb > span:last-child{color:#fff}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,132,63,.55),rgba(194,85,159,.55),rgba(56,198,244,.55),transparent);pointer-events:none}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;display:block;border-radius:50%;aspect-ratio:1;will-change:transform}
.aurora i:nth-child(1){width:min(920px,95vw);left:-20%;top:-60%;background:radial-gradient(closest-side,rgba(245,132,63,.40),rgba(245,132,63,0));animation:aurora-a 24s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:min(820px,90vw);right:-22%;top:-30%;background:radial-gradient(closest-side,rgba(194,85,159,.42),rgba(194,85,159,0));animation:aurora-b 28s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:min(760px,85vw);left:22%;bottom:-70%;background:radial-gradient(closest-side,rgba(56,198,244,.26),rgba(56,198,244,0));animation:aurora-c 32s ease-in-out infinite alternate}
@keyframes aurora-a{to{transform:translate(22%,26%) scale(1.15)}}
@keyframes aurora-b{to{transform:translate(-24%,20%) scale(.9)}}
@keyframes aurora-c{to{transform:translate(-20%,-22%) scale(1.2)}}
.aurora::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 70% 35%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at 70% 35%,#000,transparent 75%)}
.aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--px,72%) var(--py,30%),rgba(255,255,255,.075),transparent 62%)}

/* ---------- Heroes ---------- */
main > section:first-child{padding-top:calc(var(--hh) + 64px)}
.hero{padding-bottom:104px}
main > .hero:first-child{padding-top:calc(var(--hh) + 76px)}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.035em;margin-bottom:22px}
.hero .lead{max-width:560px}
.hero-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:26px}
.hero-where{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:500;font-size:14px;color:var(--on-dark-muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#35D07F;flex-shrink:0;animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(53,208,127,.55)}80%,100%{box-shadow:0 0 0 10px rgba(53,208,127,0)}}
.rotator{font-family:var(--font-head);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.3;color:#fff;margin:0 0 22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .38em}
.rotator .rot-lead{color:var(--on-dark-muted);font-weight:500}
.rot{position:relative;display:inline-grid;overflow:hidden;height:1.3em;padding-right:4px}
.rot b{grid-area:1/1;font-weight:600;white-space:nowrap;color:var(--orange-soft);transform:translateY(105%);opacity:0;transition:transform .6s var(--ease),opacity .45s}
.rot b.on{transform:none;opacity:1}
.rot b.out{transform:translateY(-105%);opacity:0}
html:not(.js) .rot b:first-child{transform:none;opacity:1}
.hero .btn-row{margin-top:30px}

/* the live board: team photo framed by task cards that move to Done */
.hero-board{position:relative;padding:30px 12px 30px 30px}
.hero-photo{position:relative;margin:0;border-radius:30px;padding:2px;overflow:hidden;isolation:isolate;box-shadow:0 60px 110px -50px rgba(0,0,0,.85)}
.hero-photo::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(from 0deg,#F5843F,#C2559F,#38C6F4,#F5843F);animation:spin 9s linear infinite}
.hero-photo img{border-radius:28px;width:100%;aspect-ratio:3/2;object-fit:cover;animation:settle 1.4s var(--ease) both}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
.task-card{position:absolute;z-index:2;width:258px;background:#fff;color:var(--text);border-radius:18px;padding:14px 16px;box-shadow:0 34px 60px -24px rgba(6,8,28,.7),0 0 0 1px rgba(30,34,71,.06);font-size:14px;animation:bob 7s ease-in-out infinite}
.tc-1{left:-6px;top:4%}
.tc-2{right:-18px;bottom:2%;animation-delay:-3.5s}
@keyframes bob{50%{translate:0 -10px}}
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.tc-team{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--font-head);color:var(--muted)}
.tc-team i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.tc-2 .tc-team i{background:var(--magenta)}
.tc-status{font:600 11.5px/1 var(--font-head);padding:5px 9px;border-radius:999px;background:var(--lilac);color:var(--plum);transition:background .4s,color .4s;white-space:nowrap}
.tc-status[data-s="progress"]{background:#FFE9DA;color:#B4520F}
.tc-status[data-s="qa"]{background:#F8E1F0;color:#8E3F80}
.tc-status[data-s="done"]{background:var(--green-tint);color:var(--green)}
.tc-title{display:block;font:600 15px/1.3 var(--font-head);color:var(--ink);margin-bottom:11px;transition:opacity .35s,transform .35s}
.tc-title.swap{opacity:0;transform:translateY(6px)}
.tc-bar{height:6px;border-radius:6px;background:#F1E8EF;overflow:hidden}
.tc-bar i{display:block;height:100%;width:var(--w,46%);border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--magenta));transition:width 1.3s var(--ease)}
.task-card[data-s="done"] .tc-bar i{background:linear-gradient(90deg,#2BB673,#38C6F4)}
.tc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.tc-check{width:22px;height:22px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;transform:scale(0);transition:transform .5s var(--spring)}
.task-card[data-s="done"] .tc-check{transform:scale(1)}
.team-pill{position:absolute;z-index:2;right:30px;top:12px;display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border-radius:999px;background:rgba(20,22,45,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 13px/1 var(--font-head)}
.js .hero-board .task-card,.js .hero-board .team-pill{opacity:0;animation:pop-in .8s var(--spring) forwards,bob 7s ease-in-out infinite}
.js .hero-board .tc-1{animation-delay:.9s,0s}
.js .hero-board .tc-2{animation-delay:1.15s,-3.5s}
.js .hero-board .team-pill{animation:pop-in .8s var(--spring) 1.4s forwards}
@keyframes pop-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}

/* inner-page heroes */
.page-hero{padding-bottom:88px}
.page-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.page-hero .lead{max-width:640px}
.page-hero .wrap > img,.page-hero .hero-img{border-radius:24px;width:100%;aspect-ratio:3/2;object-fit:cover;box-shadow:0 50px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.page-hero .btn-row{margin-top:28px}
.hero-narrow .wrap{display:block}
.hero-narrow .wrap > *{max-width:880px}
.crumb{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.crumb a{color:var(--muted)}

/* ---------- Motion primitives ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-img{clip-path:inset(0 0 100% 0 round 24px);transition:clip-path 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal-img.in{clip-path:inset(0 0 0 0 round 24px)}
.js .hero h1:not(.words):not(.in),.js .page-hero h1:not(.words):not(.in){opacity:0}
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.words .w > span{display:inline-block;transform:translateY(108%);transition:transform .85s var(--ease);transition-delay:calc(var(--i) * 45ms + var(--d,0s))}
.words.in .w > span{transform:none}
.pop{transform:scale(.85);opacity:0;transition:transform .55s var(--spring),opacity .4s;transition-delay:var(--d,0s)}
.pop.in{transform:none;opacity:1}

/* cursor spotlight + border glow (mouse and trackpad only) */
@media (hover:hover) and (pointer:fine){
  .spot{position:relative}
  .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),rgba(245,132,63,.10),transparent 45%);z-index:1}
  .spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;padding:1px;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(194,85,159,.75),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:1}
  .spot:hover::before,.spot:hover::after{opacity:1}
  .stage .spot::before,.tile.spot::before{background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.10),transparent 45%)}
}
.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.tilt.tilting{transition:transform .12s linear}

/* ---------- Cards and grids ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.card p,.card h3{margin:0}
.bg-lilac .card,.bg-pink .card{border-color:rgba(142,63,128,.12)}
a.card{color:var(--text)}
a.card h3{color:var(--ink)}
a.card:hover,.card.lift:hover,.quote-card:hover{transform:translateY(-5px);box-shadow:0 28px 50px -28px rgba(30,34,71,.35);border-color:var(--line2)}
a.card:hover .ico{transform:rotate(-8deg) scale(1.08);background:var(--orange);color:var(--ink)}
.card .foot{margin-top:auto;font-size:14px;color:var(--muted)}
.card.bg-ink{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.card.bg-ink h3,.card.bg-ink strong{color:#fff}
.card.bg-ink .eyebrow{color:var(--orange-soft)}
.card.bg-lilac{background:var(--lilac)}
.card.bg-pink{background:var(--pink)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.section-head > div{max-width:760px}
.section-head h2,.section-head p:last-child{margin-bottom:0}
.section-head p{margin-top:14px}
.rule-cols > div{position:relative;padding-top:22px}
.rule-cols > div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--rc,var(--orange));transform-origin:left;transition:transform 1s var(--ease) var(--d,0s)}
.js .rule-cols > div.reveal:not(.in)::before{transform:scaleX(0)}
.rule-cols > div:nth-child(2){--rc:#E0714A}
.rule-cols > div:nth-child(3){--rc:var(--magenta)}
.rule-cols > div:nth-child(4){--rc:#7F7FD1}
.rule-cols > div:nth-child(5){--rc:var(--cyan)}
.rule-cols h3{font-size:18px}
.rule-cols p{font-size:15px;margin:0}
.step-num{font-family:var(--font-head);font-weight:700;font-size:44px;line-height:1;color:var(--orange);display:block;margin-bottom:14px}
.steps h3{font-size:19px}
.steps p{font-size:15px;margin:0}
.check-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px}
.check-list li{display:flex;gap:12px;align-items:flex-start}
.check-list svg{flex-shrink:0;margin-top:3px;color:var(--green)}
.check-list strong{display:block;font-size:16px;color:var(--ink)}
.check-list span{font-size:14.5px;color:var(--muted)}
.svc-list{list-style:none;margin:0;padding:0}
.svc-list li a{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:16px;color:var(--ink);transition:color .2s,padding .3s var(--ease)}
.svc-list li a svg{color:var(--green);flex-shrink:0}
.svc-list li a:hover{color:var(--orange-dark);padding-left:6px}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item > span:first-child{flex-shrink:0;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--tile);color:var(--plum)}
.trust-item strong{font-family:var(--font-head);font-weight:600;font-size:16px;display:block;color:var(--ink)}
.trust-item span{font-size:14.5px;color:var(--muted)}
.stat{display:flex;align-items:center;gap:16px}
.stat strong{font-family:var(--font-head);font-weight:700;font-size:32px;color:var(--orange);min-width:90px}
.stat > span{font-size:15px}

/* ---------- Logo strip and marquees ---------- */
.logo-strip{padding:44px 0 40px;background:#fff;border-bottom:1px solid var(--line)}
.logo-strip p{text-align:center;font:600 15px var(--font-head);color:var(--muted);margin:0 0 20px}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 52px}
.logos img{height:42px;width:auto}
.logos .wordmark{font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:.06em;color:var(--ink)}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee .track{display:flex;gap:var(--gap,56px);padding-right:var(--gap,56px);align-items:center;width:max-content;animation:scroll-x var(--dur,40s) linear infinite}
.marquee.rtl .track{animation-direction:reverse}
.marquee:hover .track,.marquee:focus-within .track,.paused .marquee .track,.marquee.paused .track,.marquee.offscreen .track{animation-play-state:paused}
.logos.marquee .track > *{flex-shrink:0;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.logos.marquee .track > *:hover{filter:none;opacity:1}
@keyframes scroll-x{to{transform:translateX(-50%)}}
.mq-toggle{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--font-head);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .2s}
.mq-toggle:hover{border-color:var(--ink)}

/* ---------- Bento services ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(240px,auto);gap:18px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px;border-radius:26px;overflow:hidden;isolation:isolate;background:var(--night);color:var(--on-dark);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.tile:hover{color:var(--on-dark);box-shadow:0 34px 60px -32px rgba(20,22,45,.7)}
.tile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.6;transform:scale(1.03);transition:transform 1.4s var(--ease),opacity .6s}
.tile:hover > img{transform:scale(1.1);opacity:.78}
.tile-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,22,45,.15) 0%,rgba(20,22,45,.62) 42%,rgba(20,22,45,.96) 100%)}
.tile h3{color:#fff;font-size:22px;margin:0}
.tile p{margin:0;color:var(--on-dark);font-size:15.5px;line-height:1.5}
.tile-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-bottom:auto;transition:background .4s,color .4s,transform .5s var(--spring)}
.tile:hover .tile-ico{background:var(--orange);color:var(--ink);transform:rotate(-8deg)}
.tile-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tile-tags li{font:600 12.5px/1 var(--font-head);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 10px}
.tile-go{position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);transform:scale(.5) rotate(-45deg);opacity:0;transition:transform .5s var(--spring),opacity .3s}
.tile:hover .tile-go,.tile:focus-visible .tile-go{transform:none;opacity:1}
.tile-more{display:grid;grid-template-rows:1fr}
.tile-more > div{overflow:hidden;min-height:0}
@media (hover:hover) and (pointer:fine){
  .tile-more{grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .tile:hover .tile-more,.tile:focus-visible .tile-more{grid-template-rows:1fr}
  .tile-more > div{padding-top:0;transition:padding .55s var(--ease)}
  .tile:hover .tile-more > div,.tile:focus-visible .tile-more > div{padding-top:6px}
}
.tile-xl{grid-column:span 4;grid-row:span 2;padding:34px}
.tile-xl h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.tile-xl p{font-size:17px;max-width:520px}
.tile-sm{grid-column:span 2}
.tile-cta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:600 15px var(--font-head);color:var(--orange-soft)}
.pos-right{object-position:75% center}
.pos-top{object-position:center 20%}

/* ---------- Timeline (steps on a line that draws itself) ---------- */
.timeline{--p:0;--n:4;--gap:28px;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap);list-style:none;margin:0;padding:0}
.timeline::before,.timeline::after{content:"";position:absolute;top:23px;left:24px;right:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - 24px);height:3px;border-radius:3px;background:var(--line2)}
.timeline::after{background:var(--sunset);transform:scaleX(var(--p));transform-origin:left center}
.timeline li{position:relative;z-index:1}
.tl-dot{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--line2);font:700 17px/1 var(--font-head);color:var(--muted);margin-bottom:22px;transition:background .45s,border-color .45s,color .45s,transform .6s var(--spring),box-shadow .45s}
.bg-lilac .tl-dot{background:var(--lilac)}
.timeline li.lit .tl-dot{background:var(--dc,var(--orange));border-color:var(--dc,var(--orange));color:var(--ink);transform:scale(1.08);box-shadow:0 0 0 8px color-mix(in srgb,var(--dc,var(--orange)) 18%,transparent)}
.timeline li:nth-child(2){--dc:#E0714A}
.timeline li:nth-child(3){--dc:var(--magenta)}
.timeline li:nth-child(4){--dc:#8F8FDC}
.timeline li:nth-child(5){--dc:var(--cyan)}
.timeline li:nth-child(3).lit .tl-dot,.timeline li:nth-child(4).lit .tl-dot{color:#fff}
.timeline h3{font-size:19px;margin-bottom:8px}
.timeline p{font-size:15.5px;margin:0}
.timeline .tl-note{display:block;margin-top:12px;font-size:14px;color:var(--muted)}
.timeline .tl-note strong{color:var(--plum)}
.timeline li > *:not(.tl-dot){transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .timeline li:not(.lit) > *:not(.tl-dot){opacity:.45}

/* ---------- Numbers band ---------- */
.numbers{padding:84px 0}
.num-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.num-list li{padding:6px 24px;border-left:1px solid rgba(255,255,255,.12)}
.num-list li:first-child{border-left:0;padding-left:0}
.num-list strong{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(44px,4.6vw,66px);line-height:1;letter-spacing:-.04em;color:#fff;margin-bottom:12px;white-space:nowrap}
.num-list strong em{font-style:normal;color:var(--orange-soft);font-size:.55em;letter-spacing:-.01em;margin-left:2px}
.num-list li > span{display:block;font-size:15px;line-height:1.45;color:var(--on-dark)}
.numbers .num-note{margin:34px 0 0;font-size:14px;color:var(--on-dark-muted)}

/* ---------- Why us ---------- */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.why-head{position:sticky;top:120px}
.why-head p{max-width:440px}
.why-list{list-style:none;margin:0;padding:0}
.why-list li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;padding:28px 0;border-top:1px solid rgba(142,63,128,.16)}
.why-list li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--sunset);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease)}
.why-list li.in::before{transform:scaleX(1)}
.why-list h3{font-size:22px;margin-bottom:6px}
.why-list p{margin:0}
.why-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#fff;color:var(--plum);box-shadow:0 12px 24px -16px rgba(30,34,71,.4)}

/* ---------- Pulse screens ---------- */
.tab-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tab-bar button{position:relative;overflow:hidden;font:600 14px var(--font-head);color:var(--on-dark);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 15px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tab-bar button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.tab-bar button[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.tab-bar button::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:rgba(30,34,71,.45);transform:scaleX(0);transform-origin:left}
.auto .tab-bar button[aria-selected="true"]::after{animation:tabfill var(--tab-dur,5s) linear forwards}
.auto:hover .tab-bar button::after{animation-play-state:paused}
@keyframes tabfill{to{transform:scaleX(1)}}
.mock{position:relative;border-radius:20px;background:var(--ink-mid);border:1px solid rgba(255,255,255,.12);overflow:hidden;color:var(--on-dark);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.mock-bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--on-dark)}
.mock-bar i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mock-bar i:nth-child(1){background:#F5843F}.mock-bar i:nth-child(2){background:#C2559F}.mock-bar i:nth-child(3){background:#38C6F4}
.mock-bar span{margin-left:8px}
.mock-body{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:24px}
.mock-body div{border:1.5px dashed rgba(255,255,255,.3);border-radius:14px;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:var(--font-head);font-weight:500;font-size:15px}
.mock img.shot{display:block;width:100%;height:auto}
.shots{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.03) translateX(12px);transition:opacity .6s,transform .9s var(--ease)}
.shots img.active{opacity:1;transform:none}
.shots-caption{color:var(--on-dark-muted);font-size:14px;margin:12px 0 0}

/* ---------- Illustrated product screens (clearly labelled examples) ---------- */
.ill{background:#F7F3F8;color:var(--text)}
.ill .mock-bar{background:var(--ink-mid);color:var(--on-dark)}
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px;height:360px;overflow:hidden}
.kb-col{background:#EFE7F0;border-radius:14px;padding:10px;display:flex;flex-direction:column;min-height:0}
.kb-col h4{display:flex;justify-content:space-between;align-items:center;font:600 13px/1 var(--font-head);color:var(--ink);margin:2px 4px 10px}
.kb-col h4 b{font-weight:600;color:var(--muted);background:#fff;border-radius:999px;padding:3px 8px;font-size:12px}
.kb-cards{display:flex;flex-direction:column;gap:8px;min-height:0}
.kb-card{background:#fff;border-radius:10px;padding:10px 11px;box-shadow:0 1px 2px rgba(30,34,71,.08),0 4px 12px -6px rgba(30,34,71,.18);font-size:12.5px;line-height:1.35}
.kb-card strong{display:block;font:600 12.5px/1.3 var(--font-head);color:var(--ink);margin:6px 0 8px}
.kb-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--muted);font-size:11.5px}
.kb-lab{display:inline-block;font:600 10.5px/1 var(--font-head);padding:4px 7px;border-radius:999px;background:var(--tile);color:var(--plum)}
.kb-lab.l2{background:#E4F6FD;color:#0F6C8E}.kb-lab.l3{background:#FFE9DA;color:#B4520F}.kb-lab.l4{background:#FDE7E7;color:#A32020}
.kb-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--font-head);color:#fff;background:var(--plum)}
.kb-done .kb-card strong{text-decoration:line-through;text-decoration-color:rgba(30,34,71,.35);color:var(--muted)}
.kb-card.moving{box-shadow:0 18px 30px -12px rgba(30,34,71,.45);z-index:2;position:relative}
.tq{height:360px;overflow:hidden;background:#fff}
.tq-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font:600 13px var(--font-head);color:var(--ink)}
.tq-head span{color:var(--muted);font-weight:500}
.tq-list{list-style:none;margin:0;padding:0}
.tq-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #F1EAF0;font-size:12.5px;background:#fff}
.tq-row.enter{animation:tq-in .9s var(--ease)}
@keyframes tq-in{from{background:#FFF0E6;opacity:0;transform:translateY(-10px)}40%{opacity:1;transform:none;background:#FFF0E6}to{background:#fff}}
.tq-ent{font:600 10.5px/1 var(--font-head);padding:5px 7px;border-radius:6px;background:var(--ink);color:#fff}
.tq-ent.e2{background:var(--plum)}.tq-ent.e3{background:#0F6C8E}
.tq-sub{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-sla{font:600 11px/1 var(--font-head);padding:5px 8px;border-radius:999px;background:#FFE9DA;color:#B4520F;white-space:nowrap}
.tq-sla.ok{background:var(--green-tint);color:var(--green)}
.tq-st{font:600 11px/1 var(--font-head);padding:5px 8px;border-radius:999px;background:var(--lilac);color:var(--plum);white-space:nowrap;transition:background .4s,color .4s}
.tq-st.done{background:var(--green-tint);color:var(--green)}
.ill-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.stage .ill-note{color:var(--on-dark-muted)}

/* ---------- Hours-back calculator and systems strip ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.calc-in h2{margin-bottom:14px}
.rng{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 16px;margin-top:26px}
.rng label{font:600 16px var(--font-head);color:var(--ink)}
.rng output{font:700 26px/1 var(--font-head);color:var(--ink);min-width:3ch;text-align:right;letter-spacing:-.02em}
.rng .hint{grid-column:1/-1;font-size:14px;color:var(--muted);margin:-2px 0 4px}
.rng input{grid-column:1/-1;width:100%;margin:6px 0 0;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer}
.rng input:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:8px}
.rng input::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--orange),var(--magenta)) 0/var(--fill,50%) 100% no-repeat,var(--line)}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 6px 14px -4px rgba(30,34,71,.4);transition:transform .2s var(--spring)}
.rng input:active::-webkit-slider-thumb{transform:scale(1.15)}
.rng input::-moz-range-track{height:8px;border-radius:8px;background:var(--line)}
.rng input::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--orange),var(--magenta))}
.rng input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 6px 14px -4px rgba(30,34,71,.4)}
.calc-out{border-radius:28px;padding:34px}
.co-label{display:block;font:600 15px var(--font-head);color:var(--on-dark-muted)}
.co-big{display:flex;align-items:baseline;gap:10px;font:700 clamp(64px,7vw,96px)/1 var(--font-head);letter-spacing:-.05em;color:#fff;margin:8px 0 10px}
.co-big small{font-size:22px;letter-spacing:0;font-weight:600;color:var(--orange-soft)}
.co-sub{margin:0 0 22px;color:var(--on-dark)}
.co-sub b{color:#fff}
.co-split{display:flex;height:14px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.1)}
.co-split i{display:block;height:100%;transition:width .6s var(--ease)}
.co-split .keep{background:rgba(255,255,255,.28)}
.co-split .hand{background:var(--sunset)}
.co-legend{display:flex;justify-content:space-between;gap:12px;margin:10px 0 24px;font-size:14px;color:var(--on-dark-muted)}
.co-legend b{color:#fff;font-weight:600}
.co-plan{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);margin-bottom:22px;color:#fff;transition:background .3s,border-color .3s}
.co-plan:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.co-plan small{display:block;font:600 12.5px var(--font-head);color:var(--orange-soft);margin-bottom:2px}
.co-plan strong{display:block;font:700 19px var(--font-head);color:#fff}
.co-plan span{display:block;font-size:14.5px;color:var(--on-dark)}
.co-plan svg{flex-shrink:0}
.co-plan.flash{animation:flash .7s var(--ease)}
@keyframes flash{30%{background:rgba(245,132,63,.22);border-color:rgba(245,132,63,.7)}}
.co-note{margin:14px 0 0;font-size:13.5px;color:var(--on-dark-muted)}
.systems{margin-top:88px;padding-top:56px;border-top:1px solid var(--line)}
.systems-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}
.systems-head h3{font-size:clamp(22px,2.2vw,28px);margin:0;max-width:640px}
.sys-groups{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
.sys-groups h4{font-size:14px;color:var(--muted);font-weight:600;margin:0 0 12px}
.sys-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.sys-list li{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;background:#fff;border:1px solid var(--line);font:600 14.5px var(--font-head);color:var(--ink);box-shadow:0 8px 18px -14px rgba(30,34,71,.35);transition:transform .3s var(--spring),border-color .3s}
.sys-list li:hover{transform:translateY(-3px);border-color:var(--line2)}
.sys-list li i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:700 12px/1 var(--font-head);font-style:normal;color:#fff;background:var(--sc,var(--ink))}

/* ---------- Industries ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ind{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);font:600 16px var(--font-head);color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.ind:hover{transform:translateY(-3px);box-shadow:0 20px 36px -24px rgba(30,34,71,.4);border-color:var(--line2);color:var(--ink)}
.ind .ico{width:42px;height:42px;border-radius:12px}
.ind:hover .ico{background:var(--orange);transform:rotate(-8deg)}
.ind .arr{margin-left:auto;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s var(--ease);color:var(--plum)}
.ind:hover .arr{opacity:1;transform:none}

/* ---------- Testimonials ---------- */
.quotes-sec{overflow:hidden}
.qrows{display:grid;gap:20px}
.qrows .marquee{--gap:20px}
.qrows .track{align-items:stretch}
.qcard{position:relative;margin:0;flex-shrink:0;width:440px;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:24px;background:#fff;border:1px solid rgba(142,63,128,.14);box-shadow:0 20px 40px -32px rgba(30,34,71,.45);white-space:normal}
.qcard blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.qcard .person{margin-top:auto}
.qbadge{flex-shrink:0;width:280px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:26px;border-radius:24px;background:var(--night);color:var(--on-dark);white-space:normal}
.qbadge strong{font:700 22px/1.2 var(--font-head);color:#fff;letter-spacing:-.01em}
.qbadge .ico{background:rgba(255,255,255,.08);color:var(--cyan)}
.qbadge span{font-size:15px}
.quote-card{gap:18px}
.quote-card blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.person{display:flex;align-items:center;gap:14px;margin-top:auto}
.person img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.person strong{font-family:var(--font-head);font-size:15px;color:var(--ink);display:block}
.person span{font-size:14px;color:var(--muted)}
.big-quote{max-width:1040px;margin:0 auto;display:flex;gap:32px;align-items:flex-start}
.big-quote blockquote{margin:0;font-family:var(--font-head);font-weight:500;font-size:clamp(20px,2.1vw,26px);line-height:1.42;color:var(--ink);letter-spacing:-.01em}
.no-marquee .qrows .track{flex-wrap:wrap;width:auto;justify-content:center;animation:none}

/* ---------- Founder, splits, pillars ---------- */
.founder{display:grid;grid-template-columns:380px 1fr;gap:72px;align-items:center}
.founder img{border-radius:28px;width:100%;aspect-ratio:6/7;object-fit:cover}
.founder h2{font-size:clamp(24px,2.6vw,34px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.split-narrow{grid-template-columns:.9fr 1.1fr}
.pillar{display:grid;grid-template-columns:260px 1fr 1.2fr;gap:40px;align-items:start;padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:136px}
.pillar img{border-radius:20px;width:100%;aspect-ratio:3/4;object-fit:cover}
.pillar h2{font-size:30px}
.pillar-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pillar-head .eyebrow{margin:0}
.pillar .link{margin-right:18px}

/* services: sticky pillar navigation */
.subnav{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex-shrink:0;font:600 14px var(--font-head);color:var(--muted);padding:8px 14px;border-radius:999px;transition:background .3s,color .3s}
.subnav a:hover{color:var(--ink);background:var(--lilac)}
.subnav a.on{background:var(--ink);color:#fff}
.jump{display:grid;gap:8px;padding:18px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.jump a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;color:#fff;font:600 15.5px var(--font-head);transition:background .3s}
.jump a:hover{background:rgba(255,255,255,.08);color:#fff}
.jump a .ico{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);color:var(--orange-soft)}
.jump a:hover .ico{background:var(--orange);color:var(--ink)}
.jump a .arr{margin-left:auto;color:var(--on-dark-muted);transition:transform .3s var(--ease)}
.jump a:hover .arr{transform:translateX(4px);color:#fff}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.team-grid img,.ph-initials{border-radius:18px;width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:12px;transition:transform .5s var(--ease),box-shadow .5s}
.team-grid > div{transition:transform .5s var(--ease)}
.team-grid > div:hover img,.team-grid > div:hover .ph-initials{transform:translateY(-6px) scale(1.02);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange),0 26px 40px -22px rgba(30,34,71,.55)}
.team-grid strong{position:relative;font-family:var(--font-head);font-size:16px;color:var(--ink);display:inline-block}
.team-grid strong::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--sunset);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.team-grid > div:hover strong::after{transform:scaleX(1)}
.team-grid span{display:block;font-size:14px;color:var(--muted)}
.team-grid-sm{grid-template-columns:repeat(7,1fr);gap:18px}
.team-grid-sm strong{font-size:15px}
.team-grid-sm span{font-size:13px}
.ph-initials{display:flex;align-items:center;justify-content:center;background:var(--tile);color:var(--plum);font-family:var(--font-head);font-weight:600;font-size:28px;letter-spacing:.04em}
.band-photo{position:relative;overflow:hidden;background:var(--night)}
.band-photo img{width:100%;height:clamp(300px,42vw,660px);object-fit:cover;object-position:center 9%;opacity:.92;animation:kenburns 30s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,1%)}}
.band-photo .caption{position:absolute;left:24px;bottom:24px;background:rgba(20,22,45,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:12px 18px;border-radius:14px;font-family:var(--font-head);font-weight:500;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tile-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px}

/* ---------- Tables, FAQ, CTA ---------- */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:14px 16px;font-size:15px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-head);font-weight:600;color:var(--ink)}
.table-wrap{overflow-x:auto}
details.faq{border-top:1px solid var(--line);padding:4px 0}
details.faq:last-child{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink);transition:color .2s}
details.faq summary:hover{color:var(--plum)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E2247' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .35s var(--ease),background-color .3s}
details.faq[open] summary::after{transform:rotate(135deg);background-color:var(--orange-tint)}
details.faq p{margin:0 0 18px;font-size:16px}
details.faq[open] > :not(summary){animation:faq-in .45s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cta-band{padding:88px 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}
.cta-band h2{font-size:clamp(26px,2.8vw,38px);margin-bottom:10px}
.cta-band p{margin:0;max-width:720px}
.cta-band.bg-pink{padding:64px 0}

/* ---------- Forms ---------- */
.form-card{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:0 40px 80px -40px rgba(10,12,35,.55);display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{min-height:50px;border:1px solid var(--line2);border-radius:12px;padding:10px 14px;font-family:var(--font-body);font-size:16px;color:var(--ink);background:#fff;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(56,198,244,.28)}
.field input:user-invalid,.field select:user-invalid{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.span-2{grid-column:span 2}
.form-foot{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-note{font-size:14px;color:var(--muted);margin:0}
.form-status{grid-column:span 2;font-size:15px;margin:0;color:var(--ink)}
.form-status:empty{display:none}
.form-status.ok{padding:14px 16px;border-radius:12px;background:var(--green-tint);color:var(--green);font-weight:600}
.form-status.err{padding:14px 16px;border-radius:12px;background:#FDE7E7;color:#8A1C1C}
form.sending button[type="submit"]{opacity:.7;pointer-events:none}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info .row{display:flex;gap:14px;align-items:flex-start}
.contact-info .row > svg{flex-shrink:0;color:var(--orange)}
.contact-info strong{display:block;font-size:16px;color:var(--ink)}
.contact-info a{font-weight:600}
.stage .contact-info strong{color:#fff}
.stage .contact-info a{color:#fff}
.stage .contact-info a:hover{color:var(--orange-soft)}
.book{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);margin-top:26px}
.book[hidden]{display:none}
.book p{margin:0;flex:1 1 220px}

/* ---------- First step offer ---------- */
.offer{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:30px 34px;border-radius:28px;background:#fff;border:1px solid rgba(142,63,128,.16);box-shadow:0 30px 60px -40px rgba(30,34,71,.45);overflow:hidden;isolation:isolate}
.offer::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,var(--orange),var(--magenta),var(--cyan))}
.offer .ico{width:64px;height:64px;border-radius:18px;background:var(--orange-tint);color:#B4520F}
.offer h2,.offer h3{font-size:clamp(22px,2.2vw,28px);margin:0 0 6px}
.offer p{margin:0}
.offer ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:10px 0 0;padding:0;font-size:15px;color:var(--muted)}
.offer li{display:inline-flex;align-items:center;gap:6px}
.offer li svg{color:var(--green)}

/* ---------- Comparison tables (no prices) ---------- */
.fit-picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.fit-q{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink);margin-right:6px}
.fit-picker button{font:600 14px var(--font-head);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .3s var(--spring)}
.fit-picker button:hover{border-color:var(--ink);transform:translateY(-2px)}
.fit-picker button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.compare{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -44px rgba(30,34,71,.5)}
.compare table{width:100%;border-collapse:collapse;table-layout:fixed}
.compare th,.compare td{padding:15px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.compare thead th{background:#FBF6FA;vertical-align:bottom;padding:22px 20px 18px;border-bottom:1px solid var(--line2);position:relative}
.compare thead th:first-child{width:30%}
.compare thead strong{display:block;font-family:var(--font-head);font-size:18px;line-height:1.25;color:var(--ink)}
.compare .c-sub{display:block;font-size:14px;color:var(--muted);font-weight:400;margin-top:2px}
.compare .c-ico{display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:var(--tile);color:var(--plum);margin-bottom:10px;transition:background .3s,color .3s,transform .5s var(--spring)}
.compare tbody th{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink)}
.compare .r-sub{display:block;font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare tr.grp th{background:var(--lilac);font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--plum);padding:10px 20px}
.compare [data-col]{transition:background .35s calc(var(--r,0) * 28ms),box-shadow .35s}
.compare td.is-hover,.compare th.is-hover{background:#FCF7FB}
.compare .is-fit{background:var(--orange-tint)!important}
.compare thead .is-fit{background:#FFE6D3!important;box-shadow:inset 0 4px 0 var(--orange)}
.compare thead .is-fit .c-ico{background:var(--orange);color:var(--ink);transform:rotate(-8deg) scale(1.08)}
.fit-badge{display:none;position:absolute;top:14px;right:14px;font:600 12px var(--font-head);background:var(--orange);color:var(--ink);border-radius:999px;padding:4px 10px}
.compare thead .is-fit .fit-badge{display:inline-block;animation:badge-pop .5s var(--spring)}
@keyframes badge-pop{from{transform:scale(.4) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
.compare .yes{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:var(--green-tint);color:var(--green)}
.compare .no{color:var(--line2);font-size:22px;font-weight:600;line-height:1}
.compare .od{display:inline-block;font:600 12px var(--font-head);color:var(--plum);background:var(--tile);border-radius:999px;padding:4px 10px}
.compare-4 thead th:first-child{width:17%}
.compare-4 th,.compare-4 td{padding-left:16px;padding-right:16px}
.included{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:22px}
.included ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.included li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink)}
.included li svg{color:var(--green)}

/* ---------- Plans ---------- */
.plan-quad{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plan-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px;border-radius:22px;color:var(--on-dark);min-height:170px;transition:transform .45s var(--ease)}
.plan-card:hover{transform:translateY(-4px);color:var(--on-dark)}
.plan-card .pc-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--orange-soft);margin-bottom:auto;transition:background .35s,color .35s,transform .5s var(--spring)}
.plan-card:hover .pc-ico{background:var(--orange);color:var(--ink);transform:rotate(-8deg)}
.plan-card strong{font:700 21px/1.2 var(--font-head);color:#fff;margin-top:18px}
.plan-card span{font-size:15px;line-height:1.4}
.glow{position:relative;isolation:isolate;overflow:hidden}
.glow::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:230%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(from 0deg,transparent 0deg 240deg,rgba(245,132,63,.95) 285deg,rgba(194,85,159,.95) 318deg,rgba(56,198,244,.95) 345deg,transparent 360deg);animation:spin var(--glow-speed,7s) linear infinite;animation-delay:var(--glow-delay,0s)}
.glow::after{content:"";position:absolute;z-index:-1;inset:1.5px;border-radius:inherit;background:var(--glow-bg,var(--panel))}
.glow:hover{--glow-speed:3.5s}
.glow-hover::before{opacity:0;transition:opacity .45s}
.glow-hover:hover::before{opacity:1}
.glow-light{--glow-bg:#fff}
.glance{border-radius:26px;padding:26px 28px;color:var(--on-dark);box-shadow:0 50px 90px -46px rgba(0,0,0,.8)}
.glance-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.glance-head .c-ico{display:inline-flex;width:46px;height:46px;border-radius:13px;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:var(--cyan)}
.glance-kicker{display:block;font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--orange-soft)}
.glance-head strong{display:block;font-family:var(--font-head);font-size:24px;color:#fff;line-height:1.2}
.glance dl{margin:0}
.glance dl > div{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
.glance dt{font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--on-dark-muted);padding-top:2px}
.glance dd{margin:0;color:#fff;font-size:15px;line-height:1.45}
.benefit-grid{grid-template-columns:repeat(3,1fr)}
.benefit-grid li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;transition:transform .35s var(--ease),box-shadow .35s}
.benefit-grid li:hover{transform:translateY(-3px);box-shadow:0 20px 36px -26px rgba(30,34,71,.4)}
.task-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.task-cols-3{grid-template-columns:repeat(3,1fr)}
.task-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.task-col h3{font-size:17px;margin-bottom:12px}
.task-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.task-col li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:14.5px;line-height:1.45;color:var(--text)}
.task-col li svg{color:var(--green);margin-top:3px}
.callout{margin-top:22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--magenta);border-radius:0 14px 14px 0;padding:16px 20px;font-size:15px}
.callout strong{color:var(--ink)}
.terms-list{margin:6px 0 0}
.terms-list > div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.terms-list > div:first-child{border-top:0}
.terms-list dt{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink)}
.terms-list dd{margin:0;font-size:14.5px;line-height:1.5}
.plan-link{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--font-head);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:999px;padding:7px 14px;white-space:nowrap;transition:border-color .2s,background .2s}
.plan-link:hover{border-color:var(--ink);background:var(--orange-tint)}

/* ---------- Case studies ---------- */
.cs-row{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:center;padding:32px}
.cs-row h2{margin-top:6px}

/* ---------- Articles ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(24px,2.4vw,30px);margin-top:48px}
.prose h3{font-size:20px;margin-top:28px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.2em}
.prose li{margin-bottom:8px}
.prose a{color:var(--plum);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--orange-dark)}
.prose .notice{background:var(--orange-tint);border-left:4px solid var(--orange);padding:14px 18px;border-radius:0 12px 12px 0;margin:0 0 28px;font-size:15px}
.prose .updated{font-size:14px;color:var(--muted);margin-bottom:28px}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:15px;color:var(--on-dark-muted)}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:64px;align-items:start}
.article-aside{position:sticky;top:110px;display:grid;gap:16px}
.article-aside .card h3{font-size:18px}
.reading{position:fixed;top:0;left:0;height:3px;width:0;z-index:61;background:var(--sunset)}
.post-card{display:grid;grid-template-columns:1.1fr 1fr;gap:0;padding:0;overflow:hidden}
.post-card .post-img{min-height:280px;background:var(--night);position:relative;overflow:hidden}
.post-card .post-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.2s var(--ease)}
.post-card:hover .post-img img{transform:scale(1.06)}
.post-card .post-body{padding:34px;display:flex;flex-direction:column;gap:12px}
.post-card h2{font-size:clamp(24px,2.4vw,30px);margin:0}

/* ---------- Footer ---------- */
.footer{position:relative;background:var(--night);color:var(--on-dark);padding:72px 0 28px;font-size:15px}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,132,63,.6),rgba(194,85,159,.6),rgba(56,198,244,.6),transparent)}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:40px}
.footer h4{color:#fff;font-size:14px;margin:0 0 10px}
.footer a{color:var(--on-dark);display:block;line-height:2;transition:color .2s,transform .3s var(--ease)}
.footer .cols a:hover{color:#fff;transform:translateX(3px)}
.footer .brand span{color:#fff}
.footer p{color:var(--on-dark);max-width:280px}
.iso{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 12px;color:#fff;font-size:14px;font-weight:600;line-height:1.3}
.social{display:flex;gap:10px;margin-top:10px}
.social a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background .3s,border-color .3s,color .3s}
.social a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.footer .cols .social a:hover{transform:none}
.footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#9A93AC}
.footer .legal div{display:flex;gap:24px;flex-wrap:wrap}
.footer .legal a{display:inline;line-height:1;font-size:14px}

/* ---------- Page furniture ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;background:var(--sunset);transform:scaleX(0);transform-origin:left}
.to-top{position:fixed;right:20px;bottom:20px;z-index:45;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -8px rgba(30,34,71,.45);opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;transition:opacity .35s,visibility 0s .35s,transform .35s var(--ease),bottom .35s var(--ease),background .25s}
.to-top.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s,visibility 0s,transform .35s var(--ease),bottom .35s var(--ease),background .25s}
.to-top:hover{background:var(--orange);color:var(--ink)}
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:46;padding:8px;border-radius:999px;background:rgba(20,22,45,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -12px rgba(10,12,35,.6);transform:translateY(140%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
  .mbar.show{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
  .mbar .btn{flex:1;min-height:48px;width:auto}
  .mbar-call{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.25)}
  .mbar-on .to-top{bottom:84px}
}

/* ---------- Page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile-xl{grid-column:span 2;grid-row:span 1;min-height:360px}
  .tile-sm{grid-column:span 1}
  .num-list{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .num-list li:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:1000px){
  .hero .wrap,.page-hero .wrap,.split,.founder,.calc,.why,.article-layout{grid-template-columns:1fr!important}
  .hero .wrap{gap:48px}
  .hero-board{max-width:620px;padding:24px 8px 24px 16px}
  .grid-4,.grid-5{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .pillar{grid-template-columns:1fr}
  .pillar img{aspect-ratio:16/9;max-height:280px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .team-grid-sm{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .footer .cols{grid-template-columns:1fr 1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px}
  .founder img{max-width:420px}
  .why-head{position:static}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .sys-groups{grid-template-columns:1fr}
  .cs-row{grid-template-columns:1fr;padding:24px}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .task-cols,.task-cols-3{grid-template-columns:repeat(2,1fr)}
  .offer{grid-template-columns:auto 1fr}
  .offer .btn{grid-column:1/-1;justify-self:start}
  .article-aside{position:static}
  .post-card{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--hh:64px}
  .section{padding:68px 0}
  .timeline{grid-template-columns:1fr;gap:30px;padding-left:66px}
  .timeline::before,.timeline::after{top:24px;left:23px;right:auto;bottom:auto;width:3px;height:calc(100% - var(--last,60px));transform-origin:center top}
  .timeline::after{transform:scaleY(var(--p))}
  .tl-dot{position:absolute;left:-66px;top:0;margin:0}
  .compare th,.compare td{padding:13px 14px;font-size:14px}
  .compare thead th:first-child{width:52%}
  .compare-4 thead th:first-child{width:46%}
  .js .compare [data-col]:not(.is-active){display:none}
  .fit-badge{top:10px;right:10px}
  .fit-picker{gap:6px}
  .fit-picker .fit-q{width:100%}
  .fit-picker button{padding:8px 12px;font-size:13px}
  .qcard{width:320px;padding:22px}
  .qbadge{width:240px}
  .num-list{grid-template-columns:repeat(2,1fr)}
  .num-list li{border-left:0;padding:0 12px 0 0}
  .num-list li:last-child{grid-column:1/-1}
  .hero-board{padding:22px 0 34px}
  .task-card{width:212px;padding:12px 13px;font-size:13px}
  .tc-title{font-size:13.5px}
  .tc-1{left:-6px;top:-4px}
  .tc-2{right:-6px;bottom:-6px}
  .team-pill{display:none}
  .kb,.tq{height:320px}
  .kb{grid-template-columns:repeat(2,1fr)}
  .kb-col:nth-child(3){display:none}
}
@media (max-width:640px){
  .hero{padding-bottom:72px}
  .grid-2,.grid-3,.grid-4,.grid-5,.check-list,.form-card,.benefit-grid,.task-cols,.task-cols-3{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .tile-xl,.tile-sm{grid-column:span 1}
  .tile-xl{min-height:380px;padding:26px}
  .span-2,.form-foot,.form-status{grid-column:span 1}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid-sm{grid-template-columns:repeat(3,1fr);gap:12px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .footer .cols{grid-template-columns:1fr}
  .big-quote{flex-direction:column;gap:16px}
  .form-card{padding:24px}
  .btn-row .btn{width:100%}
  .card{padding:22px}
  .logos img{height:34px}
  .ind-grid{grid-template-columns:1fr}
  .glance dl > div,.terms-list > div{grid-template-columns:1fr;gap:4px}
  .plan-quad{grid-template-columns:1fr 1fr;gap:10px}
  .plan-card{padding:18px 16px;min-height:150px}
  .plan-card strong{font-size:18px}
  .plan-card span{font-size:13.5px}
  .offer{grid-template-columns:1fr;padding:26px}
  .calc-out{padding:26px}
  .systems{margin-top:64px;padding-top:44px}
  .systems-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .team-grid-sm{grid-template-columns:repeat(2,1fr)}
  .task-card{width:190px}
  .tc-foot{display:none}
}

/* ---------- Reduced motion: everything readable, nothing moving ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.pop{opacity:1;transform:none}
  .js .reveal-img{clip-path:none}
  .words .w > span{transform:none}
  .js .hero-board .task-card,.js .hero-board .team-pill{opacity:1}
  .js .timeline li:not(.lit) > *:not(.tl-dot){opacity:1}
  .tilt{transform:none}
  @view-transition{navigation:none}
}
.card.glow{border-color:transparent}
@media (max-width:1100px){.compare-4 .plan-link{white-space:normal;padding:6px 10px;font-size:13px}}

/* ===================== v2.1 ===================== */
/* Services: every service has a short description */
.svc-list li a{display:grid;grid-template-columns:18px 1fr;column-gap:12px;row-gap:3px;align-items:start;padding:13px 0;min-height:0}
.svc-list li a > svg{grid-row:1;margin-top:4px}
.svc-t{grid-column:2;font-weight:600;font-size:16px;color:var(--ink);transition:color .2s}
.svc-d{grid-column:2;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--muted)}
.svc-list li a:hover .svc-t{color:var(--orange-dark)}
.svc-list li a:hover{color:inherit}

/* Home hero: wider stage so the live board sits on the right on large screens */
@media (min-width:1101px){
  /* the live board grows into the right-hand margin on wide screens; text stays aligned with the header */
  .hero-board{margin-right:clamp(-260px, calc((var(--max) - 100vw) / 2 + 40px), 0px)}
  .task-card{width:282px}
  .tc-team{white-space:nowrap}
}

/* Client logos in full colour */
.logos.marquee .track > *{filter:none;opacity:1}
.logos img{height:42px;width:auto}
.logos img.tall{height:62px}
.logos .logo-ddrt{height:34px}

/* Testimonials: initials when there is no photo */
.person .ini{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font:700 16px/1 var(--font-head);color:#fff;background:linear-gradient(135deg,var(--plum),var(--magenta))}
.person .ini.b{background:linear-gradient(135deg,#E5702A,var(--orange))}
.qcard .src{font-size:12.5px;color:var(--muted);margin-top:2px}

/* Enquiry tabs: services consultation or Pulse products */
.enq-tabs{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--lilac);border:1px solid var(--line);margin-bottom:18px;width:fit-content;max-width:100%}
.enq-tabs button{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--font-head);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:11px 18px;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.enq-tabs button:hover{color:var(--ink)}
.enq-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 10px 20px -12px rgba(30,34,71,.6)}
.enq-panel[hidden]{display:none}
.form-h{font-size:22px;margin:0 0 4px}
fieldset.prod-picks,fieldset.dev-type{border:0;margin:0;padding:0;min-width:0}
fieldset legend{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px;padding:0}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{position:relative;display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line2);border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.pick:hover{border-color:var(--ink)}
.pick input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--orange);flex-shrink:0}
.pick strong{display:block;font:600 15px var(--font-head);color:var(--ink)}
.pick small{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:2px}
.pick:has(input:checked){border-color:var(--orange);background:var(--orange-tint);box-shadow:0 0 0 3px rgba(245,132,63,.15)}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seg{position:relative;display:block;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg strong{display:block;font:600 15px var(--font-head);color:var(--ink)}
.seg small{display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:2px}
.seg:hover{border-color:var(--ink)}
.seg:has(input:checked){border-color:var(--ink);background:var(--ink)}
.seg:has(input:checked) strong{color:#fff}
.seg:has(input:checked) small{color:var(--on-dark)}
.seg:has(input:focus-visible),.pick:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:2px}
.form-alt{margin:14px 0 0;font-size:14.5px}
.stage .form-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Pulse product pages */
.mod-card{cursor:pointer}
.mod-card .link{margin-top:auto}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px}
.feat .ico{width:42px;height:42px;border-radius:12px}
.feat h3{font-size:17px;margin:0}
.feat p{font-size:14.5px;margin:0;color:var(--text)}
.bg-lilac .feat{border-color:rgba(142,63,128,.12)}
.prod-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.prod-nav a{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--font-head);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:999px;padding:8px 14px;transition:border-color .2s,background .2s}
.prod-nav a:hover{border-color:var(--ink);background:var(--orange-tint)}
.prod-nav a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips a.chip:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* Helpdesk inbox illustration (example data only) */
.hd{display:grid;grid-template-columns:1.15fr 1fr;height:380px;background:#fff;color:var(--text);font-size:12.5px;overflow:hidden}
.hd .hd-side{display:none}
.mock:has(> .hd){container-type:inline-size}
@container (min-width:640px){.hd{grid-template-columns:150px 1fr 1.05fr}.hd .hd-side{display:flex}}
.hd-side{background:#F7F1F6;border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:3px}
.hd-side b{font:600 11px var(--font-head);color:var(--muted);margin:8px 6px 4px}
.hd-side b:first-child{margin-top:0}
.hd-side span{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;color:var(--ink);font-weight:600}
.hd-side span em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted);background:#fff;border-radius:999px;padding:1px 7px}
.hd-side span.on{background:#fff;box-shadow:0 1px 2px rgba(30,34,71,.08)}
.ch{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block;background:var(--orange)}
.ch.portal{background:var(--magenta)}.ch.phone{background:#0F6C8E}
.hd-list{border-right:1px solid var(--line);overflow:hidden}
.hd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 9px;align-items:center;padding:10px 12px;border-bottom:1px solid #F1EAF0;background:#fff}
.hd-row strong{display:block;font:600 12.5px/1.3 var(--font-head);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-row small{display:block;color:var(--muted);font-size:11px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-row .ch{grid-row:span 2}
.hd-row .tags{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hd-row.sel{background:#FFF6EF;box-shadow:inset 3px 0 0 var(--orange)}
.hd-row.enter{animation:tq-in .9s var(--ease)}
.pri{font:600 10.5px/1 var(--font-head);padding:4px 7px;border-radius:999px;background:var(--lilac);color:var(--plum)}
.pri.hi{background:#FDE7E7;color:#A32020}
.sla{font:600 10.5px/1 var(--font-head);padding:4px 7px;border-radius:999px;background:#FFE9DA;color:#B4520F;white-space:nowrap}
.sla.ok{background:var(--green-tint);color:var(--green)}
.hd-detail{padding:14px;display:flex;flex-direction:column;gap:10px;background:#FCFAFC;overflow:hidden}
.hd-dh{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.hd-dh strong{font:600 13.5px/1.3 var(--font-head);color:var(--ink)}
.hd-st{font:600 10.5px/1 var(--font-head);padding:5px 8px;border-radius:999px;background:#FFE9DA;color:#B4520F;white-space:nowrap;transition:background .4s,color .4s}
.hd-st.done{background:var(--green-tint);color:var(--green)}
.msg{padding:9px 11px;border-radius:12px;line-height:1.45;max-width:92%}
.msg.in{background:#fff;border:1px solid var(--line)}
.msg.out{align-self:flex-end;background:var(--ink);color:#fff}
.msg.note{background:#FFF7D6;border:1px dashed #E3C35A;color:#6B5310}
.hd-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.hd-meta span{font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 8px}

/* Timesheet illustration */
.ts{padding:16px;background:#fff;color:var(--text);font-size:12.5px;height:380px;overflow:hidden}
.ts-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.ts-timer{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--font-head);color:#fff;background:var(--ink);border-radius:999px;padding:7px 12px}
.ts-timer b{font-variant-numeric:tabular-nums;color:var(--orange-soft)}
.ts-timer .dot{width:8px;height:8px;border-radius:50%;background:#35D07F;animation:ping 2.2s infinite}
.ts-on{color:var(--muted)}
.ts-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.ts-grid th,.ts-grid td{padding:8px 6px;border-bottom:1px solid #F1EAF0;font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.ts-grid th{font:600 11px var(--font-head);color:var(--muted)}
.ts-grid th:first-child,.ts-grid td:first-child{text-align:left;width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-grid td:first-child{font-weight:600;color:var(--ink)}
.ts-grid td.live{background:#FFF6EF;color:#B4520F;font-weight:700;border-radius:6px}
.ts-grid tfoot td{font-weight:700;color:var(--ink);border-bottom:0}
.ts-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.ts-badge{font:600 11px var(--font-head);padding:5px 9px;border-radius:999px;background:var(--lilac);color:var(--plum);transition:background .4s,color .4s}
.ts-badge.ok{background:var(--green-tint);color:var(--green)}

/* HR illustration */
.hrx{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;background:#F7F3F8;color:var(--text);font-size:12.5px;height:380px;overflow:hidden}
.hrx-box{background:#fff;border-radius:14px;padding:12px;box-shadow:0 1px 2px rgba(30,34,71,.06)}
.hrx-box h5{font:600 12px var(--font-head);color:var(--ink);margin:0 0 10px}
.hrx-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hrx-stats div{background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 1px 2px rgba(30,34,71,.06)}
.hrx-stats b{display:block;font:700 22px/1.1 var(--font-head);color:var(--ink);font-variant-numeric:tabular-nums}
.hrx-stats span{font-size:11px;color:var(--muted)}
.lr{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #F1EAF0}
.lr:first-of-type{border-top:0}
.lr .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--font-head);color:#fff;background:var(--plum);flex-shrink:0}
.lr div{flex:1;min-width:0}
.lr strong{display:block;font:600 12px/1.3 var(--font-head);color:var(--ink)}
.lr small{color:var(--muted);font-size:11px}
.lr .st{font:600 10.5px/1 var(--font-head);padding:4px 7px;border-radius:999px;background:#FFE9DA;color:#B4520F;transition:background .4s,color .4s}
.lr .st.ok{background:var(--green-tint);color:var(--green)}
.slip dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 10px}
.slip dt{color:var(--muted)}
.slip dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.slip .ready{margin-top:10px;display:inline-flex;font:600 11px var(--font-head);padding:5px 9px;border-radius:999px;background:var(--green-tint);color:var(--green)}

/* Property: coming soon */
.soon{border-radius:26px;padding:30px;color:var(--on-dark)}
.soon h3{color:#fff;font-size:24px;margin:0 0 10px}
.soon ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.soon li{display:flex;gap:10px;align-items:flex-start}
.soon li svg{color:var(--cyan);flex-shrink:0;margin-top:3px}
.soon .tag{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--font-head);color:var(--ink);background:var(--orange);border-radius:999px;padding:6px 12px;margin-bottom:16px}

/* About: real team photos instead of AI images */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mosaic img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
.mosaic img:nth-child(2n){transform:translateY(18px)}
.band-photo img{object-position:center 58%}

/* Footer: service names stay on one line */
@media (min-width:1101px){
  .footer .cols{grid-template-columns:1.2fr 1.45fr 1fr 1fr 1.15fr;gap:32px}
  .footer .cols > div:nth-child(2) a,.footer .cols > div:nth-child(3) a{white-space:nowrap}
}

@media (max-width:1000px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .feat-grid,.picks,.segs{grid-template-columns:1fr}
  .hd{grid-template-columns:1fr;height:340px}
  .hd-detail{display:none}
  .hrx{grid-template-columns:1fr;height:auto}
  .hrx-stats{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mosaic img:nth-child(n+7){display:none}
  .enq-tabs{width:100%}
  .enq-tabs button{flex:1;justify-content:center;padding:10px 12px;font-size:14px}
}

/* v2.1: product switcher under every Pulse product hero */
.prod-strip{background:#fff;border-bottom:1px solid var(--line);padding:14px 0}
.prod-strip .wrap{display:flex;align-items:center;gap:16px}
.prod-label{font:600 12.5px var(--font-head);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.prod-strip .prod-nav{margin:0;min-width:0}
.ch.email{background:var(--cyan)}
@media (max-width:760px){
  .prod-strip .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .prod-strip .prod-nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:none}
  .prod-strip .prod-nav::-webkit-scrollbar{display:none}
  .prod-strip .prod-nav a{white-space:nowrap}
}
.enq{min-width:0}
.hd-row > div{min-width:0}
.hd-list{min-width:0}
@media (max-width:640px){.enq-x{display:none}}

/* ===================== v2.2 ===================== */
/* Home hero: 16:9 team photo; the live task cards sit over the lower corners so no faces are covered */
.hero-photo img{aspect-ratio:16/9}
.tc-1{top:auto;bottom:-22px;left:-6px}
.tc-2{bottom:1%;right:-18px}
.band-photo img{object-position:center 35%}
@media (max-width:760px){
  .hero-board{padding:22px 0 56px}
  .tc-1{top:auto;bottom:-6px;left:-6px}
  .tc-2{display:none}
}

/* ---------- v2.3 ---------- */
/* top bar: both office numbers, above the main header row; folds away once the page scrolls */
:root{--tb:34px}
.header > .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hh);transition:height .35s var(--ease)}
.header.scrolled > .wrap{height:64px}
.topbar{height:var(--tb);overflow:hidden;border-bottom:1px solid var(--line);font-size:13px;transition:height .35s var(--ease),border-color .35s,visibility .35s}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.tb-note{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:500;white-space:nowrap;transition:color .35s}
.tb-note svg{color:var(--cyan-deep,#0F6C8E)}
.tb-links{display:flex;align-items:center;gap:22px}
.tb-links a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-family:var(--font-head);font-weight:500;white-space:nowrap;transition:color .35s}
.tb-links a:hover{color:var(--plum)}
.rg{display:inline-block;min-width:24px;text-align:center;font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1;padding:3px 4px;border-radius:5px;background:rgba(30,34,71,.08);color:var(--plum);transition:background .35s,color .35s}
.header.scrolled .topbar{height:0;visibility:hidden;border-bottom-width:0}
.dark-top .header:not(.scrolled):not(.menu-open) .topbar{border-bottom-color:rgba(255,255,255,.1)}
.dark-top .header:not(.scrolled):not(.menu-open) .tb-note{color:var(--on-dark-muted)}
.dark-top .header:not(.scrolled):not(.menu-open) .tb-note svg{color:var(--cyan)}
.dark-top .header:not(.scrolled):not(.menu-open) .tb-links a{color:#fff}
.dark-top .header:not(.scrolled):not(.menu-open) .tb-links a:hover{color:var(--orange-soft)}
.dark-top .header:not(.scrolled):not(.menu-open) .rg{background:rgba(255,255,255,.14);color:#fff}
html:not(.js) .dark-top .header:not(.scrolled):not(.menu-open) .tb-links a,html:not(.js) .dark-top .header:not(.scrolled):not(.menu-open) .brand span,html:not(.js) .dark-top .header:not(.scrolled):not(.menu-open) .nav > a:not(.btn){color:var(--ink)}
html:not(.js) .dark-top .header:not(.scrolled):not(.menu-open) .tb-note{color:var(--muted)}
main > section:first-child{padding-top:calc(var(--hh) + var(--tb) + 64px)}
main > .hero:first-child{padding-top:calc(var(--hh) + var(--tb) + 76px)}
.nav-phones{display:none}
@media (max-width:1060px){
  .nav{max-height:calc(100vh - 64px - var(--tb))}
  .nav .nav-phones{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
  .nav .nav-phones a{border:0;padding:4px 0;font-size:16px;gap:8px}
}
@media (max-width:760px){
  :root{--tb:32px}
  .topbar .tb-note,.tb-links .tb-mail{display:none}
  .topbar .wrap{justify-content:center}
  .topbar{font-size:12.5px}
  .tb-links{gap:16px}
}
@media (max-width:360px){ .tb-links{gap:10px} .topbar{font-size:11.5px} .tb-links .rg{min-width:20px;padding:3px 3px} }

/* ---------- Pulse product pages: real screens, gallery with a list of views ---------- */
.screens-sec .section-head p{color:var(--on-dark-muted);max-width:640px;margin:8px 0 0}
.screens{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start;margin-top:34px}
.scr-list{display:flex;flex-direction:column;gap:3px}
.scr-group{font:600 12px/1.3 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-soft);margin:16px 14px 6px}
.scr-group:first-child{margin-top:2px}
.scr-list button{position:relative;display:block;width:100%;text-align:left;font:500 15px/1.3 var(--font-head);color:var(--on-dark);background:transparent;border:1px solid transparent;border-radius:12px;padding:11px 14px 12px 16px;cursor:pointer;overflow:hidden;transition:background .25s,color .25s,border-color .25s}
.scr-list button:hover{background:rgba(255,255,255,.05);color:#fff}
.scr-list button[aria-pressed="true"]{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);color:#fff}
.scr-list button[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--orange)}
.scr-list button::after{content:"";position:absolute;left:16px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(245,132,63,.75);transform:scaleX(0);transform-origin:left}
.screens.auto .scr-list button[aria-pressed="true"]::after{animation:tabfill var(--scr-dur,6s) linear forwards}
.screens.auto.hold .scr-list button::after{animation-play-state:paused}
.scr-stage{margin:0;min-width:0}
.scr-frame{border-radius:18px;overflow:hidden;background:#0C0E25;border:1px solid rgba(255,255,255,.14);box-shadow:0 44px 90px -40px rgba(0,0,0,.85)}
.scr-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--on-dark);white-space:nowrap;overflow:hidden}
.scr-bar i{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.scr-bar i:nth-child(1){background:#F5843F}.scr-bar i:nth-child(2){background:#C2559F}.scr-bar i:nth-child(3){background:#38C6F4}
.scr-bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.scr-imgs{position:relative;aspect-ratio:16/10;background:#F2F0F6}
.scr-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.015);transition:opacity .55s ease,transform .9s var(--ease)}
.scr-imgs img.on{opacity:1;transform:none}
.scr-cap{margin:16px 2px 0;color:var(--on-dark);font-size:16px;line-height:1.55;min-height:3.1em}
.scr-cap strong{color:#fff;font-family:var(--font-head);font-weight:600;margin-right:6px}
.scr-note{margin:8px 2px 0;font-size:13px;color:var(--on-dark-muted)}
@media (max-width:900px){
  .screens{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .scr-list{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
  .scr-list::-webkit-scrollbar{display:none}
  .scr-group{display:none}
  .scr-list button{flex:0 0 auto;width:auto;white-space:nowrap;border-color:rgba(255,255,255,.16);border-radius:999px;padding:8px 15px 9px;font-size:14px;scroll-snap-align:start}
  .scr-list button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
  .scr-list button[aria-pressed="true"]::before{display:none}
  .scr-list button::after{left:15px;right:15px;bottom:4px;background:rgba(30,34,71,.45)}
  .scr-frame{border-radius:12px}
  .scr-bar{height:32px;font-size:12px}
  .scr-cap{font-size:15px}
}

/* ---------- Pulse product pages: specification sheet ---------- */
.spec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.spec-head p{max-width:520px;margin:0;color:var(--muted)}
.spec{columns:2;column-gap:20px}
.spec-group{display:block;break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 24px 10px;box-shadow:0 20px 40px -32px rgba(30,34,71,.35)}
.spec-group summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em;margin:0 0 6px;padding:2px 0}
.spec-group summary::-webkit-details-marker{display:none}
.spec-group summary .ico{width:36px;height:36px;border-radius:10px;flex:0 0 36px}
.spec-t{flex:1;font:inherit;color:inherit;margin:0;letter-spacing:inherit}
.spec-chev{width:10px;height:10px;border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;opacity:.7}
.spec-group:not([open]) .spec-chev{transform:rotate(-45deg)}
.spec-group:not([open]){padding-bottom:18px}
.spec-group:not([open]) summary{margin:0}
.spec-group dl{margin:0}
.spec-group dl > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.spec-group dl > div:first-child{border-top:0}
.spec-group dt{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink)}
.spec-group dd{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.spec-note{margin:22px 0 0;font-size:14px;color:var(--muted);max-width:900px}
@media (max-width:900px){
  .spec{columns:1}
}
@media (max-width:560px){
  .spec-group{padding:18px 18px 8px}
  .spec-group dl > div{grid-template-columns:1fr;gap:3px}
}
.hero-shot{margin:0}
.hero-shot .scr-frame{box-shadow:0 50px 90px -40px rgba(0,0,0,.85)}
.hero-shot .tag{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-head);color:var(--ink);background:var(--orange);border-radius:999px;padding:6px 12px}
.hero-shot .scr-imgs{background:#fff}
.hero-shot .scr-imgs img{opacity:1;transform:none;position:absolute}

.scr-full{margin-left:auto;flex:0 0 auto;font:600 12px var(--font-head);color:var(--on-dark);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 10px;transition:border-color .2s,color .2s}
.scr-full:hover{color:#fff;border-color:rgba(255,255,255,.55)}

/* ---------- Service pillar pages: one section per service ---------- */
.svc-block{padding:clamp(56px,7vw,96px) 0;scroll-margin-top:118px;border-top:1px solid var(--line)}
.svc-block.bg-lilac{border-top-color:transparent}
.svc-blocks > .svc-block:first-child{border-top:0}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.svc-main h2{font-size:clamp(26px,3vw,36px);margin:14px 0}
.svc-num{font:600 13px var(--font-head);letter-spacing:.08em;color:var(--plum)}
.svc-lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink);margin:0 0 12px}
.svc-main p:not(.svc-lede){color:var(--text);max-width:620px}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.svc-side{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 28px;box-shadow:0 30px 60px -44px rgba(30,34,71,.45)}
.svc-side h3{font-size:18px;margin:0 0 14px}
.svc-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.svc-checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--text)}
.svc-checks svg{flex-shrink:0;margin-top:3px;color:var(--green)}
.svc-tools-h{font:600 12px var(--font-head);color:var(--muted);margin:22px 0 10px;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr} }
@media (max-width:760px){ .jump-scroll{display:none} }

/* ---------- Industry pages ---------- */
.ind-panel{display:grid;gap:10px;padding:20px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ind-panel-h{font:600 12px var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-soft);margin:2px 4px 4px}
.ind-svc{position:relative;display:block;padding:14px 46px 15px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;transition:background .3s,border-color .3s}
.ind-svc strong{display:block;font:600 16px var(--font-head);color:#fff}
.ind-svc span{display:block;font-size:14.5px;color:var(--on-dark);margin-top:4px;line-height:1.45}
.ind-svc em{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--orange-soft);transition:transform .3s var(--ease)}
.ind-svc:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);color:#fff}
.ind-svc:hover em{transform:translate(4px,-50%)}
.ind-pulse{display:block;padding:12px 0 0;margin-top:12px;border-top:1px solid rgba(255,255,255,.14);color:#fff}
.ind-pulse strong{display:block;font:600 15px var(--font-head);color:var(--cyan)}
.ind-pulse span{display:block;font-size:14.5px;color:var(--on-dark);margin-top:2px}
.ind-pulse:hover strong{text-decoration:underline;text-underline-offset:3px}