/* nqub.com, proposed (local mock-up), in the visual language of the live nqub.com: big mono headlines, a thin rail down
   the left with orange ✦ labels, pill buttons, big rounded photography, 3D, and bands of charcoal, beige, and orange.
   Type is the design kit's (Archivo, Inter, JetBrains Mono). Every value comes from brand.css.

   Meaning in this project:
   - orange: the brand accent (labels, the one main button, the event band, the persona followed in the sketch).
   - bands: charcoal (default), "ink" (deeper charcoal), "beige", and "orange". Scene changes, not states. */

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{background:var(--c-black);color:var(--c-beige);font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;}
img,video{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:var(--line-2) solid var(--c-orange);outline-offset:var(--line-2);}
::selection{background:var(--c-orange);color:var(--c-black);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}

.skip{position:absolute;left:var(--s-3);top:calc(var(--s-8) * -1);background:var(--c-orange);color:var(--c-black);padding:var(--s-2) var(--s-3);z-index:90;}
.skip:focus{top:var(--s-3);}
.mock{background:var(--c-dark);color:var(--c-light);font-family:var(--f-mono);font-size:var(--t-small);text-align:center;padding:var(--s-2) var(--gutter);border-bottom:var(--line) solid var(--c-line);}

/* ---------- header ---------- */
.topnav{position:sticky;top:0;z-index:60;background:var(--c-shade);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:var(--line) solid var(--c-line);}
.topnav-inner{position:relative;display:flex;align-items:center;gap:var(--s-6);min-height:var(--nav-h);padding:0 var(--gutter);}
.logo-link{display:inline-flex;color:var(--c-beige);}
.logo{height:var(--s-6);width:auto;}
.logo-accent{fill:var(--c-orange);}
.navgroups{display:flex;gap:var(--s-5);margin-left:auto;}
.navtrigger{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;text-decoration:none;color:var(--c-light);padding:var(--s-2) 0;border-bottom:var(--line-2) solid transparent;}
.navtrigger:hover{color:var(--c-white);}
.navtrigger[data-current]{color:var(--c-white);border-bottom-color:var(--c-orange);}
.navtoggle{display:none;}
.push{display:flex;align-items:center;}
@media (max-width:68.75em){
  .topnav-inner{gap:var(--s-3);}
  .navtoggle{display:inline-flex;align-items:center;margin-left:auto;font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;color:var(--c-beige);background:transparent;border:var(--line) solid var(--c-beige);border-radius:var(--pill);padding:var(--s-2) var(--s-4);min-height:44px;cursor:pointer;}
  .navtoggle[aria-expanded=true]{background:var(--c-beige);color:var(--c-black);}
  .navgroups{display:none;}
  .navgroups[data-open]{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--c-black);padding:var(--s-4) var(--gutter) var(--s-6);border-bottom:var(--line) solid var(--c-line);}
  .navgroups[data-open] .navtrigger{font-family:var(--f-display);font-weight:800;font-size:var(--t-h4);padding:var(--s-3) 0;border-bottom:var(--line) solid var(--c-line);}
  .navgroups[data-open] .navtrigger[data-current]{color:var(--c-orange);}
}
@media (max-width:30em){.push .btn{display:none;}}

/* ---------- buttons: pills; the main one orange with a round arrow ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;text-decoration:none;color:var(--c-beige);background:transparent;border:var(--line) solid currentColor;border-radius:var(--pill);padding:var(--s-2) var(--s-5);min-height:44px;cursor:pointer;transition:background var(--dur),color var(--dur);}
.btn:hover{background:var(--c-beige);color:var(--c-black);border-color:var(--c-beige);}
.btn[data-variant=primary]{background:var(--c-orange);border-color:var(--c-orange);color:var(--c-black);padding-right:var(--s-2);}
.btn[data-variant=primary]::after{content:"";width:var(--arrow);height:var(--arrow);border-radius:50%;background:var(--c-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23ff6900' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform var(--dur) var(--ease);}
.btn[data-variant=primary]:hover{background:var(--c-white);border-color:var(--c-white);}
.btn[data-variant=primary]:hover::after{transform:translateX(3px);}
[data-tone=beige] .btn,[data-tone=orange] .btn,[data-tone=paper-2] .btn{color:var(--c-black);}
[data-tone=beige] .btn:hover,[data-tone=orange] .btn:hover,[data-tone=paper-2] .btn:hover{background:var(--c-black);color:var(--c-beige);border-color:var(--c-black);}
[data-tone=orange] .btn[data-variant=primary],[data-tone=paper-2] .btn[data-variant=primary]{background:var(--c-black);color:var(--c-beige);border-color:var(--c-black);}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;}
.link{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:var(--line);}
.link:hover{color:var(--c-orange);}
[data-tone=beige] .link:hover,[data-tone=orange] .link:hover{color:var(--c-black);text-decoration-thickness:var(--line-2);}

/* ---------- bands and the rail ---------- */
.band{position:relative;padding:var(--s-9) 0;background:var(--c-black);color:var(--c-beige);overflow:hidden;}
.band::before{content:"";position:absolute;left:var(--rail);top:0;bottom:0;width:var(--line);background:var(--c-line);}
.band[data-tone=ink]{background:var(--c-dark);}
.band[data-tone=beige]{background:var(--c-beige);color:var(--c-black);}
.band[data-tone=orange],.band[data-tone=paper-2]{background:var(--c-orange);color:var(--c-black);}
.band[data-tone=beige]::before,.band[data-tone=orange]::before,.band[data-tone=paper-2]::before{background:var(--c-line-dark);}
.band-inner{position:relative;margin-left:calc(var(--rail) + var(--gutter));margin-right:var(--gutter);max-width:var(--max);display:flex;flex-direction:column;gap:var(--s-6);}
@media (max-width:51.25em){.band{padding:var(--s-8) 0;}}

/* labels sit on the rail with a ✦ */
.kicker{position:relative;font-family:var(--f-mono);font-size:var(--t-label);text-transform:uppercase;color:var(--c-orange);}
.kicker::before{content:"\2726";position:absolute;left:calc(var(--gutter) * -1 - .5em);top:-.05em;color:var(--c-orange);font-size:1.1em;line-height:1;}
[data-tone=beige] .kicker,[data-tone=orange] .kicker,[data-tone=paper-2] .kicker{color:var(--c-black);}
[data-tone=orange] .kicker::before,[data-tone=paper-2] .kicker::before{color:var(--c-black);}

/* type */
.headline{font-family:var(--f-mono);font-weight:400;font-size:var(--t-h1);line-height:var(--lh-head);text-transform:uppercase;letter-spacing:-.02em;max-width:15em;}
.headline-2,.statement{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);line-height:var(--lh-tight);text-transform:uppercase;letter-spacing:-.01em;max-width:18em;}
.statement{max-width:20em;}
.statement em{font-style:normal;color:var(--c-orange);}
[data-tone=beige] .statement em{color:var(--c-black);text-decoration:underline;text-decoration-color:var(--c-orange);text-decoration-thickness:4px;text-underline-offset:6px;}
.lede{font-size:var(--t-lede);line-height:var(--lh-body);max-width:var(--measure);opacity:.92;}
.t-title{font-family:var(--f-display);font-weight:800;font-size:var(--t-h4);line-height:var(--lh-head);}
.t-title-sm{font-size:var(--t-body);}
.t-small{font-size:var(--t-small);line-height:1.45;opacity:.85;}
.t-label{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;}
.t-display{font-family:var(--f-mono);font-size:var(--t-h3);line-height:1;}
.t-ink{opacity:1;}
.t-page{font-family:var(--f-mono);font-weight:400;font-size:var(--t-h2);text-transform:uppercase;line-height:var(--lh-head);}

/* ---------- the opening film (home) ---------- */
.film{position:relative;min-height:var(--hero-h);display:flex;align-items:flex-end;background:var(--c-dark);overflow:hidden;}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,31,31,.1) 0%,rgba(32,31,31,.3) 45%,rgba(32,31,31,.94) 100%);}
.film::before{content:"";position:absolute;left:var(--rail);top:0;bottom:0;width:var(--line);background:var(--c-line);z-index:2;}
.film .band-inner{z-index:3;padding:var(--s-10) 0 var(--s-8);}

/* the opening with a picture beside it */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center;}
.hero-copy{display:flex;flex-direction:column;gap:var(--s-5);}
@media (max-width:68.75em){.hero{grid-template-columns:1fr;}}

/* ---------- cards: photography first ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--s-4);}
.tiles[data-four]{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:68.75em){.tiles[data-four]{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:51.25em){.tiles[data-four]{grid-template-columns:1fr;}}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border-radius:var(--radius);background:var(--c-dark-2);color:var(--c-beige);text-decoration:none;overflow:hidden;}
.tile .t-title{color:var(--c-orange);text-transform:uppercase;}
.tile .num{font-family:var(--f-mono);font-size:var(--t-h3);line-height:1;color:var(--c-orange);}
.tile .pic{margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-2);height:var(--card-img);overflow:hidden;background:var(--c-dark);}
.tile .pic img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease);}
a.tile:hover .pic img{transform:scale(1.04);}
/* A whole page shown as a screen: the picture keeps its own 16:10 shape inside a dark frame, so nothing is cut off. */
.tile .pic[data-screen]{height:auto;aspect-ratio:16/10;padding:var(--s-3);box-sizing:content-box;}
.tile .pic[data-screen] img{height:100%;object-fit:contain;object-position:top center;border-radius:calc(var(--radius) / 2);box-shadow:0 0 0 1px rgba(232,223,211,.12);}
a.tile:hover .pic[data-screen] img{transform:scale(1.02);}
.tile .more{margin-top:auto;padding-top:var(--s-2);font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;display:inline-flex;align-items:center;gap:var(--s-2);}
.tile .more::after{content:"\2192";color:var(--c-orange);transition:transform var(--dur) var(--ease);}
a.tile:hover .more::after{transform:translateX(4px);}
[data-tone=beige] .tile,[data-tone=ink] .tile{background:var(--c-black);}

/* numbered steps */
.flow{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--s-5);counter-reset:step;}
.flow li{counter-increment:step;display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-4);border-top:var(--line) solid currentColor;}
.flow li::before{content:counter(step,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--t-h3);color:var(--c-orange);line-height:1;margin-bottom:var(--s-2);}
[data-tone=orange] .flow li::before,[data-tone=paper-2] .flow li::before{color:var(--c-black);}
.flow .t-title{text-transform:uppercase;}
.flow .art{width:100%;max-width:240px;aspect-ratio:1;object-fit:contain;margin-bottom:var(--s-2);}

/* two columns */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:start;}
@media (max-width:51.25em){.split{grid-template-columns:1fr;gap:var(--s-5);}}
.copy{display:flex;flex-direction:column;gap:var(--s-4);max-width:var(--measure);}
.ticks{list-style:none;display:flex;flex-direction:column;}
.ticks li{padding:var(--s-3) 0 var(--s-3) var(--s-6);border-bottom:var(--line) solid var(--c-line);position:relative;}
[data-tone=beige] .ticks li{border-bottom-color:var(--c-line-dark);}
.ticks li::before{content:"\2726";position:absolute;left:0;color:var(--c-orange);}
.ticks[data-kind=out] li::before{content:"\2715";color:inherit;opacity:.6;}

/* photography */
.shot{display:flex;flex-direction:column;gap:var(--s-2);}
.shot img,.shot video{width:100%;height:auto;border-radius:var(--radius);object-fit:cover;}
.shot figcaption{font-family:var(--f-mono);font-size:var(--t-small);opacity:.75;}
.wide img,.wide video{width:100%;height:clamp(260px,48vw,620px);object-fit:cover;border-radius:var(--radius);}
.wide figcaption{font-family:var(--f-mono);font-size:var(--t-small);opacity:.75;margin-top:var(--s-2);}
.pull{font-family:var(--f-mono);font-size:var(--t-h3);line-height:var(--lh-head);text-transform:uppercase;max-width:20em;}

/* the event band */
.event{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);align-items:flex-end;justify-content:space-between;}
.event .when{font-family:var(--f-mono);text-transform:uppercase;}

/* the closing band: 3D on the left, the ask on the right (like the live "Is your organization ready?") */
.closer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-7);align-items:center;}
@media (max-width:51.25em){.closer{grid-template-columns:1fr;gap:var(--s-4);}}
.scene{position:relative;aspect-ratio:1;max-height:520px;width:100%;}
@media (max-width:51.25em){.scene{max-height:320px;}}
.scene spline-viewer{position:absolute;inset:0;width:100%;height:100%;}
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;opacity:.7;}
.loader svg{width:64px;height:64px;animation:turn var(--spin) linear infinite;}
.loader svg path{fill:none;stroke:currentColor;stroke-width:1.2;}
.scene[data-ready] .loader{display:none;}
@keyframes turn{to{transform:rotate(360deg);}}

/* ---------- the twin sketch, dark ---------- */
.twin{border:var(--line) solid var(--c-line);border-radius:var(--radius);background:var(--c-dark);display:flex;flex-direction:column;overflow:hidden;}
.twin-head{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;justify-content:space-between;padding:var(--s-3) var(--s-4);border-bottom:var(--line) solid var(--c-line);}
.twin-head .t-label{color:var(--c-light);}
.twin-switch{display:inline-flex;gap:var(--s-1);}
.twin-switch button{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;background:transparent;color:var(--c-beige);border:var(--line) solid var(--c-line);border-radius:var(--pill);padding:var(--s-2) var(--s-4);min-height:44px;cursor:pointer;}
.twin-switch button:hover{border-color:var(--c-beige);}
.twin-switch button[aria-pressed=true]{background:var(--c-beige);color:var(--c-black);border-color:var(--c-beige);}
.twin svg{display:block;width:100%;height:auto;}
.twin svg .room{fill:none;stroke:var(--c-beige);stroke-width:2;}
.twin svg .door{stroke:var(--c-dark);stroke-width:3;}
.twin svg .fixture{fill:var(--c-dark-2);stroke:var(--c-beige);stroke-width:1.5;}
.twin svg [data-off]{display:none;}
.twin svg .label{font-family:var(--f-mono);font-size:14px;fill:var(--c-light);}
.twin svg .p{fill:var(--c-light);}
.twin svg .p[data-this]{fill:var(--c-orange);stroke:var(--c-black);stroke-width:1;}
.twin-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--line) solid var(--c-line);}
.twin-foot .stat{padding:var(--s-3) var(--s-4);border-right:var(--line) solid var(--c-line);display:flex;flex-direction:column;gap:var(--s-1);}
.twin-foot .stat:last-child{border-right:0;}
.twin-foot .t-label{color:var(--c-light);font-size:12px;}
.twin-note{padding:var(--s-3) var(--s-4);border-top:var(--line) solid var(--c-line);}
@media (max-width:51.25em){.twin svg .label{font-size:20px;}.twin-foot .t-display{font-size:var(--t-h4);}}

/* questions */
.faq{display:flex;flex-direction:column;border-top:var(--line) solid var(--c-line);}
.faq details{border-bottom:var(--line) solid var(--c-line);}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-5) 0;font-family:var(--f-display);font-weight:800;font-size:var(--t-h4);text-transform:uppercase;display:flex;justify-content:space-between;gap:var(--s-4);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--c-orange);}
.faq details[open] summary::after{content:"\2212";}
.faq summary:hover{color:var(--c-white);}
.faq details > div{padding:0 0 var(--s-5);max-width:var(--measure);opacity:.9;}

/* the cube's six questions, and the team */
.statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--line) solid var(--c-line);border-left:var(--line) solid var(--c-line);}
.statgrid .stat{padding:var(--s-4);border-right:var(--line) solid var(--c-line);border-bottom:var(--line) solid var(--c-line);display:flex;flex-direction:column;gap:var(--s-2);}
.statgrid .t-display{color:var(--c-orange);text-transform:uppercase;}
@media (max-width:51.25em){.statgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--s-5);}
.people div{display:flex;flex-direction:column;gap:var(--s-1);padding-top:var(--s-3);border-top:var(--line) solid var(--c-line);}
.people .t-title{text-transform:uppercase;font-size:var(--t-body);}

/* the form and the privacy draft */
.form{display:flex;flex-direction:column;gap:var(--s-4);background:var(--c-dark-2);border-radius:var(--radius);padding:var(--s-6);}
@media (max-width:51.25em){.form{padding:var(--s-5);}}
.field{display:flex;flex-direction:column;gap:var(--s-2);}
.field .t-label{color:var(--c-light);}
.optional{font-family:var(--f-body);text-transform:none;opacity:.7;}
.input,.select{font:inherit;color:var(--c-white);background:var(--c-black);border:var(--line) solid var(--c-line);border-radius:var(--radius-sm);padding:var(--s-3);min-height:44px;width:100%;}
.input:focus,.select:focus{border-color:var(--c-orange);outline:none;}
.input[aria-invalid=true]{border:var(--line-2) solid var(--c-orange);}
.form-foot{padding-top:var(--s-2);}
.callout{border-left:var(--line-2) solid var(--c-orange);background:var(--c-dark);border-radius:var(--radius-sm);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1);}
.prose{max-width:70ch;display:flex;flex-direction:column;gap:var(--s-3);}
.prose h2{font-family:var(--f-display);font-weight:800;font-size:var(--t-h4);text-transform:uppercase;margin-top:var(--s-5);}
.prose ul{padding-left:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);}
.prose a{text-decoration:underline;text-underline-offset:4px;}

/* ---------- footer: the orange band ---------- */
.foot{background:var(--c-orange);color:var(--c-black);padding:var(--s-8) var(--gutter) var(--s-6) calc(var(--rail) + var(--gutter));}
.foot-inner{max-width:var(--max);display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s-6);}
.foot .logo{height:40px;color:var(--c-black);}
.foot .logo .logo-accent{fill:var(--c-black);}
.foot .stack{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-1);}
.foot a{text-decoration:none;font-family:var(--f-mono);text-transform:uppercase;font-size:var(--t-small);}
.foot a:hover{text-decoration:underline;}
.foot p{font-size:var(--t-small);}
.foot-base{max-width:var(--max);margin-top:var(--s-7);padding-top:var(--s-4);border-top:var(--line) solid var(--c-line-dark);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);font-family:var(--f-mono);font-size:var(--t-small);}
@media (max-width:51.25em){.foot-inner{grid-template-columns:1fr 1fr;}.foot-inner > :first-child{grid-column:1 / -1;}}
.cube-art{max-width:320px;width:100%;}
/* the ✦ belongs on the rail: hide it for labels in a right-hand column */
.split > :not(:first-child) .kicker::before,.hero > :not(:first-child) .kicker::before,.closer .kicker::before,.split > .kicker::before{display:none;}

/* type spec from the type director's review (21-Oct-2026): one clear step per level, tracked caps, balanced headlines */
.headline{font-weight:500;line-height:1.02;letter-spacing:-.05em;max-width:13em;text-wrap:balance;font-variant-ligatures:none;}
.headline-2,.statement{line-height:1.04;letter-spacing:.005em;max-width:16em;text-wrap:balance;}
.statement{max-width:18em;}
.t-title{letter-spacing:.02em;line-height:1.1;text-wrap:balance;}
.kicker{letter-spacing:.08em;}
.btn,.navtrigger,.t-label,.tile .more,.foot a,.twin-switch button,.navtoggle{letter-spacing:.04em;}
.pull{letter-spacing:-.03em;line-height:1.08;text-wrap:balance;}
.lede{max-width:28em;text-wrap:pretty;}
.copy{text-wrap:pretty;}
.faq summary{letter-spacing:.02em;}

/* art director's review (21-Oct-2026): film beside the words, one crop for cards, quieter card titles */
.film video{object-position:70% center;}
.film::after{background:linear-gradient(90deg,rgba(32,31,31,.94) 0%,rgba(32,31,31,.78) 34%,rgba(32,31,31,.15) 68%,rgba(32,31,31,0) 100%),linear-gradient(180deg,rgba(32,31,31,0) 60%,rgba(32,31,31,.6) 100%);}
.film .band-inner > *{max-width:34rem;}
@media (max-width:51.25em){.film::after{background:linear-gradient(180deg,rgba(32,31,31,.2) 0%,rgba(32,31,31,.55) 40%,rgba(32,31,31,.95) 100%);}.film video{object-position:center;}}
.tile .pic{height:auto;aspect-ratio:4/3;}
.tile .t-title{color:var(--c-beige);}
a.tile:hover .t-title{color:var(--c-white);}
.twin svg .trail{fill:none;stroke:var(--c-light);stroke-width:1;opacity:.35;}
.twin svg .trail[data-this]{stroke:var(--c-orange);opacity:.8;stroke-width:1.5;}

/* titles in upper and lower case (21-Oct-2026); only labels, buttons, and navigation stay in capitals */
.headline,.headline-2,.statement,.t-title,.tile .t-title,.flow .t-title,.faq summary,.people .t-title,.t-page,.pull,.prose h2,.navgroups[data-open] .navtrigger{text-transform:none;}
.headline{letter-spacing:-.035em;}
.headline-2,.statement,.t-title,.faq summary{letter-spacing:-.012em;}
.pull{letter-spacing:-.02em;}

/* QA: focus must show on orange and beige; text over the opening film needs more shade */
.foot :focus-visible,[data-tone=orange] :focus-visible,[data-tone=paper-2] :focus-visible,[data-tone=beige] :focus-visible{outline-color:var(--c-black);}
.film::after{background:linear-gradient(90deg,rgba(32,31,31,.95) 0%,rgba(32,31,31,.85) 36%,rgba(32,31,31,.25) 70%,rgba(32,31,31,.05) 100%),linear-gradient(180deg,rgba(32,31,31,0) 60%,rgba(32,31,31,.6) 100%);}
@media (max-width:51.25em){.film::after{background:linear-gradient(180deg,rgba(32,31,31,.55) 0%,rgba(32,31,31,.75) 45%,rgba(32,31,31,.95) 100%);}}
.film .kicker{color:var(--c-orange);text-shadow:0 1px 8px rgba(0,0,0,.6);}

/* titles: Archivo 800 is the human voice; mono stays the instrument readout (labels, buttons, nav, data, captions).
   From the type director and art director, 21-Oct-2026. Placed last so it wins over the earlier rules. */
.headline{font-family:var(--f-display);font-weight:800;font-size:var(--t-h1);line-height:1;letter-spacing:-.035em;max-width:14em;text-wrap:balance;text-transform:none;}
.headline-2,.statement{font-family:var(--f-display);font-weight:700;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.015em;max-width:18em;text-wrap:balance;text-transform:none;}
.pull{font-family:var(--f-display);font-weight:600;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.01em;max-width:22em;text-transform:none;}
.t-page{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.02em;text-transform:none;}
.film .headline{max-width:12em;}
.hero .headline{font-size:var(--t-h1-split);}

/* silhouettes: renders with the background knocked out are shown whole, never cropped or framed */
.cutout img{object-fit:contain!important;height:auto!important;max-height:640px;width:auto!important;max-width:100%;margin:0 auto;border-radius:0!important;filter:drop-shadow(0 24px 30px rgba(0,0,0,.28));}
.tile .pic:has(img[src$=".png"]){background:radial-gradient(ellipse at 50% 60%,var(--c-dark-2),var(--c-dark));}
.tile .pic img[src$=".png"]{object-fit:contain;padding:var(--s-4);}

/* the interactive ATM: the studio black melts into the charcoal; a soft fade where the source frame clipped the door */
.atm-stage{display:flex;flex-direction:column;gap:var(--s-3);}
.atm-frame{position:relative;}
.atm-frame video{width:100%;height:auto;mix-blend-mode:screen;cursor:pointer;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);}
.atm-frame .loader{pointer-events:none;}
/* ATM page hero: the machine on the left, opening toward the words. Its black is keyed out on a canvas (site.js), so the
   open door covers a sliver of the headline and casts a soft shadow across it. Without the canvas, the video shows as before. */
.hero-atm{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
.hero-atm .atm-stage{position:relative;z-index:2;margin-right:calc(var(--s-7) * -1 - 8%);pointer-events:none;}
.hero-atm .atm-stage canvas,.hero-atm .atm-stage figcaption{pointer-events:auto;}
.hero-atm .atm-stage figcaption{margin-right:calc(var(--s-7) + 8%);}
.hero-atm .cta-row{position:relative;z-index:3;}  /* the door may pass over the words, never over the button */
.atm-frame canvas{display:none;width:100%;height:auto;cursor:pointer;filter:drop-shadow(2.6rem 1.6rem 2rem rgba(0,0,0,.7));}
.atm-stage[data-keyed] canvas{display:block;}
.atm-stage[data-keyed] video{position:absolute;inset:0;opacity:0;pointer-events:none;}
@media (max-width:51.25em){.hero-atm{grid-template-columns:minmax(0,1fr);} .hero-atm .atm-stage{margin-right:0;} .hero-atm .atm-stage figcaption{margin-right:0;}}
.atm-stage[data-ready] .loader{display:none;}
.atm-stage figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);font-family:var(--f-mono);font-size:var(--t-small);opacity:.85;}
.atm-toggle{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;letter-spacing:.04em;color:var(--c-black);background:var(--c-beige);border:0;border-radius:var(--pill);padding:var(--s-2) var(--s-4);min-height:44px;cursor:pointer;}
.atm-toggle:hover{background:var(--c-white);}
.atm-toggle[aria-pressed=true]{background:var(--c-orange);}
/* silhouettes whose source frame clipped one side fade out there instead of ending in a hard cut */
.tile .pic img[src*="atm-7600i-fascia"],.tile .pic img[src*="atm-7600i-side"]{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);}
.flow .art{max-width:120px;}
.shot.narrow{max-width:640px;}

/* where nqub fits in a new branch: eight stages; orange marks the stages where nqub helps ("this one") */
.stages{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);counter-reset:stage;}
@media (max-width:68.75em){.stages{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:51.25em){.stages{grid-template-columns:1fr;}}
.stages li{counter-increment:stage;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border-radius:var(--radius-sm);border:var(--line) solid var(--c-line);border-top:var(--s-1) solid var(--c-line);opacity:.78;}
.stages li::before{content:counter(stage,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--t-small);color:var(--c-light);}
.stages li[data-nqub]{opacity:1;background:var(--c-dark-2);border-top-color:var(--c-orange);}
.stages li[data-nqub]::before{color:var(--c-orange);}
.stages .stage-name{font-family:var(--f-display);font-weight:800;font-size:var(--t-body);line-height:var(--lh-head);}
.stages .t-label{font-size:12px;color:var(--c-light);}

/* The fold (QA, 25-Oct-2026): the first band starts closer to the nav, and on laptops and larger it fills the first
   screen, so the fold lands at the end of a band instead of across a heading, a figure caption, or a button.
   --mock-h is the preview strip; it drops to 0 on launch day, when the strip is removed. */
body:has(.mock){--mock-h:calc(var(--t-small) * 1.5 + var(--s-2) * 2 + var(--line));}
main > .band:first-child{padding-top:var(--s-7);padding-bottom:var(--s-7);}
@media (min-width:51.26em){
  main > .band:first-child{min-height:calc(100svh - var(--nav-h) - var(--mock-h, 0px));display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;}
  main > .band:first-child > .band-inner{align-self:stretch;}  /* not width:100%: the inner has side margins (QA 26-Oct) */
}
@media (max-width:51.25em){
  main > .band:first-child{padding-top:var(--s-5);padding-bottom:var(--s-6);}
  main > .band:first-child .hero-copy{gap:var(--s-4);}
  .hero-atm .atm-stage{order:2;}  /* phones: the words and the button first, then the machine */
}
/* The home film fills exactly the first screen, its words and buttons inside it. */
.film{min-height:calc(100svh - var(--nav-h) - var(--mock-h, 0px));}
.film .band-inner{padding:var(--s-8) 0 var(--s-7);}
@media (max-width:51.25em){.film .band-inner{padding:var(--s-7) 0 var(--s-6);} .film .band-inner > *{margin:0;} .film .band-inner{gap:var(--s-4);}}
/* Short phones (an iPhone SE, 667px tall): a tighter first band so both buttons fit on the first screen. */
@media (max-width:51.25em) and (max-height:700px){
  main > .band:first-child{padding-top:var(--s-4);}
  main > .band:first-child .headline{font-size:calc(var(--t-h1) * .85);}
}

/* The About cube (the live site's six-dimensions scene): square, and it holds the page still while you turn it.
   On phones it leaves a margin on each side, so a thumb can still scroll past it. */
.scene-cube{max-width:448px;touch-action:none;overscroll-behavior:contain;cursor:grab;}
.scene-cube:active{cursor:grabbing;}
@media (max-width:51.25em){.scene-cube{max-width:78%;margin:0 auto;}}
/* Phones: the machine centered and larger. The canvas is wider than the screen and shifted so the cabinet (about 30%
   from the frame's left edge) sits in the middle; the open door may run off the right edge, which is fine. */
@media (max-width:51.25em){
  .hero-atm .atm-frame{display:block;overflow:hidden;margin:0 calc(var(--gutter) * -1);}
  .hero-atm .atm-frame canvas{max-height:none;width:150%;max-width:none;margin-left:calc(50% - 150% * 0.315);}
  .hero-atm .atm-frame video{width:150%;margin-left:calc(50% - 150% * 0.315);}
}

/* Three beats under the line: Simulate. Accelerate. De-risk. (in that order, for the cadence) */
.beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);}
.beats p{margin:0;max-width:22rem;}
.beat{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2, 2.5rem);line-height:1;letter-spacing:-.03em;margin-bottom:var(--s-3) !important;}
@media (max-width:51.25em){.beats{grid-template-columns:1fr;gap:var(--s-5);}}

/* The branch journey: phase 1 on a rail to opening day, then phase 2. Left to right on laptops, top to bottom on phones.
   Filled dot: nqub helps. Orange: step 4, where a change costs least ("this one"). Squares: after opening. */
.journey{display:flex;flex-direction:column;gap:var(--s-3);}
.j-types{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.j-types button{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;letter-spacing:.04em;color:inherit;background:transparent;border:var(--line) solid currentColor;border-radius:var(--pill);padding:var(--s-2) var(--s-4);min-height:44px;cursor:pointer;opacity:.8;}
.j-types button:hover{opacity:1;}
.j-types button[aria-pressed=true]{background:var(--c-beige);color:var(--c-black);border-color:var(--c-beige);opacity:1;}
.j-head{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;letter-spacing:.08em;opacity:.75;margin:var(--s-4) 0 0;}
.j-rail{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:var(--s-3);}
.j-after{max-width:50%;}
.j-rail li{position:relative;display:flex;flex-direction:column;gap:var(--s-1);padding-top:var(--s-6);}
.j-rail li[hidden]{display:none;}
.j-rail li::before{content:"";position:absolute;left:6px;right:calc(var(--s-3) * -1);top:6px;height:var(--line);background:currentColor;opacity:.45;}
.j-rail li:last-child::before{display:none;}
.j-rail li::after{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;border:2px solid currentColor;box-sizing:border-box;background:var(--c-dark);}
.j-rail li[data-nqub]::after{background:currentColor;}
.j-rail li[data-hero]::after{background:var(--c-orange);border-color:var(--c-orange);width:17px;height:17px;left:-2px;top:-2px;}
.j-rail li[data-after]::after{border-radius:0;}
.j-step{font-family:var(--f-mono);font-size:var(--t-label, .75rem);text-transform:uppercase;letter-spacing:.06em;opacity:.7;}
.j-name{font-family:var(--f-display);font-weight:800;font-size:1.15rem;line-height:1.15;}
.j-what,.j-part{font-size:var(--t-small);line-height:1.45;opacity:.85;}
.j-rail li:not([data-nqub]) .j-part{opacity:.55;}
.j-open{display:flex;align-items:center;gap:var(--s-3);font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;letter-spacing:.08em;margin:var(--s-4) 0 0;}
.j-open::before,.j-open::after{content:"";flex:1;border-top:var(--line) dashed currentColor;opacity:.5;}
@media (max-width:68em){
  .j-rail,.j-after{grid-auto-flow:row;max-width:none;}
  .j-rail li{padding:0 0 var(--s-4) var(--s-6);}
  .j-rail li::before{left:6px;right:auto;top:6px;bottom:0;width:var(--line);height:auto;}
}
.j-note{font-family:var(--f-mono);font-size:var(--t-label, .75rem);text-transform:uppercase;letter-spacing:.06em;}

/* QA 25-Oct: anchors (#journey, #fit) land below the sticky nav; on phones the "Open the ATM" toggle sits above the machine. */
[id]{scroll-margin-top:calc(var(--nav-h) + var(--s-4));}
@media (max-width:51.25em){.hero-atm .atm-stage{display:flex;flex-direction:column;} .hero-atm .atm-stage figcaption{order:-1;margin-bottom:var(--s-3);}}

/* Laptops and larger: the machine at full size, as first designed; the toggle sits over the empty space above it, so it
   is always on the first screen without shrinking the machine. */
@media (min-width:51.26em){
  .hero-atm .atm-stage figcaption{position:absolute;top:0;left:0;margin:0;z-index:3;}
}

/* App screenshots (GeoPulse, JourneyDesigner): the whole screen, nav bar to edge, never cropped like a photo. */
.wide.screen img{height:auto;object-fit:contain;border:var(--line) solid var(--c-line);box-shadow:0 18px 40px rgba(0,0,0,.28);}
.proof{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);}
.proof li{font-family:var(--f-mono);font-size:var(--t-small);text-transform:uppercase;letter-spacing:.04em;border:var(--line) solid currentColor;border-radius:var(--pill);padding:var(--s-1) var(--s-3);opacity:.85;}
/* In-between sizes (group feedback 26-Oct): tablets and small laptops had a padded, oversized ATM hero.
   Tablets: the machine at a sensible size, centered. Small laptops: the first band no longer stretches to the screen. */
@media (min-width:37.5em) and (max-width:51.25em){
  .hero-atm .atm-frame{max-width:520px;margin:0 auto;}
  .hero-atm .atm-frame canvas,.hero-atm .atm-frame video{width:125%;margin-left:calc(50% - 125% * 0.315);}
}
@media (min-width:51.26em) and (max-width:64em){
  main > .band:first-child{min-height:0;}
}

/* QA 26-Oct: Banker Assist proof strip as two columns on phones; short laptop screens (under 600px tall) get a tighter first band. */
@media (max-width:37.5em){ .proof{display:grid;grid-template-columns:1fr 1fr;} .proof li{text-align:center;} }
@media (min-width:51.26em) and (max-height:600px){
  main > .band:first-child{padding-top:var(--s-5);padding-bottom:var(--s-5);}
  main > .band:first-child .hero-copy{gap:var(--s-3);}
  main > .band:first-child .headline{font-size:calc(var(--t-h1) * .8);}
  .film .band-inner{padding:var(--s-5) 0;gap:var(--s-3);}
}
/* The rebuilt nqūb cube (scripts/cube.js): square stage, holds the page still while turned. */
.cube3d{position:relative;aspect-ratio:1;width:100%;max-width:460px;cursor:grab;touch-action:none;overscroll-behavior:contain;}
.cube3d:active{cursor:grabbing;}
.cube3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;}
.cube3d[data-ready] .loader{display:none;}
@media (max-width:51.25em){.cube3d{max-width:78%;margin:0 auto;}}
.film .band-inner > .cta-row{max-width:none;}  /* both hero buttons on one row where they fit, so the second stays on the first screen */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}