/* ═══════════════════════════════════════════════════════════
   JMZ Management — property selector
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#08090b;
  --ink-2:#0e1014;
  --ink-3:#15181d;
  --bone:#eceae5;
  --bone-dim:#a5a49f;
  --bone-faint:#6b6b68;
  --line:rgba(236,234,229,.12);
  --line-soft:rgba(236,234,229,.07);
  --brass:#d2a458;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);

  --pad:clamp(18px,3.2vw,44px);
  --nav-h:88px;

  --font-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-d);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
kbd{font:inherit}

::selection{background:var(--brass);color:var(--ink)}

/* ── Ambient ───────────────────────────────────────────── */
.grain{
  position:fixed;inset:-120px;z-index:60;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(8) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}    12.5%{transform:translate(-14px,7px)}
  25%{transform:translate(9px,-12px)} 37.5%{transform:translate(-7px,14px)}
  50%{transform:translate(13px,5px)}  62.5%{transform:translate(-11px,-9px)}
  75%{transform:translate(6px,11px)}  87.5%{transform:translate(-13px,-5px)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%);
}

/* ── Intro reveal ──────────────────────────────────────────
   Pure CSS animation. Never gate the first render on a JS timer:
   background/occluded tabs throttle timers to 1Hz, which strands the
   page on a blank screen. These run off the compositor instead.       */
@keyframes maskUp{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ── Shell ─────────────────────────────────────────────── */
.shell{
  position:relative;z-index:2;
  min-height:100svh;display:flex;flex-direction:column;
}

/* ── Nav ───────────────────────────────────────────────── */
.nav{
  height:var(--nav-h);flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand__logo{
  height:clamp(42px,4.1vw,62px);width:auto;flex:none;
  transition:transform .5s var(--ease),filter .5s ease;
}
.brand:hover .brand__logo{transform:translateY(-1px);filter:drop-shadow(0 4px 16px rgba(226,38,28,.35))}
.brand__rule{width:1px;height:26px;background:var(--line);flex:none}
.brand__text{
  font-family:var(--font-m);font-size:9px;line-height:1.5;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-faint);white-space:nowrap;
}
.nav__meta{display:flex;align-items:center;gap:14px}
.nav__link{
  font-family:var(--font-m);font-size:11px;letter-spacing:.1em;color:var(--bone-dim);
  position:relative;padding-bottom:2px;transition:color .3s
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
.nav__link:hover{color:var(--bone)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__dot{width:3px;height:3px;border-radius:50%;background:var(--bone-faint)}

/* ── Intro ─────────────────────────────────────────────── */
.intro{
  flex:none;padding:clamp(24px,4.4vh,52px) var(--pad) clamp(20px,3.4vh,34px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:end;gap:clamp(16px,4vw,60px);
}
.eyebrow{
  grid-column:1/-1;margin:0 0 clamp(10px,1.6vh,18px);
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone-dim);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.eyebrow__l{display:flex;align-items:center;gap:10px}
.eyebrow em{font-style:normal;color:var(--bone-faint)}
.pulse{
  width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none;
  box-shadow:0 0 0 0 rgba(210,164,88,.6);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(210,164,88,.5)}
  70%{box-shadow:0 0 0 11px rgba(210,164,88,0)}
  100%{box-shadow:0 0 0 0 rgba(210,164,88,0)}
}
.intro__title{
  margin:0;font-weight:800;font-stretch:118%;
  font-size:clamp(42px,min(6.4vw,9vh),104px);line-height:.88;letter-spacing:-.035em;
}
.intro__title .mask{display:block;overflow:hidden;padding-bottom:.04em}
.intro__title .mask__i{display:block;animation:maskUp .8s var(--ease) backwards}
.intro__title .mask:nth-child(2) .mask__i{animation-delay:.07s}
.intro__title .mask:last-child .mask__i{color:var(--bone-dim)}
.intro__sub{
  margin:0 0 .55em;max-width:44ch;
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.55;color:var(--bone-dim);
  animation:fadeUp .6s .22s var(--ease) backwards;
}
.intro__hint{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-faint);display:flex;align-items:center;gap:7px;white-space:nowrap;
  animation:fadeIn .6s .4s ease backwards;
}
.intro__hint em{font-style:normal;opacity:.5}
.intro__hint kbd{
  border:1px solid var(--line);border-radius:4px;padding:2px 6px;
  font-size:9.5px;color:var(--bone-dim);line-height:1.2;
}

/* ── Stage ─────────────────────────────────────────────── */
.stage{
  flex:1 1 auto;min-height:0;
  display:flex;gap:2px;padding:0 var(--pad) var(--pad);
}

/* ── Panel ─────────────────────────────────────────────── */
.panel{
  position:relative;flex:1 1 0;min-width:0;min-height:clamp(330px,40vh,600px);
  overflow:hidden;isolation:isolate;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  transition:flex-grow 1s var(--ease),border-color .6s ease;
  will-change:flex-grow;
  animation:panelIn .7s var(--ease) backwards;
}
.panel:nth-child(1){animation-delay:.14s}
.panel:nth-child(2){animation-delay:.22s}
.panel:nth-child(3){animation-delay:.30s}

.panel__media{position:absolute;inset:0;overflow:hidden}
.panel__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);
  filter:grayscale(.28) brightness(.80) contrast(1.03);
  transition:transform 1.5s var(--ease),filter 1s ease;
  will-change:transform,filter;
}
.panel__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(6,7,9,.88) 0%,rgba(6,7,9,.56) 26%,rgba(6,7,9,.06) 58%,rgba(6,7,9,.22) 100%);
  transition:opacity .8s ease;
}
.panel__sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.16) 48%,transparent 62%);
  transform:translateX(-42%);
}

/* corner brackets */
.panel__frame{position:absolute;inset:14px;pointer-events:none;z-index:4}
.panel__frame i{position:absolute;width:16px;height:16px;opacity:0;transition:opacity .5s ease,transform .7s var(--ease)}
.panel__frame i:nth-child(1){top:0;left:0;border-top:1px solid var(--accent);border-left:1px solid var(--accent);transform:translate(7px,7px)}
.panel__frame i:nth-child(2){top:0;right:0;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:translate(-7px,7px)}
.panel__frame i:nth-child(3){bottom:0;left:0;border-bottom:1px solid var(--accent);border-left:1px solid var(--accent);transform:translate(7px,-7px)}
.panel__frame i:nth-child(4){bottom:0;right:0;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);transform:translate(-7px,-7px)}

.panel__spine{
  position:absolute;left:20px;bottom:26px;z-index:4;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-m);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bone-dim);
  transition:opacity .5s ease,transform .7s var(--ease);
}
.panel__index{
  position:absolute;top:26px;right:26px;z-index:4;
  font-family:var(--font-d);font-weight:800;font-stretch:118%;font-size:clamp(30px,3.2vw,46px);
  line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(236,234,229,.34);
  transition:color .6s ease,-webkit-text-stroke-color .6s ease,transform .7s var(--ease);
}

.panel__body{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(58px,6.4vw,104px) clamp(20px,2vw,34px) clamp(22px,2.4vw,34px) clamp(46px,3.6vw,58px);
  z-index:3;
  /* keeps copy legible no matter how bright the photograph behind it is */
  background:linear-gradient(to top,
    rgba(6,7,9,.9) 0%,
    rgba(6,7,9,.85) 28%,
    rgba(6,7,9,.68) 50%,
    rgba(6,7,9,.42) 68%,
    rgba(6,7,9,.18) 84%,
    rgba(6,7,9,.05) 94%,
    rgba(6,7,9,0) 100%);
}
.panel__type{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:12px;
  transition:color .5s ease;
}
.panel__title{
  font-weight:800;font-stretch:112%;
  font-size:clamp(25px,2.15vw,40px);line-height:.94;letter-spacing:-.032em;
  text-wrap:balance;
  text-shadow:0 2px 22px rgba(6,7,9,.7);
}
.panel__reveal{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .85s var(--ease);
  width:100%;
}
.panel__revealIn{
  overflow:hidden;min-height:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .6s var(--ease);
}
.panel__addr{
  display:block;margin-top:16px;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;color:var(--bone-dim);
}
.panel__blurb{
  display:block;margin-top:12px;max-width:40ch;
  font-size:14px;line-height:1.55;color:rgba(236,234,229,.82);
}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chips i{
  font-style:normal;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);
  border:1px solid var(--line);border-radius:100px;padding:5px 11px;
  background:rgba(255,255,255,.045);backdrop-filter:blur(6px);
  white-space:nowrap;
}
.panel__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:var(--bone);
  padding:11px 16px;border-radius:100px;
  transform:translateY(8px);opacity:0;
  transition:opacity .5s ease,transform .6s var(--ease),background .4s ease,color .4s ease;
}
.panel__ctaArrow{display:grid;place-items:center;transition:transform .5s var(--ease)}
.panel__rule{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);z-index:5;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease);
}

/* ── Panel — active state (hover / focus / keyboard) ────── */
@media (min-width:901px){
  .stage:hover .panel,
  .stage:focus-within .panel,
  .stage.has-active .panel{flex-grow:.76}

  .stage:hover .panel:hover,
  .stage:focus-within .panel:focus-visible,
  .stage.has-active .panel.is-active{flex-grow:1.95}

  .stage:hover .panel:not(:hover) .panel__media img,
  .stage.has-active .panel:not(.is-active) .panel__media img{filter:grayscale(.55) brightness(.52) contrast(1.02)}
}
.panel:hover,.panel:focus-visible,.panel.is-active{border-color:rgba(236,234,229,.2);outline:none}
.panel:hover .panel__media img,
.panel:focus-visible .panel__media img,
.panel.is-active .panel__media img{transform:scale(1);filter:grayscale(0) brightness(1.04) contrast(1.02)}
.panel:hover .panel__scrim,
.panel:focus-visible .panel__scrim,
.panel.is-active .panel__scrim,
.panel.in-focus .panel__scrim{
  background:linear-gradient(to top,rgba(6,7,9,.68) 0%,rgba(6,7,9,.44) 28%,rgba(6,7,9,.15) 58%,rgba(6,7,9,.03) 80%,rgba(6,7,9,.22) 100%);
}
.panel:hover .panel__frame i,
.panel:focus-visible .panel__frame i,
.panel.is-active .panel__frame i{opacity:.9;transform:translate(0,0)}
.panel:hover .panel__spine,
.panel:focus-visible .panel__spine,
.panel.is-active .panel__spine{opacity:0;transform:rotate(180deg) translateY(16px)}
.panel:hover .panel__index,
.panel:focus-visible .panel__index,
.panel.is-active .panel__index{color:var(--accent);-webkit-text-stroke-color:transparent}
.panel:hover .panel__reveal,
.panel:focus-visible .panel__reveal,
.panel.is-active .panel__reveal{grid-template-rows:1fr}
.panel:hover .panel__revealIn,
.panel:focus-visible .panel__revealIn,
.panel.is-active .panel__revealIn{opacity:1;transform:none;transition-delay:.14s}
.panel:hover .panel__cta,
.panel:focus-visible .panel__cta,
.panel.is-active .panel__cta{opacity:1;transform:none;transition-delay:.24s}
.panel:hover .panel__cta{background:var(--accent);color:var(--ink)}
.panel:hover .panel__ctaArrow{transform:translateX(4px)}
.panel:hover .panel__rule,
.panel:focus-visible .panel__rule,
.panel.is-active .panel__rule{transform:scaleX(1)}
.panel:hover .panel__sheen,
.panel.is-active .panel__sheen{animation:sheen 1.15s var(--ease-io) .1s 1}
@keyframes sheen{
  0%{opacity:0;transform:translateX(-42%)}
  22%{opacity:1}
  100%{opacity:0;transform:translateX(42%)}
}

/* ── Panel — launching ─────────────────────────────────── */
.stage.is-launching .panel{pointer-events:none}
@media (min-width:901px){
  .stage.is-launching .panel{flex-grow:.001;transition:flex-grow .85s var(--ease)}
  .stage.is-launching .panel.is-launch{flex-grow:12}
}
.panel.is-launch .panel__media img{transform:scale(1.1);filter:grayscale(0) brightness(1.04);transition:transform 1.1s var(--ease),filter .6s ease}
.stage.is-launching .panel:not(.is-launch){opacity:.15;transition:opacity .5s ease,flex-grow .85s var(--ease)}

/* ── Footer ────────────────────────────────────────────── */
.foot{flex:none;border-top:1px solid var(--line-soft)}
.ticker{overflow:hidden;padding:12px 0;border-bottom:1px solid var(--line-soft);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{
  display:flex;align-items:center;gap:22px;width:max-content;
  animation:ticker 34s linear infinite;
}
.ticker__track span{
  font-family:var(--font-m);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone-faint);white-space:nowrap;
}
.ticker__track b{width:4px;height:4px;border-radius:50%;background:var(--brass);opacity:.55;flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}
.foot__row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-faint);
}
.foot__links{display:flex;gap:18px}
.foot__links a{transition:color .3s}
.foot__links a:hover{color:var(--brass)}

/* ── Cursor ────────────────────────────────────────────── */
.cursor{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  opacity:0;transition:opacity .3s;
  mix-blend-mode:difference;
}
.cursor.is-on{opacity:1}
.cursor__dot{
  position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  transform:translate(-50%,-50%) scale(1);
  transition:width .45s var(--ease),height .45s var(--ease),border-color .3s;
}
.cursor__label{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--font-m);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  opacity:0;transition:opacity .3s;
}
.cursor.is-hot .cursor__ring{width:84px;height:84px}
.cursor.is-hot .cursor__dot{opacity:0}
.cursor.is-hot .cursor__label{opacity:1;transition-delay:.1s}

/* ── Launch transition ─────────────────────────────────── */
.launch{position:fixed;inset:0;z-index:500;pointer-events:none;visibility:hidden}
.launch.is-on{visibility:visible;pointer-events:all}
.launch__flash,.launch__fill{
  position:absolute;inset:0;
  clip-path:circle(0px at var(--x,50%) var(--y,50%));
}
.launch__flash{background:var(--accent,#d2a458)}
.launch__fill{background:var(--ink)}
.launch.is-on .launch__flash{transition:clip-path .72s var(--ease-io);clip-path:circle(var(--r,150vmax) at var(--x,50%) var(--y,50%))}
.launch.is-on .launch__fill{transition:clip-path .72s .11s var(--ease-io);clip-path:circle(var(--r,150vmax) at var(--x,50%) var(--y,50%))}
.launch__label{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;transform:translateY(10px);
}
.launch.is-on .launch__label{opacity:1;transform:none;transition:opacity .4s .5s ease,transform .6s .5s var(--ease)}
.launch__kicker{
  font-family:var(--font-m);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-faint);
}
.launch__name{
  font-weight:800;font-stretch:118%;font-size:clamp(26px,4.6vw,60px);line-height:1;letter-spacing:-.035em;
  text-align:center;padding:0 20px;
}
.launch__prog{display:block;width:min(220px,52vw);height:1px;background:var(--line);overflow:hidden;margin-top:6px}
.launch__prog i{display:block;height:100%;width:0;background:var(--accent,#d2a458)}
.launch.is-on .launch__prog i{width:100%;transition:width .85s .55s linear}

/* ═══ Tablet ═══════════════════════════════════════════ */
@media (max-width:1180px){
  .panel__blurb{display:none}
  .intro{grid-template-columns:1fr}
  .intro__hint{grid-column:1}
}

/* ═══ Mobile ═══════════════════════════════════════════ */
@media (max-width:1080px){
  .brand__rule,.brand__text{display:none}
}

@media (max-width:900px){
  :root{--nav-h:74px}
  .shell{min-height:auto}
  .nav{position:sticky;top:0;z-index:40;background:rgba(8,9,11,.82);backdrop-filter:blur(14px) saturate(1.2)}
  .nav__link--mail{display:none}
  .nav__dot{display:none}

  .intro{padding:clamp(26px,7vw,44px) var(--pad) clamp(20px,5vw,30px)}
  .intro__title{font-size:clamp(33px,10.8vw,60px);font-stretch:108%}
  .intro__sub{font-size:14.5px;margin-bottom:0}
  .intro__hint{display:none}

  .stage{flex-direction:column;gap:14px;padding:0 var(--pad) 34px}
  .panel{
    flex:none;height:min(72svh,560px);min-height:420px;
    border-radius:20px;
  }

  .panel__media img{transform:scale(1.1);filter:grayscale(.22) brightness(.84) contrast(1.02)}
  .panel__frame{inset:12px}
  .panel__frame i{opacity:.55;transform:translate(0,0)}
  .panel__spine{display:none}
  .panel__index{top:18px;right:20px;font-size:34px}
  .panel__body{padding:92px 20px 22px 20px}
  .panel__title{font-size:clamp(30px,8.4vw,44px)}
  .panel__reveal{grid-template-rows:1fr}
  .panel__revealIn{opacity:1;transform:none}
  .panel__blurb{display:block;font-size:13.5px;max-width:none}
  .panel__cta{opacity:1;transform:none;background:rgba(255,255,255,.1);color:var(--bone);border:1px solid var(--line);backdrop-filter:blur(10px)}
  .panel__rule{transform:scaleX(1);opacity:.5}

  .panel.in-focus .panel__media img{filter:grayscale(0) brightness(1.02) contrast(1.02);transform:scale(1)}
  .panel.in-focus .panel__rule{opacity:1}
  .panel.in-focus .panel__index{color:var(--accent);-webkit-text-stroke-color:transparent}
  .panel.in-focus .panel__cta{background:var(--accent);color:var(--ink);border-color:transparent}
  .panel:active{transform:scale(.985);transition:transform .18s ease}

  .stage.is-launching .panel:not(.is-launch){opacity:.1}
  .panel.is-launch{z-index:2}

  .foot__row{justify-content:center;text-align:center;font-size:9px;gap:10px}
}

@media (max-width:420px){
  .chips i{font-size:9px;padding:4px 9px}
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .grain{animation:none}
  .panel__media img{transform:none;filter:grayscale(.18) brightness(.86)}
  .intro__title .mask__i,.intro__sub,.intro__hint,.panel{animation:none;opacity:1;transform:none}
}