/* The same two faces as tokens.css, served as Latin-subset WOFF2 (~55 KB each instead of
   ~575 KB of TTF; both were made with fonttools' pyftsubset). Declared after
   tokens.css, so the browser takes these; tokens.css stays QJ's file unchanged. */
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight/InterTight[wght].woff2") format("woff2"),url("fonts/inter-tight/InterTight[wght].ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant/Cormorant[wght].woff2") format("woff2"),url("fonts/cormorant/Cormorant[wght].ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
/*
 * Adren — the website's own layout, on top of tokens.css (ARG-130; ARG-176; ARG-184; ARG-217;
 * ARG-220; ARG-233).
 *
 * ARG-220 (Alex, 20 Oct 2026, mem-58f77251): the structure of arcstudio, the Adren Labs product
 * at arcstudio-aio.pages.dev, on a light ground. The ground is the mountain palette Alex
 * approved for Adren's social work (mem-b2501727): snow, mist, glacier, slate, granite text,
 * the slate-blue accent. QJ's night olive stays for the dark section, the Shadows' cards, the
 * Paper-less close of the detail page and the footer, and inside them QJ's own values apply.
 * QJ's tokens.css is loaded unchanged; this file sets QJ's variable names (--text-1, --hairline…)
 * to the mountain values on the light ground and back to QJ's on the dark one, so every rule
 * below reads the same names on both.
 *
 * Full bleed (ARG-217): no framed column; the hero fills the viewport, every section's ground
 * runs edge to edge, and the content is measured by one container (--wrap, 1200 to 1360 to
 * 1520) and one gutter. Headlines in QJ's sans at 600 (Alex's yes, 20 Oct 2026), the accent
 * voice in Cormorant. No monospace. The one lime is the eye's glint in the navigation (and
 * the focus ring on the dark ground). Every animation moves transform or opacity only; tokens.css
 * switches all of them off under reduced motion, and nothing is hidden without the script.
 */

*{box-sizing:border-box}
:root{
  --gutter:20px;--wrap:1200px;--edge:max(var(--gutter),(100vw - var(--wrap)) / 2);
  /* the mountain ground (mem-b2501727) */
  --snow:#F4F6F6;--mist:#E6EAEC;--glacier:#7A8994;--slate:#5C6A74;--granite:#232A2F;--steel:#4F6472;
  /* QJ's names, the light values */
  --text-1:var(--granite);--text-2:rgb(35 42 47 / .7);--text-3:rgb(35 42 47 / .5);
  --hairline:rgb(35 42 47 / .08);--hairline-strong:rgb(35 42 47 / .14);
  --accent:var(--steel);--ink-line:rgb(35 42 47 / .72);--ground:var(--snow);--focus:var(--steel);
  --cell-bg:var(--snow);--cell-hover:rgb(230 234 236 / .7);
  --card-edge:inset 0 0 0 1px rgb(35 42 47 / .09);
  --card-lift:0 1px 2px rgb(35 42 47 / .05),0 20px 44px -28px rgb(35 42 47 / .32);
}
/* the dark ground: QJ's values back */
.section--night,.foot,.diag__card,.panel,.intro{
  --text-1:var(--bone-50);--text-2:rgb(236 232 223 / .68);--text-3:rgb(236 232 223 / .45);
  --hairline:rgb(236 232 223 / .08);--hairline-strong:rgb(236 232 223 / .14);
  --accent:var(--champagne-200);--ink-line:rgb(236 232 223 / .75);--ground:var(--night-900);--focus:var(--signal);
  --cell-bg:rgb(10 11 8 / .72);--cell-hover:rgb(26 29 20 / .9);
  color:var(--text-1)}

html{color-scheme:light;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--snow);color:var(--text-1);font:400 16px/26px var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
strong{font-weight:600;color:var(--text-1)}
:focus-visible,.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:rgb(79 100 114 / .22)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;left:16px;top:-96px;z-index:100;padding:12px 16px;border-radius:var(--r-input);
  background:var(--granite);color:var(--snow);font-weight:500}
.skip:focus{top:16px}

/* ---- The container and the two bleeds ---- */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.bleed-r{margin-right:calc(-1 * var(--edge))}
.band{padding-left:var(--edge)}

/* ---- Type: QJ's sans at 600, the accent in Cormorant; phone first, scaling with the screen ---- */
.h-display{font-weight:600;font-size:clamp(42px,3.6vw + 24px,108px);line-height:1.04;letter-spacing:-.022em;max-width:13.5em}
.h2{font:600 clamp(32px,2vw + 24px,64px)/1.08 var(--font-sans);letter-spacing:-.018em;color:var(--text-1);text-wrap:balance}
.h3{font:600 19px/25px var(--font-sans);letter-spacing:-.02em;color:var(--text-1);text-wrap:balance}
.h-display .accent,.h2 .accent,.h3 .accent{display:block;font-family:var(--font-accent);font-weight:500;font-size:1.08em;line-height:1.02;
  color:var(--accent);letter-spacing:-.025em}
/* the key word: Cormorant in the accent, underlined by a line that draws in once */
.key{position:relative;display:inline-block;font-family:var(--font-accent);font-weight:500;font-size:1.1em;line-height:.9;
  letter-spacing:-.025em;color:var(--accent)}
.key::after{content:"";position:absolute;left:.02em;right:.1em;bottom:.02em;height:.055em;border-radius:1px;background:currentColor;
  opacity:.55;transform-origin:0 50%;animation:draw .9s var(--ease) .55s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sub{font:400 16px/26px var(--font-sans);color:var(--text-2);max-width:52ch}
.label{color:var(--text-3);font-feature-settings:"tnum" 1,"case" 1}
.wordmark{display:flex;align-items:center;gap:10px;height:40px;font:400 26px/1 var(--font-accent);letter-spacing:-.01em;color:var(--text-1)}
.eye{width:38px;height:22px;flex:none}
.eye__lid{fill:var(--text-1)}
.eye__iris{fill:var(--text-2)}
.eye__glint{fill:var(--signal)}
.num{font:600 28px/1 var(--font-sans);letter-spacing:-.03em;color:var(--text-1);font-variant-numeric:tabular-nums}
.footnote{font-size:13px;line-height:20px;color:var(--text-3)}
.link-caps{display:inline-flex;align-items:center;height:44px;font:500 12px/16px var(--font-sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);box-shadow:inset 0 -1px 0 var(--hairline-strong);transition:color var(--t-fast) var(--ease)}
.link-caps:hover{color:var(--text-1)}
.ico{fill:var(--ink-line)}
.ico--line{fill:none;stroke:var(--ink-line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* The section mark: a numbered disc and a pill with the name */
.sec{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.sec__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--text-1);color:var(--ground);
  font:600 11px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.sec__name{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--hairline-strong);
  font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}

/* ---- Buttons on the light ground; QJ's Paper button stays on the dark one ---- */
.btn{gap:14px}
.btn--primary{padding:0 8px 0 24px;background:var(--granite);color:var(--snow);
  box-shadow:0 1px 2px rgb(35 42 47 / .25),0 16px 36px -16px rgb(79 100 114 / .85)}
.btn--primary:hover{background:var(--steel);box-shadow:0 1px 2px rgb(35 42 47 / .25),0 20px 44px -16px rgb(79 100 114 / .95)}
.section--night .btn--primary,.panel .btn--primary{background:var(--paper);color:var(--ink-950)}
.btn__go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgb(244 246 246 / .14);transition:transform var(--t-fast) var(--ease)}
.btn__go svg{width:14px;height:14px}
.btn:hover .btn__go{transform:translateX(3px)}

/* ---- The intro: exists only with the script's class; opacity and transform only ---- */
.intro{display:none}
.js-intro .intro{display:block;position:fixed;inset:0;z-index:90;pointer-events:none}
.intro__panel{position:absolute;left:0;right:0;height:50.5%;background:var(--ink-950);animation:panel-out .4s var(--ease) .6s both}
.intro__panel--top{top:0;--to:-100%}
.intro__panel--bottom{bottom:0;--to:100%}
@keyframes panel-out{to{transform:translateY(var(--to))}}
.intro__stage{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:20px;animation:stage-out .3s var(--ease) .5s both}
@keyframes stage-out{to{opacity:0;transform:translateY(-8px)}}
.intro__eye{width:132px;height:76px}
.intro__eye rect{fill:var(--bone-50);animation:cell-in .2s var(--ease) both;animation-delay:calc(var(--i, 0) * 4ms)}
.intro__eye .intro__glint{fill:var(--signal)}
@keyframes cell-in{from{opacity:0}to{opacity:1}}
.intro__name{display:flex;font:300 56px/1 var(--font-accent);letter-spacing:-.01em;color:var(--bone-50)}
.intro__name span{animation:letter-in .35s var(--ease) both;animation-delay:.2s}
.intro__name span:nth-child(2){animation-delay:.24s}
.intro__name span:nth-child(3){animation-delay:.28s}
.intro__name span:nth-child(4){animation-delay:.32s}
.intro__name span:nth-child(5){animation-delay:.36s}
@keyframes letter-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.intro__line{font:500 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:rgb(236 232 223 / .6);animation:cell-in .3s var(--ease) .35s both}
.intro__bar{width:160px;height:1px;background:rgb(236 232 223 / .14);overflow:hidden}
.intro__fill{display:block;height:100%;background:var(--bone-50);transform-origin:0 50%;animation:fill-in .6s var(--ease) .1s both}
@keyframes fill-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- The navigation: one pill fixed at the top, as arcstudio's; it enters once from above ---- */
.dock{position:fixed;top:12px;left:50%;z-index:60;display:flex;align-items:center;gap:8px;
  width:calc(100% - 24px);max-width:calc(var(--wrap) + 2 * var(--gutter));height:60px;padding:8px 8px 8px 16px;
  border-radius:var(--r-pill);background:rgb(244 246 246 / .78);
  box-shadow:inset 0 0 0 1px rgb(35 42 47 / .08),0 16px 40px -28px rgb(35 42 47 / .5);
  backdrop-filter:var(--glass-blur);transform:translateX(-50%);transition:box-shadow var(--t-fast) var(--ease)}
.dock.is-scrolled{box-shadow:inset 0 0 0 1px rgb(35 42 47 / .1),0 18px 44px -24px rgb(35 42 47 / .55)}
.js-after .dock{animation:dock-in .6s var(--ease) both}
@keyframes dock-in{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@supports not (backdrop-filter: blur(1px)){.dock{background:rgb(244 246 246 / .97)}}
.dock__brand{height:44px;gap:8px;font-size:23px}
.dock__brand .eye{width:32px;height:18px}
.dock__links{display:none}
.dock__link{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--r-pill);
  font:500 14px/1 var(--font-sans);letter-spacing:-.005em;color:var(--text-2);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.dock__link:hover{color:var(--text-1);background:rgb(35 42 47 / .04)}
.dock__link[aria-current]{color:var(--text-1);background:rgb(35 42 47 / .06)}
.dock__link[aria-current]::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--steel)}
.dock__side{display:flex;align-items:center;gap:4px;margin-left:auto}
.dock__cta{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--granite);color:var(--snow);font:500 13px/1 var(--font-sans);letter-spacing:-.005em;white-space:nowrap;
  transition:background var(--t-fast) var(--ease)}
.dock__cta:hover{background:var(--steel)}
.dock__go{display:none;place-items:center;width:30px;height:30px;border-radius:50%;background:rgb(244 246 246 / .14)}
.dock__go svg{width:13px;height:13px}

/* The language switch: two plain links, caps; the current one underlined */
.lang{display:flex;align-items:center;font:500 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.lang__link{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:44px;color:var(--text-2);transition:color var(--t-fast) var(--ease)}
.lang__link:hover{color:var(--text-1)}
.lang__link[aria-current]{color:var(--text-1);box-shadow:inset 0 -1px 0 var(--text-3)}
.lang__sep{color:var(--hairline-strong)}

/* ---- Hero: the whole viewport; a faint grid, two drifting islands of glacier ---- */
.hero{position:relative;display:flex;flex-direction:column;min-height:100svh;padding:112px 0 0;isolation:isolate;overflow:hidden;background:var(--snow)}
.hero__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(35 42 47 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(35 42 47 / .045) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:radial-gradient(75% 65% at 40% 35%,var(--granite),transparent 80%);mask-image:radial-gradient(75% 65% at 40% 35%,var(--granite),transparent 80%)}
.isle{position:absolute;z-index:-2;border-radius:50%;pointer-events:none}
.isle--a{width:56vw;min-width:520px;aspect-ratio:1;right:-16vw;top:-18vw;
  background:radial-gradient(circle,rgb(122 137 148 / .3),rgb(122 137 148 / .08) 45%,rgb(122 137 148 / 0) 70%);animation:drift-a 28s var(--ease) infinite alternate}
.isle--b{width:40vw;min-width:380px;aspect-ratio:1;left:-14vw;bottom:-14vw;
  background:radial-gradient(circle,rgb(79 100 114 / .14),rgb(79 100 114 / 0) 68%);animation:drift-b 36s var(--ease) infinite alternate}
@keyframes drift-a{from{transform:translate(0,0)}to{transform:translate(-80px,60px)}}
@keyframes drift-b{from{transform:translate(0,0)}to{transform:translate(70px,-50px)}}
.hero__copy{margin-block:auto;padding-block:32px 48px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:32px;margin-bottom:28px;padding:7px 14px 7px 8px;border-radius:16px;
  background:rgb(244 246 246 / .8);box-shadow:inset 0 0 0 1px var(--hairline-strong);
  font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.eyebrow::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,var(--steel) 0 3px,rgb(79 100 114 / .18) 3.5px 100%)}
.hero__copy .sub{margin-top:28px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:36px}
/* the seal: read-only, as arcstudio's badge, but a fact the build enforces */
.seal{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 8px;border-radius:var(--r-pill);
  background:rgb(244 246 246 / .86);box-shadow:inset 0 0 0 1px rgb(35 42 47 / .1),0 12px 28px -20px rgb(35 42 47 / .5);
  font:500 15px/1 var(--font-sans);letter-spacing:-.01em;color:var(--text-1);transition:box-shadow var(--t-fast) var(--ease)}
.seal:hover{box-shadow:inset 0 0 0 1px rgb(35 42 47 / .18),0 14px 32px -20px rgb(35 42 47 / .6)}
.seal__mark{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,var(--snow) 0 4px,var(--granite) 4.5px 9px,var(--mist) 9.5px 100%);
  box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.seal__tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--granite);color:var(--snow);
  font:500 10px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}

/* What Adren reads: a strip at the hero's foot; the script makes it scroll, otherwise it wraps */
.reads{padding:8px 0 36px}
.reads__label{margin-bottom:16px;text-align:center;font:500 11px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.reads__track{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--granite) 12%,var(--granite) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--granite) 12%,var(--granite) 88%,transparent)}
.reads__list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;margin-inline:auto;padding-inline:var(--gutter)}
.reads__list li{display:inline-flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;
  font:500 13px/20px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.reads__list li::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--hairline-strong)}
.reads--run .reads__list{flex:none;flex-wrap:nowrap;margin:0;padding:0;animation:marquee 48s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---- Sections: edge to edge, snow and mist alternating, one dark ground ---- */
.section{position:relative;padding:96px 0;background:var(--snow)}
.section--alt{background:linear-gradient(rgb(230 234 236 / .62),rgb(230 234 236 / .62)),var(--snow);
  box-shadow:inset 0 1px 0 var(--hairline),inset 0 -1px 0 var(--hairline)}
.section--glow-left{background:radial-gradient(50% 60% at 10% 0%,rgb(122 137 148 / .16),transparent 70%),var(--snow)}
.section--glow-right{background:radial-gradient(50% 60% at 90% 0%,rgb(122 137 148 / .16),transparent 70%),var(--snow)}
.section--glow-low{background:radial-gradient(60% 50% at 50% 100%,rgb(122 137 148 / .16),transparent 70%),var(--snow)}
.section--night,.section--night.section--glow-left,.section--night.section--glow-right{
  background:radial-gradient(50% 60% at 85% 0%,rgb(107 112 70 / .3),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgb(107 112 70 / .14),transparent 70%),var(--night-900)}
.section--night::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(236 232 223 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(236 232 223 / .035) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 70% 30%,var(--granite),transparent 80%);mask-image:radial-gradient(70% 70% at 70% 30%,var(--granite),transparent 80%)}
.section--night>*{position:relative}
.head{max-width:820px;margin-bottom:48px}
.head .h2+.sub{margin-top:20px}
.head--split{max-width:none;display:grid;gap:24px}

/* ---- Cards on the light ground: the problem, the three layers ---- */
.cards{display:grid;gap:16px;counter-reset:card}
.card-l{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 24px;border-radius:var(--r-card);background:var(--snow);
  box-shadow:var(--card-edge),var(--card-lift);counter-increment:card;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.card-l:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgb(35 42 47 / .14),0 24px 52px -28px rgb(35 42 47 / .4)}
.card-l::after{content:counter(card,decimal-leading-zero);content:counter(card,decimal-leading-zero) / "";position:absolute;top:28px;right:24px;
  font:500 11px/16px var(--font-sans);letter-spacing:.1em;color:var(--text-3);font-variant-numeric:tabular-nums}
.card-l p{color:var(--text-2)}
.card-l__ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:14px;background:rgb(79 100 114 / .1)}
.card-l__ico svg{width:22px;height:22px}
.card-l__ico .ico--line{stroke:var(--steel);stroke-width:1.5}
.card-l__tag{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:500 11px/16px var(--font-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.card-l__tag::before{content:"";width:16px;height:1px;background:currentColor}
.card-l--key{--text-1:var(--snow);--text-2:rgb(244 246 246 / .72);--text-3:rgb(244 246 246 / .5);--accent:var(--mist);
  background:radial-gradient(90% 80% at 100% 0%,rgb(122 137 148 / .45),transparent 60%),var(--granite);color:var(--text-1)}
.card-l--key .card-l__ico{background:rgb(244 246 246 / .1)}
.card-l--key .card-l__ico .ico--line{stroke:var(--mist)}

/* ---- The data path: a light panel; the dot walks it (transform only) ---- */
.path-panel{position:relative;padding:28px 0 32px;border-radius:var(--r-card);background:var(--snow);box-shadow:var(--card-edge),var(--card-lift);overflow:hidden}
.path-panel::before{content:"";position:absolute;inset:0;pointer-events:none;display:none;
  background-image:linear-gradient(90deg,rgb(35 42 47 / .04) 1px,transparent 1px);background-size:48px 100%}
.path{position:relative;display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;margin:0 24px}
.path__node{position:relative;padding:0 16px 20px 28px;animation:node-in .6s var(--ease) both;animation-delay:.2s}
.path__node:nth-child(2){animation-delay:.34s}.path__node:nth-child(3){animation-delay:.48s}
.path__node:nth-child(4){animation-delay:.62s}.path__node:nth-child(5){animation-delay:.76s}
@keyframes node-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.path__node::before{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:var(--snow);box-shadow:inset 0 0 0 2px var(--glacier)}
.path__node--key::before{background:var(--steel);box-shadow:none}
.path__node::after{content:"";position:absolute;left:4px;top:17px;bottom:-1px;width:1px;background:rgb(35 42 47 / .16);
  transform-origin:50% 0;animation:seg-in-y .5s var(--ease) both;animation-delay:.4s}
.path__node:last-child::after{display:none}
@keyframes seg-in-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes seg-in-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.path__l{display:block;font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-1);font-variant-numeric:tabular-nums}
.path__t{display:block;margin-top:6px;font:400 15px/20px var(--font-sans);color:var(--text-2)}
.path__live{position:absolute;left:0;top:4px;width:9px;height:calc(100% * 4 / 5);pointer-events:none;animation:walk-y 8s var(--ease) infinite}
.path__live::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--steel);
  box-shadow:0 0 0 3px var(--snow),0 0 16px 4px rgb(79 100 114 / .45)}
@keyframes walk-y{0%,12%{transform:translateY(0)}20%,32%{transform:translateY(25%)}40%,52%{transform:translateY(50%)}
  60%,72%{transform:translateY(75%)}80%,94%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes walk-x{0%,12%{transform:translateX(0)}20%,32%{transform:translateX(25%)}40%,52%{transform:translateX(50%)}
  60%,72%{transform:translateX(75%)}80%,94%{transform:translateX(100%)}100%{transform:translateX(0)}}

/* ---- The stepper on the dark ground: numbered boxes on one line; the current one fills ---- */
.flow{display:grid;gap:40px}
.flow__head{margin-bottom:0}
.flow__rows{display:grid}
.flow__row{position:relative;display:grid;grid-template-columns:44px 1fr;gap:20px;padding:0 0 36px}
.flow__row::before{content:"";position:absolute;left:21.5px;top:52px;bottom:8px;width:1px;background:var(--hairline-strong)}
.flow__row:last-child{padding-bottom:0}
.flow__row:last-child::before{display:none}
.flow__row .label{margin-bottom:6px}
.flow__row .h3{font-size:22px;line-height:28px}
.flow__row p:not(.label){margin-top:6px;color:var(--text-2)}
.ring{position:relative;width:44px;height:44px;border-radius:12px;background:rgb(236 232 223 / .03);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.ring::after{content:"";position:absolute;inset:15px;border-radius:3px;background:var(--accent);transform:scale(1);transition:transform .5s var(--ease)}
.js .ring::after{transform:scale(0)}
.js .flow__row.is-current .ring{box-shadow:inset 0 0 0 1px var(--accent)}
.js .flow__row.is-current .ring::after{transform:scale(1)}

/* ---- Hairline cells (the detail page) ---- */
.cells{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline-strong);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.cell{display:flex;flex-direction:column;gap:12px;padding:24px 20px;background:var(--cell-bg);transition:background var(--t-fast) var(--ease)}
.cell:hover{background:var(--cell-hover)}
.cell p:not(.label):not(.cell__n){color:var(--text-2)}
.cell__n{font:500 12px/16px var(--font-sans);letter-spacing:.08em;color:var(--accent);font-variant-numeric:tabular-nums}
.cell .h3{margin-top:4px}

/* Two decisions, in order: an open row of cells */
.decide{position:relative;margin-top:48px;padding-top:32px;box-shadow:inset 0 1px 0 var(--hairline)}
.decide__title{margin-bottom:16px}
.decide__row{display:grid;gap:1px;background:var(--hairline-strong);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.decide__cell{position:relative;display:grid;gap:6px;padding:16px 16px 16px 28px;background:var(--cell-bg)}
.decide__cell::before{content:"";position:absolute;left:12px;top:22px;width:6px;height:6px;background:var(--text-3);transform:rotate(45deg)}
.decide__cell--gate{background:var(--cell-hover)}
.decide__cell--key::before{background:var(--accent)}
.decide__cell--key .label{color:var(--accent)}
.decide__text{font-size:14px;line-height:20px;color:var(--text-2)}
.decide__foot{margin-top:16px;font-size:14px;line-height:22px;color:var(--text-2);max-width:60ch}

/* The shape of a finding */
.shape{display:grid;gap:24px;margin-top:48px;padding-top:32px;box-shadow:inset 0 1px 0 var(--hairline)}
.shape__head{display:grid;gap:12px}
.shape__head p:not(.label){color:var(--text-2);max-width:48ch}
.shape__list{display:grid}
.shape__list li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:baseline;padding:14px 0;box-shadow:inset 0 -1px 0 var(--hairline);color:var(--text-2)}
.shape__list li:first-child{box-shadow:inset 0 1px 0 var(--hairline),inset 0 -1px 0 var(--hairline)}
.brief__n{font:500 12px/16px var(--font-sans);letter-spacing:.08em;color:var(--accent);font-variant-numeric:tabular-nums}
.lab__facts{display:grid;grid-template-columns:1fr;gap:4px 16px;margin-top:8px}
.lab__facts dt{margin-top:12px;font:500 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.lab__facts dd{color:var(--text-2)}

/* ---- The Shadows' diagnostic: the legend, then six cards on QJ's night olive ---- */
.states{display:flex;flex-wrap:wrap;gap:8px}
.state{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:var(--snow);
  box-shadow:var(--card-edge);font:500 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.state::before{content:"";width:8px;height:8px;border-radius:50%}
.state--ready::before{background:var(--steel)}
.state--up::before{box-shadow:inset 0 0 0 2px var(--glacier)}
.state--none::before{box-shadow:inset 0 0 0 2px var(--hairline-strong)}
.diag{display:grid;gap:16px}
.diag__card{position:relative;display:flex;flex-direction:column;min-height:320px;padding:20px 22px 24px;border-radius:var(--r-card);overflow:hidden;
  background:radial-gradient(70% 55% at 50% 40%,rgb(107 112 70 / .32),transparent 70%),linear-gradient(165deg,var(--moss-800),var(--night-900) 55%,var(--ink-950));
  box-shadow:inset 0 0 0 1px rgb(236 232 223 / .08),0 28px 56px -32px rgb(10 11 8 / .9);transition:transform var(--t-fast) var(--ease)}
.diag__card:hover{transform:translateY(-2px)}
.diag__card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(236 232 223 / .04) 1px,transparent 1px),linear-gradient(90deg,rgb(236 232 223 / .04) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 55% at 50% 42%,var(--granite),transparent 85%);mask-image:radial-gradient(60% 55% at 50% 42%,var(--granite),transparent 85%)}
.diag__card>*{position:relative}
.diag__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.diag__tags{display:flex;flex-wrap:wrap;gap:6px}
.diag__tags li{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);background:rgb(236 232 223 / .06);
  box-shadow:inset 0 0 0 1px rgb(236 232 223 / .1);font:500 10px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.diag__tags .diag__tag--dim{color:var(--champagne-200);background:rgb(220 226 166 / .08);box-shadow:inset 0 0 0 1px rgb(220 226 166 / .18)}
.diag__no{font:600 40px/1 var(--font-sans);letter-spacing:-.05em;color:var(--text-1);font-variant-numeric:tabular-nums}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.diag__card .h3{margin-top:auto;font-size:22px;line-height:28px}
.diag__legend{margin-top:12px;font:400 15px/22px var(--font-sans);color:var(--text-2)}
.diag__up{display:flex;align-items:baseline;gap:10px;margin-top:8px;font-size:14px;line-height:20px;color:var(--text-2)}
.diag__up span{font:500 10px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
/* At work (ARG-237; Alex, 22 Oct 2026: "cada shadow como revisando información, activo haciendo
   algo en lugar de que se vea plano", then "un ojito viendo … más activo, viendo tools reales que
   existen", and "una card que diga your tool"). Each card is the eye of Adren over the real tools
   its Shadow reads, each one a reader in src/adren/connectors: WhatsApp (whatsapp_export.py),
   Excel (.xlsx, tabular.py and registers.py), Google Calendar (an .ics export, calendar_ics.py),
   the POS day book and the bank statement (registers.py). The gaze moves from tile to tile; the
   tile and its chip are lit while it is looked at; a scan passes down the card; a dot beats by
   the number. HR reads nothing this term (ADR-0019, mem-550e38db): its eye rests, nothing is
   lit. Your Tool: a tool not on the list is what the diagnostic calls "needs an upgrade", and the
   reader is built (ADR-0019; the offer to build, mem-58f77251). Every overlay's start state is
   hidden in its base rule, so under reduced motion the cards stand still and plain. Transform
   and opacity only; each card keeps its own time (--lag). */
.diag__card:nth-child(2){--lag:-1.3s}.diag__card:nth-child(3){--lag:-2.6s}.diag__card:nth-child(4){--lag:-3.9s}
.diag__card:nth-child(5){--lag:-.7s}.diag__card:nth-child(6){--lag:-2s}.diag__card:nth-child(7){--lag:-3.3s}
.diag__card::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgb(220 226 166 / 0),rgb(220 226 166 / .06) 42%,rgb(220 226 166 / .2) 50%,rgb(220 226 166 / .06) 58%,rgb(220 226 166 / 0));
  animation:diag-scan 5.6s linear infinite;animation-delay:var(--lag,0s)}
@keyframes diag-scan{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}80%{opacity:1}92%,100%{opacity:0;transform:translateY(360%)}}
.diag__scene{position:relative;align-self:center;width:208px;height:128px;margin:24px 0 16px}
.diag__eye{position:absolute;left:50%;top:64%;width:84px;height:48px;overflow:visible;transform:translate(-50%,-50%)}
.diag__eye .eye__lid{fill:var(--bone-50)}
.diag__eye .eye__iris{fill:rgb(236 232 223 / .72)}
.diag__glint{fill:var(--champagne-200)}
.diag__look{animation:diag-look3 6s var(--ease) infinite;animation-delay:var(--lag,0s)}
.diag__scene--1 .diag__look{animation-name:diag-look1}
@keyframes diag-look3{0%,28%{transform:translate(-12px,1px)}33%,61%{transform:translate(0,-4px)}66%,94%{transform:translate(12px,1px)}100%{transform:translate(-12px,1px)}}
@keyframes diag-look1{0%,40%{transform:translate(0,-4px)}50%,60%{transform:translate(-11px,1px)}70%,80%{transform:translate(11px,1px)}90%,100%{transform:translate(0,-4px)}}
.diag__tool{position:absolute;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgb(236 232 223 / .05);box-shadow:inset 0 0 0 1px rgb(236 232 223 / .12)}
.diag__tool--a{left:0;top:58px;--at:0s}
.diag__tool--b{left:50%;top:0;margin-left:-20px;--at:2s}
.diag__tool--c{right:0;top:58px;--at:4s}
.diag__scene--1 .diag__tool{--at:0s}
.diag__tool svg{width:18px;height:18px;opacity:.55;animation:diag-glow 6s var(--ease) infinite;animation-delay:calc(var(--lag,0s) + var(--at,0s))}
.diag__tool .ico--line{stroke:var(--bone-50);stroke-width:1.4}
.diag__tool::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1px rgb(220 226 166 / .8),0 0 20px rgb(220 226 166 / .3);
  animation:diag-lit 6s var(--ease) infinite;animation-delay:calc(var(--lag,0s) + var(--at,0s))}
.diag__scene--1 .diag__tool::after{animation-name:diag-lit1}
.diag__scene--1 .diag__tool svg{animation-name:diag-glow1}
.diag__tool--open{background:transparent;box-shadow:none;outline:1px dashed rgb(220 226 166 / .5);outline-offset:-1px}
@keyframes diag-lit{0%{opacity:0}4%,26%{opacity:1}31%,100%{opacity:0}}
@keyframes diag-lit1{0%{opacity:0}5%,38%{opacity:1}46%,100%{opacity:0}}
@keyframes diag-glow{0%{opacity:.55}4%,26%{opacity:1}31%,100%{opacity:.55}}
@keyframes diag-glow1{0%{opacity:.55}5%,38%{opacity:1}46%,100%{opacity:.55}}
.diag__tags li{position:relative}
.diag__tags li::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1px rgb(220 226 166 / .7),0 0 12px rgb(220 226 166 / .25);
  animation:diag-lit 6s var(--ease) infinite;animation-delay:var(--lag,0s)}
.diag__tags li:nth-child(2)::after{animation-delay:calc(var(--lag,0s) + 2s)}
.diag__tags li:nth-child(3)::after{animation-delay:calc(var(--lag,0s) + 4s)}
.diag__top:has(+ .diag__scene--1) .diag__tags li::after{animation-name:diag-lit1}
.diag__tags .diag__tag--dim::after{display:none}
.diag__no{position:relative}
.diag__no::before{content:"";position:absolute;left:-14px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--champagne-200);
  animation:diag-beat 1.6s ease-in-out infinite;animation-delay:var(--lag,0s)}
@keyframes diag-beat{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.diag__card--idle::after,.diag__card--idle .diag__tool::after,.diag__card--idle .diag__tags li::after{display:none}
.diag__card--idle .diag__look{animation:none;opacity:.3}
.diag__card--idle .diag__tool svg{animation:none;opacity:.3}
.diag__card--idle .diag__no::before{background:var(--text-3);animation-duration:4.8s}
.diag__card--yours{background:radial-gradient(60% 90% at 18% 50%,rgb(220 226 166 / .16),transparent 70%),
  linear-gradient(165deg,var(--moss-800),var(--night-900) 60%,var(--ink-950))}
.diag__card--yours .diag__top{justify-content:flex-end}
.diag__card--yours .diag__no{color:var(--champagne-200)}

/* ---- Questions (ARG-234): details and summary, no script; a plus that turns to a minus ---- */
.section--faq{box-shadow:inset 0 1px 0 var(--hairline)}
.faq{display:grid;gap:40px}
.faq__head{margin-bottom:0}
.faq__list{display:grid;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.faq__item{box-shadow:inset 0 -1px 0 var(--hairline-strong)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:22px 0;cursor:pointer;list-style:none;
  font:600 18px/25px var(--font-sans);letter-spacing:-.015em;color:var(--text-1);transition:color var(--t-fast) var(--ease)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--steel)}
.faq__mark{position:relative;flex:none;width:32px;height:32px;border-radius:50%;color:var(--text-1);box-shadow:inset 0 0 0 1px var(--hairline-strong);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;border-radius:1px;
  background:currentColor;transition:transform var(--t-fast) var(--ease)}
.faq__mark::after{transform:rotate(90deg)}
.faq__item[open] .faq__mark{background:var(--granite);color:var(--snow);box-shadow:none}
.faq__item[open] .faq__mark::after{transform:rotate(0)}
.faq__a{padding:0 48px 26px 0;color:var(--text-2);max-width:62ch}
.faq__item[open] .faq__a{animation:enter .5s var(--ease) both}

/* ---- The close: centred, as arcstudio's ---- */
.section--close{padding:112px 0 128px}
.close{display:flex;flex-direction:column;align-items:center;text-align:center}
.close__label{display:inline-flex;align-items:center;gap:8px;height:28px;margin-bottom:28px;padding:0 12px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.close__label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--steel)}
.close__title{font-size:clamp(38px,3vw + 22px,88px);margin-inline:auto;text-wrap:balance}
.close__sub{margin:24px auto 36px}
.close__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:28px;font:500 11px/16px var(--font-sans);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.close__facts li{display:inline-flex;align-items:center;gap:8px}
.close__facts li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--glacier)}

/* ---- The detail page: its head, who it is for, the dark close panel ---- */
.hero--page{min-height:0;padding:144px 0 72px}
.hero--page .hero__copy{margin-block:0;padding-block:0}
.page__title{max-width:18ch}
.hero--page .sub{margin-top:20px}
.who{display:grid;gap:1px;background:var(--hairline-strong);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.who .cells{box-shadow:none;background:transparent}
.who .cell{gap:16px;padding:28px 20px}
.hops{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:4px;background:var(--hairline);box-shadow:inset 0 0 0 1px var(--hairline)}
.hops li{display:grid;gap:6px;padding:12px;background:var(--cell-bg);font-size:14px;line-height:20px;color:var(--text-1)}
.tariffs{display:grid;gap:16px;margin-top:4px}
.tariff{display:grid;gap:8px;padding-top:16px;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.tariff dd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--text-2)}
.finds{display:grid;margin-top:4px}
.finds li{display:grid;grid-template-columns:72px 1fr;gap:4px 12px;padding:12px 0;box-shadow:inset 0 -1px 0 var(--hairline);color:var(--text-2)}
.finds li:first-child{box-shadow:inset 0 1px 0 var(--hairline),inset 0 -1px 0 var(--hairline)}
.finds li .label{padding-top:4px}
.panel{position:relative;display:grid;gap:20px;padding:40px 24px;border-radius:var(--r-card);overflow:hidden;
  background:radial-gradient(70% 90% at 100% 0%,rgb(107 112 70 / .4),transparent 70%),var(--night-900);box-shadow:var(--shadow-lg)}
.panel>*{position:relative}
.panel__label{color:var(--champagne-200)}
.panel__title{display:flex;align-items:baseline;gap:16px;font:600 64px/1 var(--font-sans);letter-spacing:-.025em;color:var(--text-1)}
.panel__square{width:14px;height:14px;background:var(--champagne-200);transform:translateY(-4px)}
.panel__sub{max-width:52ch;color:var(--text-2)}
.panel__go{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--paper);color:var(--ink-950);transition:transform var(--t-fast) var(--ease)}
.panel__go svg{width:24px;height:24px}
.panel__go:hover{transform:translateX(4px)}
.panel__mail{font:500 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* ---- Footer: QJ's ink, edge to edge, the cells measured inside ---- */
.foot{position:relative;overflow:hidden;background:var(--ink-950)}
.foot__grid{display:grid;grid-template-columns:1fr}
.foot__cell{padding:32px 0;box-shadow:inset 0 -1px 0 var(--hairline)}
.foot__brand p{margin-top:12px;color:var(--text-2);max-width:40ch}
.foot .wordmark{color:var(--text-1)}
.foot .eye__glint{fill:var(--paper)}
.foot ul{display:grid;gap:8px;margin-top:16px}
.foot ul a{color:var(--text-2);transition:color var(--t-fast) var(--ease)}
.foot ul a:hover{color:var(--text-1)}
.foot__strip{display:grid;gap:8px;padding:20px 0 28px}
.foot__strip .lang{margin-left:-10px}
.foot__mark{display:none}

/* ---- Motion: the hero's entrance, the rise on scroll (only with the script) ---- */
.enter{animation:enter .7s var(--ease) both}
.js-intro .enter{animation-delay:.7s}
.hero__copy .enter:nth-child(2){animation-delay:80ms}
.hero__copy .enter:nth-child(3){animation-delay:160ms}
.hero__copy .enter:nth-child(4){animation-delay:240ms}
.reads.enter{animation-delay:320ms}
.js-intro .hero__copy .enter:nth-child(2){animation-delay:.78s}
.js-intro .hero__copy .enter:nth-child(3){animation-delay:.86s}
.js-intro .hero__copy .enter:nth-child(4){animation-delay:.94s}
.js-intro .reads.enter{animation-delay:1.02s}
.js-intro .key::after{animation-delay:1.3s}
@keyframes enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .card-l.reveal.is-in:hover,.js .diag__card.reveal.is-in:hover{transform:translateY(-2px)}

/* ---- 404 ---- */
.lost{min-height:100svh;display:grid;place-items:center}
.lost .head--center{margin-inline:auto;text-align:center}
.lost__mark{justify-content:center;margin-bottom:40px;font-size:32px}
.lost .actions{justify-content:center}
.lost__es{margin-top:24px;color:var(--text-2);max-width:44ch;margin-inline:auto}

/* ---- The request (ARG-246): the form in the close, in three groups (the company, the person, the
   tools and the problem). Snow fields on its mist, 52 px tall, 16 px text (iOS never zooms), the
   slate-blue focus; the choices are 44 px pills; one column on a phone, two from 640. The trap is
   off-screen for people and kept out of the reading order. ---- */
.ask{width:100%;max-width:720px;margin:0 auto;text-align:left}
.ask__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ask fieldset{min-width:0;margin:0;padding:0;border:0}
.ask .ask__group{display:grid;gap:20px;padding:32px 0;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.ask .ask__group:first-of-type{padding-top:8px;box-shadow:none}
.ask__legend{float:left;width:100%;margin-bottom:20px;padding:0;font:600 19px/25px var(--font-sans);letter-spacing:-.02em;color:var(--text-1)}
.ask__legend+*{clear:both}
.ask__choice{display:grid;gap:10px}
.ask__choice>.ask__label{float:left;width:100%;margin-bottom:10px;padding:0}
.ask__chips{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.ask__chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border-radius:var(--r-pill);
  background:var(--snow);box-shadow:var(--card-edge);font:500 14px/20px var(--font-sans);color:var(--text-2);cursor:pointer;
  transition:box-shadow var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.ask__chip input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--steel)}
.ask__chip:hover{color:var(--text-1);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.ask__chip:has(input:checked){color:var(--text-1);box-shadow:inset 0 0 0 2px var(--steel)}
.ask__chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.ask__hint{font-size:13px;line-height:20px;color:var(--text-3)}
.ask__grid{display:grid;gap:16px}
.ask__field{display:flex;flex-direction:column;gap:8px}
.ask__label{font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.ask__label em{font-style:normal;color:var(--text-3);letter-spacing:.06em;text-transform:none}
.ask input[type=text],.ask input[type=email],.ask input[type=tel],.ask select,.ask textarea{width:100%;min-height:52px;
  padding:14px 16px;border:0;border-radius:12px;background:var(--snow);box-shadow:var(--card-edge);
  font:400 16px/24px var(--font-sans);color:var(--text-1);transition:box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ask select{appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
  linear-gradient(135deg,var(--slate) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;
  background-size:5px 5px;background-repeat:no-repeat}
.ask textarea{min-height:120px;resize:vertical}
.ask input:hover,.ask select:hover,.ask textarea:hover{box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.ask input:focus-visible,.ask select:focus-visible,.ask textarea:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--steel)}
.ask__consent{display:flex;gap:12px;align-items:flex-start;min-height:44px;margin:8px 0 24px;font-size:14px;line-height:22px;color:var(--text-2)}
.ask__consent input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--steel)}
.ask__consent a,.ask__or a{color:var(--text-1);box-shadow:inset 0 -1px 0 var(--hairline-strong)}
.ask__consent a:hover,.ask__or a:hover{color:var(--steel)}
.ask__send{width:100%;justify-content:space-between}
.ask__or{margin-top:16px;text-align:center;font-size:14px;line-height:22px;color:var(--text-3)}
.ask__or a{display:inline-block;padding:11px 0}

/* ---- The answer pages and the privacy notice: one column on the snow ---- */
.note{padding:120px 0 96px}
.note .wrap{max-width:calc(760px + 2 * var(--gutter))}
.note__mark{margin-bottom:40px}
.note__title{margin-bottom:24px}
.note .sub{margin-bottom:32px}
.note__body h2{margin:48px 0 12px;font:600 21px/28px var(--font-sans);letter-spacing:-.02em}
.note__body p,.note__body li{color:var(--text-2);max-width:64ch}
.note__body p+p{margin-top:12px}
.note__body ul{margin-top:12px;display:grid;gap:8px}
.note__body li{position:relative;padding-left:18px}
.note__body li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--glacier)}
.note__body a,.note .sub a{color:var(--text-1);box-shadow:inset 0 -1px 0 var(--hairline-strong)}
.note__body a:hover,.note .sub a:hover{color:var(--steel)}
.note__body em{font-style:normal;font-weight:500;color:var(--text-1)}
.note__date{margin-top:48px}

/* ---- Contactless (ARG-274): the five uses as light cards (.card-l), Access as the key one,
   with a tap drawn behind it (decorative). Hover and reveal are the landing's own (.card-l,
   .reveal: --t-fast, --t-reveal, --ease); nothing new moves. ---- */
.section--nfc{background:radial-gradient(50% 60% at 90% 0%,rgb(122 137 148 / .16),transparent 70%),var(--snow);box-shadow:inset 0 1px 0 var(--hairline)}
.nfc__head .sub{max-width:46ch}
.nfc .card-l::after{content:none}
.nfc__tile .card-l__ico{margin-bottom:12px}
.nfc__tile--key{overflow:hidden}
.nfc__tile--key>:not(.nfc__tap){position:relative}
.nfc__tap{position:absolute;right:-36px;top:12px;width:120px;height:120px;fill:none;stroke:var(--mist);stroke-width:1.5;stroke-linecap:round;opacity:.22;pointer-events:none}
.nfc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:32px;padding-top:24px;box-shadow:inset 0 1px 0 var(--hairline)}
.nfc__credit{font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
@media (min-width:640px){
  .nfc{grid-template-columns:1fr 1fr}
  .nfc__tile--key{grid-column:1 / -1}
}
@media (min-width:1024px){
  .nfc{grid-template-columns:repeat(6,1fr)}
  .nfc__tile{grid-column:span 2}
  .nfc__tile--key,.nfc__tile:nth-child(2){grid-column:span 3}
  .nfc__tap{top:50%;width:220px;height:220px;right:-16px;transform:translateY(-50%)}
}

/* ---- Widths: 390 → 640 → 768 → 900 → 1024 → 1440 → 1600 → 2200 ---- */
@media (min-width:420px){
  .dock__cta{padding:0 6px 0 16px}
  .dock__go{display:grid}
}
@media (min-width:640px){
  .hops{grid-template-columns:repeat(4,1fr)}
  .ask__grid{grid-template-columns:1fr 1fr}
  .ask__field--wide{grid-column:1 / -1}
  .ask__send{width:auto}
  .tariffs{grid-template-columns:1fr 1fr}
  .foot__strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
  .panel{padding:56px 48px}
  .panel__title{font-size:96px}
  .cells--3{grid-template-columns:1fr 1fr}
  .diag{grid-template-columns:1fr 1fr}
  .diag__card--yours{grid-column:1 / -1}
}
@media (min-width:768px){
  .faq__q{font-size:20px;line-height:28px;padding:26px 0}
  .faq__a{padding-right:64px}
  :root{--gutter:32px}
  .section{padding:128px 0}
  .section--close{padding:144px 0 160px}
  .hero{padding-top:128px}
  .hero--page{padding:176px 0 88px}
  .h3{font-size:21px;line-height:27px}
  .sub{font-size:18px;line-height:28px}
  .head{margin-bottom:64px}
  .cards{gap:20px}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .card-l{padding:32px 28px}
  .card-l::after{right:28px;top:32px}
  .cell{padding:28px 24px}
  .cells--3{grid-template-columns:repeat(3,1fr)}
  .decide__row{grid-template-columns:repeat(5,1fr)}
  .shape{grid-template-columns:5fr 7fr;gap:48px}
  .who{grid-template-columns:1fr 1fr}
  .who .cell{padding:32px 28px}
  .flow{grid-template-columns:5fr 7fr;gap:48px;align-items:start}
  .flow__head{position:sticky;top:112px}
  .flow__row{grid-template-columns:56px 1fr;gap:28px;padding-bottom:48px}
  .flow__row::before{left:27.5px;top:64px}
  .ring{width:56px;height:56px;border-radius:14px}
  .ring::after{inset:20px}
  .flow__row .h3{font-size:28px;line-height:34px}
  .foot__grid{grid-template-columns:2fr 1fr 1fr}
  .foot__cell{padding:48px 32px 48px 0;box-shadow:inset -1px 0 0 var(--hairline)}
  .foot__cell+.foot__cell{padding-left:32px}
  .foot__cell:last-child{box-shadow:none}
  .foot__strip{box-shadow:inset 0 1px 0 var(--hairline)}
}
@media (min-width:900px){
  .dock{padding-left:20px}
  .dock__links{display:flex;gap:2px;margin-left:24px}
  .dock__side{gap:12px}
}
@media (min-width:1024px){
  .faq{grid-template-columns:5fr 7fr;gap:48px;align-items:start}
  .faq__head{position:sticky;top:112px}
  .hero__copy{padding-block:40px 64px}
  .head--split{grid-template-columns:1fr auto;align-items:end;gap:48px}
  .diag{grid-template-columns:repeat(3,1fr);gap:20px}
  .diag__card{min-height:360px;padding:24px 26px 28px}
  .diag .diag__card--yours{min-height:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"scene title no" "scene up no";
    align-items:center;column-gap:48px;padding:28px 44px}
  .diag__card--yours .diag__scene{grid-area:scene;margin:0}
  .diag__card--yours .h3{grid-area:title;align-self:end;margin-top:0;font-size:28px;line-height:34px}
  .diag__card--yours .diag__up{grid-area:up;align-self:start}
  .diag__card--yours .diag__top{grid-area:no;align-self:center}
  /* the path turns horizontal: five equal columns, the dot walks along the top */
  .path-panel{padding:40px 0 44px}
  .path-panel::before{display:block}
  .path{grid-template-columns:repeat(5,1fr);grid-auto-rows:auto;margin:0 40px}
  .path__node{padding:28px 24px 0 0}
  .path__node::before{top:-4px}
  .path__node::after{left:9px;right:0;top:0;bottom:auto;width:auto;height:1px;transform-origin:0 50%;animation-name:seg-in-x}
  .path__live{top:-4px;width:calc(100% * 4 / 5);height:9px;animation-name:walk-x}
  .path__t{font-size:17px;line-height:24px}
  .panel{grid-template-columns:1fr auto;grid-template-areas:"label label" "title go" "sub go" "mail mail";align-items:end;padding:64px 72px}
  .panel__label{grid-area:label}
  .panel__title{grid-area:title;font-size:120px}
  .panel__sub{grid-area:sub}
  .panel__go{grid-area:go;width:88px;height:88px;align-self:center}
  .panel__mail{grid-area:mail}
}
@media (min-width:1600px){
  :root{--wrap:1360px;--gutter:48px}
  body{font-size:17px;line-height:28px}
  .section{padding:160px 0}
  .sub{font-size:20px;line-height:30px;max-width:54ch}
  .h3{font-size:23px;line-height:30px}
  .head{max-width:900px}
  .card-l{padding:36px 32px}
  .diag__card{min-height:400px}
}
@media (min-width:2200px){
  :root{--wrap:1520px}
}

/* ==========================================================================================
 * ARG-233 (Alex, 21 Oct 2026): the three packages, Adren Enterprise as the flagship, and the
 * gaze — the eye of Adren, large, in a lens, following the pointer over a field of cells.
 * The same laws as above: palette only, transform and opacity only, nothing hidden without the
 * script, nothing moving under reduced motion (tokens.css), no inline style attribute (the
 * pointer's position reaches the CSS through custom properties set by site.js).
 * ========================================================================================== */

/* ---- The field: a canvas of cells behind the hero; the CSS grid stays for the page without it ---- */
.field{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.js-field .field{opacity:1}
.js-field .hero__grid{opacity:0;transition:opacity 1.2s var(--ease)}

/* ---- The hero's copy and the gaze: one column on a phone (the gaze first), side by side from 1024 ---- */
.hero__copy{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.eyebrow{transition:box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
a.eyebrow:hover{background:var(--snow);box-shadow:inset 0 0 0 1px rgb(35 42 47 / .3)}
.gaze{position:relative;order:-1;align-self:center;display:grid;place-items:center;width:min(74vw,320px);aspect-ratio:1;margin:-8px 0 12px;pointer-events:none}
.gaze::before{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgb(244 246 246 / .96) 34%,rgb(244 246 246 / .7) 50%,rgb(244 246 246 / 0) 68%)}
.gaze.enter{animation-delay:120ms}
.js-intro .gaze.enter{animation-delay:.8s}
.gaze__dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gaze__ring{fill:none;stroke:rgb(35 42 47 / .12);stroke-width:1;vector-effect:non-scaling-stroke}
.gaze__ring--dash{stroke:rgb(35 42 47 / .3);stroke-dasharray:1.5 7;transform-origin:200px 200px;animation:spin 110s linear infinite reverse}
.gaze__ticks{fill:none;stroke:rgb(35 42 47 / .3);stroke-width:1;vector-effect:non-scaling-stroke;transform-origin:200px 200px;animation:spin 160s linear infinite}
.gaze__sats{transform-origin:200px 200px;animation:spin 64s linear infinite}
.gaze__sats rect{fill:var(--steel)}
@keyframes spin{to{transform:rotate(360deg)}}
.gaze__eye{position:relative;width:58%;height:auto;overflow:visible;transform-origin:50% 50%;transition:transform 90ms var(--ease)}
.gaze.is-blink .gaze__eye{transform:scaleY(.08)}
.gaze__lid rect{fill:var(--granite)}
.gaze__iris{transition:transform .18s var(--ease)}
.gaze__iris rect{fill:var(--steel)}
.gaze__iris .gaze__glint{fill:var(--signal)}
/* the eye assembles once, its cells flying in from where site.js scattered them */
.js-gaze .gaze__eye rect{animation:assemble 1.1s var(--ease) both;animation-delay:calc(var(--i, 0) * 6ms + .2s)}
.js-intro.js-gaze .gaze__eye rect{animation-delay:calc(var(--i, 0) * 6ms + 1s)}
@keyframes assemble{from{opacity:0;transform:translate(var(--dx, 0),var(--dy, 0))}to{opacity:1;transform:none}}
/* a scan line passes over the eye */
.gaze__label{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;font:500 11px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.gaze__scan{position:absolute;left:17%;right:17%;top:31%;bottom:31%;overflow:hidden;pointer-events:none}
.gaze__scan::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(79 100 114 / 0) 42%,rgb(79 100 114 / .07) 49.3%,rgb(79 100 114 / .7) 50%,rgb(79 100 114 / 0) 50.5%);
  transform:translateY(-52%);animation:scan 7s linear 2.2s infinite both}
@keyframes scan{0%{opacity:0;transform:translateY(-52%)}6%{opacity:1}40%{opacity:1}48%{opacity:0;transform:translateY(52%)}100%{opacity:0;transform:translateY(52%)}}

/* the lime belongs to the gaze in the hero and to Enterprise's box in the packages; the
   navigation's eye keeps the steel */
.dock .eye__glint{fill:var(--steel)}
.eye__iris{transition:transform .18s var(--ease)}

/* ---- 01 · The packages: the flagship on the left, the two others stacked at its right ---- */
.section--pk{background:radial-gradient(50% 40% at 12% 0%,rgb(122 137 148 / .16),transparent 70%),radial-gradient(40% 40% at 100% 100%,rgb(122 137 148 / .1),transparent 70%),var(--snow)}
.pk{display:grid;gap:16px}
.pk__card{position:relative;min-width:0}
.pk__tilt{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--r-card);overflow:hidden;isolation:isolate;
  background:var(--snow);box-shadow:var(--card-edge),var(--card-lift);
  transform:perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transition:transform .6s var(--ease),box-shadow var(--t-fast) var(--ease)}
.pk__card:hover .pk__tilt{box-shadow:inset 0 0 0 1px rgb(35 42 47 / .14),0 30px 64px -30px rgb(35 42 47 / .45)}
/* the light that follows the pointer across a card (transform only) */
.pk__glow{position:absolute;left:0;top:0;z-index:-1;width:480px;height:480px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgb(122 137 148 / .24),rgb(122 137 148 / 0) 64%);
  transform:translate(calc(var(--gx, 0px) - 240px),calc(var(--gy, 0px) - 240px));transition:opacity .4s var(--ease)}
.pk__card.is-lit .pk__glow{opacity:1}
.pk__art{display:grid;place-items:center;margin:0;padding:24px 20px 0}
.pk__art svg{width:100%;height:auto;max-width:340px;overflow:visible}
.pk__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.pk__flag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.pk__star{width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.pk__name{display:flex;flex-wrap:wrap;align-items:center;gap:.14em .24em;margin-top:18px;font:600 clamp(28px,1.2vw + 20px,42px)/1.02 var(--font-sans);letter-spacing:-.02em;color:var(--text-1)}
/* each package's own word in a small capsule of its own colour, centred on the capitals of
   "Adren" and ranked (Alex, 21 Oct 2026: the most striking colour on Enterprise, then
   Supercharged, then All; small, at Apple's finish): the lime, champagne, a steel tint */
.pk__tier{position:relative;display:inline-flex;align-items:center;padding:.36em .7em .38em;border-radius:999px;
  font-size:max(12px,.38em);font-weight:600;line-height:1;letter-spacing:-.012em;white-space:nowrap}
.pk__tier--1{background:var(--signal);color:var(--ink-950);
  box-shadow:inset 0 1px 0 rgb(244 246 246 / .55),inset 0 -1px 0 rgb(107 112 70 / .25),0 8px 24px -8px rgb(200 255 61 / .55)}
.pk__tier--1::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;box-shadow:0 0 18px 2px rgb(200 255 61 / .32);
  opacity:.3;animation:tier-glow 3.6s var(--ease) infinite alternate}
@keyframes tier-glow{to{opacity:.9}}
.pk__tier--2{background:var(--champagne-200);color:var(--moss-700);box-shadow:inset 0 1px 0 rgb(244 246 246 / .5),inset 0 0 0 1px rgb(107 112 70 / .24)}
.pk__tier--3{background:rgb(79 100 114 / .1);color:var(--steel);box-shadow:inset 0 0 0 1px rgb(79 100 114 / .24)}
.pk__line{margin-top:6px;font:500 clamp(22px,.6vw + 18px,30px)/1.12 var(--font-accent);letter-spacing:-.02em;color:var(--accent);text-wrap:balance}
.pk__desc{margin-top:10px;color:var(--text-2)}
.pk__layers{display:grid;margin-top:28px}
.pk__layers li{display:grid;gap:4px;padding:14px 0;box-shadow:inset 0 1px 0 var(--hairline-strong);color:var(--text-2)}
.pk__k{font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pk__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:auto;padding-top:24px}
.pk__terms{display:inline-flex;align-items:center;gap:10px;font:500 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pk__terms::before{content:"";width:16px;height:1px;background:currentColor}
.pk__more{display:inline-flex;align-items:center;gap:12px;height:44px;font:500 15px/1 var(--font-sans);letter-spacing:-.01em;color:var(--text-1)}
.pk__go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--granite);color:var(--snow);transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.pk__go svg{width:14px;height:14px}
.pk__more:hover .pk__go{transform:translateX(3px);background:var(--steel)}

/* the flagship: QJ's night olive, a grid, a sheen that crosses it now and then */
.pk__card--star{--text-1:var(--bone-50);--text-2:rgb(236 232 223 / .68);--text-3:rgb(236 232 223 / .45);
  --hairline:rgb(236 232 223 / .08);--hairline-strong:rgb(236 232 223 / .14);--accent:var(--champagne-200);--focus:var(--signal);color:var(--text-1)}
.pk__card--star .pk__tilt{background:radial-gradient(60% 46% at 50% 24%,rgb(107 112 70 / .42),transparent 72%),linear-gradient(165deg,var(--moss-800),var(--night-900) 55%,var(--ink-950));
  box-shadow:inset 0 0 0 1px rgb(236 232 223 / .08),0 40px 90px -40px rgb(10 11 8 / .9)}
.pk__card--star:hover .pk__tilt{box-shadow:inset 0 0 0 1px rgb(220 226 166 / .22),0 44px 96px -40px rgb(10 11 8 / .95)}
.pk__card--star .pk__tilt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(236 232 223 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(236 232 223 / .035) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:radial-gradient(60% 50% at 50% 26%,var(--granite),transparent 85%);mask-image:radial-gradient(60% 50% at 50% 26%,var(--granite),transparent 85%)}
.pk__card--star .pk__tilt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgb(236 232 223 / 0) 38%,rgb(236 232 223 / .07) 50%,rgb(236 232 223 / 0) 62%);transform:translateX(-110%);animation:sheen 11s var(--ease) 1.5s infinite}
@keyframes sheen{0%{transform:translateX(-110%)}16%,100%{transform:translateX(110%)}}
.pk__card--star .pk__glow{background:radial-gradient(circle,rgb(220 226 166 / .14),rgb(220 226 166 / 0) 64%)}
.pk__card--star .pk__flag{color:var(--champagne-200);background:rgb(220 226 166 / .07);box-shadow:inset 0 0 0 1px rgb(220 226 166 / .3)}
.pk__card--star .pk__name{font-size:clamp(28px,1.2vw + 20px,42px)}
.pk__card--star .pk__line{font-size:clamp(22px,.6vw + 18px,30px)}
.pk__card--star .pk__art{padding-top:28px}
.pk__card--star .pk__art svg{max-width:340px}
.pk__card--star .btn--primary{background:var(--paper);color:var(--ink-950);box-shadow:0 1px 2px rgb(10 11 8 / .4),0 14px 36px -14px rgb(220 226 166 / .4)}
.pk__card--star .btn--primary:hover{background:var(--bone-50)}
.pk__card--star .btn__go{background:rgb(10 11 8 / .08)}

/* the orbit: six nodes, one per department's Shadow, lit in turn, a pulse running in to the eye */
.orbit__ring{fill:none;stroke:rgb(236 232 223 / .1);vector-effect:non-scaling-stroke}
.orbit__ring--dash{stroke:rgb(236 232 223 / .24);stroke-dasharray:2 7;transform-origin:200px 200px;animation:spin 100s linear infinite reverse}
.orbit__ring--core{stroke:rgb(220 226 166 / .32)}
.orbit__spin{transform-origin:200px 200px;animation:spin 72s linear infinite}
.orbit__spoke{fill:none;stroke:rgb(236 232 223 / .12);vector-effect:non-scaling-stroke}
.orbit__node{fill:var(--night-900);stroke:rgb(220 226 166 / .5);stroke-width:1.2;vector-effect:non-scaling-stroke}
.orbit__lit{fill:var(--champagne-200);opacity:.18;transform-box:fill-box;transform-origin:center;animation:lit 6s var(--ease) infinite}
.orbit__pulse{fill:var(--champagne-200);opacity:0;animation:inward 6s var(--ease) infinite}
@keyframes lit{0%,24%,100%{opacity:.18;transform:scale(1)}6%{opacity:1;transform:scale(1.5)}}
@keyframes inward{0%,4%{opacity:0;transform:translateX(0)}10%{opacity:1}30%{opacity:0;transform:translateX(-64px)}100%{opacity:0;transform:translateX(-64px)}}
.orbit__spin>g:nth-child(3) .orbit__pulse,.orbit__spin>g:nth-child(9) .orbit__lit{animation-delay:1s}
.orbit__spin>g:nth-child(4) .orbit__pulse,.orbit__spin>g:nth-child(10) .orbit__lit{animation-delay:2s}
.orbit__spin>g:nth-child(5) .orbit__pulse,.orbit__spin>g:nth-child(11) .orbit__lit{animation-delay:3s}
.orbit__spin>g:nth-child(6) .orbit__pulse,.orbit__spin>g:nth-child(12) .orbit__lit{animation-delay:4s}
.orbit__spin>g:nth-child(7) .orbit__pulse,.orbit__spin>g:nth-child(13) .orbit__lit{animation-delay:5s}
.orbit .eye__lid{fill:var(--bone-50)}
.orbit .eye__iris{fill:rgb(236 232 223 / .5)}
.orbit__glint{fill:var(--champagne-200)}

/* the branches: four, each feeding the one Brief at the centre */
.br__link{fill:none;stroke:rgb(35 42 47 / .22);stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.br__pulse{fill:var(--steel);opacity:0;animation:feed 3.6s var(--ease) infinite}
@keyframes feed{0%{opacity:0;transform:translateX(0)}12%{opacity:1}64%{opacity:1;transform:translateX(86px)}76%,100%{opacity:0;transform:translateX(86px)}}
.br>g:nth-child(2) .br__pulse{animation-delay:.9s}
.br>g:nth-child(3) .br__pulse{animation-delay:1.8s}
.br>g:nth-child(4) .br__pulse{animation-delay:2.7s}
.br__node{fill:var(--snow);stroke:rgb(35 42 47 / .32);vector-effect:non-scaling-stroke}
.br__hub{fill:var(--snow);stroke:var(--steel);stroke-width:1.2;vector-effect:non-scaling-stroke}
.br__ring{fill:none;stroke:var(--steel);transform-box:fill-box;transform-origin:center;opacity:0;animation:ring 3.6s var(--ease) infinite}
@keyframes ring{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}}
.br .eye__lid{fill:var(--granite)}
.br .eye__iris{fill:var(--slate)}
.br__glint{fill:var(--steel)}

/* one system: nine parts in one frame, a light walking through them */
.mod__frame{fill:none;stroke:rgb(35 42 47 / .24);stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.mod__part{fill:rgb(79 100 114 / .1);stroke:rgb(79 100 114 / .38);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:part 4.5s var(--ease) infinite}
.mod__part:nth-child(3),.mod__part:nth-child(5){animation-delay:.5s}
.mod__part:nth-child(4),.mod__part:nth-child(6),.mod__part:nth-child(8){animation-delay:1s}
.mod__part:nth-child(7),.mod__part:nth-child(9){animation-delay:1.5s}
.mod__part:nth-child(10){animation-delay:2s}
@keyframes part{0%,30%,100%{transform:scale(1)}12%{transform:scale(.8)}}
.mod__lit{fill:var(--steel);animation:walk9 9s steps(1,end) infinite}
@keyframes walk9{0%{transform:translate(0,0)}11.1%{transform:translate(34px,0)}22.2%{transform:translate(68px,0)}33.3%{transform:translate(68px,34px)}
  44.4%{transform:translate(34px,34px)}55.5%{transform:translate(0,34px)}66.6%{transform:translate(0,68px)}77.7%{transform:translate(34px,68px)}88.8%{transform:translate(68px,68px)}}

/* off screen, the drawings rest */
.is-off .gaze__dial *,.is-off .gaze__scan::after,.pk__card.is-off *,.pk__card.is-off .pk__tier--1::after{animation-play-state:paused}

@media (min-width:640px){
  .pk__body{padding:24px 28px 28px}
  .pk__card--star .pk__layers{grid-template-columns:repeat(3,1fr);gap:0 20px}
}
@media (min-width:1024px){
  .hero__copy>*{max-width:58%}
  .hero__copy>.gaze{position:absolute;right:calc(-1 * min(2vw,40px));top:50%;width:min(40vw,620px);max-width:none;margin:0;translate:0 -50%}
  .pk{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
  .pk__tilt{min-height:620px}
  .pk__card .pk__art{padding-top:28px}
  .pk__card .pk__art svg,.pk__card--star .pk__art svg{max-width:280px}
  .pk__card--star .pk__layers{grid-template-columns:1fr}
}
@media (min-width:1600px){
  .pk__body{padding:28px 36px 36px}
}