/* =========================================================
   Tokens. Colours sampled from vocalchat.ai. Type: Figtree and DM Mono.
   Every card and square is transparent with a thin outline. No filled cards.
   ========================================================= */
:root{
  color-scheme:light;
  /* ground and ink */
  --bg:#ffffff; --paper:#f6f6f2; --soft:#f2f2ee; --ink:#111111; --ink-2:#2f2d2d; --ink-3:#43424c; --muted:#87838f; --muted-2:#6e7191;
  /* outlines are gray, dots are gray */
  --line:#e2e2e6; --line-2:#c9c9cf; --dot:#d4d5da; --dot-2:#e6e7eb;
  /* the olive accent family */
  --accent:#5f7324; --accent-ink:#4f6120; --accent-deep:#3f4f17; --accent-bright:#7e9a32; --accent-soft:#a9bf5a; --accent-pale:#eef3dd;
  --accent-wash:rgba(95,115,36,.10); --glow:0 12px 28px -8px rgba(95,115,36,.38);
  /* status palette, each with its pale ground */
  --ok:#0f9d58; --ok-bg:#e6f6ee; --info:#0ea5e9; --info-bg:#e0f4fd; --warn:#f59e0b; --warn-bg:#fef3e2; --special:#8b5cf6; --special-bg:#f3f0ff;
  --green:var(--ok);
  /* dark panels */
  --panel:#141517; --panel-2:#22242a; --panel-ink:#e8e8ea; --panel-muted:#9a9ba3;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --pixel:"Doto","DM Mono",ui-monospace,monospace;
  --r:20px; --r-sm:12px; --r-xs:8px; --spring:cubic-bezier(.2,.8,.2,1); --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--accent)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.wrap.narrow{max-width:820px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:2px}
.accent{color:var(--accent)} .accent-blue{color:var(--accent-bright)}
.lead{font-size:18px;color:var(--ink-3);line-height:1.55;max-width:58ch}
.sub{color:var(--ink-3)} .center{text-align:center}
section{padding-block:clamp(40px,4.4vw,62px)}
/* A page that does not close on the final CTA band runs its last section straight into
   the dark footer, and the standard padding reads tight against that hard black edge.
   Give the last one real air. Hits contact, the 6 blog posts and the 2 legal pages;
   the .final band is excluded because it carries its own. Set 10.10.2026. */
main>section:last-child:not(.final){padding-bottom:clamp(112px,12vw,180px)}
/* On the home page the trade cards run straight into the calculator, and two full
   section paddings back to back left a canyon between them. Tighten that one junction
   rather than the global rhythm. #industries exists on the home page only. */
.shead{display:grid;gap:14px;margin-bottom:clamp(32px,4.5vw,52px);max-width:72ch}
.shead h2{font-size:clamp(32px,4.4vw,50px)}
/* olive section lead. Scoped with a class, not an id: #how also exists on the trade
   pages and the receptionist page, so an id selector would leak onto them. */
.olive-lead .shead .lead{color:var(--accent)}
/* About Us runs four text sections in a row, and two full section paddings back to
   back left a canyon at each junction. Tightened here only. #summary and #system are
   About-only ids; #how is shared with the receptionist page, so the padding hangs off
   .olive-lead, which is on the About sections alone. */
.shead.center{text-align:center;justify-items:center;margin-inline:auto}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);background:var(--bg)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.divider{margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:16px}
.divider::before,.divider::after{content:"";width:56px;height:1px;background:var(--line)}

/* outlined surfaces */
.card{background:transparent;border:1px solid var(--line);border-radius:var(--r);position:relative}
.card.dots{background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px;background-position:center}
.card .corner{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent-soft)}
.card .corner.tl{top:14px;left:14px}.card .corner.tr{top:14px;right:14px}.card .corner.bl{bottom:14px;left:14px}.card .corner.br{bottom:14px;right:14px}
a.card{display:block;transition:transform .3s var(--spring),border-color .3s}
a.card:hover{transform:translateY(-4px);border-color:var(--ink)}
.more{font-size:13px;font-weight:600;color:var(--accent-ink)}
.k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 34px;border-radius:999px;border:1px solid #2a2a2a;background:#111;color:#fff;font-family:var(--pixel);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 0 rgba(0,0,0,.35);transition:transform .25s var(--spring),box-shadow .25s var(--spring),background .2s;white-space:nowrap}
/* a long label must never push the page wider than the viewport. nowrap is right for
   the short labels, so below 560px the button is allowed to wrap and shed some of its
   padding and tracking instead of overflowing. Caught by a long calculator CTA that
   measured 403px in a 390px viewport. */
@media (max-width:560px){
  .btn{white-space:normal;max-width:100%;padding:0 22px;letter-spacing:.06em;
  height:auto;min-height:56px;padding-block:14px;text-align:center;line-height:1.25}
}
.btn:hover{transform:translateY(-2px);background:#1c1c1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 12px 26px -8px rgba(17,17,17,.45)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:inset 0 0 0 1px transparent}
.btn.ghost:hover{border-color:var(--ink);background:transparent;box-shadow:none}
.btn.wide{width:100%} .btn.small{height:36px;padding:0 16px;font-size:12px;letter-spacing:.08em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ctas.center{justify-content:center}
.ctas .note{width:100%;font-size:13px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;background:var(--bg)}
a.chip:hover{border-color:var(--ink)}
.pillrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.pillrow.big{justify-content:flex-start;margin-top:0}
.pillrow.big .chip{height:40px;padding:0 16px;font-size:14px}
.fine{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;font-size:13px;color:var(--muted)}
.fine1{font-size:13px;color:var(--muted)}
.fbtn{border:1px solid var(--line-2);background:var(--bg);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink-2)}
.fbtn:hover{background:var(--soft)}
.fbtn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--spring),transform .7s var(--spring);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade-right{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pulse-ring{0%{transform:scale(.7);opacity:.7}70%{opacity:0}100%{transform:scale(1.15);opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes dash{to{stroke-dashoffset:-48}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes wave{from{height:5px}to{height:22px}}
@keyframes travel{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}

/* =========================================================
   Top bar, nav, mobile menu
   ========================================================= */
.topbar{background:var(--panel);font-size:13px;color:var(--panel-muted)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;height:38px;align-items:center}
.topbar b{font-weight:600;color:var(--accent-soft)}
.topbar .right{color:var(--panel-muted)}
@media (max-width:700px){.topbar .right{display:none}}
header.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.nav>.wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:16px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.brand .mark{width:18px;height:18px;display:grid;place-items:center}
.brand .mark .cube3d{--s:18px}
.menu{display:flex;gap:2px;align-items:center}
.menu>a,.menu .dd>.tab{display:inline-flex;align-items:center;gap:6px;padding:8px 6px 8px 12px;border-radius:999px 0 0 999px;font-size:14px;font-weight:500;color:var(--ink-3);transition:background .2s,color .2s;position:relative}
.menu>a{padding:8px 12px;border-radius:999px}
.menu .dd>.chev{display:inline-flex;align-items:center;justify-content:center;width:26px;height:36px;border-radius:0 999px 999px 0;color:var(--ink-3);transition:background .2s,color .2s}
.menu .dd>.chev svg{transition:transform .25s var(--spring)}
.menu .dd.open>.chev svg{transform:rotate(180deg)}
.menu>a:hover,.menu .dd:hover>.tab,.menu .dd:hover>.chev,.menu .dd.open>.tab,.menu .dd.open>.chev{background:var(--soft);color:var(--ink)}
.menu>a.on,.menu .dd.on>.tab{color:var(--ink)}
.menu>a.on::after,.menu .dd.on>.tab::after{content:"";position:absolute;left:12px;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px}
.dd{position:relative;display:inline-flex;align-items:center}
.dd .panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(calc(-50% + var(--shift,0px))) translateY(6px);width:min(640px,92vw);background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--spring);box-shadow:0 20px 50px rgba(17,17,17,.10)}
.dd.open .panel{opacity:1;pointer-events:auto;transform:translateX(calc(-50% + var(--shift,0px))) translateY(0)}
.dd .panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd .cols{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd .cols a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;font-size:14px}
.dd .cols a:hover{background:var(--soft)}
.dd .cols a b{font-weight:600} .dd .cols a span{font-size:12px;color:var(--muted-2)}
.dd .all{display:block;margin-top:6px;padding:10px 12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--accent-ink)}
.navr{display:flex;align-items:center;gap:10px}
header .btn{height:44px;padding:0 22px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:999px;place-items:center;gap:5px;flex-direction:column;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mobile{border-top:1px solid var(--line);background:var(--bg);padding:10px clamp(16px,4vw,40px) 20px;display:grid;gap:2px}
.mobile a,.mobile summary{display:block;padding:12px 8px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.mobile details a{padding-left:20px;font-weight:400;font-size:15px;border-bottom:0}
@media (max-width:980px){.menu{display:none}.burger{display:flex}header .btn{display:none}}
@media (min-width:981px){.mobile{display:none!important}}

/* =========================================================
   Heroes
   ========================================================= */
.hero{padding-block:clamp(22px,2.5vw,34px) clamp(28px,3.6vw,48px);position:relative}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot-2) 1.2px,transparent 1.6px);background-size:15px 15px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse at 50% 12%,#000 26%,transparent 76%);mask-image:radial-gradient(ellipse at 50% 12%,#000 26%,transparent 76%);pointer-events:none}
/* the green radial wash behind every hero is off, 10.10.2026. The dot grid in
   .hero::before stays, so the hero still has texture, just no colour cast. */
.hero>.wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,4.5vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.04}
.hero.center .wrap{display:grid;justify-items:center;text-align:center;gap:22px}
.hero.center .lead{text-align:center;max-width:62ch}
.hero.center h1{max-width:20ch}
.hero.center .ctas{justify-content:center}
.hero.center .wrap>*{animation:fade-up .6s var(--spring) both}
.hero.center .wrap>*:nth-child(2){animation-delay:.08s}.hero.center .wrap>*:nth-child(3){animation-delay:.16s}.hero.center .wrap>*:nth-child(4){animation-delay:.24s}.hero.center .wrap>*:nth-child(5){animation-delay:.32s}
/* column-gap only. The old shorthand also put 72px between the visual row and the
   CTA row, which was the single biggest thing pushing the CTA under the fold.
   Vertical spacing is handled by each row's own margin instead. */
.hero.split .grid{display:grid;grid-template-columns:1fr 1.2fr;column-gap:clamp(32px,5vw,72px);row-gap:0;align-items:center}
@media (max-width:980px){.hero.split .grid{grid-template-columns:1fr}}
.hero .copy{display:grid;gap:clamp(13px,1.35vw,18px);justify-items:start}
.hero .copy>*{animation:fade-up .6s var(--spring) both}
.hero .copy>*:nth-child(2){animation-delay:.1s}.hero .copy>*:nth-child(3){animation-delay:.18s}.hero .copy>*:nth-child(4){animation-delay:.26s}.hero .copy>*:nth-child(5){animation-delay:.34s}.hero .copy>*:nth-child(6){animation-delay:.42s}
.hero .works{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.ticks{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-3)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks li::before{content:"";width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translateY(-2px)}
/* The hero's three points sit on ONE row at every width. That is only possible because
   the labels were shortened: the originals needed about 580px and a 390px phone has
   358px, which would have meant a 9px font. Each is nowrap and the row never wraps, so
   the type scales down with the viewport instead of breaking. */
.hero-ticks{flex-wrap:nowrap;gap:0 16px;justify-content:flex-start}
.hero-ticks li{white-space:nowrap}
/* the hero CTA and its note are centred at EVERY width, not only on a phone */
.hero .ctas{justify-content:center;text-align:center}
/* the note under the hero CTA: capped and balanced so it sets as two even lines
   instead of a long first line and a single orphaned word on the second */
.hero .ctas .note{text-align:center;max-width:46ch;margin-inline:auto;text-wrap:balance}
/* real air between the stat tiles and the CTA */
/* the tiles sit a little tighter under the lead than the rest of the copy stack */
.hero .ministats{margin-bottom:0;margin-top:clamp(-12px,-0.7vw,-6px)}
@media (max-width:620px){
  /* fluid, so the row keeps fitting on a 360 or 320 phone instead of only on a 390 */
  .hero .hero-ticks{gap:0 8px;font-size:clamp(9.5px,2.95vw,13px);justify-content:space-between}
  .hero .hero-ticks li{gap:6px}
  .hero .hero-ticks li::before{width:11px;height:6px;border-width:1.5px}
  /* the hero CTA and its note centred on a phone */
  .hero .ctas{flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .hero .ctas .note{text-align:center}
}
.ministats{display:flex;flex-wrap:wrap;gap:10px}
.ms{border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:grid;gap:2px;min-width:150px;flex:1}
.ms b{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
.ms span{font-size:12px;color:var(--ink-3)} .ms small{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;width:100%;max-width:900px;text-align:center}
.statrow.six{grid-template-columns:repeat(3,1fr);max-width:none}
.sbox{border:1px solid var(--line);border-radius:16px;padding:22px 18px;display:grid;gap:6px;justify-items:center}
.sbox b{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--accent);line-height:1}
.sbox span{font-size:14px;color:var(--ink-3);max-width:24ch} .sbox small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.statrow,.statrow.six{grid-template-columns:1fr}}
.hero.article{padding-bottom:20px}
.hero.article .wrap{display:grid;gap:18px}
.hero.article h1{font-size:clamp(34px,4.6vw,54px)}
.byline{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted-2)}
.byline .mark,.authorbox .mark{width:40px;height:40px;display:grid;place-items:center;flex:none}
.byline .mark .cube3d,.authorbox .mark .cube3d{--s:40px}
.byline b{display:block;color:var(--ink);font-weight:600}
.mockwrap{animation:fade-right .7s var(--spring) .25s both}

/* hero visual: the chip scene. Six agent cards around the logo, traces drawn on a canvas, one card live at a time. */
.hero-visual{animation:fade-right .7s var(--spring) .25s both;width:100%;position:relative;min-width:0}
/* The hero CTA is its own grid row spanning both columns, so it centres on the PAGE
   rather than on the copy column. The scene sits at the top of its cell and is pulled
   up slightly, instead of being vertically centred against the copy. */
.hero.split .grid{align-items:start}
.hero.split .grid>.herocta{grid-column:1 / -1;flex-direction:column;align-items:center;
justify-content:center;text-align:center;margin-top:clamp(8px,1vw,14px)}
.hero.split .hero-visual{align-self:start;margin-top:clamp(0px,1vw,14px)}
@media (max-width:980px){
  .hero.split .hero-visual{margin-top:0}
  .hero.split .grid>.herocta{margin-top:clamp(12px,3vw,24px)}
}
.chip-scene{position:relative;width:100%;height:600px;overflow:hidden}
@media (min-width:981px){.chip-scene{overflow:visible}}
.chip-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.chip-stage{position:absolute;left:50%;top:50%;width:584px;height:600px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center}
.chip-logo{position:absolute;left:50%;top:50%;width:104px;height:100px;transform:translate(-50%,-50%);border:1.5px solid var(--ink);border-radius:26px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 8px;box-shadow:0 18px 40px -18px rgba(17,17,17,.28);z-index:2}
.chip-logo .mark{display:grid;place-items:center} .chip-logo .mark .cube3d{--s:23px}
.chip-logo-name{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-align:center;line-height:1.25}
/* the second word of the wordmark sits in regular, as the logo sets it */
.brand .lt,.chip-logo-name .lt{font-weight:400}
.chip-logo::before{content:"";position:absolute;inset:-12px;border-radius:34px;border:1px solid var(--accent);opacity:0;animation:pulse-ring 3.2s ease-out infinite}
.chip-logo::after{content:"";position:absolute;inset:-1px;border-radius:26px;box-shadow:0 0 0 6px var(--accent-wash);opacity:.9}
.chip-card{position:absolute;width:182px;opacity:0;animation:chip-card-in .8s var(--spring) both;z-index:1}
.chip-card:nth-child(2){animation-delay:.48s}.chip-card:nth-child(3){animation-delay:.54s}.chip-card:nth-child(4){animation-delay:.6s}.chip-card:nth-child(5){animation-delay:.66s}.chip-card:nth-child(6){animation-delay:.72s}.chip-card:nth-child(7){animation-delay:.78s}
.chip-card-frame{padding:1px;border-radius:16px;background:linear-gradient(160deg,var(--line-2),var(--line) 45%,var(--accent-soft) 80%,var(--accent))}
.chip-card-panel{border-radius:15px;background:linear-gradient(168deg,#fff 0%,#fff 58%,var(--accent-pale) 100%);padding:12px 12px 11px;display:grid;gap:7px;box-shadow:0 14px 26px -14px rgba(20,20,20,.28);transition:transform .35s var(--spring)}
.chip-card.is-receiving .chip-card-panel{transform:translateY(-3px)}
.chip-card-head{display:flex;gap:9px;align-items:center}
.chip-card-icon{width:22px;height:22px;flex:none;border:1px solid var(--line-2);border-radius:6px;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:4px 4px 5px;background:#fff}
.chip-card-icon i{display:block;width:2px;border-radius:1px;background:var(--line-2);transition:background .3s,height .3s}
.chip-card-icon i:nth-child(1){height:5px}.chip-card-icon i:nth-child(2){height:10px}.chip-card-icon i:nth-child(3){height:7px}
.chip-card.is-receiving .chip-card-icon{border-color:var(--accent)} .chip-card.is-receiving .chip-card-icon i{background:var(--accent)}
.chip-card.is-receiving .chip-card-icon i:nth-child(1){animation:wave .7s ease-in-out infinite alternate}.chip-card.is-receiving .chip-card-icon i:nth-child(2){animation:wave .7s ease-in-out .2s infinite alternate}.chip-card.is-receiving .chip-card-icon i:nth-child(3){animation:wave .7s ease-in-out .4s infinite alternate}
.chip-card-titlewrap{display:grid;gap:1px;min-width:0}
.chip-card-kicker{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.chip-card-title{font-size:11.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-card-status{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.chip-card-status-dot{width:6px;height:6px;border-radius:50%;background:var(--line-2);position:relative;flex:none}
.chip-card.is-receiving .chip-card-status{color:var(--accent-ink)} .chip-card.is-receiving .chip-card-status-dot{background:var(--accent)}
.chip-card.is-receiving .chip-card-status-dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);animation:chip-dot-pulse 1.6s ease-out infinite}
.chip-card-rule{height:1px;background:var(--line)}
.chip-card-cap{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:500;color:var(--muted-2);padding:4px 6px;border-radius:6px;transition:background .3s,color .3s;white-space:nowrap}
.chip-card-cap.is-active{background:var(--accent-pale);color:var(--ink)}
.chip-card-cap-check{width:12px;height:12px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;flex:none;transition:background .3s}
.chip-card-cap-check svg{width:8px;height:8px}
.chip-card-cap.is-active .chip-card-cap-check{background:var(--accent)}
.chip-card-cta{display:none}
@keyframes chip-card-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes chip-dot-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.hubcenter{width:100%;display:grid;justify-items:center;margin-top:8px}
.hubcenter .hero-visual{max-width:720px}

/* tickers */
/* touch-action:pan-y is load bearing, not a tidy-up. These two hold 3901px and 10203px
   of track inside a ~390px box with overflow-x:hidden. On a touch screen a drag that
   starts on one of them can be resolved to its horizontal axis, and because it cannot
   actually scroll the gesture is swallowed and the whole page feels frozen under the
   finger. pan-y tells the browser only vertical panning lives here. Invisible on a
   mouse, which is why it only ever showed up on mobile. Fixed 10.10.2026. */
.tickerwrap{border-block:1px solid var(--line);padding-block:16px;display:grid;gap:12px;justify-items:center;overflow:hidden;touch-action:pan-y}
.ticker{overflow:hidden;width:100%;touch-action:pan-y}
.track{display:flex;gap:56px;width:max-content;animation:marquee 32s linear infinite;font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.track span{display:flex;align-items:center;gap:56px}
.track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ticker:hover .track{animation-play-state:paused}
.ticker.plain .track{text-transform:none;letter-spacing:0;font-family:var(--font);font-size:14px;gap:14px;animation-duration:38s}
.ticker.plain .track span{gap:14px} .ticker.plain .track span::after{display:none}
/* the logo track repeats 8x, so its cycle is 4x wider than the plain ticker: 4x the duration keeps the same 33.6 px/s. */
.ticker.plain .track.logos{animation-duration:152s}
.logo{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;border:1px solid var(--line);border-radius:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.logo b,.ab{width:30px;height:30px;border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--ink-3)}
.ab.big{width:56px;height:56px;font-size:14px;margin-bottom:8px}
section.integ{padding-bottom:0}
section.integ .shead{margin-bottom:24px}

/* why */
.why{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){.why{grid-template-columns:1fr}}
.whyc{padding:26px;display:grid;gap:16px;align-content:start}
.whyc h3{font-size:26px}
.stack{display:flex;flex-wrap:wrap;gap:8px}
.conn{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.conn i{flex:1;height:1px;background:var(--line-2);position:relative;overflow:visible}
.conn i::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:travel 2.4s linear infinite}
.conn b{font-family:var(--font);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);border:1.5px solid var(--ink);border-radius:10px;padding:6px 12px}
.outs{display:grid;gap:8px}
.outs div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0;font-size:14px}
.outs div span{color:var(--muted-2)} .outs div b{font-weight:600}
.threestats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 26px}
.threestats.col{grid-template-columns:1fr 1fr;margin:0}
.threestats div{border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:4px}
.threestats b{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1} .threestats span{font-size:13px;color:var(--muted-2)}
@media (max-width:640px){.threestats{grid-template-columns:1fr}}

/* feature cards */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feat>*{min-width:0}
@media (max-width:820px){.feat{grid-template-columns:1fr}}
.fcard{padding:34px;min-height:380px;display:grid;grid-template-rows:1fr auto;gap:22px}
.fcard h3{font-size:26px;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.fcard p{color:var(--muted-2);font-size:15px;max-width:44ch}
.viz{position:relative;display:grid;place-items:center;min-height:180px}
.cflow{display:flex;align-items:center}
.cflow .tile{width:72px;height:72px;border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;background:var(--bg);color:var(--ink-3)}
.cflow .tile.av{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.cflow .seg{width:54px;height:1px;background:var(--line-2);position:relative}
.cflow .seg i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:travel 2.4s linear infinite}
.cflow .seg:nth-of-type(4) i{animation-delay:1.2s}
.route{display:grid;justify-items:center}
.route .timer{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--accent);border-radius:12px;color:var(--accent);font-family:var(--mono);font-size:14px}
.route .stem{width:1px;height:26px;background:var(--line-2)} .route .bar{width:220px;height:1px;background:var(--line-2)}
.route .legs{display:flex;justify-content:space-between;width:220px} .route .legs i{width:1px;height:22px;background:var(--line-2)}
.route .tiles{display:flex;gap:26px}
.route .tiles b{width:54px;height:54px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;font-size:11px;font-family:var(--mono);color:var(--muted);transition:border-color .3s,color .3s}
.route .tiles b.on{border-color:var(--ink);color:var(--ink)}
.orbit{position:relative;width:260px;height:180px}
.orbit .c{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);border:1.5px solid var(--ink);border-radius:18px;display:grid;place-items:center;background:var(--bg)}
.orbit .c .cube3d{--s:28px}
.orbit .s{position:absolute;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);background:var(--bg);animation:float 3s ease-in-out infinite}
.orbit .s:nth-child(2){left:8px;top:64px;animation-delay:.2s}.orbit .s:nth-child(3){left:58px;top:10px;animation-delay:.6s}.orbit .s:nth-child(4){left:160px;top:6px;animation-delay:1s}.orbit .s:nth-child(5){left:210px;top:66px;animation-delay:1.4s}.orbit .s:nth-child(6){left:62px;top:126px;animation-delay:1.8s}.orbit .s:nth-child(7){left:156px;top:130px;animation-delay:2.2s}
.live{position:relative;width:min(100%,320px);padding:16px 18px;border-radius:18px;background:var(--bg);display:flex;align-items:center;gap:14px}
.live::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;background:linear-gradient(120deg,var(--accent-bright),var(--accent),var(--accent-soft));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.live .av{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--accent)}
.live .who{font-size:13px;color:var(--muted-2)} .live .who b{color:var(--ink);font-weight:600}
.wave{display:flex;align-items:center;gap:3px;height:22px;margin-top:6px}
.wave i{width:3px;border-radius:2px;background:var(--accent);height:6px;animation:wave 1.1s ease-in-out infinite alternate}
.wave i:nth-child(2n){background:var(--accent-bright)}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}.wave i:nth-child(6){animation-delay:.5s}.wave i:nth-child(7){animation-delay:.6s}.wave i:nth-child(8){animation-delay:.7s}.wave i:nth-child(9){animation-delay:.8s}.wave i:nth-child(10){animation-delay:.9s}
.live .sh{position:absolute;left:8%;right:8%;bottom:-14px;height:14px;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;opacity:.6}
@media (max-width:480px){.fcard{padding:22px;min-height:0}.cflow .tile{width:60px;height:60px}.cflow .seg{width:34px}.orbit{transform:scale(.92)}}

/* two service cards and dot-matrix */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.svc{padding:34px 34px 30px;display:grid;gap:26px;align-content:start}
.svc .head{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start}
.svc .head h3{font-size:24px} .svc .head p{color:var(--muted-2);font-size:16px;margin-top:6px}
.svc ul{display:grid;gap:14px}
.svc li,.biglist li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.ck{width:26px;height:26px;flex:none} .ck svg{width:26px;height:26px}
.biglist{display:grid;gap:14px;font-size:16px}
.dotmat{width:96px;height:96px}

/* build list */
.buildtop{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin:clamp(80px,9vw,128px) 0 8px}
.buildtop h2{font-size:clamp(32px,4.4vw,50px)}
.buildtop p{text-align:right;color:var(--ink-3);max-width:36ch;justify-self:end}
@media (max-width:760px){.buildtop{grid-template-columns:1fr}.buildtop p{text-align:left;justify-self:start}}
.rows{border-top:1px solid var(--line)}
/* cursor:default, not pointer: these rows open on HOVER on a hover-capable device
   (site.js, the mouseover handler), so by the time a mouse user clicks, the row is
   already open and the click appears to do nothing. The pointer was promising an
   interaction that had already happened. role=button and the click and keydown
   handlers stay, because they are the real interaction on touch and on a keyboard,
   where hover never fires. */
.row{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:0 28px;border-bottom:1px solid var(--line);padding:22px 0;cursor:default;transition:background .2s}
.row .name{text-align:right;font-size:clamp(22px,3.4vw,40px);font-weight:600;letter-spacing:-.02em;color:var(--ink-3);transition:color .25s}
.row .num{justify-self:center;width:38px;height:28px;border:1px solid var(--line-2);border-radius:4px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);transition:all .25s}
.row .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.row .desc{grid-column:3;display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--spring)}
.row .desc>div{overflow:hidden;color:var(--ink-3);font-size:15px;line-height:1.5;max-width:46ch}
.row .desc p{padding-top:6px}
.row.on{background:linear-gradient(90deg,transparent,var(--soft) 40%,transparent)}
.row.on .name{color:var(--ink)} .row.on .num{background:var(--ink);color:#fff;border-color:var(--ink)} .row.on .tag{color:var(--ink)} .row.on .desc{grid-template-rows:1fr}
.row .left{text-align:right}
.row .left .meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px;opacity:0;transition:opacity .3s}
.row.on .left .meta{opacity:1}
@media (max-width:760px){.row{grid-template-columns:44px 1fr;gap:6px 14px}.row .left{grid-column:2;text-align:left;order:2}.row .num{grid-column:1;grid-row:1 / span 2;align-self:start}.row .tag{grid-column:2;order:1}.row .desc{grid-column:2;order:3}}

/* industries, integrations, agents, steps, numbered, changes */
.inds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.inds{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.inds{grid-template-columns:1fr}}
.ind{padding:22px;display:grid;gap:10px;align-content:start}
.ind .n{font-family:var(--mono);font-size:11px;color:var(--muted)} .ind h3{font-size:19px} .ind p{font-size:14px;color:var(--muted-2)}
.integs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.integs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.integs{grid-template-columns:1fr}}
.integ{padding:22px;display:grid;gap:10px;align-content:start}
.integ h3{font-size:19px} .integ p{font-size:14px;color:var(--muted-2)}
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.agents{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.agents{grid-template-columns:1fr}}
.agent{padding:22px;display:grid;gap:8px;align-content:start}
.agent h3{font-size:18px} .agent p{font-size:14px;color:var(--muted-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;display:grid;place-items:center}
.step h3{font-size:19px} .step p{font-size:14px;color:var(--muted-2)}
.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.numgrid.c3{grid-template-columns:repeat(3,1fr)}
.numgrid.c2{grid-template-columns:repeat(2,1fr)}
/* The process timeline, ALTERNATING: a rail across the middle, odd steps above it and
   even steps below. Each step spans 2 columns of an (n+1) column grid and overlaps its
   horizontal neighbours on purpose, which is safe because those neighbours are on the
   other side of the rail. That is what buys each step real width. Below 1000px the
   whole thing becomes the ordinary vertical timeline. */
.flowline{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(var(--cols,8),1fr);grid-template-rows:auto 64px auto;position:relative}
/* z-index:1 on the step, 0 on the rail. The rail is a LATER sibling, so without this
   it paints over the nodes and their page-coloured rings, and the grey line runs
   straight across each green circle. Raising the step lifts its dot with it. */
.flowline li{position:relative;grid-column:var(--i) / span 2;padding-right:54px;z-index:1}
.flowline li.up{grid-row:1;align-self:end;padding-bottom:0}
.flowline li.down{grid-row:3;align-self:start;padding-top:0}
.flowline .rail{grid-row:2;grid-column:1 / -1;position:relative;z-index:0}
/* the rail runs the full width and fades out at both ends, so it reads as a line
   passing through rather than one that starts and stops at the first and last node */
.flowline .rail::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 0,var(--line-2) 9%,var(--line-2) 91%,transparent 100%)}
/* the node sits ON the rail and covers it: 20px of accent plus a 6px page-coloured
   ring, so the line is masked either side of the circle rather than running under it.
   The offsets are arithmetic off the 64px rail row: centre is 32px from the item edge,
   so a node of height h sits at 32 + h/2, and the stem runs the remaining 32 - h/2. */
.flowline .dot{position:absolute;left:0;width:20px;height:20px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 6px var(--bg)}
.flowline li.up .dot{bottom:-42px}
.flowline li.down .dot{top:-42px}
.flowline li.up::after,.flowline li.down::after{content:"";position:absolute;left:9.5px;width:1px;height:22px;background:var(--line-2)}
.flowline li.up::after{bottom:-22px} .flowline li.down::after{top:-22px}
.flowline .sn{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.flowline h3{font-size:25px;line-height:1.2;margin-bottom:11px;letter-spacing:-.015em}
.flowline p{font-size:17.5px;line-height:1.5;color:var(--muted-2)}
.flowline li.up{padding-bottom:14px} .flowline li.down{padding-top:14px}
@media (max-width:1000px){
  .flowline{grid-template-columns:1fr;grid-template-rows:none;gap:30px 0;padding-left:30px}
  .flowline li,.flowline li.up,.flowline li.down{grid-column:1;grid-row:auto;padding:0;align-self:auto}
  .flowline li.up::after,.flowline li.down::after{display:none}
  .flowline .rail{grid-row:auto;grid-column:1;position:absolute;inset:6px auto 6px 6px;width:1px}
  .flowline .rail::before{inset:0;left:0;right:auto;width:1px;height:100%}
  .flowline li.up .dot,.flowline li.down .dot{left:-30px;top:4px;bottom:auto}
}
@media (max-width:980px){.numgrid,.numgrid.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.numgrid,.numgrid.c3,.numgrid.c2{grid-template-columns:1fr}}
.ncard{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start}
.ncard .n{font-family:var(--mono);font-size:11px;color:var(--accent-ink)} .ncard h3{font-size:18px} .ncard p{font-size:14px;color:var(--muted-2)}
/* a sub-block inside one column of a two-col, so the short column fills the height of
   a tall neighbour like the contact form instead of leaving the space empty */
/* no border-top: the .kv above already draws a rule under its last row, and two
   hairlines 20px apart read as a mistake rather than a divider. The space does the
   separating instead. */
.colblock{margin-top:clamp(38px,4.6vw,58px);display:grid;gap:14px}
.colblock h3{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.02em}
.two-col .colblock .changes{grid-template-columns:1fr;gap:16px}
.changes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.changes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.changes{grid-template-columns:1fr}}
.chg{border-top:2px solid var(--ink);padding-top:14px;display:grid;gap:6px}
.chg b{font-size:17px;font-weight:600} .chg p{font-size:14px;color:var(--muted-2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.two-col h2{font-size:clamp(30px,4vw,44px);margin-bottom:16px}
.two-col .lead+.lead{margin-top:12px}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.playbook{padding:28px;display:grid;gap:10px;align-content:start;background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px}
.playbook h3{font-size:24px} .playbook p{color:var(--ink-3)}
.playbook .qual{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink-2)}
.playbook .qual b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px;font-weight:500}
.kv{display:grid;gap:10px;margin:22px 0}
.kv div{display:grid;grid-template-columns:130px 1fr;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;font-size:14px}
.kv b{font-weight:600} .kv span{color:var(--ink-3)}
/* Used on About Us only. STACKED, not a two column table: set 10.10.2026 when the
   labels were sized to match a section heading (.shead h2, 50px at desktop). A 50px
   label cannot sit in a side column, it needs the full measure, so each row became a
   green heading with its body underneath and a hairline between. Same accent-ink as
   before, 6.8:1 on white. */
.kv.wide{gap:clamp(26px,3.2vw,40px)}
.kv.wide div{grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4.5vw,56px);align-items:start;font-size:16px;padding-bottom:clamp(26px,3.2vw,40px);border-bottom-color:var(--accent)}
.kv.wide b{font-size:clamp(32px,4.4vw,50px);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.kv.wide span{max-width:62ch}
/* the heading needs the FULL wrap beside its text, not .wrap.narrow: at 50px it only
   fits in a side column once the row is about 1100px wide. Collapses below 900. */
@media (max-width:900px){.kv.wide div{grid-template-columns:1fr;gap:12px}}
/* the two-part block: stacked full width rows, deliberately NOT the card grid the
   section above it uses, so no two neighbouring sections share a silhouette */
.parts{display:grid;gap:clamp(26px,4vw,44px)}
.parts>div{border-top:2px solid var(--accent);padding-top:clamp(18px,2.5vw,26px)}
/* .two puts the parts SIDE BY SIDE, each in its own framed box carrying the whole
   part: heading, prose, a hairline, its four ticks, then its closing note. The frames
   replace the earlier top rules and the single divider between the columns, which
   would have been a third line competing with two borders. align-items:stretch keeps
   both boxes the same height whatever their content. */
.parts.two{grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);align-items:stretch}
.parts.two>div{border:1.5px solid var(--accent);border-radius:var(--r);
padding:clamp(24px,2.6vw,34px);display:grid;gap:16px;align-content:start}
/* a thin rule above the ticks, separating the argument from the list */
.parts.two .biglist{border-top:1px solid var(--accent);padding-top:18px;gap:12px}
.parts.two h2{font-size:clamp(25px,2.7vw,33px);line-height:1.15}
.parts.two .lead{font-size:16.5px;max-width:none}
.parts.two .biglist li{font-size:15px}
@media (max-width:860px){
  .parts.two{grid-template-columns:1fr;gap:clamp(18px,3vw,26px)}
}

/* flow (seven steps) */
.flowtabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:34px}
.flow{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:58px;height:1px;background:var(--line)}
.flow .fill{position:absolute;left:8%;top:58px;height:1px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-bright));transition:width 2.2s linear}
.flow.on .fill{width:84%}
.fstep{display:grid;justify-items:center;text-align:center;gap:14px;position:relative}
.fstep .box{width:116px;height:116px;border:1px solid var(--line);border-radius:22px;display:grid;place-items:center;background:var(--bg);position:relative;transition:border-color .4s,transform .4s var(--spring);color:var(--ink-3)}
.fstep .n{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;display:grid;place-items:center;transition:transform .35s var(--spring)}
.fstep.on .box{border-color:var(--ink);transform:translateY(-4px);color:var(--ink)} .fstep.on .n{transform:scale(1.15)}
.fstep h4{font-size:16px;font-weight:700} .fstep p{font-size:13px;color:var(--muted-2);max-width:18ch}
@media (max-width:1100px){.flow{grid-template-columns:repeat(4,1fr);gap:24px 12px}.flow::before,.flow .fill{display:none}}
@media (max-width:560px){.flow{grid-template-columns:repeat(2,1fr)}.fstep .box{width:96px;height:96px}}

/* calculator */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:0 auto}
@media (max-width:640px){.cgrid{grid-template-columns:1fr}}
.cbox{aspect-ratio:1.28;border:1px solid var(--line);border-radius:24px;padding:28px;display:grid;align-content:center;justify-items:center;gap:18px;text-align:center;position:relative;transition:border-color .3s}
.cbox:focus-within{border-color:var(--ink)}
.cbox .lbl{font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);max-width:22ch}
.cbox .val{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cbox .val small{font-size:14px;font-weight:500;color:var(--muted);margin-left:4px}
.cbox input[type=range]{width:100%;max-width:280px;appearance:none;-webkit-appearance:none;height:2px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--line) var(--p,0%));border-radius:2px;outline:none}
.cbox input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink);cursor:pointer}
.cbox input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink);cursor:pointer}
.cbox.result{border-color:var(--ink);border-width:1.5px}
.cbox.result::before{content:"";position:absolute;inset:-1px;border-radius:24px;border:1px solid var(--accent);opacity:0}
.cbox.result.ping::before{animation:pulse-ring .8s ease-out 1}
.cbox.result .lbl{color:var(--ink)}
.cbox.result .big{font-size:clamp(38px,5vw,56px);font-weight:800;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.cbox.result .per{font-size:14px;color:var(--muted-2)} .cbox.result .per b{color:var(--ink);font-weight:600}
.cmeth{max-width:820px;margin:18px auto 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.6}
.cmeth b{color:var(--ink-3);font-weight:600}
.calc .ctas{margin-top:26px}

/* demo */
.demo{padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
@media (max-width:820px){.demo{grid-template-columns:1fr}}
.demo .dl,.demo .dr{display:grid;gap:18px}
.demo h2{font-size:clamp(30px,4vw,44px)}
.demo .num{font-size:clamp(22px,7vw,40px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:center;gap:14px;min-width:0}
.demo .num .st{width:10px;height:10px;border-radius:50%;background:var(--green);position:relative}
.demo .num .st::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--green);animation:pulse-ring 2.2s ease-out infinite}
.scen{display:flex;flex-wrap:wrap;gap:8px}

/* service rows and console mocks */
.srows{display:grid;gap:22px}
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.5vw,44px)}
.srow:nth-child(even) .scopy{order:2}
@media (max-width:900px){.srow{grid-template-columns:1fr}.srow:nth-child(even) .scopy{order:0}}
.scopy{display:grid;gap:12px}
.scopy h2{font-size:clamp(28px,3.6vw,40px)} .scopy .tag{font-size:17px;color:var(--ink-2);font-weight:500}
.scopy p{color:var(--ink-3)} .scopy .pillrow{justify-content:flex-start;margin-top:4px}
.console{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;font-size:13px}
.console .ch{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.console .ch .dot{width:7px;height:7px;border-radius:50%;background:var(--green)} .console .ch b{color:var(--ink);font-weight:500} .console .ch .ct{margin-left:auto}
.console .cf{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.console .cf .on{color:var(--accent-ink)} .console .cf i{font-style:normal;color:var(--line-2)}
.console.small .mk-chat{padding:14px}
.mk-call,.mk-chat,.mk-cal,.mk-tl,.mk-list,.mk-review,.mk-site{padding:18px;display:grid;gap:12px}
.mk-row{display:flex;align-items:center;gap:12px} .mk-row div{display:grid} .mk-row span{font-size:12px;color:var(--muted-2)}
.mk-av{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:11px;flex:none}
.mk-tag{margin-left:auto;border:1px solid var(--line-2);border-radius:999px;padding:2px 10px;font-size:11px;color:var(--ink-3)} .mk-tag.g{border-color:var(--green);color:var(--green)}
.mk-bubble{border:1px solid var(--line);border-radius:14px;padding:10px 14px;max-width:88%;color:var(--ink-2)}
.mk-bubble.ai{border-color:var(--accent);margin-left:auto;background:var(--accent-wash)} .mk-bubble i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.mk-status{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mk-status span{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;font-weight:600;display:grid} .mk-status span i{font-style:normal;font-weight:400;color:var(--muted-2);font-size:11px} .mk-status span.on{border-color:var(--accent)}
.mk-msg{border:1px solid var(--line);border-radius:14px;padding:10px 14px;max-width:85%;color:var(--ink-2)}
.mk-msg.out{margin-left:auto;border-color:var(--accent);background:var(--accent-wash)} .mk-msg.sys{max-width:none;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:0;padding:0}
.mk-calh{display:flex;justify-content:space-between;font-size:13px} .mk-calh span{color:var(--muted-2)}
.mk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mk-days span{height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted-2)} .mk-days span.has{border-color:var(--accent-ink);color:var(--accent-ink)}
.mk-slots{display:flex;gap:8px} .mk-slots span{flex:1;border:1px solid var(--line);border-radius:8px;padding:6px;text-align:center;font-size:12px} .mk-slots span.on{border-color:var(--ink);background:var(--ink);color:#fff}
.mk-conf{font-size:12px;color:var(--green)}
.mk-tlh{display:flex;justify-content:space-between;font-size:14px} .mk-tlh span{font-weight:700}
.mk-tlr{display:grid;grid-template-columns:20px 1fr;gap:4px 10px;align-items:center;font-size:13px} .mk-tlr i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);grid-row:span 2} .mk-tlr.on i{border-color:var(--accent-ink);background:var(--accent)} .mk-tlr span{grid-column:2;font-size:12px;color:var(--muted-2)}
.mk-li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px} .mk-li div{display:grid} .mk-li span{font-size:12px;color:var(--muted-2)}
.mk-stars{color:var(--accent);font-size:22px;letter-spacing:2px} .mk-review p{font-size:15px;color:var(--ink-2)} .mk-review span{font-size:12px;color:var(--muted-2)}
.mk-bar{display:flex;gap:6px} .mk-bar i{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-2)}
.mk-hero{border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:10px;justify-items:start} .mk-hero b{font-size:16px}
.mk-chatbox{border:1px solid var(--accent);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--ink-2)} .mk-chatbox span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.statband{border-block:1px solid var(--line);padding-block:26px}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.statband b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em} .statband span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.statband .wrap{grid-template-columns:1fr 1fr}}
.conngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.conngrid{grid-template-columns:repeat(2,1fr)}}
.cg{padding:16px 18px;display:grid;gap:2px} .cg b{font-weight:600} .cg span{font-size:12px;color:var(--muted-2)}
.numlist{display:grid;border-top:1px solid var(--line)}
.nl{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.nl .n{font-family:var(--mono);font-size:12px;color:var(--accent-ink)} .nl b{font-size:20px;font-weight:600} .nl span:last-child{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nl:hover b{color:var(--accent-ink)}
@media (max-width:560px){.nl{grid-template-columns:40px 1fr}.nl span:last-child{grid-column:2}}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.post{padding:24px;display:grid;gap:12px;align-content:start}
.pm{display:flex;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pm .cat{color:var(--accent-ink)}
.post h3{font-size:20px} .post p{font-size:14px;color:var(--muted-2)} .post .date{font-size:12px;color:var(--muted)}
.featured{margin-top:12px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.featured h2{font-size:clamp(28px,3.8vw,42px);margin:10px 0 12px}
@media (max-width:900px){.featured{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.prose{display:grid;gap:18px;font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:clamp(24px,3vw,32px);margin-top:18px;color:var(--ink)}
.prose p{max-width:70ch}
.articlebody{padding-top:24px}
.authorbox{margin-top:34px;padding:24px;display:flex;gap:16px;align-items:flex-start}
.authorbox b{display:block;font-weight:600;margin-bottom:6px} .authorbox p{font-size:14px;color:var(--muted-2)} .authorbox a{display:inline-block;margin-top:8px;font-weight:600;color:var(--accent-ink);font-size:14px}
.empty{padding:clamp(24px,4vw,40px);display:grid;gap:14px} .empty h3{font-size:clamp(22px,3vw,30px)}

/* form */
.form{padding:28px;display:grid;gap:14px}
.form .fh{display:flex;justify-content:space-between;align-items:center} .form h3{font-size:24px}
.form p{font-size:14px;color:var(--muted-2)}
.form label{display:grid;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.form input,.form select,.form textarea{font-family:var(--font);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;background:var(--bg);color:var(--ink);font-size:15px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* faq, final, footer */
.faq{max-width:820px;margin:0 auto}
.q{border-bottom:1px solid var(--line)} .q:first-child{border-top:1px solid var(--line)}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-align:left;font-size:18px;font-weight:600;letter-spacing:-.01em}
.q button i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent-ink);margin-right:14px;font-weight:500}
.q button .i{width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .35s var(--spring),background .2s,color .2s}
.q button .i svg{width:14px;height:14px}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--spring)} .q .a>div{overflow:hidden}
.q .a p{padding:0 4px 22px 40px;color:var(--ink-3);max-width:66ch;line-height:1.6}
.q.open .a{grid-template-rows:1fr} .q.open button .i{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.final .card{padding:clamp(40px,6vw,72px);text-align:center;display:grid;gap:22px;justify-items:center}
.final h2{font-size:clamp(34px,5vw,58px);max-width:20ch} .final .lead{text-align:center}
footer{background:var(--panel);padding-block:52px 40px;font-size:14px;color:var(--panel-muted)}
footer .wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
@media (max-width:1000px){footer .wrap{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){footer .wrap{grid-template-columns:1fr 1fr}}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:12px;font-weight:500}
footer ul{display:grid;gap:8px} footer a:hover{color:#fff}
footer .brand{color:#fff} footer .brand .mark{color:#fff;--cube-l:#5F7324;--cube-r:#7E9A32;--cube-t:#A9BF5A}
footer .fb p{margin-top:14px;max-width:34ch}
footer .bottom{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--panel-2);padding-top:18px;font-size:13px;color:var(--panel-muted)}

/* =========================================================
   Colour system additions, 27.09.2026: paper bands, status badges, dark panels, background art
   ========================================================= */
/* the alternating band is WHITE with the house dot texture, not a paper tint. Set
   10.10.2026: the warm #f6f6f2 read yellowish. The dot grid is the same one .card.dots,
   .playbook and the final band already use, so the band still separates from the plain
   sections, by texture instead of by tone. */
section.alt{background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px;background-position:center}
.tickerwrap{background:var(--paper)}
.statband{background:var(--paper)}
.kbadge,.k.c0,.k.c1,.k.c2,.k.c3,.ind .n,.ncard .n,.nl .n,.pm .cat,.scopy .k{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;width:max-content}
.ind .n,.ncard .n,.nl .n,.scopy .k{background:var(--accent-pale);color:var(--accent-ink)}
.k.c0,.pm .cat.c0{background:var(--ok-bg);color:var(--ok)}
.k.c1,.pm .cat.c1{background:var(--info-bg);color:var(--info)}
.k.c2,.pm .cat.c2{background:var(--warn-bg);color:#b45309}
.k.c3,.pm .cat.c3{background:var(--special-bg);color:var(--special)}
.pm .cat.c4{background:var(--accent-pale);color:var(--accent-ink)}
.pm{align-items:center}
.ab{background:var(--accent-pale);border-color:transparent;color:var(--accent-ink)} .logo b{background:var(--paper)}
.chg{border-top-color:var(--accent)}
.step .n,.fstep .n{background:var(--accent);box-shadow:0 6px 14px -6px rgba(95,115,36,.6)}
.fstep.on .box{border-color:var(--accent);background:var(--accent-pale)}
.threestats b{color:var(--accent-ink)}
.sbox{background:var(--bg)}
.ms b{color:var(--accent-ink)}
.row.on .num{background:var(--accent);border-color:var(--accent)}
.row.on .tag{color:var(--accent-ink)}
.q button i{color:var(--accent)}
.mk-stars{color:var(--warn)}
.mk-tag.g{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.mk-status span.on{border-color:var(--info);background:var(--info-bg)}
.mk-conf{color:var(--ok)}
.mk-tlr.on i{background:var(--accent);border-color:var(--accent)}
.mk-days span.has{background:var(--accent-pale);border-color:transparent}
.mk-msg.out,.mk-bubble.ai{background:var(--accent-pale);border-color:transparent}
.mk-chatbox{background:var(--info-bg);border-color:transparent} .mk-chatbox span{color:var(--info)}
.console .ch{background:var(--panel);border-bottom:0;color:var(--panel-muted)} .console .ch b{color:var(--panel-ink)} .console .ch .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(15,157,88,.22)}
.console .cf .on{color:var(--accent-ink);background:var(--accent-pale);padding:2px 8px;border-radius:999px}
.cbox.result{background:linear-gradient(160deg,#fff,var(--accent-pale));border-color:var(--accent)}
.cbox.result::before{border-color:var(--accent)}
.live .av{background:var(--accent-pale);border-color:transparent}
.cflow .tile.av{background:var(--accent-pale)}
.route .timer{background:var(--accent-pale);border-color:transparent;color:var(--accent-ink)}
.demo .num .st{background:var(--ok)} .demo .num .st::after{border-color:var(--ok)}
.pill::before,.eyebrow .dot{background:var(--accent)}
.chip.hl{background:var(--accent-pale);border-color:transparent;color:var(--accent-ink)}
.form .chip{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.final .card{background:linear-gradient(180deg,#fff,var(--paper));background-image:radial-gradient(var(--dot) 1px,transparent 1.2px),linear-gradient(180deg,#fff,var(--paper));background-size:22px 22px,auto}
/* background illustrations */
.has-art>.wrap{position:relative}
.has-art>.wrap>*:not(.bgart){position:relative;z-index:1}
.bgart{position:absolute;right:clamp(0px,2vw,24px);top:-28px;width:min(560px,48%);z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 62% 34%,#000 38%,transparent 76%);mask-image:radial-gradient(ellipse at 62% 34%,#000 38%,transparent 76%)}
.bgart svg{width:100%;height:auto;display:block;opacity:.85}
@media (max-width:900px){.bgart{display:none}}
/* services index: every service side by side */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sgrid{grid-template-columns:1fr}}
.scard{padding:22px 16px 16px;display:grid;grid-template-rows:auto 1fr;gap:18px;min-width:0}
.scard .smock{align-self:end}
.scard .scopy{padding:0 6px;gap:10px}
.scard .scopy h2{font-size:22px} .scard .scopy .tag{font-size:15px} .scard .scopy p{font-size:14px}
.scard .scopy .pillrow{gap:6px} .scard .chip{height:26px;padding:0 10px;font-size:12px}
.scard .console{font-size:12px} .scard .mk-status{grid-template-columns:1fr 1fr}
.scard .console .ch .ct{display:none} .scard .console .cf{gap:6px;font-size:9px}
.scard.custom{background:var(--paper);border-style:dashed;align-content:center}
/* the automation layer diagram, home page */
.layer{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;margin-top:8px}
.lcard{border:1px solid var(--line);border-radius:18px;padding:22px 22px 8px;display:grid;gap:10px;background:transparent;align-content:start}
.lcard h3{font-size:22px;margin-bottom:6px}
.lrows div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;font-weight:500}
.lrows div b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.lrows div b.on{color:var(--accent-ink)}
.lmid{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-items:center}
.llink{display:flex;align-items:center;width:clamp(96px,11vw,170px)}
.llink i{flex:1;height:1px;background:var(--line-2);position:relative;overflow:visible}
.llink i:first-child::after,.llink i:last-child::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:travel 2.6s linear infinite}
.llink i:last-child::after{animation-delay:1.3s}
.llink span{border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--bg);white-space:nowrap}
.lcorewrap{display:grid;justify-items:center;gap:14px;padding:16px 10px}
.lcore{position:relative;width:200px;height:200px;display:grid;place-items:center}
.lcore .ring{position:absolute;inset:0;border-radius:34px;border:1px solid var(--accent-soft);box-shadow:0 0 0 16px var(--accent-wash)}
.lcore .ring::after{content:"";position:absolute;inset:-6px;border-radius:38px;border:1px solid var(--accent);opacity:0;animation:pulse-ring 3.2s ease-out infinite}
.lcore .disc{width:158px;height:158px;border-radius:26px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 24px 44px -26px rgba(17,17,17,.35);position:relative}
.lcore .ai{width:112px;height:112px;border-radius:28px;background:var(--bg);color:var(--ink);display:grid;place-items:center}
.lcore .ai .cube3d{--s:72px}
.lcap{text-align:center} .lcap b{display:block;font-size:15px;font-weight:700} .lcap span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.ltag{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:38px;font-size:16px;font-weight:600;text-align:center}
.ltag::before,.ltag::after{content:"";width:clamp(40px,8vw,90px);height:1px;background:var(--line-2)}
.ltag em{font-style:normal;color:var(--accent)}
.lstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-block:1px solid var(--line)}
.lstats div{padding:24px 16px;text-align:center;border-left:1px solid var(--line)} .lstats div:first-child{border-left:0}
.lstats b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--accent-ink)} .lstats span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.layer{grid-template-columns:1fr;gap:0}.lmid{grid-template-columns:1fr;padding:12px 0}.llink{width:1px;height:56px;flex-direction:column}.llink i{width:1px;flex:1;height:auto}.llink i::after{display:none}.ltag{flex-wrap:wrap}}
@media (max-width:640px){.lstats{grid-template-columns:1fr}.lstats div{border-left:0;border-top:1px solid var(--line)}.lstats div:first-child{border-top:0}}
/* workforce cards, home page agents grid */
.wcard{padding:10px;display:block}
.wpanel{height:100%;border:1px solid var(--line);border-radius:14px;padding:18px 18px 22px;display:grid;gap:9px;align-content:start;position:relative;overflow:hidden;background-color:#f3f3f0;/* the green corner wash is off, 10.10.2026: dot texture only */background-image:radial-gradient(#dcdcd8 1px,transparent 1.2px);background-size:22px 22px}
.wtop{display:flex;justify-content:space-between;align-items:center}
.wicon{width:36px;height:36px;border:1px solid var(--line-2);border-radius:9px;display:grid;place-items:center;background:var(--bg);color:var(--ink)}
.wno{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2)}
.wcard h3{font-size:22px;margin-top:8px}
.wtag{color:var(--accent-ink);font-weight:600;font-size:14.5px;line-height:1.4}
.wchips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.wchips span{border-radius:999px;background:var(--accent-pale);color:var(--accent-ink);font-size:12px;font-weight:600;padding:4px 10px;line-height:1.3}
.wdesc{font-size:14px;color:var(--ink-3)}
.agents.four{grid-template-columns:repeat(4,1fr);gap:16px;width:min(1400px,100vw - 72px);margin-inline:calc((100% - min(1400px,100vw - 72px)) / 2)}
.agents.four .wcard{padding:8px}
.agents.four .wcard h3{font-size:20px;margin-top:6px} .agents.four .wtag{font-size:14px} .agents.four .wdesc{font-size:14px}
.agents.four .wchips span{font-size:11px;padding:3px 9px} .agents.four .wicon{width:32px;height:32px}
@media (max-width:1100px){.agents.four{grid-template-columns:repeat(3,1fr);width:auto;margin-inline:0}}
@media (max-width:900px){.agents.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.agents.four{grid-template-columns:1fr}}
/* inbound and outbound voice agents, receptionist page */
.svc.v2{padding:30px 30px 28px;gap:22px;grid-template-rows:auto 1fr auto auto;align-content:stretch}
.svc.v2 .head{grid-template-columns:1fr 64px;gap:16px;align-items:start}
.svc.v2 .head h3{font-size:26px;margin-top:12px} .svc.v2 .head p{margin-top:6px;font-size:15px}
.svc.v2 .dotmat{width:64px;height:64px;justify-self:end}
.svc.v2 ul{gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.ck2{width:22px;height:22px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none;margin-top:1px}
.ck2 svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc.v2 .fine1{margin-top:-6px}
.svc.v2 .btn{width:100%}
/* services index: three per row, wider than the page column */
/* the service grid used to break OUT of .wrap to 1600px, which ran it nearly edge
   to edge. It now sits inside the page column like every other section. */
.sgrid{grid-template-columns:repeat(3,1fr);gap:14px}
.scard{padding:20px 14px 14px} .scard .scopy{padding:0 6px} .scard .scopy h2{font-size:24px} .scard .scopy .tag{font-size:15.5px} .scard .scopy p{font-size:14.5px}
.scard .console{font-size:12.5px} .scard .console .ch .ct{display:inline} .scard .console .cf{gap:8px;font-size:10px}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.sgrid{grid-template-columns:1fr}}

/* the logo mark: a real 3D cube, six faces, spinning slowly. --s is the edge length and is
   set per context. --cube-t/-r/-l are the brand greens and are lifted on dark grounds. */
.cube3d{--s:36px;--spin:16s;position:relative;width:var(--s);height:var(--s);
transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(0deg);
animation:cube-spin var(--spin) linear infinite;flex:none}
.cube3d .cf{position:absolute;inset:0;width:var(--s);height:var(--s)}
.cube3d .top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));background:var(--cube-t,#7E9A32)}
.cube3d .bot{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));background:var(--cube-b,#2E3A10)}
.cube3d .fro{transform:translateZ(calc(var(--s) / 2));background:var(--cube-r,#5F7324)}
.cube3d .bac{transform:rotateY(180deg) translateZ(calc(var(--s) / 2));background:var(--cube-r,#5F7324)}
.cube3d .lef{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2));background:var(--cube-l,#3F4F17)}
.cube3d .rig{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));background:var(--cube-l,#3F4F17)}
@keyframes cube-spin{
  from{transform:rotateX(-22deg) rotateY(0deg)}
  to{transform:rotateX(-22deg) rotateY(360deg)}
}
@media (prefers-reduced-motion:reduce){.cube3d{animation:none}}