/* =============================================================================
   addy real estate — v2 "statement / editorial" system
   The chosen direction. Load AFTER tokens.css (this overrides the starter
   primitives). Palette + Outfit come from tokens.css; layout + components here.
   Property tiles reuse the V1 listing-card component (bottom of this file).
   ============================================================================= */

:root{
  --paper:#FFFFFF; --paper-2:var(--n-50); --ink:var(--addy-ink);
  --violet:var(--addy-violet); --lime:var(--addy-lime); --slate:var(--addy-slate);
  --edge:#E4E6EB;
  --pad:clamp(20px,5vw,72px);
  --maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif; font-weight:400; line-height:1.6;
  font-size:clamp(16px,1.05vw,18px); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
p{margin:0 0 1rem;}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;}
.muted{color:var(--slate);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;font-weight:700;}
.skip-link:focus{top:16px;}

a:focus-visible,button:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:2px;}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:inherit; font-weight:700;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
  padding:12px 20px; border-radius:999px; font-size:.92rem;
  transition:transform .15s, background .2s, color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn--lime{background:var(--lime); border-color:var(--lime); color:var(--ink);}
.btn--ghost{background:transparent; color:var(--ink);}
.btn--ghost:hover{background:var(--ink); color:#fff;}
.btn--lg{padding:16px 28px; font-size:1.05rem;}

/* ---- header ---- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--edge);}
header.site .row{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px;}
header.site nav{display:flex; gap:28px; margin-left:auto; margin-right:28px;}
header.site nav a{font-size:.9rem; font-weight:600; color:var(--ink);}
header.site nav a:hover{color:var(--violet);}
header.site nav a[aria-current="page"]{color:var(--violet);}
/* 42px tall renders the wordmark ~98px wide, clearing the brand kit's 90px
   minimum wordmark width. */
.logo img{height:42px; width:auto;}
.nav-toggle{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px;}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .15s;}
.nav-toggle span + span{margin-top:5px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:860px){
  header.site nav{position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    margin:0; background:var(--paper); border-bottom:1px solid var(--edge); padding:8px 20px 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;}
  header.site nav.is-open{transform:none; opacity:1; pointer-events:auto;}
  header.site nav a{padding:16px 0; font-size:1rem; border-bottom:1px solid var(--edge);}
  .nav-toggle{display:block;}
  header.site .row .btn{display:none;}
}

/* ---- hero ---- */
.hero{padding:clamp(48px,8vw,110px) 0 clamp(40px,6vw,80px);}
.hero .kick{display:flex; align-items:center; gap:16px; margin-bottom:28px;}
.hero .kick .eyebrow{color:var(--ink);}
.hero .kick .line{height:1px; background:var(--edge); flex:1;}
/* keep each side of the kick on one line on small phones */
@media(max-width:520px){
  .hero .kick{gap:12px;}
  .hero .kick .eyebrow{font-size:.6rem; letter-spacing:.15em; white-space:nowrap;}
}
.display{font-weight:900; letter-spacing:-.025em; line-height:1.04;
  font-size:clamp(3.4rem,13vw,11rem); margin:0; text-wrap:balance;}
.display .hollow{color:transparent; -webkit-text-stroke:2px var(--ink);}
@supports not ((-webkit-text-stroke:1px black)){ .display .hollow{color:var(--ink);} }
.display .lime{color:var(--violet);}
/* rotating tagline word: simple / honest / people / service.
   The words are stacked in one spot and cross-fade, each rising in from below
   and dropping back out below (all motion stays at/under the baseline, so it
   never touches the line above and there is nothing to clip). One word shows at
   a time. The hidden sizer reserves the box size; reduced-motion pins "simple." */
.roller{position:relative; display:inline-block; vertical-align:bottom; line-height:1;}
.roller__sizer{visibility:hidden;}
.rw{position:absolute; left:0; top:0; color:var(--violet); white-space:nowrap;
  opacity:0; will-change:opacity, transform;
  animation:word 9.6s cubic-bezier(.65,0,.35,1) infinite;}
.rw:nth-child(2){animation-delay:0s;}      /* simple */
.rw:nth-child(3){animation-delay:2.4s;}    /* honest */
.rw:nth-child(4){animation-delay:4.8s;}    /* people  */
.rw:nth-child(5){animation-delay:7.2s;}    /* service */
@keyframes word{
  0%   {opacity:0; transform:translateY(0.5em);}   /* wait below the line, faint */
  8%   {opacity:1; transform:translateY(0);}        /* rise up into place */
  25%  {opacity:1; transform:translateY(0);}        /* hold, readable */
  33%  {opacity:0; transform:translateY(0.5em);}    /* drop back down & out */
  100% {opacity:0; transform:translateY(0.5em);}
}
@media(prefers-reduced-motion:reduce){
  .rw{animation:none; opacity:0; transform:none;}
  .rw:nth-child(2){opacity:1;}   /* show "simple." at rest */
}
.hero__grid{display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(24px,4vw,64px);
  align-items:end; margin-top:clamp(28px,4vw,52px);}
@media(max-width:820px){ .hero__grid{grid-template-columns:1fr; align-items:start;} }
.hero__lead{font-size:clamp(1.05rem,1.6vw,1.35rem); max-width:34ch; color:#2a2a30;}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
/* the brand trio: all three colours are on screen at all times, and which
   square wears which colour is reshuffled in time with the hero tagline word
   (the homepage script listens to the .rw animation, so they change together).
   css only sets the resting state, so it still looks right without js. */
.trio{display:flex; flex-direction:column; gap:6px;}
.trio i{width:26px; height:26px; border-radius:8px; display:block;
  transition:background-color .5s cubic-bezier(.65,0,.35,1);}
.trio i:nth-child(1){background:var(--lime);}
.trio i:nth-child(2){background:var(--violet);}
.trio i:nth-child(3){background:var(--slate);}

/* ---- marquee ---- */
.marquee{border-block:1px solid var(--ink); background:var(--ink); color:#fff; overflow:hidden;}
.marquee__track{display:flex; gap:0; width:max-content; animation:scroll 34s linear infinite;}
.marquee__track span{font-weight:800; font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:-.01em;
  padding:16px 0; white-space:nowrap;}
/* separators are the brand's rounded square, not a dot. Sized in em so they
   scale with the marquee text; radius is 0.32 x the square, per the brand kit. */
.marquee__track span b{display:inline-block; width:.42em; height:.42em; border-radius:.135em;
  background:var(--lime); margin:0 22px; vertical-align:middle;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ---- section heads ---- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(32px,5vw,64px);}
.section-head h2{font-size:clamp(2rem,4.5vw,3.4rem); font-weight:900; letter-spacing:-.018em;
  line-height:1; margin:0; max-width:16ch;}

/* ---- services spine ---- */
.spine{padding:clamp(56px,8vw,120px) 0;}
.svc{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,56px);
  align-items:center; padding:clamp(26px,3.5vw,40px) 0; border-top:1px solid var(--edge);}
.svc:last-child{border-bottom:1px solid var(--edge);}
.svc__mark{width:34px; height:34px; border-radius:9px;}
.svc__title{font-size:clamp(1.8rem,4vw,3rem); font-weight:800; letter-spacing:-.018em; margin:0; line-height:1;}
.svc__desc{color:#2a2a30; max-width:52ch; margin:8px 0 0;}
.svc__go{font-weight:700; white-space:nowrap; color:var(--violet); display:inline-flex; gap:.4em;}
.svc:hover .svc__title{color:var(--violet);}
@media(max-width:720px){ .svc{grid-template-columns:auto 1fr;} .svc__go{grid-column:2; margin-top:8px;} }

/* ---- statement (violet full-bleed) ---- */
.statement{background:var(--violet); color:#fff; padding:clamp(64px,10vw,140px) 0;}
.statement p{font-size:clamp(1.8rem,4.6vw,3.6rem); font-weight:800; letter-spacing:-.018em;
  line-height:1.05; margin:0; max-width:20ch; text-wrap:balance;}
.statement .hl{background:var(--lime); color:var(--ink); padding:0 .12em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.statement .sig{margin-top:28px; font-weight:600; font-size:1.05rem; opacity:.85;}

/* ---- featured / listings sections ---- */
.feat{padding:clamp(56px,8vw,120px) 0;}

/* ---- stats (black band) ---- */
.stats{background:var(--ink); color:#fff; padding:clamp(48px,7vw,96px) 0;}
.stats__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px);}
@media(max-width:640px){ .stats__grid{grid-template-columns:1fr; gap:32px;} }
.stat b{display:block; font-size:clamp(3rem,7vw,5.5rem); font-weight:900; letter-spacing:-.025em; line-height:.9;}
.stat.hero-num b{color:var(--lime);}
.stat span{color:var(--slate); font-weight:500;}

/* ---- finale (lime full-bleed) ---- */
.finale{background:var(--lime); color:var(--ink); padding:clamp(64px,10vw,150px) 0; text-align:center;}
.finale h2{font-size:clamp(2.4rem,7vw,5.5rem); font-weight:900; letter-spacing:-.025em; line-height:.92;
  margin:0 auto; max-width:16ch; text-wrap:balance;}
.finale p{font-size:1.15rem; max-width:44ch; margin:20px auto 0; font-weight:500;}
.finale .btn{margin-top:32px;}

/* ---- page hero (for inner pages we migrate) ---- */
.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(32px,4vw,56px); border-bottom:1px solid var(--edge);}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.5rem); font-weight:900; letter-spacing:-.025em; line-height:.95; margin:0 0 16px;}
.page-hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem); color:#2a2a30; max-width:52ch; margin:0;}
.section{padding:clamp(48px,7vw,96px) 0;}
.prose{max-width:68ch;}
.prose p{color:#2a2a30;}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; letter-spacing:-.01em; margin:2.5rem 0 .75rem;}
.prose h3{font-size:1.3rem; font-weight:700; margin:2rem 0 .5rem;}

/* ---- pill tabs (used by /sell-manage and /appraisal) ---- */
.page-hero .lead{margin-bottom:0;}
.smtabs{display:flex; justify-content:center; margin-top:clamp(28px,4vw,44px);}
.smtabs__list{display:inline-flex; gap:6px; background:var(--paper-2); border:1px solid var(--edge);
  border-radius:999px; padding:6px;}
.smtabs__tab{appearance:none; border:0; background:transparent; font:inherit; font-weight:700;
  font-size:1.05rem; color:var(--slate); cursor:pointer; padding:12px 40px; border-radius:999px;
  transition:background .2s, color .2s;}
.smtabs__tab[aria-selected="true"]{background:var(--violet); color:#fff;}
.smtabs__tab:not([aria-selected="true"]):hover{color:var(--ink);}
@media(max-width:520px){ .smtabs__tab{padding:12px 24px; flex:1;} .smtabs__list{width:100%;} }
.smpanel[hidden]{display:none;}

/* ---- forms (appraisal, contact) ---- */
.formwrap{max-width:760px;}
.form-card{background:#fff; border:1px solid var(--edge); border-radius:20px;
  padding:clamp(24px,3.5vw,44px); box-shadow:0 1px 3px rgba(16,16,26,.06);}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field > label{font-weight:600; font-size:.92rem;}
.field .req{color:var(--violet);}
.field .hint{color:var(--slate); font-size:.85rem;}
.finput{font:inherit; color:var(--ink); background:#fff; width:100%;
  border:1.5px solid var(--edge); border-radius:12px; padding:13px 14px;
  transition:border-color .15s, box-shadow .15s;}
.finput::placeholder{color:#9a9aa2;}
.finput:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(125,57,235,.18);}
select.finput{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235C5C64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;}
textarea.finput{min-height:130px; resize:vertical;}
.field-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.field-row--2{grid-template-columns:repeat(2,1fr);}
@media(max-width:560px){ .field-row, .field-row--2{grid-template-columns:1fr; gap:0;} }
.form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:8px;}
.form-note{color:var(--slate); font-size:.88rem; margin:0;}
/* honeypot: hidden from people, visible to bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---- footer ---- */
footer.site{background:var(--ink); color:#fff; padding:clamp(48px,6vw,80px) 0 40px;}
.foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:32px; border-bottom:1px solid #242424;}
@media(max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .foot__grid{grid-template-columns:1fr;} }
.foot__grid img{height:44px;}
.foot__tag{margin:16px 0 12px; font-weight:600; color:#fff;}
.foot__contact{color:var(--n-300); font-size:.9rem; line-height:1.7; font-style:normal;}
.foot__contact a{color:#fff;}
.foot__col{display:flex; flex-direction:column; gap:12px;}
.foot__col h2{font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--slate); margin:0 0 4px;}
.foot__col a{color:var(--n-300); font-size:.9rem;}
.foot__col a:hover{color:#fff;}
.foot__bar{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-top:24px; color:#8a8a90; font-size:.8rem; flex-wrap:wrap;}
.ticks{display:inline-flex; gap:6px;}
.ticks i{width:14px; height:14px; border-radius:4px; display:block;}
/* REIACT membership badge: sits with the brand ticks, deliberately quiet */
.foot__bar-right{display:inline-flex; align-items:center; gap:20px;}
.foot__memberlogo{display:block; opacity:.75; transition:opacity .2s;}
.foot__memberlogo:hover{opacity:1;}
.foot__memberlogo img{display:block; height:40px; width:auto;}

/* ---- reveal on scroll ---- */
.rv{opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1; transform:none;}

@media(prefers-reduced-motion:reduce){
  .trio i{transition:none;}   /* js also stops shuffling them */
  .marquee__track{animation:none;}
  .rv{opacity:1; transform:none; transition:none;}
  .btn:hover{transform:none;}
}

/* =============================================================================
   PROPERTY LISTING CARD  (kept from V1 — the blend the client asked for)
   Sits on the white editorial ground; white card + hairline + soft shadow.
   Reused by the listings function pages (render.ts) once those are migrated.
   ============================================================================= */
.listings-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:1024px){ .listings-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .listings-grid{grid-template-columns:1fr;} }

.card{background:#fff; border:1px solid var(--edge); border-radius:16px; box-shadow:0 1px 3px rgba(16,16,26,.08);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1);}
.card--interactive:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(16,16,26,.12);}

.listing-card{position:relative; overflow:hidden; border-radius:16px; display:flex; flex-direction:column;}
.listing-card__media{position:relative; aspect-ratio:16/11; background:linear-gradient(135deg,var(--n-300),var(--n-400));}
.listing-card__media img{width:100%; height:100%; object-fit:cover;}
.listing-card__media .tag{position:absolute; top:12px; left:12px;}
.listing-card__body{padding:20px; display:flex; flex-direction:column; gap:12px; flex:1;}
.listing-card__price{font-size:1.5rem; font-weight:800; letter-spacing:-.01em; color:var(--ink);}
.listing-card__addr{font-size:.875rem; color:var(--slate); margin:0;}
.listing-card__divider{border:0; border-top:1px solid var(--edge); margin:8px 0 0;}
.listing-card__foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.listing-card__agent{display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--slate);}
.listing-card__view{font-weight:700; color:var(--violet); font-size:.875rem;}
.listing-card a.stretched::after{content:""; position:absolute; inset:0;}

.pills{display:flex; flex-wrap:wrap; gap:8px;}
.pill{display:inline-flex; align-items:center; gap:4px; background:var(--n-50); border:1px solid var(--edge);
  border-radius:999px; padding:5px 11px; font-size:.8125rem; font-weight:500; color:var(--slate);}

/* status pills (mirror tokens.css so pages loading v2.css alone still get them) */
.tag{display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px;}
.tag--sale{background:var(--violet); color:#fff;}
.tag--sold{background:var(--lime); color:var(--ink);}
.tag--lease{background:var(--slate); color:var(--ink);}