/* ============================================================
   Chelsea Javier — shared design system
   Forest green (from her logo) primary · coral accent · clean light ground
   Fraunces + Inter.  Tokens live here and in assets/tw-config.js.
   ============================================================ */
:root{
  --green:#2F4430; --greend:#223420; --greenm:#5F6E57; --sage:#CBD4C3;
  --coral:#D47C6A; --corald:#A9543F;
  --ink:#202A1A; --ivory:#F5EFE5; --greige:#B4BDAF;
  --stone:#E9DCCB; --taupe:#6F6553; --textc:#2E2B24;
  /* legacy alias: anything still painted with --clay picks up the brand green */
  --clay:var(--green);
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivory); color:var(--textc);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
::selection{ background:var(--green); color:var(--ivory); }

.font-serif{ font-family:'Fraunces',Georgia,serif; }
.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:var(--green);
}
.display{ font-family:'Fraunces',Georgia,serif; line-height:1.02; letter-spacing:-.015em; font-weight:400; }

/* subtle paper grain */
.grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Motion engine (Framer-Motion-style) ---- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-x{ opacity:0; transform:translateX(-40px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal-x.in{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(.96); transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

/* word-by-word headline reveal */
.word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.22em; margin-bottom:-.22em; padding-right:.16em; margin-right:-.16em; }
.word > span{ display:inline-block; transform:translateY(calc(100% + .35em)); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.word.in > span{ transform:translateY(0); }

/* magnetic / primary button */
.btn-primary{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  background:var(--ink); color:var(--ivory);
  padding:1rem 1.9rem; border-radius:999px; font-weight:500; font-size:.92rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .4s, box-shadow .4s;
  will-change:transform; overflow:hidden;
}
.btn-primary{ background:var(--green); }
.btn-primary:hover{ background:var(--greend); box-shadow:0 18px 40px -14px rgba(47,68,48,.5); }
.btn-primary .arrow{ transition:transform .4s cubic-bezier(.16,1,.3,1); }
.btn-primary:hover .arrow{ transform:translateX(5px); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid rgba(46,43,36,.22); color:var(--ink);
  padding:.95rem 1.7rem; border-radius:999px; font-weight:500; font-size:.92rem;
  transition:border-color .4s, color .4s, background .4s, transform .35s;
}
.btn-ghost:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); }

/* nav underline */
.navlink{ position:relative; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--green); transition:width .4s cubic-bezier(.16,1,.3,1); }
.navlink:hover::after{ width:100%; }
.navlink.nav-active{ color:var(--ink); }
.navlink.nav-active::after{ width:100%; }
.navlink.nav-active{ font-weight:500; }

/* property card */
.prop{ transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; }
.prop:hover{ transform:translateY(-8px); box-shadow:0 40px 70px -34px rgba(32,42,26,.45); }
.prop .pimg{ transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.prop:hover .pimg{ transform:scale(1.06); }
.prop .veil{ opacity:0; transition:opacity .6s; }
.prop:hover .veil{ opacity:1; }

/* generic lift */
.lift{ transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s; }
.lift:hover{ transform:translateY(-6px); box-shadow:0 36px 60px -34px rgba(32,42,26,.4); }

/* neighbourhood row */
.hood{ transition:padding-left .5s cubic-bezier(.16,1,.3,1), color .5s; }
.hood:hover{ padding-left:1.4rem; color:var(--green); }
.hood .harr{ opacity:0; transform:translateX(-12px); transition:opacity .5s, transform .5s; }
.hood:hover .harr{ opacity:1; transform:translateX(0); }

/* hero parallax img */
.parallax{ will-change:transform; }

/* marquee */
@keyframes drift{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee{ animation:drift 38s linear infinite; }

.lang-active{ color:var(--ink)!important; }
.lang-btn{ color:var(--taupe); transition:color .3s; cursor:pointer; }

/* portrait warm-grade touch-up (CSS only, preserves real likeness) */
.portrait-frame{ position:relative; }
.portrait-img{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:saturate(1.02) contrast(1.02);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s;
}
.portrait-frame:hover .portrait-img{ transform:scale(1.035); filter:saturate(1.05) contrast(1.03); }
.portrait-warm{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(47,68,48,.07) 0%, rgba(233,220,203,.04) 48%, rgba(32,42,26,.16) 100%); }
.portrait-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* form fields */
.field{ background:transparent; border:none; border-bottom:1px solid rgba(46,43,36,.22); padding:.7rem 0; transition:border-color .4s; width:100%; }
.field:focus{ outline:none; border-color:var(--green); }
.field::placeholder{ color:var(--taupe); }

/* ---- Listings filter UI ---- */
.chip{
  cursor:pointer; border:1px solid rgba(46,43,36,.16); color:var(--textc);
  background:rgba(255,255,255,.4); padding:.5rem 1.05rem; border-radius:999px;
  font-size:.85rem; font-weight:500; transition:all .3s cubic-bezier(.16,1,.3,1); white-space:nowrap;
}
.chip:hover{ border-color:var(--green); color:var(--green); }
.chip.active{ background:var(--green); color:#fff; border-color:var(--green); }

select.ctrl, .ctrl{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.5); border:1px solid rgba(46,43,36,.16);
  border-radius:12px; padding:.6rem 2.1rem .6rem .9rem; font-size:.86rem; color:var(--textc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%233A4A3A' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; transition:border-color .3s;
}
select.ctrl:focus{ outline:none; border-color:var(--green); }
input[type=range]{ accent-color:var(--green); width:100%; }

/* accordion (FAQ / services) */
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.16,1,.3,1); }
.acc.open .acc-panel{ max-height:520px; }
.acc .acc-ic{ transition:transform .4s cubic-bezier(.16,1,.3,1); }
.acc.open .acc-ic{ transform:rotate(45deg); }

/* fade for filtered cards */
.card-pop{ animation:pop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes pop{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }

/* ============================================================
   2026-09-21 — brand refresh (green primary / coral accent)
   ============================================================ */

/* ---- accent: coral is for emphasis and small details only ---- */
.accent{ color:var(--corald); }
.dot-accent{ background:var(--coral); }
.rule-accent{ background:var(--coral); }
.badge-accent{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--corald); color:#fff; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px;
}

/* ---- keyboard focus (visible on every interactive element) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--green); outline-offset:3px; border-radius:4px;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--green); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 10px;
  font-size:.85rem; transition:top .25s;
}
.skip-link:focus{ top:0; }

/* ---- navigation: balanced three-column bar that holds up on laptops ---- */
.nav-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.75rem, 2.2vw, 2.25rem);
  height:var(--nav-h, 78px);
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(1.25rem, 3vw, 2.5rem);
}
.nav-brand{ display:inline-flex; align-items:center; gap:.55rem; }
.nav-wordmark{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.1rem,1.5vw,1.32rem); letter-spacing:-.01em; color:var(--ink); white-space:nowrap; line-height:1; }
.nav-links{
  display:none; align-items:center; justify-content:center;
  gap:clamp(1.6rem, 4vw, 3.5rem);
  font-size:clamp(.92rem, 1.05vw, 1.02rem); white-space:nowrap;
}
.nav-actions{ display:flex; align-items:center; gap:clamp(.7rem, 1.5vw, 1.35rem); justify-self:end; }
.nav-cta{ padding:.72rem 1.5rem !important; font-size:.87rem !important; font-weight:500 !important;
  box-shadow:0 10px 24px -12px rgba(47,68,48,.55); transition:background .3s, box-shadow .3s, transform .3s; }
.nav-cta:hover{ box-shadow:0 16px 30px -12px rgba(47,68,48,.6); transform:translateY(-1px); }
@media (min-width:1024px){
  .nav-links{ display:flex; }
  .nav-burger{ display:none !important; }
}
/* laptops (1024–1440): keep the row from crowding the CTA */
@media (min-width:1024px) and (max-width:1439px){
  .nav-inner{ gap:clamp(.9rem, 1.8vw, 1.75rem); }
  .nav-links{ gap:clamp(1.4rem, 3vw, 2.9rem); }
}

/* ---- brand strip: her logo + KW Urbain lockup ---- */
.kw-lockup{
  display:inline-flex; align-items:center; gap:clamp(.9rem,2vw,1.6rem);
  background:#fff; border:1px solid var(--stone); border-radius:14px;
  padding:.75rem 1.15rem;
}
.kw-lockup img{ height:26px; width:auto; display:block; }
.kw-lockup .kw-sep{ width:1px; height:28px; background:var(--stone); }

/* ---- Instagram / social cards ---- */
.ig-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.7rem,1.6vw,1.1rem); }
@media (min-width:768px){ .ig-grid{ grid-template-columns:repeat(4,1fr); } }
.ig-card{
  position:relative; display:block; overflow:hidden; border-radius:16px;
  background:var(--sage); aspect-ratio:1/1; border:1px solid var(--stone);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.ig-card:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -28px rgba(32,42,26,.45); }
.ig-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.ig-card:hover img{ transform:scale(1.06); }
.ig-card .ig-veil{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:.85rem;
  background:linear-gradient(180deg,rgba(32,42,26,0) 45%,rgba(32,42,26,.72) 100%);
  color:#fff; font-size:.8rem; line-height:1.35; opacity:0; transition:opacity .45s;
}
.ig-card:hover .ig-veil, .ig-card:focus-visible .ig-veil{ opacity:1; }
.ig-card .ig-mark{
  position:absolute; top:.6rem; right:.6rem; width:26px; height:26px; border-radius:8px;
  background:rgba(255,255,255,.92); color:var(--green);
  display:grid; place-items:center; font-size:.85rem;
}
/* follow card (used when a post slot is empty) */
.ig-follow{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  gap:1rem; background:var(--green); color:#fff; border-radius:16px; padding:1.25rem;
  aspect-ratio:1/1; transition:transform .5s cubic-bezier(.16,1,.3,1), background .4s;
}
.ig-follow:hover{ transform:translateY(-6px); background:var(--greend); }
.ig-follow .ig-handle{ font-size:.9rem; opacity:.85; word-break:break-word; }

/* ---- photo strip (Meet Chelsea gallery) ---- */
.shot{ overflow:hidden; border-radius:18px; border:1px solid var(--stone); background:var(--sage); }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.shot:hover img{ transform:scale(1.05); }

/* screen-reader-only helper */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- form controls must never widen their column (long <option> text) ---- */
input, select, textarea{ max-width:100%; min-width:0; }
select.field{ width:100%; }
.form-panel > *{ min-width:0; }

/* ---- touch targets: 24px minimum for inline links (WCAG 2.5.8) ---- */
.site-foot-links a, .footlink{ display:inline-flex; align-items:center; min-height:28px; }
.linkish{ display:inline-flex; align-items:center; min-height:28px; }

/* ---- reduced motion: show everything immediately, no transforms ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-x, .reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
  .word > span{ transform:none !important; transition:none !important; }
  .marquee{ animation:none !important; }
  .parallax{ transform:none !important; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Instagram: banner shown until Chelsea picks her posts */
.ig-banner{
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.75rem);
  background:var(--green); color:#fff; border-radius:18px;
  padding:clamp(1.25rem,3vw,2rem) clamp(1.35rem,3.5vw,2.5rem);
  transition:background .4s, transform .5s cubic-bezier(.16,1,.3,1);
}
.ig-banner:hover{ background:var(--greend); transform:translateY(-4px); }
.ig-banner__mark{ font-size:1.9rem; line-height:1; }
.ig-banner__text{ display:grid; gap:.2rem; }
.ig-banner__title{ font-family:'Fraunces',Georgia,serif; font-size:clamp(1.15rem,2.4vw,1.5rem); }
.ig-banner__go{ margin-left:auto; font-size:1.3rem; }

/* ---- Team Porras photo composition ---- */
.team-shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.6rem,1.6vw,1rem); align-items:start; }
.team-shots__wide{ grid-column:1 / -1; }
.team-shots__card{
  align-self:center; background:#fff; border:1px solid var(--stone); border-radius:16px;
  padding:clamp(1rem,2.4vw,1.4rem);
}
@media (min-width:1024px){
  .team-shots{ grid-template-columns:1.25fr .75fr; }
  .team-shots__wide{ grid-column:1 / -1; }
}