/* ─────────────────────────────────────────────────────────────
   nullrose detail — a tile expands into its own space.
   FLIP morph from tile rect → framed fullscreen panel.
   Three archetypes: .kind-gallery / .kind-showreel /
   .kind-about / .kind-contact
   ───────────────────────────────────────────────────────────── */

#detail-layer{position:fixed;inset:0;z-index:50;display:none}
#detail-layer.open{display:block}

#detail-scrim{position:absolute;inset:0;background:rgba(6,5,8,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0}

#detail-panel{
  position:fixed;background:var(--void);overflow:hidden;
  border:1.2px solid rgba(180,126,222,.55);
  box-shadow:0 0 0 1px rgba(13,13,12,.6), 0 30px 80px rgba(0,0,0,.6),
             0 0 60px rgba(138,79,178,.22);
  will-change:top,left,width,height;
}
/* panel-local riso grain so the detail keeps the medium */
#detail-panel::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.32;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;}
/* corner registration marks on the panel */
#detail-panel::after{content:'';position:absolute;top:9px;left:9px;width:16px;height:16px;z-index:6;
  border-top:1px solid var(--lilac);border-left:1px solid var(--lilac);opacity:.6;pointer-events:none}

.detail-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(180,126,222,.5) transparent}
.detail-scroll::-webkit-scrollbar{width:9px}
.detail-scroll::-webkit-scrollbar-thumb{background:rgba(180,126,222,.4);border:3px solid var(--void)}
.detail-body{padding:clamp(22px,4vw,64px);min-height:100%;opacity:0}
#detail-panel.ready .detail-body{opacity:1}

/* close */
#detail-close{
  position:absolute;top:14px;right:14px;z-index:20;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(13,13,12,.5);border:1px solid rgba(180,126,222,.4);
  color:var(--lilac);font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  padding:8px 12px;transition:border-color .25s,background .25s,box-shadow .25s;
}
#detail-close svg{width:13px;height:13px;stroke:var(--lilac);stroke-width:1.5}
#detail-close:hover{border-color:var(--lilac-bright);background:rgba(138,79,178,.2);
  box-shadow:0 0 16px rgba(138,79,178,.35)}

/* ════ HEADER (shared) ════ */
.detail-head{position:relative;z-index:2;margin-bottom:clamp(24px,4vw,52px);max-width:1100px}
.dh-idx{font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--lilac);opacity:.8;margin-bottom:14px}
.dh-title{font-family:var(--disp);font-weight:400;line-height:.84;text-transform:uppercase;
  font-size:clamp(56px,11vw,168px);letter-spacing:.004em;color:var(--white);
  text-shadow:0 4px 40px rgba(13,13,12,.6)}
.dh-meta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(180,126,222,.7);margin-top:18px}
.dh-desc{font-family:var(--mono);font-size:13px;line-height:1.75;color:rgba(255,255,255,.74);
  max-width:62ch;margin-top:16px;text-wrap:pretty}
.dh-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dh-tags span{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lilac);border:1px solid rgba(180,126,222,.34);padding:5px 10px}

/* ════ GALLERY (big categories) ════ */
.gallery{column-count:3;column-gap:14px;position:relative;z-index:2}
@media (max-width:1100px){.gallery{column-count:2}}
@media (max-width:620px){.gallery{column-count:1}}
.gcard{break-inside:avoid;margin:0 0 14px;position:relative;overflow:hidden;
  border:1px solid rgba(180,126,222,.24);background:#100f14;cursor:pointer;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.gcard::after{content:'';position:absolute;top:-1px;left:-1px;width:10px;height:10px;z-index:4;
  border-top:1px solid var(--lilac);border-left:1px solid var(--lilac);opacity:.5}
.gcard img{width:100%;display:block;
  filter:grayscale(1) contrast(1.12) brightness(.74) sepia(1) hue-rotate(232deg) saturate(2.2);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.gcard:hover{border-color:rgba(180,126,222,.85);box-shadow:0 10px 30px rgba(138,79,178,.2);transform:translateY(-3px)}
.gcard:hover img{transform:scale(1.06);filter:grayscale(1) contrast(1.18) brightness(.92) sepia(1) hue-rotate(232deg) saturate(2.6)}
.gcard .gcap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 12px 11px;
  background:linear-gradient(0deg,rgba(13,13,12,.94),transparent);
  display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.gcap .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.gcap .y{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--lilac)}
.gcard .num{position:absolute;top:9px;right:11px;z-index:3;font-family:var(--mono);
  font-size:8px;letter-spacing:.14em;color:rgba(201,156,242,.7)}

/* archive: real commissions — moody at rest, true colour on hover */
.gcard.arch img{filter:saturate(.78) brightness(.82) contrast(1.03)}
.gcard.arch:hover img{filter:none;transform:scale(1.05)}
.gcard.arch .gcap{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.gcard.arch:hover .gcap{opacity:1;transform:none}
@media(hover:none){.gcard.arch img{filter:none}.gcard.arch .gcap{opacity:1;transform:none}}

/* ════ SYSTEMS — brand books as page-stacks that fan open ════ */
.sys-shelf{display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}
.sys-item{border:1px solid rgba(180,126,222,.2);background:rgba(16,15,20,.5);
  transition:border-color .35s,background .35s}
.sys-item.open{border-color:color-mix(in srgb,var(--tone) 46%,transparent);background:rgba(16,15,20,.72)}
.sys-row{display:flex;align-items:center;gap:clamp(16px,3vw,40px);width:100%;text-align:left;
  cursor:pointer;background:none;border:0;color:inherit;font:inherit;
  padding:clamp(15px,2.2vw,24px)}
.sys-stack{position:relative;flex:none;width:clamp(146px,17vw,224px);aspect-ratio:16/9}
.sys-stack .pg{position:absolute;inset:0;background-size:cover;background-position:center;
  border:1px solid rgba(7,6,9,.7);box-shadow:0 7px 20px rgba(0,0,0,.45);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s}
.sys-stack .pg-1{z-index:4;transform:translate(0,0)}
.sys-stack .pg-2{z-index:3;transform:translate(7px,7px);filter:brightness(.84)}
.sys-stack .pg-3{z-index:2;transform:translate(14px,14px);filter:brightness(.68)}
.sys-stack .pg-4{z-index:1;transform:translate(21px,21px);filter:brightness(.54)}
.sys-stack::after{content:'';position:absolute;top:0;left:0;width:14px;height:14px;z-index:5;
  border-top:2px solid var(--tone);border-left:2px solid var(--tone);opacity:.85}
.sys-row:hover .pg-1{transform:translate(-4px,-4px)}
.sys-row:hover .pg-2{transform:translate(8px,9px);filter:brightness(.9)}
.sys-row:hover .pg-3{transform:translate(19px,20px);filter:brightness(.74)}
.sys-row:hover .pg-4{transform:translate(30px,31px);filter:brightness(.6)}
.sys-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sys-name{font-family:var(--display,var(--mono));font-size:clamp(21px,2.5vw,32px);
  font-weight:600;letter-spacing:-.01em;line-height:1;color:#fff}
.sys-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tone)}
.sys-count{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(180,126,222,.7)}
.sys-open{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tone);display:inline-flex;align-items:center;gap:6px}
.sys-open i{font-style:normal}
.sys-open{transition:color .3s}
.sys-item.open .sys-open{color:#fff}
.sys-spread{overflow:hidden;height:0}
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;
  padding:clamp(15px,2.2vw,24px);padding-top:2px}
.sys-pg{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;cursor:pointer;
  border:1px solid rgba(180,126,222,.18);background:#0c0c10;
  transition:border-color .3s,transform .3s,box-shadow .3s}
.sys-pg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sys-pg:hover{border-color:var(--tone);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.sys-pg:hover img{transform:scale(1.05)}
.sys-pgn{position:absolute;bottom:5px;right:6px;z-index:2;font-family:var(--mono);font-size:8px;
  letter-spacing:.1em;color:#fff;background:rgba(7,6,9,.62);padding:1px 5px;opacity:0;transition:opacity .3s}
.sys-pg:hover .sys-pgn{opacity:1}
@media(max-width:680px){
  .sys-row{flex-wrap:wrap;gap:14px}
  .sys-stack{width:120px}
  .sys-info{flex-basis:calc(100% - 134px)}
  .sys-count,.sys-open{flex-basis:auto}
  .sys-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* video card */
.gcard.video .play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center}
.gcard.video .play b{width:54px;height:54px;border:1.4px solid rgba(201,156,242,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(13,13,12,.35);
  transition:transform .3s,box-shadow .3s,background .3s}
.gcard.video .play b::before{content:'';border-left:13px solid var(--lilac-bright);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.gcard.video:hover .play b{transform:scale(1.12);background:rgba(138,79,178,.3);box-shadow:0 0 22px rgba(138,79,178,.5)}
.gcard.video .dur{position:absolute;top:9px;left:10px;z-index:3;font-family:var(--mono);
  font-size:8px;letter-spacing:.12em;color:#fff;background:rgba(13,13,12,.6);
  border:1px solid rgba(180,126,222,.4);padding:2px 6px}

/* ════ SHOWREEL ════ */
.reel-stage{position:relative;z-index:2;aspect-ratio:16/9;width:100%;max-width:1180px;
  border:1px solid rgba(180,126,222,.4);overflow:hidden;background:#0c0b10;cursor:pointer}
.reel-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.5) sepia(1) hue-rotate(232deg) saturate(2);}
.reel-stage .scrim{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,transparent,rgba(13,13,12,.6))}
.reel-play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center}
.reel-play b{width:88px;height:88px;border:1.6px solid rgba(201,156,242,.95);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(13,13,12,.3);
  transition:transform .3s,box-shadow .3s}
.reel-play b::before{content:'';border-left:24px solid var(--lilac-bright);
  border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:7px}
.reel-stage:hover .reel-play b{transform:scale(1.1);box-shadow:0 0 40px rgba(138,79,178,.6)}
.reel-bar{position:absolute;left:18px;right:18px;bottom:16px;z-index:4;display:flex;align-items:center;gap:12px}
.reel-bar .track{flex:1;height:2px;background:rgba(180,126,222,.3);position:relative}
.reel-bar .track i{position:absolute;left:0;top:0;height:100%;width:34%;background:var(--lilac-bright)}
.reel-bar .track i::after{content:'';position:absolute;right:-4px;top:-3px;width:8px;height:8px;background:var(--lilac-bright);border-radius:50%}
.reel-bar .tc{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#fff}
.reel-chapters{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;position:relative;z-index:2}
.reel-chapters .ch{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac);border:1px solid rgba(180,126,222,.34);padding:8px 13px;cursor:pointer;
  transition:border-color .25s,background .25s,color .25s}
.reel-chapters .ch:hover{border-color:var(--lilac-bright);background:rgba(138,79,178,.18);color:#fff}
.reel-chapters .ch b{color:rgba(201,156,242,.8);font-weight:400;margin-right:8px}

/* showreel — work-in-progress placeholder */
.reel-wip{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:18px;min-height:46vh;overflow:hidden;
  border:1px solid rgba(180,126,222,.34);background:#0c0b10;padding:40px 24px}
.reel-wip-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 46%, rgba(138,79,178,.22), transparent 70%);
  animation:wipbreathe 5s ease-in-out infinite}
@keyframes wipbreathe{0%,100%{opacity:.5}50%{opacity:1}}
.reel-wip .wip-tag{position:relative;z-index:2;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(30px,6vw,76px);line-height:.92;color:#fff;letter-spacing:.01em;
  text-shadow:0 0 30px rgba(138,79,178,.5)}
.reel-wip p{position:relative;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  line-height:1.7;color:rgba(180,126,222,.78);max-width:46ch}

/* ════ ABOUT ════ */
.about-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);gap:clamp(24px,4vw,56px);
  position:relative;z-index:2;align-items:start}
@media (max-width:780px){.about-grid{grid-template-columns:1fr}}
.about-portrait{position:relative;border:1px solid rgba(180,126,222,.4);overflow:hidden;aspect-ratio:3/4}
.about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.78) sepia(1) hue-rotate(232deg) saturate(2.3)}

/* ── glitched portrait ── */
.about-portrait .gp-base{position:relative;z-index:1;animation:gpBaseJit 5.5s steps(1,end) infinite}
.about-portrait .gp-slice{z-index:2;mix-blend-mode:screen;opacity:.55;pointer-events:none;will-change:transform,clip-path}
.about-portrait .gp-r{filter:grayscale(1) contrast(1.2) brightness(.8) sepia(1) hue-rotate(280deg) saturate(3);
  animation:gpSliceR 5.5s steps(1,end) infinite}
.about-portrait .gp-g{filter:grayscale(1) contrast(1.2) brightness(.8) sepia(1) hue-rotate(190deg) saturate(3);
  animation:gpSliceG 5.5s steps(1,end) infinite}
/* faint travelling scan bar + interlace */
.about-portrait .gp-scan{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(rgba(201,156,242,0) 0,rgba(201,156,242,.16) 50%,rgba(201,156,242,0) 100%);
  background-size:100% 46%;background-repeat:no-repeat;background-position:0 -50%;
  animation:gpScan 4.6s linear infinite}
.about-portrait::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px)}

@keyframes gpBaseJit{
  0%,86%,100%{transform:translate(0,0)}
  88%{transform:translate(-2px,1px)}
  90%{transform:translate(2px,-1px)}
  92%{transform:translate(-1px,0)}
}
@keyframes gpSliceR{
  0%,84%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0}
  85%{opacity:.6;transform:translate(-4px,0);clip-path:inset(8% 0 62% 0)}
  90%{opacity:.6;transform:translate(5px,0);clip-path:inset(54% 0 12% 0)}
  95%{opacity:.6;transform:translate(-3px,0);clip-path:inset(30% 0 40% 0)}
}
@keyframes gpSliceG{
  0%,84%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0}
  86%{opacity:.55;transform:translate(4px,0);clip-path:inset(20% 0 50% 0)}
  91%{opacity:.55;transform:translate(-5px,0);clip-path:inset(60% 0 6% 0)}
  96%{opacity:.55;transform:translate(3px,0);clip-path:inset(40% 0 30% 0)}
}
@keyframes gpScan{0%{background-position:0 -55%}100%{background-position:0 155%}}

/* ── BIG GLITCH burst (triggered ~2s after entering About) ── */
.about-portrait.big-glitch .gp-base{animation:gpBigBase .62s steps(1,end) 1}
.about-portrait.big-glitch .gp-r{animation:gpBigR .62s steps(1,end) 1}
.about-portrait.big-glitch .gp-g{animation:gpBigG .62s steps(1,end) 1}
.about-portrait.big-glitch::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  mix-blend-mode:screen;animation:gpBigFlash .62s steps(1,end) 1;
  background:repeating-linear-gradient(0deg,rgba(201,156,242,.5) 0 3px,transparent 3px 9px)}
@keyframes gpBigBase{
  0%{transform:translate(0,0) scale(1)}
  10%{transform:translate(7px,-3px) scale(1.04)}
  22%{transform:translate(-9px,2px) scale(1.02);clip-path:inset(0 0 64% 0)}
  34%{transform:translate(6px,4px) scale(1.05);clip-path:inset(48% 0 18% 0)}
  46%{transform:translate(-5px,-2px) scale(1.01);clip-path:inset(22% 0 44% 0)}
  60%{transform:translate(3px,0) scale(1.03);clip-path:inset(0 0 0 0)}
  74%{transform:translate(-2px,1px) scale(1)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes gpBigR{
  0%{opacity:0;transform:translate(0,0)}
  10%{opacity:.85;transform:translate(-14px,2px);clip-path:inset(4% 0 60% 0)}
  30%{opacity:.85;transform:translate(12px,-3px);clip-path:inset(50% 0 14% 0)}
  50%{opacity:.85;transform:translate(-10px,1px);clip-path:inset(28% 0 38% 0)}
  70%{opacity:.7;transform:translate(6px,0);clip-path:inset(0 0 0 0)}
  100%{opacity:0;transform:translate(0,0)}
}
@keyframes gpBigG{
  0%{opacity:0;transform:translate(0,0)}
  12%{opacity:.8;transform:translate(13px,-2px);clip-path:inset(16% 0 52% 0)}
  32%{opacity:.8;transform:translate(-12px,3px);clip-path:inset(58% 0 8% 0)}
  52%{opacity:.8;transform:translate(9px,-1px);clip-path:inset(34% 0 32% 0)}
  72%{opacity:.6;transform:translate(-5px,0);clip-path:inset(0 0 0 0)}
  100%{opacity:0;transform:translate(0,0)}
}
@keyframes gpBigFlash{
  0%,100%{opacity:0}
  8%{opacity:.6}
  20%{opacity:0}
  40%{opacity:.45}
  55%{opacity:0}
  70%{opacity:.3}
}
@media (prefers-reduced-motion:reduce){
  .about-portrait .gp-base,.about-portrait .gp-r,.about-portrait .gp-g,.about-portrait .gp-scan,
  .about-portrait.big-glitch .gp-base,.about-portrait.big-glitch .gp-r,.about-portrait.big-glitch .gp-g{animation:none}
  .about-portrait .gp-slice{opacity:0}
}
.about-portrait .tag{position:absolute;z-index:6;left:10px;bottom:10px;font-family:var(--mono);font-size:8px;
  letter-spacing:.2em;color:var(--lilac);background:rgba(13,13,12,.6);border:1px solid rgba(180,126,222,.4);padding:4px 8px}
.about-text p{font-family:var(--mono);font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.8);
  margin-bottom:16px;max-width:60ch;text-wrap:pretty}
.about-text p b{color:var(--lilac);font-weight:400}
.about-h{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(20px,2.4vw,30px);line-height:1;color:#fff;margin:6px 0 16px}
.about-h + p{margin-top:0}
.about-text > .about-h:not(:first-child){margin-top:30px}
.about-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media (max-width:560px){.about-cols{grid-template-columns:1fr 1fr}}
.about-cols h4{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(180,126,222,.55);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(180,126,222,.18)}
.about-cols ul{list-style:none}
.about-cols li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.78);
  padding:5px 0;line-height:1.5}
.about-cols a{color:inherit;text-decoration:none;transition:color .2s}
.about-cols a:hover{color:var(--lilac-bright)}

/* ════ CONTACT ════ */
.contact-wrap{position:relative;z-index:2;max-width:1100px}
.contact-intro{font-family:var(--mono);font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.82);
  max-width:60ch;margin-bottom:clamp(22px,3.5vw,38px);text-wrap:pretty}

/* compose-an-email form */
.contact-form{display:flex;flex-direction:column;gap:12px;max-width:620px;margin-bottom:clamp(30px,5vw,50px)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.cf-grid{grid-template-columns:1fr}}
.cf-in{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#fff;
  background:rgba(138,79,178,.06);border:1px solid rgba(180,126,222,.3);
  padding:13px 14px;width:100%;outline:none;
  transition:border-color .25s,background .25s,box-shadow .25s}
.cf-in::placeholder{color:rgba(180,126,222,.6);letter-spacing:.04em}
.cf-in:focus{border-color:var(--lilac-bright);background:rgba(138,79,178,.12);
  box-shadow:0 0 18px rgba(138,79,178,.22)}
.cf-area{resize:vertical;min-height:104px;line-height:1.6}
.cf-send{align-self:flex-start;cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--lilac-bright);
  background:rgba(138,79,178,.14);border:1px solid rgba(201,156,242,.55);padding:13px 22px;
  transition:border-color .25s,background .25s,box-shadow .25s,color .25s,transform .2s}
.cf-send:hover{background:rgba(138,79,178,.3);border-color:var(--lilac-bright);color:#fff;
  box-shadow:0 0 22px rgba(138,79,178,.4);transform:translateY(-1px)}
.cf-send:active{transform:translateY(0) scale(.98)}
.contact-or{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(180,126,222,.55);margin-bottom:10px}
.big-email{display:inline-block;font-family:var(--disp);text-transform:uppercase;text-decoration:none;
  font-size:clamp(30px,6.4vw,92px);line-height:.95;color:var(--white);letter-spacing:.004em;
  transition:color .3s,text-shadow .3s;word-break:break-word}
.big-email:hover{color:var(--lilac-bright);text-shadow:0 0 30px rgba(138,79,178,.5)}
.contact-rows{margin-top:clamp(28px,5vw,54px);border-top:1px solid rgba(180,126,222,.2)}
.contact-rows a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 4px;border-bottom:1px solid rgba(180,126,222,.16);text-decoration:none;
  transition:padding .25s,background .25s}
.contact-rows a:hover{padding-left:16px;background:rgba(138,79,178,.08)}
.contact-rows .ch-name{font-family:var(--disp);font-size:clamp(18px,2.4vw,30px);text-transform:uppercase;color:#fff}
.contact-rows .ch-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--lilac);opacity:.8}
.contact-rows a:hover .ch-name{color:var(--lilac-bright)}
.contact-foot{margin-top:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(180,126,222,.55);display:flex;flex-wrap:wrap;gap:18px}
.contact-foot .live{color:var(--lilac-bright);display:flex;align-items:center;gap:7px}
.contact-foot .live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lilac-bright);
  box-shadow:0 0 8px var(--lilac-bright);animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:.4}50%{opacity:1}}

@media (max-width:860px){
  #detail-panel::after{display:none}
}

/* ════ INTRO VIDEO HERO — CRT/HUD frame, autoplays on enter ════ */
.vid-hero{position:relative;z-index:2;max-width:none;margin:0 0 clamp(34px,4.6vw,62px)}
.vh-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#08080b;cursor:pointer;
  border:1px solid rgba(180,126,222,.5);
  box-shadow:0 0 0 1px rgba(7,6,9,.9),0 38px 90px -34px rgba(138,79,178,.6),inset 0 0 130px rgba(138,79,178,.13)}
.vh-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#08080b}
.vh-scan{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.45;
  background:repeating-linear-gradient(rgba(255,255,255,0) 0 2px,rgba(0,0,0,.55) 2px 4px);
  animation:vhScan 7s linear infinite}
@keyframes vhScan{0%{background-position:0 0}100%{background-position:0 240px}}
.vh-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(122% 122% at 50% 50%,transparent 52%,rgba(5,4,7,.66))}
.vh-tick{position:absolute;width:15px;height:15px;border:1px solid var(--lilac);opacity:.6;pointer-events:none;z-index:3}
.vh-tick.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.vh-tick.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.vh-tick.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.vh-tick.br{bottom:9px;right:9px;border-left:0;border-top:0}
/* big play glyph when paused */
.vh-play{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .3s;background:rgba(7,6,9,.34)}
.vid-hero.paused .vh-play{opacity:1}
.vh-play b{width:0;height:0;border-style:solid;border-width:18px 0 18px 30px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 0 18px rgba(201,156,242,.8));transform:translateX(4px)}
/* HUD bar under the screen */
.vh-bar{display:flex;align-items:center;gap:14px;margin-top:10px;font-family:var(--mono);font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lilac)}
.vh-rec{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.78)}
.vh-rec b{width:7px;height:7px;border-radius:50%;background:#ff5470;box-shadow:0 0 8px #ff5470;
  animation:vhRec 1.3s steps(1,end) infinite}
@keyframes vhRec{0%,55%{opacity:1}56%,100%{opacity:.18}}
.vh-label{color:rgba(180,126,222,.72)}
.vh-tc{margin-left:auto;color:rgba(180,126,222,.7);font-variant-numeric:tabular-nums;letter-spacing:.16em}
.vh-sound{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lilac);background:rgba(13,13,12,.55);border:1px solid rgba(180,126,222,.4);
  padding:5px 10px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.vh-sound:hover{background:var(--lilac);color:#0d0d0c;border-color:var(--lilac)}

/* ── inline video product cards (autoplay in view) ── */
.derm-card.vid-card{cursor:pointer}
.derm-card.vid-card video{width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.derm-card.vid-card:hover video{transform:scale(1.045)}
.vc-badge{position:absolute;top:8px;right:8px;z-index:4;font-family:var(--mono);font-size:8px;
  letter-spacing:.18em;text-transform:uppercase;color:#0d0d0c;background:var(--lilac);
  padding:3px 7px;box-shadow:0 2px 10px rgba(7,6,9,.5)}

/* ════ DERMANIUM — grouped-family case gallery (true colour) ════ */
.derm-gal{position:relative;z-index:2;max-width:1400px}
.derm-sec{margin-bottom:clamp(40px,5.2vw,76px)}
.derm-sec-head{display:flex;align-items:baseline;gap:clamp(10px,1.6vw,18px);
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(180,126,222,.2)}
.ds-idx{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--lilac);
  border:1px solid rgba(180,126,222,.4);padding:3px 7px;flex:none}
.ds-name{font-family:var(--disp);font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(15px,2.1vw,25px);letter-spacing:.02em;line-height:1}
.ds-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(180,126,222,.62);display:none}
@media(min-width:720px){.ds-note{display:inline}}
.ds-count{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(180,126,222,.7);flex:none}

.derm-grid{display:grid;gap:14px}
.grid-shop{grid-template-columns:repeat(4,1fr)}
.grid-derm-vids{grid-template-columns:repeat(2,1fr)}

.grid-stories{grid-template-columns:repeat(3,1fr)}
.grid-mom{grid-template-columns:repeat(3,1fr)}
.grid-prod{grid-template-columns:repeat(4,1fr)}
.grid-aplus{grid-template-columns:1fr}
.grid-banner{grid-template-columns:repeat(2,1fr)}
.grid-label{grid-template-columns:repeat(auto-fill,minmax(240px,288px));justify-content:start}
.span-full{grid-column:1/-1}

/* ── navishopper: instagram carousels as scroll-snap strips ── */
.navi-strip{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 16px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(180,126,222,.5) transparent;
  -webkit-overflow-scrolling:touch}
.navi-strip .derm-card{flex:0 0 clamp(196px,23%,250px);scroll-snap-align:start}
.navi-strip .derm-card .num{position:absolute;top:7px;left:8px;z-index:4;font-family:var(--mono);
  font-size:8px;letter-spacing:.18em;color:#0d0d0c;background:var(--lilac);padding:2px 6px}
.navi-strip::-webkit-scrollbar{height:6px}
.navi-strip::-webkit-scrollbar-track{background:rgba(180,126,222,.08)}
.navi-strip::-webkit-scrollbar-thumb{background:rgba(180,126,222,.45);border-radius:3px}
.navi-strip::-webkit-scrollbar-thumb:hover{background:var(--lilac)}
.ds-swipe{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lilac);flex:none}
@media(max-width:1100px){
  .grid-shop,.grid-prod{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .grid-shop,.grid-prod,.grid-mom,.grid-banner{grid-template-columns:repeat(2,1fr)}
  .grid-stories{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:460px){
  .grid-shop,.grid-prod,.grid-banner{grid-template-columns:1fr}
}

.derm-card{position:relative;overflow:hidden;cursor:zoom-in;margin:0;background:#100f14;
  border:1px solid rgba(180,126,222,.22);
  transition:border-color .3s,box-shadow .35s,transform .35s}
.derm-card::after{content:'';position:absolute;top:-1px;left:-1px;width:10px;height:10px;z-index:4;
  border-top:1px solid var(--lilac);border-left:1px solid var(--lilac);opacity:.45;pointer-events:none}
.derm-card img{width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.derm-card:hover{border-color:rgba(201,156,242,.72);transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(138,79,178,.22)}
.derm-card:hover img{transform:scale(1.045)}
.derm-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:8px;
  padding:26px 11px 9px;font-family:var(--mono);
  background:linear-gradient(0deg,rgba(7,6,9,.86),rgba(7,6,9,.2) 55%,transparent);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.derm-card:hover .derm-cap{opacity:1;transform:none}
.derm-cap span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 6px rgba(7,6,9,.9)}
.derm-cap b{font-size:12px;color:var(--lilac-bright);flex:none}
@media(hover:none){.derm-cap{opacity:.96;transform:none;padding-top:30px}}

/* lightbox */
#derm-lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(6,5,8,.92);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  padding:clamp(14px,4vw,60px);cursor:zoom-out}
#derm-lb.open{display:flex}
#derm-lb .lb-stage{position:relative;max-width:100%;max-height:100%;display:flex;
  align-items:center;justify-content:center;cursor:auto}
#derm-lb img{max-width:100%;max-height:90vh;object-fit:contain;display:block;
  border:1px solid rgba(180,126,222,.4);box-shadow:0 30px 80px rgba(0,0,0,.65)}
#derm-lb .lb-cap{position:absolute;left:0;bottom:-26px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lilac)}
#derm-lb .lb-count{position:absolute;right:0;bottom:-26px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;color:rgba(180,126,222,.7)}
#derm-lb .lb-x{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:9px;
  letter-spacing:.24em;color:var(--lilac);border:1px solid rgba(180,126,222,.4);cursor:pointer;
  padding:8px 12px;background:rgba(13,13,12,.55);transition:border-color .25s,background .25s}
#derm-lb .lb-x:hover{border-color:var(--lilac-bright);background:rgba(138,79,178,.22)}
#derm-lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;cursor:pointer;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,12,.5);border:1px solid rgba(180,126,222,.4);color:var(--lilac);
  font-size:18px;transition:border-color .25s,background .25s,color .25s}
#derm-lb .lb-nav:hover{border-color:var(--lilac-bright);background:rgba(138,79,178,.24);color:#fff}
#derm-lb .lb-prev{left:clamp(10px,2vw,28px)}
#derm-lb .lb-next{right:clamp(10px,2vw,28px)}
@media(max-width:600px){#derm-lb .lb-nav{width:38px;height:38px}}