/* ═══════════════════════════════════════════════════════════════════
   THE DOOR KIT — the shared AQTHEVISION style (home, about, pricing, contact).
   Rules inherited from door.css and kept without exception:
   six colours · Kufam only · Fibonacci sizes · the five shapes
   (belt, cartouche, roundel, lamp, rail) · no photo, no Kaaba drawing,
   no calligraphy · no gradients, no shadows, no blue.
   Every interaction swaps between palette colours or moves a shape;
   nothing is tinted, blurred or faded into an off-palette colour.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Kufam';src:url('/fonts/Kufam-Regular.ttf?v=2026-10-12a') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Kufam';src:url('/fonts/Kufam-Bold.ttf?v=2026-10-12a') format('truetype');font-weight:600 700;font-display:swap}

:root{--black:#000000;--raised:#151515;--gold:#D4990C;--silver:#E9E9E9;--grey:#909090;--green:#009059;
  --ease:cubic-bezier(.22,1,.36,1);color-scheme:dark;
  /* the AQVELA widget reads these names (from aq.css); here they speak the six colours */
  --bg:#000000;--bg-2:#151515;--bg-3:#151515;--text:#E9E9E9;--text-2:#909090;--text-3:#909090;
  --line:#151515;--line-soft:#151515;--line-hover:#D4990C;--gold-04:#151515;--gold-12:#151515;--gold-20:#D4990C;--gold-25:#D4990C;
  --font-body:'Kufam','Century Gothic',sans-serif;--font-display:var(--font-body);--font-mono:var(--font-body)}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;background:var(--black);color:var(--silver);font-family:'Kufam','Century Gothic','Avenir Next',sans-serif;
  font-size:21px;line-height:34px;font-synthesis:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0;font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--black);padding:8px 13px;z-index:20}
.skip:focus{left:8px}
.col{max-width:987px;margin:0 auto;padding:0 21px;position:relative}
.k13{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.grey{color:var(--grey)}.gold{color:var(--gold)}
.dot-g::after{content:".";color:var(--gold)}

/* ── the diamond field: a lattice that answers the pointer (canvas, palette only) ── */
.field{position:fixed;inset:0;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}

/* ── 1. BELT ── */
.belt{position:relative;background:var(--black);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}
.belt::before{content:"";position:absolute;left:0;right:0;top:5px;bottom:5px;border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);pointer-events:none}
.belt>*{position:relative}

/* header belt */
.top{position:sticky;top:0;z-index:10;transition:transform .55s var(--ease)}
.top.away{transform:translateY(-110%)}
.top .col{min-height:89px;display:flex;align-items:center;justify-content:space-between;gap:21px}
.mark{display:flex;align-items:center;text-decoration:none}
.aq-wordmark{height:16px;width:auto;display:block}
.aq-wordmark rect,.aq-wordmark polygon{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s var(--ease)}
.mark:hover .aq-wordmark rect,.mark:hover .aq-wordmark polygon,.mark:focus-visible .aq-wordmark rect,
.mark:focus-visible .aq-wordmark polygon{transform:scaleY(1.35)}
.aq-wordmark :nth-child(3n){transition-delay:.04s}.aq-wordmark :nth-child(3n+1){transition-delay:.08s}
.aq-wordmark :nth-child(7n){transition-delay:.12s}
.d-wordmark{display:flex;justify-content:center;margin:0 0 34px;cursor:default}
.d-wordmark .aq-wordmark{height:55px}
@media(max-width:700px){.d-wordmark .aq-wordmark{height:34px}}
nav.links{display:flex;align-items:center;gap:13px}

/* ── 2. CARTOUCHE — rectangle whose ends come to a point ── */
.cart{--p:13px;position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:55px;
  padding:0 34px;background:var(--gold);color:var(--silver);font-size:13px;line-height:21px;font-weight:600;
  text-decoration:none;border:0;cursor:pointer;font-family:inherit;isolation:isolate;
  clip-path:polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 50%,calc(100% - var(--p)) 100%,var(--p) 100%,0 50%);
  transition:color .35s var(--ease),transform .25s var(--ease)}
/* the black face: on hover it parts from the centre and the gold behind it shows — solid, no tint */
.cart::before{content:"";position:absolute;inset:2px;background:var(--black);clip-path:inherit;z-index:-1;
  transition:transform .45s var(--ease)}
.cart::after{content:"";position:absolute;inset:5px;outline:1px solid var(--gold);clip-path:inherit;z-index:-1;
  transition:outline-color .35s}
.cart:hover,.cart:focus-visible{color:var(--black)}
.cart:hover::before,.cart:focus-visible::before{transform:scaleX(0)}
.cart:hover::after,.cart:focus-visible::after{outline-color:var(--black)}
/* the one filled cartouche: gold face, black words; on hover it turns to night */
.cart.fill{color:var(--black)}
.cart.fill::before{background:var(--gold);transform:none}
.cart.fill::after{outline-color:var(--black)}
.cart.fill:hover,.cart.fill:focus-visible{color:var(--gold)}
.cart.fill:hover::before,.cart.fill:focus-visible::before{background:var(--black)}
.cart.fill:hover::after,.cart.fill:focus-visible::after{outline-color:var(--gold)}
.cart.big{min-height:89px;padding:0 55px;font-size:21px;--p:21px}

/* framed cartouche (cards): gold base · face · gold line · face, stacked clipped layers */
.frame{--p:21px;background:var(--gold);padding:2px;clip-path:polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 50%,calc(100% - var(--p)) 100%,var(--p) 100%,0 50%)}
.frame>.f1{background:var(--raised);clip-path:inherit;padding:3px;height:100%}
.frame>.f1>.f2{background:var(--gold);clip-path:inherit;padding:1px;height:100%}
.frame>.f1>.f2>.f3{background:var(--raised);clip-path:inherit;height:100%;transition:background .45s var(--ease),color .45s var(--ease)}
.frame.p55{--p:55px}

/* ── 3. ROUNDEL + 4. LAMP ── */
.round{--d:144px;width:var(--d);height:var(--d);border-radius:50%;background:var(--gold);padding:2px;flex:none;position:relative}
.round>i{display:block;border-radius:50%;background:var(--black);padding:3px;height:100%}
.round>i>i{display:block;border-radius:50%;background:var(--gold);padding:1px;height:100%}
.round>i>i>span{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;
  background:var(--black);height:100%;padding:13px;font-size:13px;line-height:21px;font-weight:600;color:var(--silver);
  transition:background .45s var(--ease),color .45s var(--ease)}
.lamp::before{content:"";position:absolute;top:-8px;left:50%;width:8px;height:8px;margin-left:-4px;background:var(--gold);
  transform:rotate(45deg);transition:transform .6s var(--ease)}

/* ── 5. RAIL — the vertical chain (decorative) ── */
.rail{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;background-repeat:repeat-y;background-size:34px 194px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='194'%3E%3Cg fill='none' stroke='%23D4990C'%3E%3Cpath d='M4 13 L17 2 L30 13 L30 133 L17 144 L4 133 Z' stroke-width='2'/%3E%3Cpath d='M7 16 L17 7 L27 16 L27 130 L17 138 L7 130 Z' stroke-width='1'/%3E%3Ccircle cx='17' cy='169' r='16' stroke-width='2'/%3E%3Ccircle cx='17' cy='169' r='12' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E")}
.rail.l{left:calc(50% - 493px - 89px)}.rail.r{right:calc(50% - 493px - 89px)}

/* diamond divider */
.diams{display:flex;justify-content:center;gap:21px;padding:55px 0}
.diams i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);transition:transform .6s var(--ease)}
.diams:hover i{transform:rotate(225deg)}

/* ── words: headlines arrive word by word and answer the pointer ── */
.w{display:inline-block;transition:color .3s var(--ease),transform .35s var(--ease)}
.js .split .w{transform:translateY(34px);opacity:0}
.js .split.in .w{transform:none;opacity:1;transition:transform .9s var(--ease) var(--wd,0s),opacity .9s var(--ease) var(--wd,0s),color .3s}
.split.done .w{transition:color .3s var(--ease),transform .35s var(--ease)}
.split.done .w:hover{color:var(--gold);transform:translateY(-5px)}
.js .rise{transform:translateY(34px);opacity:0}
.js .rise.in{transform:none;opacity:1;transition:transform .9s var(--ease) var(--rd,0s),opacity .9s var(--ease) var(--rd,0s)}

/* ── sections ── */
section{padding:144px 0 0}
.h2{font-size:55px;line-height:55px;color:var(--silver);margin:13px 0 21px}
.intro{color:var(--grey);max-width:610px}

/* the door (first section) */
.door{padding-top:89px}
.telem{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;line-height:21px;font-weight:600;
  color:var(--grey);letter-spacing:.13em;text-transform:uppercase}
.telem i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.door .frame{margin-top:34px}
.door .f3{padding:89px 89px;text-align:center;min-height:377px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.door h1,.door h2.hero-h1{font-size:89px;line-height:89px;color:var(--silver);margin:21px 0 34px}
.door .lede{color:var(--grey);max-width:610px;font-size:21px;line-height:34px}
.acts{display:flex;align-items:center;justify-content:center;gap:21px;flex-wrap:wrap;margin-top:55px}
/* the live demo, inside the door */
.demo{margin:34px auto 0;max-width:610px;width:100%}
.demo-row{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:13px}
.demo-row .dk-input{flex:1 1 233px;width:auto;font-size:13px;font-weight:600}
.demo-row select.dk-input{flex:0 1 233px;cursor:pointer}
.demo-note{margin-top:13px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.textlink{font-size:13px;font-weight:600;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold);transition:color .3s,border-color .3s}
.textlink:hover{color:var(--silver);border-color:var(--silver)}

/* the moving belt: our own words, circling */
.band{margin-top:89px;overflow:hidden}
.band .track{display:flex;width:max-content;min-height:89px;align-items:center;will-change:transform}
.band span{display:flex;align-items:center;gap:34px;padding-right:34px;font-size:21px;white-space:nowrap;color:var(--silver)}
.band span i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex:none}

/* signs: four lamps you can light */
.lamps{display:flex;justify-content:space-between;gap:34px;margin-top:55px}
.lamps button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center}
.lamps button:hover .round>i>i>span,.lamps button[aria-pressed=true] .round>i>i>span{background:var(--gold);color:var(--black)}
.lamps button:hover .lamp::before,.lamps button[aria-pressed=true] .lamp::before{transform:rotate(225deg)}
.answer{margin-top:55px;min-height:233px}
.answer .f3{padding:34px 55px}
.answer h3{font-size:34px;line-height:34px;color:var(--gold);margin-bottom:13px}
.answer p{color:var(--silver)}
.answer .src{display:block;margin-top:13px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.answer .f3>div{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.answer .f3>div.swap{opacity:0;transform:translateY(8px)}
.count{margin-top:34px;text-align:center;color:var(--grey)}

/* two paths */
.paths{display:grid;grid-template-columns:1fr 89px 1fr;align-items:stretch;gap:21px;margin-top:55px}
.path{cursor:pointer;border:0;text-align:left;font:inherit;color:inherit}
.path .f1,.path .f2{display:block}
.path .f3{padding:55px 55px;min-height:377px}
.path .pt{display:block;font-size:34px;line-height:34px;color:var(--silver);margin-bottom:21px;transition:color .45s}
.path .pd{display:block;color:var(--grey);transition:color .45s}
.paths.lean-a .path.a .f3,.paths.lean-b .path.b .f3{background:var(--black)}
.paths.lean-a .path.a .pt,.paths.lean-b .path.b .pt{color:var(--gold)}
.paths.lean-a .path.a .pd,.paths.lean-b .path.b .pd{color:var(--silver)}
.paths .mid{display:flex;align-items:center;justify-content:center}
.paths .mid .round{--d:89px}
.paths .mid .round span{font-size:13px}
.verdict{margin-top:55px;text-align:center;font-size:34px;line-height:55px;color:var(--silver)}

/* the guide: three moves down a rail; a gold line fills as you read */
.moves{position:relative;margin-top:55px;padding-left:144px}
.moves .line{position:absolute;left:55px;top:0;bottom:0;width:2px;background:var(--raised)}
.moves .line b{display:block;width:2px;height:0;background:var(--gold)}
.move{position:relative;padding:0 0 89px}
.move .round{--d:55px;position:absolute;left:-116px;top:-8px}
.move .round span{font-size:13px}
.move.lit .round>i>i>span{background:var(--gold);color:var(--black)}
.move h3{font-size:34px;line-height:34px;color:var(--silver);margin:8px 0 13px}
.move p{color:var(--grey);max-width:610px}

/* the crew */
.groups{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.groups .cart[aria-pressed=true]{color:var(--black)}
.groups .cart[aria-pressed=true]::before{transform:scaleX(0)}
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(233px,1fr));gap:13px;margin-top:34px}
.agent{--p:13px;min-height:89px;transition:transform .35s var(--ease)}
.agent .f3{display:flex;flex-direction:column;justify-content:center;padding:13px 34px}
.agent b{font-weight:600;font-size:21px;letter-spacing:.06em;color:var(--silver);transition:color .35s}
.agent small{font-size:13px;line-height:21px;font-weight:600;color:var(--grey);transition:color .35s}
.agent:hover .f3{background:var(--gold)}
.agent:hover b,.agent:hover small{color:var(--black)}
.agent.off{display:none}
.agent .tier{font-size:13px;color:var(--gold)}
.agent:hover .tier{color:var(--black)}

/* the measure */
.measure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:55px}
.price .f3{padding:34px 34px;min-height:377px;display:flex;flex-direction:column}
.price h3{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.price .amt{font-size:55px;line-height:55px;color:var(--silver);margin:21px 0 8px}
.price .amt small{display:block;margin-top:8px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.price .amt.words{font-size:21px;line-height:34px;color:var(--silver)}
.price .f3{overflow-wrap:anywhere}
.price ul{list-style:none;margin:13px 0 34px;padding:0;font-size:13px;line-height:21px;font-weight:600;color:var(--grey);flex:1}
.price li{padding:8px 0;border-bottom:1px solid var(--raised)}
.price li:last-child{border:0}
.price .cart{align-self:flex-start}

/* the covenant: the line you are reading lights up */
.covenant{margin-top:55px}
.oath{padding:34px 0;border-top:1px solid var(--raised);display:grid;grid-template-columns:55px 1fr;gap:21px;align-items:start}
.oath:last-child{border-bottom:1px solid var(--raised)}
.oath i{width:13px;height:13px;margin-top:11px;background:var(--raised);transform:rotate(45deg);transition:background .45s,transform .6s var(--ease)}
.oath p{font-size:34px;line-height:55px;color:var(--grey);transition:color .45s var(--ease)}
.oath p small{display:block;font-size:21px;line-height:34px;color:var(--grey)}
.oath.read i{background:var(--gold);transform:rotate(225deg)}
.oath.read p{color:var(--silver)}

/* the return */
.return{padding-bottom:144px}
.return .f3{padding:89px 55px;text-align:center;display:flex;flex-direction:column;align-items:center}
.return h2{font-size:89px;line-height:89px;color:var(--silver);margin:21px 0 34px}

/* footer belt */
.foot .col{min-height:144px;display:flex;align-items:center;justify-content:space-between;gap:21px;flex-wrap:wrap}
.foot nav{display:flex;gap:21px;flex-wrap:wrap}
.foot a{font-size:13px;font-weight:600;color:var(--grey);text-decoration:none;transition:color .3s}
.foot a:hover{color:var(--gold)}
.foot p{font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}

/* ── the site chrome (stamped by scripts/site-chrome.js — style only, never hand-edit the markup) ── */
.top .nav{max-width:987px;margin:0 auto;padding:0 21px;min-height:89px;display:flex;align-items:center;justify-content:space-between;gap:21px}
.nav-logo{color:var(--gold);font-size:21px;line-height:34px;letter-spacing:.13em;text-decoration:none;font-weight:600;white-space:nowrap}
.nav-logo:hover{color:var(--silver)}
/* the lamp beside the wordmark (a header marked .lamp-head, with assets/aq-eye.js): room is kept
   for it so nothing moves when it lights; 34 is the Door's small roundel */
.lamp-head .nav-logo{position:relative;padding-left:55px}
.lamp-head .nav-lamp{position:absolute;left:0;top:50%;width:34px;margin-top:-20px}
.nav-lamp svg{display:block;width:100%;height:auto;overflow:visible}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{--p:13px;position:relative;display:inline-flex;align-items:center;min-height:55px;padding:0 21px;background:var(--gold);
  color:var(--silver);font-size:13px;line-height:21px;font-weight:600;text-decoration:none;isolation:isolate;
  clip-path:polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 50%,calc(100% - var(--p)) 100%,var(--p) 100%,0 50%);transition:color .35s var(--ease)}
.nav-links a::before{content:"";position:absolute;inset:2px;background:var(--black);clip-path:inherit;z-index:-1;transition:transform .45s var(--ease)}
.nav-links a::after{content:"";position:absolute;inset:5px;outline:1px solid var(--gold);clip-path:inherit;z-index:-1;transition:outline-color .35s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--black)}
.nav-links a:hover::before,.nav-links a:focus-visible::before{transform:scaleX(0)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{outline-color:var(--black)}
.nav-links a[aria-current=page]{color:var(--gold)}
/* the last cartouche (Sign in) is the filled one */
.nav-links a:last-child{color:var(--black)}
.nav-links a:last-child::before{background:var(--gold);transform:none}
.nav-links a:last-child::after{outline-color:var(--black)}
.nav-links a:last-child:hover,.nav-links a:last-child:focus-visible{color:var(--gold)}
.nav-links a:last-child:hover::before,.nav-links a:last-child:focus-visible::before{background:var(--black)}
.nav-links a:last-child:hover::after,.nav-links a:last-child:focus-visible::after{outline-color:var(--gold)}
.ham{display:none;width:55px;height:55px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.ham span{display:block;width:21px;height:2px;background:var(--gold);transition:transform .35s var(--ease),opacity .35s}
.drawer-open .ham span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.drawer-open .ham span:nth-child(2){opacity:0}
.drawer-open .ham span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;left:0;right:0;top:93px;z-index:9;background:var(--black);border-bottom:2px solid var(--gold);
  display:flex;flex-direction:column;padding:21px;gap:8px;transform:translateY(-120%);transition:transform .55s var(--ease)}
.drawer[hidden]{display:none}
.drawer-open .drawer{transform:none}
.drawer a{font-size:34px;line-height:55px;color:var(--silver);text-decoration:none;border-bottom:1px solid var(--raised)}
.drawer a:hover,.drawer a.gold{color:var(--gold)}
.drawer a[aria-current=page]{color:var(--gold)}

/* footer belt with the four columns */
.foot .col{min-height:0;display:block;padding:55px 21px}
.foot-top{display:flex;justify-content:space-between;gap:55px;flex-wrap:wrap}
.foot-brand .nav-logo{display:inline-block;margin-bottom:13px}
.foot-brand p{font-size:13px;line-height:21px;font-weight:600;color:var(--grey);max-width:233px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;flex:1;max-width:610px}
.foot-cols>div{display:flex;flex-direction:column;gap:8px}
.foot-cols .caption{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.foot-cols a{font-size:13px;line-height:21px;font-weight:600;color:var(--grey);text-decoration:none;transition:color .3s}
.foot-cols a:hover{color:var(--silver)}
.foot-bar{margin-top:55px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}

/* the AQVELA widget hard-codes the old gold eye, a white field tint and the browser's white button text;
   on Door pages it speaks the six colours too (the widget file itself stays shared and unchanged) */
button{color:var(--silver)}
[class^="aqv-"] svg path[stroke]{stroke:var(--gold)}
[class^="aqv-"] svg circle[fill="#C9A84C"]{fill:var(--gold)}
[class^="aqv-"] svg circle[fill="#12110F"]{fill:var(--black)}
body .aqv-row input{background:var(--black)}

/* questions: each one opens like a door; the diamond turns */
.faq{margin-top:55px}
.faq details{border-top:1px solid var(--raised)}
.faq details:last-child{border-bottom:1px solid var(--raised)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:center;padding:34px 0;
  font-size:34px;line-height:55px;color:var(--silver);transition:color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:13px;height:13px;background:var(--gold);transform:rotate(45deg);transition:transform .6s var(--ease)}
.faq summary:hover{color:var(--gold)}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::before{transform:rotate(225deg)}
.faq details p{padding:0 0 34px 47px;color:var(--grey);max-width:657px}

/* inner pages: a page head, prose, and plain fields in the Door's hand */
.page-head{padding-top:89px}
.page-head h1{font-size:89px;line-height:89px;color:var(--silver);margin:13px 0 34px}
.page-head .lede{color:var(--grey);max-width:610px}
.prose{max-width:657px;color:var(--grey)}
.prose p+p{margin-top:21px}
.prose strong,.prose b{color:var(--silver);font-weight:400}
.prose h2{font-size:34px;line-height:55px;color:var(--silver);margin:55px 0 13px}
.field-row{display:flex;flex-direction:column;gap:8px;margin-bottom:21px}
.field-row label{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.dk-input{width:100%;background:var(--black);border:1px solid var(--gold);border-radius:0;color:var(--silver);
  font:inherit;font-size:21px;line-height:34px;min-height:55px;padding:8px 21px;transition:border-color .3s}
.dk-input::placeholder{color:var(--grey)}
.dk-input:hover{border-color:var(--silver)}
textarea.dk-input{min-height:144px;resize:vertical}

/* about: the story reads slowly; pull lines sit in a cartouche */
.story h1{max-width:610px}
.story .prose{margin-top:34px}
.pull{margin:55px 0}
.pull .f3{padding:34px 89px;text-align:center}
.pull p{font-size:34px;line-height:55px;color:var(--silver)}
.fine{font-size:13px;line-height:21px;font-weight:600}
.acts.left{justify-content:flex-start;margin-top:34px}
.refrain{margin-top:55px;color:var(--grey);font-size:21px}
.refrain::before{content:"";display:inline-block;width:8px;height:8px;margin-right:13px;background:var(--gold);transform:rotate(45deg);vertical-align:middle}

/* pricing */
.price .pname{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.price .psub{font-size:13px;line-height:21px;font-weight:600;color:var(--grey);margin-top:5px}
.price .amt .per{display:block;margin-top:8px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.price .tag{align-self:flex-start;font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;color:var(--black);
  background:var(--gold);padding:0 13px;margin-bottom:13px}
.price .textlink{align-self:flex-start;margin-top:13px}
.price.here .f3{background:var(--black)}
.aside{margin-top:34px;text-align:center;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.table-scroll{overflow-x:auto;margin-top:34px;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}
.compare{width:100%;border-collapse:collapse;min-width:610px}
.compare th{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);text-align:left;padding:21px 13px}
.compare td{padding:13px;border-top:1px solid var(--raised);font-size:21px;line-height:34px;color:var(--silver);transition:background .3s,color .3s}
.compare td.yes{color:var(--gold)}
.compare td.no{color:var(--grey)}
.compare tbody tr:hover td{background:var(--raised)}

/* contact */
.back{display:inline-block;margin-bottom:34px}
.back::before{content:"\2190  "}
.contact-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:55px;align-items:start;margin-top:55px}
.contact-card .f3{padding:55px}
.contact-card .cart{width:100%}
.contact-note{color:var(--grey)}
.notice h4{margin:0 0 8px;font-size:34px;line-height:55px;font-weight:400;color:var(--gold)}
.notice p{color:var(--silver)}
.field-error{margin-bottom:21px;padding:13px 21px;border:1px solid var(--gold);color:var(--gold);font-size:13px;line-height:21px;font-weight:600}

/* ── the platform home (2026-10-23): ask, technology, brains, holds ──
   Same six colours, same five shapes. A status is a fact about where a thing
   runs today: green lamp = you can open it now; grey diamond = coming soon. */

/* the ask: the door holds AQ Chat's first question */
.ask{margin:55px auto 0;max-width:610px;width:100%}
.ask-row{display:flex;gap:13px;flex-wrap:wrap;justify-content:center}
.ask-row .dk-input{flex:1 1 377px;width:auto;min-height:89px;padding:13px 21px}
.ask-row .cart{min-height:89px}
/* the great eye in the door: it watches the visitor, works while AQ writes, lights when the answer lands */
.hero-eye{display:block;width:89px;margin:0 auto 21px}
.hero-eye svg{display:block;width:100%;height:auto;overflow:visible}
/* the language the headline speaks, on its own line so the page never jumps when it changes */
.door .hero-h1{font-size:55px;line-height:55px;margin:13px 0 0}
.hero-h1 .cycle{display:block;color:var(--gold);font-size:89px;line-height:89px;min-height:89px;margin:8px 0 21px;
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.hero-h1 .cycle::after{content:".";color:var(--silver)}
.door{padding-top:55px}
.door .f3{padding:55px 89px}
.hero-h1 .cycle.out{transform:translateY(-21px);opacity:0}
.hero-h1 .cycle.pre{transform:translateY(21px);opacity:0;transition:none}
@media(max-width:700px){
  .door .hero-h1{font-size:34px;line-height:34px}
  .hero-h1 .cycle{font-size:55px;line-height:55px;min-height:55px}
  .hero-eye{width:55px}
}

.chips-label{margin-top:21px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
@media(max-width:700px){.chips{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 13px;background:var(--black);border:1px solid var(--raised);
  color:var(--silver);font:inherit;font-size:13px;line-height:21px;font-weight:600;cursor:pointer;text-align:left;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.chip:hover,.chip:focus-visible{border-color:var(--gold);color:var(--gold)}
.chip-lang{color:var(--gold);letter-spacing:.13em;text-transform:uppercase}
.chip:hover .chip-lang,.chip:focus-visible .chip-lang{color:var(--silver)}

/* the live answer: what AQ just wrote, in the door */
.live{--p:21px;margin:34px auto 0;max-width:777px;width:100%;min-width:0;text-align:left}
.live .f1,.live .f2,.live .f3,.live-out{min-width:0;max-width:100%}
.door .live .f3{display:block;min-height:0;padding:34px 55px;text-align:left}
.live-q{color:var(--silver);margin:5px 0 13px}
.live-status{min-height:21px;font-size:13px;line-height:21px;font-weight:600;color:var(--green)}
.live-out{margin-top:13px;color:var(--silver);white-space:pre-wrap;overflow-wrap:anywhere;max-height:610px;overflow-y:auto}
.live-out.is-error{color:var(--gold)}
.live-out p+p,.live-out p+ul,.live-out ul+p,.live-out p+ol,.live-out ol+p,.live-out pre{margin-top:13px}
.live-out ul,.live-out ol{margin:0;padding-left:21px}
.live-out code{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--gold)}
.live-out pre{background:var(--black);border:1px solid var(--raised);padding:13px 21px;overflow-x:auto;white-space:pre;line-height:21px}
.live-out pre code{color:var(--silver)}
.live-out a{color:var(--gold)}
.live-out.is-rendered{white-space:normal}
.live-out.is-rendered pre{white-space:pre}
.live-acts{display:flex;gap:21px;flex-wrap:wrap;margin-top:21px}
.live-stop{background:none;border:0;border-bottom:1px solid var(--gold);padding:0;cursor:pointer;font-family:inherit}
.pillar-more{margin-top:13px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the loop: a cinematic band between the door and the technology */
.loop-stage{margin-top:34px;background:var(--black);overflow:hidden}
.loop-video{display:block;width:100%;max-width:1597px;height:auto;aspect-ratio:16/9;margin:0 auto;background:var(--black);object-fit:cover}
.loop-cta{margin-top:26px;text-align:center}
.loop-note{margin-top:21px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
/* restored 2026-10-25: deployed from the other computer as 1feeb6e, dropped by 5d08556 */
/* no shadows: the launcher, its bubble and the panel stand on their own rules, and the live mic says so in gold, not in
   a pulsing glow (body + class outranks the widget's own sheet, which is adopted after this one) */
body .aqv-launch,body .aqv-bubble,body .aqv-panel{box-shadow:none}
body .aqv-row button.aqv-live{animation:none}
/* the open panel: its hint in the Door's grey, its close button in the Door's face (a button does not inherit it) */
body .aqv-row input::placeholder{color:var(--grey);opacity:1}
body .aqv-head .aqv-x{font-family:inherit}
/* the panel is a <section>: the page sections' 144px top padding must not push its head down */
body .aqv-panel{padding:0}
/* the AQ Team films: a tab per employee over one player */
.film-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.film-tabs [role="tab"]{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(212,153,12,.45);background:var(--raised);color:var(--silver);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:background .2s,color .2s}
.film-tabs [role="tab"]:hover{border-color:var(--gold)}
.film-tabs [role="tab"][aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--black)}
.film-tabs [role="tab"]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the pillars: one collage card at a time on a dotted stage, turning like a gallery */
.pillars-stage{position:relative;padding:72px 16px 55px;background:var(--raised);background-image:radial-gradient(rgba(212,153,12,.26) 1px,transparent 1.3px);background-size:21px 21px;border-block:1px solid rgba(212,153,12,.35)}
.pst-track{display:grid;max-width:440px;margin:0 auto}
.pst-slide{grid-area:1/1;margin:0;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .9s ease,transform .9s ease;pointer-events:none}
.pst-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.pst-slide img{display:block;width:100%;height:auto;aspect-ratio:4/5;background:var(--black)}
.pst-slide figcaption{display:block;background:var(--black);border-top:2px solid var(--gold);padding:18px 21px 21px}
.pst-k{display:block;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.pst-c{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--grey)}
.pst-t{display:block;margin-top:8px;font-size:28px;line-height:34px;color:var(--silver)}
.pst-s{display:block;margin-top:8px;font-size:15px;line-height:23px;color:var(--grey)}
.pst-ctl{display:flex;align-items:center;justify-content:space-between;max-width:440px;margin:21px auto 0}
.pst-dots{display:flex;flex-wrap:wrap;gap:0}
.pst-dots button{display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;background:none;cursor:pointer}
@media (min-width:520px){.pst-dots button{width:44px}}
.pst-dots button::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--grey);transition:background .2s,transform .2s}
.pst-dots button[aria-current="true"]::before{background:var(--gold);transform:rotate(45deg) scale(1.3)}
.pst-dots button:focus-visible,.more-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (min-width:900px){.pst-track,.pst-ctl{max-width:500px}.pst-t{font-size:32px;line-height:40px}}
/* learn more: four doors, each an engraving */
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:21px;margin-top:21px}
.more-card{display:block;color:inherit;text-decoration:none}
.more-tag{display:inline-block;margin-bottom:12px;padding:4px 10px;border:1px solid rgba(212,153,12,.5);border-radius:999px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.more-img{display:block;overflow:hidden;background:var(--black)}
.more-img img{display:block;width:100%;height:auto;aspect-ratio:4/5;transition:transform .6s ease}
.more-card:hover .more-img img{transform:scale(1.03)}
.more-t{display:block;margin-top:14px;font-size:21px;line-height:27px;font-weight:700;color:var(--silver)}
.more-s{display:block;margin-top:6px;font-size:14px;line-height:21px;color:var(--grey)}
@media (max-width:900px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.more-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pst-slide,.more-img img{transition:none}}

/* status: where a technology runs today */
.state{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.state::before{content:"";width:8px;height:8px;flex:none}
.state.now{color:var(--silver)}.state.now::before{border-radius:50%;background:var(--green)}
.state.soon{color:var(--grey)}.state.soon::before{background:var(--grey);transform:rotate(45deg)}

/* the three pillars, in the order they reach people */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:55px}
.pillar .f3{padding:34px;min-height:610px;display:flex;flex-direction:column;align-items:flex-start}
.pillar img{display:block;width:144px;height:144px;margin:0 auto 34px;align-self:center;animation:aq-float 6.5s var(--ease) infinite}
.pillar:nth-child(2) img{animation-delay:-2.2s}.pillar:nth-child(3) img{animation-delay:-4.4s}
.pillar:hover img{animation-duration:1.6s}
@keyframes aq-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-13px) rotate(-3deg)}}
.pillar .when{font-size:13px;line-height:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.pillar h3{font-size:34px;line-height:34px;color:var(--silver);margin:13px 0 13px}
.pillar .desc{color:var(--grey);flex:1}
.pillar .state{margin:21px 0}
.pillar .cart,.pillar .textlink{align-self:flex-start}

/* also from AQ: one line each */
.also{margin:55px 0 0;padding:0;list-style:none;border-top:2px solid var(--gold)}
.also a,.also div.row{display:grid;grid-template-columns:233px 1fr auto;gap:21px;align-items:center;padding:21px 0;
  border-bottom:1px solid var(--raised);text-decoration:none;color:inherit;transition:background .3s}
.also a:hover{background:var(--raised)}
.also b{font-weight:600;font-size:21px;letter-spacing:.06em;color:var(--silver)}
.also span.what{color:var(--grey)}

/* the brains: a measured table, with how it was measured beside it */
.brains .note{margin-top:21px;max-width:657px;font-size:13px;line-height:21px;font-weight:600;color:var(--grey)}
.compare td.num{font-variant-numeric:tabular-nums}
/* a measured score fills its bar as the table comes into view; full at once without motion or script */
.bar{display:block;width:89px;height:5px;margin-top:5px;background:var(--raised)}
.bar i{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--gold)}
.js .table-scroll.rise .bar i{width:0;transition:width 1.4s var(--ease) .3s}
.js .table-scroll.rise.in .bar i{width:calc(var(--v) * 100%)}
@media (prefers-reduced-motion:reduce){.js .table-scroll.rise .bar i{width:calc(var(--v) * 100%)}}

/* what AQ holds to: three facts, each one provable */
.holds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:55px}
.hold{border-top:2px solid var(--gold);padding-top:21px}
.hold h3{font-size:21px;line-height:34px;color:var(--silver);margin-bottom:8px}
.hold p{color:var(--grey);font-size:13px;line-height:21px;font-weight:600}

@media(max-width:900px){
  .pillars{grid-template-columns:1fr}
  .pillar .f3{min-height:0}
  .holds{grid-template-columns:1fr}
}
@media(max-width:700px){
  .door .live{--p:8px}
  .door .live .f3{padding:21px 13px}
  .live-q,.live-out{font-size:17px;line-height:27px}
  .ask-row .dk-input,.ask-row .cart{min-height:55px}
  .ask-row .cart{flex:1 1 100%}
  .also a,.also div.row{grid-template-columns:1fr;gap:5px}
  .pillar .f3{padding:34px 21px}
}

/* ── smaller screens ── */
@media(max-width:1180px){.rail{display:none}}
@media(max-width:1100px){.nav-links{display:none}.ham{display:flex}}
@media(max-width:900px){
  .measure{grid-template-columns:1fr 1fr}
  .paths{grid-template-columns:1fr}
  .paths .mid{order:0}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .foot-cols{grid-template-columns:1fr 1fr}
  .page-head h1{font-size:55px;line-height:55px}
  .faq summary{font-size:21px;line-height:34px;padding:21px 0}
  .faq details p{padding-left:47px}
  .drawer a{font-size:21px;line-height:55px}
  .pull .f3{padding:34px 34px}
  .pull p{font-size:21px;line-height:34px}
  .contact-card .f3{padding:34px 21px}
  section{padding-top:89px}
  .door h1,.return h2{font-size:55px;line-height:55px}
  .h2{font-size:34px;line-height:34px}
  .door .f3,.return .f3{padding:55px 21px}
  .frame.p55{--p:21px}
  .lamps{display:grid;grid-template-columns:144px 144px;justify-content:center;gap:34px}
  .answer .f3{padding:34px 34px}
  .path .f3{padding:34px 34px;min-height:0}
  .measure{grid-template-columns:1fr}
  .moves{padding-left:89px}.moves .line{left:27px}.move .round{left:-89px}
  .oath p{font-size:21px;line-height:34px}.oath p small{font-size:13px;line-height:21px}
  .verdict{font-size:21px;line-height:34px}
}

/* ── stillness: reduced motion keeps every word visible and every shape still ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .split .w,.rise{transform:none;opacity:1}
  .field{display:none}
}
@media print{.split .w,.rise{transform:none;opacity:1}.field,.top{display:none}}

/* the inventions: twelve leaps in order, then the next one */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 21px;margin:34px 0 0;padding:0;list-style:none}
.inv-card{display:block}
.inv-img{position:relative;display:block;overflow:hidden;background:var(--black)}
.inv-img img{display:block;width:100%;height:auto;aspect-ratio:4/5;transition:transform .6s ease}
.inv-card:hover .inv-img img{transform:scale(1.03)}
.inv-year{display:inline-block;padding:5px 10px;background:var(--black);border:1px solid rgba(212,153,12,.6);font-size:12px;line-height:14px;font-weight:700;letter-spacing:.06em;color:var(--gold)}
.inv-img .inv-year{position:absolute;left:12px;top:12px}
.inv-t{display:block;margin-top:14px;font-size:21px;line-height:27px;font-weight:700;color:var(--silver)}
.inv-s{display:block;margin-top:6px;font-size:14px;line-height:21px;color:var(--grey)}
.inv-next{margin-top:55px;padding:34px 0 0;border-top:2px solid var(--gold)}
.inv-next-t{margin:14px 0 0;font-size:40px;line-height:48px;color:var(--silver)}
.inv-next-s{margin:10px 0 0;max-width:640px;font-size:17px;line-height:27px;color:var(--grey)}
.inv-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:21px;padding:0 24px;border-radius:999px;background:var(--gold);color:var(--black);font-weight:700;text-decoration:none}
.inv-cta:hover{background:var(--silver)}
.inv-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:900px){.inv-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.inv-grid{grid-template-columns:repeat(2,1fr);gap:28px 14px}.inv-t{font-size:17px;line-height:23px}.inv-next-t{font-size:30px;line-height:38px}}
@media (prefers-reduced-motion:reduce){.inv-img img{transition:none}}

/* the story: 13.8 billion years on one line, alive under the pointer */
.story-stage{position:relative;overflow:hidden;margin-top:34px;padding:44px 16px 21px;background:var(--black);border-block:1px solid rgba(212,153,12,.35)}
.story-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-card{position:relative;display:grid;grid-template-columns:minmax(0,380px) minmax(0,460px);gap:55px;align-items:center;justify-content:center;max-width:1000px;margin:0 auto;perspective:1000px}
.story-media{position:relative;aspect-ratio:4/5;background:var(--raised);box-shadow:0 34px 89px rgba(0,0,0,.7),0 0 0 1px rgba(212,153,12,.35);transition:transform .25s ease-out;will-change:transform}
.story-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.story-img.on{opacity:1}
.story-eye{position:absolute;inset:0;display:none;place-items:center;background:var(--black)}
.story-media.is-eye .story-eye{display:grid}
.story-media.is-eye .story-img{opacity:0}
.story-date{display:block;font-size:34px;line-height:40px;color:var(--gold)}
.story-title{margin:10px 0 0;font-size:46px;line-height:54px;font-weight:400;color:var(--silver)}
.story-line{margin:12px 0 0;max-width:440px;font-size:18px;line-height:28px;color:var(--grey)}
.story-text .inv-cta{margin-top:21px}
.story-text{position:relative;text-shadow:0 0 10px #000,0 0 22px #000,0 0 34px #000}
.story-phases span:last-child{flex-shrink:0;min-width:max-content;text-align:right}
.story-text [hidden]{visibility:hidden}  /* keeps its place, so the line below never moves under a finger */
.story-phase-now{display:none;margin-bottom:4px;text-align:center;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@media (max-width:820px){.story-text{min-height:290px}}
@media (max-width:620px){.story-phase-now{display:block}.story-phases span{font-size:0;padding-top:6px}.story-phases span:last-child{min-width:0}}
.story-line-wrap{position:relative;max-width:1100px;margin:44px auto 0}
.story-rail{position:relative;height:72px;cursor:ew-resize;touch-action:pan-y;outline:none}
.story-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(212,153,12,.35)}
.story-ticks i{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:rotate(45deg);background:var(--grey);transition:background .3s}
.story-ticks i.past{background:var(--gold)}
.story-marker{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 0 7px rgba(212,153,12,.18);transition:left .3s ease}
.story-rail:focus-visible .story-marker{outline:2px solid var(--silver);outline-offset:5px}
.story-phases{display:flex;gap:4px;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.story-phases span{min-width:0;padding-top:8px;border-top:1px solid rgba(144,144,144,.4);overflow:hidden;white-space:nowrap;text-overflow:clip;transition:color .3s,border-color .3s}
.story-phases span.on{color:var(--gold);border-color:var(--gold)}
.story-ctl{display:flex;justify-content:center;gap:10px;margin-top:21px}
.story-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,153,12,.55);background:var(--black);color:var(--silver);cursor:pointer;font:700 18px/1 system-ui,sans-serif}
.story-ctl button:hover{border-color:var(--gold)}
.story-ctl button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.story.is-live .story-fallback{display:none}
@media (max-width:820px){.story-card{grid-template-columns:1fr;gap:21px;justify-items:center;text-align:center}.story-media{width:min(76vw,340px)}.story-date{font-size:24px;line-height:30px}.story-title{font-size:32px;line-height:40px}.story-line{margin-inline:auto;font-size:16px;line-height:25px}.story-phases{font-size:9px;letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){.story-img,.story-marker,.story-media{transition:none}}

/* the story opens the page; its sign-up is one smooth line, not a box */
.story{padding-top:89px}
.signup-line{display:flex;align-items:center;gap:12px;max-width:520px;margin-top:34px;border-bottom:1px solid rgba(212,153,12,.55);transition:border-color .3s}
.signup-line:focus-within{border-color:var(--gold)}
.signup-input{flex:1;min-width:0;height:54px;padding:0;background:transparent;border:0;outline:0;color:var(--silver);font:inherit;font-size:19px}
.signup-input::placeholder{color:var(--grey)}
.signup-go{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 2px 0 12px;background:none;border:0;color:var(--gold);font:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}
.signup-go::after{content:"\2192";transition:transform .3s var(--ease)}
.signup-go:hover::after{transform:translateX(5px)}
.signup-go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.signup-note{margin-top:12px;font-size:14px;line-height:21px;color:var(--grey)}

/* the ecosystem: every picture and film on the golden-angle spiral, around the AQ eye */
.eco-stage{position:relative;height:min(86vh,820px);min-height:560px;margin-top:34px;overflow:hidden;background:radial-gradient(ellipse at center,#16120a 0%,var(--black) 62%);border-block:1px solid rgba(212,153,12,.35);cursor:grab;touch-action:pan-y}
.eco-stage.dragging{cursor:grabbing}
.eco-arms{position:absolute;inset:0;width:100%;height:100%;display:block}
.eco-core{position:absolute;left:50%;top:50%;width:150px;height:163px;transform:translate(-50%,-50%);pointer-events:none}
.eco-tiles{position:absolute;inset:0}
.eco-tile{position:absolute;left:0;top:0;padding:0;border:0;background:var(--black);cursor:pointer;transform-origin:center;will-change:translate,scale,opacity;box-shadow:0 0 0 1px rgba(212,153,12,.45),0 10px 30px rgba(0,0,0,.6)}
.eco-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.eco-tile{overflow:hidden;scale:1;transition:scale .25s cubic-bezier(.2,.7,.2,1)}
.eco-tile.hot{scale:1.7}
.eco-tile video{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;background:var(--black)}
/* a picture is never still: a slow drift and swell, heading and pace set per tile by aq-eco.js */
.eco-tile:not(.film) img{position:absolute;left:-6%;top:-6%;width:112%;height:112%;animation:eco-drift var(--dd,16s) ease-in-out var(--dl,0s) infinite alternate;animation-play-state:paused}
.eco.eco-live .eco-tile:not(.film) img{animation-play-state:running}
@keyframes eco-drift{from{transform:translate3d(calc(var(--dx,3%) * -1),calc(var(--dy,3%) * -1),0)}to{transform:translate3d(var(--dx,3%),var(--dy,3%),0)}}
@media (prefers-reduced-motion:reduce){.eco-tile{transition:none}.eco-tile:not(.film) img{animation:none;transform:none}}
.eco-tile.film::after{content:"";position:absolute;right:4px;bottom:4px;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--gold);filter:drop-shadow(0 0 3px #000)}
.eco-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.eco-tip{position:absolute;left:0;top:0;z-index:6000;margin:0;padding:6px 12px;background:var(--black);border:1px solid rgba(212,153,12,.6);color:var(--silver);font-size:13px;line-height:18px;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.eco-tip.on{opacity:1}
/* the arrangement buttons: Auto, Spiral, Waterfall, Loops */
.eco-modes{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6500;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 24px)}
.eco-modes button{min-height:44px;padding:0 16px;border:1px solid rgba(212,153,12,.6);background:var(--black);color:var(--silver);font:inherit;font-size:15px;line-height:20px;cursor:pointer}
.eco-modes button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700}
.eco-modes button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:620px){.eco-modes{gap:6px}.eco-modes button{padding:0 11px;font-size:14px}}
.eco-box{max-width:min(92vw,1100px);width:100%;padding:0;border:1px solid rgba(212,153,12,.6);background:var(--black);color:var(--silver)}
.eco-box::backdrop{background:rgba(0,0,0,.86)}
.eco-media img,.eco-media video{display:block;width:100%;max-height:78vh;object-fit:contain;background:var(--black)}
.eco-cap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0;padding:14px 18px 18px;border-top:2px solid var(--gold)}
.eco-cap-t{font-size:21px;line-height:27px;font-weight:700}
.eco-cap-s{font-size:15px;line-height:23px;color:var(--grey)}
.eco-close{position:absolute;right:8px;top:8px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,153,12,.6);background:var(--black);color:var(--silver);font:700 22px/1 system-ui,sans-serif;cursor:pointer}
.eco-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:620px){.eco-stage{height:62vh;min-height:440px}.eco-core{width:96px;height:105px}}

/* AQ Production: the free office plan - the tools it opens, and its one button */
.prod-tools{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0;list-style:none}
.prod-tools li{padding:6px 14px;border:1px solid rgba(212,153,12,.55);color:var(--silver);font-size:14px;line-height:21px;font-weight:700}
.prod-cta{display:flex;flex-wrap:wrap;align-items:center;gap:13px 21px;margin-top:34px}
.prod-note{margin:0;font-size:15px;line-height:23px;color:var(--grey)}