/* ═══════════════════════════════════════════════════════════
   Ellen Guan 管序瑟 — RE/MAX Westcoast
   Design system
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Warm paper — the whole site sits on these */
  --paper:    #FDFBF7;
  --paper-2:  #F7F2E9;
  --paper-3:  #EFE7D9;

  /* Warm espresso. Used for text and deep accents — never pure black. */
  --ink:      #2E2822;
  --ink-2:    #3A322A;
  --ink-3:    #4A4038;

  --line-l:   rgba(42,36,30,.13);
  --line-d:   rgba(253,251,247,.20);

  /* Text */
  --tx-d:     #2A241E;
  --tx-d-mut: #6B5F52;
  --tx-l:     #FDFBF7;
  --tx-l-mut: rgba(253,251,247,.74);

  /* Champagne. --gold-ink is the AA-safe variant for small text on paper. */
  --gold:     #A87C3C;
  --gold-ink: #8A6A32;
  --gold-2:   #C0A062;
  --gold-3:   #DDC28C;

  /* Type */
  --f-display: 'Cormorant Garamond','Noto Serif SC',Georgia,'Times New Roman',serif;
  --f-sans:    'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --shell: 1240px;
  --pad:   clamp(20px, 5vw, 48px);
  --sec-y: clamp(76px, 9.5vw, 148px);

  --ease:  cubic-bezier(.22,.68,.28,1);
}

/* Chinese typography swaps the display face for a CJK serif */
html[data-lang="zh"]{
  --f-display: 'Noto Serif SC','Cormorant Garamond',Georgia,serif;
  --f-sans:    'Noto Sans SC','Inter',-apple-system,sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--paper); color:var(--tx-d);
  font-family:var(--f-sans); font-size:16px; line-height:1.65;
  font-weight:300; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.12; letter-spacing:-.01em}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
svg{fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--tx-l); padding:.8rem 1.2rem; font-size:.85rem;
}
.skip-link:focus{left:1rem; top:1rem}

:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px}

/* ── Reveal ────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 95ms);
  will-change:opacity, transform;
}
.reveal.is-in{opacity:1; transform:none; will-change:auto}

/* Variants — set with data-reveal so one class still drives the timing. */
[data-reveal="scale"]{transform:translateY(18px) scale(.965)}
[data-reveal="left"]{transform:translateX(-22px)}
[data-reveal="right"]{transform:translateX(22px)}
[data-reveal="fade"]{transform:none}

/* Cards rise a little further and settle with a touch of overshoot. */
.card.reveal{
  transform:translateY(34px) scale(.985);
  transition:opacity .8s var(--ease), transform .8s cubic-bezier(.19,.9,.26,1.06),
             box-shadow .6s var(--ease), border-color .6s var(--ease);
}

/* Section headings draw their gold rule as they arrive. */
.eyebrow::after{transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .2s}
.reveal.is-in .eyebrow::after,
.eyebrow.reveal.is-in::after,
.is-in > .eyebrow::after{transform:scaleX(1)}

/* Listing photos fade up from their own placeholder as they decode. */
.card-media img{opacity:0; transform:scale(1.04); transition:opacity .7s var(--ease), transform 1.1s var(--ease)}
.card-media img.is-loaded{opacity:1; transform:scale(1)}

/* Count-up figures shouldn't reflow as the digits change width. */
.count{display:inline-block; font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,[data-reveal],.card.reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .card-media img{opacity:1 !important; transform:none !important; transition:none !important}
  .eyebrow::after{transform:scaleX(1) !important; transition:none !important}
  .hero-bg img{animation:none !important}
  .hero-portrait{animation:none !important}
}

/* ── Type helpers ──────────────────────────────────────── */
.eyebrow{
  margin:0 0 1.1rem; font-family:var(--f-sans);
  font-size:.7rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-ink); display:flex; align-items:center; gap:.85rem;
  flex-wrap:wrap; min-width:0;
}
.eyebrow::after{content:""; flex:1 1 46px; max-width:46px; height:1px; background:currentColor; opacity:.5}
.eyebrow-light{color:var(--gold-3)}

.section-title{
  font-family:var(--f-display);
  font-size:clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight:300; line-height:1.06; letter-spacing:-.015em;
}
html[data-lang="zh"] .section-title{font-weight:500; letter-spacing:.01em; line-height:1.25}

.section-lede{
  margin-top:1.35rem; max-width:56ch;
  font-size:1.02rem; line-height:1.8; color:var(--tx-d-mut);
}
.section{padding-block:var(--sec-y)}
.section-head{margin-bottom:clamp(2.5rem,5vw,4.2rem); max-width:62ch}

.cn{font-family:var(--f-display); font-weight:400}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:currentColor; --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 1.9rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden; border-radius:2px;
  isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold-2);
  transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease); z-index:-1;
}
.btn:hover::before{transform:scaleX(1); transform-origin:left}
.btn:hover{color:var(--ink); border-color:var(--gold-2)}

.btn-gold{--bg:var(--gold); --fg:#fff; --bd:var(--gold)}
.btn-gold::before{background:#fff}
.btn-gold:hover{color:var(--gold); border-color:var(--gold)}

.btn-outline{--fg:var(--tx-d); --bd:rgba(42,36,30,.32)}
.btn-dark{--bg:var(--ink); --fg:var(--tx-l); --bd:var(--ink)}
.btn-ghost{padding:.62rem .8rem; border-color:transparent; letter-spacing:.06em; text-transform:none; font-size:.86rem}
.btn-ghost::before{display:none}
.btn-ghost:hover{color:var(--gold-2); border-color:transparent}
.btn-block{width:100%; margin-top:.6rem}

.ico{width:15px; height:15px; flex:none; fill:currentColor; stroke:none}

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.1rem;
  font-size:.76rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-2); position:relative; padding-bottom:.4rem;
}
.link-arrow::after{
  content:"→"; transition:transform .45s var(--ease); font-size:.95rem; line-height:1;
}
.link-arrow:hover::after{transform:translateX(6px)}
.link-arrow::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.32; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-arrow:hover::before{transform:scaleX(1)}

/* ═══════════ HEADER ═══════════ */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background-color .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
  border-bottom:1px solid transparent;
}
.header-inner{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.6rem);
  min-height:84px; transition:min-height .5s var(--ease);
}
.site-header.is-stuck{
  background:rgba(253,251,247,.88);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-l);
}
.site-header.is-stuck .header-inner{min-height:68px}

.brand{display:flex; align-items:center; gap:.85rem; color:var(--tx-d); flex:none}
.brand-rule{
  width:1px; height:38px; flex:none; background:var(--gold); opacity:.55;
}
.brand-text{display:flex; flex-direction:column; line-height:1.14}
.brand-name{font-family:var(--f-display); font-size:1.16rem; letter-spacing:.15em}
.brand-cn{font-family:var(--f-display); font-size:1.02rem; letter-spacing:.2em; color:var(--gold-ink); margin-top:1px}
.brand-sub{font-size:.56rem; letter-spacing:.26em; color:var(--tx-d-mut); margin-top:3px}

.nav{display:flex; align-items:center; gap:clamp(.8rem,1.7vw,1.6rem); margin-left:auto}
.nav a{
  position:relative; color:var(--tx-d); font-size:.78rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; padding:.4rem 0; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-ink);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1); transform-origin:left}
.nav a.is-current{color:var(--gold-ink)}

.header-actions{display:flex; align-items:center; gap:.65rem; color:var(--tx-d)}

.nav-socials{
  display:flex; align-items:center; gap:0; margin-left:.75rem;
  padding-left:.85rem; border-left:1px solid var(--line-l);
}
.nav-socials a{
  display:grid; place-items:center; width:27px; height:27px;
  color:var(--tx-d-mut); border-radius:2px;
  transition:color .35s var(--ease), background-color .35s var(--ease);
}
.nav-socials a:hover{color:var(--gold-ink); background:rgba(168,124,60,.09)}
.nav-socials svg{width:15px; height:15px}

.header-mail{padding-inline:.5rem}
.header-mail .ico{width:17px; height:17px; fill:none; stroke:currentColor}

.lang-switch{display:flex; align-items:center; gap:.5rem; flex:none}
.lang-btn{
  background:none; border:0; padding:.3rem .15rem; cursor:pointer;
  font-size:.74rem; font-weight:500; letter-spacing:.12em;
  color:var(--tx-d-mut); transition:color .35s var(--ease);
}
.lang-btn:hover{color:var(--tx-d)}
.lang-btn.is-active{color:var(--gold-ink)}
.lang-sep{width:1px; height:12px; background:var(--line-l)}

.header-call{color:var(--tx-d); white-space:nowrap}

.menu-toggle{
  display:none; width:40px; height:40px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.menu-toggle span{display:block; height:1px; width:22px; background:var(--tx-d); transition:transform .4s var(--ease), opacity .3s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ═══════════ HERO — the agent is the subject ═══════════ */
.hero{
  position:relative; min-height:620px; display:flex; align-items:center;
  overflow:hidden; background:var(--paper); padding-block:clamp(6.5rem,11vh,8rem) clamp(3rem,5vh,4rem);
}
.hero-bg{position:absolute; inset:0}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
  opacity:.30; filter:saturate(.55) brightness(1.28);
  animation:kenburns 30s var(--ease) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.03)} to{transform:scale(1.12)}}

/* Ink scrim: the house is atmosphere, never the headline */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(102deg, rgba(253,251,247,.97) 0%, rgba(253,251,247,.9) 40%, rgba(253,251,247,.66) 70%, rgba(253,251,247,.82) 100%),
    linear-gradient(180deg, rgba(253,251,247,.8) 0%, rgba(253,251,247,.34) 34%, rgba(253,251,247,.94) 100%);
}

.hero-inner{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.66fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center; color:var(--tx-d);
}

.hero-name{
  font-family:var(--f-display); font-weight:300; line-height:.94;
  display:flex; flex-direction:column; gap:.15em; margin-bottom:1.15rem;
}
.hero-name-en{
  font-size:clamp(3.1rem,7.6vw,6.4rem); letter-spacing:-.022em; text-wrap:balance;
}
.hero-name-cn{
  font-family:var(--f-display); font-size:clamp(1.5rem,3.1vw,2.5rem);
  letter-spacing:.34em; color:var(--gold-ink); font-weight:400;
}
html[data-lang="zh"] .hero-name-en{font-size:clamp(2.4rem,5.2vw,4.2rem); letter-spacing:.01em; order:2; color:var(--gold-ink); font-weight:400}
html[data-lang="zh"] .hero-name-cn{font-size:clamp(3.1rem,7.2vw,6rem); letter-spacing:.14em; color:var(--tx-d); order:1; font-weight:500}

.hero-role{
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx-d-mut); padding-bottom:1.5rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line-l); max-width:52ch; white-space:nowrap;
}
html[data-lang="zh"] .hero-role{letter-spacing:.06em; text-transform:none; font-size:.86rem}

.hero-lede{
  max-width:48ch; font-size:clamp(.99rem,1.3vw,1.12rem);
  line-height:1.85; color:var(--tx-d-mut);
}
.hero-lede strong{color:var(--gold-ink); font-weight:500}

.hero-cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem}

/* Portrait panel — feathered in the asset, so no frame fighting it */
.hero-portrait{
  margin:0; position:relative; isolation:isolate; justify-self:center;
  width:100%; max-width:392px;
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity 1.1s var(--ease) .15s, transform 1.1s var(--ease) .15s;
}
.hero-portrait.is-in{opacity:1; transform:none}
/* A breath of drift once it has arrived — barely perceptible, but alive. */
.hero-portrait.is-in img{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(0)} to{transform:translateY(-7px)}}
.hero-portrait img{
  position:relative; z-index:1; width:100%; height:auto; display:block;
  filter:drop-shadow(0 26px 54px rgba(74,64,56,.20));
}

/* ═══════════ CREDENTIALS ═══════════ */
.credentials{background:var(--paper-3); color:var(--tx-d); padding-block:clamp(2.8rem,5vw,4.2rem)}
.cred-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-l)}
.cred{
  background:var(--paper-3); padding:1.7rem clamp(1rem,2vw,1.8rem);
  display:flex; flex-direction:column; gap:.5rem; text-align:center; align-items:center;
}
.cred-num{
  font-family:var(--f-display); font-size:clamp(1.9rem,3.4vw,2.9rem);
  font-weight:400; color:var(--gold-ink); line-height:1; letter-spacing:-.01em;
}
.cred-num sup{font-size:.5em; top:-.6em; position:relative}
.cred-label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-d-mut); line-height:1.6; max-width:22ch;
}
html[data-lang="zh"] .cred-label{letter-spacing:.08em; text-transform:none; font-size:.78rem}

/* ═══════════ LISTINGS ═══════════ */
.listings{background:var(--paper-2)}

.filters{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.6rem}
.chip{
  padding:.62rem 1.35rem; border:1px solid var(--line-l); background:transparent;
  font-size:.71rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-d-mut); cursor:pointer; border-radius:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.chip:hover{color:var(--tx-d); border-color:rgba(42,36,30,.30)}
.chip.is-active{background:var(--ink); border-color:var(--ink); color:var(--paper)}
html[data-lang="zh"] .chip{letter-spacing:.08em; text-transform:none; font-size:.8rem}

.listing-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.1rem,2.2vw,2rem)}

.card{
  background:var(--paper); border:1px solid var(--line-l); border-radius:2px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px -28px rgba(74,64,56,.28);
  border-color:rgba(168,124,60,.45);
}
.card-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.card:hover .card-media img{transform:scale(1.07)}
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 44%, rgba(46,40,34,.68) 100%);
}
.card-price{
  position:absolute; left:1.1rem; bottom:.95rem; z-index:2;
  font-family:var(--f-display); font-size:1.62rem; font-weight:400;
  color:#fff; letter-spacing:-.01em; text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.card-tag{
  position:absolute; top:1rem; left:1.1rem; z-index:2;
  padding:.34rem .7rem; background:rgba(46,40,34,.80);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-3);
}
html[data-lang="zh"] .card-tag{letter-spacing:.08em; text-transform:none; font-size:.68rem}

.card-link{display:flex; flex-direction:column; flex:1; color:inherit}

.card-body{padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; gap:.5rem}
.card-addr{font-family:var(--f-display); font-size:1.32rem; font-weight:500; line-height:1.25; overflow-wrap:anywhere}
html[data-lang="zh"] .card-addr{font-size:1.18rem}
.card-hood{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); overflow-wrap:anywhere}
html[data-lang="zh"] .card-hood{letter-spacing:.06em; text-transform:none; font-size:.8rem}

.card-specs{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; padding-top:.9rem; margin-top:auto;
  border-top:1px solid var(--line-l);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-d-mut);
}
html[data-lang="zh"] .card-specs{letter-spacing:.02em; text-transform:none; font-size:.82rem}
.card-specs b{font-weight:500; color:var(--tx-d)}

.card-cta{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem;
  font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink);
}
.card-cta::after{content:"→"; transition:transform .45s var(--ease)}
.card:hover .card-cta::after{transform:translateX(5px)}
html[data-lang="zh"] .card-cta{letter-spacing:.06em; text-transform:none; font-size:.8rem}

.card-noimg{width:100%; height:100%; background:linear-gradient(140deg,var(--paper-3),var(--paper-2))}

.card-tag-open{background:rgba(138,106,50,.95); color:#fff; letter-spacing:.1em}
html[data-lang="zh"] .card-tag-open{letter-spacing:.04em}

.chip-n{margin-left:.5rem; color:var(--tx-d-mut); font-size:.9em}
.listings-empty{grid-column:1/-1; padding:3rem 0; text-align:center; color:var(--tx-d-mut)}
.listings-meta{
  margin-top:1.1rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);
}
html[data-lang="zh"] .listings-meta{letter-spacing:.05em; text-transform:none; font-size:.82rem}

.listings-foot{margin-top:clamp(2.4rem,4vw,3.6rem); text-align:center}
.fineprint{margin-top:1.1rem; font-size:.8rem; color:var(--tx-d-mut)}

/* ═══════════ TRACK RECORD ═══════════ */
.soldrec{background:var(--paper)}
.card-tag-sold{background:rgba(46,40,34,.88); color:var(--gold-3); letter-spacing:.14em}
html[data-lang="zh"] .card-tag-sold{letter-spacing:.06em}
.card.sold .card-media::after{
  background:linear-gradient(180deg,rgba(46,40,34,.10) 0%, transparent 30%, rgba(46,40,34,.72) 100%);
}
.card-price em{
  display:block; font-family:var(--f-sans); font-style:normal;
  font-size:.56rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.78); margin-bottom:.15rem;
}
html[data-lang="zh"] .card-price em{letter-spacing:.08em; font-size:.62rem}
.card.sold .card-price{font-size:1.45rem}

/* ═══════════ SERVICES ═══════════ */
.svc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-l); border:1px solid var(--line-l)}
.svc{
  background:var(--paper); padding:clamp(1.8rem,2.6vw,2.6rem) clamp(1.4rem,2vw,2rem) clamp(2.1rem,3vw,2.9rem);
  position:relative; transition:background-color .6s var(--ease);
}
.svc:hover{background:var(--paper-2)}
.svc-num{
  font-family:var(--f-display); font-size:.9rem; letter-spacing:.2em; color:var(--gold-ink);
  display:block; margin-bottom:1.5rem;
}
.svc-ico{width:30px; height:30px; color:var(--ink); margin-bottom:1.15rem; opacity:.85}
.svc h3{font-family:var(--f-display); font-size:1.52rem; font-weight:500; margin-bottom:.7rem}
html[data-lang="zh"] .svc h3{font-size:1.35rem}
.svc p{font-size:.9rem; line-height:1.78; color:var(--tx-d-mut)}
.svc::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.svc:hover::after{transform:scaleX(1)}

/* ═══════════ TOOLS BAND ═══════════ */
.tools{
  position:relative;
  background:var(--paper-3) url('../img/band.webp') center/cover no-repeat fixed;
  color:var(--tx-d); padding-block:clamp(3.6rem,7vw,6rem); overflow:hidden;
}
.tools-veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(239,231,217,.93),rgba(247,242,233,.96))}
.tools-inner{position:relative; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:clamp(1.6rem,3vw,3rem); align-items:start}
.tool h3{font-family:var(--f-display); font-size:clamp(1.35rem,2.2vw,1.85rem); font-weight:400; margin-bottom:.7rem}
.tool p{font-size:.9rem; line-height:1.75; color:var(--tx-d-mut); max-width:34ch}
.tool-rule{width:1px; background:var(--line-l); align-self:stretch}

/* ═══════════ APPROACH ═══════════ */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.8rem)}
.step{position:relative; padding-top:1.9rem; border-top:1px solid var(--line-l)}
.step::before{
  content:""; position:absolute; top:-1px; left:0; width:38px; height:2px; background:var(--gold);
}
.step-num{
  font-family:var(--f-display); font-size:.88rem; letter-spacing:.2em;
  color:var(--gold-ink); display:block; margin-bottom:.9rem;
}
.step h3{font-family:var(--f-display); font-size:1.55rem; font-weight:500; margin-bottom:.6rem}
html[data-lang="zh"] .step h3{font-size:1.35rem}
.step p{font-size:.9rem; line-height:1.78; color:var(--tx-d-mut)}

/* ═══════════ ABOUT ═══════════ */
.about{background:var(--paper-2)}
.about-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2.4rem,6vw,6rem); align-items:start}

.about-portrait{position:relative}
.about-portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  border-radius:2px; filter:saturate(.94) contrast(1.02);
}
.about-portrait img{box-shadow:16px 16px 0 -1px var(--paper-2), 17px 17px 0 0 var(--gold)}
.portrait-cap{display:flex; flex-direction:column; gap:.3rem; margin-top:1.9rem}
.portrait-name{font-family:var(--f-display); font-size:1.45rem; font-weight:500}
.portrait-role{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink)}
html[data-lang="zh"] .portrait-role{letter-spacing:.06em; text-transform:none; font-size:.8rem}

.portrait-call{
  display:flex; flex-direction:column; gap:.35rem; margin-top:1.9rem;
  padding:1.15rem 1.3rem; border:1px solid var(--line-l); border-radius:2px;
  background:var(--paper); transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.portrait-call:hover{border-color:var(--gold); transform:translateY(-2px)}
.pc-label{font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-d-mut)}
html[data-lang="zh"] .pc-label{letter-spacing:.04em; text-transform:none; font-size:.76rem}
.pc-num{font-family:var(--f-display); font-size:1.62rem; color:var(--gold-ink)}

.about-lead{font-size:1.1rem; line-height:1.82; margin-top:1.9rem}
.about-body > p + p{margin-top:1.25rem}
.about-body p:not(.about-lead):not(.langs){color:var(--tx-d-mut); font-size:.98rem; line-height:1.85}

.awards{margin-top:2.2rem; display:grid; gap:.05rem; border-top:1px solid var(--line-l)}
.awards li{
  padding:.95rem 0 .95rem 1.9rem; border-bottom:1px solid var(--line-l);
  font-size:.93rem; line-height:1.6; position:relative; color:var(--tx-d);
}
.awards li::before{
  content:""; position:absolute; left:0; top:1.42rem; width:9px; height:9px;
  border:1px solid var(--gold); rotate:45deg;
}

.langs{display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem; margin-top:1.9rem}
.langs-label{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-d-mut)}
html[data-lang="zh"] .langs-label{letter-spacing:.06em; text-transform:none; font-size:.8rem}
.langs-list{font-family:var(--f-display); font-size:1.3rem; color:var(--gold-ink)}

.pullquote{
  margin:2.6rem 0 0; padding:1.9rem 0 0; border-top:1px solid var(--line-l);
}
.pullquote blockquote{
  margin:0; font-family:var(--f-display); font-weight:300; font-style:italic;
  font-size:clamp(1.35rem,2.3vw,1.85rem); line-height:1.4; letter-spacing:-.01em; color:var(--tx-d);
}
html[data-lang="zh"] .pullquote blockquote{font-style:normal; font-weight:500; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.6}
.pullquote figcaption{display:flex; align-items:baseline; gap:.7rem; margin-top:1.2rem}
.sig{font-family:var(--f-display); font-style:italic; font-size:1.32rem; color:var(--gold-ink)}
.sig-cn{font-family:var(--f-display); font-size:1.05rem; letter-spacing:.2em; color:var(--tx-d-mut)}

/* ═══════════ FOLLOW ═══════════ */
.follow{background:var(--paper-2); border-top:1px solid var(--line-l)}
.follow-head{max-width:56ch}
.channels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-l); border:1px solid var(--line-l)}
.channels a{
  display:flex; flex-direction:column; gap:.35rem;
  background:var(--paper); padding:clamp(1.5rem,2.4vw,2.1rem);
  height:100%; position:relative; transition:background-color .5s var(--ease);
}
.channels a:hover{background:var(--ink); color:var(--tx-l)}
.channels a:hover .ch-name{color:var(--tx-l)}
.channels svg{width:24px; height:24px; color:var(--gold); margin-bottom:.85rem; transition:color .5s var(--ease)}
.channels a:hover svg{color:var(--gold-2)}
.ch-name{font-family:var(--f-display); font-size:1.4rem; font-weight:500}
.ch-sub{font-size:.84rem; color:var(--tx-d-mut); line-height:1.6; transition:color .5s var(--ease)}
.channels a:hover .ch-sub{color:var(--tx-l-mut)}

/* ═══════════ CONTACT ═══════════ */
.contact{background:var(--paper-3); color:var(--tx-d)}
.contact .section-title{color:var(--tx-d)}
.contact .section-lede{color:var(--tx-d-mut)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem,4.5vw,4.5rem); align-items:start}

.field{display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.25rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.field label{font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--tx-d-mut)}
html[data-lang="zh"] .field label{letter-spacing:.06em; text-transform:none; font-size:.82rem}
.field .opt{opacity:.6; letter-spacing:.06em; text-transform:none}
.field input,.field select,.field textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(42,36,30,.24);
  padding:.72rem 0; color:var(--tx-d); font-size:.98rem; font-weight:400;
  border-radius:0; transition:border-color .45s var(--ease);
}
.field textarea{resize:vertical; min-height:96px}
.field select{cursor:pointer}
.field select option{background:var(--paper); color:var(--tx-d)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--gold)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--tx-d); -webkit-box-shadow:0 0 0 40px var(--paper-3) inset}

.form-note{margin-top:.95rem; font-size:.78rem; color:var(--tx-d-mut)}
.form-error{margin-top:.7rem; font-size:.84rem; color:#9C3B2E}

.contact-card{border:1px solid var(--line-l); padding:clamp(1.6rem,2.6vw,2.3rem); border-radius:2px; background:var(--paper)}
.contact-card h3{font-family:var(--f-display); font-size:1.5rem; font-weight:400; margin-bottom:1.5rem}
.contact-list{display:grid; gap:1.2rem}
.contact-list dt{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:.3rem}
html[data-lang="zh"] .contact-list dt{letter-spacing:.06em; text-transform:none; font-size:.76rem}
.contact-list dd{font-size:.98rem; line-height:1.65; color:var(--tx-d)}
.contact-list a{transition:color .35s var(--ease)}
.contact-list a:hover{color:var(--gold-ink)}
.remax-mini{display:block; width:96px; height:auto; margin-bottom:.55rem}

.socials-label{
  margin-top:1.9rem; margin-bottom:.85rem;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink);
}
html[data-lang="zh"] .socials-label{letter-spacing:.06em; text-transform:none; font-size:.76rem}
.socials{display:flex; flex-wrap:wrap; gap:.55rem}
.socials a{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--line-l); color:var(--tx-d-mut); border-radius:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.socials a:hover{color:var(--gold-ink); border-color:var(--gold); transform:translateY(-2px)}
.socials svg{width:17px; height:17px}

/* ═══════════ FOOTER ═══════════ */
.site-footer{background:var(--paper-2); color:var(--tx-d-mut); padding-block:clamp(2.8rem,5vw,4.2rem); border-top:1px solid var(--line-l)}
.footer-top{
  display:flex; flex-wrap:wrap; gap:1.8rem 2.5rem; justify-content:space-between;
  align-items:center; padding-bottom:2rem; border-bottom:1px solid var(--line-l);
}
.footer-brand{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap}
.footer-brokerage{
  display:flex; flex-direction:column; gap:.2rem; align-items:flex-start;
  padding-left:1.6rem; border-left:1px solid var(--line-l);
}
.footer-brokerage img{width:104px; height:auto; display:block}
.footer-brokerage span{font-size:.6rem; letter-spacing:.34em; color:var(--tx-d-mut)}
.footer-name{font-family:var(--f-display); font-size:1.25rem; color:var(--tx-d)}
.footer-role{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.2rem}
html[data-lang="zh"] .footer-role{letter-spacing:.05em; text-transform:none; font-size:.8rem}
.footer-nav{display:flex; flex-wrap:wrap; gap:.9rem 1.8rem}
.footer-nav a{font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; transition:color .35s var(--ease)}
.footer-nav a:hover{color:var(--gold-ink)}
html[data-lang="zh"] .footer-nav a{letter-spacing:.06em; text-transform:none; font-size:.84rem}

.mls-note{margin-top:2rem; font-size:.76rem; line-height:1.75; color:var(--tx-d-mut); max-width:110ch}
.copyright{margin-top:1.6rem; font-size:.78rem; color:var(--tx-d-mut)}
.copyright a{transition:color .35s var(--ease)}
.copyright a:hover{color:var(--gold-ink)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1280px){
  .nav-socials{display:none}
}

@media (max-width:1080px){
  .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools-inner{grid-template-columns:minmax(0,1fr); gap:2.2rem}
  .tool-rule{display:none}
  .tool{padding-bottom:2.2rem; border-bottom:1px solid var(--line-d)}
  .tool:last-of-type{border-bottom:0; padding-bottom:0}
  .tools{background-attachment:scroll}
}

@media (max-width:900px){
  .hero{padding-block:6.5rem 4rem}
  .hero-inner{grid-template-columns:minmax(0,1fr); gap:2.4rem; text-align:left}
  .hero-portrait{order:-1; max-width:270px; justify-self:start}
  .hero-role{max-width:none; white-space:normal}
  .channels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{
    /* explicit edges — no `inset` shorthand, so older iOS positions it too */
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(84vw,340px); height:100vh; height:100dvh;
    background:var(--paper);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    gap:1.55rem; padding:5.6rem 2.2rem 2.5rem; margin-left:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(105%); visibility:hidden; pointer-events:none;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
    border-left:1px solid var(--line-l); z-index:99;
  }
  .nav.is-open{
    transform:none; visibility:visible; pointer-events:auto;
    transition:transform .5s var(--ease), visibility 0s;
    /* the huge second shadow dims the page behind, so the drawer reads as a
       solid layer instead of cream-on-cream */
    box-shadow:-16px 0 44px rgba(46,40,34,.16), 0 0 0 100vmax rgba(46,40,34,.32);
  }
  /* .nav is out of flow here, so IT no longer pushes the actions right —
     the actions must carry their own margin-left:auto */
  .header-actions{margin-left:auto; position:relative; z-index:101}
  .nav a{font-size:1.02rem; letter-spacing:.18em}
  .nav-socials{
    display:flex; flex-wrap:wrap; gap:.35rem; margin:1.4rem 0 0;
    padding:1.4rem 0 0; border-left:0; border-top:1px solid var(--line-l);
  }
  .nav-socials a{width:42px; height:42px}
  .nav-socials svg{width:18px; height:18px}
  .nav-socials{gap:.15rem}
  .menu-toggle{display:flex}
  .header-mail{display:none}
  .header-call{display:none}
  .about-grid{grid-template-columns:minmax(0,1fr); gap:2.6rem}
  .about-portrait{max-width:400px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .cred-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.nav-open{overflow:hidden}
}

@media (hover:none){
  .card:active{transform:scale(.985); transition:transform .16s ease-out}
  .card:active .card-media img{transform:scale(1.03)}
  .btn:active{transform:scale(.975); transition:transform .14s ease-out}
  .chip:active{transform:scale(.95); transition:transform .14s ease-out}
  .channels a:active{background:var(--paper-2)}
  .nav-socials a:active{background:rgba(168,124,60,.14)}
  .portrait-call:active{transform:scale(.99)}
  /* Cards arrive one at a time in a single column, so tighten the stagger. */
  .card.reveal{transition-delay:calc(var(--d,0) * 60ms)}
}

@media (max-width:640px){
  /* Wide tracking on long uppercase strings overflows a 390px screen. */
  .eyebrow{letter-spacing:.15em; font-size:.66rem; gap:.6rem}
  .eyebrow::after{flex-basis:26px; max-width:26px}
  .hero-role{letter-spacing:.11em; font-size:.66rem}
  .cred-label,.portrait-role,.card-hood,.card-specs,.listings-meta{letter-spacing:.1em}
  .footer-nav a,.field label{letter-spacing:.1em}

  /* The hero already shows Ellen; a second giant crop right after felt
     heavy on a phone, so the photo goes and the signature block stays. */
  .about-portrait img{display:none}
  .about-portrait{max-width:none}
  .portrait-cap{margin-top:0; padding-top:.4rem; border-top:2px solid var(--gold)}
  .portrait-name{font-size:1.4rem}
  .channels{grid-template-columns:minmax(0,1fr)}
  .hero-portrait{max-width:220px}
  html{scroll-padding-top:70px}
  .header-inner{min-height:70px}
  .brand-sub{display:none}
  .brand-mark{width:38px; height:38px}
  .brand-name{font-size:1rem}
  .brand-cn{font-size:.9rem}
  .hero{min-height:0}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .listing-grid{grid-template-columns:minmax(0,1fr)}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr); gap:1.9rem}
  .field-row{grid-template-columns:minmax(0,1fr); gap:0}
  .footer-top{flex-direction:column; align-items:flex-start}
  .eyebrow::after{flex-basis:28px}
}

@media (max-width:420px){
  .cred-grid{grid-template-columns:minmax(0,1fr)}
}