/* ═══════════════════════════════════════════════════════════
   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%);
}

/* ── 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__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)}

/* ── 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)}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:2px;
  font-family:var(--font-m);font-size:12.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.btn--primary{background:var(--brass);color:var(--ink);font-weight:700}
.btn--primary:hover{background:#e3bb77}
.btn--ghost{border-color:var(--line);color:var(--bone)}
.btn--ghost:hover{border-color:rgba(236,234,229,.4);background:rgba(255,255,255,.04)}
.btn--card{
  margin-top:auto;width:100%;justify-content:space-between;
  background:var(--accent,#d2a458);color:var(--ink);font-weight:700;
}
.btn--card::after{content:"→";font-size:15px;line-height:1}
.btn--card:hover{filter:brightness(1.12)}

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  padding:clamp(48px,7vw,92px) var(--pad) clamp(34px,4.5vw,56px);
  max-width:1000px;
}
/* The opening line is set large rather than as a small label, in the brass it
   has always been. Wide letter-spacing at this size would push it off a phone,
   so the tracking comes in as the type grows. */
.hero__eyebrow{
  margin:0 0 clamp(8px,1vw,16px);
  font-size:clamp(30px,5vw,64px);
  font-weight:800;line-height:1.02;letter-spacing:-.02em;
  font-stretch:96%;
  color:var(--brass);
}
.hero__title{
  margin:0;
  font-size:clamp(27px,3.7vw,46px);
  font-weight:800;line-height:1.07;letter-spacing:-.018em;
  font-stretch:96%;
  text-wrap:balance;
}
.hero__sub{
  margin:22px 0 0;max-width:66ch;
  font-size:clamp(15px,1.28vw,17.5px);line-height:1.62;color:var(--bone-dim);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__updated{
  margin:26px 0 0;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-faint);
}
.hero__updated time{color:var(--bone-dim)}

/* ── Sections ──────────────────────────────────────────── */
.section{
  padding:clamp(44px,5.4vw,76px) var(--pad);
  border-top:1px solid var(--line-soft);
}
.section__title{
  margin:0;
  font-size:clamp(24px,3.1vw,38px);
  font-weight:800;letter-spacing:-.016em;line-height:1.12;
  text-wrap:balance;max-width:22ch;
}
#which .section__title,#faq .section__title{max-width:30ch}
.section__lead{
  margin:14px 0 0;max-width:62ch;
  font-size:15.5px;line-height:1.6;color:var(--bone-dim);
}

/* ── Property cards ────────────────────────────────────── */
.cards{
  margin-top:34px;
  display:grid;gap:20px;
  grid-template-columns:repeat(3,1fr);
}
.card{
  cursor:pointer;
  display:flex;flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:3px;overflow:hidden;
  transition:border-color .3s ease,transform .4s var(--ease);
}
.card:hover{border-color:rgba(236,234,229,.24);transform:translateY(-3px)}
.card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-3)}
.card__media img{will-change:transform,filter}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.92) contrast(1.02);
  transition:transform .8s var(--ease),filter .5s ease;
}
.card:hover .card__media img{transform:scale(1.04);filter:brightness(1.02) contrast(1.02)}
.card__index{
  position:absolute;top:10px;right:14px;
  font-family:var(--font-m);font-size:26px;font-weight:700;
  color:var(--accent);opacity:.9;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.card__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 22px;gap:0}
.card__title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.012em;line-height:1.15}
.card__title a:hover{color:var(--accent-soft)}
.card__type{
  margin:8px 0 0;
  font-family:var(--font-m);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-soft);
  line-height:1.5;
}
.card__specs{
  margin:18px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:7px;
  flex:1;                     /* keeps the rate + button aligned across cards
                                 whose spec lists differ in length */
}
.card__specs li{
  position:relative;padding-left:17px;
  font-size:14.5px;line-height:1.45;color:var(--bone-dim);
}
.card__specs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.85;
}
.card__rate{
  margin:18px 0 20px;padding-top:15px;
  border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;gap:8px;
}
.card__rate span{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-faint);
}
.card__rate b{font-size:22px;font-weight:800;color:var(--bone);letter-spacing:-.01em}

/* Screen-reader-only: the comparison table's corner cell needs a label for
   assistive tech but must look empty. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Comparison table ──────────────────────────────────── */
.tablewrap{margin-top:32px;overflow-x:auto;border:1px solid var(--line);border-radius:3px}
.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;line-height:1.45}
.cmp thead th{
  background:var(--ink-3);
  font-family:var(--font-m);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone);
  border-bottom:1px solid var(--line);
}
.cmp thead th:first-child{color:var(--bone-faint)}
.cmp tbody tr+tr{border-top:1px solid var(--line-soft)}
.cmp tbody th{
  font-family:var(--font-m);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone-faint);
  white-space:nowrap;width:1%;
}
.cmp tbody td{color:var(--bone-dim)}
.cmp tbody td b{color:var(--bone);font-size:16px}
.cmp tbody tr:hover td{background:rgba(255,255,255,.02)}
.tlink{
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);
  border-bottom:1px solid rgba(210,164,88,.4);padding-bottom:2px;
}
.tlink:hover{color:#e3bb77;border-bottom-color:#e3bb77}


/* ── Comparison table on narrow screens ────────────────
   The point of this table is the comparison, and you cannot compare three
   buildings one swipe at a time. So all four columns stay on screen at any
   width the table would otherwise have to scroll at: the type comes down,
   the padding tightens, the label column is fixed narrow and the three
   property columns share what is left equally. Long values wrap to as many
   lines as they need - a taller row is a fair price for being able to read
   across it.

   900px, not 760px, because the base table asks for 760px of its own and a
   tablet has not got that once the page padding is taken off. */
@media (max-width:900px){
  .tablewrap{overflow-x:visible;border-radius:3px}
  .cmp{min-width:0;width:100%;table-layout:fixed;font-size:13px}
  .cmp th,.cmp td{
    padding:10px 9px;
    /* break-word rather than anywhere, so a long value hyphenates at a real
       break instead of splitting mid-syllable */
    overflow-wrap:break-word;hyphens:auto;
    line-height:1.4;
  }
  .cmp thead th{font-size:11px;letter-spacing:.04em}
  .cmp thead th:first-child,
  .cmp tbody th{width:22%;color:var(--bone-faint)}
  /* the base rule keeps row labels on one line, which at this width runs
     them straight over the first property's value */
  .cmp tbody th{white-space:normal;font-size:11px;letter-spacing:.05em;background:var(--ink-2)}
  .cmp tbody td b{font-size:14px}
  .cmp tbody tr:hover td{background:none}
}
@media (max-width:760px){
  .cmp{font-size:12px}
  .cmp th,.cmp td{padding:9px 7px;line-height:1.35}
  .cmp thead th{font-size:10.5px}
  .cmp tbody th{font-size:10.5px;letter-spacing:.04em}
  .cmp tbody td b{font-size:13px}
}
@media (max-width:420px){
  .cmp{font-size:11px}
  .cmp th,.cmp td{padding:8px 5px}
  .cmp thead th{font-size:9.5px}
  .cmp thead th:first-child,
  .cmp tbody th{width:21%}
  .cmp tbody th{font-size:9.5px}
  .cmp tbody td b{font-size:12px}
}

/* ── Direct answers ────────────────────────────────────── */
.qa{margin-top:32px;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.qa__item{
  padding:24px;background:var(--ink-2);
  border:1px solid var(--line);border-left:2px solid var(--brass);border-radius:3px;
}
.qa__q{margin:0;font-size:17px;font-weight:700;line-height:1.32;letter-spacing:-.008em}
.qa__a{margin:12px 0 0;font-size:14.8px;line-height:1.6;color:var(--bone-dim)}
.qa__a a{color:var(--brass);border-bottom:1px solid rgba(210,164,88,.35)}
.qa__a a:hover{color:#e3bb77}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{margin-top:30px;max-width:860px;border-top:1px solid var(--line-soft)}
.faq__item{border-bottom:1px solid var(--line-soft)}
.faq__item summary{
  list-style:none;cursor:pointer;
  padding:18px 34px 18px 0;position:relative;
  font-size:16.5px;font-weight:600;line-height:1.4;
  transition:color .2s ease;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-m);font-size:19px;color:var(--brass);
  transition:transform .28s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__item summary:hover{color:var(--brass)}
.faq__item summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.faq__item p{
  margin:0 0 20px;padding-right:34px;max-width:70ch;
  font-size:15px;line-height:1.62;color:var(--bone-dim);
}
.faq__item p a{color:var(--brass);border-bottom:1px solid rgba(210,164,88,.35)}
/* Several answers are lists. Same measure and colour as the paragraphs, with
   the marker in brass so a list reads as part of the answer, not a menu. */
.faq__item ul{
  margin:0 0 20px;padding:0 34px 0 19px;max-width:70ch;
  font-size:15px;line-height:1.62;color:var(--bone-dim);
}
.faq__item p + ul{margin-top:-9px}
.faq__item li{margin:0 0 7px}
.faq__item li:last-child{margin-bottom:0}
.faq__item li::marker{color:var(--brass)}
.faq__item li a{color:var(--brass);border-bottom:1px solid rgba(210,164,88,.35)}
.faq__item ul + p{margin-top:16px}

/* ── About ─────────────────────────────────────────────── */
/* With its heading removed, this section opened with a block of empty space
   where the title used to be. The cards are the content now, so it starts
   where they start. */
#properties{padding-top:clamp(18px,2vw,30px)}
#properties .cards{margin-top:0}
.section--about{background:var(--ink-2)}
/* The short answer and its buttons close the page rather than sitting in the
   hero. The panel keeps its own background, so the section around it stays the
   page colour - two ink-2 blocks in a row would read as one long slab. */
.section--answer .home-answer{margin:0}
.section--answer .hero__cta{margin-top:24px}
.about__lead{margin:16px 0 0;max-width:66ch;font-size:16px;line-height:1.65;color:var(--bone-dim)}
.about__lead a{color:var(--brass);border-bottom:1px solid rgba(210,164,88,.4)}
.about__lead a:hover{color:#e3bb77;border-bottom-color:#e3bb77}
.about__points{
  margin:26px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:10px 12px;
}
.about__points li{
  padding:9px 15px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--font-m);font-size:12px;letter-spacing:.06em;
  color:var(--bone-dim);background:rgba(255,255,255,.02);
}
.section--about .hero__cta{margin-top:30px}


/* ── Motion: entrance, hover, cursor, launch wipe ─────── */
@keyframes cardIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes sheenSweep{0%{opacity:0;transform:translateX(-42%)}22%{opacity:1}100%{opacity:0;transform:translateX(42%)}}

.cards .card{animation:cardIn .7s var(--ease) backwards}
.cards .card:nth-child(1){animation-delay:.06s}
.cards .card:nth-child(2){animation-delay:.16s}
.cards .card:nth-child(3){animation-delay:.26s}

/* hovering one card pulls the other two back, the way the panels used to */
.cards.has-hover .card{transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .3s ease}
.cards.has-hover .card:not(.is-active){opacity:.52}
.card.is-active{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}
.card.is-active .card__media img{transform:scale(1.06);filter:brightness(1.06) contrast(1.02)}
.card.is-active .card__index{opacity:1;transform:translateY(-2px)}
.card__index{transition:opacity .4s ease,transform .5s var(--ease)}

/* light sweeping across the photo as the card takes focus */
.card__sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.20) 48%,transparent 62%);
  transform:translateX(-42%);
}
.card.is-active .card__sheen{animation:sheenSweep 1.15s var(--ease)}

/* the CTA fills with the property accent on focus */
.card.is-active .btn--card{filter:brightness(1.12)}

/* ── 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}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ── 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}
body.is-locked{overflow:hidden}

/* ═══ Tablet ═══════════════════════════════════════════ */
@media (max-width:1080px){
  .cards,.qa{grid-template-columns:repeat(2,1fr)}
  .nav__link--mail{display:none}
}

/* ═══ Mobile ═══════════════════════════════════════════ */
@media (max-width:760px){
  .cards,.qa{grid-template-columns:1fr}
  .hero{padding-top:clamp(34px,9vw,56px)}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .card__media{aspect-ratio:4/5}
}

@media (max-width:420px){
  .btn{padding:13px 18px;font-size:11.5px}
  .foot__row{justify-content:center;text-align:center;font-size:9px;gap:10px}
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}