/* Autonomous Intelligence, v6. Two views, one warm paper world around a plant in daylight. */
:root{
  color-scheme:light;
  --bg:#F6F2EA; --panel:#FFFFFF; --sand:#ECE5D7; --tint:#F5E7C6;
  --line:rgba(21,25,30,.18); --line-2:rgba(21,25,30,.1);
  --ink:#15191E; --ink-2:#464C53; --ink-3:#5B6167;
  --honey:#FEC106; --honey-2:#F4B800; --on-honey:#14110A; --amber:#8A5B00; --err:#A31D12;
  --focus:#15191E; --link-line:rgba(21,25,30,.38); --scrim:60,52,45;
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap:1680px; --gutter:clamp(24px, 5vw, 88px); --gap:clamp(16px, 2.2vw, 32px);
  --bleed:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  --hdr:80px; --sec:clamp(112px, 9.5vw, 152px);
  --body:clamp(17px, 1.2vw, 19px); --measure:45ch;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1023px){ :root{ --sec:112px; } }
@media (max-width:767px){ :root{ --sec:88px; --hdr:64px; --body:17px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:var(--hdr); }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 var(--body)/1.55 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body::after{ content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
img,svg,video{ max-width:100%; }
img{ display:block; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
p,h1,h2,h3,figure{ margin:0; }
h1,h2,h3{ font-weight:500; text-wrap:balance; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:rgba(254,193,6,.5); color:var(--ink); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
[tabindex="-1"]:focus{ outline:none; }
[hidden]{ display:none !important; }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

/* ------------------------------------------------------------ two views */
html[data-view="home"] .page[data-page="what"],
html[data-view="what"] .page[data-page="home"],
html[data-view="what"] #scene,
html[data-view="what"] .scene-cap,
html[data-view="what"] .era-ind,
html:not([data-view="projects"]) .page[data-page="projects"],
html[data-view="projects"] .page[data-page="home"],
html[data-view="projects"] .page[data-page="what"],
html[data-view="projects"] #scene,
html[data-view="projects"] .scene-cap,
html[data-view="projects"] .era-ind{ display:none; }
html.js:not(.i18n-ready) :is(main,.hdr,.foot){ visibility:hidden; }
html:not(.js) :is(.wf,.scene-cap){ display:none; }

/* ------------------------------------------------------------ type */
.d1,.d2,.ch-line,.results-lead{ font-weight:450; word-spacing:.04em; }
.d1{ font-size:clamp(36px, min(3.6vw, 5.9vh), 64px); line-height:1.04; letter-spacing:-.03em; }
.d2,.ch-line{ font-size:clamp(28px, 2.8vw, 44px); line-height:1.09; letter-spacing:-.026em; }
.lead{ max-width:var(--measure); color:var(--ink-2); text-wrap:balance; }

/* ------------------------------------------------------------ one button, one link */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 30px; border:0; border-radius:3px; background:var(--honey); color:var(--on-honey); font:600 1rem/1 var(--sans); letter-spacing:-.005em; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .2s var(--ease); }
.btn:hover{ background:var(--honey-2); }
.btn:active,.fl-run:active{ transform:translateY(1px); }
.btn--sm{ min-height:44px; padding:0 20px; font-size:.9375rem; }
.link{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0; border:0; background:none; color:var(--ink); font:500 1rem/1.3 var(--sans); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--link-line); text-underline-offset:6px; cursor:pointer; transition:text-decoration-color .2s var(--ease); }
.link:hover{ text-decoration-color:currentColor; }
.link[disabled]{ opacity:.35; cursor:default; }
.skip{ position:fixed; left:var(--gutter); top:10px; z-index:200; transform:translateY(-200%); padding:12px 18px; border-radius:3px; background:var(--honey); color:var(--on-honey); font-weight:600; text-decoration:none; }
.skip:focus{ transform:none; }

/* ------------------------------------------------------------ header: graphite on paper, always */
.hdr{ position:fixed; inset:0 0 auto; z-index:50; height:var(--hdr); border-bottom:1px solid transparent; transition:background-color .3s var(--ease), border-color .3s var(--ease); }
.hdr::before{ content:""; position:absolute; inset:0 0 -40px; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(246,242,234,.8), rgba(246,242,234,0)); transition:opacity .3s var(--ease); }
.hdr.is-solid,.hdr.is-open,html:not(.js) .hdr{ background:var(--bg); border-bottom-color:var(--line-2); }
.hdr.is-solid::before,.hdr.is-open::before{ opacity:0; }
html.menu-open{ overflow:hidden; }
.hdr-cta{ max-width:260px; overflow:hidden; white-space:nowrap; transition:opacity .25s var(--ease), visibility .25s, background-color .2s var(--ease), max-width .3s var(--ease), padding .3s var(--ease), margin .3s var(--ease); }
/* on the first screen the button folds away, so the menu still reaches the right margin */
html[data-view="home"] .hdr:not(.is-solid) .hdr-cta{ opacity:0; visibility:hidden; max-width:0; padding:0; margin-left:calc(-1 * clamp(20px, 2.4vw, 36px)); }
.hdr-in{ height:100%; display:flex; align-items:center; gap:clamp(20px, 2.4vw, 36px); }
.brand{ display:flex; align-items:center; min-height:44px; margin-right:auto; flex:none; }
.brand img{ height:32px; width:auto; }
.nav{ display:flex; gap:clamp(20px, 2.4vw, 36px); }
.nav a{ position:relative; display:flex; align-items:center; min-height:44px; color:var(--ink); font-size:.9375rem; font-weight:500; text-decoration:none; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:9px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.mlink[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; }
.lang{ display:flex; }
.lang button{ position:relative; min-width:40px; height:40px; padding:0; border:0; background:none; color:var(--ink-2); font-size:.8125rem; font-weight:500; letter-spacing:.02em; cursor:pointer; transition:color .2s; }
.lang button:hover,.lang button[aria-pressed="true"]{ color:var(--ink); }
.lang button[aria-pressed="true"]::after{ content:""; position:absolute; left:11px; right:11px; bottom:8px; height:1px; background:var(--ink); }
.menu-btn{ display:none; position:relative; width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:none; cursor:pointer; }
.menu-btn span{ position:absolute; left:10px; right:10px; height:1.5px; background:var(--ink); transition:transform .25s var(--ease), top .25s var(--ease); }
.menu-btn span:nth-child(1){ top:17px; } .menu-btn span:nth-child(2){ top:26px; }
.menu-btn[aria-expanded="true"] span{ top:21.5px; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform:rotate(-45deg); }
.menu{ position:fixed; inset:var(--hdr) 0 0; z-index:49; display:flex; flex-direction:column; padding:24px var(--gutter) 32px; background:var(--bg); overflow:auto; }
.mlink{ display:flex; align-items:center; min-height:72px; border-bottom:1px solid var(--line-2); color:var(--ink); font-size:1.5rem; font-weight:500; letter-spacing:-.02em; text-decoration:none; }
.menu .lang{ margin:20px 0 auto -11px; }
.menu .btn{ width:100%; margin-top:32px; }
@media (max-width:1023px){
  .nav,.hdr-in>.lang,.hdr-cta{ display:none; }
  .menu-btn{ display:block; }
}
@media (max-width:767px){ .brand img{ height:26px; } }

/* ------------------------------------------------------------ fixed scene */
#scene{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--bg); }
#scene.is-off{ visibility:hidden; }
#scene canvas.p3-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .6s var(--ease); }
#scene.is-ready canvas.p3-canvas{ opacity:1; }
#scene canvas.p3-canvas.is-dip{ opacity:0 !important; transition:opacity .1s linear; }
.scene-poster{ position:absolute; inset:0; background:linear-gradient(180deg, #CBD8DF 0%, #E6E1D6 46%, #C9BFA9 100%); transition:opacity .8s var(--ease); }
#scene.is-ready .scene-poster{ opacity:0; }
.scene-fallback{ display:none; position:absolute; inset:0; }
.scene-fallback img{ width:100%; height:100%; object-fit:cover; }
/* the no-WebGL pictures are dark photographs: a thin veil of paper keeps them in the same light world */
.scene-fallback::after,.ch-fig::after{ content:""; position:absolute; inset:0; background:rgba(246,242,234,.18); }
html.no-gl .scene-fallback{ display:block; }
.scene-cap,.ch-fig figcaption{ color:#fff; text-shadow:0 0 1px rgba(var(--scrim),.95), 0 0 4px rgba(var(--scrim),.9), 0 0 10px rgba(var(--scrim),.75), 0 0 20px rgba(var(--scrim),.5); }
.scene-cap{ position:fixed; right:var(--gutter); bottom:18px; z-index:0; margin:0; font-size:.8125rem; line-height:1.3; pointer-events:none; }
/* a small shade anchored to the corner of the frame, so it reads as falloff in the picture and not as a patch */
.scene-cap::before{
  content:""; position:absolute; z-index:-1; pointer-events:none; left:-150px; top:-72px; right:calc(-1 * var(--gutter)); bottom:-18px;
  background:linear-gradient(270deg, rgba(var(--scrim),.58) calc(100% - 150px), rgba(var(--scrim),.52) calc(100% - 120px), rgba(var(--scrim),.376) calc(100% - 90px), rgba(var(--scrim),.204) calc(100% - 60px), rgba(var(--scrim),.06) calc(100% - 30px), rgba(var(--scrim),0) 100%);
  --cap-mask:linear-gradient(0deg, #000 0, #000 34px, rgba(0,0,0,.896) 48px, rgba(0,0,0,.648) 62px, rgba(0,0,0,.352) 76px, rgba(0,0,0,.104) 90px, transparent 100%);
  -webkit-mask-image:var(--cap-mask); mask-image:var(--cap-mask);
}
.scene-cap span{ display:none; }
.scene-cap .c-load{ display:inline; }
#scene.is-ready ~ .scene-cap .c-load,html.no-gl .scene-cap .c-load{ display:none; }
#scene.is-ready ~ .scene-cap .c-sim,html.no-gl .scene-cap .c-ill{ display:inline; }

/* passive era indicator */
.era-ind{ position:fixed; right:var(--gutter); top:50%; z-index:0; display:grid; gap:14px; justify-items:end; transform:translateY(-50%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--ease), visibility 0s linear .35s; }
.era-ind.is-on{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.era-ind span{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.86); font:500 .8125rem/1 var(--mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; text-shadow:0 0 1px rgba(var(--scrim),.95), 0 0 4px rgba(var(--scrim),.9), 0 0 10px rgba(var(--scrim),.7); transition:color .3s var(--ease); }
.era-ind span::after{ content:""; width:14px; height:2px; background:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(var(--scrim),.42); transition:width .3s var(--ease), background-color .3s var(--ease); }
.era-ind::before{ content:""; position:absolute; z-index:-1; inset:-20px -16px; border-radius:24px; background:rgba(var(--scrim),.74); filter:blur(12px); pointer-events:none; }
.era-ind span.is-past::after{ background:#fff; }
.era-ind span.is-on{ color:#fff; font-weight:600; }
.era-ind span.is-on::after{ width:30px; background:var(--honey); }

/* ------------------------------------------------------------ text over the 3D: white, each block on its own small warm shade */
main{ position:relative; z-index:1; }
section{ scroll-margin-top:var(--hdr); }
.hero,.vision{ --ink:#fff; --ink-2:#fff; --focus:#fff; --link-line:rgba(255,255,255,.6); color:#fff; overflow-x:clip; }
.hero-in,.vision-open h2,.ch-in,.ch-facts{ position:relative; isolation:isolate; }
.hero-in::before,.vision-open h2::before,.ch-in::before,.ch-facts::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:calc(-1 * (var(--s-up) + var(--s-fy))); bottom:calc(-1 * var(--s-pb)); left:calc(-1 * var(--bleed)); right:calc(-1 * var(--s-fx));
  background:linear-gradient(90deg,
    rgba(var(--scrim),var(--s-a)) calc(100% - var(--s-fx)),
    rgba(var(--scrim),calc(var(--s-a) * .896)) calc(100% - var(--s-fx) * .8),
    rgba(var(--scrim),calc(var(--s-a) * .648)) calc(100% - var(--s-fx) * .6),
    rgba(var(--scrim),calc(var(--s-a) * .352)) calc(100% - var(--s-fx) * .4),
    rgba(var(--scrim),calc(var(--s-a) * .104)) calc(100% - var(--s-fx) * .2),
    rgba(var(--scrim),0) 100%);
  --s-mask:linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.104) calc(var(--s-fy) * .2), rgba(0,0,0,.352) calc(var(--s-fy) * .4), rgba(0,0,0,.648) calc(var(--s-fy) * .6), rgba(0,0,0,.896) calc(var(--s-fy) * .8), #000 var(--s-fy),
    #000 calc(100% - var(--s-pb)), rgba(0,0,0,.896) calc(100% - var(--s-pb) * .8), rgba(0,0,0,.648) calc(100% - var(--s-pb) * .6), rgba(0,0,0,.352) calc(100% - var(--s-pb) * .4), rgba(0,0,0,.104) calc(100% - var(--s-pb) * .2), transparent 100%);
  -webkit-mask-image:var(--s-mask); mask-image:var(--s-mask);
}
/* the shade ends exactly where the block's bottom padding ends, so it never reaches the paper sheet */
.hero-in{ width:fit-content; --s-up:0px; --s-fy:120px; --s-fx:320px; --s-a:.46; --s-pb:clamp(64px, 10vh, 112px); }
.vision-open h2,.ch-in{ --s-up:0px; --s-fy:120px; --s-fx:320px; --s-a:.46; --s-pb:clamp(64px, 10vh, 112px); }
/* the small fact labels sit on a little more of the same shade, so white keeps 4.5:1 over the brightest parts of the scene */
.ch-facts{ --s-up:0px; --s-fy:32px; --s-fx:240px; --s-a:.36; --s-pb:40px; }
/* each shade takes the colour of its own scene, so it reads as light falling off, not as a dark patch */
.hero,.vision-open{ --scrim:56,56,38; }
.chapter[data-era="0"]{ --scrim:66,54,42; }
.chapter[data-era="1"]{ --scrim:48,58,60; }
.chapter[data-era="2"]{ --scrim:34,50,74; }
.chapter[data-era="3"]{ --scrim:70,50,26; }
.chapter[data-era="1"] .ch-in{ --s-a:.56; }
.hero-sub{ font-weight:500; }
@media (max-width:767px){
  .hero-in{ --s-a:.4; }
  .vision-open h2,.ch-in{ --s-a:.42; }
  .chapter[data-era="1"] .ch-in{ --s-a:.56; }
}
.hero h1,.hero-sub,.hero-act .link,.vision-open h2,.ch-line{ text-shadow:0 1px 16px rgba(var(--scrim),.42); }
.hero-k,.ch-era,.ch-facts{ text-shadow:0 0 2px rgba(var(--scrim),.7), 0 0 7px rgba(var(--scrim),.72), 0 0 16px rgba(var(--scrim),.6); }

/* ------------------------------------------------------------ home: hero */
.sec{ position:relative; padding:var(--sec) 0 0; background:var(--bg); }
.company,.how,.talk{ padding-bottom:var(--sec); }
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--hdr) + 40px) 0 clamp(64px, 10vh, 112px); }
.hero .wrap{ width:100%; }
.hero-in{ max-width:min(1240px, 76%); }
.hero h1{ max-width:8em; }
html[lang="pt-BR"] .hero h1{ max-width:10em; }
.hero-k{ margin-bottom:clamp(14px, 1.4vw, 22px); font:500 .875rem/1.3 var(--mono); letter-spacing:.06em; }
.hero-sub{ max-width:var(--measure); margin-top:clamp(18px, 1.8vw, 28px); text-wrap:balance; }
.hero-act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; margin-top:clamp(28px, 2.8vw, 40px); }

/* ------------------------------------------------------------ home: vision */
.vision{ position:relative; }
.vision-open{ min-height:82vh; min-height:82svh; display:flex; align-items:flex-end; padding-bottom:clamp(64px, 10vh, 112px); }
.vision-open h2{ max-width:18em; }
.chapter{ position:relative; min-height:90vh; min-height:90svh; display:flex; align-items:flex-end; padding-bottom:clamp(64px, 10vh, 112px); }
.chapter--last{ min-height:100vh; min-height:100svh; }
.ch-cap{ position:relative; z-index:1; width:100%; }
.ch-in{ width:fit-content; max-width:100%; }
.ch-era{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; color:#fff; }
.ch-num{ font:400 clamp(64px, 7vw, 112px)/.9 var(--sans); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.ch-name{ font:500 clamp(18px, 1.5vw, 24px)/1.2 var(--sans); letter-spacing:-.01em; }
.ch-facts{ display:grid; grid-template-columns:repeat(4, minmax(0, 10.5em)); gap:12px clamp(20px, 2.2vw, 36px); margin:clamp(22px, 2.2vw, 32px) 0 0; padding-top:clamp(14px, 1.2vw, 18px); border-top:1px solid rgba(255,255,255,.5); color:#fff; font-size:.9375rem; }
.ch-facts dt{ display:flex; align-items:center; gap:7px; font:500 .6875rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ch-facts .is-new dt::after{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 1px rgba(21,25,30,.28); }
.ch-facts dd{ margin:5px 0 0; font-weight:500; line-height:1.35; text-wrap:balance; }
.ch-line{ width:fit-content; max-width:15em; margin-top:clamp(14px, 1.4vw, 22px); }
.ch-fig{ display:none; position:absolute; inset:0; }
html.no-gl .ch-fig{ display:block; }
.ch-fig img{ width:100%; height:100%; object-fit:cover; }
.ch-fig figcaption{ position:absolute; right:var(--gutter); bottom:18px; z-index:1; font-size:.8125rem; }

/* ------------------------------------------------------------ home: results, a sheet of paper over the fixed scene */
.results{ padding-bottom:var(--sec); box-shadow:0 -1px 0 var(--line-2), 0 -18px 40px -24px rgba(var(--scrim),.28); }
.results-lead{ font-size:clamp(24px, 2.2vw, 34px); line-height:1.14; letter-spacing:-.024em; }
@media (min-width:768px){ .ch-line,.results-lead{ white-space:pre-line; } }
.proofs{ container-type:inline-size; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(3, auto); margin-top:clamp(64px, 7vw, 112px); }
.proof{ display:grid; grid-row:span 3; grid-template-rows:subgrid; padding:0 36px; padding:0 3cqw; border-left:1px solid var(--line); }
.proof:first-child{ padding-left:0; border-left:0; }
.proof:last-child{ padding-right:0; }
.p-lead{ align-self:end; max-width:4.66em; font-size:clamp(40px, 4.2vw, 62px); font-size:clamp(40px, 4.6cqw, 68px); font-weight:300; line-height:1.03; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
html[lang="fr"] .p-lead,html[lang="pt-BR"] .p-lead{ max-width:5.1em; font-size:clamp(40px, 4.2cqw, 62px); }
.p-desc{ margin-top:clamp(20px, 2vw, 32px); max-width:30ch; text-wrap:pretty; }
.p-sec{ margin-top:clamp(20px, 2vw, 28px); color:var(--ink-3); font-size:.9375rem; }
.results-end{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 48px; margin-top:clamp(72px, 7vw, 112px); padding-top:28px; border-top:1px solid var(--line); }
.results-note{ max-width:var(--measure); color:var(--ink-2); text-wrap:pretty; }

/* ------------------------------------------------------------ home: company */
.company{ background:var(--panel); }
.company-in{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); align-items:center; }
.company-text{ grid-column:1 / 7; }
.company-text .lead{ margin-top:clamp(20px, 2.2vw, 32px); }
.company-where{ max-width:var(--measure); margin-top:20px; color:var(--ink-2); text-wrap:pretty; }
.leaders{ margin-top:clamp(40px, 4vw, 64px); }
.leaders li{ padding:20px 0; border-top:1px solid var(--line); }
.leaders li:last-child{ border-bottom:1px solid var(--line); }
.l-name{ font-weight:500; }
.l-role{ color:var(--ink-2); }
.l-name::after{ content:","; }
.l-bio{ display:block; margin-top:2px; color:var(--ink-3); font-size:.9375rem; }
.team-lead{ margin-top:clamp(28px, 3vw, 44px); font-weight:500; text-wrap:balance; }
.team{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); margin:18px 0 0; }
.team > div{ padding-top:14px; border-top:1px solid var(--line); }
.team dt{ font-weight:500; }
.team dd{ margin:6px 0 0; color:var(--ink-2); font-size:.9375rem; line-height:1.35; text-wrap:pretty; }
@media (max-width:767px){
  .team{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .team > div{ display:grid; grid-template-columns:6.2em minmax(0, 1fr); column-gap:16px; padding:14px 0; }
  .team > div:last-child{ border-bottom:1px solid var(--line); }
  .team dt{ grid-row:1 / span 3; }
  .team dd{ grid-column:2; margin:0; }
  .team dd + dd{ margin-top:5px; }
}
.hive-wrap{ grid-column:8 / 13; position:relative; aspect-ratio:2.5 / 2.598; }
.hive-art,.hive{ position:absolute; inset:0; width:100%; height:100%; }
.hive-art use{ fill:none; stroke:rgba(21,25,30,.26); stroke-width:1; }
.hive-art .hx-core{ fill:var(--honey); stroke:var(--honey); }
.hive li{ position:absolute; display:grid; place-items:center; width:40%; height:33.333%; padding:0 7.4%; color:var(--ink-2); font-size:clamp(12px, 1.02vw, 15px); font-weight:500; line-height:1.25; letter-spacing:-.005em; text-align:center; }
.hive .c-core{ left:30%; top:33.333%; color:var(--on-honey); font-weight:600; }
.c-n{ left:30%; top:0; } .c-s{ left:30%; top:66.667%; }
.c-ne{ left:60%; top:16.667%; } .c-se{ left:60%; top:50%; }
.c-nw{ left:0; top:16.667%; } .c-sw{ left:0; top:50%; }
.hive-bee{ position:absolute; right:3%; top:1%; width:15%; aspect-ratio:135 / 112; background:url(../img/bee.png) center / contain no-repeat; }

/* ------------------------------------------------------------ what we do: head and six starting points */
.what-head{ padding:calc(var(--hdr) + clamp(72px, 9vw, 152px)) 0 var(--sec); }
.what-head h1{ max-width:12em; }
.what-head .lead{ margin-top:clamp(20px, 2.2vw, 32px); }
.starts{ padding-top:0; padding-bottom:var(--sec); }
.lane{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); }
.lane + .lane{ margin-top:clamp(72px, 7vw, 112px); }
@media (min-width:1024px){ .lane{ border-top:1px solid var(--line); } .lane-l > .st:first-child{ border-top:0; } }
.lane-t{ grid-column:1 / 4; align-self:start; position:sticky; top:calc(var(--hdr) + 16px); max-width:6.5em; padding-top:calc(clamp(28px, 2.6vw, 40px) - .24em); font-size:clamp(22px, 2vw, 30px); font-weight:450; line-height:1.14; letter-spacing:-.024em; word-spacing:.04em; }
.lane-l{ grid-column:4 / 13; }
.st{ display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); column-gap:var(--gap); padding:clamp(28px, 2.6vw, 40px) 0; border-top:1px solid var(--line); }
.st h3{ grid-column:1 / 5; font-size:clamp(19px, 1.5vw, 22px); line-height:1.25; letter-spacing:-.014em; }
.st > div{ grid-column:5 / 10; }
@media (min-width:768px){ .st > div{ padding-top:clamp(4px, .64vw, 10px); } }
.st p{ max-width:var(--measure); color:var(--ink-2); text-wrap:pretty; }
.st .st-proof{ margin-top:12px; color:var(--ink-3); font-size:.9375rem; }

/* ------------------------------------------------------------ what we do: workflow player */
.workflow{ padding-bottom:var(--sec); background:var(--sand); }
.wf-head .lead{ margin-top:clamp(16px, 1.6vw, 24px); }
.wf{ position:relative; margin-top:clamp(40px, 4vw, 64px); background:var(--panel); border:1px solid var(--line-2); border-radius:4px; }
.wf.is-idle{ --ink:#444A51; --ink-2:#5B6167; }
.wf-chip,.wf-ph,.wf-rail button,.wf-attach,.wf-mail .from,.k,.gantt .lab,.gantt .weeks span,.wf-ag .n,.wf-ap-ok,.wf-state{ font-family:var(--mono); font-size:.6875rem; font-weight:500; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; }
.wf-chip{ padding:24px 26px; border-bottom:1px solid var(--line-2); color:var(--ink-2); }
.wf-rail{ display:none; }
.wf-rail button{ position:relative; display:flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:none; color:var(--ink-3); white-space:nowrap; cursor:pointer; transition:color .3s var(--ease); }
.wf-rail button[disabled]{ cursor:default; }
.wf-rail .num{ color:inherit; }
.wf-rail button.is-reached{ color:var(--ink-2); }
.wf-rail button[aria-current="step"]{ color:var(--ink); }
.wf-rail button[aria-current="step"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); }
.wf-rail button[data-i="3"][aria-current="step"]::after{ background:var(--honey); }
.wf-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); }
.wf-panel{ position:relative; display:grid; align-content:start; gap:14px; padding:22px 26px 26px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.p-inbox{ grid-column:span 3; } .p-read{ grid-column:span 5; } .p-agents{ grid-column:span 4; border-right:0; }
.p-approve{ grid-column:span 3; border-bottom:0; } .p-erp{ grid-column:span 5; border-bottom:0; } .p-line{ grid-column:span 4; border-right:0; border-bottom:0; }
.wf-panel.is-current::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:var(--ink); }
.p-approve.is-current::before{ background:var(--honey); }
.wf-ph{ color:var(--ink-3); }
.wf-panel > :not(.wf-ph){ transition:opacity .5s var(--ease); }
.wf-panel.is-skel > :not(.wf-ph){ opacity:.2; }
.wf.is-idle .wf-panel.is-skel > :not(.wf-ph){ opacity:1; }
.wf.is-idle .p-approve .btn{ background:none; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-3); }
.wf-go{ display:none; position:absolute; inset:0 26px auto auto; height:63px; align-items:center; justify-content:center; }
.wf.is-idle .wf-go{ display:flex; }
.wf-mail{ display:grid; gap:10px; }
.wf-mail .from{ color:var(--ink-3); letter-spacing:.04em; text-transform:none; }
.wf-mail .subj{ font-size:1.0625rem; font-weight:600; }
.wf-mail .body{ color:var(--ink-2); font-size:.9375rem; }
.wf-attach{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3); letter-spacing:.02em; text-transform:none; }
.wf-read{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; align-items:start; }
.wf-drawing{ width:100%; height:auto; color:var(--ink-3); }
.wf-drawing.is-read .hl-bore{ stroke:var(--ink); }
.wf-drawing.is-read .hl-bore-t{ fill:var(--ink); }
.wf-drawing.is-read .hl-ra{ stroke:var(--amber); }
.wf-drawing.is-read .hl-ra-t{ fill:var(--amber); }
.wf-field{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line-2); font-size:.875rem; }
.wf-field:last-child{ border-bottom:0; }
.wf-field .k{ color:var(--ink-3); letter-spacing:.08em; }
.wf-field .v{ font-weight:500; text-align:right; font-variant-numeric:tabular-nums; }
.wf-field.is-doubt .k,.wf-field.is-doubt .v{ color:var(--amber); }
.wf-field.is-hidden{ opacity:0; }
.wf.is-idle .wf-field.is-hidden{ opacity:1; }
.wf-read-text{ color:var(--ink-2); font-size:.875rem; }
.wf-ags{ display:grid; gap:14px; }
.wf-ag{ display:grid; grid-template-columns:10px minmax(0, 1fr); gap:12px; align-items:start; }
.wf-ag .dot{ width:8px; height:8px; margin-top:4px; border-radius:50%; border:1px solid var(--ink-3); }
.wf-ag .n{ color:var(--ink); }
.wf-ag .x{ margin-top:4px; color:var(--ink-2); font-size:.875rem; line-height:1.45; }
.wf-ag.is-working .dot{ border-color:var(--amber); animation:pulse 1.1s ease-in-out infinite; }
.wf-ag.is-ready .dot{ background:var(--ink); border-color:var(--ink); }
@keyframes pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.wf-ap-t,.wf-erp-t{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em; }
.wf-ap-x,.wf-ap-p{ color:var(--ink-2); font-size:.9375rem; }
.wf-ap-p{ color:var(--ink); }
.wf-ap-do{ margin-top:6px; }
.wf-ap-ok{ display:none; color:var(--ink-2); }
.wf-ap-ok::before{ content:"\2713\00a0\00a0"; }
.p-approve.is-done .btn{ display:none; }
.p-approve.is-done .wf-ap-ok{ display:block; }
.wf-erp{ display:grid; gap:8px; }
.wf-erp p{ color:var(--ink-2); font-size:.9375rem; }
.wf-erp .order{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:8px; border-bottom:1px solid var(--line-2); color:var(--ink); font-weight:500; }
.wf-state{ color:var(--ink-2); }
.gantt{ display:grid; gap:3px; font-variant-numeric:tabular-nums; }
.gantt .gh,.gantt .gr{ display:grid; grid-template-columns:62px minmax(0, 1fr); align-items:center; gap:10px; }
.gantt .weeks{ display:grid; grid-template-columns:repeat(4, 1fr); }
.gantt .weeks span{ padding-left:5px; border-left:1px solid var(--line-2); color:var(--ink-3); letter-spacing:.04em; }
.gantt .lab{ color:var(--ink-3); letter-spacing:.04em; white-space:nowrap; }
.gantt .is-l4 .lab{ color:var(--ink); }
.gantt .trk{ position:relative; height:17px; background:rgba(21,25,30,.04); }
.gantt .blk{ position:absolute; top:2px; bottom:2px; background:#BDB6A7; }
.gantt .job{ display:flex; align-items:center; padding-left:6px; overflow:hidden; background:var(--honey); color:var(--on-honey); font:600 .625rem/1 var(--mono); white-space:nowrap; transform-origin:left; animation:grow .5s var(--ease) both; }
@keyframes grow{ from{ transform:scaleX(0); } }
.wf-end{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; padding:30px 26px; border-top:1px solid var(--line-2); border-right:0; border-bottom:0; }
.wf-end.is-skel{ display:none; }
.wf-end h3{ font-size:clamp(19px, 1.5vw, 22px); line-height:1.25; letter-spacing:-.014em; }
.nb{ white-space:nowrap; }
.wf-end .t p{ margin-top:6px; color:var(--ink-2); }
.wf-end .acts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; }
.wf-nav{ display:none; justify-content:space-between; gap:12px; padding:6px 26px 10px; }
@media (prefers-reduced-motion:reduce){ .wf-nav{ display:flex; justify-content:flex-start; } }
@media (max-width:1180px) and (min-width:900px){
  .wf-grid .wf-panel{ grid-column:span 6; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
  .wf-grid .p-read,.wf-grid .p-approve,.wf-grid .p-line{ border-right:0; }
  .wf-grid .p-erp,.wf-grid .p-line{ border-bottom:0; }
  .wf-grid .wf-end{ grid-column:1 / -1; border-right:0; border-bottom:0; }
}
@media (max-width:899px){
  .wf-chip{ position:sticky; top:var(--hdr); z-index:1; padding:12px 20px; background:var(--panel); border-radius:4px 4px 0 0; }
  .wf-go{ position:static; height:auto; padding:0 20px 24px; }
  .wf-go .btn{ width:100%; min-height:54px; }
  .wf-rail{ display:flex; overflow-x:auto; min-height:52px; padding:0 8px; border-bottom:1px solid var(--line-2); scrollbar-width:none; }
  .wf-rail button{ flex:none; justify-content:center; min-width:44px; }
  .wf-rail .lbl{ display:none; }
  .wf-rail button[aria-current="step"]{ padding:0 12px; }
  .wf-rail button[aria-current="step"] .lbl{ display:inline; }
  .wf-rail::-webkit-scrollbar{ display:none; }
  .wf-grid{ display:block; }
  .wf-grid .wf-panel{ display:none; padding:22px 20px 26px; border:0; }
  .wf-grid .wf-panel.is-view{ display:grid; }
  .wf-grid .wf-panel.wf-end.is-view{ display:flex; }
  .wf-read{ grid-template-columns:1fr; }
  .wf-nav{ display:flex; padding:0 20px 8px; }
  .wf-end .acts .btn{ width:100%; }
}

/* ------------------------------------------------------------ what we do: your data */
.data{ padding-bottom:var(--sec); background:var(--panel); }
.data-in{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); align-items:start; }
.data-head{ grid-column:1 / 6; }
.data-head .lead{ margin-top:clamp(16px, 1.6vw, 24px); }
.data-rows{ grid-column:7 / 13; }
.dr{ padding:clamp(24px, 2.2vw, 32px) 0; border-top:1px solid var(--line); }
.dr:last-child{ border-bottom:1px solid var(--line); }
.dr h3{ margin-bottom:12px; font-size:var(--body); line-height:1.3; }
.dr p,.dr li{ max-width:var(--measure); color:var(--ink-2); text-wrap:pretty; }
.dr li + li{ margin-top:4px; }

/* ------------------------------------------------------------ what we do: how we start */
.how-head .lead{ margin-top:clamp(16px, 1.6vw, 24px); }
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:var(--gap); margin-top:clamp(48px, 5vw, 80px); border-top:1px solid var(--line); }
.step{ position:relative; padding:24px clamp(8px, 1.4vw, 24px) 0 0; }
.step::before{ content:""; position:absolute; left:0; top:-5px; width:1px; height:9px; background:var(--ink-2); }
.step-dur{ display:block; color:var(--ink-2); font-size:.9375rem; }
.step h3{ margin-top:clamp(28px, 2.8vw, 44px); font-size:clamp(19px, 1.5vw, 22px); line-height:1.25; letter-spacing:-.014em; }
.step p{ margin-top:12px; color:var(--ink-2); text-wrap:pretty; }
@media (min-width:1024px){ .steps{ grid-template-rows:repeat(3, auto); } .step{ display:grid; grid-row:span 3; grid-template-rows:subgrid; } }

/* ------------------------------------------------------------ talk: the warm close of both pages */
.talk{ background:var(--tint); }
.talk .wrap{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-template-rows:auto auto 1fr; column-gap:var(--gap); align-items:start; }
.talk h2{ grid-column:1 / 7; grid-row:1; max-width:11em; }
.talk .lead{ grid-column:1 / 7; grid-row:2; margin-top:clamp(20px, 2.2vw, 32px); }
.clines{ grid-column:1 / 7; grid-row:3; margin-top:clamp(40px, 4vw, 64px); }
.clines li{ padding-top:14px; border-top:1px solid var(--line); }
.clines li + li{ margin-top:clamp(24px, 2.4vw, 36px); }
.lb{ display:block; color:var(--ink-2); font-size:.9375rem; }
.val{ display:inline-flex; align-items:center; min-height:44px; margin-top:2px; color:var(--ink); font-size:clamp(16px, 1.3vw, 20px); letter-spacing:-.02em; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--link-line); text-underline-offset:.22em; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; transition:text-decoration-color .2s var(--ease); }
.val:hover{ text-decoration-color:currentColor; }

/* The form shows only once its script is attached, so it can never submit natively. */
html:not(.js) .cform,html:not(.form-on) .cform{ display:none; }
.cform{ grid-column:7 / 13; grid-row:1 / 4; padding:clamp(24px, 3vw, 44px); background:var(--panel); border:1px solid var(--line); border-radius:3px; }
.cf-body{ display:grid; grid-template-columns:minmax(0, 1fr); gap:22px var(--gap); }
.cf-in{ display:block; width:100%; min-height:50px; margin-top:8px; padding:12px 14px; background:var(--panel); border:1px solid rgba(21,25,30,.48); border-radius:3px; color:var(--ink); font:400 max(1rem, 16px)/1.45 var(--sans); -webkit-appearance:none; appearance:none; scroll-margin-top:48px; }
textarea.cf-in{ resize:vertical; }
.cf-in[aria-invalid="true"]{ border-color:var(--err); }
.cf-err{ margin-top:6px; color:var(--err); font-size:.875rem; line-height:1.4; }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-foot{ display:flex; flex-direction:column; gap:12px; }
.cf-foot .btn{ width:100%; }
.cf-foot .btn[disabled]{ cursor:progress; }
.cf-note{ color:var(--ink-2); font-size:.875rem; line-height:1.45; }
.cf-note .link,.cf-status .link{ font-size:inherit; font-weight:400; }
.cf-status{ color:var(--err); font-size:.9375rem; line-height:1.45; }
.cf-status span:not(:empty){ display:block; padding-top:18px; }
.cf-sent .lead{ margin-top:14px; }
.cf-sent .link{ margin-top:10px; }
@media (min-width:900px){
  .cf-body{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cf-wide,.cf-foot{ grid-column:1 / -1; }
  .cf-foot{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--gap); }
  .cf-foot .btn{ flex:none; width:auto; }
}

/* ------------------------------------------------------------ footer */
.foot{ position:relative; z-index:1; background:var(--bg); padding:24px 0; }
.foot-in{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 32px; color:var(--ink-3); font-size:.875rem; }
.foot-in a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.foot-in a:hover{ color:var(--ink); }
.foot-langs{ display:flex; margin-left:auto; }
.foot-langs a{ min-width:40px; text-decoration:none; }
.foot-langs a[aria-current="true"]{ color:var(--ink); }


/* ------------------------------------------------------------ the one reveal */
html.reveal .rv{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.reveal .rv.is-in{ opacity:1; transform:none; }

/* ------------------------------------------------------------ tablet and phone */
@media (max-width:1023px){
  .hero-in{ max-width:none; }
  .proofs{ grid-template-columns:1fr; grid-template-rows:none; }
  .proof,.proof:first-child{ display:grid; grid-row:auto; grid-template-rows:none; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); padding:clamp(28px, 4vw, 40px) 0; border-left:0; border-top:1px solid var(--line); }
  .proof:last-child{ padding-bottom:0; }
  .p-lead,html[lang] .p-lead{ grid-column:1 / 7; grid-row:span 2; align-self:start; max-width:none; font-size:clamp(40px, 5.8vw, 56px); }
  .p-desc,.p-sec{ grid-column:7 / 13; }
  .p-desc{ margin-top:6px; max-width:var(--measure); }
  .p-sec{ margin-top:12px; }
  .company-text,.hive-wrap,.data-head,.data-rows{ grid-column:1 / -1; }
  .hive-wrap{ width:min(100%, 560px); margin:clamp(56px, 8vw, 72px) auto 0; }
  .hive li{ font-size:clamp(12px, 2.5vw, 15px); }
  .data-rows{ margin-top:48px; }
  .lane-t{ grid-column:1 / -1; position:static; max-width:none; padding:0 0 20px; }
  .lane-l{ grid-column:1 / -1; }
  .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:48px; border-top:0; }
  .step{ border-top:1px solid var(--line); }
  .talk .wrap{ display:block; }
  .cform{ margin-top:clamp(32px, 5vw, 48px); }
  .clines{ margin-top:clamp(40px, 6vw, 56px); }
}
@media (max-width:767px){
  .hero-in::before,.vision-open h2::before,.ch-in::before,.ch-facts::before{ right:calc(-1 * var(--gutter)); background:rgba(var(--scrim),var(--s-a)); }
  .hero-in{ width:auto; --s-pb:52px; }
  .vision-open h2,.ch-in{ --s-pb:64px; }
  .hero{ padding-bottom:52px; }
  .hero-act .btn{ flex:1 1 auto; }
  .chapter,.vision-open{ padding-bottom:64px; }
  .ch-line,.ch-in{ width:auto; }
  .ch-num{ font-size:56px; }
  .ch-facts{ --s-a:.4; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 20px; margin-top:18px; padding-top:12px; font-size:.875rem; }
  .ch-facts dd{ margin-top:3px; }
  /* on a phone the rail runs along the top, clear of the captions at the bottom */
  .era-ind{ top:calc(var(--hdr) + 14px); right:var(--gutter); grid-auto-flow:column; gap:16px; transform:none; }
  .era-ind span{ flex-direction:column; align-items:stretch; gap:6px; }
  .era-ind span::after,.era-ind span.is-on::after{ width:auto; }
  .proof,.proof:first-child{ display:block; padding:32px 0; }
  .p-lead,html[lang] .p-lead{ font-size:clamp(40px, 11.5vw, 50px); }
  .p-desc{ margin-top:16px; }
  .st{ display:block; padding:24px 0 26px; }
  .st h3{ margin-bottom:10px; }
  .steps{ grid-template-columns:1fr; row-gap:0; }
  .step{ padding:22px 0 30px; }
  .step::before{ display:none; }
  .step h3{ margin-top:10px; }
  .foot-in{ flex-direction:column; align-items:flex-start; }
  .foot-langs{ margin-left:-11px; }
}

/* ------------------------------------------------------------ WhatsApp, Brazilian page only.
   From 1200 px up it sits in the page's right margin, where no content ever runs. */
.wa-float{ position:fixed; right:calc((var(--gutter) - 52px) / 2); bottom:clamp(16px, 2.6vh, 24px); z-index:30; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 6px 18px rgba(var(--scrim),.3); transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease), visibility .2s; }
.wa-float[hidden]{ display:none; }
html.talk-in .wa-float,html.flow-open .wa-float{ opacity:0; visibility:hidden; pointer-events:none; }
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--scrim),.36); }
html.menu-open .wa-float{ display:none; }
@media (max-width:1199px){
  .wa-float{ right:6px; width:48px; height:48px; }
  html.br .scene-cap,html.br .ch-fig figcaption{ right:calc(var(--gutter) + 48px); }
  html.br .foot-in{ padding-right:calc(var(--gutter) + 56px); }
}
@media (max-width:767px){
  html.br .foot-in{ padding-right:var(--gutter); }
  html.br .scene-cap,html.br .ch-fig figcaption{ right:auto; left:var(--gutter); }
  html.br .scene-cap::before{ left:calc(-1 * var(--gutter)); right:-150px; background:linear-gradient(90deg, rgba(var(--scrim),.58) calc(100% - 150px), rgba(var(--scrim),.52) calc(100% - 120px), rgba(var(--scrim),.376) calc(100% - 90px), rgba(var(--scrim),.204) calc(100% - 60px), rgba(var(--scrim),.06) calc(100% - 30px), rgba(var(--scrim),0) 100%); }
  html.br .hero{ padding-bottom:84px; }
  html.br .hero-in{ --s-pb:84px; }
  html.br .chapter--last{ padding-bottom:84px; }
  html.br .chapter--last .ch-in{ --s-pb:84px; }
  html.br .st .st-proof{ padding-right:64px; }
  .wa-float{ width:52px; height:52px; right:16px; bottom:12px; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================ PROJECT ATLAS: the third view, behind one link.
   The page, its cards and the flow a card opens below its row, then the .sch grammar that every drawing in js/schemas/ uses. */

/* example cards on What we do: the same cards as the atlas, six of them with the worked example first, three on a phone.
   The section takes the sand band of the player it replaces; the always-on band sits above the cards. */
.examples{ padding-bottom:var(--sec); background:var(--sand); }
.examples .lead{ margin-top:clamp(16px, 1.6vw, 24px); }
.examples .atlas-ops{ margin-top:clamp(28px, 3vw, 44px); }
.examples .atlas-grid{ margin-top:clamp(36px, 3.6vw, 56px); }
.examples-more{ margin-top:clamp(36px, 3.6vw, 56px); }
@media (max-width:767px){
  #atlasStrip li.is-extra{ display:none; }
  .examples-more .btn{ width:100%; }
}
.atlas{ padding:calc(var(--hdr) + clamp(16px, 2.4vw, 40px)) 0 var(--sec); background:var(--bg); }
.atlas h1{ max-width:14em; margin-top:clamp(20px, 2.6vw, 40px); }
.atlas .lead{ margin-top:clamp(20px, 2.2vw, 32px); }

.atlas-tabs{ display:flex; flex-wrap:wrap; gap:0 clamp(20px, 2.2vw, 32px); margin-top:clamp(40px, 4.4vw, 68px); box-shadow:inset 0 -1px 0 var(--line); }
.atlas-tab{ position:relative; flex:none; display:inline-flex; align-items:baseline; gap:7px; min-height:48px; padding:13px 0; border:0; background:none; color:var(--ink-2); font-size:.9375rem; font-weight:500; line-height:1.3; white-space:nowrap; cursor:pointer; transition:color .2s var(--ease); }
.atlas-tab:hover,.atlas-tab[aria-pressed="true"]{ color:var(--ink); }
.atlas-tab[aria-pressed="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink); }
.atlas-n{ color:var(--ink-3); font:500 .75rem/1 var(--mono); font-variant-numeric:tabular-nums; }
.atlas-pause{ margin-top:6px; color:var(--ink-2); font-size:.875rem; font-weight:400; }
@media (prefers-reduced-motion:reduce){ .atlas-pause{ display:none; } }

.atlas-grid{ --row-gap:clamp(44px, 4.4vw, 72px); display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--row-gap) var(--gap); margin-top:clamp(32px, 3.2vw, 48px); }
.atlas-grid:empty{ min-height:100vh; }
.atlas-grid > li{ display:flex; }

/* one card is one button */
.ac{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; padding:0; border:0; border-radius:4px; background:none; color:var(--ink); text-align:left; cursor:pointer; }
.ac span{ display:block; }
.ac-fig{ aspect-ratio:16 / 10; background:var(--panel); border:1px solid var(--line-2); border-radius:4px; overflow:hidden; transition:border-color .2s var(--ease); }
.ac:hover .ac-fig{ border-color:var(--line); }
.ac-sec{ margin-top:16px; color:var(--ink-3); font-size:.9375rem; line-height:1.4; }
.ac-t{ font-size:clamp(19px, 1.5vw, 22px); font-weight:500; line-height:1.25; letter-spacing:-.014em; text-wrap:balance; }
.ac-t{ margin-top:4px; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color .2s var(--ease); }
.ac:hover .ac-t{ text-decoration-color:var(--link-line); }
.ac-line{ margin:8px 0 14px; color:var(--ink-2); font-size:.9375rem; line-height:1.5; text-wrap:pretty; }
.ac .ac-st,.ac-st{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px; margin-top:auto; padding:4px 8px; border:1px solid var(--line); border-radius:3px; color:var(--ink-2); font:500 .6875rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ac-st[data-status="production"]::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 1px rgba(21,25,30,.28); }
.ac-st[data-status="confirm"]{ border-style:dashed; border-color:rgba(21,25,30,.42); }

/* an open card: its flow spans the grid under the card's row, a notch pointing at the card */
.ac[aria-expanded="true"] .ac-fig{ border-color:var(--ink); }
.ac[aria-expanded="true"] .ac-t{ text-decoration-color:var(--ink); }
.atlas-grid > li.ac-x{ display:block; grid-column:1 / -1; min-width:0; margin-top:calc(26px - var(--row-gap)); }
.ac-x-in{ position:relative; }
/* the flow arrives: a short wipe down from the notch with a fade; none under reduced motion */
.ac-x.is-arriving .ac-x-in{ animation:acx-in .26s var(--ease) both; }
@keyframes acx-in{ from{ opacity:0; clip-path:inset(-8px 0 calc(100% - 48px) 0); } to{ opacity:1; clip-path:inset(-8px 0 0 0); } }
.ac-x-notch{ position:absolute; z-index:1; top:-7px; left:calc(var(--notch, 50%) - 7px); width:14px; height:14px; border:1px solid var(--line-2); border-right:0; border-bottom:0; background:var(--panel); transform:rotate(45deg); pointer-events:none; }
.ac-x-flow:empty{ min-height:min(560px, 70vh); background:var(--panel); border:1px solid var(--line-2); border-radius:4px; }

@media (max-width:1023px){
  .atlas-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .atlas-tabs{ flex-wrap:nowrap; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); padding-inline-end:64px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); overflow-x:auto; scrollbar-width:none; scroll-padding-inline:var(--gutter); }
  .atlas-tabs::-webkit-scrollbar{ display:none; }
}
@media (max-width:767px){
  .atlas-grid{ --row-gap:40px; grid-template-columns:minmax(0, 1fr); }
  .ac-x-flow:empty{ margin-inline:calc(-1 * var(--gutter)); border-inline:0; border-radius:0; }
}

/* ============================================================ CASE FLOW: js/flow.js draws a case, version 2: a header, a rail of numbered steps,
   a grid of step panels in the visual language of the What we do player, then the always-on band.
   The player's own rules (.wf-mail, .wf-fields, .wf-ags, .wf-ap-*, .wf-erp, .gantt) dress the inside of the panels; only what
   the player does not have is here. The always-on band, .fl-ops, also stands alone at the top of the atlas and above the
   example cards. A mark is never told by colour alone. */
.fl{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; }

/* header: the flow's title and line, its two chips, Run and Close */
.fl-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px 32px; padding:22px 26px 20px; border-bottom:1px solid var(--line-2); }
.fl-hd{ flex:1 1 480px; display:grid; gap:6px; min-width:0; }
.fl-t{ font-size:clamp(21px, 1.7vw, 26px); font-weight:450; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
.fl-sub{ max-width:64ch; color:var(--ink-2); font-size:.9375rem; line-height:1.45; text-wrap:pretty; }
.fl-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:8px; }
.fl-chips .k{ color:var(--ink-2); }
.fl-chips .ac-st{ margin:0; }
.fl-acts{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; }
.fl-run{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; border:0; border-radius:3px; background:none; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font:600 .9375rem/1 var(--sans); white-space:nowrap; cursor:pointer; transition:box-shadow .2s var(--ease); }
.fl-run:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.fl-close{ font-size:.9375rem; min-width:44px; }

/* rail: the numbered steps, each reachable once the run has reached it; the decision's step is honey */
.fl-rail{ display:flex; gap:0 clamp(16px, 1.8vw, 28px); min-height:52px; padding:0 26px; border-bottom:1px solid var(--line-2); overflow-x:auto; scrollbar-width:none; }
.fl-rail::-webkit-scrollbar{ display:none; }
.fl-rail button{ position:relative; flex:none; display:flex; align-items:center; gap:8px; min-height:52px; padding:0; border:0; background:none; color:var(--ink-3); font:500 .6875rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:color .3s var(--ease); }
.fl-rail button[disabled]{ cursor:default; }
.fl-rail .num{ display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid var(--line); border-radius:50%; letter-spacing:0; transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.fl-rail button.is-reached{ color:var(--ink-2); }
.fl-rail button.is-reached .num{ border-color:var(--ink-2); }
.fl-rail button[aria-current="step"]{ color:var(--ink); }
.fl-rail button[aria-current="step"] .num{ border-color:var(--ink); background:var(--ink); color:var(--panel); }
.fl-rail button.is-decide[aria-current="step"] .num{ background:var(--honey); color:var(--on-honey); }
.fl-rail button[aria-current="step"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink); }
.fl-rail button.is-decide[aria-current="step"]::after{ background:var(--honey); }

/* panels: three or four to a row on a wide screen, two on a tablet, one at a time on a phone. The lines are the gaps. */
.fl-grid{ display:grid; gap:1px; background:var(--line-2); }
.fl-row{ display:grid; gap:1px; }
.fl-p{ position:relative; display:grid; align-content:start; gap:14px; min-width:0; padding:20px 24px 24px; background:var(--panel); container-type:inline-size; }
.fl-p > :not(.wf-ph){ transition:opacity .5s var(--ease); }
.fl-p.is-skel > :not(.wf-ph){ opacity:.2; }
.fl-p.is-current::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--ink); }
.fl-p[data-kind="decide"].is-current::before{ background:var(--honey); }
.fl-p .wf-ph{ color:var(--ink-3); }
.fl-p.is-current .wf-ph{ color:var(--ink); }

/* fields: the card's drawing beside what was read from it, once the panel is wide enough */
.fl-read{ display:grid; gap:16px; align-items:start; }
@container (min-width:360px){ .fl-read{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.fl-sch{ aspect-ratio:16 / 10; overflow:hidden; }
.fl-read .fl-sch{ border:1px solid var(--line-2); border-radius:3px; }

/* list: each row a button; the chosen one is marked by a bar and weight as well as its tint, its detail under the list */
.fl-list{ display:grid; border-top:1px solid var(--line-2); }
.fl-item{ position:relative; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; width:100%; min-height:44px; padding:9px 10px 9px 14px; border:0; border-bottom:1px solid var(--line-2); background:none; color:var(--ink); text-align:left; cursor:pointer; transition:background-color .2s var(--ease); }
.fl-item:hover{ background:rgba(21,25,30,.035); }
.fl-item .n{ font-size:.9375rem; font-weight:500; line-height:1.3; }
.fl-item .m{ color:var(--ink-3); font:500 .6875rem/1.3 var(--mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.fl-item[aria-pressed="true"]{ background:var(--tint); }
.fl-item[aria-pressed="true"]::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink); }
.fl-item[aria-pressed="true"] .n{ font-weight:600; }
.fl-item[aria-pressed="true"] .m{ color:var(--ink-2); }
.fl-detail{ padding:10px 12px; border-radius:3px; background:rgba(21,25,30,.04); color:var(--ink-2); font-size:.875rem; line-height:1.45; }
.fl-detail:empty{ display:none; }

/* measure: value and limit, and a state told by a word and a mark: a ring for ok, a half disc to watch, a honey diamond to alert */
.fl-meas{ display:grid; border-top:1px solid var(--line-2); }
.fl-meas li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:2px 12px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.fl-meas .n{ font-size:.875rem; line-height:1.35; }
.fl-meas .v{ font-size:1rem; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fl-meas .lim,.fl-meas .fl-st{ font:500 .6875rem/1.3 var(--mono); }
.fl-meas .lim{ color:var(--ink-3); letter-spacing:.04em; }
.fl-meas .fl-st{ display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; color:var(--ink-2); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.fl-meas .fl-st::before{ content:""; flex:none; width:9px; height:9px; border:1.5px solid currentColor; border-radius:50%; }
.fl-meas [data-state="watch"] .fl-st::before{ background:linear-gradient(90deg, currentColor 50%, transparent 50%); }
.fl-meas [data-state="alert"] .fl-st{ color:var(--amber); }
.fl-meas [data-state="alert"] .fl-st::before{ width:8px; height:8px; border:1px solid var(--ink); border-radius:1px; background:var(--honey); transform:rotate(45deg); }

/* monitor: tiles, a small series against its threshold, the alerts */
.fl-mt{ display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:12px; margin:0; }
.fl-mt div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:2px; min-width:0; }
.fl-mt dd{ margin:0; font-size:1.25rem; font-weight:600; line-height:1.15; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.fl-mt dt{ color:var(--ink-2); font-size:.75rem; line-height:1.3; }
.fl-alerts{ display:grid; gap:8px; }
.fl-alerts .k{ color:var(--ink-3); }
.fl-alerts ul{ display:grid; gap:6px; }
.fl-alerts li{ position:relative; padding-left:18px; font-size:.875rem; line-height:1.4; }
.fl-alerts li::before{ content:""; position:absolute; left:2px; top:.45em; width:7px; height:7px; border:1px solid var(--ink); border-radius:1px; background:var(--honey); transform:rotate(45deg); }

/* decide: the one moment that belongs to a person; while the run waits for it, its button breathes */
.fl-p.is-done .wf-ap-do .btn{ display:none; }
.fl-p.is-done .wf-ap-ok{ display:block; }
.fl-p.is-wait .wf-ap-do .btn{ animation:fl-ask 1.8s ease-in-out infinite; }
@keyframes fl-ask{ 50%{ box-shadow:0 0 0 6px rgba(254,193,6,.32); } }

/* charts: the player's Gantt, its faint track, its warm blocks, honey for the one row that matters */
.fl .gantt{ grid-template-columns:auto minmax(0, 1fr); column-gap:10px; }
.fl .gantt.fl-bars{ grid-template-columns:auto minmax(0, 1fr) auto; }
.fl .gantt .gh,.fl .gantt .gr{ grid-column:1 / -1; grid-template-columns:subgrid; }
.fl .gantt .job{ animation:none; }
.fl .gantt .fl-val{ color:var(--ink-2); text-align:right; }
.fl .gantt .is-l4 .fl-val{ color:var(--ink); }
.fl .is-skel .job,.fl .is-skel .is-mark{ background:#BDB6A7; }
.fl-ticks{ position:relative; height:15px; }
.fl-ticks span{ position:absolute; top:0; padding-left:5px; border-left:1px solid var(--line-2); color:var(--ink-3); font:500 .6875rem/1.3 var(--mono); letter-spacing:.04em; white-space:nowrap; }
.fl-ticks span:last-child{ padding:0 5px 0 0; border-left:0; border-right:1px solid var(--line-2); transform:translateX(-100%); }
.fl-series{ display:grid; gap:5px; font-variant-numeric:tabular-nums; }
.fl-plot{ position:relative; display:flex; align-items:flex-end; gap:2px; height:124px; background:rgba(21,25,30,.04); }
.fl-series.is-small .fl-plot{ height:72px; }
.fl-col{ flex:1 1 0; min-width:0; background:#BDB6A7; transform-origin:bottom; }
.fl-col.is-mark{ background:var(--honey); box-shadow:inset 0 2px 0 var(--ink); }
.fl-limit{ position:absolute; left:0; right:0; border-top:1px dashed var(--ink-2); }
.fl-limit span{ position:absolute; right:0; bottom:3px; padding:1px 3px; background:var(--panel); color:var(--ink-2); font:500 .6875rem/1 var(--mono); }
.fl-table{ width:calc(100% + 16px); margin-inline:-8px; border-collapse:collapse; font-size:.875rem; line-height:1.35; font-variant-numeric:tabular-nums; }
.fl-table th{ padding:0 8px 6px; color:var(--ink-3); letter-spacing:.08em; text-align:left; }
.fl-table td{ padding:6px 8px; border-top:1px solid var(--line-2); color:var(--ink-2); }
.fl-table tr.is-hl td{ background:var(--tint); color:var(--ink); font-weight:500; }

/* a phone's Back and Next; a case whose flow is not written yet: its drawing alone */
.fl-nav{ display:none; justify-content:space-between; gap:12px; padding:0 20px 6px; }
.fl-plain{ max-width:560px; margin:0 auto; padding:26px; }

/* the always-on band: four tiles reading as one strip, under every flow */
.fl-ops{ --ink:#15191E; --ink-2:#464C53; border-top:1px solid var(--line-2); }
.fl-ops-t{ display:flex; align-items:center; gap:8px; padding:11px 26px; border-bottom:1px solid var(--line-2); color:var(--ink-3); }
.fl-ops-t::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 1px rgba(21,25,30,.28); }
.fl-tiles{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
.fl-tiles.is-even{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.fl-tile{ display:grid; align-content:start; gap:8px; padding:14px 26px 20px; border-right:1px solid var(--line-2); }
.fl-tile:last-child{ border-right:0; }
.fl-tile .k{ color:var(--ink); }
.fl-tile .fl-acronym{ text-transform:none; }
.fl-tile-x{ color:var(--ink-2); font-size:.875rem; line-height:1.45; text-wrap:pretty; }
.fl-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0; }
.fl-kpis div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:2px; min-width:0; }
.fl-kpis dd{ margin:0; font-size:1.125rem; font-weight:600; line-height:1.25; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fl-kpis dt{ color:var(--ink-2); font-size:.8125rem; line-height:1.35; }
.atlas-ops{ margin-top:clamp(24px, 2.6vw, 40px); background:var(--panel); border:1px solid var(--line-2); border-radius:4px; }
.atlas-ops .fl-ops{ border-top:0; }
.atlas-ops:empty{ min-height:136px; visibility:hidden; }

@media (max-width:1180px){
  .fl-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fl-row{ display:contents; }
  .fl-grid.is-odd .fl-row:last-child > .fl-p:last-child{ grid-column:1 / -1; }
  .fl-tiles,.fl-tiles.is-even{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fl-tile:nth-child(2n){ border-right:0; }
  .fl-tile:nth-child(-n+2){ border-bottom:1px solid var(--line-2); }
  .atlas-ops:empty{ min-height:240px; }
}
@media (max-width:767px){
  .fl{ margin-inline:calc(-1 * var(--gutter)); border-inline:0; border-radius:0; }
  .fl-top{ padding:18px var(--gutter) 14px; }
  .fl-acts{ width:100%; justify-content:space-between; }
  .fl-rail{ padding:0 calc(var(--gutter) - 12px); gap:0; }
  .fl-rail button{ min-width:44px; justify-content:center; }
  .fl-rail button[aria-current="step"]{ padding:0 10px; }
  .fl-rail .lbl{ display:none; }
  .fl-rail button[aria-current="step"] .lbl{ display:inline; }
  .fl-grid{ display:block; background:none; }
  .fl-p{ display:none; padding:20px var(--gutter) 22px; }
  .fl-p.is-view{ display:grid; }
  .fl-nav{ display:flex; padding:0 var(--gutter) 6px; }
  .fl-nav .link{ min-width:64px; }
  .fl-nav .link + .link{ justify-content:flex-end; }
  .fl-ops-t{ padding-inline:var(--gutter); }
  .fl-tile{ padding:14px var(--gutter) 18px; }
}
@media (max-width:599px){
  .fl-tiles,.fl-tiles.is-even{ grid-template-columns:minmax(0, 1fr); }
  .fl-tile{ border-right:0; border-bottom:1px solid var(--line-2); }
  .fl-tile:last-child{ border-bottom:0; }
  .atlas-ops:empty{ min-height:380px; }
}
/* ============================================================ end of case flow */

/* ------------------------------------------------------------ schema grammar: the only animation vocabulary an artist needs.
   Root: <svg class="sch sch-KEY" viewBox="0 0 320 200">, driven by data-step="1".."4". Step 1 is what carries no attribute below.
   data-from="N"   hidden until step N, then fades in
   data-until="N"  visible up to step N, then fades out (combines with data-from)
   data-draw="N"   on a <path> with pathLength="1": the stroke draws on at step N (combines with data-until, not with .flow)
   data-move="N"   with style="--dx:40px;--dy:0px": translates at step N. A CSS transform replaces a transform attribute, so nest in a <g>.
   Any of them: style="--d:.2s" delays it, style="--t:1.4s" sets its duration.
   Stroke: .k ink, .m muted, .l faint context, .h honey. Fill: .kf ink, .hf honey, .pf paper, .wf white.
   Motion: .flow a dashed stroke that travels, .pulse a gentle opacity pulse. Both run only while the svg has data-running. */
.sch{ display:block; width:100%; height:100%; fill:none; stroke:none; stroke-width:1.5px; stroke-linecap:round; stroke-linejoin:round; transition:opacity .25s var(--ease); will-change:contents; }
.sch *{ vector-effect:non-scaling-stroke; }
.sch .k{ stroke:var(--ink); }
.sch .m{ stroke:#A9ABAB; }
.sch .l{ stroke:#E9E6DF; }
.sch .h{ stroke:var(--honey); }
.sch .kf{ fill:var(--ink); }
.sch .hf{ fill:var(--honey); }
.sch .pf{ fill:var(--bg); }
.sch .wf{ fill:var(--panel); }

.sch [data-from],.sch [data-until],.sch [data-move]{ transition:opacity var(--t, .45s) var(--ease) var(--d, 0s), transform var(--t, .9s) var(--ease) var(--d, 0s); }
.sch [data-from]{ opacity:0; }
.sch[data-step="1"] [data-from="1"],
.sch[data-step="2"] :is([data-from="1"],[data-from="2"]),
.sch[data-step="3"] :is([data-from="1"],[data-from="2"],[data-from="3"]),
.sch[data-step="4"] [data-from]{ opacity:1; }

/* A dashed stroke with pathLength is not scaled by non-scaling-stroke in any browser, so a drawn path keeps a
   scaling stroke and js/schema-runtime.js restores its 1.5 px through --u, the viewBox units per CSS pixel. */
.sch [data-draw]{ vector-effect:none; stroke-width:calc(1.5px * var(--u, 1)); stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset var(--t, 1.2s) var(--ease) var(--d, 0s), opacity .3s linear var(--d, 0s); }
.sch[data-step="1"] [data-draw="1"],
.sch[data-step="2"] :is([data-draw="1"],[data-draw="2"]),
.sch[data-step="3"] :is([data-draw="1"],[data-draw="2"],[data-draw="3"]),
.sch[data-step="4"] [data-draw]{ stroke-dashoffset:0; opacity:1; }
.sch-routing .h[data-draw],.sch-kg .h[data-draw],.sch-assistant .h[data-draw]{ stroke-width:calc(2.25px * var(--u, 1)); }

.sch[data-step="2"] [data-until="1"],
.sch[data-step="3"] :is([data-until="1"],[data-until="2"]),
.sch[data-step="4"] :is([data-until="1"],[data-until="2"],[data-until="3"]){ opacity:0; }

.sch[data-step="1"] [data-move="1"],
.sch[data-step="2"] :is([data-move="1"],[data-move="2"]),
.sch[data-step="3"] :is([data-move="1"],[data-move="2"],[data-move="3"]),
.sch[data-step="4"] [data-move]{ transform:translate(var(--dx, 0px), var(--dy, 0px)); }

.sch .flow{ stroke-dasharray:3 5; }
.sch[data-running] .flow{ animation:sch-flow .9s linear infinite; }
.sch[data-running] .pulse{ animation:sch-pulse 1.6s ease-in-out infinite; }
@keyframes sch-flow{ to{ stroke-dashoffset:-8; } }
@keyframes sch-pulse{ 50%{ stroke-opacity:.35; fill-opacity:.35; } }

/* the runtime's loop: a short fade at the end of step 4, then back to step 1 with nothing animating */
.sch[data-dip]{ opacity:0; }
.sch[data-instant] *{ transition:none !important; }
/* ============================================================ end of project atlas */