@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/montserrat-latin-600-normal.woff2) format("woff2")}
:root{
  --ink:#04050a;
  --ink-2:#0a0c16;
  --panel:rgba(12,14,24,.82);
  --line:rgba(214,218,230,.22);
  --line-strong:rgba(226,230,240,.55);
  --plat:#e4e6ec;
  --plat-dim:#9ea3b2;
  --blue:#3d5bff;
  --blue-glow:rgba(61,91,255,.35);
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --track:.32em;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--ink);color:var(--plat);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid var(--plat);outline-offset:3px}

/* ---------- STEP-AND-REPEAT PERIMETER ---------- */
.press-wall{position:fixed;inset:0;z-index:0;background:
  radial-gradient(ellipse at 50% 45%,rgba(61,91,255,.10),transparent 60%),
  linear-gradient(180deg,#05060c,#020306);}
.press-wall::before{content:"";position:absolute;inset:-80px;
  background-image:url(../assets/crest-tile.png);
  background-size:74px 74px;background-repeat:repeat;
  background-position:0 0;
  opacity:.075;filter:grayscale(1) brightness(1.4);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,rgba(0,0,0,.55) 100%);
          mask-image:radial-gradient(ellipse at center,#000 55%,rgba(0,0,0,.55) 100%);}
.press-wall::after{content:"";position:absolute;inset:0;
  background-image:url(../assets/crest-tile.png);background-size:74px 74px;
  background-position:37px 37px;opacity:.04;filter:grayscale(1)}

/* ---------- HOMEPAGE STAGE ---------- */
.stage{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:clamp(16px,3.2vw,56px)}
.frame{position:relative;
  width:min(1671px,100%,calc((100svh - 2*clamp(16px,3.2vw,56px)) * 1671 / 941));
  aspect-ratio:1671/941;
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 6px rgba(4,5,10,.9),0 0 0 7px var(--line),0 40px 120px rgba(0,0,0,.85),0 0 90px var(--blue-glow);
  background:#000;overflow:hidden}
.frame img.studio{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.frame .corner{position:absolute;width:22px;height:22px;border-color:var(--plat);opacity:.75;z-index:3;pointer-events:none}
.corner.tl{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.corner.tr{top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}
.corner.bl{bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}
.corner.br{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* hotspots mapped to the comp (percent of 1671x941) */
.hot{position:absolute;z-index:2;display:block;border-radius:2px;transition:background .25s,box-shadow .25s}
.hot:hover,.hot:focus-visible{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hot.card:hover,.hot.card:focus-visible{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 40px rgba(61,91,255,.25)}
.hot.sound{border-radius:50%}
.hot.sound.on::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--plat);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}

/* volume: real slider laid over the comp's slider line */
.hot.mute.muted::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:1.5px;background:#e8c27a;transform:rotate(-40deg)}
.vol{position:absolute;z-index:2;display:flex;align-items:center;background:#000;padding:0 2px}
.vol input{--fill:80%;-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;margin:0}
.vol input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#f1ece4 var(--fill),rgba(241,236,228,.25) var(--fill))}
.vol input::-moz-range-track{height:2px;background:linear-gradient(90deg,#f1ece4 var(--fill),rgba(241,236,228,.25) var(--fill))}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#e8c27a;margin-top:-4px;box-shadow:0 0 6px rgba(232,194,122,.6)}
.vol input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#e8c27a}

/* sound prompt — appears only while the browser is holding the beat back */
.tap-sound{position:fixed;left:50%;bottom:clamp(18px,4vh,40px);z-index:30;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:12px;padding:13px 22px;border:1px solid #e8c27a;background:rgba(6,5,4,.88);backdrop-filter:blur(6px);
  color:#f1ece4;font-size:11px;letter-spacing:.34em;transition:opacity .4s,transform .4s;box-shadow:0 0 30px rgba(232,194,122,.25)}
.tap-sound.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;animation:tapGlow 2s ease-in-out infinite}
.tap-sound:hover{background:#e8c27a;color:#0a0806}
.tap-sound .eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.tap-sound .eq i{width:2px;background:currentColor;animation:eq 1s ease-in-out infinite}
.tap-sound .eq i:nth-child(1){height:40%;animation-delay:-.2s}.tap-sound .eq i:nth-child(2){height:90%;animation-delay:-.5s}
.tap-sound .eq i:nth-child(3){height:60%;animation-delay:-.8s}.tap-sound .eq i:nth-child(4){height:75%;animation-delay:-.35s}
@keyframes eq{50%{transform:scaleY(.35)}}
@keyframes tapGlow{50%{box-shadow:0 0 44px rgba(232,194,122,.5)}}
.intro ~ .tap-sound{display:none}

/* mobile companion bar */
.mobile-bar{display:none}
@media (max-width:760px){
  .stage{align-content:center;gap:18px;padding:16px}
  .frame{width:100%}
  .hot.nav{display:none}
  .mobile-bar{display:grid;gap:12px;width:100%}
  .mobile-bar nav{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em}
  .mobile-bar .ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:14px 22px;border:1px solid var(--line-strong);font-size:11px;letter-spacing:var(--track);text-transform:uppercase;background:rgba(0,0,0,.35);transition:background .25s,border-color .25s}
.btn:hover{background:rgba(255,255,255,.08);border-color:var(--plat)}
.btn.solid{background:var(--plat);color:#06070d;border-color:var(--plat)}
.btn.solid:hover{background:#fff}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- INTRO ---------- */
.intro{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-items:center;overflow:hidden}
.intro .ambient{position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse 45% 38% at 50% 46%,rgba(228,230,236,.10),transparent 70%),
             radial-gradient(ellipse 80% 60% at 50% 120%,rgba(61,91,255,.16),transparent 70%);
  animation:ambient 1.2s .1s ease forwards}
@keyframes ambient{to{opacity:1}}
.intro .seal{position:relative;width:clamp(200px,32vw,380px);aspect-ratio:1}
.intro .seal img{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transform:scale(1.42);filter:blur(6px) brightness(1.15);
  animation:stamp .62s .40s cubic-bezier(.55,0,.75,.2) forwards, settle .5s 1.02s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes stamp{60%{opacity:1;filter:blur(1px) brightness(1.1)}100%{opacity:1;transform:scale(.975);filter:blur(0) brightness(1)}}
@keyframes settle{from{transform:scale(.975)}to{transform:scale(1)}}
/* impact shadow pressed into the page */
.intro .seal .press{position:absolute;inset:4%;border-radius:50%;opacity:0;
  box-shadow:0 0 0 0 rgba(255,255,255,0),0 18px 60px rgba(0,0,0,.9);
  animation:press .9s 1.0s ease-out forwards}
@keyframes press{0%{opacity:0;box-shadow:0 0 0 0 rgba(228,230,236,.22),0 4px 18px rgba(0,0,0,.9)}
  20%{opacity:1}
  100%{opacity:1;box-shadow:0 0 0 28px rgba(228,230,236,0),0 26px 70px rgba(0,0,0,.95)}}
/* platinum sheen sweep, masked to the crest */
.intro .seal .sheen{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(../assets/ditc-crest.png) center/contain no-repeat;mask:url(../assets/ditc-crest.png) center/contain no-repeat}
.intro .seal .sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  mix-blend-mode:overlay;transform:skewX(-14deg);animation:sheen 1.1s 1.15s ease-in-out forwards}
@keyframes sheen{to{left:125%}}
.intro .enter{position:absolute;left:50%;bottom:clamp(40px,11vh,110px);transform:translateX(-50%);
  display:grid;justify-items:center;gap:14px;opacity:0;animation:rise .8s 1.7s ease forwards}
.intro .enter .tag{font-size:11px;letter-spacing:.55em;color:var(--plat-dim);padding-left:.55em;white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.intro .skip{position:absolute;top:22px;right:24px;font-size:10px;letter-spacing:.32em;color:var(--plat-dim);opacity:.8}
.intro .skip:hover{color:var(--plat)}
.intro.leaving{animation:introOut .9s .25s cubic-bezier(.6,0,.2,1) forwards}
.intro.leaving .seal img{animation:none;opacity:1;transform:scale(1)}
.intro.leaving .seal{animation:sealOut .55s cubic-bezier(.4,0,.2,1) forwards}
.intro.leaving .enter,.intro.leaving .skip{animation:none;opacity:0;transition:opacity .25s}
@keyframes sealOut{to{transform:scale(1.07);opacity:0;filter:blur(2px)}}
@keyframes introOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}
.site{opacity:0;transition:opacity 1s ease .15s}
.site.ready{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* ---------- INTERIOR PAGES (vault, admin, about, contact) ---------- */
body.interior .press-wall::before{opacity:.022}
body.interior .press-wall::after{opacity:.018}
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(4,5,10,.82);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.3em}
.brand img{width:40px;height:40px}
.topbar nav{display:flex;gap:clamp(14px,3vw,38px);font-size:11px;letter-spacing:.24em}
.topbar nav a{opacity:.75;padding:6px 0;border-bottom:1px solid transparent}
.topbar nav a:hover,.topbar nav a[aria-current]{opacity:1;border-color:var(--plat)}
@media (max-width:760px){.topbar{flex-wrap:wrap}.topbar nav{width:100%;justify-content:space-between;font-size:10px;letter-spacing:.16em}.brand span{display:none}}
.wrap{width:min(1180px,100%);margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px)}
.eyebrow{font-size:11px;letter-spacing:.5em;color:var(--plat-dim)}
h1.title{font-weight:500;font-size:clamp(28px,4.4vw,48px);letter-spacing:.28em;margin:14px 0 10px}
.rule{width:56px;height:1px;background:var(--plat);margin:18px 0 22px}
.lede{color:var(--plat-dim);font-size:14px;line-height:1.8;max-width:62ch;letter-spacing:.02em}
.panel{border:1px solid var(--line);background:var(--panel);padding:clamp(20px,3vw,36px)}
.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-size:10px;letter-spacing:.3em;color:var(--plat-dim)}
.field input,.field select,.field textarea{background:rgba(0,0,0,.45);border:1px solid var(--line);color:var(--plat);padding:13px 14px;font:inherit;font-size:14px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--plat)}
.note{font-size:12px;color:var(--plat-dim);line-height:1.7}
.msg{font-size:12px;letter-spacing:.06em;margin-top:12px;min-height:1em}
.msg.err{color:#ff8a8a}.msg.ok{color:#9fe0b4}
footer.foot{margin-top:auto;padding:26px;text-align:center;font-size:10px;letter-spacing:.4em;color:var(--plat-dim);border-top:1px solid var(--line)}