@import url("client-journey.css?v=1");
/* ASALA site · shared system (Elevation)
   Ground: black. Surface: Dove Grey. Light: Casper. Type: Big Shoulders Display + Hanken Grotesk. */

@font-face{font-family:"Big Shoulders";src:url("fonts/big-shoulders-display-vf.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken";src:url("fonts/hanken-grotesk-vf.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken";src:url("fonts/hanken-grotesk-vf-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --black:#000; --ink:#0B0B0B; --slab:#111212; --slab-2:#171818; --slab-3:#1F2021;
  --line:#2A2C2D; --line-2:#3B3E3F; --dove:#686B6C; --casper:#AABBC5; --casper-deep:#8FA3AF;
  --paper:#F2F2EE; --mid:#8E9294; --soft:#B9BDBF; --stone:#444748; --wall:#E4E5E2;
  --rail:88px; --gut:clamp(16px,2.4vw,40px);
  --display:"Big Shoulders","Arial Narrow",sans-serif;
  --text:"Hanken","Helvetica Neue",Arial,sans-serif;
  --ease-heavy:cubic-bezier(.62,0,.12,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* merged-brand accents: teal = live state (instruments, focus inside instruments); match red = the match head only */
  --teal:#19F0D8; --match:#D2262C;
  /* instrument aliases: the Datum instruments read these, mapped onto Elevation's own blacks, rules and inks */
  --d-k0:#000; --d-k1:var(--ink); --d-k2:var(--slab); --d-k3:var(--slab-2); --d-k4:#1B1C1C; --d-k5:var(--slab-3);
  --d-line:var(--line); --d-line2:var(--line-2); --d-line3:#4E5253;
  --d-ink:var(--paper); --d-ink2:var(--soft); --d-ink3:var(--mid);
  --d-disp:var(--display); --d-text:var(--text); --d-mono:var(--text); --d-pad:var(--gut); --d-rail:0px; --d-top:56px;
  --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%23686B6C' stroke-width='1'/%3E%3C/svg%3E");
  --hatch-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1.5 1.5l3-3M0 6l6-6M4.5 7.5l3-3' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.55 var(--text);font-kerning:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--casper);color:#000}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--casper);color:#000;padding:12px 16px;font-weight:600;transform:translateY(-160px)}
.skip:focus{transform:none}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- focus: Casper outline with corner ticks ---------- */
:focus{outline:none}
:focus-visible{outline:1px solid var(--casper);outline-offset:4px}
.on-casper :focus-visible,.on-light :focus-visible{outline-color:#000}
.ticks{position:fixed;z-index:400;pointer-events:none;display:none;--c:var(--casper);
  background:
   linear-gradient(var(--c),var(--c)) top left/12px 2px, linear-gradient(var(--c),var(--c)) top left/2px 12px,
   linear-gradient(var(--c),var(--c)) top right/12px 2px, linear-gradient(var(--c),var(--c)) top right/2px 12px,
   linear-gradient(var(--c),var(--c)) bottom left/12px 2px, linear-gradient(var(--c),var(--c)) bottom left/2px 12px,
   linear-gradient(var(--c),var(--c)) bottom right/12px 2px, linear-gradient(var(--c),var(--c)) bottom right/2px 12px;
  background-repeat:no-repeat}
.ticks.on{display:block}
.ticks.dark{--c:#000}

/* ---------- type ---------- */
.d{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.86}
.label{font:600 12px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.label--paper{color:var(--paper)}
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--paper);max-width:34em;margin:0}
.muted{color:var(--mid)}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:inherit}

/* ---------- page frame ---------- */
.page{padding-left:var(--rail);position:relative;min-width:0}
.grid-bg{background-image:linear-gradient(to right,#17181a 1px,transparent 1px);background-size:calc((100% - 0px)/6) 100%}
.wrap{padding-inline:var(--gut)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}

/* floor slab (section in poché) */
.slab{height:26px;background:#000 var(--hatch);border-block:1px solid var(--line-2);position:relative}
.slab--thin{height:12px}
.datum{display:flex;align-items:center;gap:14px;padding:18px var(--gut) 0;font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);flex-wrap:wrap}
.datum__mark{display:inline-flex;align-items:center;gap:8px;color:var(--paper);font-variant-numeric:tabular-nums}
.datum__mark::before{content:"";width:13px;height:11px;background:var(--paper);clip-path:polygon(0 0,100% 0,50% 100%);flex:none}
.datum__line{flex:1;height:1px;background:var(--line-2);min-width:40px}
.datum__sheet{color:var(--mid)}

.floor{position:relative;scroll-margin-top:0}
.floor__head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);column-gap:var(--gut);padding:clamp(28px,4vw,56px) var(--gut) clamp(32px,4vw,64px);align-items:end}
.lvl{font:200 clamp(110px,15vw,250px)/.74 var(--display);color:var(--dove);letter-spacing:-.01em;margin:0}
.floor__title{font:800 clamp(52px,7vw,118px)/.84 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0 0 22px}
.floor__head .lede{color:var(--soft)}

/* photo + caption */
.ph{position:relative;margin:0;background:#000;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.cap{display:flex;gap:10px;justify-content:space-between;font:500 11px/1.4 var(--text);letter-spacing:.04em;color:var(--mid);padding-top:8px}
.cap a{color:var(--soft);text-underline-offset:2px}
.cap a:hover{color:var(--paper)}

/* bubble (gridline label) */
.bub{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--soft);border-radius:50%;font:600 12px/1 var(--text);color:var(--paper);background:var(--ink);flex:none}

/* ---------- ELEVATOR RAIL (component 7) ---------- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);background:#000;border-right:1px solid var(--line);z-index:60;display:flex;flex-direction:column;align-items:stretch}
.rail__home{display:grid;place-items:center;height:84px;border-bottom:1px solid var(--line);color:var(--paper)}
.rail__home svg{width:32px;height:32px}
.rail__shaft{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 0}
.rail__shaft::before{content:"";position:absolute;left:22px;top:18px;bottom:18px;width:1px;background:var(--line-2)}
.rail__list{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:2px}
.rail__btn{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:46px;background:none;border:0;padding:0 0 0 18px;
  font:600 17px/1 var(--display);letter-spacing:.06em;color:var(--mid);text-decoration:none}
.rail__btn span{padding:2px 4px}
.rail__btn:hover{color:var(--paper)}
.rail__btn[aria-current="true"]{color:var(--paper);font-weight:800}
.rail__car{position:absolute;left:18px;top:0;width:9px;height:46px;background:var(--casper);z-index:0;will-change:transform;
  transition:transform .32s var(--ease-out)}
.rail__car::before,.rail__car::after{content:"";position:absolute;left:50%;width:1px;height:2000px;background:var(--casper);opacity:.55}
.rail__car::before{bottom:100%}
.rail__car::after{top:100%;height:0}
.rail__foot{border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:14px 0 16px;gap:10px}
.rail__elev{font:500 12px/1.2 var(--text);color:var(--soft);font-variant-numeric:tabular-nums;text-align:center;letter-spacing:.02em}
.rail__elev b{display:block;font:700 10px/1 var(--text);letter-spacing:.16em;color:var(--mid);margin-bottom:4px}
.rail__dir{width:56px;height:44px;border:1px solid var(--line-2);background:#000;font:600 12px/1 var(--text);letter-spacing:.06em;color:var(--paper)}
.rail__dir:hover{border-color:var(--casper)}
@media (prefers-reduced-motion:reduce){.rail__car{transition:none}}

/* mobile lift bar + doors */
.liftbar{display:none}
@media (max-width:899px){
  :root{--rail:0px}
  .rail{display:none}
  .liftbar{display:flex;position:sticky;top:0;z-index:60;height:56px;background:#000;border-bottom:1px solid var(--line);align-items:stretch}
  .liftbar__home{display:flex;align-items:center;gap:10px;padding:0 14px;text-decoration:none;color:var(--paper);border-right:1px solid var(--line)}
  .liftbar__home svg{width:32px;height:32px}
  .liftbar__lvl{flex:1;display:flex;align-items:center;gap:10px;padding:0 14px;font:600 12px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);min-width:0}
  .liftbar__lvl b{font:700 20px/1 var(--display);letter-spacing:.04em;color:#000;background:var(--casper);min-width:40px;height:32px;display:grid;place-items:center;flex:none}
  .liftbar__lvl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .liftbar__btn{border:0;border-left:1px solid var(--line);background:#000;color:var(--paper);padding:0 16px;min-width:56px;font:600 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase}
}
.lift{position:fixed;inset:0;z-index:150;display:none}
.lift.open,.lift.closing{display:block}
.lift__inside{position:absolute;inset:0;background:var(--ink);overflow:auto;padding:76px 20px 28px}
.lift__door{position:absolute;top:0;bottom:0;width:50.5%;background:var(--dove) ;transition:transform .55s var(--ease-heavy);z-index:2;
  background-image:linear-gradient(90deg,transparent calc(100% - 1px),#555859 0),linear-gradient(#73777866,#73777866);}
.lift__door--l{left:0;transform:translateX(0);box-shadow:inset -1px 0 0 #000}
.lift__door--r{right:0;transform:translateX(0)}
.lift.open .lift__door--l{transform:translateX(-101%)}
.lift.open .lift__door--r{transform:translateX(101%)}
.lift__close{position:absolute;top:6px;right:6px;z-index:1;width:48px;height:48px;border:1px solid var(--line-2);background:#000;color:var(--paper);font:500 22px/1 var(--text)}
.lift__title{font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:0 0 14px}
.lift__list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line-2)}
.lift__list a{display:grid;grid-template-columns:56px 1fr auto;align-items:center;min-height:60px;border-bottom:1px solid var(--line-2);text-decoration:none;gap:12px}
.lift__list b{font:700 28px/1 var(--display);color:var(--casper)}
.lift__list span{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.lift__list i{font:500 12px/1 var(--text);font-style:normal;color:var(--mid);font-variant-numeric:tabular-nums}
.lift__search{width:100%;min-height:52px;border:1px solid var(--casper);background:transparent;color:var(--paper);font:600 13px/1 var(--text);letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.lift__door{transition:none;display:none}}

/* ---------- HERO / LOBBY with sun screen ---------- */
.hero{position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto 1fr auto;min-height:max(720px,100svh);background:#000}
.hero__top{display:flex;align-items:center;height:64px;border-bottom:1px solid var(--line);padding:0 var(--gut);gap:16px}
.hero__word{width:96px;color:var(--paper);flex:none}
.hero__bubs{flex:1;display:grid;grid-template-columns:repeat(6,1fr);align-self:stretch;margin-left:24px}
.hero__bubs span{display:flex;align-items:center;justify-content:flex-start;position:relative;border-left:1px solid var(--line)}
.hero__bubs .bub{margin-left:-14px;background:#000}
.canopy{height:16px;background:#000 var(--hatch);border-bottom:2px solid #000;position:relative;z-index:3}
.canopy::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#000}
.wall{--foot:20px;position:relative;overflow:hidden;background-color:var(--wall);color:#000;min-height:520px}
/* panel joints + rivets sit above the paint (multiply), so the wall's construction reads through it */
.wall__joints{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle,rgba(0,0,0,.16) 0 2px,transparent 2.6px),
    linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px);
  background-size:180px 112px,100% 112px;background-position:58px 54px,0 0}
.wall__foot{position:absolute;left:0;right:0;bottom:0;height:var(--foot);z-index:1;background:#CDCFCB;border-top:1px solid rgba(0,0,0,.2);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.wall__inner{position:relative;z-index:auto;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;padding:clamp(28px,4vh,48px) calc(var(--gut) + 3%) clamp(18px,3vh,30px) var(--gut);gap:0 var(--gut);min-height:inherit}
.hero__h{grid-column:1;grid-row:1/3;align-self:end;margin:0;font:800 min(calc((100svh - 300px)/3.05),16vw,250px)/.92 var(--display);text-transform:none;letter-spacing:-.005em;color:#000}
.hero__h span{display:block}
.hero__h{position:relative;z-index:2}
.hero__door{grid-column:2;grid-row:2;align-self:end;justify-self:end;margin-bottom:calc(-1 * clamp(18px,3vh,30px));position:relative;z-index:6}
.wall__inner{pointer-events:none}.wall__inner a,.wall__inner .pivot{pointer-events:auto}
/* spray layer: above the wall colour, under the joints (1, later in DOM), headline (2), door (6) and cans (7) */
.spray{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:block}

/* ---------- SPRAY CANS at the foot of the wall ---------- */
.cans{position:absolute;z-index:7;bottom:calc(var(--foot) * .42);right:calc(var(--gut) + 3% + 178px + 16px + 120px + clamp(40px,5vw,96px));display:flex;align-items:flex-end;gap:clamp(18px,1.8vw,28px)}
.cans__brick{display:flex;flex-direction:column;align-items:center}
.brick{display:block;width:84px;height:30px;margin-top:-9px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.28))}
.can{--cw:40px;--ch:110px;position:relative;display:block;width:var(--cw);height:var(--ch);padding:0;margin:0;border:0;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;outline-offset:6px}
.cans__brick .can{z-index:1}
.can__art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;transform-origin:22% 100%}
.can__shadow{position:absolute;left:-14%;right:-14%;bottom:-4px;height:8px;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(3px);transition:opacity .2s}
.cans__brick .can__shadow{bottom:-3px;left:-6%;right:-6%;height:6px;background:rgba(40,12,6,.5)}
.can.is-out{cursor:default}
.can.is-out .can__art{visibility:hidden}
.can.is-out .can__shadow{opacity:.12}
.can[aria-pressed="true"]:focus-visible{outline-style:dashed}
/* idle cue: one can rocks on its heel once every few seconds, until any can has been picked up */
.can--cue .can__art{animation:can-shake 6s ease-in-out .7s infinite}
.cans.used .can--cue .can__art,.cans.is-off .can--cue .can__art{animation:none}
@keyframes can-shake{0%,13%,100%{transform:none}2%{transform:translateY(-3px) rotate(-3.5deg)}4%{transform:translateY(0) rotate(2.6deg)}6%{transform:translateY(-2.5px) rotate(-2.6deg)}8%{transform:translateY(0) rotate(1.6deg)}10%{transform:translateY(-1px) rotate(-.8deg)}11.5%{transform:rotate(.3deg)}}
@keyframes can-rock{0%,84%,100%{transform:none}87%{transform:rotate(-2.4deg)}90.5%{transform:rotate(1.3deg)}93.5%{transform:rotate(-.6deg)}96%{transform:rotate(.2deg)}}
/* set down: a short drop and settle on the base */
.can.is-settling .can__art{animation:can-settle .46s cubic-bezier(.25,.7,.35,1)}
@keyframes can-settle{0%{transform:translateY(-9px) rotate(-3deg)}38%{transform:translateY(0) rotate(2deg)}62%{transform:rotate(-1deg)}82%{transform:rotate(.35deg)}100%{transform:none}}
/* the can in hand: the nozzle sits at the pointer */
.can-held{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:none;filter:drop-shadow(5px 9px 7px rgba(0,0,0,.24));will-change:transform}
.can-held.on{display:block}
.can-held.is-flying{transition:transform .2s cubic-bezier(.4,0,.6,1)}
.can-held svg{width:100%;height:100%;display:block;overflow:visible}
.hero.is-holding,.hero.is-holding *{cursor:none!important}
/* ---------- PAINT ROLLER leaning on the wall by the door ---------- */
.roller-spot{position:absolute;z-index:7;bottom:calc(var(--foot) * .42);right:calc(var(--gut) + 3% + 178px + 16px);width:120px;height:220px}
.roller{--s:1;position:absolute;inset:0;padding:0;margin:0;border:0;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;outline-offset:6px}
.roller__art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;transform-origin:53% 100%;transform:rotate(-5deg)}
/* contact shadow under the handle foot, and the soft shade the head throws on the wall it leans on */
.roller__shadow{position:absolute;left:40%;width:22%;bottom:-3px;height:6px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(2.5px)}
.roller__shadow::before{content:"";position:absolute;left:-150%;top:-208px;width:420%;height:30px;border-radius:40%;background:rgba(0,0,0,.13);filter:blur(7px)}
.roller.is-out{cursor:default}
.roller.is-out .roller__art,.roller.is-out .roller__shadow::before{visibility:hidden}
.roller.is-out .roller__shadow{opacity:.15}
.roller.is-settling .roller__art{animation:roller-settle .5s cubic-bezier(.25,.7,.35,1)}
@keyframes roller-settle{0%{transform:translateY(-10px) rotate(-1deg)}40%{transform:translateY(0) rotate(-6.4deg)}65%{transform:rotate(-4.4deg)}85%{transform:rotate(-5.3deg)}100%{transform:rotate(-5deg)}}
.can-held.is-roller{filter:drop-shadow(4px 8px 6px rgba(0,0,0,.22))}
/* the "Fresh coat" control in the plinth */
.coat{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.coat__btn{min-height:44px;padding:0 18px;border:1px solid var(--line-2);background:#000;color:var(--paper);font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase}
.coat__btn:hover{border-color:var(--casper)}
.coat__note{font:500 12px/1.3 var(--text);color:var(--mid)}
/* reduced motion: the cans, brick and roller stay and still work; only their motion goes (no shake, no settle, no fly-home) */
@media (prefers-reduced-motion:reduce){.can--cue .can__art,.can.is-settling .can__art,.roller.is-settling .roller__art{animation:none!important}.can-held.is-flying{transition:none!important}}
.plinth{position:relative;z-index:5;background:#000;border-top:1px solid #000;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:var(--gut);padding:22px var(--gut) 26px;align-items:start}
.plinth::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:#000 var(--hatch);border-bottom:1px solid var(--line-2)}
.plinth > *{margin-top:18px}
.plinth .lede{font-size:clamp(16px,1.25vw,19px);color:var(--paper)}
.sunread{font:500 13px/1.45 var(--text);color:var(--soft);font-variant-numeric:tabular-nums}
.sunread b{color:var(--paper);font-weight:600}
.sunread svg{width:120px;height:34px;margin-bottom:6px;overflow:visible}
.plinth .cap{padding:0;display:block}

/* ---------- PIVOT DOOR (component 1) ---------- */
.pivot{--w:172px;--h:300px;position:relative;width:var(--w);height:var(--h);perspective:900px;background:var(--casper);display:block;
  box-shadow:0 0 0 6px #000;flex:none}
.pivot__in{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;
  font:700 28px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#000}
.pivot__leaf{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;
  background:var(--dove);color:var(--paper);transform-origin:32% 50%;transform:rotateY(0);transition:transform .5s var(--ease-heavy);
  background-image:linear-gradient(90deg,rgba(0,0,0,.18),transparent 14%,transparent 86%,rgba(0,0,0,.22)),
  repeating-linear-gradient(0deg,transparent 0 59px,rgba(0,0,0,.14) 59px 60px);
  padding:18px 16px;outline-offset:8px;backface-visibility:hidden}
.pivot__no{font:600 11px/1 var(--text);letter-spacing:.16em;color:var(--paper);text-shadow:0 -1px 0 #3d4041}
.pivot__label{font:800 30px/.92 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--paper);text-shadow:0 -1px 0 #353839,0 1px 0 #7d8182}
.pivot__bar{position:absolute;right:16px;top:30%;width:7px;height:38%;background:#0B0B0B;box-shadow:-2px 0 0 #4b4e4f}
.pivot__pin{position:absolute;left:32%;width:6px;height:6px;margin-left:-3px;background:#000}
.pivot__pin--t{top:-3px}.pivot__pin--b{bottom:-3px}
.pivot:hover .pivot__leaf,.pivot__leaf:focus-visible{transform:rotateY(-16deg)}
.pivot.is-open .pivot__leaf{transform:rotateY(-78deg)}
.pivot__hint{position:absolute;left:0;right:0;top:calc(100% + 14px);font:600 11px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center}
@media (prefers-reduced-motion:reduce){.pivot__leaf{transition:none}.pivot:hover .pivot__leaf,.pivot__leaf:focus-visible{transform:none;box-shadow:inset 0 0 0 4px var(--casper)}}

/* ---------- BAYS: what we make ---------- */
.bays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);margin:0 var(--gut);position:relative}
.bay{position:relative;min-height:min(86vh,820px);padding:0 clamp(16px,1.6vw,28px) 28px;border-right:1px solid var(--line-2);display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;transition:background .3s}
.bay:first-child{border-left:1px solid var(--line-2)}
.bay:hover{background:#0f1010}
.bay__bub{margin:-15px 0 0 calc(-1 * clamp(16px,1.6vw,28px) - 15px)}
.bay:first-child .bay__bub{margin-left:calc(-1 * clamp(16px,1.6vw,28px) - 15px)}
.bay__no{font:600 12px/1 var(--text);letter-spacing:.14em;color:var(--mid);font-variant-numeric:tabular-nums;padding-top:10px}
.bay__title{writing-mode:vertical-rl;transform:rotate(180deg);font:800 clamp(72px,7.4vw,132px)/.82 var(--display);text-transform:uppercase;letter-spacing:.01em;
  justify-self:start;align-self:end;margin:0;white-space:nowrap}
.bay__title small{font:inherit;font-weight:200;color:var(--dove)}
.bay__body{align-self:end;font-size:16px;line-height:1.5;color:var(--soft)}
.bay__body p{color:var(--paper);margin-bottom:16px}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.spec li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:9px 0;font-size:14px;color:var(--soft)}
.spec li::after{content:attr(data-n);font-variant-numeric:tabular-nums;color:var(--mid)}
/* ONESTORY (7 Oct 2026): six bays in three groups. MAKE spans A to D on the first row; RUN (E) and GROW (F) share
   the second row, two columns each. A thin all-caps label with a hairline span names each group: a drawing note, not a control. */
.bays--groups{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
.bays--groups .bay{min-height:min(78vh,720px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bays__grp,.grp{display:flex;align-items:center;gap:14px;margin:0;padding:26px 0 18px;font:600 11px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:#B9BDBF;pointer-events:none;user-select:none}
.bays__grp i,.grp i{position:relative;flex:1;height:1px;background:#686B6C}
.bays__grp i::before,.bays__grp i::after,.grp i::before,.grp i::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:#686B6C}
.bays__grp i::before,.grp i::before{left:0}.bays__grp i::after,.grp i::after{right:0}
.bays__grp--make{grid-column:1/-1;grid-row:1;padding-top:6px}
.bays--groups > .bay:nth-of-type(1){grid-row:2;grid-column:1;border-left:1px solid var(--line-2)}
.bays--groups > .bay:nth-of-type(2){grid-row:2;grid-column:2}
.bays--groups > .bay:nth-of-type(3){grid-row:2;grid-column:3}
.bays--groups > .bay:nth-of-type(4){grid-row:2;grid-column:4}
.bays--groups > .bay:nth-of-type(4)::after,.bays--groups > .bay--f::after{content:"";position:absolute;right:-5px;top:0;bottom:0;width:9px;background:#000 var(--hatch);border-inline:1px solid var(--line-2)}
.bays__grp--run{grid-row:3;grid-column:1/3;padding-right:clamp(16px,1.6vw,28px)}
.bays__grp--grow{grid-row:3;grid-column:3/5;padding-left:clamp(16px,1.6vw,28px)}
.bays--groups > .bay--e{grid-row:4;grid-column:1/3;border-left:1px solid var(--line-2)}
.bays--groups > .bay--f{grid-row:4;grid-column:3/5}
.bays--groups .bay--e .bay__body,.bays--groups .bay--f .bay__body{max-width:30em}
@media (max-width:1100px){
  .bays--groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bays--groups .bay{min-height:600px}
  .bays--groups > .bay:nth-of-type(1){grid-row:2;grid-column:1}
  .bays--groups > .bay:nth-of-type(2){grid-row:2;grid-column:2}
  .bays--groups > .bay:nth-of-type(3){grid-row:3;grid-column:1;border-left:1px solid var(--line-2)}
  .bays--groups > .bay:nth-of-type(4){grid-row:3;grid-column:2}
  .bays--groups > .bay:nth-of-type(2)::after{content:"";position:absolute;right:-5px;top:0;bottom:0;width:9px;background:#000 var(--hatch);border-inline:1px solid var(--line-2)}
  .bays__grp--run{grid-row:4;grid-column:1}
  .bays__grp--grow{grid-row:4;grid-column:2}
  .bays--groups > .bay--e{grid-row:5;grid-column:1}
  .bays--groups > .bay--f{grid-row:5;grid-column:2}
}
@media (max-width:640px){
  .bays--groups{grid-template-columns:1fr}
  .bays--groups > *{grid-row:auto!important;grid-column:1!important}
  .bays--groups .bay{min-height:0;border-left:1px solid var(--line-2)}
  .bays--groups .bay::after{content:none!important}
  .bays__grp--run,.bays__grp--grow{padding-left:0;padding-right:0}
}
.bays__pier{position:absolute;top:0;bottom:0;width:9px;background:#000 var(--hatch);border-inline:1px solid var(--line-2);transform:translateX(-50%)}
@media (max-width:1100px){.bays{grid-template-columns:repeat(2,minmax(0,1fr))}.bay{min-height:640px;border-bottom:1px solid var(--line-2)}.bay:nth-child(3){border-left:1px solid var(--line-2)}}
@media (max-width:640px){
  .bays{grid-template-columns:1fr}
  .bay{min-height:0;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:14px 16px;padding-bottom:24px;border-left:1px solid var(--line-2)}
  .bay__bub{grid-column:1/3}
  .bay__no{grid-column:1/3;padding-top:0}
  .bay__title{grid-column:1;grid-row:3;font-size:76px;align-self:stretch}
  .bay__body{grid-column:2;grid-row:3}
}

/* ---------- CONSTRUCTION SEQUENCE (component 5) ---------- */
.seq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gut);padding:0 var(--gut)}
.seq__tabs{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.seq__tab{display:grid;grid-template-columns:52px 1fr;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:18px 0;gap:4px 12px;color:var(--soft);position:relative;min-height:44px}
.seq__tab::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:transparent}
.seq__tab[aria-selected="true"]{color:var(--paper)}
.seq__tab[aria-selected="true"]::before{background:var(--casper)}
.seq__n{grid-row:1/3;font:700 34px/.9 var(--display);color:var(--dove);padding-left:14px;font-variant-numeric:tabular-nums}
.seq__tab[aria-selected="true"] .seq__n{color:var(--casper)}
.seq__name{font:800 34px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.seq__sub{font:600 11px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.seq__tab:hover .seq__name{color:var(--paper)}
.seq__k{display:flex;gap:12px;align-items:baseline;margin:0 0 12px;font:600 11px/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#B9BDBF}
.seq__k span{color:#8E9294}
.seq__tab{grid-template-columns:52px minmax(0,1fr) auto}
.seq__sym{grid-column:3;grid-row:1/3;align-self:center;padding-right:14px;color:#8E9294;display:flex}
.seq__sym .msym{width:28px;height:28px}
.seq__tab[aria-selected="true"] .seq__sym{color:var(--casper)}
.seq__sub{display:flex;gap:14px;min-height:13px}
.seq__tag{display:inline-flex;align-items:center;gap:6px}
.seq__tag::before{content:"";width:10px;height:1px;background:#686B6C}
.seq__panel{border:1px solid var(--line-2);background:#000;position:relative}
.seq__draw{width:100%;height:auto;aspect-ratio:760/520}
.seq__note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;border-top:1px solid var(--line-2);padding:16px 18px;align-items:start;min-height:96px}
.seq__note p{margin:0;color:var(--paper);max-width:46em}
.seq__stage{font:600 12px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);white-space:nowrap;font-variant-numeric:tabular-nums}
.seq__draw .st{opacity:0;transition:opacity .45s ease}
.seq__draw .st.on{opacity:1}
.seq__draw .frm line,.seq__draw .frm path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset .9s var(--ease-heavy)}
.seq__draw .frm.on line,.seq__draw .frm.on path{stroke-dashoffset:0}
.seq__draw .pan rect{transform:translateY(-14px);opacity:0;transition:transform .5s var(--ease-heavy),opacity .4s}
.seq__draw .pan.on rect{transform:none;opacity:1}
.seq__draw .lit rect{opacity:0;transition:opacity .3s}
.seq__draw .lit.on rect{opacity:1}
@media (prefers-reduced-motion:reduce){.seq__draw *{transition:none!important}}
@media (max-width:900px){.seq{grid-template-columns:1fr}.seq__tabs{display:grid;grid-template-columns:1fr;border-left:1px solid var(--line-2)}.seq__tab{border-right:1px solid var(--line-2);grid-template-columns:40px 1fr;padding:14px 0}.seq__n{font-size:26px;padding-left:10px}.seq__name{font-size:26px}}

/* interstitial photo band */
.band{position:relative;margin:0;height:clamp(300px,62vh,640px);overflow:hidden;background:#000;border-block:1px solid var(--line-2)}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.band figcaption{position:absolute;left:var(--gut);bottom:0;background:#000;padding:10px 14px 8px;font:500 11px/1.4 var(--text);color:var(--mid);letter-spacing:.04em}
.band figcaption a{color:var(--soft)}
.band__dim{position:absolute;inset:auto var(--gut) 40px auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--paper);font:800 clamp(40px,6vw,92px)/.84 var(--display);text-transform:uppercase;text-align:right;mix-blend-mode:normal}
.band__dim span{background:#000;padding:4px 10px 0}

/* ---------- BRISE-SOLEIL work cards (component 6) ---------- */
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);padding:0 var(--gut)}
.louvre{display:flex;flex-direction:column}
.louvre__btn{position:relative;display:block;width:100%;aspect-ratio:3/4.4;padding:0;border:0;background:#000;perspective:700px;overflow:hidden}
.louvre__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.louvre__tag{position:absolute;left:12px;bottom:12px;right:12px;z-index:4;opacity:0;transition:opacity .3s .25s;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.louvre__tag b{font:800 34px/.9 var(--display);text-transform:uppercase;color:var(--paper);background:#000;padding:6px 8px 2px}
.louvre__tag i{font:600 11px/1 var(--text);font-style:normal;letter-spacing:.14em;text-transform:uppercase;background:var(--casper);color:#000;padding:6px 8px}
.louvre__fins{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n,7),1fr);z-index:2;pointer-events:none;overflow:hidden}
.louvre__fins span{display:block;background:var(--dove);transform:translate3d(0,0,0);transition:transform .65s cubic-bezier(.65,0,.25,1);transition-delay:calc((var(--n,7) - 1 - var(--i)) * 18ms);will-change:transform;
  background-image:linear-gradient(90deg,#80848566 0 2px,transparent 2px 38%,rgba(0,0,0,.16) 100%);border-right:3px solid #2f3132;box-shadow:inset -1px 0 0 #000}
.louvre__num{position:absolute;z-index:3;top:12px;left:12px;font:700 13px/1 var(--text);letter-spacing:.14em;color:var(--paper);background:#000;padding:6px 8px;pointer-events:none;transition:opacity .3s}
/* Slide open: every slat travels right past the frame edge, a sliding panel drawn left to right */
.louvre.open .louvre__fins span,.louvre:focus-within .louvre__fins span{transform:translate3d(calc((var(--n,7) - var(--i)) * 100% + 6px),0,0)}
.louvre.open .louvre__num{opacity:1}
.louvre.open .louvre__tag,.louvre__btn:focus-visible .louvre__tag{opacity:1}
@media (hover:hover) and (pointer:fine){.louvre:hover .louvre__fins span{transform:translate3d(calc((var(--n,7) - var(--i)) * 100% + 6px),0,0)}.louvre__btn:hover .louvre__tag{opacity:1}}
.louvre__sill{display:flex;flex-direction:column;gap:4px;border-top:6px solid var(--line-2);padding-top:10px;margin-top:0}
.louvre__sill strong{font:700 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.louvre__sill .cap{padding:0;justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.louvre__fins{display:none}.louvre__tag{transition:none}}
@media (max-width:1000px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* schedules (tables) */
.sched{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sched caption{text-align:left;font:800 30px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;padding:0 0 14px;color:var(--paper)}
.sched th{font:600 11px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--soft)}
.sched td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:16px}
.sched td.n,.sched th.n{text-align:right;padding-right:0}
.sched td.no{color:var(--mid);font-size:13px;width:64px}
.sched td.nm{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.sched tr:hover td{background:#0f1010}
/* pricing sheet F-520: a quiet schedule, names in display caps, figures right-aligned */
.pricex{max-width:820px}
.pricex .grp{padding:0 0 18px}
.pricex__t th[scope="row"]{font:800 clamp(24px,2.4vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--paper);padding:18px 12px 18px 0;border-bottom:1px solid var(--line-2);vertical-align:baseline}
.pricex__t td{font:500 clamp(16px,1.4vw,20px)/1.2 var(--text);color:var(--paper);white-space:nowrap;vertical-align:baseline;padding-block:18px}
.pricex__t th.n+th.n,.pricex__t td.n+td.n{padding-left:clamp(16px,3vw,48px)}
.pricex__note{margin:18px 0 0;color:var(--soft);font-size:15px;line-height:1.55;max-width:40em}
@media (max-width:520px){ .pricex__t th[scope="row"]{font-size:22px} .pricex__t td{font-size:15px} }

/* ---------- TITLE BLOCK form (component 4) ---------- */
.tb{border:2px solid var(--paper);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));background:#000;position:relative}
.tb__c{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.tb__c > label,.tb__c > .tb__l{font:600 11px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.tb__c input,.tb__c select,.tb__c textarea{width:100%;background:transparent;border:0;border-bottom:1px solid transparent;padding:6px 0;font:500 18px/1.35 var(--text);color:var(--paper);min-height:40px;border-radius:0}
.tb__c select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(-45deg,transparent 50%,var(--soft) 50%);background-size:6px 6px;background-position:calc(100% - 10px) 55%,calc(100% - 4px) 55%;background-repeat:no-repeat;padding-right:24px}
.tb__c select option{background:#000;color:var(--paper)}
.tb__c textarea{resize:vertical;min-height:120px}
.tb__c input::placeholder,.tb__c textarea::placeholder{color:#8e9294}
.tb__c input:focus-visible,.tb__c select:focus-visible,.tb__c textarea:focus-visible{outline:0;border-bottom-color:var(--casper)}
.tb__c:focus-within{background:#0e0f0f}
.tb__c input[type=date]{color-scheme:dark}
.tb__c output,.tb__ro{font:500 18px/1.35 var(--text);color:var(--paper);font-variant-numeric:tabular-nums;padding:6px 0;min-height:40px;display:block}
.tb__err{font:600 12px/1.2 var(--text);color:var(--casper);min-height:0}
.tb__err:empty{display:none}
.tb__scope{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.tb__scope legend{padding:0;margin-bottom:8px;font:600 11px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);float:left;width:100%}
.chk{position:relative}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);font:600 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);cursor:pointer}
.chk span::before{content:"";width:14px;height:14px;border:1px solid var(--soft);flex:none}
.chk input:checked + span{color:#000;background:var(--casper);border-color:var(--casper)}
.chk input:checked + span::before{background:#000;border-color:#000}
.chk input:focus-visible + span{outline:1px solid var(--casper);outline-offset:3px}
.tb__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border-bottom:2px solid var(--paper);flex-wrap:wrap}
.tb__head h3{font:800 34px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.tb__submit{grid-column:span 4;border:0;background:var(--paper);color:#000;font:800 30px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;min-height:96px;display:flex;align-items:center;justify-content:center;gap:12px;border-left:1px solid var(--line-2)}
.tb__submit:hover{background:var(--casper)}
.tb__submit:focus-visible{outline-color:var(--casper);outline-offset:-6px;outline:2px solid #000}
.tb__stampzone{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;z-index:5}
.stamp{border:5px solid var(--casper);outline:2px solid var(--casper);outline-offset:4px;color:var(--casper);padding:14px 22px 10px;text-align:center;
  font:900 clamp(32px,4.8vw,64px)/.88 var(--display);text-transform:uppercase;letter-spacing:.04em;transform:rotate(-7deg) scale(1);opacity:0;background:rgba(0,0,0,.72);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cg fill='%23000' fill-opacity='.55'%3E%3Crect x='7' y='9' width='2' height='1'/%3E%3Crect x='31' y='4' width='1' height='2'/%3E%3Crect x='48' y='22' width='2' height='2'/%3E%3Crect x='19' y='38' width='1' height='1'/%3E%3Crect x='40' y='47' width='2' height='1'/%3E%3Crect x='5' y='52' width='1' height='2'/%3E%3Crect x='26' y='26' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");mask-size:60px 60px}
.stamp small{display:block;font:700 12px/1.3 var(--text);letter-spacing:.18em;margin-top:8px}
.stamp.down{animation:stamp .34s cubic-bezier(.3,0,.2,1) forwards}
@keyframes stamp{0%{opacity:0;transform:rotate(-7deg) scale(1.6)}60%{opacity:1;transform:rotate(-7deg) scale(.97)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.stamp.down{animation:none;opacity:1}}
.tb.shake{animation:none}

/* ---------- LAYING COURSES loader (component 10) ---------- */
.courses{display:inline-flex;flex-direction:column;gap:10px;align-items:flex-start}
.courses__grid{display:grid;grid-template-columns:repeat(11,var(--u,10px));grid-auto-rows:var(--u,10px);gap:2px;transform:scaleY(-1)}
.courses__grid i{display:block;background:var(--slab-3);opacity:.35}
.courses__grid i.laid{opacity:1;background:#343637;animation:lay .22s var(--ease-out)}
.courses__grid i.laid.k{background:var(--casper)}
@keyframes lay{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
.courses__pct{font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.courses__grid i.laid{animation:none}}

/* ---------- FOUNDATION STONE toast (component 9) ---------- */
.stones{position:fixed;left:50%;bottom:24px;z-index:300;transform:translateX(-50%);width:min(460px,calc(100vw - 24px));pointer-events:none;padding-left:calc(var(--rail)/2)}
.stone{pointer-events:auto;position:relative;background:var(--casper);color:#11161a;padding:18px 22px 16px;border-bottom:8px solid #59646b;
  background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.025) 3px 4px);display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:start}
.stone::before{content:"";position:absolute;left:-6px;right:-6px;bottom:-14px;height:6px;background:#000}
.stone__t{font:900 34px/.9 var(--display);text-transform:uppercase;letter-spacing:.05em;color:#11161a;text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 #6f7f89}
.stone__m{grid-column:1;font:600 14px/1.4 var(--text);color:#11161a;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 #7c8b94;letter-spacing:.02em}
.stone__x{grid-column:2;grid-row:1/3;width:44px;height:44px;border:1px solid #11161a;background:transparent;color:#11161a;font:500 20px/1 var(--text)}
.stone.drop{animation:drop .36s cubic-bezier(.5,0,1,.6) both, settle .2s .36s ease-out both}
@keyframes drop{from{transform:translateY(-120px);opacity:0}70%{opacity:1}to{transform:translateY(0);opacity:1}}
@keyframes settle{0%{transform:translateY(0)}40%{transform:translateY(3px)}100%{transform:translateY(0)}}
.stone.lift{transition:transform .3s ease-in,opacity .3s;transform:translateY(-30px);opacity:0}
@media (prefers-reduced-motion:reduce){.stone.drop{animation:fade .2s both}.stone.lift{transition:opacity .2s;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:899px){.stones{padding-left:0}}

/* ---------- ROOM SCHEDULE palette (component 8) ---------- */
.pal{position:fixed;inset:0;z-index:250;display:none;background:rgba(0,0,0,.86);padding:min(10vh,90px) 16px 16px;overflow:auto}
.pal.open{display:block}
.pal__sheet{max-width:1040px;margin:0 auto;background:var(--ink);border:2px solid var(--paper);display:grid;grid-template-columns:minmax(0,1fr) 300px}
.pal__top{grid-column:1/-1;display:flex;align-items:stretch;border-bottom:2px solid var(--paper)}
.pal__top label{display:flex;align-items:center;padding:0 16px;font:600 11px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);border-right:1px solid var(--line-2);white-space:nowrap}
.pal__q{flex:1;min-width:0;background:transparent;border:0;padding:18px 16px;font:600 22px/1.2 var(--text);color:var(--paper);outline:none}
.pal__q::placeholder{color:#8e9294}
.pal__esc{border:0;border-left:1px solid var(--line-2);background:none;color:var(--soft);padding:0 16px;font:600 11px/1 var(--text);letter-spacing:.12em;min-width:56px}
.pal__tbl{max-height:min(56vh,520px);overflow:auto;border-right:1px solid var(--line-2)}
.pal__hd,.pal__opt{display:grid;grid-template-columns:64px minmax(0,1.4fr) 54px minmax(0,1.3fr);gap:12px;padding:0 16px;align-items:center}
.pal__hd{position:sticky;top:0;background:var(--ink);font:600 11px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);height:36px;border-bottom:1px solid var(--soft);z-index:1}
.pal__list{list-style:none;margin:0;padding:0}
.pal__opt{min-height:48px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;color:var(--soft)}
.pal__opt b{font:700 21px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--paper);font-weight:700}
.pal__opt .no,.pal__opt .lv{font-variant-numeric:tabular-nums;font-size:13px;color:var(--mid)}
.pal__opt .nt{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal__opt[aria-selected="true"]{background:var(--casper);color:#000}
.pal__opt[aria-selected="true"] b,.pal__opt[aria-selected="true"] .no,.pal__opt[aria-selected="true"] .lv,.pal__opt[aria-selected="true"] .nt{color:#000}
.pal__empty{padding:22px 16px;color:var(--soft)}
.pal__plan{padding:16px;display:flex;flex-direction:column;gap:10px}
.pal__plan svg{width:100%;height:auto;background:#000;border:1px solid var(--line-2)}
.pal__plan .room{fill:#000;stroke:var(--dove);stroke-width:1}
.pal__plan .room.sel{fill:url(#poche);stroke:var(--paper);stroke-width:2}
.pal__plan .wall-p{fill:none;stroke:var(--paper);stroke-width:5}
.pal__plan text{font:600 9px var(--text);fill:var(--mid);letter-spacing:.06em}
.pal__plan .lbl{font:600 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.pal__keys{grid-column:1/-1;border-top:1px solid var(--line-2);padding:10px 16px;font:500 12px/1.3 var(--text);color:var(--mid);display:flex;gap:20px;flex-wrap:wrap}
.pal__keys kbd{font:600 11px/1 var(--text);border:1px solid var(--line-2);padding:3px 6px;color:var(--soft)}
@media (max-width:760px){.pal{padding-top:12px}.pal__sheet{grid-template-columns:1fr}.pal__plan{display:none}.pal__hd,.pal__opt{grid-template-columns:48px minmax(0,1fr) 40px;}.pal__hd .nt,.pal__opt .nt{display:none}.pal__top label{display:none}.pal__tbl{border-right:0;max-height:70vh}}

/* ---------- ROOF / footer ---------- */
.roof{background:#000;border-top:1px solid var(--line-2)}
.roof__plan{width:100%;height:auto;display:block;border-bottom:1px solid var(--line-2)}
.roof__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,2fr) minmax(0,4fr);gap:var(--gut);padding:clamp(28px,4vw,56px) var(--gut)}
.roof h3{font:600 11px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.roof ul{list-style:none;margin:0;padding:0}
.roof li{margin:0 0 4px}
.roof li a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--paper)}
.roof li a:hover{color:var(--casper);text-decoration:underline;text-underline-offset:3px}
.credits li{font-size:13px;line-height:1.45;color:var(--soft);margin-bottom:10px}
.credits li a{display:inline;min-height:0;color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.credits b{color:var(--paper);font-weight:600}
.roof__lock{width:min(280px,70%);color:var(--paper);margin-bottom:22px}
.roof__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px var(--gut) 22px;border-top:1px solid var(--line-2);font:500 12px/1.4 var(--text);color:var(--mid);font-variant-numeric:tabular-nums;background:#000 }
.found{height:30px;background:#000 var(--hatch);border-top:1px solid var(--line-2)}
/* ---------- home footer: the street (ELEVATOR-3). A dusk skyline with the street lift, a hatched ground strip,
   then the site index on solid black. Every text pair is paper, #B9BDBF or #8E9294 on black or the darkest sky band. */
.foot{position:relative;background:#000;border-top:1px solid var(--line-2)}
.foot__scene{position:relative;height:clamp(300px,25vw,360px);overflow:hidden;background:#0B0B0C}
.foot__sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left bottom;display:block}
.foot__tag{position:absolute;top:clamp(24px,2.6vw,36px);z-index:1;margin:0;display:flex;flex-direction:column;gap:6px;font:600 11px/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#B9BDBF}
.foot__tag::after{content:"";width:18px;height:1px;background:#8E9294;margin-top:6px}
.foot__tag--l{left:var(--gut)}
.foot__tag--r{right:calc(var(--gut) + var(--pier) + 6px);text-align:left}
.foot__ground{height:18px;background:#000 var(--hatch);border-block:1px solid var(--line-2)}
.foot__totop{display:none;margin:0;padding:18px var(--gut) 6px}
.foot__band{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,1.5fr) minmax(0,1.9fr) minmax(0,1.6fr) minmax(0,2.8fr);padding:clamp(30px,3.6vw,52px) 0 clamp(26px,3vw,40px)}
.foot__band>*{padding:0 var(--gut);min-width:0}
.foot__band>*+*{border-left:1px solid var(--line-2)}
.foot h3{font:600 11px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#8E9294;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none;color:var(--paper);font-size:15px}
.foot li a:hover{color:var(--casper);text-decoration:underline;text-underline-offset:3px}
.foot__lock{width:min(240px,80%);color:var(--paper);margin-bottom:18px}
.foot__about{color:#B9BDBF;font-size:15px;line-height:1.55;max-width:26em;margin:0 0 18px}
.foot__copy{margin:18px 0 0;font:600 11px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#8E9294}
.foot__loop p{margin:0 0 14px;color:#B9BDBF;font-size:15px;line-height:1.5}
.foot__field{display:flex;border:1px solid #686B6C;background:#000}
.foot__field input{flex:1;min-width:0;height:46px;padding:0 14px;border:0;background:transparent;color:var(--paper);font:400 15px/1 var(--text)}
.foot__field input::placeholder{color:#8E9294}
.foot__field input:focus-visible{outline:2px solid #AABBC5;outline-offset:-2px}
.foot__field button{flex:none;width:48px;height:46px;display:grid;place-items:center;border:0;border-left:1px solid #3B3E3F;background:#000;color:#8E9294;cursor:not-allowed}
.foot__field button:focus-visible{outline:2px solid #AABBC5;outline-offset:-2px}
.foot__consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.45;color:#B9BDBF;cursor:pointer}
.foot__consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#AABBC5}
.foot__loop .foot__note{margin:10px 0 0;font-size:12px;color:#8E9294}
.foot__base{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:14px var(--gut) 20px;border-top:1px solid var(--line-2);font:500 12px/1.45 var(--text);color:#8E9294}
.foot__base span:last-child{letter-spacing:.14em;text-transform:uppercase;font-weight:600}
@media (max-width:1240px){
  .foot__band{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .foot__brand{grid-column:1/-1}
  .foot__band>.foot__brand+*{border-left:0}
  .foot__loop{grid-column:1/-1;border-left:0!important;max-width:520px}
}
@media (max-width:899px){
  .foot__scene{height:230px}
  .foot__tag--r{display:none}
  .foot__totop{display:block}
}
@media (max-width:640px){
  .foot__band{grid-template-columns:1fr}
  .foot__band>*+*{border-left:0;border-top:1px solid var(--line-2);padding-top:26px}
  .foot__band>.foot__brand+*{border-top:0;padding-top:0}
  .foot__brand{padding-bottom:4px}
  .foot__lock{width:min(180px,55%)}
}
@media (max-width:1000px){.roof__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.roof__grid{grid-template-columns:1fr}}

/* ---------- drawing SHEETS (components / identity / type) ---------- */
.sheet{margin:0 var(--gut) clamp(40px,5vw,72px);border:2px solid var(--paper);background:var(--ink);position:relative;scroll-margin-top:24px}
.sheet__body{padding:clamp(18px,3vw,44px);position:relative;min-width:0}
.sheet__tb{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) repeat(3,minmax(0,1.2fr));border-top:2px solid var(--paper)}
.sheet__tb > div{padding:10px 14px;border-right:1px solid var(--line-2);min-width:0}
.sheet__tb > div:last-child{border-right:0}
.sheet__tb .k{display:block;font:600 10px/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}
.sheet__tb .v{font:500 14px/1.35 var(--text);color:var(--paper);font-variant-numeric:tabular-nums}
.sheet__tb .big{font:800 34px/1 var(--display);letter-spacing:.03em}
.sheet__tb h2{font:800 28px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.became{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line-2)}
.became p{margin:0;padding:12px 14px;font-size:15px;color:var(--paper)}
.became p + p{border-left:1px solid var(--line-2)}
.became b{display:block;font:600 10px/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}
.sheet__notes{font-size:14px;color:var(--soft);max-width:60em;margin-top:22px}
.sheet__notes b{color:var(--paper);font-weight:600}
@media (max-width:760px){.sheet__tb{grid-template-columns:1fr 1fr}.sheet__tb > div{border-bottom:1px solid var(--line-2)}.sheet__tb > div:nth-child(2){grid-column:1/-1;order:-1}.became{grid-template-columns:1fr}.became p + p{border-left:0;border-top:1px solid var(--line-2)}}

.pagehead{padding:clamp(32px,5vw,72px) var(--gut) clamp(28px,3vw,48px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:start}
.pagehead h1{font:800 clamp(64px,10vw,180px)/.8 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0}
.pagehead .lede{color:var(--soft)}
.crumbs{display:flex;gap:6px 18px;flex-wrap:wrap;padding:14px var(--gut);border-bottom:1px solid var(--line);font:600 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase}
.crumbs a{color:var(--soft);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover,.crumbs a[aria-current="page"]{color:var(--paper)}
.crumbs a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--casper)}
@media (max-width:760px){.pagehead{grid-template-columns:1fr}}

/* responsive hero + general */
@media (max-width:1100px){
  .floor__head{grid-template-columns:minmax(0,2fr) minmax(0,7fr)}
  .floor__head > :nth-child(3){grid-column:1/-1;margin-top:28px}
  .price{grid-template-columns:1fr}
  .plinth{grid-template-columns:1fr 1fr}
  .plinth > :first-child{grid-column:1/-1}
}
@media (max-width:899px){
  .hero{min-height:auto}
  .hero__top{height:auto;min-height:52px;padding-block:8px}
  .hero__bubs{display:none}
  .hero__word{width:84px}
  .wall{min-height:calc(100svh - 56px - 54px - 16px)}
  .wall{--foot:14px}
  .wall__inner{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:24px var(--gut) 0;gap:26px}
  .hero__h{grid-row:1;grid-column:1;align-self:start;font-size:min(25vw,170px);margin:0;max-width:74%}
  .hero__door{grid-column:1;grid-row:3;margin:0;justify-self:end}
  .cans{right:auto;left:var(--gut);gap:12px}
  .can{--cw:28px;--ch:77px}
  .brick{width:58px;height:21px;margin-top:-6px}
  .roller-spot{right:calc(var(--gut) + 156px + 4px);width:66px;height:121px}
  .roller__shadow::before{top:-114px;height:18px}
  .seq__note{grid-template-columns:1fr;gap:8px}
  .seq__note .seq__stage{order:-1;white-space:normal}
  .pivot{--w:150px;--h:232px}
  .pivot__label{font-size:26px}
  .plinth{grid-template-columns:1fr;gap:4px}
  .floor__head{grid-template-columns:1fr;row-gap:12px}
  .lvl{font-size:104px}
  .floor__head > :nth-child(3){margin-top:16px}
}
@media (max-width:640px){
  .works{grid-template-columns:1fr}
  .louvre__btn{aspect-ratio:4/4.2}
  .tb__c{grid-column:1/-1!important}
  .tb__submit{grid-column:1/-1!important;min-height:80px}
  .band__dim{font-size:44px;bottom:48px}
}
@media (max-width:860px){.cols > *{grid-column:1/-1!important}}

/* round 2 */
.bay::before{content:"";position:absolute;left:-5px;top:0;bottom:0;width:9px;background:#000 var(--hatch);border-inline:1px solid var(--line-2);z-index:0}
.bay:last-child::after{content:"";position:absolute;right:-5px;top:0;bottom:0;width:9px;background:#000 var(--hatch);border-inline:1px solid var(--line-2)}
.bay > *{position:relative;z-index:1}
.bay__bub{z-index:2}
.roof__lock{max-width:240px}
@media (max-width:640px){
  .sched--stack thead{display:none}
  .sched--stack,.sched--stack tbody,.sched--stack tr,.sched--stack td{display:block;width:auto}
  .sched--stack tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
  .sched--stack td{border:0;padding:0;text-align:left!important}
  .sched--stack td.no{grid-column:1/-1;width:auto}
  .sched--stack td.nm{grid-column:1/-1;font-size:28px}
  .sched--stack td[data-label]:not(.no):not(.nm)::before{content:attr(data-label);display:block;font:600 10px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:2px}
  .sched--stack td[data-label="Built for"]{grid-column:1/-1}
  .lib img{aspect-ratio:16/10!important;object-position:50% 30%}
}


/* =====================================================================================================
   MERGE · site shell: the directory strip (one nav for every page) and the roof's booking link
   ===================================================================================================== */
.dirbar{--nav-gap:24px;position:sticky;top:0;z-index:55;display:flex;align-items:stretch;min-height:52px;padding-right:var(--nav-gap);background:#000;border-bottom:1px solid var(--line)}
.dirbar__home{display:flex;align-items:center;gap:10px;padding:0 18px 0 var(--gut);font:800 18px/1 var(--display);letter-spacing:.18em;text-decoration:none;color:var(--paper);border-right:1px solid var(--line);white-space:nowrap}
.dirbar__home i,.dirbar__list i{font:600 10px/1 var(--text);font-style:normal;letter-spacing:.12em;color:var(--mid)}
.dirbar__list{list-style:none;margin:0;padding:0 8px;display:flex;align-items:stretch;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.dirbar__list::-webkit-scrollbar{display:none}
.dirbar__list>li>a{display:flex;align-items:center;gap:7px;height:100%;padding:0 12px;font:600 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-decoration:none;white-space:nowrap;position:relative}
.dirbar__list>li>a:hover{color:var(--paper)}
.dirbar__list>li>a[aria-current="page"],.dirbar__home[aria-current="page"]{color:var(--paper)}
.dirbar__list>li>a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--casper)}
.dirbar__bookli{display:flex;align-items:center}
.dirbar__list>li>a.dirbar__book{height:30px;margin:0 6px;padding:0 14px 0 12px;gap:8px;color:var(--paper);border:1px solid rgba(184,151,90,.55);border-radius:1px;background:none}
.dirbar__list>li>a.dirbar__book::before{content:"";width:5px;height:5px;border-radius:50%;background:#B8975A;flex:none;animation:book-breathe 2.4s ease-in-out infinite}
@keyframes book-breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(184,151,90,0)}50%{transform:scale(1.35);box-shadow:0 0 6px 2px rgba(184,151,90,.35)}}
@media (prefers-reduced-motion:reduce){.dirbar__list>li>a.dirbar__book::before{animation:none}}
.dirbar__list>li>a.dirbar__book:hover,.dirbar__list>li>a.dirbar__book:focus-visible{color:var(--paper);border-color:#B8975A;background:rgba(184,151,90,.08)}
@media (max-width:1680px){ .dirbar__list i{display:none} }
@media (max-width:1300px){ .dirbar__list>li>a{padding:0 9px;letter-spacing:.08em} .dirbar__list>li>a.dirbar__book{padding:0 11px 0 10px} }
@media (max-width:899px){ .dirbar{top:56px;--nav-gap:12px} .dirbar__home{display:none} }
@media (max-width:520px){ .dirbar__list>li>a.dirbar__book{font-size:11px;letter-spacing:.08em} }
.roof__book{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--casper);color:#000;font:700 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.roof__book:hover{background:var(--paper)}

/* instrument bay: a Datum instrument mounted on an Elevation floor, framed like a recessed panel in the slab */
.bayx{margin:0 var(--gut) clamp(40px,5vw,72px);border:1px solid var(--line-2);background:#000;position:relative}
.bayx::before{content:"";position:absolute;left:-1px;right:-1px;top:-7px;height:6px;background:#000 var(--hatch);border:1px solid var(--line-2);border-bottom:0}
.bayx__in{padding:clamp(20px,2.6vw,40px) clamp(16px,2.2vw,36px)}
.dx{color:var(--d-ink);font-family:var(--d-text)}
.dx .mono{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:.13em}
.dx :focus-visible{outline:1px dashed var(--teal);outline-offset:4px}
/* small resets where an Elevation global class shares a name with an instrument part */
.dx .shelfc .datum{padding:0;font:inherit;letter-spacing:normal;text-transform:none;flex-wrap:nowrap}
.dx .book.d{line-height:1;letter-spacing:normal}
.dx h2,.dx h3{font-weight:inherit}
/* the case-study / commerce placeholder token: impossible to mistake for real copy */
.todo{display:inline;font:600 .82em/1.75 var(--text);-webkit-box-decoration-break:clone;box-decoration-break:clone;letter-spacing:.04em;color:#000;background:#E8D9A0;padding:.12em .45em;border:1px dashed #6E5F2A;white-space:normal}

/* =====================================================================================================
   MERGE · Datum instruments, ported from v4-datum/assets/site.css and scoped under .dx
   (Strike the slop, Confidence Tape, Reckoner, Reading Shelf, brief composer, R-002 site reader,
    work register, case-study sheet set, plates). Colours and type come from the aliases above.
   ===================================================================================================== */
[hidden]{display:none!important}
.dx a{color:inherit}
.dx button{font:inherit;color:inherit}
.dx ::selection{background:var(--teal);color:var(--d-k0)}
.dx :focus-visible{outline:1px dashed var(--teal);outline-offset:4px}
.dx .mono{font-family:var(--d-mono);font-stretch:87.5%;font-weight:420;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.dx .dim{color:var(--d-ink3)} .dx .mid{color:var(--d-ink2)}
.dx .num{font-variant-numeric:tabular-nums}
.dx .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dx .skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--teal);color:var(--d-k0);padding:10px 14px;font:600 12px/1 var(--d-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.dx .skip:focus{top:12px}

/* keycap: travel shown as a solid shelf (value step), no blur */
.dx .key{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:0 16px;background:var(--d-k5);color:var(--d-ink);
  border:1px solid var(--d-line3);box-shadow:0 3px 0 0 var(--d-k0),0 3px 0 1px var(--d-line2);text-decoration:none;white-space:nowrap;
  font:600 11px/1 var(--d-mono);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:transform .09s cubic-bezier(.3,.7,.4,1),box-shadow .09s,border-color .15s}
.dx .key:hover{border-color:var(--d-ink3)}
.dx .key:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--d-k0),0 0 0 1px var(--d-line2)}
.dx .key .lamp{width:6px;height:6px;background:var(--d-line3);flex:none}
.dx .key.on .lamp,.dx .key.primary .lamp{background:var(--teal)}
.dx .key.primary{background:var(--d-k0);border-color:var(--d-ink3)}
.dx .key.ghost{background:var(--d-k3)}
.dx .key.big{min-height:46px;padding:0 20px;font-size:12px}
.dx .key[disabled],.dx .key[aria-disabled="true"]{color:var(--d-ink3);cursor:not-allowed}
.dx .key[disabled]:active{transform:none}
.dx .kbd{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border:1px solid var(--d-line2);background:var(--d-k3);
  font:500 10px/1 var(--d-mono);color:var(--d-ink2);box-shadow:0 2px 0 0 var(--d-k0);letter-spacing:.04em}
.dx .link{font:500 10.5px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink2);text-decoration:none;border-bottom:1px solid var(--d-line3);padding-bottom:3px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.dx .link:hover,.dx .link:focus-visible{color:var(--teal);border-bottom-color:var(--teal)}
.dx .bub{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--d-line3);border-radius:50%;
  font:500 9.5px/1 var(--d-mono);color:var(--d-ink3);background:var(--d-k1);flex:none}
.dx .crop{position:absolute;width:12px;height:12px;border-color:var(--d-line3);border-style:solid;border-width:0;pointer-events:none}
.dx .crop.tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.dx .crop.tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.dx .crop.bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.dx .crop.br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
/* dither field: 1px squares on a 3px pitch (a printed screen, not a gradient) */
.dx .dither{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23262626'/%3E%3C/svg%3E")}
.dx .tri{display:inline-block;width:9px;height:7px;background:var(--d-ink3);clip-path:polygon(0 0,100% 0,50% 100%);flex:none}

/* ------------------------------------------------------------------ levels + strips */
.dx .lvlsec{position:relative;border-bottom:1px solid var(--d-line)}
.dx .strip{min-height:34px;display:flex;align-items:center;gap:18px;padding:8px var(--d-pad);border-bottom:1px solid var(--d-line);background:var(--d-k1)}
.dx .strip .fill{flex:1;height:1px;background:var(--d-line);min-width:20px}
.dx .strip .r{white-space:nowrap}
@media (max-width:640px){ .dx .strip .r{display:none} }
.dx .in{padding:44px var(--d-pad) 56px}
.dx .h2{font:250 clamp(56px,8.4vw,132px)/.82 var(--d-disp);text-transform:uppercase;letter-spacing:-.005em}
.dx .h2 b{font-weight:800}
.dx .h3{font:700 22px/1 var(--d-disp);letter-spacing:.06em;text-transform:uppercase}
.dx .copy{font:400 16px/1.55 var(--d-text);color:var(--d-ink2);max-width:540px}
.dx .copy strong{color:var(--d-ink);font-weight:500}
.dx .copy+.copy{margin-top:14px}
.dx .exit{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:34px;padding-top:18px;border-top:1px solid var(--d-line)}
.dx .exit .mono{margin-left:auto}
@media (max-width:640px){ .dx .exit .mono{margin-left:0} }
.dx .sechead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 56px;align-items:end;margin-bottom:38px}
.dx .sechead .copy{justify-self:start}
@media (max-width:900px){ .dx .sechead{grid-template-columns:1fr} }

/* placeholder plate: the drawing-set convention for "image to come" (a box with its diagonals) */
.dx .plate{position:relative;border:1px solid var(--d-line2);background:var(--d-k2)}
.dx .plate .x{position:absolute;inset:0;width:100%;height:100%}
.dx .plate .lab{position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dx .plate .lab b{display:block;font:700 15px/1 var(--d-disp);letter-spacing:.06em;color:var(--d-ink);text-transform:uppercase;margin-bottom:6px}
.dx .plate .lab span.tag{background:var(--d-k0);border:1px solid var(--d-line2);padding:8px 10px;max-width:100%}
.dx .plate .stamp{position:absolute;left:12px;bottom:12px;background:var(--d-k0);border:1px solid var(--d-line3);padding:6px 9px;color:var(--d-ink2)}

/* ------------------------------------------------------------------ Strike the slop */
.dx .strike{position:relative;display:grid;grid-template-columns:420px minmax(0,1fr);gap:56px;padding:34px var(--d-pad) 44px;min-height:780px}
.dx .strike .left{display:flex;flex-direction:column;min-width:0}
.dx .strike .copy{margin-top:24px;max-width:390px}
.dx .strike .inst{margin-top:28px;border:1px solid var(--d-line2);background:var(--d-k2);position:relative}
.dx .strike .inst .hd{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--d-line)}
.dx .strike .striker{position:relative;height:58px;touch-action:none;margin:14px 14px 0;background-color:#0E0E0E;border:1px solid var(--d-line3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 4L4 0M-1 1L1 -1M3 5L5 3' stroke='%232C2C2C' stroke-width='1'/%3E%3C/svg%3E")}
.dx .strike .striker .scale{position:absolute;left:0;right:0;bottom:-15px;height:10px;display:flex;justify-content:space-between}
.dx .strike .striker .scale i{width:1px;height:5px;background:var(--d-line3)}
.dx .strike .striker .scale i:nth-child(5n+1){height:9px;background:#555}
.dx .strike .striker .pulse{position:absolute;top:-1px;left:0;width:2px;height:calc(100% + 2px);background:var(--teal);opacity:0;animation:dx-pulse 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes dx-pulse{0%{transform:translateX(0);opacity:0}6%{opacity:1}40%{transform:translateX(var(--sw,388px));opacity:1}46%,100%{transform:translateX(var(--sw,388px));opacity:0}}
.dx .strike .striker .wear{position:absolute;top:24px;height:8px;background:#121212;border-top:1px solid #3C3C3C;border-bottom:1px solid #000}
.dx .strike:not(.idle) .striker .pulse{display:none}
.dx .strike .gauge{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:28px 14px 0}
.dx .strike .gauge .bar{position:relative;height:8px;border:1px solid var(--d-line3);background:var(--d-k0)}
.dx .strike .gauge .bar span{position:absolute;left:0;top:0;bottom:0;background:var(--d-ink2)}
.dx .strike .gauge .bar .thr{position:absolute;top:-6px;bottom:-6px;width:1px;background:var(--teal)}
.dx .strike .cradlerow{position:relative;height:100px;margin:12px 14px 0;border-top:1px solid var(--d-line)}
.dx .strike .cradle{position:absolute;left:0;right:0;bottom:14px;height:10px;border:1px solid var(--d-line2);border-top:0}
.dx .strike .cradle i{position:absolute;bottom:0;width:10px;height:16px;background:#151515;border:1px solid #2E2E2E;border-bottom:0}
.dx .strike .ml{position:absolute;left:0;top:10px;font-size:9.5px}
.dx .strike .inst .ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--d-line)}
.dx .sw{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--d-ink3);cursor:pointer;white-space:nowrap;font:500 10.5px/1 var(--d-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;min-height:28px}
.dx .sw i{width:26px;height:12px;border:1px solid var(--d-line3);position:relative;background:var(--d-k0);flex:none}
.dx .sw i::after{content:"";position:absolute;left:2px;top:2px;width:8px;height:6px;background:#555}
.dx .sw[aria-pressed="true"] i::after,.dx .sw[aria-checked="true"] i::after{left:14px;background:var(--teal)}
.dx .sw:hover{color:var(--d-ink)}
.dx .strike .bay{position:relative;min-height:640px;margin-top:22px}
.dx .strike .bay .tag{position:absolute;top:-22px;left:0;display:flex;gap:14px;white-space:nowrap;overflow:hidden;max-width:100%}
.dx .strike .under,.dx .strike .slop{position:absolute;inset:0}
.dx .strike .under{background:var(--d-k2);border:1px solid var(--d-line2);padding:46px 52px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:40px;row-gap:24px}
.dx .strike .under .k{grid-column:1/3;display:flex;justify-content:space-between;gap:12px}
.dx .strike .under h3{grid-column:1/3;font:250 clamp(48px,6.4vw,92px)/.84 var(--d-disp);text-transform:uppercase;margin-top:10px;align-self:start}
.dx .strike .under h3 b{font-weight:800}
.dx .strike .under .rows{border-top:1px solid var(--d-line2);align-self:end}
.dx .strike .under .rows div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--d-line);font:400 14px/1.3 var(--d-text);color:var(--d-ink2)}
.dx .strike .under .rows div span:last-child{font:500 10px/1.5 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3)}
/* (legacy reveal paragraph rules retired: the panel now holds the line and R-002) */

.dx .strike .fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.dx .strike .status{position:absolute;right:0;bottom:-28px;max-width:100%;text-align:right}
.dx .strike .ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:5}
.dx .strike .mgrip{position:absolute;left:0;top:0;z-index:6;touch-action:none;cursor:grab;transform-origin:0 0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dx .strike .mgrip.held{cursor:grabbing}
.dx .strike .mbtn{pointer-events:none;cursor:grab;outline:none;touch-action:none;-webkit-user-select:none;user-select:none}
.dx .strike .mbtn *{touch-action:none}
.dx .strike.holding,.dx .strike.holding *{cursor:grabbing!important}
.dx .strike .mbtn.held{cursor:grabbing}
.dx .strike .mbtn:focus-visible .focus{opacity:1}
.dx .strike .mbtn .focus{opacity:0}
.dx .strike .idleg{transform-box:fill-box;transform-origin:20% 50%}
.dx .strike.idle .idleg{animation:dx-idle 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes dx-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2.2deg)}}
.dx .strike .again{position:absolute;left:0;bottom:-34px;display:none;z-index:6}
.dx .strike.done .again{display:inline-flex}
@media (prefers-reduced-motion:reduce){.dx .strike.idle .idleg,.dx .strike .striker .pulse{animation:none}.dx .strike .striker .pulse{opacity:0}}
/* the slop specimen: deliberately generic; it exists to be burned (the one sanctioned gradient on the site) */
.dx .slop{overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#8a2be2 0%,#5b4bff 45%,#20b4ff 100%);color:#fff;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;padding:56px 60px}
.dx .slop .blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.75}
.dx .slop .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.35);font-size:14px;font-weight:600;position:relative}
.dx .slop h4{position:relative;font-size:clamp(34px,4.4vw,64px);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:28px 0 18px;max-width:640px}
.dx .slop h4 span{background:linear-gradient(90deg,#fff,#ffd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dx .slop .sub{position:relative;font-size:19px;line-height:1.5;opacity:.9;max-width:560px}
.dx .slop .ctas{position:relative;display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.dx .slop .ctas b{padding:16px 28px;border-radius:999px;background:#fff;color:#5b2bff;font-size:16px;box-shadow:0 14px 40px rgba(91,43,255,.55)}
.dx .slop .ctas b+b{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none;backdrop-filter:blur(10px)}
.dx .slop .glass{position:absolute;right:46px;bottom:46px;width:330px;max-width:calc(100% - 56px);padding:22px 24px;border-radius:22px;background:rgba(255,255,255,.16);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.35);box-shadow:0 20px 60px rgba(30,0,80,.45)}
.dx .slop .glass q{display:block;font-size:20px;font-weight:700;margin:10px 0 8px}
.dx .slop .glass small{opacity:.85;font-size:14px}
.dx .slop svg.spark{position:absolute}
@media (max-width:1180px){
  .dx .strike{grid-template-columns:minmax(0,1fr);gap:34px}
  .dx .strike .left{max-width:640px}
  .dx .strike .bay{min-height:600px}
}
@media (max-width:640px){
  .dx .strike{padding-top:26px}
  .dx .strike .bay{min-height:600px}
  .dx .strike .bay .tag span+span{display:none}
  .dx .strike .under{padding:28px 22px;grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}
  .dx .strike .under .k,.dx .strike .under h3{grid-column:1}
  .dx .strike .under .k span+span{display:none}
  .dx .slop{padding:30px 24px;border-radius:22px}
  .dx .slop .sub{font-size:15px}
  .dx .slop svg.spark{top:16px!important;width:22px;height:22px}
  .dx .slop svg.spark+svg.spark{width:12px;height:12px;top:10px!important}
  .dx .slop .ctas b{padding:12px 20px;font-size:14px}
  .dx .slop .glass{left:24px;right:24px;bottom:24px;width:auto;padding:16px 18px}
  .dx .slop .glass q{font-size:17px}
  .dx .strike .status{left:0;text-align:left;bottom:-46px}
  .dx .strike .again{bottom:-90px}
  .dx .strike.done{padding-bottom:110px}
}

/* ------------------------------------------------------------------ Confidence Tape */
.dx .tape .h2{font-size:clamp(52px,6.8vw,98px)}
.dx .tape .head{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:28px 40px;align-items:start}
.dx .tape .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--d-line2);background:var(--d-k2);margin-top:6px}
.dx .tape .steps>div{padding:14px 18px;border-right:1px solid var(--d-line);min-height:84px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0}
.dx .tape .steps>div:last-child{border-right:0}
.dx .tape .steps .v{font:500 15px/1.3 var(--d-text);color:var(--d-ink);overflow-wrap:anywhere}
.dx .tape .steps .v.off{color:var(--d-ink3)}
.dx .tape .steps .on{background:var(--d-k0)}
.dx .tape .steps .on .mono{color:var(--d-ink)}
.dx .tape .steps .on .mono::before{content:"";display:inline-block;width:7px;height:7px;background:var(--teal);margin-right:8px}
.dx .tape .inst{position:relative;margin-top:26px}
.dx .tape svg.tp{width:100%;height:auto;overflow:visible;touch-action:pan-y}
.dx .tape svg.tp .grab{cursor:grab;touch-action:none}
.dx .tape .slider{position:absolute;outline:none;pointer-events:none}
.dx .tape .slider:focus-visible{outline:1px dashed var(--teal);outline-offset:6px}
.dx .tape .entry{border:1px solid var(--d-line2);background:var(--d-k2);margin-top:6px}
.dx .tape .entry .hd{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--d-line)}
.dx .tape .entry .bd{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,300px);align-items:stretch}
.dx .tape .field{padding:18px;border-right:1px solid var(--d-line)}
.dx .tape .field label{display:block;margin-bottom:12px}
.dx .tape .inp{display:flex;align-items:center;height:48px;border:1px solid var(--d-line3);background:var(--d-k0)}
.dx .tape .inp:focus-within{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.dx .tape .inp span{padding:0 12px;font:500 13px/1 var(--d-mono);color:var(--d-ink3);border-right:1px solid var(--d-line2);height:100%;display:grid;place-items:center}
.dx .tape .inp input{flex:1;min-width:0;height:100%;background:transparent;border:0;color:var(--d-ink);font:400 16px/1 var(--d-text);padding:0 14px;outline:none}
.dx .tape .inp input::placeholder{color:var(--d-ink3)}
.dx .tape .or{display:grid;place-items:center;padding:0 18px;border-right:1px solid var(--d-line)}
.dx .tape .ask{padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.dx .tape .ask p{font:400 13px/1.45 var(--d-text);color:var(--d-ink2)}
.dx .tape .entry .ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--d-line)}
.dx .fine{font:400 12.5px/1.45 var(--d-text);color:var(--d-ink3)}
.dx .tape .readout{border:1px solid var(--d-line2);background:var(--d-k0);display:grid;grid-template-columns:280px minmax(0,1fr) 380px;margin-top:6px}
.dx .tape .readout .hd{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:14px 18px;border-right:1px solid var(--d-line);min-width:0}
.dx .tape .readout .hd span{overflow-wrap:anywhere}
.dx .tape .readout .bd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;padding:14px 22px;align-items:end;border-right:1px solid var(--d-line)}
.dx .tape .rd{font:300 88px/.78 var(--d-disp);font-variant-numeric:tabular-nums;color:var(--d-ink);white-space:nowrap}
.dx .tape .rd small{font:500 10px/1 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3);margin-left:6px}
.dx .tape .rd.off{color:var(--d-ink3)}
.dx .tape .plain b{display:block;font:700 26px/1 var(--d-disp);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.dx .tape .plain p{font:400 13.5px/1.45 var(--d-text);color:var(--d-ink2)}
.dx .tape .readout .ft{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;padding:14px 22px}
.dx .tape .readout .ft .hint{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dx .tape .lampl{display:inline-block;width:8px;height:8px;background:var(--d-line3);margin-right:8px}
.dx .tape .lampl.on{background:var(--teal)}
.dx .tape .tools{display:flex;justify-content:flex-end;gap:18px;margin-top:10px}
@media (max-width:1100px){
  .dx .tape .head{grid-template-columns:minmax(0,1fr)}
  .dx .tape .readout{grid-template-columns:1fr 1fr}
  .dx .tape .readout .hd{grid-column:1/3;border-right:0;border-bottom:1px solid var(--d-line);flex-direction:row;flex-wrap:wrap}
}
@media (max-width:760px){
  .dx .tape .steps{grid-template-columns:1fr}
  .dx .tape .steps>div{border-right:0;border-bottom:1px solid var(--d-line);min-height:0}
  .dx .tape .steps>div:last-child{border-bottom:0}
  .dx .tape .entry .bd{grid-template-columns:1fr}
  .dx .tape .entry .hd span+span{display:none}
  .dx .tape .field,.dx .tape .or{border-right:0;border-bottom:1px solid var(--d-line)}
  .dx .tape .or{padding:10px 18px;place-items:start}
  .dx .tape .readout{grid-template-columns:1fr}
  .dx .tape .readout .hd{grid-column:1;flex-direction:column}
  .dx .tape .readout .bd{border-right:0;border-bottom:1px solid var(--d-line);gap:18px}
  .dx .tape .rd{font-size:72px}
}

/* ------------------------------------------------------------------ Reckoner */
.dx .reck{display:grid;grid-template-columns:minmax(0,1fr) 360px;border:1px solid var(--d-line2)}
.dx .reck .bench{position:relative;padding:22px 26px 26px;border-right:1px solid var(--d-line);background:var(--d-k1);min-width:0}
.dx .reck .bench .lab{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dx .reck .frame{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dx .reck svg.ab{width:100%;height:auto;cursor:pointer}
.dx .reck .rod{position:absolute;left:0;right:0;outline:none;pointer-events:none}
.dx .reck .rod:focus-visible{outline:1px dashed var(--teal);outline-offset:2px}
.dx .reck .legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--d-line2)}
.dx .reck .legend div{padding:12px 16px 4px 0;display:flex;flex-direction:column;gap:6px;font:400 13px/1.45 var(--d-text);color:var(--d-ink2)}
.dx .reck .legend div+div{padding-left:16px;border-left:1px solid var(--d-line)}
.dx .reck .legend b{display:flex;align-items:center;gap:8px;font:700 16px/1 var(--d-disp);letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink)}
@media (max-width:640px){ .dx .reck .legend{grid-template-columns:1fr} .dx .reck .legend div+div{padding-left:0;border-left:0;border-top:1px solid var(--d-line)} }
.dx .reck .opts{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:16px}
.dx .reck .slip{background:var(--d-k0);padding:24px 24px;display:flex;flex-direction:column;min-width:0}
.dx .reck .slip .hd{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--d-line2)}
.dx .reck .r{display:grid;grid-template-columns:58px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--d-line);align-items:baseline}
.dx .reck .r .k{font:500 10px/1 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3);text-transform:uppercase}
.dx .reck .r .n{font:400 14px/1.35 var(--d-text);color:var(--d-ink)}
.dx .reck .r .n.off{color:var(--d-ink3)}
.dx .reck .sched{margin-top:22px}
.dx .reck .sched .s{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;padding:5px 0;border-bottom:1px solid var(--d-line);font:400 12.5px/1.25 var(--d-text);color:var(--d-ink3);align-items:center}
.dx .reck .sched .s i{width:6px;height:6px}
.dx .reck .sched .s.on{color:var(--d-ink)} .dx .reck .sched .s.on i{background:var(--teal)}
.dx .reck .sched .s span:last-child{font:500 10px/1 var(--d-mono);letter-spacing:.1em;text-transform:uppercase}
.dx .reck .tot{margin-top:24px;border-top:1px solid var(--d-line3);padding-top:16px}
.dx .reck .tot .lab{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dx .reck .lampr{display:inline-block;width:8px;height:8px;background:var(--d-line3);vertical-align:1px;margin-right:8px}
.dx .reck .lampr.on{background:var(--teal)}
.dx .reck .big{display:flex;align-items:flex-end;gap:14px;margin-top:14px}
.dx .reck .big .cls{font:300 92px/.8 var(--d-disp);color:var(--d-ink)}
.dx .reck .big .cls.off{color:var(--d-ink3)}
.dx .reck .big .nm{font:700 24px/1 var(--d-disp);letter-spacing:.05em;text-transform:uppercase;padding-bottom:4px}
.dx .reck .big .nm small{display:block;font:500 10px/1 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3);margin-bottom:8px}
.dx .reck .note{margin-top:14px;font:400 13px/1.5 var(--d-text);color:var(--d-ink2)}
.dx .reck .keys{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
/* starting price: just above "Get a proposal" (PRICING, 7 Oct 2026) */
.dx .reck .pr{margin-top:18px;border-top:1px solid var(--d-line2);padding-top:12px}
.dx .reck .pr__k{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;font:500 10px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3)}
.dx .reck .pr__k a{color:var(--d-ink2);text-decoration:underline;text-decoration-color:var(--casper);text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
.dx .reck .pr__k a:hover{color:var(--d-ink)}
.dx .reck .pr__l{list-style:none;margin:4px 0 0;padding:0}
.dx .reck .pr__l li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--d-line)}
.dx .reck .pr__l span{font:700 18px/1.1 var(--d-disp);letter-spacing:.05em;text-transform:uppercase;color:var(--d-ink)}
.dx .reck .pr__l b{font:600 15px/1.2 var(--d-text);color:var(--d-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dx .reck .pr__l--range span{font-size:15px;color:var(--d-ink2)}
.dx .reck .pr__l--range b{font-weight:400;font-size:14px;color:var(--d-ink2)}
@media (max-width:1100px){
  .dx .reck{grid-template-columns:minmax(0,1fr)}
  .dx .reck .bench{border-right:0;border-bottom:1px solid var(--d-line)}
}
@media (max-width:640px){
  .dx .reck .bench{padding:16px 14px 18px}
  .dx .reck .slip{padding:20px 18px}
  .dx .reck .big .cls{font-size:76px}
}

/* ------------------------------------------------------------------ Reading Shelf */
.dx .shelfc .top2{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 40px;flex-wrap:wrap}
.dx .shelfc .sorts{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dx .shelfc .opts{display:flex;flex-wrap:wrap;gap:8px}
.dx .shelfc .opts .key{min-height:36px}
.dx .shelfc .opts .key[aria-checked="true"]{background:var(--d-k0);border-color:var(--d-ink3)}
.dx .shelfc .opts .key[aria-checked="true"] .lamp{background:var(--teal)}
.dx .shelfc .dir{width:38px;padding:0}
.dx .shelfc .room{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;margin-top:34px;align-items:start}
.dx .shelfc .scroll{overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--d-line3) var(--d-k1)}
.dx .shelfc .inner{position:relative;height:500px}
/* the bay: a recessed black back panel. Depth comes from the shelf's own shadow, not decoration */
.dx .shelfc .inner::before{content:"";position:absolute;left:0;right:0;top:40px;height:364px;background:#0A0908;box-shadow:inset 0 -26px 30px -18px rgba(0,0,0,.85),inset 0 1px 0 #161412}
/* the plank: blackened oiled oak. Top face (books stand on it), front edge with one highlight, cast shadow below */
.dx .shelfc .shelf{position:absolute;left:0;right:0;top:398px;height:34px;border:0;background:none}
.dx .shelfc .shelf::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background-color:#241C16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='40'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .5' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='300' height='40' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow:inset 0 3px 4px -2px rgba(0,0,0,.7)}
.dx .shelfc .shelf::after{content:"";position:absolute;left:0;right:0;top:12px;height:22px;background-color:#18120E;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='40'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .6' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 -.15'/%3E%3C/filter%3E%3Crect width='300' height='40' filter='url(%23g)'/%3E%3C/svg%3E");
  border-top:1px solid #5E4B3C;border-bottom:1px solid #050403;box-shadow:0 16px 18px -6px rgba(0,0,0,.85)}
.dx .shelfc .shelf .br{position:absolute;top:34px;width:12px;height:40px;background:#151515;border-left:1px solid #3A3A3A;border-right:1px solid #050505;outline:0}
.dx .shelfc .shelf .br::after{content:"";position:absolute;left:-1px;bottom:0;width:30px;height:6px;background:#151515;border-top:1px solid #3A3A3A}
.dx .shelfc .shelf .br[style*="right"]::after{left:auto;right:-1px}
.dx .shelfc .datum{position:absolute;left:0;right:0;top:482px;display:flex;justify-content:space-between;gap:12px}
.dx .shelfc .datum span{font:500 10px/1 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3);white-space:nowrap}
/* bookends: blackened steel, folded L, lit edge left */
.dx .shelfc .bookend{position:absolute;top:290px;width:7px;height:114px;background:#1A1A1A;border-left:1px solid #4A4A4A;border-right:1px solid #050505;box-shadow:6px 0 10px -4px rgba(0,0,0,.8);z-index:2}
.dx .shelfc .bookend::after{content:"";position:absolute;bottom:-1px;width:42px;height:4px;background:#1A1A1A;border-top:1px solid #4A4A4A}
.dx .shelfc .bookend.r::after{right:0}
/* a book: boards, rounded spine, page block, cloth / leather / jacket */
.dx .shelfc .book{position:absolute;left:0;padding:0;border:0;cursor:pointer;text-align:center;color:var(--foil);
  border-radius:4px 4px 2px 2px;transform-origin:50% 100%;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.07) 13%,rgba(255,255,255,.035) 34%,rgba(0,0,0,.04) 62%,rgba(0,0,0,.28) 86%,rgba(0,0,0,.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 .5H4M0 2.5H4' stroke='%23fff' stroke-opacity='.045'/%3E%3Cpath d='M.5 0V4M2.5 0V4' stroke='%23000' stroke-opacity='.14'/%3E%3C/svg%3E");
  box-shadow:inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06),7px 0 12px -5px rgba(0,0,0,.85),0 3px 3px -1px rgba(0,0,0,.9),2px 1px 6px rgba(0,0,0,.55);
  transition:transform .34s cubic-bezier(.3,.7,.2,1),box-shadow .34s cubic-bezier(.3,.7,.2,1)}
.dx .shelfc .book.leather{border-radius:5px 5px 2px 2px;background-image:
    linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.09) 13%,rgba(255,255,255,.04) 34%,rgba(0,0,0,.04) 62%,rgba(0,0,0,.3) 86%,rgba(0,0,0,.62) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 -.25'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E")}
.dx .shelfc .book.jacket{border-radius:3px 3px 1px 1px;background-image:
    linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(255,255,255,.1) 12%,rgba(255,255,255,.05) 30%,rgba(0,0,0,.03) 60%,rgba(0,0,0,.24) 86%,rgba(0,0,0,.52) 100%)}
.dx .shelfc .book.cloth[style*="rgb(217,.dx 210,.dx 193)"],.dx .shelfc .book.jacket[style*="rgb(217,.dx 210,.dx 193)"]{box-shadow:inset 1px 0 0 rgba(255,255,255,.3),inset -1px 0 0 rgba(0,0,0,.35),7px 0 12px -5px rgba(0,0,0,.85),0 3px 3px -1px rgba(0,0,0,.9),2px 1px 6px rgba(0,0,0,.55)}
/* page block, seen just over the head of the boards */
.dx .shelfc .book::before{content:"";position:absolute;left:3px;right:3px;top:-3px;height:3px;border-radius:2px 2px 0 0;background:#BDB5A2;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dx .shelfc .book .jband{position:absolute;left:0;right:0;bottom:38px;height:10px;background:var(--band);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.4)}
.dx .shelfc .book .code{position:absolute;top:11px;left:0;right:0;font:600 8.5px/1 var(--d-mono);letter-spacing:.1em;color:var(--foil);opacity:1}
.dx .shelfc .book .bands{position:absolute;top:26px;left:5px;right:5px;height:5px;border-top:1px solid var(--foil);border-bottom:1px solid var(--foil);opacity:.55}
.dx .shelfc .book .t{position:absolute;left:50%;top:44px;bottom:52px;width:0;display:flex;align-items:center;justify-content:center}
.dx .shelfc .book .t span{display:block;white-space:nowrap;transform:rotate(-90deg);font:650 13px/1 var(--d-text);font-stretch:75%;letter-spacing:.02em;color:var(--foil)}
.dx .shelfc .book.d .t span{font:700 17px/1 var(--d-disp);letter-spacing:.07em;text-transform:uppercase}
/* stamped, slightly inset: a dark lip above, a faint catch-light below. Never a glow. */
.dx .shelfc .book[data-foil="foil"] .t span,.dx .shelfc .book[data-foil="foil"] .a,.dx .shelfc .book[data-foil="foil"] .y,.dx .shelfc .book[data-foil="foil"] .code{text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.07)}
.dx .shelfc .book[data-foil="ink"] .t span,.dx .shelfc .book[data-foil="ink"] .a,.dx .shelfc .book[data-foil="ink"] .y,.dx .shelfc .book[data-foil="ink"] .code{text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.12)}
.dx .shelfc .book .a{position:absolute;bottom:20px;left:2px;right:2px;font:600 8.5px/1.5 var(--d-mono);letter-spacing:.06em;color:var(--foil);text-transform:uppercase;overflow:hidden;white-space:nowrap}
.dx .shelfc .book .y{position:absolute;bottom:9px;left:0;right:0;font:500 8.5px/1 var(--d-mono);color:var(--foil)}
.dx .shelfc .book:hover{box-shadow:inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06),7px 0 12px -5px rgba(0,0,0,.85),0 3px 3px -1px rgba(0,0,0,.9),2px 1px 6px rgba(0,0,0,.55)}
.dx .shelfc .book:focus-visible{outline:1px dashed var(--teal);outline-offset:3px}
/* pulled: up and toward you; the cast shadow falls longer and softer, the contact shadow leaves the plank */
.dx .shelfc .book.out{z-index:3;box-shadow:inset 1px 0 0 rgba(255,255,255,.1),inset -1px 0 0 rgba(0,0,0,.6),inset 0 2px 0 var(--teal),14px 22px 26px -8px rgba(0,0,0,.9)}
.dx .shelfc .book.out .bands{border-color:var(--teal);opacity:1}
@media (prefers-reduced-motion:reduce){ .dx .shelfc .book{transition:none} }
.dx .shelfc .slot{position:absolute;top:400px;height:7px;border:1px solid var(--teal);border-top:0;display:none;z-index:1}
.dx .shelfc .swipe{display:none;margin-top:10px}
@media (max-width:900px){ .dx .shelfc .swipe{display:block} }
.dx .shelfc .caption{margin-top:16px;font:400 15px/1.4 var(--d-text);color:var(--d-ink2)}
.dx .shelfc .caption b{color:var(--d-ink);font-weight:500}
.dx .shelfc .card{border:1px solid var(--d-line2);background:var(--d-k0);margin-top:40px}
.dx .shelfc .card .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--d-line)}
.dx .shelfc .card .hd i{display:inline-block;width:7px;height:7px;background:var(--d-line3);margin-right:8px}
.dx .shelfc .card.on .hd i{background:var(--teal)}
.dx .shelfc .card h3{font:700 34px/.92 var(--d-disp);text-transform:uppercase;letter-spacing:.02em;padding:16px 16px 6px}
.dx .shelfc .card .by{padding:0 16px 14px;font:400 14px/1.3 var(--d-text);color:var(--d-ink2)}
.dx .shelfc .card dl{display:grid;grid-template-columns:110px 1fr;border-top:1px solid var(--d-line)}
.dx .shelfc .card dt,.dx .shelfc .card dd{padding:8px 16px;border-bottom:1px solid var(--d-line);font:400 13px/1.3 var(--d-text)}
.dx .shelfc .card dt{font:500 10px/1.8 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3);text-transform:uppercase;padding-right:0}
.dx .shelfc .card dd{color:var(--d-ink);font-variant-numeric:tabular-nums}
.dx .shelfc .card .why{padding:14px 16px;font:400 14.5px/1.45 var(--d-text);color:var(--d-ink)}
.dx .shelfc .card .why small{display:block;font:500 10px/1 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3);margin-bottom:8px;text-transform:uppercase}
.dx .shelfc .card .buy{padding:0 16px 16px}
.dx .shelfc .card .ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--d-line)}
.dx .shelfc .card .empty{padding:18px 16px 20px;font:400 14px/1.5 var(--d-text);color:var(--d-ink2)}
.dx .shelfc .ghost{position:absolute;top:150px;height:250px;border:1px dashed var(--d-line3);border-bottom:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px;text-decoration:none;color:var(--d-ink2)}
.dx .shelfc .ghost b{font:300 44px/.9 var(--d-disp);text-transform:uppercase;color:var(--d-ink)}
.dx .shelfc .ghost:hover,.dx .shelfc .ghost:focus-visible{border-color:var(--teal);color:var(--d-ink)}
.dx .shelfc .leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
@media (max-width:1180px){
  .dx .shelfc .room{grid-template-columns:minmax(0,1fr);gap:0}
  .dx .shelfc .card{margin-top:22px;max-width:520px}
  .dx .shelfc .leader{display:none}
  .dx .shelfc .sorts{align-items:flex-start}
}

/* ------------------------------------------------------------------ method staff */
.dx .staff{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--d-line2);background:var(--d-k2)}
.dx .staff .half{grid-column:span 2;display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--d-line);border-right:1px solid var(--d-line)}
.dx .staff .half:nth-child(2){border-right:0}
.dx .staff .half b{font:700 15px/1 var(--d-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--d-ink)}
.dx .staff .ruler{grid-column:1/5;height:34px;border-bottom:1px solid var(--d-line2);position:relative}
.dx .staff .ruler svg{width:100%;height:100%}
.dx .staff .st{padding:20px 18px 24px;border-right:1px solid var(--d-line);display:flex;flex-direction:column;gap:12px;min-width:0}
.dx .staff .st:last-child{border-right:0}
.dx .staff .st .n{display:flex;justify-content:space-between;align-items:center}
.dx .staff .st h3{font:250 64px/.8 var(--d-disp);text-transform:uppercase}
.dx .staff .st p{font:400 14px/1.5 var(--d-text);color:var(--d-ink2)}
.dx .staff .st ul{list-style:none;border-top:1px solid var(--d-line);margin-top:auto}
.dx .staff .st li{padding:7px 0;border-bottom:1px solid var(--d-line);font:400 13px/1.35 var(--d-text);color:var(--d-ink2)}
@media (max-width:900px){
  .dx .staff{grid-template-columns:1fr 1fr}
  .dx .staff .half{grid-column:span 1}
  .dx .staff .ruler{grid-column:1/3}
  .dx .staff .st:nth-child(odd){border-right:1px solid var(--d-line)}
  .dx .staff .st{border-bottom:1px solid var(--d-line)}
}
@media (max-width:560px){
  .dx .staff{grid-template-columns:1fr}
  .dx .staff .half{display:none}
  .dx .staff .ruler{grid-column:1}
  .dx .staff .st{border-right:0!important}
  .dx .staff .st h3{font-size:56px}
}

/* ------------------------------------------------------------------ work register */
.dx .reg{width:100%;border-collapse:collapse;border-top:1px solid var(--d-line2)}
.dx .reg th{font:500 10px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--d-line2);font-weight:500}
.dx .reg td{padding:14px 12px 14px 0;border-bottom:1px solid var(--d-line);font:400 14px/1.35 var(--d-text);color:var(--d-ink2);vertical-align:middle}
.dx .reg td.sh{font:500 11px/1 var(--d-mono);letter-spacing:.1em;color:var(--d-ink)}
.dx .reg td .st{display:inline-flex;align-items:center;gap:8px;font:500 10px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3);border:1px solid var(--d-line3);padding:5px 8px}
.dx .reg td .thumb{width:72px;height:46px}
.dx .reg td,.dx .reg th{white-space:normal}
@media (max-width:640px){ .dx .reg th:nth-child(2),.dx .reg td:nth-child(2),.dx .reg th:nth-child(5),.dx .reg td:nth-child(5),.dx .reg th:nth-child(6),.dx .reg td:nth-child(6){display:none} }
.dx .plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dx .plates .plate{aspect-ratio:3/4}
.dx .plates figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:10px}
@media (max-width:1000px){ .dx .plates{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .dx .plates{grid-template-columns:1fr} .dx .plates .plate{aspect-ratio:4/3} }

/* ------------------------------------------------------------------ roof CTA */
.dx .roof{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 56px;align-items:end}
.dx .roof .card{border:1px solid var(--d-line2);background:var(--d-k0)}
.dx .roof .card .hd{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--d-line)}
.dx .roof .card .bd{padding:18px}
.dx .roof .card p{font:400 15px/1.55 var(--d-text);color:var(--d-ink2)}
.dx .roof .card dl{display:grid;grid-template-columns:100px 1fr;margin:16px 0 18px;border-top:1px solid var(--d-line)}
.dx .roof .card dt,.dx .roof .card dd{padding:8px 0;border-bottom:1px solid var(--d-line);font:400 13.5px/1.3 var(--d-text);color:var(--d-ink)}
.dx .roof .card dt{font:500 10px/1.8 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3)}
@media (max-width:900px){ .dx .roof{grid-template-columns:1fr} }

/* ------------------------------------------------------------------ generic page parts */
.dx .pagehead{padding:44px var(--d-pad) 40px;border-bottom:1px solid var(--d-line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 56px;align-items:end}
.dx .pagehead .h2{font-size:clamp(60px,10vw,168px)}
@media (max-width:900px){ .dx .pagehead{grid-template-columns:1fr} }
.dx .cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px}
@media (max-width:900px){ .dx .cols2{grid-template-columns:1fr} }
.dx .rows{border-top:1px solid var(--d-line2)}
.dx .rows>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--d-line);font:400 15px/1.5 var(--d-text);color:var(--d-ink2)}
.dx .rows>div>span:first-child{font:500 10px/1.9 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3)}
.dx .rows>div strong{color:var(--d-ink);font-weight:500}
@media (max-width:560px){ .dx .rows>div{grid-template-columns:1fr;gap:4px} }
.dx .principles{list-style:none;counter-reset:p;border-top:1px solid var(--d-line2)}
.dx .principles li{counter-increment:p;display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--d-line)}
.dx .principles li::before{content:"P-" counter(p,decimal-leading-zero);font:500 11px/1.6 var(--d-mono);letter-spacing:.12em;color:var(--d-ink3)}
.dx .principles b{display:block;font:700 22px/1.05 var(--d-disp);letter-spacing:.04em;text-transform:uppercase;color:var(--d-ink);margin-bottom:6px}
.dx .principles p{font:400 15px/1.5 var(--d-text);color:var(--d-ink2);max-width:640px}

/* sheet set (case-study template) */
.dx .sset{border:1px solid var(--d-line2);background:var(--d-k2)}
.dx .sset .tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--d-line2)}
.dx .sset .tabs button{flex:none;background:none;border:0;border-right:1px solid var(--d-line);padding:12px 16px;cursor:pointer;color:var(--d-ink3);font:500 10.5px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:8px;align-items:center;min-height:44px}
.dx .sset .tabs button[aria-selected="true"]{background:var(--d-k0);color:var(--d-ink)}
.dx .sset .tabs button[aria-selected="true"]::before{content:"";width:6px;height:6px;background:var(--teal)}
.dx .sset .tb2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--d-line)}
.dx .sset .tb2>div{padding:10px 14px;border-right:1px solid var(--d-line);display:flex;flex-direction:column;gap:6px;min-width:0}
.dx .sset .tb2>div:last-child{border-right:0}
.dx .sset .tb2 span:last-child{font:400 13px/1.3 var(--d-text);color:var(--d-ink2);overflow-wrap:anywhere}
.dx .sset .panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;padding:28px}
.dx .sset .panel .plate{min-height:340px}
.dx .sset .nav{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--d-line)}
@media (max-width:1000px){ .dx .sset .tb2{grid-template-columns:repeat(2,minmax(0,1fr))} .dx .sset .tb2>div{border-bottom:1px solid var(--d-line)} .dx .sset .panel{grid-template-columns:1fr;padding:18px} .dx .sset .panel .plate{min-height:240px} }

/* filters (radiogroup of gridline bubbles) */
.dx .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.dx .filters button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 8px;background:var(--d-k3);border:1px solid var(--d-line2);color:var(--d-ink2);cursor:pointer;font:500 10.5px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase}
.dx .filters button[aria-checked="true"]{background:var(--d-k0);border-color:var(--d-ink3);color:var(--d-ink)}
.dx .filters button[aria-checked="true"] .bub{border-color:var(--teal);color:var(--d-ink)}

/* contact transmittal */
.dx .cgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:1000px){ .dx .cgrid{grid-template-columns:minmax(0,1fr)} }
.dx .form{border:1px solid var(--d-line2);background:var(--d-k2)}
.dx .form .hd{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--d-line)}
.dx .form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dx .form .f{padding:16px 18px;border-bottom:1px solid var(--d-line);border-right:1px solid var(--d-line);display:flex;flex-direction:column;gap:10px;min-width:0}
.dx .form .f:nth-child(2n){border-right:0}
.dx .form .f.w{grid-column:1/3;border-right:0}
.dx .form label{font:500 10px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3)}
.dx .form input[type=text],.dx .form input[type=email],.dx .form input[type=url],.dx .form textarea,.dx .bk input,.dx .bk textarea{width:100%;background:var(--d-k0);border:1px solid var(--d-line3);color:var(--d-ink);font:400 15px/1.4 var(--d-text);padding:11px 12px;outline:none;border-radius:0}
.dx .form input:focus,.dx .form textarea:focus,.dx .bk input:focus,.dx .bk textarea:focus{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.dx .form textarea,.dx .bk textarea{min-height:96px;resize:vertical}
.dx .form ::placeholder,.dx .bk ::placeholder{color:var(--d-ink3)}
.dx .chips{display:flex;flex-wrap:wrap;gap:8px}
.dx .chips button{min-height:34px;padding:0 12px;background:var(--d-k3);border:1px solid var(--d-line2);color:var(--d-ink2);cursor:pointer;font:500 10.5px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.dx .chips button::before{content:"";width:6px;height:6px;background:var(--d-line3)}
.dx .chips button[aria-pressed="true"]{background:var(--d-k0);border-color:var(--d-ink3);color:var(--d-ink)}
.dx .chips button[aria-pressed="true"]::before{background:var(--teal)}
.dx .form .ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px}
.dx .form .err,.dx .bk .err{color:var(--d-ink);font:400 13px/1.4 var(--d-text);border-left:2px solid var(--teal);padding-left:10px}
.dx .issued{border:1px solid var(--teal);background:var(--d-k0);padding:22px}
.dx .issued .stampx{display:inline-block;border:1px solid var(--teal);padding:8px 12px;font:600 12px/1 var(--d-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
@media (max-width:700px){ .dx .form .grid{grid-template-columns:1fr} .dx .form .f{border-right:0!important} .dx .form .f.w{grid-column:1} }

/* ------------------------------------------------------------------ Brief composer B-001 */
.dx .brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border:1px solid var(--d-line2)}
.dx .brief .bpanel{background:var(--d-k1);border-right:1px solid var(--d-line);min-width:0}
.dx .brief .bhd2,.dx .brief .shd{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--d-line)}
.dx .brief .mod{padding:18px 20px 20px;border-bottom:1px solid var(--d-line)}
.dx .brief .mod:last-child{border-bottom:0}
.dx .brief .mod.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
.dx .brief .mh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dx .brief .mh .mono.dim:last-child{margin-left:auto}
.dx .brief .mh .mono:not(.dim){color:var(--d-ink)}
.dx .brief .latches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dx .brief .latch{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:76px;padding:10px 12px;text-align:left;cursor:pointer;
  background:var(--d-k5);color:var(--d-ink);border:1px solid var(--d-line3);box-shadow:0 3px 0 0 var(--d-k0),0 3px 0 1px var(--d-line2);transition:transform .09s cubic-bezier(.3,.7,.4,1),box-shadow .09s,background .12s}
.dx .brief .latch .lt{display:flex;justify-content:space-between;align-items:center}
.dx .brief .latch .lamp{width:7px;height:7px;background:var(--d-line3)}
.dx .brief .latch .ll{font:700 18px/1 var(--d-disp);letter-spacing:.05em;text-transform:uppercase}
.dx .brief .latch[aria-pressed="true"]{background:var(--d-k0);border-color:var(--d-ink3);transform:translateY(2px);box-shadow:0 1px 0 0 var(--d-k0),0 1px 0 1px var(--d-line2)}
.dx .brief .latch[aria-pressed="true"] .lamp{background:var(--teal)}
.dx .brief .latch:hover{border-color:var(--d-ink3)}
.dx .brief .track{position:relative;padding:14px 10px 4px;outline:none;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.dx .brief .track:focus-visible{outline:1px dashed var(--teal);outline-offset:4px}
.dx .brief .rail2{position:relative;height:30px;margin:0 6%;border-bottom:1px solid var(--d-line3)}
.dx .brief .rail2::before{content:"";position:absolute;left:0;right:0;top:14px;height:3px;background:var(--d-k4);border-top:1px solid var(--d-line3)}
.dx .brief .det{position:absolute;bottom:0;width:1px;height:14px;background:var(--d-ink3);transform:translateX(-.5px)}
.dx .brief .needle{position:absolute;top:-6px;width:14px;height:36px;margin-left:-7px;background:var(--d-k5);border:1px solid var(--d-ink3);box-shadow:0 2px 0 0 var(--d-k0);z-index:1;transition:left .22s cubic-bezier(.3,.7,.2,1.2)}
.dx .brief .needle::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--teal)}
.dx .brief .stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px;text-align:center}
.dx .brief .stops span{font:500 10px/1.3 var(--d-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-ink3);padding:0 2px}
.dx .brief .stops span.on{color:var(--d-ink)}
.dx .brief .rd2{margin-top:12px;font:400 14px/1.4 var(--d-text);color:var(--d-ink2)}
.dx .brief .pris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dx .brief .pri{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;background:var(--d-k3);border:1px solid var(--d-line2);color:var(--d-ink2);cursor:pointer;font:500 10.5px/1.2 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;text-align:left}
.dx .brief .pri .lamp{width:6px;height:6px;background:var(--d-line3);flex:none}
.dx .brief .pri[aria-checked="true"]{background:var(--d-k0);border-color:var(--d-ink3);color:var(--d-ink)}
.dx .brief .pri[aria-checked="true"] .lamp{background:var(--teal)}
.dx .brief .rocker2{display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;color:var(--d-ink2);min-height:44px}
.dx .brief .rk{display:grid;grid-template-rows:1fr 1fr;width:40px;height:64px;border:1px solid var(--d-line3);background:var(--d-k0);box-shadow:0 3px 0 0 var(--d-k0),0 3px 0 1px var(--d-line2)}
.dx .brief .rk i{display:grid;place-items:center;font:600 12px/1 var(--d-mono);font-style:normal;color:var(--d-ink3);background:var(--d-k4)}
.dx .brief .rk i:first-child{border-bottom:1px solid var(--d-line2)}
.dx .brief .rocker2[aria-checked="true"] .rk i:first-child{background:var(--d-k0);color:var(--teal)}
.dx .brief .rocker2[aria-checked="false"] .rk i:last-child{background:var(--d-k0);color:var(--d-ink)}
.dx .brief .rocker2[aria-checked="true"] .mono{color:var(--d-ink)}
.dx .brief .slip2{background:var(--d-k0);display:flex;flex-direction:column;min-width:0}
.dx .brief .slip2 .shd .lamp{display:inline-block;width:7px;height:7px;background:var(--d-line3);margin-right:8px;vertical-align:0}
.dx .brief .slip2 .shd .lamp.on{background:var(--teal)}
.dx .brief .bt{font:300 clamp(30px,3vw,44px)/.95 var(--d-disp);text-transform:uppercase;letter-spacing:.01em;padding:20px 22px 18px;border-bottom:1px solid var(--d-line)}
.dx .brief .bs{padding:14px 22px 16px;border-bottom:1px solid var(--d-line)}
.dx .brief .bs .mono{margin-bottom:10px}
.dx .brief .bs ul{list-style:none}
.dx .brief .bs ul li{position:relative;padding:5px 0 5px 18px;font:400 14.5px/1.5 var(--d-text);color:var(--d-ink)}
.dx .brief .bs ul li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--teal)}
.dx .brief .bp{font:400 14.5px/1.55 var(--d-text);color:var(--d-ink2)}
.dx .brief .bs ol{list-style:none;counter-reset:s}
.dx .brief .bs ol li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 10px;padding:7px 0;border-top:1px solid var(--d-line);font:400 14px/1.5 var(--d-text);color:var(--d-ink2)}
.dx .brief .bs ol li:first-child{border-top:0}
.dx .brief .bs ol li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:500 11px/1.9 var(--d-mono);color:var(--d-ink3)}
.dx .brief .bs ol li b{font-weight:500;color:var(--d-ink)}
.dx .brief .bft2{padding:18px 22px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:auto}
.dx .brief .bact{display:flex;flex-wrap:wrap;gap:12px 22px}
.dx .brief .bft2 .fine a{color:var(--d-ink2)}
.dx .brief .slip2.print .bt,.dx .brief .slip2.print .bs{animation:dx-println .32s cubic-bezier(.3,.7,.2,1)}
@keyframes dx-println{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .dx .brief .needle{transition:none} .dx .brief .slip2.print .bt,.dx .brief .slip2.print .bs{animation:none} }
@media (max-width:1100px){ .dx .brief{grid-template-columns:minmax(0,1fr)} .dx .brief .bpanel{border-right:0;border-bottom:1px solid var(--d-line)} }
@media (max-width:640px){
  .dx .brief .latches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx .brief .mod.two{grid-template-columns:minmax(0,1fr)}
  .dx .brief .bhd2 span+span,.dx .brief .mh .mono.dim{display:none}
  .dx .brief .stops span{font-size:9px;letter-spacing:.06em}
  .dx .brief .mod,.dx .brief .bs,.dx .brief .bft2{padding-left:16px;padding-right:16px}
  .dx .brief .bt{padding-left:16px;padding-right:16px}
}

/* after the burn: the ash clears, then one plain line. Bone on black, display type, no effects. */
.dx .strike .under{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--d-k0)}
.dx .strike .under .better{align-self:center;max-width:none;font:300 clamp(44px,5.4vw,88px)/.9 var(--d-disp);text-transform:uppercase;letter-spacing:-.005em;color:var(--d-ink);text-align:center;opacity:0;transition:opacity .2s ease}
.dx .strike.cleared .under .better{opacity:1;transition:opacity .9s ease .85s}
.dx .strike .fx{transition:opacity .85s ease}
.dx .strike.cleared .fx{opacity:0}
@media (prefers-reduced-motion:reduce){ .dx .strike .better,.dx .strike .fx{transition:none} }
/* the parody headline: long, breathless, emoji. The only place any of that is allowed. */
.dx .slop h4{font-size:clamp(26px,3.1vw,46px);line-height:1.12;max-width:760px}

/* ---------------------------------------------------------------- R-002 Site reader (after the burn) */
.dx .strike .under{flex-direction:column;gap:30px}
.dx .strike.cleared .under{position:relative;inset:auto;min-height:640px}
.dx .strike.cleared .bay{min-height:0}
@media (max-width:640px){ .dx .strike.cleared .under{min-height:600px;padding:28px 16px} }
.dx .rdwrap{width:min(560px,100%);display:flex;flex-direction:column;align-items:stretch;gap:14px;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
.dx .strike.cleared .rdwrap{visibility:visible;opacity:1;transition:opacity .9s ease 1.9s,visibility 0s linear 1.9s}
.dx .rdwrap .rq{font:400 16px/1.4 var(--d-text);color:var(--d-ink2);text-align:center;margin-bottom:34px}
/* the body: matte black anodised aluminium, hairline seams, four machined screws */
.dx .rdr{position:relative;padding:16px 18px 14px;border:1px solid #2E2E2E;border-radius:3px;background-color:#111;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 1px 0 #2A2A2A,inset 0 -1px 0 #000,0 14px 22px -10px rgba(0,0,0,.9)}
.dx .rdr .scr{position:absolute;width:9px;height:9px;border-radius:50%;background:#0A0A0A;border:1px solid #2E2E2E}
.dx .rdr .scr::after{content:"";position:absolute;left:1px;right:1px;top:3px;height:1.5px;background:#000;transform:rotate(-35deg)}
.dx .rdr .scr.tl{left:7px;top:7px}.dx .rdr .scr.tr{right:7px;top:7px}.dx .rdr .scr.bl{left:7px;bottom:7px}.dx .rdr .scr.br{right:7px;bottom:7px}
.dx .rdr .scr.tr::after{transform:rotate(20deg)}.dx .rdr .scr.bl::after{transform:rotate(70deg)}
/* top grille the smoke vents from, and the smoke's canvas above it */
.dx .rdr .grille{position:absolute;top:-7px;right:16%;display:flex;gap:3px;padding:2px 4px;background:#0C0C0C;border:1px solid #2E2E2E;border-bottom:0;border-radius:2px 2px 0 0}
.dx .rdr .grille i{width:3px;height:4px;background:#000;border-left:1px solid #050505;box-shadow:inset 0 1px 0 #000}
.dx .rdr .smoke{position:absolute;left:0;right:0;bottom:100%;width:100%;height:150px;pointer-events:none}
.dx .rdr .rhd{display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px;border-bottom:1px solid #222;box-shadow:0 1px 0 #1C1C1C;color:var(--d-ink3)}
.dx .rdr .pwr{display:inline-flex;align-items:center;gap:8px}
.dx .rdr .pwr i{width:7px;height:7px;border-radius:50%;background:#1E1E1E;border:1px solid #333}
.dx .rdr.on .pwr i{background:var(--teal);border-color:var(--teal)}
.dx .rdr .lamps{display:flex;justify-content:space-between;padding:12px 10px 6px}
.dx .rdr .lamps i{width:9px;height:4px;background:#1C1C1C;border:1px solid #2E2E2E;transition:background .08s}
.dx .rdr .lamps i.on{background:var(--teal);border-color:var(--teal)}
@media (prefers-reduced-motion:reduce){ .dx .rdr .lamps i{transition:none} }
.dx .rdr .scale{position:relative;margin:2px 10px 0;height:58px}
.dx .rdr .scale svg{position:absolute;left:0;right:0;top:0;width:100%;height:34px}
.dx .rdr .needle{position:absolute;top:-2px;width:2px;height:36px;margin-left:-1px;background:var(--teal)}
.dx .rdr .needle::after{content:"";position:absolute;left:-4px;top:-5px;border:5px solid transparent;border-top-color:var(--teal);border-bottom:0}
.dx .rdr .zones{position:absolute;left:0;right:0;top:40px;display:flex;justify-content:space-between;color:var(--d-ink3);font-size:9.5px}
/* front panel: the input slot and the key */
.dx .rdr .slot{display:flex;align-items:stretch;gap:10px;margin:8px 10px 0}
.dx .rdr .slot .pre{display:grid;place-items:center;padding:0 10px;border:1px solid #2E2E2E;border-right:0;background:#070707;color:var(--d-ink3);margin-right:-10px}
.dx .rdr .slot input{flex:1;min-width:0;min-height:44px;background:#000;border:1px solid #3C3C3C;color:var(--d-ink);font:400 15px/1 var(--d-mono);padding:0 12px;outline:none;box-shadow:inset 0 2px 3px rgba(0,0,0,.9)}
.dx .rdr .slot input::placeholder{color:var(--d-ink3)}
.dx .rdr .slot input:focus{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.dx .rdr .slot input[aria-invalid="true"]{border-color:var(--d-ink)}
.dx .rdr .rkey,.dx .rdwrap .rep .rkey{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;background:#1A1A1A;color:var(--d-ink);cursor:pointer;
  border:1px solid #3C3C3C;box-shadow:0 3px 0 0 #000,0 3px 0 1px #2E2E2E;font:600 11px/1 var(--d-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:transform .09s cubic-bezier(.3,.7,.4,1),box-shadow .09s}
.dx .rdr .rkey .lamp,.dx .rdwrap .rep .rkey .lamp{width:6px;height:6px;background:#333}
.dx .rdr .rkey[aria-pressed="true"]{transform:translateY(3px);box-shadow:0 0 0 0 #000,0 0 0 1px #2E2E2E}
.dx .rdr .rkey[aria-pressed="true"] .lamp{background:var(--teal)}
.dx .rdr .datum{display:flex;align-items:center;gap:10px;margin:14px 10px 0;color:var(--d-ink3);font-size:9.5px}
.dx .rdr .datum i{flex:1;height:1px;background:#3C3C3C}
.dx .rdr .mouth{height:5px;margin:12px 22% -14px;background:#000;border:1px solid #2A2A2A;border-bottom:0}
/* the printout: narrow paper strip fed out of the mouth */
.dx .rdwrap .paper{width:min(420px,88%);align-self:center;margin-top:-14px;background:#ECEAE3;color:#151515;padding:16px 18px 14px;
  box-shadow:0 10px 16px -10px rgba(0,0,0,.9);clip-path:inset(0 0 0 0);text-align:left}
.dx .rdwrap .paper.out{animation:dx-feed .7s cubic-bezier(.3,.7,.2,1)}
@keyframes dx-feed{from{clip-path:inset(0 0 100% 0);transform:translateY(-10px)}to{clip-path:inset(0 0 0 0);transform:none}}
@media (prefers-reduced-motion:reduce){ .dx .rdwrap .paper.out{animation:none} }
.dx .rdwrap .paper:focus{outline:none}
.dx .rdwrap .ph{display:flex;justify-content:space-between;gap:10px;color:#4A4A47;padding-bottom:8px;border-bottom:1px dashed #9A978F}
.dx .rdwrap .ph span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.04em}
.dx .rdwrap .pl{font:700 30px/.95 var(--d-disp);text-transform:uppercase;letter-spacing:.02em;margin:12px 0 10px;color:#111}
.dx .rdwrap .pscale{position:relative;height:34px}
.dx .rdwrap .pscale svg{width:100%;height:18px}
.dx .rdwrap .pscale i{position:absolute;top:-3px;width:0;height:0;margin-left:-5px;border:5px solid transparent;border-top:7px solid #111;border-bottom:0}
.dx .rdwrap .pscale .mono{display:flex;justify-content:space-between;color:#4A4A47;font-size:9px;margin-top:2px}
.dx .rdwrap .po{list-style:none;margin:8px 0 10px;border-top:1px solid #C9C6BD}
.dx .rdwrap .po li{padding:7px 0;border-bottom:1px solid #C9C6BD;font:400 14px/1.4 var(--d-text);color:#1A1A1A}
.dx .rdwrap .pb{font:400 14px/1.4 var(--d-text);color:#1A1A1A}
.dx .rdwrap .pb a{color:#111;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dx .rdwrap .pb a:focus-visible{outline:2px solid #111;outline-offset:2px}
.dx .rdwrap .pd{margin-top:10px;color:#55534E;font-size:9.5px}
@media (max-width:640px){
  .dx .rdr{padding:14px 12px 12px}
  .dx .rdr .slot{flex-wrap:wrap}
  .dx .rdr .slot input{flex-basis:calc(100% - 52px)}
  .dx .rdr .rkey{flex:1;justify-content:center}
  .dx .rdr .zones{font-size:8.5px;letter-spacing:.06em}
  .dx .rdwrap .paper{width:94%}
}
@media (prefers-reduced-motion:reduce){
  .dx .strike .rdwrap,.dx .strike.cleared .rdwrap,.dx .strike .under .better,.dx .strike.cleared .under .better,.dx .rdr .needle{transition:none!important}
}
/* R-002 revision: black glass top, warm-white lamps, white backlit scale. Teal = needle, ready lamp, focus. */
.dx .rdr{padding-top:0}
.dx .rdr .glass{position:relative;margin:0 -18px 12px;padding:18px 28px 8px;background:#060606;border-bottom:1px solid #000;border-radius:3px 3px 0 0;overflow:hidden;box-shadow:0 1px 0 #262626}
/* smoked glass over the lamps and scale: tint, crisp edge highlight, one faint raking reflection */
.dx .rdr .glass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:3px 3px 0 0;
  background:linear-gradient(116deg,rgba(255,255,255,.05) 0 24%,rgba(255,255,255,0) 24% 100%),rgba(12,12,14,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.9)}
/* slim vent grille cut into the back edge of the glass */
.dx .rdr .glass .grille{position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);z-index:2;display:flex;gap:3px;padding:0;background:none;border:0;border-radius:0}
.dx .rdr .glass .grille i{width:2px;height:6px;background:#000;border:0;box-shadow:1px 0 0 #1C1C1C}
/* pilot lamps: small round lenses; lit = warm white with a lens highlight and a faint spill on the panel */
.dx .rdr .lamps{padding:6px 2px 8px}
.dx .rdr .lamps i{width:9px;height:9px;border-radius:50%;background:#121212;border:1px solid #2A2A2A;box-shadow:inset 1px 1px 0 rgba(255,255,255,.12);transition:background .1s,box-shadow .1s,border-color .1s}
.dx .rdr .lamps i.on{background:#F3EBDA;border-color:#CFC6B2;
  background-image:radial-gradient(circle at 36% 32%,#FFFFFF 0 22%,rgba(255,255,255,0) 46%);
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.18),0 0 0 3px rgba(255,246,228,.06),0 0 7px 1px rgba(255,246,228,.14)}
/* the scale is backlit white through the glass; the needle is the one teal mark */
.dx .rdr .scale{margin:2px 0 0}
.dx .rdr .zones{color:#D8D3C8}
.dx .rdr.on .pwr i{background:#F3EBDA;border-color:#CFC6B2}
.dx .rdr.ready .pwr i{background:var(--teal);border-color:var(--teal)}
.dx .rdr .rkey[aria-pressed="true"] .lamp{background:#F3EBDA}
.dx .rdr .rhd{padding-top:2px}
@media (max-width:640px){ .dx .rdr .glass{margin:0 -12px 12px;padding:18px 18px 8px} }
/* R-002: the report step, on black under the printout */
.dx .rdwrap .rep,.dx .rdwrap .repok{width:min(420px,88%);align-self:center;margin-top:14px;padding:16px 0 0;border-top:1px solid #2E2E2E;text-align:left}
.dx .rdwrap .repok:focus{outline:none}
.dx .rdwrap .rph{font:700 20px/1 var(--d-disp);letter-spacing:.05em;text-transform:uppercase;color:var(--d-ink);overflow-wrap:anywhere}
.dx .rdwrap .rpd{margin-top:8px;font:400 14px/1.5 var(--d-text);color:var(--d-ink2)}
.dx .rdwrap .rpd a{color:var(--d-ink);text-underline-offset:3px}
.dx .rdwrap .rprow{display:flex;gap:10px;margin-top:14px}
.dx .rdwrap .rprow input{flex:1;min-width:0;min-height:44px;background:#000;border:1px solid #3C3C3C;color:var(--d-ink);font:400 15px/1 var(--d-text);padding:0 12px;outline:none}
.dx .rdwrap .rprow input::placeholder{color:var(--d-ink3)}
.dx .rdwrap .rprow input:focus{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.dx .rdwrap .rprow input[aria-invalid="true"]{border-color:var(--d-ink)}
.dx .rdwrap .rpopt{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font:400 13.5px/1.45 var(--d-text);color:var(--d-ink2);cursor:pointer}
.dx .rdwrap .rpopt input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin-top:1px;border:1px solid #8C8C88;background:#000;cursor:pointer;display:grid;place-items:center}
.dx .rdwrap .rpopt input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--d-ink);border-bottom:2px solid var(--d-ink);transform:translateY(-1px) rotate(-45deg)}
.dx .rdwrap .rpopt input:focus-visible{outline:1px dashed var(--teal);outline-offset:3px}
.dx .rdwrap .rpfine{margin-top:8px;font:400 12.5px/1.4 var(--d-text);color:var(--d-ink3)}
.dx .rdwrap .rperr{margin-top:10px;font:400 13px/1.4 var(--d-text);color:var(--d-ink);border-left:2px solid var(--teal);padding-left:10px}
.dx .rdwrap .repok .pd{margin-top:10px;color:var(--d-ink3);font-size:9.5px}
@media (max-width:640px){ .dx .rdwrap .rprow{flex-wrap:wrap} .dx .rdwrap .rprow .rkey{flex:1;justify-content:center} .dx .rdwrap .rep,.dx .rdwrap .repok{width:94%} }
.dx .rdwrap .rep .rkey:active{transform:translateY(3px);box-shadow:0 0 0 0 #000,0 0 0 1px #2E2E2E}
.dx .rdwrap .rep .rkey:disabled{color:var(--d-ink3);cursor:progress}
.dx .rdwrap .rep .rkey .lamp{background:#F3EBDA}
.dx .rdwrap .repok .em{text-transform:none;font-family:var(--d-mono);font-weight:500;font-size:16px;letter-spacing:.02em;display:block;margin-top:6px}

/* =====================================================================================================
   MERGE · small parts
   ===================================================================================================== */
/* R-002 mode plate: DEMO or LIVE, engraved white (teal stays for the needle, the ready lamp and focus) */
.dx .rdr .mode{display:inline-block;margin-left:10px;padding:2px 6px 1px;border:1px solid #6A6E6F;color:var(--soft);font-weight:700;font-size:9.5px;letter-spacing:.16em;vertical-align:1px}
.dx .rdr .mode.live{border-color:var(--paper);color:var(--paper)}
/* exit links under a floor: Casper-underlined, like the roof links */
.exitx{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:0 var(--gut) clamp(40px,5vw,72px)}
.exitx a{font:600 13px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-decoration:underline;text-decoration-color:var(--casper);text-underline-offset:5px;text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center}
.exitx a:hover{color:var(--casper)}
.exitx .muted{font-size:14px}
/* prose floors on the sheet pages */
.prose{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gut);padding:0 var(--gut) clamp(40px,5vw,80px)}
.prose>*{grid-column:2}
.rowsx{border-top:1px solid var(--line-2);max-width:980px}
.rowsx>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.rowsx>div>span:first-child{font:600 12px/1.6 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.rowsx>div>span:last-child,.rowsx>div>div{color:var(--soft)}
.rowsx strong{color:var(--paper);font-weight:600}
@media (max-width:900px){ .prose{grid-template-columns:minmax(0,1fr)} .prose>*{grid-column:1} }
@media (max-width:560px){ .rowsx>div{grid-template-columns:1fr;gap:4px} }

/* Elevation leads: instrument headings take Elevation's heavy display weight */
.dx .h2{font-weight:800;letter-spacing:.005em}
.dx .h2 b{font-weight:800}
@media (max-width:600px){ .dx .sset .nav > span{display:none} .dx .sset .nav .key{padding-inline:12px} }

/* ---------- Case-study galleries: real captures of client sites (crops only, never retouched) ---------- */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start;padding-bottom:clamp(40px,5vw,72px)}
.gal__f{grid-column:span var(--span,6);margin:0}
.gal__frame{background:#000;border:1px solid var(--line-2);padding:clamp(6px,.8vw,10px)}
.gal__frame img,.gal__frame video{display:block;width:100%;height:auto;background:var(--slab)}
.gal__f figcaption{display:flex;flex-direction:column;gap:4px;padding-top:12px;font:400 15px/1.5 var(--text);color:var(--soft);max-width:62ch}
.gal__src{font:600 11px/1.4 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
@media (max-width:900px){ .gal__f{grid-column:span 12} .gal__f[style*="--span:4"]{grid-column:span 12} }
.writeup{border:1px solid var(--line-2);background:var(--slab);padding:18px 20px;margin-bottom:22px}
.writeup__k{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px;font:600 11px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.writeup__k .todo{letter-spacing:.04em;text-transform:none;font-size:12px}
.writeup__t{margin:0;font:400 17px/1.6 var(--text);color:var(--paper);max-width:64ch}
.ccard{display:block;text-decoration:none;color:inherit}
.ccard__img{aspect-ratio:16/10;overflow:hidden;background:#000;border:1px solid var(--line-2)}
.ccard__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ccard__t{display:flex;flex-direction:column;gap:4px;padding-top:14px}
.ccard__t b{font:800 26px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--paper)}
.ccard__t span{font:400 15px/1.5 var(--text);color:var(--soft)}
.ccard:hover .ccard__img,.ccard:focus-visible .ccard__img{border-color:var(--casper)}
.regthumb{display:block;width:72px;height:48px;object-fit:cover;border:1px solid var(--line-2);background:#000}

/* placeholder tags keep black on yellow inside instrument title blocks (14.9:1) */
.dx .todo,.dx .tb2 .todo{color:#000!important;opacity:1}

/* "Lock & roll": the line that confirms a filed brief (paper on ink, 17.5:1) */
.tb__locked{margin:16px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--casper);font:600 16px/1.5 var(--text);color:var(--paper)}
/* the lead image of a gallery: full row, held to a readable width */
.gal__f--hero .gal__frame{max-width:980px;margin-inline:auto}
.gal__f--hero figcaption{max-width:980px;margin-inline:auto}
.tb__demo{margin:6px 0 0;padding-left:14px;font:600 11px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.tb__demo a{color:var(--soft)}
.tb__fail{margin:16px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--paper);font:600 16px/1.5 var(--text);color:var(--paper)}
.tb__fail a{color:var(--paper)}
.tb__hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.gal__ph{margin:10px 0 0;font:400 14px/1.5 var(--text);color:var(--soft)}

/* focus, final pass: a 2px ring everywhere; black on the light wall and paper grounds so it clears 3:1 */
:focus-visible{outline:2px solid var(--casper);outline-offset:3px}
.hero :focus-visible,.coat__btn:focus-visible,.dx .paper :focus-visible{outline:2px solid #000;outline-offset:3px}
.tb__c input:focus-visible,.tb__c select:focus-visible,.tb__c textarea:focus-visible{box-shadow:inset 0 -2px 0 var(--casper)}
.hero .hero__top :focus-visible{outline-color:var(--casper)}
/* Studio: people cards (portrait plate + name, role, bio) */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(20px,3vw,40px);padding-bottom:clamp(40px,5vw,72px)}
.person{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;align-items:start}
.person__t p{margin:0 0 10px}
.person__n{font:800 26px/1.1 var(--display);text-transform:uppercase;color:var(--paper)}
.person__r{font:600 12px/1.4 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.person__b{font:400 16px/1.6 var(--text);color:var(--soft)}
@media (max-width:520px){ .person{grid-template-columns:1fr} .person .plate{max-width:240px} }
/* Work louvres: sill = name, category, one real line, link */
.louvre__sill .louvre__cat{font:600 11px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.louvre__sill .louvre__line{font:400 14px/1.45 var(--text);color:var(--soft)}
.louvre__sill .louvre__go{align-self:flex-start;margin-top:4px;font:700 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-underline-offset:4px}
/* replacement plates for the removed stock photographs */
.ph--mark .markplate{aspect-ratio:1/1;background:#000;border:1px solid var(--line-2);display:grid;place-items:center}
.ph--mark .markplate span{display:block;width:46%;color:var(--paper);overflow:visible;white-space:normal}
.ph--render img{filter:none;object-fit:cover;border:1px solid var(--line-2);background:#000}
/* Studio: the founder card spans the row; the second card stays a placeholder below */
.person--founder{grid-column:1/-1;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,40px);scroll-margin-top:120px}
.person--founder .person__b{font-size:17px;line-height:1.65;color:var(--paper);max-width:64ch}
.person__k{font:600 11px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.person--founder .person__n{margin:0 0 6px;font:800 clamp(34px,4vw,56px)/.95 var(--display)}
.person__links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px!important}
.person__links a{font:700 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-underline-offset:4px}
@media (max-width:640px){ .person--founder{grid-template-columns:1fr} .person--founder .plate{max-width:240px} }
/* homepage: founder teaser inside L5 */
.founderx{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr);gap:var(--gut);padding:clamp(24px,3vw,40px) var(--gut) 0}
.founderx__k{font:800 clamp(28px,3vw,44px)/.95 var(--display);text-transform:uppercase;color:var(--paper);margin:0}
.founderx__t{margin:0;font:400 clamp(17px,1.4vw,20px)/1.55 var(--text);color:var(--soft);max-width:58ch}
.founderx__t strong{color:var(--paper);font-weight:600}
.founderx__go{display:inline-block;margin-top:16px;font:700 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-underline-offset:4px}
@media (max-width:899px){ .founderx{grid-template-columns:1fr;gap:12px} }
.founderx{padding-bottom:clamp(48px,6vw,96px)}






/* SYMBOLS-SHEET: identity I-109 */
.symset{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:var(--gut)}
.symcell{margin:0;border:1px solid var(--line-2);background:#000;display:flex;flex-direction:column;color:#F2F2EE;outline-offset:3px}
.symcell:focus-visible{outline:2px solid #AABBC5}
.symcell__big{display:grid;place-items:center;padding:28px 0 22px;border-bottom:1px solid var(--line-2)}
.symcell__small{display:flex;justify-content:center;gap:22px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.symcell__small span{display:flex;flex-direction:column;align-items:center;gap:6px}
.symcell__small i{font:600 10px/1 var(--text);letter-spacing:.1em;font-style:normal;color:#8E9294}
.symcell figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:12px 14px 14px}
.symcell figcaption b{grid-row:1/3;font:800 34px/1 var(--display);color:#F2F2EE}
.symcell figcaption span{font:700 13px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase}
.symcell figcaption small{font:500 12px/1.3 var(--text);color:#B9BDBF}

/* ROOF-ASALA: the roof plan carries the ASALA method: Audit, Specify, Architect, Launch, Attend (sheet A-601) */
.roof__map{display:block}
.roof__sky{margin:10px var(--gut) 0;border-bottom:1px solid #2A2C2D}
.roof__sky img{display:block;width:100%;height:auto}
.roof__method{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0;padding:18px var(--gut) 4px;font:600 12px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#B9BDBF}
.roof__method b{font:800 clamp(22px,2.2vw,30px)/1 var(--display);letter-spacing:.04em;color:#F2F2EE}
.roof__method i{font-style:normal;color:#8E9294;margin-left:auto}
.roof__plan .rp__step{cursor:pointer;outline:none}
.roof__plan .rp__room{fill:#000;stroke:#AABBC5;stroke-width:1.5;transition:fill .15s linear,stroke .15s linear}
.roof__plan .rp__step--start .rp__room{stroke:#F2F2EE;stroke-width:3}
.roof__plan .rp__letter{font-family:"Big Shoulders",Impact,sans-serif;font-weight:800;font-size:72px;fill:#F2F2EE}
.roof__plan .rp__word{font-family:Hanken,sans-serif;font-weight:700;font-size:13px;letter-spacing:1.8px;fill:#F2F2EE}
.roof__plan .rp__tagx{font-family:Hanken,sans-serif;font-weight:600;font-size:10px;letter-spacing:1.1px;fill:#B9BDBF;text-anchor:end}
.roof__plan .rp__line,.roof__plan .rp__cap{font-family:Hanken,sans-serif;font-weight:600;font-size:12px;letter-spacing:.4px;fill:#F2F2EE;text-anchor:middle;transition:opacity .15s linear}
.roof__plan .rp__cap{fill:#B9BDBF;letter-spacing:1.6px;font-size:11px}
.roof__plan .rp__line{opacity:0;pointer-events:none}
.roof__plan .rp__cap{pointer-events:none}
.roof__plan .rp__step:hover .rp__line,.roof__plan .rp__step:focus-visible .rp__line{opacity:1}
.roof__plan .rp__ring{stroke:#AABBC5;stroke-width:2;opacity:0}
.roof .roof__plan .rp__step:focus,.roof .roof__plan .rp__step:focus-visible{outline:0}
.roof__plan .rp__step:focus-visible .rp__ring{opacity:1}
.roof__plan .rp__step:hover .rp__room,.roof__plan .rp__step:focus-visible .rp__room{fill:#111212;stroke:#F2F2EE}
.roof__plan .rp__step:hover .rp__word{text-decoration:underline}
.roof__plan .rp__seq path{stroke:#B9BDBF;stroke-width:1.5}
.roof__plan .rp__ret path{stroke:#8E9294;stroke-width:1}
@media (prefers-reduced-motion:reduce){ .roof__plan .rp__room,.roof__plan .rp__line,.roof__plan .rp__cap,.roof__map .roof__list a{transition:none} }
/* below 720px: the same five rooms as a stacked list, each line always shown */
.roof__list{display:none;list-style:none;margin:0;padding:12px var(--gut) 20px;border-bottom:1px solid var(--line-2)}
@media (max-width:719px){ .roof__plan{display:none} .roof__list{display:grid;gap:8px} .roof__method i{margin-left:0} }
.roof__map .roof__list li{margin:0}
.roof__map .roof__list a{display:grid;grid-template-columns:44px 1fr auto;grid-template-areas:"l n t" "l d d";column-gap:12px;row-gap:4px;align-items:center;min-height:56px;padding:10px 14px;
  border:1px solid #AABBC5;background:#000;color:#F2F2EE;text-decoration:none;transition:background-color .15s linear}
.roof__map .roof__list .rl__start a{border:3px solid #F2F2EE}
.roof__list .rl__l{grid-area:l;font:800 40px/1 var(--display);color:#F2F2EE;text-align:center}
.roof__list .rl__n{grid-area:n;font:700 14px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase}
.roof__list .rl__t{grid-area:t;font:600 11px/1 var(--text);letter-spacing:.1em;color:#B9BDBF}
.roof__list .rl__d{grid-area:d;font:400 14px/1.45 var(--text);color:#B9BDBF}
.roof__map .roof__list a:hover,.roof__map .roof__list a:focus-visible{background:#111212;text-decoration:none}
.roof__map .roof__list a:focus-visible{outline:2px solid #AABBC5;outline-offset:3px}

.roof__plan .rp__step .msym{color:#AABBC5;transition:color .15s linear}
.roof__plan .rp__step:hover .msym,.roof__plan .rp__step:focus-visible .msym{color:#F2F2EE}
.roof__list .rl__t{display:inline-flex;align-items:center;gap:8px}
.roof__list .rl__t .msym{color:#AABBC5;flex:none}

/* SYMBOLS: the five ASALA method instruments (24-unit grid, a 1 px non-scaling stroke, square caps, mitre joins, currentColor) */
.msym{overflow:visible}
.msym path,.msym rect,.msym circle{vector-effect:non-scaling-stroke}
.msym .m-mv{transform-box:view-box}
.msym--audit .m-mv{transform-origin:12px 12px}
.msym--specify .m-mv{transform-origin:4.5px 20.25px}
.msym--architect .m-mv{transform-origin:6.75px 18.25px}
.msym--launch .m-mv{transform-origin:12px 2.5px}
.msym--attend .m-mv{transform-origin:18px 12px}
@keyframes msym-level{0%{transform:translateX(2.25px)}55%{transform:translateX(-.4px)}80%{transform:translateX(.15px)}100%{transform:none}}
@keyframes msym-dim{0%{transform:scaleX(0)}100%{transform:none}}
@keyframes msym-arc{0%{transform:none}50%{transform:rotate(-7deg)}100%{transform:none}}
@keyframes msym-swing{0%{transform:rotate(5deg)}30%{transform:rotate(-3deg)}55%{transform:rotate(1.6deg)}78%{transform:rotate(-.6deg)}100%{transform:none}}
@keyframes msym-jaw{0%{transform:none}45%{transform:translateX(-2px)}100%{transform:none}}
.msym-t:hover .msym--audit .m-mv,.msym-t:focus-visible .msym--audit .m-mv{animation:msym-level .56s cubic-bezier(.2,.7,.2,1) 1}
.msym-t:hover .msym--specify .m-mv,.msym-t:focus-visible .msym--specify .m-mv{animation:msym-dim .45s cubic-bezier(.2,.7,.2,1) 1}
.msym-t:hover .msym--architect .m-mv,.msym-t:focus-visible .msym--architect .m-mv{animation:msym-arc .55s cubic-bezier(.45,0,.2,1) 1}
.msym-t:hover .msym--launch .m-mv,.msym-t:focus-visible .msym--launch .m-mv{animation:msym-swing .58s ease-out 1}
.msym-t:hover .msym--attend .m-mv,.msym-t:focus-visible .msym--attend .m-mv{animation:msym-jaw .5s cubic-bezier(.45,0,.2,1) 1}
@media (prefers-reduced-motion:reduce){ .msym .m-mv{animation:none!important} }

/* L04 gallery banner (Our Work): ASALA's own scanline image, no credit chip */
.band--gallery{height:clamp(220px,40vw,600px);margin:0 0 clamp(28px,4vw,56px)}
.band--gallery picture{display:block;width:100%;height:100%}
.band--gallery img{display:block}
.band--gallery .band__dim{bottom:clamp(20px,3vw,40px);pointer-events:none}
@media (max-width:640px){.band--gallery .band__dim{font-size:34px;bottom:16px}}

/* Silent grid: lettered grid bubbles become small empty nodes (the 28px box stays, so nothing moves) */
.bub--node{border-color:transparent;background:transparent;color:transparent;font-size:0}
.bub--node::before{content:"";display:block;width:9px;height:9px;box-sizing:border-box;border:1px solid var(--mid);border-radius:50%;background:var(--ink)}
.hero__bubs .bub--node{background:transparent}
.hero__bubs .bub--node::before{background:#000}

/* L1 + L7 head figures: no frame, the image's black melts into the page, edges feathered */
.ph--bleed{background:transparent;overflow:visible}
.ph--bleed img{border-color:transparent;background:transparent;mix-blend-mode:lighten;
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ph--bleed .cap{background:transparent}
#make .ph--bleed img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 84%,transparent 100%)}
#shelf .ph--bleed img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 90%,transparent 100%)}

/* L4 head figure: the hand and cord, frameless like L1 and L7; the top fade hides the wrist's cut edge */
#measure .ph--bleed img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 7%,#000 30%,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 7%,#000 30%,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 90%,transparent 100%)}
/* Brief form: long size options fit the select at phone widths (16px keeps iOS from zooming) */
@media (max-width:640px){.tb__c select{font-size:16px}}

/* ---------------- NAVDIR: consolidated sticky bar + Services building directory (stage) ---------------- */
.dirbar__home{gap:0;padding:0 22px 0 var(--gut)}
.dirbar__home svg{display:block;height:15px;width:auto}
.dirbar__list{overflow:visible;flex:1;gap:4px}
.dirbar__list>li{display:flex}
.dirbar__svcli{position:static}
.dirbar__svc{display:flex;align-items:center;gap:8px;height:100%;padding:0 10px;border:0;background:none;cursor:pointer;font:600 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);position:relative}
.dirbar__svc:hover,.dirbar__svc[aria-expanded="true"]{color:var(--paper)}
.dirbar__svc.is-here{color:var(--paper)}
.dirbar__svc.is-here::after,.dirbar__svc[aria-expanded="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--casper)}
.dirbar__svc-m{display:none}
.dirbar__chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dirbar__svc[aria-expanded="true"] .dirbar__chev{transform:translateY(2px) rotate(-135deg)}
.sdir{position:absolute;left:0;right:0;top:100%;z-index:70;max-height:calc(100vh - 60px);overflow:auto;background:#0B0B0B;border-bottom:1px solid #686B6C;
  display:grid;grid-template-columns:210px minmax(0,3fr) minmax(220px,1fr);grid-template-areas:"top top top" "floors cols tools" "floors cols corner" "foot foot foot";
  gap:0;padding:0 var(--gut) 0 var(--gut);overflow-x:hidden;color:var(--paper);font-family:var(--text);animation:dirIn .14s ease-out}
.sdir[hidden]{display:none}
@keyframes dirIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sdir{animation:none}}
.sdir__top{grid-area:top;display:flex;justify-content:space-between;align-items:center;padding:18px 0 14px;border-bottom:1px solid #686B6C}
.sdir__k{margin:0;font:600 11px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:#AABBC5}
.sdir__x{display:none}
.sdir__h{margin:0 0 12px;font:700 15px/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.sdir ul,.sdir ol{list-style:none;margin:0;padding:0}
.sdir__floors{grid-area:floors;padding:22px 24px 26px 0;border-right:1px solid #686B6C}
.sdir__floors a{display:flex;gap:12px;align-items:baseline;padding:6px 0;font:500 14px/1.3 var(--text);color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(104,107,108,.45)}
.sdir__floors b{min-width:24px;font:600 11px/1 var(--text);letter-spacing:.12em;color:#AABBC5}
.sdir__floors a:hover span{text-decoration:underline;text-underline-offset:3px}
.sdir__cols{grid-area:cols;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-right:1px solid #686B6C}
.sdir__cols>.sdir__g{padding:22px 24px 26px;border-right:1px solid rgba(104,107,108,.45)}
.sdir__cols>.sdir__g:last-child{border-right:0}
.sdir__tools{grid-area:tools;padding:22px 0 18px 24px}
.sdir__corner{grid-area:corner;padding:16px 0 22px 24px;border-top:1px solid rgba(104,107,108,.45);align-self:end}
.sdir__corner .sdir__h{font-size:12px;color:#AABBC5}
.sdir__corner ul{display:flex;flex-wrap:wrap;gap:4px 18px}
.sdir__corner .sdir__d{display:none}
.sdir__pages{display:none}
.sdir__a{display:grid;grid-template-columns:12px 1fr;column-gap:10px;align-items:baseline;padding:7px 0;text-decoration:none;color:var(--paper)}
.sdir__n{width:7px;height:7px;border:1px solid #686B6C;align-self:center;grid-row:1}
.sdir__t{font:600 15px/1.3 var(--text)}
.sdir__d{grid-column:2;font:400 13px/1.4 var(--text);color:#AABBC5}
.sdir__a:hover .sdir__t,.sdir__a:focus-visible .sdir__t{text-decoration:underline;text-underline-offset:3px}
.sdir__a:hover .sdir__n,.sdir__a:focus-visible .sdir__n,.sdir__a[aria-current="page"] .sdir__n{background:#AABBC5;border-color:#AABBC5}
.sdir a:focus-visible,.sdir button:focus-visible,.dirbar__svc:focus-visible{outline:2px solid #AABBC5;outline-offset:2px}
.sdir__foot{grid-area:foot;display:flex;justify-content:flex-end;gap:28px;padding:14px 0 16px;border-top:1px solid #686B6C}
.sdir__foot a{font:600 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-underline-offset:4px}
@media (max-width:1100px){.sdir{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"top top" "floors cols" "floors tools" "floors corner" "foot foot"}.sdir__cols{border-right:0}.sdir__tools,.sdir__corner{padding-left:24px}}
@media (max-width:899px){
  .dirbar__list>li:not(.dirbar__svcli):not(.dirbar__bookli){display:none}
  .dirbar__bookli{margin-left:auto}
  .dirbar__list{padding:0}
  .dirbar__svc{padding:0 16px}
  .dirbar__svc-d{display:none}.dirbar__svc-m{display:inline}
  .sdir{position:fixed;inset:0;max-height:none;z-index:300;display:block;padding:0 20px 32px;animation:none}
  .sdir[hidden]{display:none}
  .sdir__top{position:sticky;top:0;background:#0B0B0B;z-index:1;padding:14px 0}
  .sdir__x{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #686B6C;background:none;color:var(--paper);font:600 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .sdir__pages{display:block;padding:18px 0 4px}
  .sdir__floors,.sdir__cols,.sdir__tools,.sdir__corner{border:0;padding:18px 0 4px}
  .sdir__cols{display:block}.sdir__cols>.sdir__g{padding:0 0 14px;border:0}
  .sdir__floors{order:9}
  .sdir__a{padding:9px 0;min-height:44px}
  .sdir__foot{flex-direction:column;align-items:flex-start;gap:18px;padding:20px 0 0;margin-top:14px}
}
html.dir-lock{overflow:hidden}
@media (max-width:899px){.dirbar.dirbar--open{z-index:400}}
.pricex__pay{padding-left:12px;border-left:2px solid var(--casper)}
.pricex__pay b{color:var(--paper);font-weight:700}
.dx .reck .pr__pay{margin:8px 0 0;font:400 13px/1.5 var(--d-text);color:var(--d-ink2)}
/* NAVDIR: bar wordmark tucks while the home hero wordmark is in view (space kept, no link jump) */
.dirbar__home svg{transition:opacity .28s ease,transform .28s ease}
.dirbar__home--tuck{pointer-events:none}
.dirbar__home--tuck svg{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.dirbar__home svg{transition:none}.dirbar__home--tuck svg{transform:none}}
/* Studio founder portrait: frameless like L1 and L7; black melts into the page, edges feathered */
@media (max-width:640px){.person--founder .founder-ph{max-width:240px}}
#founder .ph--bleed img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 80%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 80%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
/* Studio team portraits: same frameless scanline treatment as the founder */
#ziah-dean .ph--bleed img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 80%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 80%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
/* Studio pair: founder and team cards side by side at equal width, same 260px portrait column; stacked on small screens */
.people{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.people .person{grid-column:auto;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);scroll-margin-top:120px}
.people .person .person__b{font-size:17px;line-height:1.65;color:var(--paper);max-width:64ch}
.people .person .person__n{margin:0 0 6px;font:800 clamp(30px,3vw,48px)/.95 var(--display)}
@media (max-width:1180px){ .people .person{grid-template-columns:1fr} .people .person .founder-ph{max-width:260px} }
@media (max-width:820px){ .people{grid-template-columns:1fr} .people .person{grid-template-columns:minmax(0,260px) minmax(0,1fr)} }
@media (max-width:640px){ .people .person{grid-template-columns:1fr} .people .person .founder-ph{max-width:240px} }

/* Marketing refinement. Opt-in sections leave the method and Reading Shelf intact. */
.polished > .floor__head{padding-block:clamp(28px,3.4vw,48px);row-gap:20px}
.polished .floor__title{font-size:clamp(48px,6.4vw,96px);line-height:.96;letter-spacing:.005em;text-wrap:balance;margin-bottom:20px}
.polished > .floor__head:has(> :nth-child(3):empty) > :nth-child(2){grid-column:2/-1;max-width:880px}
.polished > .floor__head > :nth-child(3):empty{display:none}
.polished .lede{max-width:60ch;line-height:1.6;text-wrap:pretty}
.polished > .prose{padding-bottom:48px}
.polished > .exitx{padding-bottom:48px;gap:12px 24px}
.polished#contact > .wrap{padding-bottom:48px}
.polished:has(> .prose + .exitx) > .prose{padding-bottom:24px}
.polished .cap,.polished .gal__src,.polished .writeup__k{font-size:12px;line-height:1.5;color:#AAB0B2}
.polished .rowsx > div > span:first-child{color:#AAB0B2;line-height:1.5}
.polished .pricex{max-width:760px}
.polished .pricex__t th[scope="row"]{line-height:1.15}
.polished .pricex__t td{font-variant-numeric:tabular-nums}
.polished .pricex__note{font-size:16px;line-height:1.6}

/* Consistent keyboard treatment, with dark outlines on light action surfaces. */
html{scroll-padding-top:72px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.dirbar a:focus-visible,.dirbar button:focus-visible,.rail a:focus-visible,.rail button:focus-visible{outline:2px solid var(--teal);outline-offset:-4px}
.dirbar .dirbar__book:focus-visible{outline:2px solid #B8975A;outline-offset:2px}
.roof__book:focus-visible,.tb__submit:focus-visible{outline:2px solid #000;outline-offset:-5px}
.hero .plinth :focus-visible{outline-color:var(--teal)}
.hero .plinth .coat__btn:focus-visible{outline-color:#000;outline-offset:-5px}
.tb__c input:focus-visible,.tb__c select:focus-visible,.tb__c textarea:focus-visible{outline:2px solid var(--teal);outline-offset:3px;box-shadow:none;border-bottom-color:transparent}
.tb__c > label,.tb__c > .tb__l{font-size:12px;line-height:1.4;letter-spacing:.1em;color:#AAB0B2}
.tb__c{padding:14px 16px}
.tb__c input,.tb__c select,.tb__c textarea{min-height:44px}
.tb__c input::placeholder,.tb__c textarea::placeholder{color:#AAB0B2;opacity:1}
.tb__submit:disabled{cursor:default}
.tb__head :is(h2,h3){font:800 34px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.roof__grid{column-gap:32px}
.roof__grid h3{color:#AAB0B2}
.roof__grid .muted{color:#AAB0B2}
.roof__grid li a{min-height:32px;display:inline-flex;align-items:center}
.sdir__floors a{min-height:36px;align-items:center}
.sdir__foot a{min-height:32px;display:inline-flex;align-items:center;line-height:1.4}

/* The register remains a table. Every column stays available at every width. */
.reg-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scroll-padding:16px}
.reg-scroll-hint{display:none}
.dx .reg{min-width:880px}
.dx .reg th{font-size:12px;line-height:1.4}
.dx .reg td{line-height:1.55;padding-block:20px}
.dx .reg td:nth-child(3){min-width:130px}
.dx .reg td:nth-child(6){min-width:250px}
.dx .reg tr.is-muted td,.dx .reg tr.is-muted .st{color:#AAB0B2}
.dx .reg tr.is-muted a{color:#AAB0B2!important}
.dx .reg tr.is-match{background:#142421}
.dx .reg tr.is-match .sh{box-shadow:inset 3px 0 var(--teal);padding-left:12px}
.dx .reg td a{display:inline-flex;align-items:center;min-height:32px;text-underline-offset:4px}
.dx .filters button{min-height:44px;font-size:12px;letter-spacing:.08em}
.dx .sset .nav{flex-wrap:wrap;gap:16px}
.people .person{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px}
.people .person .person__n{line-height:1.08;text-wrap:balance}
.people .person .person__b{max-width:55ch}
@media (max-width:1180px){.people .person{grid-template-columns:1fr}}
@media (max-width:899px){
  html{scroll-padding-top:128px}
  .polished > .floor__head:has(> :nth-child(3):empty) > :nth-child(2){grid-column:1}
  .polished > .floor__head{row-gap:16px;padding-block:28px 32px}
  .polished > .floor__head > .lvl{font-size:56px;line-height:.9}
  .polished .floor__title{font-size:clamp(48px,9vw,72px);line-height:1;margin-bottom:16px}
  .reg-scroll-hint{display:block;margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--soft)}
  .sdir__floors a{min-height:44px}
}
@media (max-width:640px){
  .polished > .prose,.polished > .exitx{padding-bottom:32px}
  .polished#contact > .wrap{padding-bottom:32px}
  .polished .lede{font-size:18px}
  .polished .pricex__t th[scope="row"]{font-size:24px}
  .polished .pricex__t td{font-size:16px}
  .tb__c:has(> .tb__l){grid-column:span 6!important}
  .tb__c output,.tb__ro{font-size:16px}
  .tb__submit{min-height:72px}
  .roof__grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .roof__grid > :first-child,.roof__grid > :last-child{grid-column:1/-1}
  .roof__grid li a{min-height:44px}
  .dx .reg th:nth-child(n),.dx .reg td:nth-child(n){display:table-cell}
  .people{row-gap:48px}
  .people .person{grid-template-columns:1fr}
}

/* Homepage project arrival: a wide, clearly named room at the lower L6 floor. */
.project-start{padding:28px clamp(16px,1.2vw,24px) 24px;border-top:1px solid var(--line-2);background:#000;
  min-height:calc(100svh - 92px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.project-start__intro{display:grid;grid-template-columns:1fr minmax(280px,.8fr);gap:24px;align-items:end}
.project-start__intro .label{margin-bottom:12px;color:var(--soft)}
.project-start__intro h3{font:800 clamp(48px,5.2vw,80px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
.project-start__intro > p{font-size:clamp(16px,1.25vw,20px);line-height:1.5;max-width:42ch;margin:0;color:var(--soft)}
.project-start .tb{border-width:1px}
.project-start .tb__head{padding:10px 16px;border-bottom-width:1px}
.project-start .tb__head > :last-child{font-size:13px;color:var(--soft)}
.project-start .tb__c{padding:10px 16px}
.project-start .tb__submit{min-height:70px;font-size:clamp(22px,2vw,30px);letter-spacing:.025em;padding:12px}
.project-start .tb__c:has(> .tb__l){padding-block:8px}
.project-start .tb__c:has(> .tb__l) :is(output,.tb__ro){min-height:28px;font-size:15px;padding-block:2px}
.project-start__alternative{font-size:14px;line-height:1.5;color:var(--soft);margin:0}
@media(min-width:820px) and (max-height:780px){
  .project-start{padding-block:18px;gap:14px}
  .project-start__intro h3{font-size:52px}
  .project-start__intro .label{margin-bottom:8px}
  .project-start .tb__c textarea{min-height:90px;height:90px}
}
@media(max-width:819px){
  .project-start{min-height:0;padding-block:32px;gap:24px;scroll-margin-top:116px}
  .project-start__intro{grid-template-columns:1fr;gap:16px}
  .project-start__intro h3{font-size:52px}
  .project-start .tb__head{align-items:flex-start;flex-direction:column;gap:6px}
  .project-start .tb__c{padding:14px 16px}
  .project-start .tb__submit{min-height:72px;font-size:28px}
}

/* ---------------- DESCEND: the earth behind each sub-level (homepage). Blender soil renders, denser with depth,
   utilities only near the surface; bedrock stone at the foundation. Loaded as each floor nears view. ---------------- */
.earth{--earth:none;background:linear-gradient(180deg,rgba(11,11,11,.58) 0,rgba(11,11,11,.8) 340px,var(--ink) 640px),var(--earth) top center/100% auto no-repeat,var(--ink)}
.earth.roof{background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.72) 50%,rgba(0,0,0,.9) 100%),var(--earth) center/cover no-repeat,#000}
.earth.is-near#make{--earth:url(img/earth/sb2-1440.webp)}
.earth.is-near#work{--earth:url(img/earth/sb3-1440.webp)}
.earth.is-near#measure{--earth:url(img/earth/sb4-1440.webp)}
.earth.is-near#stance{--earth:url(img/earth/sb5-1440.webp)}
.earth.is-near#scope{--earth:url(img/earth/sb1-1440.webp)}
/* The reading room has its own material: a library wall beneath a quiet ink wash. */
.earth#shelf{background:linear-gradient(180deg,rgba(11,11,11,.65),rgba(11,11,11,.75) 480px,var(--ink) 1050px),var(--earth) top center/100% auto no-repeat,var(--ink)}
.earth.is-near#shelf{--earth:url(img/earth/library-1440.webp)}
.earth.is-near#bedrock{--earth:url(img/earth/bedrock-1440.webp)}
@media (max-width:820px){
  .earth{background:linear-gradient(180deg,rgba(11,11,11,.6) 0,rgba(11,11,11,.82) 200px,var(--ink) 380px),var(--earth) top center/auto 360px no-repeat,var(--ink)}
  .earth.is-near#make{--earth:url(img/earth/sb2-800.webp)}
  .earth.is-near#work{--earth:url(img/earth/sb3-800.webp)}
  .earth.is-near#measure{--earth:url(img/earth/sb4-800.webp)}
  .earth.is-near#stance{--earth:url(img/earth/sb5-800.webp)}
  .earth.is-near#scope{--earth:url(img/earth/sb1-800.webp)}
  .earth#shelf{background:linear-gradient(180deg,rgba(11,11,11,.65),rgba(11,11,11,.78) 620px,var(--ink) 1000px),var(--earth) top center/auto 1000px no-repeat,var(--ink)}
  .earth.is-near#shelf{--earth:url(img/earth/library-800.webp)}
  .earth.is-near#bedrock{--earth:url(img/earth/bedrock-800.webp)}
}
.bays--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bays--three .bay{min-height:min(70vh,640px)}
@media (max-width:820px){.bays--three{grid-template-columns:1fr}.bays--three .bay{min-height:0}}
.datum__sign{order:9;margin-left:auto;padding:5px 8px 4px;border:1px solid #6E5730;background:linear-gradient(160deg,#2a2418,#17140e);
  color:#D9C08A;font:700 10px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.sdir__floors b{min-width:36px;white-space:nowrap}

/* ---------------- L03 ARCHITECT: one floor (desktop). What we make on top, the method below, one viewport tall.
   Spacing scale: 8 / 12 / 16 / 24 / 32. ---------------- */
.arch-low__title{font-size:clamp(40px,5vw,76px)}
@media (min-width:821px){
  .floor--one{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 52px - 34px)}
  .floor--one > .datum{padding-top:16px}
  .floor--one > .floor__head{grid-template-columns:minmax(0,2fr) minmax(0,10fr);padding:16px var(--gut) 16px;align-items:end}
  .floor--one > .floor__head .lvl{font-size:clamp(72px,6vw,96px);line-height:.74;margin:0}
  .floor--one > .floor__head .floor__title{font-size:clamp(56px,4.6vw,72px);margin:0 0 8px}
  .floor--one > .floor__head .lede{font-size:16px;line-height:1.45;max-width:46em}
  .floor--one > .floor__head .ph{display:none}
  .floor--one .bays--three{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .floor--one .bays--three .bay{min-height:0;padding:16px 24px 16px;border-top:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px}
  .floor--one .bays--three .bay + .bay{border-left:1px solid var(--line-2)}
  .floor--one .bays--three .bay:first-child{border-left:1px solid var(--line-2)}
  .floor--one .bays--three .bay:last-child{border-right:1px solid var(--line-2)}
  .floor--one .bays--three .bay__no{position:static;font-size:11px}
  .floor--one .bays--three .bay__title{writing-mode:horizontal-tb;transform:none;position:static;font-size:32px;line-height:1;margin:0;height:auto}
  .floor--one .bays--three .bay__body{position:static;margin:0;padding:0;max-width:none}
  .floor--one .bays--three .bay__body p{font-size:14px;line-height:1.45;margin:0 0 12px;color:var(--soft);min-height:4.35em}
  .floor--one .bays--three .spec{columns:2;column-gap:24px;margin:0}
  .floor--one .bays--three .spec li{font-size:12px;padding:4px 0;break-inside:avoid}
  .floor--one .bays--three .bay__bub,.floor--one .bays--three .bay::after{display:none}
  .floor--one .arch-low{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gut);padding:24px var(--gut) 16px;align-items:start}
  .floor--one .arch-low > .floor__head{display:block;padding:0}
  .floor--one .arch-low__title{font-size:40px;margin:0 0 8px}
  .floor--one .arch-low > .floor__head .lede{font-size:15px;line-height:1.45}
  .floor--one .seq{grid-template-columns:minmax(0,1fr) 264px;gap:24px;padding:0}
  .floor--one .seq__k{margin:0 0 8px}
  .floor--one .seq__tabs{flex-direction:row;border-top:1px solid var(--line-2)}
  .floor--one .seq__tab{flex:1 1 0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 12px 12px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);min-width:0}
  .floor--one .seq__tab:first-child{border-left:1px solid var(--line-2)}
  .floor--one .seq__tab::before{left:-1px;right:-1px;top:-1px;bottom:auto;width:auto;height:2px}
  .floor--one .seq__n{font-size:18px;padding:0;grid-row:auto}
  .floor--one .seq__name{font-size:22px}
  .floor--one .seq__sym{position:absolute;top:12px;right:10px;padding:0}
  .floor--one .seq__sym .msym{width:18px;height:18px}
  .floor--one .seq__sub{display:none}
  .floor--one .seq__tab::after{content:attr(data-note);font:400 12px/1.4 var(--text);color:var(--mid);text-transform:none;letter-spacing:0}
  .floor--one .seq__tab[aria-selected="true"]::after{color:var(--soft)}
  .floor--one .seq__side > .muted{margin:8px 0 0 !important;font-size:12px !important;max-width:none !important}
  .floor--one .seq__panel{align-self:start}
  .floor--one .seq__note p{display:none}
  .floor--one .seq__note{grid-template-columns:1fr}
  .floor--one .bays--three .bay__body{display:block;align-self:start}
  .floor--one .bays--three .bay{justify-content:start;align-items:start}
  .floor--one .seq__note{min-height:0;padding:8px 12px;font-size:12px}
  .floor--one .seq__note p{font-size:12px;line-height:1.4}
}

/* L03 stage chips: hover and focus light the chip like a lit slab (warm brass edge, brightened number and icon) */
@media (min-width:821px){
  .floor--one .seq__tab{transition:background-color .18s ease,box-shadow .18s ease,color .18s ease}
  .floor--one .seq__tab .seq__n,.floor--one .seq__tab .seq__sym,.floor--one .seq__tab::after{transition:color .18s ease}
  .floor--one .seq__tab:hover,.floor--one .seq__tab:focus-visible{color:var(--paper);background:linear-gradient(180deg,rgba(244,233,210,.07),rgba(244,233,210,0) 70%);
    box-shadow:inset 0 0 0 1px rgba(201,164,92,.75),0 0 14px rgba(244,233,210,.16);outline:none}
  .floor--one .seq__tab:hover .seq__n,.floor--one .seq__tab:focus-visible .seq__n,
  .floor--one .seq__tab:hover .seq__sym,.floor--one .seq__tab:focus-visible .seq__sym{color:#F4E9D2}
  .floor--one .seq__tab:hover::after,.floor--one .seq__tab:focus-visible::after{color:var(--soft)}
}
@media (prefers-reduced-motion:reduce){
  .floor--one .seq__tab,.floor--one .seq__tab .seq__n,.floor--one .seq__tab .seq__sym,.floor--one .seq__tab::after{transition:none}
}

/* L03 density trims (desktop): seven text sizes 11/13/15/22/32/40/72, aligned single-column lists, larger drawing */
@media (min-width:821px){
  .floor--one > .floor__head{padding:8px var(--gut) 16px}
  .floor--one > .floor__head .lvl,.floor--one > .floor__head .floor__title{font-size:72px}
  .floor--one .datum,.floor--one .datum *,.floor--one .bay__no,.floor--one .seq__k,.floor--one .seq__k span,.floor--one .seq__stage{font-size:11px}
  .floor--one .bays--three .spec li,.floor--one .seq__tab::after{font-size:13px}
  .floor--one .lede,.floor--one > .floor__head .lede,.floor--one .arch-low > .floor__head .lede,.floor--one .bays--three .bay__body p{font-size:15px}
  .floor--one .seq__n,.floor--one .seq__name{font-size:22px}
  .floor--one .seq__tab::after{content:attr(data-chip)}
  .floor--one .bays--three .bay__body p{min-height:2.9em;margin-bottom:16px}
  .floor--one .bays--three .spec{columns:1}
  .floor--one .bays--three .spec li{padding:5px 0}
  .floor--one .seq{grid-template-columns:minmax(0,1fr) 340px}
  .floor--one .seq__side > .seq__hint{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0 !important}
}

/* RECKONER, Specify edition (homepage L02): toggle beads, plain tally slip, no prices */
.dx .reck--spec .bd{cursor:pointer;outline:none}
.dx .reck--spec .bd__ring{stroke:transparent;stroke-width:1.5}
.dx .reck--spec .bd:focus-visible .bd__ring{stroke:#C9A45C;stroke-dasharray:3 3}
.dx .reck--spec .bd:hover text{fill:#EDEDE8}
.dx .reck--spec .sp{margin-top:16px;min-height:150px}
.dx .reck--spec .sp__hook{margin:0;font:700 30px/1 var(--d-disp);letter-spacing:.04em;text-transform:uppercase;color:var(--d-ink)}
.dx .reck--spec .sp__hint{margin:10px 0 0;font:400 14px/1.5 var(--d-text);color:var(--d-ink2);max-width:24em}
.dx .reck--spec .sp__l{list-style:none;margin:0;padding:0}
.dx .reck--spec .sp__l li{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--d-line);align-items:baseline}
.dx .reck--spec .sp__l .k{font:500 10px/1.3 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink3)}
.dx .reck--spec .sp__l .n{font:400 15px/1.4 var(--d-text);color:var(--d-ink)}
.dx .reck--spec .sp__l .n::first-letter{text-transform:uppercase}
.dx .reck--spec .keys{margin-top:auto;padding-top:20px}
.dx .reck--spec .key[aria-disabled="true"]{opacity:.5;cursor:default}
.dx .reck--spec .sp__price{margin:14px 0 0;font:400 13px/1.5 var(--d-text);color:var(--d-ink3)}
.dx .reck--spec .sp__price a{color:var(--d-ink2);text-decoration:underline;text-decoration-color:var(--casper);text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.dx .reck--spec *{transition:none!important}}
/* L05 condensed: tape headline promoted to the floor head, one viewport at 1440x900 and 390x844 */
#measure > .floor__head{padding-block:16px 16px;row-gap:10px}
#measure > .floor__head .floor__title{font-size:clamp(40px,5.4vw,78px);line-height:.92}
#measure > .floor__head .floor__title b{font-weight:inherit;color:var(--teal)}
#measure > .floor__head .lede{margin-top:12px;max-width:640px;font-size:15px;line-height:1.45}
#measure > .floor__head > .lvl{font-size:clamp(56px,7vw,112px)}
#measure > .bayx{margin-bottom:14px}
#measure .bayx__in{padding:14px 18px}
#measure .tape--bare .head{display:block}
#measure .tape--bare .steps{margin-top:0}
#measure .tape--bare .steps>div{min-height:0;padding:9px 14px;gap:6px}
#measure .tape--bare .steps .v{font-size:13px}
#measure .tape--bare .inst{margin-top:6px}
#measure .tape--bare .field,#measure .tape--bare .ask{padding:12px 16px}
#measure .tape--bare .field label{margin-bottom:8px}
#measure .tape--bare .inp{height:42px}
#measure .tape--bare .fine{margin-top:6px!important}
#measure .tape--bare .entry .hd,#measure .tape--bare .entry .ft{padding:8px 16px}
#measure .tape--bare .tools{margin-top:6px}
#measure > .exitx{padding-bottom:20px}
#measure > .floor__head:has(> :nth-child(3):empty) > :nth-child(2){max-width:none}
#measure > .floor__head .floor__title br{display:none}
@media (min-width:1101px){
  #measure > .floor__head .floor__title{font-size:clamp(48px,4.6vw,68px)}
  #measure > .floor__head > .lvl{font-size:84px;line-height:.85}
  #measure > .floor__head{grid-template-columns:auto minmax(0,1fr) 0}
  #measure > .exitx a{line-height:1.2}
  #measure .bayx__in{position:relative}
  #measure .tape--bare .head{position:absolute;top:14px;left:300px;right:18px;z-index:1}
  #measure .tape--bare .inst{margin-top:0}
  #measure .tape--bare .tools{position:absolute;right:18px;bottom:-30px;margin:0}
  #measure > .bayx{margin-bottom:12px}
  #measure > .exitx{padding:4px var(--gut) 14px;justify-content:flex-start}
}
@media (max-width:640px){
  #measure > .datum .datum__sign{display:none}
  #measure > .floor__head{padding-block:14px 12px;row-gap:6px}
  #measure > .floor__head > .lvl{display:none}
  #measure > .floor__head .floor__title{font-size:32px}
  #measure > .floor__head .lede{font-size:13px;line-height:1.4;margin-top:6px}
  #measure > .floor__head{padding-block:10px 10px}
  #measure > .bayx{margin-bottom:8px}
  #measure .bayx__in{padding:8px 10px}
  #measure .tape--bare .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  #measure .tape--bare .steps>div{border-bottom:0;border-right:1px solid var(--d-line);padding:7px 8px}
  #measure .tape--bare .steps>div:last-child{border-right:0}
  #measure .tape--bare .steps .mono{font-size:9px}
  #measure .tape--bare .steps .v{font-size:11px}
  #measure .tape--bare .or{display:none}
  #measure .tape--bare .fine{display:none}
  #measure .tape--bare .ask{flex-direction:row;align-items:center;padding:10px 12px}
  #measure .tape--bare .ask p{font-size:12px}
  #measure .tape--bare .field{padding:10px 12px}
  #measure .tape--bare .entry .hd,#measure .tape--bare .entry .ft{padding:7px 12px}
  #measure > .exitx{padding-bottom:4px}
  #measure > .datum > span:nth-child(2){display:none}
  #measure > .datum{padding-top:4px}
  #measure .tape--bare .entry .ft > .mono{display:none}
  #measure .tape--bare .entry .ft{justify-content:flex-end}
  #measure .tape--bare .entry .hd{font-size:9.5px}
  #measure .tape--bare .tools{margin-top:4px}
  #measure .tape--bare .inp{height:40px}
  #measure .tape--bare .ask p{display:none}
  #measure .tape--bare .head{display:none}
  #measure .bayx__in{position:relative}
  #measure .tape--bare .tools{position:absolute;right:10px;top:8px;margin:0;z-index:2;gap:12px}
  #measure .tape--bare .readout .hd{flex-direction:row;flex-wrap:wrap;gap:4px 14px;padding:8px 12px}
  #measure .tape--bare .readout .bd{padding:10px 12px;gap:14px}
  #measure .tape--bare .rd{font-size:52px}
  #measure .tape--bare .plain b{font-size:20px;margin-bottom:4px}
  #measure .tape--bare .plain p{font-size:12.5px}
  #measure .tape--bare .readout .ft{padding:10px 12px}
  #measure .tape--bare .readout .ft .hint{display:none}
  #measure .tape--bare .ask .key{width:100%}
  #measure .tape--bare .steps>div{padding:5px 7px;gap:3px}
  #measure .tape--bare .steps .v{line-height:1.2}
  #measure > .exitx{padding-top:0}
  #measure > .exitx a{line-height:1.2}
}
#measure > .floor__head .lede--q{margin-top:6px;font:600 clamp(18px,1.6vw,24px)/1.25 var(--text);color:var(--paper)}
#measure > .floor__head .lede--q + .lede{margin-top:6px}
/* DOCTRINE 19 page */
.d19{padding-bottom:clamp(48px,6vw,96px)}
.d19__p{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gut);padding:24px 0;border-top:1px solid var(--line-2)}
.d19__p:last-of-type{border-bottom:1px solid var(--line-2)}
.d19__t{grid-row:1/3;margin:0;font:800 clamp(28px,2.6vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--paper)}
.d19__p p{margin:0;max-width:40em;color:var(--soft);font-size:17px;line-height:1.55}
.d19__p .d19__ip{margin-top:12px;color:var(--paper)}
.d19__ip span{font:600 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:#C9A45C;margin-right:8px}
.d19__close{margin:32px 0 0;color:var(--mid);font-size:15px}
@media (max-width:820px){.d19__p{grid-template-columns:1fr}.d19__t{grid-row:auto;margin-bottom:12px}}

/* start path: the send button is black with white type and a brass border; the required-fields line reads clearly */
.tb__submit,.project-start .tb__submit{background:#0B0B0B;color:#fff;border:2px solid #B8975A}
.tb__submit:hover:not(:disabled),.project-start .tb__submit:hover:not(:disabled){background:#1C1C1C;color:#fff}
.tb__submit:disabled{background:#0B0B0B;color:rgba(255,255,255,.72);border-color:#8C7140}
.tb__submit:focus-visible{outline:2px solid #B8975A;outline-offset:3px}
.project-start .tb__head > #project-required{font-size:14px;color:#D9D6CF}
.dsc .tb__head > #project-required{font-size:15px;color:#D9D6CF}

/* Decorative animation is optional independently of operating-system settings. */
.motion-toggle{font:inherit;color:var(--paper,#F2F2EE);background:transparent;border:1px solid currentColor;padding:12px 16px;min-height:44px;cursor:pointer;text-align:left}
.motion-toggle:focus-visible{outline:2px solid var(--teal,#00d9c0);outline-offset:4px}
.motion-toggle:disabled{cursor:default}
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after{animation:none!important}
/* Canvases with user-driven drawing keep their controls. Looping ornament uses
   a static frame through the shared motion event instead. */

/* Shared inner-page footer: studio, pages and sheets. */
.roof__grid--directory{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
@media (max-width:1000px){
  .roof__grid--directory{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roof__grid--directory > :first-child{grid-column:1/-1}
  .roof__grid--directory > :last-child{grid-column:auto}
}
@media (max-width:560px){
  .roof__grid--directory{grid-template-columns:1fr}
}