/* Inner pages (work, case studies, services, lab, about, pricing, contact). Shell is site.css. */


/* ───────── case study ───────── */
.device{background:radial-gradient(90% 80% at 62% 40%,#2a2318 0%,#141216 55%,#0b0a0d 100%)}
.device .device-gl,.device .device-gl canvas{position:absolute;inset:0;width:100%;height:100%}
.device .device-gl canvas{opacity:0;transition:opacity .8s}
.device.fx-on .device-gl canvas{opacity:1}
.device .fx-still{position:absolute;inset:0;display:grid;grid-template-columns:3fr 1fr;gap:4%;align-items:center;padding:12% 5% 6% 38%}
.device .fx-still img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.device .fx-still picture{display:block;min-width:0}
.device.fx-on .fx-still{display:none}
.claim{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}

/* ───────── services ───────── */

/* websites: page exploding into layers */
.stack{position:relative;aspect-ratio:16/11;perspective:2600px;perspective-origin:50% 40%}
.stack .rig{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(calc(var(--e) * 8%)) rotateX(calc(var(--e) * 54deg)) rotateZ(calc(var(--e) * -32deg)) scale(calc(1 - var(--e) * .3))}
.stack .sheet{position:absolute;inset:0;border-radius:14px;overflow:hidden;transform:translateZ(calc(var(--e) * var(--z)));box-shadow:0 30px 60px rgba(0,0,0,calc(var(--e) * .45))}
.stack .sheet.code{background:#0d0c10;box-shadow:0 0 0 1px rgba(242,237,227,.14)}
.stack .sheet.img{background:transparent}
.stack .sheet.img .pic{position:absolute;left:0;right:0;top:12%;bottom:0;background:url(/media/lef26-pic.jpg) 50% 0/cover;opacity:.95}
.stack .sheet.type{background:transparent}
.stack .sheet.lay{background:transparent;box-shadow:0 0 0 1px rgba(201,163,94,.6)}
.stack .sheet .lb{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--gold-ink);opacity:calc(var(--e) * 1.4);background:rgba(8,7,10,.7);padding:4px 8px;border-radius:99px}
.stack pre{font-family:var(--mono);font-size:clamp(9px,.82vw,12.5px);line-height:1.6;color:rgba(242,237,227,.7);padding:6% 7%;white-space:pre-wrap}
.stack pre b{color:var(--gold-ink);font-weight:400}
.stack .ty{position:absolute;left:0;right:0;top:30%;text-align:center;font-family:Georgia,"Times New Roman",serif;color:#fff;font-size:clamp(14px,2.2vw,34px);line-height:1.15;font-weight:700;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.stack .ty small{display:block;font-family:var(--sans);font-weight:400;font-size:.36em;margin-top:.8em;color:rgba(255,255,255,.85);text-shadow:none}
.stack .bx{position:absolute;border:1px solid rgba(201,163,94,.75);border-radius:3px}
.stack .bx.fill{background:rgba(201,163,94,.12)}

/* AI receptionist: star ring that listens */
.ring-scene .ring-gl,.ring-scene .ring-gl canvas{position:absolute;inset:0;width:100%;height:100%}
.play{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 26px 0 10px;border-radius:99px;background:var(--gold);color:#0b0a0c;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;font-weight:500}
.play i{width:38px;height:38px;border-radius:50%;background:#0b0a0c;display:grid;place-items:center}
.play i::before{content:"";width:0;height:0;border-left:11px solid var(--gold);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.play[aria-pressed="true"] i::before{border:0;width:10px;height:12px;margin:0;background:linear-gradient(90deg,var(--gold) 0 35%,transparent 35% 65%,var(--gold) 65%)}

/* automation: gold lines between real steps */
.board{position:relative;aspect-ratio:1/1;max-height:640px;perspective:1600px}
.board .plane{position:absolute;inset:0;transform:rotateX(18deg) rotateZ(-6deg);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.board svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.board svg .wire{fill:none;stroke:rgba(201,163,94,.18);stroke-width:2}
.board svg .live{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(201,163,94,.8));transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
.node{position:absolute;transform:translate(-50%,-50%) translateZ(0);display:flex;flex-direction:column;align-items:center;gap:8px;width:150px;text-align:center}
.node button{width:58px;height:58px;border-radius:50%;background:var(--page-2);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background .4s,box-shadow .4s,transform .4s}
.node button svg{width:24px;height:24px;color:var(--ink-2);transition:color .4s}
.node span{font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--mute);transition:color .4s}
.node.done button{box-shadow:inset 0 0 0 1px rgba(201,163,94,.55)}
.node.done button svg{color:var(--gold)}
.node.on button{background:var(--gold);box-shadow:0 0 0 8px rgba(201,163,94,.16),0 0 40px rgba(201,163,94,.5);transform:scale(1.08)}
.node.on button svg{color:#0b0a0c}
.node.on span,.node.done span{color:var(--ink)}
.card-stage .step-n{color:var(--gold-ink)}
.card-stage h3,.card-stage h2{font-weight:500;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.03em;line-height:1.05;margin:10px 0 14px}
.card-stage .what{color:var(--ink-2);font-size:17px;max-width:30em}
.sample{margin-top:20px;padding:18px 20px;border-left:2px solid var(--gold);background:rgba(242,237,227,.03);font-size:15.5px;color:var(--ink-2)}
.sample .mono{color:var(--mute);display:block;margin-bottom:8px}
.sample b{color:var(--ink);font-weight:500}
.sample .flag{color:var(--gold-hi)}
.step-ctl{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

/* SEO: a light beam scanning a page */
.scan-view{position:relative;perspective:1800px}
.scan-page{position:relative;aspect-ratio:1440/2400;max-height:78vh;margin:0 auto;border-radius:12px;overflow:hidden;background:url(/img/lef26-long.jpg) 50% 0/cover;transform:rotateX(16deg) rotateY(-14deg) rotateZ(2deg);box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.scan-page::after{content:"";position:absolute;inset:0;background:rgba(8,7,10,.38)}
.beam{position:absolute;left:-10%;right:-10%;height:16%;top:calc(var(--b,0) * 100% - 8%);z-index:3;pointer-events:none;
  background:linear-gradient(transparent,rgba(227,198,142,.10) 40%,rgba(255,236,190,.65) 50%,rgba(227,198,142,.10) 60%,transparent);mix-blend-mode:screen}
.beam::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#ffe9b8;box-shadow:0 0 18px 4px rgba(255,214,140,.7)}
.mark{position:absolute;z-index:4;border:1.5px solid var(--gold);border-radius:4px;opacity:0;transform:scale(.96);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.mark.hit{opacity:1;transform:none;background:rgba(201,163,94,.10)}
.mark i{position:absolute;left:100%;top:-2px;margin-left:8px;white-space:nowrap;font-style:normal;font-family:var(--mono);font-size:13px;text-transform:uppercase;background:var(--gold);color:#0b0a0c;padding:3px 7px;border-radius:99px}
.mark.l i{left:auto;right:100%;margin:0 8px 0 0}
.lab-item .about h2{font-weight:500;font-size:clamp(34px,3.6vw,56px);line-height:.98;letter-spacing:-.04em}
.lab-item .about p{color:var(--ink-2);font-size:16.5px;margin-top:12px;max-width:24em}
.lab-item .about .mono{color:var(--gold-ink)}
.lab-view{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:#0c0b0e;box-shadow:0 0 0 1px var(--line);touch-action:pan-y}
.lab-view canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.lab-view .fx-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lab-view.fx-on .fx-still{display:none}
.lab-view .hint{position:absolute;left:16px;bottom:14px;color:rgba(242,237,227,.7);z-index:2;pointer-events:none}
.knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 24px;margin-top:20px}
.knobs label{display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
.knobs label .mono{display:flex;justify-content:space-between}
.knobs output{color:var(--gold-ink)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent}   /* round 7: 44px tap target */
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--gold) var(--v,50%),var(--line) var(--v,50%))}
input[type=range]::-moz-range-track{height:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.lab-off{color:var(--mute);font-size:15px;margin-top:14px}

/* ───────── about ───────── */
.depth{position:relative;aspect-ratio:4/5;max-width:560px;width:100%;perspective:1200px}
.depth .layer{position:absolute;inset:0;will-change:transform;transition:transform .2s linear}
.depth .bigstar{inset:-8% -12% auto auto;width:62%;height:auto;aspect-ratio:1;color:var(--gold);opacity:.9}
.depth .photo{inset:5%;border-radius:calc(var(--r) - 4px);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(201,163,94,.35)}
.depth .photo img{width:100%;height:100%;object-fit:cover}
.depth .tagline{inset:auto auto 9% -6%;background:var(--gold);color:#0b0a0c;padding:9px 14px;border-radius:99px;width:max-content;height:max-content}

/* ───────── pricing ───────── */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--gold);font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);padding-bottom:22px;max-width:40em}
.faq{border-top:1px solid var(--line)}

/* ───────── contact ───────── */
form.msg{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
form.msg label{display:flex;flex-direction:column;gap:8px;padding:10px 0}
form.msg label.full{grid-column:1/-1}
form.msg label .flab{font-size:14.5px;color:#cfc8bd}
form.msg input,form.msg textarea,form.msg select{background:rgba(242,237,227,.06);border:1px solid rgba(242,237,227,.26);border-radius:12px;color:var(--ink);font:inherit;font-size:17px;outline:none;resize:vertical;padding:11px 14px;min-height:46px;transition:border-color .2s,background .2s}
form.msg select option{background:var(--page-2)}
form.msg input:focus,form.msg textarea:focus,form.msg select:focus{border-color:var(--gold);background:rgba(242,237,227,.09)}
form.msg .hp{position:absolute;left:-9999px}
form.msg .send{grid-column:1/-1;justify-self:start;margin-top:22px}
.notwired{grid-column:1/-1;margin-top:8px;color:var(--gold-ink)}

@media (max-width:1100px){
                  }
@media (max-width:640px){
        .device .fx-still{grid-template-columns:1fr;padding:62% 14% 8%;align-content:center}
  .device .fx-still img+img,.device .fx-still picture+picture{display:none}
            .stack{margin:50px 0 90px}
          .board{aspect-ratio:1/1.05}
  .node{width:96px}
  .node button{width:48px;height:48px}
  .node span{font-size:13px}
  .scan-page{max-height:none;width:78%}
  .mark i{font-size:13px;padding:2px 5px}
    .depth .tagline{left:4%}
  form.msg{grid-template-columns:1fr}
      }
@media (prefers-reduced-motion:reduce){
}

/* ═════ Round 10 (Oct 22, 2026) ═════ */
/* Contact: fields read as fields (border #7d776f is 3.9:1 on the page and 3.8:1 on the field fill), and Send is a full-width
   gold button like every other main action */
form.msg input,form.msg textarea,form.msg select{border-color:#7d776f}
form.msg .send{justify-self:stretch;width:100%;min-height:52px;justify-content:space-between}