/* Pixels & Codes — inner page components */

/* page hero */
.phero{position:relative;min-height:88vh;min-height:88svh;overflow:hidden;border-bottom:1px solid var(--line)}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.phero-in{position:relative;z-index:2;min-height:88vh;min-height:88svh;display:grid;grid-template-columns:1fr;align-content:end;gap:clamp(28px,4vw,56px);padding:120px var(--pad) clamp(32px,4vw,56px);max-width:1600px;margin:0 auto;pointer-events:none}
.phero-in a,.phero-in button{pointer-events:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a:hover{color:var(--acc)}
.crumbs i{width:6px;height:6px;background:var(--acc);display:inline-block}
.phero h1{margin:0;font-weight:500;font-size:clamp(52px,10vw,180px);line-height:.88;letter-spacing:-.065em}
.phero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.phero h1 .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.ready .phero h1 .ln>span{transform:none}
.phero h1 .ln:nth-child(2)>span{transition-delay:.08s}
.phero h1 em{color:var(--acc);padding-right:.06em}
.phero-foot{display:grid;grid-template-columns:1fr;gap:28px;align-items:end;padding-top:24px;border-top:1px solid var(--line)}
.phero-foot p{margin:0;font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:#C9C9C3;max-width:620px;font-weight:300}
.phero-vis{display:flex;justify-content:flex-end;align-items:flex-end}
@media(min-width:900px){.phero-foot{grid-template-columns:1.2fr 1fr}}
@media(max-width:899px){.phero-vis{justify-content:flex-start}}

/* big statement */
.stmt{padding:clamp(90px,12vw,180px) 0}
.stmt p{margin:0;font-size:clamp(30px,4.6vw,76px);line-height:1.04;letter-spacing:-.045em;font-weight:500;max-width:1350px}
.stmt p em{color:var(--acc)}
.stmt p .dim{color:#4a4a47}

/* section heading */
.h-sec{margin:0 0 clamp(36px,5vw,64px);font-size:clamp(44px,7vw,120px);font-weight:500;letter-spacing:-.06em;line-height:.9}

/* features */
.feat{padding:0 0 clamp(90px,12vw,170px)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fcell{position:relative;padding:clamp(24px,2.6vw,40px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:clamp(170px,18vw,260px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:hidden}
.fcell::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);transition:transform .55s cubic-bezier(.19,1,.22,1)}
.fcell>*{position:relative;transition:color .3s}
.fcell:hover::before{transform:none}
.fcell:hover>*{color:var(--ink)}
.fcell h3{margin:0;font-size:clamp(24px,2.2vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.fcell p{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.fcell .mono{color:var(--muted)}

/* type cards (logo page) */
.types{padding:0 0 clamp(90px,12vw,170px)}
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.tcard{border-radius:clamp(14px,2vw,24px);padding:clamp(22px,2.6vw,36px);min-height:440px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.tcard:nth-child(1){background:var(--ink2);border:1px solid var(--line)}
.tcard:nth-child(2){background:var(--acc);color:var(--ink)}
.tcard:nth-child(3){background:var(--paper);color:var(--ink)}
.tcard h3{margin:0;font-size:clamp(30px,3vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1}
.tcard p{margin:12px 0 0;font-size:16px;line-height:1.5;opacity:.78}
.tvis{height:150px;display:flex;align-items:center}
.tvis .sym{width:110px;height:110px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.tvis .sym i{background:var(--acc);border-radius:2px}
.tvis .sym i.o{background:transparent}
.tvis .wm{font-size:clamp(56px,6vw,92px);letter-spacing:-.06em;font-weight:600;line-height:1}
.tvis .wm em{font-weight:400}
.tvis .cm{display:flex;align-items:center;gap:14px;font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-.04em}
.tvis .cm b{width:56px;height:56px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:40px;border-radius:6px}

/* process */
.proc{padding:clamp(90px,12vw,170px) 0;background:var(--paper);color:var(--ink)}
.proc .sec-label{color:#5C5C58}
.proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;border-top:1px solid var(--ink)}
.pstep{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:14px}
.pstep .n{font-size:clamp(56px,6vw,96px);font-weight:300;letter-spacing:-.06em;line-height:.8}
.pstep h3{margin:0;font-size:26px;font-weight:500;letter-spacing:-.03em}
.pstep p{margin:0;font-size:16px;line-height:1.5;color:#3D3D3A;max-width:320px}
.proc .h-sec em{color:var(--ink)}

/* plan sheets (images from the current site) */
.plans{padding:0 0 clamp(90px,12vw,170px)}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;align-items:start}
.sheet{display:block;background:#fff;border-radius:clamp(14px,2vw,24px);padding:clamp(10px,1.4vw,20px);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.sheet:hover{transform:translateY(-6px) rotate(-.4deg)}
.sheet img{width:100%;height:auto;display:block;border-radius:10px}
.plans-note{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:22px 26px;border:1px solid var(--line);border-radius:999px}
.plans-note p{margin:0;font-size:17px;color:#C9C9C3}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:999px;background:var(--acc);color:var(--ink);font-weight:600;font-size:16px;transition:background .25s,color .25s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid #3a3a37}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}

/* gallery */
.gal{padding:0 0 clamp(90px,12vw,170px)}
.gal-grid{columns:3 280px;column-gap:16px}
.gal-item{display:block;width:100%;margin:0 0 16px;break-inside:avoid;border-radius:14px;overflow:hidden;background:#151515;border:1px solid var(--line)}
.gal-item img{width:100%;height:auto;display:block;transition:transform .9s cubic-bezier(.19,1,.22,1)}
.gal-item:hover img{transform:scale(1.04)}
.lb{position:fixed;inset:0;z-index:99;background:rgba(10,10,10,.94);display:flex;align-items:center;justify-content:center;padding:64px 20px 20px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb-x{position:absolute;top:18px;right:var(--pad);min-height:44px;color:var(--paper)}

/* related */
.rel{padding:0 0 clamp(90px,12vw,150px)}
.rel-row{display:flex;gap:12px;overflow-x:auto;padding:0 var(--pad) 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rel-row::-webkit-scrollbar{display:none}
.rel-card{flex:none;width:clamp(220px,22vw,300px);height:200px;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;position:relative;scroll-snap-align:start;transition:background .3s,border-color .3s,color .3s}
.rel-card strong{font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.05;padding-right:28px}
.rel-arrow{position:absolute;right:20px;bottom:20px;font-size:22px;transition:transform .3s}
.rel-card:hover{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.rel-card:hover .mono{color:var(--ink)}
.rel-card:hover .rel-arrow{transform:translate(4px,-4px)}

/* cta on inner pages */
.cta-inner{border-top:1px solid var(--line)}
.cta-inner h2{font-size:clamp(56px,11vw,200px)}
.cta-p{margin:0;max-width:440px;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--muted)}

/* hero visuals */
.flip{width:min(100%,340px);aspect-ratio:1.75;perspective:1200px}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:flip 6s cubic-bezier(.65,0,.35,1) infinite}
.flip-in>div{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.flip .front{background:var(--acc);color:var(--ink)}
.flip .back{background:var(--paper);color:var(--ink);transform:rotateY(180deg)}
.flip strong{font-size:22px;letter-spacing:-.03em}
@keyframes flip{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.posters{position:relative;width:min(100%,320px);height:230px}
.posters div{position:absolute;bottom:0;width:46%;aspect-ratio:.72;border-radius:8px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;font-weight:600;letter-spacing:-.04em;line-height:.9;box-shadow:0 20px 50px rgba(0,0,0,.45);transition:transform .8s cubic-bezier(.19,1,.22,1)}
.posters .p1{left:0;background:var(--paper);color:var(--ink);transform:rotate(-8deg);font-size:26px}
.posters .p2{left:27%;background:var(--acc);color:var(--ink);z-index:2;font-size:30px;transform:translateY(-14px)}
.posters .p3{right:0;background:#222;color:var(--paper);transform:rotate(8deg);font-size:24px}
.posters:hover .p1{transform:rotate(-14deg) translateX(-12px)}.posters:hover .p3{transform:rotate(14deg) translateX(12px)}
.posters div em{font-weight:400}
.inbox{width:min(100%,380px);background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.inbox div{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:#1b1b1a;font-size:14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.inbox div.on{opacity:1;transform:none}
.inbox b{width:30px;height:30px;border-radius:8px;background:var(--acc);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;flex:none}
.inbox span{display:flex;flex-direction:column;min-width:0}
.inbox small{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phero .code{max-width:420px;height:auto}
.phero .pm{width:200px}
.phero .up{width:min(100%,360px);height:200px}
.phero .up-big{font-size:clamp(56px,7vw,110px)}
.phero .fan{width:min(100%,340px)}
.phero .fan div{transform:none}
.ready .phero .fan .f1{transform:rotate(-12deg) translate(-18%,4%)}
.ready .phero .fan .f3{transform:rotate(10deg) translate(18%,6%)}
.ready .phero .fan .f2{transform:translateY(-6%)}

/* contact */
.ct{padding:clamp(60px,8vw,120px) 0 clamp(90px,12vw,160px)}
.ct-grid{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,96px)}
@media(min-width:1000px){.ct-grid{grid-template-columns:1.3fr 1fr}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.form .full{grid-column:1/-1}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:10px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:clamp(18px,1.6vw,22px);color:var(--paper);background:transparent;border:0;border-bottom:1px solid #3a3a37;padding:10px 0 14px;border-radius:0;outline:none;transition:border-color .3s;width:100%;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--ink);color:var(--paper)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;min-height:44px;align-items:center;padding:10px 18px;border:1px solid #3a3a37;border-radius:999px;font-size:15px;transition:all .25s}
.chips input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.form-msg{padding:18px 22px;border-radius:14px;font-size:17px;grid-column:1/-1}
.form-msg.ok{background:var(--acc);color:var(--ink)}
.form-msg.err{background:#3a1d1d;color:#ffd6d6}
.ct-side{display:flex;flex-direction:column;gap:36px}
.ct-side .mono{display:block;margin-bottom:10px}
.ct-side a,.ct-side p{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;margin:0;line-height:1.35}
.ct-side a:hover{color:var(--acc)}
.map{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
.revs{padding:0 0 clamp(90px,12vw,150px);overflow:hidden}
.rev-row{display:flex;gap:16px;width:max-content;animation:mq 60s linear infinite}
.revs:hover .rev-row{animation-play-state:paused}
.rev{width:clamp(280px,30vw,400px);flex:none;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px}
.rev q{font-size:clamp(20px,1.7vw,26px);line-height:1.25;letter-spacing:-.02em}
.rev .stars{color:var(--acc);letter-spacing:.2em}
@media (prefers-reduced-motion:reduce){.rev-row{animation:none;flex-wrap:wrap;width:auto;padding-inline:var(--pad)}.flip-in{animation:none}}