/* ═══════════════════════════════════════════════════════════════════
   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{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}

/* ── 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 34px}
  .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}}