:root{
    --bg:#0B0D1C; --bg-2:#12152B; --surface:#171B33; --surface-2:#1E2340;
    --line:#2A3052; --line-2:#3A4268;
    --fg:#F0F2F8; --fg-2:#A8B0C8; --fg-3:#8790B0;

    /* brand, one job each */
    --sky:#54C8E8;       /* data, labels, metrics                    */
    --ember:#FF6C37;     /* the single primary action. nothing else. */
    --ember-ink:#0B0D1C;
    --jade:#5FBF95;      /* status: active                           */
    --logo-ink:#F0F2F8;  /* logo wordmark, theme-aware               */
    --logo-accent:#54C8E8;

    /* Didot/Bodoni are the luxury-property vernacular; both ship with macOS.
       Songti SC carries the same high-contrast serif feel through Chinese. */
    --f-display:Didot,"Bodoni 72","Playfair Display","Songti SC","Source Han Serif SC",Georgia,serif;
    --f-ui:-apple-system,system-ui,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB",sans-serif;
    --f-prose:"Iowan Old Style",Georgia,"Songti SC","Source Han Serif SC",serif;
    --f-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    --gut:clamp(1.25rem,4vw,3.5rem);
    --max:78rem;
    --tight:-.012em;
  }
  @media (prefers-color-scheme:light){
    :root{
      --bg:#EDEFF4; --bg-2:#E3E7EE; --surface:#FFFFFF; --surface-2:#F5F7FA;
      --line:#D2D8E2; --line-2:#B6BFCE;
      --fg:#12162A; --fg-2:#4A5468; --fg-3:#636C80;
      --sky:#186F8C; --ember:#C94509; --ember-ink:#FFFFFF; --jade:#2F7A56;
      --logo-ink:#1E1545; --logo-accent:#3FA9CC;
    }
  }
  :root[data-theme="light"]{
    --bg:#EDEFF4; --bg-2:#E3E7EE; --surface:#FFFFFF; --surface-2:#F5F7FA;
    --line:#D2D8E2; --line-2:#B6BFCE;
    --fg:#12162A; --fg-2:#4A5468; --fg-3:#636C80;
    --sky:#186F8C; --ember:#C94509; --ember-ink:#FFFFFF; --jade:#2F7A56;
    --logo-ink:#1E1545; --logo-accent:#3FA9CC;
  }
  :root[data-theme="dark"]{
    --bg:#0B0D1C; --bg-2:#12152B; --surface:#171B33; --surface-2:#1E2340;
    --line:#2A3052; --line-2:#3A4268;
    --fg:#F0F2F8; --fg-2:#A8B0C8; --fg-3:#8790B0;
    --sky:#54C8E8; --ember:#FF6C37; --ember-ink:#0B0D1C; --jade:#5FBF95;
    --logo-ink:#F0F2F8; --logo-accent:#54C8E8;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ui);
       line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);}
  img{max-width:100%;display:block;}

  :root[data-lang="zh"] .disp,
  :root[data-lang="zh"] h1,:root[data-lang="zh"] h2,:root[data-lang="zh"] h3{
    letter-spacing:.04em;font-family:var(--f-display);font-weight:500;}
  :root[data-lang="zh"] .prose{line-height:1.85;}

  .lbl{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.3em;
       text-transform:uppercase;color:var(--sky);}
  .disp{font-family:var(--f-display);font-weight:400;letter-spacing:var(--tight);
       line-height:1.04;text-wrap:balance;}
  .prose{font-family:var(--f-prose);color:var(--fg-2);line-height:1.7;}

  /* ── nav ── */
  header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);
             backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
  .nav-in{display:flex;align-items:center;gap:1.5rem;height:4.5rem;}
  .mark{display:flex;align-items:center;text-decoration:none;flex:none;}
  .mark svg{height:2.35rem;width:auto;display:block;}
  nav.links{margin-left:auto;display:flex;gap:1.6rem;}
  nav.links a{color:var(--fg-2);text-decoration:none;font-size:.87rem;font-weight:500;
              padding:.3rem 0;border-bottom:1.5px solid transparent;}
  nav.links a:hover,nav.links a:focus-visible{color:var(--fg);border-bottom-color:var(--sky);}
  .lang{display:flex;border:1px solid var(--line-2);font-family:var(--f-mono);font-size:.68rem;flex:none;}
  .lang button{background:none;border:0;color:var(--fg-3);padding:.4rem .6rem;cursor:pointer;
               font:inherit;letter-spacing:.08em;}
  .lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg);font-weight:700;}
  @media (max-width:880px){
    .nav-in{height:auto;flex-wrap:wrap;padding-block:.75rem;row-gap:.6rem;}
    nav.links{order:3;width:100%;margin-left:0;gap:1.25rem;overflow-x:auto;
              scrollbar-width:none;padding-bottom:.15rem;}
    nav.links::-webkit-scrollbar{display:none;}
    nav.links a{white-space:nowrap;font-size:.82rem;}
    .lang{margin-left:auto;}
  }

  /* ── hero: one full-bleed plate, type sitting in the quiet corner ── */
  .hero{position:relative;min-height:min(88vh,46rem);display:flex;align-items:flex-end;
        border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg-2);}
  .hero-img{position:absolute;inset:0;}
  .hero-img img{width:100%;height:100%;object-fit:cover;}
  .hero-img::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(6,8,20,.90) 0%,rgba(6,8,20,.74) 34%,
      rgba(6,8,20,.34) 62%,rgba(6,8,20,.20) 100%);}
  .hero-in{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;
           padding-inline:var(--gut);padding-block:clamp(4rem,11vw,7.5rem);}
  .hero .lbl{color:#8FDCF2;}
  .hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:1.4rem 0 0;color:#FFFFFF;
           font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;
           line-height:1.03;max-width:16ch;text-wrap:balance;}
  .hero h1 .em{color:#8FDCF2;font-style:italic;}
  .hero .sell{max-width:40ch;margin-top:1.6rem;font-size:1.06rem;color:#D3D8E8;}
  .cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem;align-items:center;}
  .btn{background:var(--ember);color:#0B0D1C;border:0;font-family:var(--f-ui);font-weight:700;
       font-size:.88rem;letter-spacing:.02em;padding:1rem 1.9rem;cursor:pointer;
       text-decoration:none;display:inline-flex;align-items:center;min-height:3rem;}
  .btn:hover{filter:brightness(1.08);}
  .btn-ghost{background:none;color:#FFFFFF;border:1px solid rgba(255,255,255,.42);font-weight:600;}
  .btn-ghost:hover{border-color:#FFFFFF;background:rgba(255,255,255,.08);filter:none;}
  .hero-credit{position:absolute;right:var(--gut);bottom:1.5rem;z-index:1;
    font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.62);text-align:right;}
  @media (max-width:720px){.hero-credit{display:none;}}


  /* ── sections ── */
  section.blk{padding-block:clamp(4.5rem,10vw,8rem);border-bottom:1px solid var(--line);}
  .sec-top{display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:flex-end;margin-bottom:3.25rem;}
  .sec-top h2{font-family:var(--f-display);font-size:clamp(2rem,4.6vw,3.3rem);margin:.9rem 0 0;
              font-weight:400;letter-spacing:var(--tight);line-height:1.08;}
  .sec-top .prose{max-width:46ch;margin:.7rem 0 0;font-size:.98rem;}
  .filters{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap;}
  .filters button{background:none;border:1px solid var(--line-2);color:var(--fg-2);
                  font:inherit;font-size:.78rem;font-weight:600;padding:.45rem .9rem;cursor:pointer;
                  min-height:2.2rem;}
  .filters button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg);}

  /* ── listing grid ── */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:2rem;}
  .card{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;
        text-decoration:none;color:inherit;}
  .card:hover{border-color:var(--line-2);}
  .card:hover .shot img{transform:scale(1.035);}
  .card:focus-visible{outline:2px solid var(--sky);outline-offset:2px;}
  .shot{aspect-ratio:3/2;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
        background:var(--surface-2);}
  .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .tag{position:absolute;top:.7rem;left:.7rem;font-family:var(--f-mono);font-size:.58rem;
       letter-spacing:.14em;text-transform:uppercase;padding:.28rem .5rem;font-weight:700;
       background:var(--bg);color:var(--fg);}
  .tag.is-active{background:var(--jade);color:#08170F;}
  .tag.is-lease{background:var(--sky);color:#FFFFFF;font-size:.7rem;padding:.38rem .65rem;
                letter-spacing:.12em;box-shadow:0 2px 10px rgba(0,0,0,.22);}
  .tag.is-sold{background:#C9232D;color:#FFFFFF;font-size:.76rem;padding:.42rem .72rem;
               letter-spacing:.12em;box-shadow:0 2px 10px rgba(0,0,0,.28);}
  .tag.is-bought{background:var(--ember);color:#1A1320;font-size:.76rem;padding:.42rem .72rem;
                 letter-spacing:.12em;box-shadow:0 2px 10px rgba(0,0,0,.22);}
  .card-link{display:inline-block;margin-top:1.1rem;color:var(--sky);font-size:.76rem;font-weight:800;
             letter-spacing:.04em;text-transform:uppercase;}
  .card .body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1;}
  .card .p{font-family:var(--f-display);font-size:1.45rem;font-weight:400;letter-spacing:-.01em;
           font-variant-numeric:tabular-nums;}
  .card .a{font-family:var(--f-display);font-size:1.02rem;font-weight:400;margin-top:.45rem;}
  .card .m{font-family:var(--f-mono);font-size:.66rem;color:var(--fg-3);letter-spacing:.05em;margin-top:.1rem;}
  .card .sp{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line);
            font-family:var(--f-mono);font-size:.68rem;color:var(--fg-2);letter-spacing:.04em;}

  /* ── precon rail ──
     1px dividers are drawn by each cell's box-shadow, not by the container's
     background showing through the gap — otherwise a part-filled last row
     leaves visible grey holes at some column counts. */
  .rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1px;
        background:var(--surface);border:1px solid var(--line);}
  .pc{background:var(--surface);display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line);}
  .pc .ph{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line);}
  .pc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .pc:hover .ph img{transform:scale(1.04);}
  .pc .info{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;flex:1;}
  .pc .from{font-family:var(--f-mono);font-size:.7rem;color:var(--sky);letter-spacing:.06em;}
  .pc .nm{font-family:var(--f-display);font-size:1.2rem;font-weight:400;letter-spacing:-.01em;margin-top:.4rem;}
  .pc .dsc{font-family:var(--f-prose);font-size:.86rem;color:var(--fg-2);line-height:1.55;margin-top:.4rem;}
  .pc .vip{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
           color:var(--fg-3);margin-top:.9rem;padding-top:.6rem;border-top:1px solid var(--line);}

  /* ── team ── */
  .team{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.5rem;}
  .mem{display:flex;flex-direction:column;}
  .mem .av{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line);
           margin-bottom:.85rem;overflow:hidden;}
  .mem .av img{width:100%;height:100%;object-fit:cover;}
  .mem .n{font-family:var(--f-display);font-size:1.2rem;font-weight:400;letter-spacing:-.01em;}
  .mem .r{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
          color:var(--sky);margin-top:.25rem;}
  .mem .b{font-family:var(--f-prose);font-size:.86rem;color:var(--fg-2);margin-top:.45rem;line-height:1.5;}

  /* ── contact ── */
  .paths{display:grid;grid-template-columns:1.25fr 1fr;gap:1.5rem;}
  @media (max-width:820px){.paths{grid-template-columns:1fr;}}
  .panel{background:var(--surface);border:1px solid var(--line);padding:1.6rem;}
  .panel h3{font-family:var(--f-display);margin:.7rem 0 .5rem;font-size:1.6rem;font-weight:400;letter-spacing:-.01em;}
  .field{display:flex;flex-direction:column;gap:.3rem;margin-top:.9rem;}
  .field label{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;
               text-transform:uppercase;color:var(--fg-3);}
  .field input,.field select{background:var(--bg);border:1px solid var(--line-2);
    color:var(--fg);font:inherit;font-size:.9rem;padding:.6rem .7rem;min-height:2.6rem;width:100%;}
  .field input:focus,.field select:focus{outline:2px solid var(--sky);outline-offset:-1px;border-color:var(--sky);}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
  @media (max-width:520px){.two{grid-template-columns:1fr;}}
  /* A QR needs a light quiet zone to scan — keep the plate white in both themes. */
  /* height:auto is required — the img's height attribute otherwise wins over
     aspect-ratio and stretches the code out of square, which breaks scanning. */
  .qr{width:100%;height:auto;aspect-ratio:1;max-width:11rem;background:#fff;
      border:1px solid var(--line);display:block;margin-top:.9rem;padding:.7rem;
      image-rendering:pixelated;}
  .wc-note{font-family:var(--f-mono);font-size:.66rem;color:var(--fg-3);margin-top:.7rem;
           line-height:1.7;letter-spacing:.04em;}
  .tel{display:flex;flex-direction:column;gap:.35rem;margin-top:1.1rem;padding-top:1.1rem;
       border-top:1px solid var(--line);}
  .tel a{color:var(--fg);text-decoration:none;font-weight:700;font-size:1.05rem;
         font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
  .tel .ad{font-family:var(--f-prose);font-size:.86rem;color:var(--fg-2);margin-top:.3rem;}

  footer{padding-block:2.5rem 3.5rem;}
  .foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
        font-family:var(--f-mono);font-size:.66rem;color:var(--fg-3);letter-spacing:.07em;}
  .foot .spacer{margin-left:auto;}

  .concept-note{background:var(--surface-2);border:1px dashed var(--line-2);padding:1rem 1.15rem;
                font-family:var(--f-mono);font-size:.7rem;line-height:1.8;color:var(--fg-2);
                letter-spacing:.03em;margin-top:2rem;}
  .concept-note .k{color:var(--sky);font-weight:700;}

  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}